/*==============================================================================================*/
/*ESTILO PARA LOS CHECKBOXES LIST*/
/*==============================================================================================*/
    .cbl_tabla {
      display: flex;
      flex-direction: column;
      /*width: 350px;*/
      border: 1px solid #ccc;
      border-radius: 6px;
      font-family: Arial, sans-serif;
    }

    .cbl_cabecera {
      display: flex;
      background-color: #f0f0f0;
      font-weight: bold;
      padding: 6px;
      height:40px;
    }

    .cbl_contenido_scroll {
      /*max-height: 200px;*/
      overflow-y: auto;
    }

    .cbl_fila {
      display: flex;
      border-bottom: 1px solid #eee;
      padding: 4px;
      height:30px;
    }

    .cbl_col_chk {
      /*padding: 5px;*/
      /*display: flex;*/
      align-items: center;
      /*justify-content: center;*/
      box-sizing: border-box;
    }

    .cbl_col {
      display: flex;
      align-items: center;
      /*padding: 4px 4px;*/
      box-sizing: border-box;
      /*font-size: 0.5em;*/
    }    

    .cbl_col_10 { width: 30px; }
    .cbl_col_20 { width: 20%; }
    .cbl_col_30 { width: 30%; }
    .cbl_col_40 { width: 40%; }
    .cbl_col_50 { width: 50%; }
    .cbl_col_60 { width: 60%; }
    .cbl_col_70 { width: 70%; }
    .cbl_col_80 { width: 80%; }
    .cbl_col_90 { width: 90%; }    
    
    @media (max-width: 600px) {
      .cbl_cabecera, .cbl_fila {
        flex-direction: column;
      }

      .cbl_col_10, .cbl_col_20, .cbl_col_30, .cbl_col_40, .cbl_col_50, .cbl_col_60, .cbl_col_70 , .cbl_col_80 , .cbl_col_90
      {
        width: 100% !important;
      }

      .cbl_cabecera {
        /*display: none;*/
      }
    }

    /* === Dark Mode === */
    body.dark .cbl_cabecera {
    background-color: #2a2a2a;
    }