/* Importing styles from FontAwsome && GoolgeFonts => 'Roboto', sans-serif */
@import url('../lib.css');
/* Importing style radgrids_reset : reseting style of telerik framework */
@import url('cbl_radgrids_reset.css');




/* border-radius:4px; */

.container .RadGrid .rgMasterTable .rgRow .rgEdit,
.container .RadGrid .rgMasterTable .rgAltRow .rgEdit,
.container .RadGrid .rgMasterTable .rgRow .rgediting,
.container .RadGrid .rgMasterTable .rgAltRow .rgediting,
.container .RadGrid .rgMasterTable .rgRow .rgEditInline,
.container .RadGrid .rgMasterTable .rgAltRow .rgEditInline,
.container .RadGrid td div.rgEditForm .rgUpdate,
.container .RadGrid td div.rgEditForm .rgCancel,
.container .RadGrid .rgPager .Advanced .rgAdvPart .rgPagerButton,
.container .RadGrid .rgPager .Advanced .rgAdvPart .RadInput,
.container .rgPager .rgPagerCell .NextPrevNumericAndAdvanced .rgAdvPart .rgPagerButton,
.container .RadGrid_Metro .rgGroupPanel span.rgGroupItem,
/* Button class: .rgSelect */
.container .RadGrid .rgMasterTable .rgRow .rgSelect,
.container .RadGrid .rgMasterTable .rgAltRow .rgSelect,
/* Button Class : Update*/
.container .RadGrid .rgMasterTable .rgRow .rgUpdate,
.container .RadGrid .rgMasterTable .rgAltRow .rgUpdate,
/* Button Class: Delete */
.container .RadGrid .rgMasterTable .rgRow .rgDel,
.container .RadGrid .rgMasterTable .rgAltRow .rgDel,
/* Class :.rgDeleteCaterer */
.container .RadGrid .rgMasterTable tr .rgDeleteCaterer,
.rgDel,
/* Button Class: Insert */
.container .RadGrid_Metro .rgMasterTable .rgRow .rgInsert,
.container .RadGrid_Metro .rgMasterTable .rgAltRow .rgInsert,
/* Button Class : rgReorganizeLineTraining*/
.container .RadGrid .rgMasterTable .rgRow .rgReorganizeLineTraining,
.container .RadGrid .rgMasterTable .rgAltRow .rgReorganizeLineTraining,
.container .RadGrid .rgMasterTable .rgRow .rgView,
.container .RadGrid .rgMasterTable .rgAltRow .rgView,
/* Class: .rgShow */
.container .RadGrid .rgMasterTable .rgRow .rgShow,
.container .RadGrid .rgMasterTable .rgAltRow .rgShow,
/* Class : .rgViewDetails */
.container .RadGrid .rgMasterTable .rgRow .rgViewDetails,
.container .RadGrid .rgMasterTable .rgAltRow .rgViewDetails,
/* Class : .rgSendMessage */
.container .RadGrid .rgMasterTable .rgRow .rgSendMessage,
.container .RadGrid .rgMasterTable .rgAltRow .rgSendMessage,
/* Class : .rgCopy */
.container .RadGrid .rgMasterTable .rgRow .rgCopy,
.container .RadGrid .rgMasterTable .rgAltRow .rgCopy,
/* CblBtnDownload */
.container .RadButton.CblBtnDownload,
div .RadButton.CblBtnDownload,
/* Class : .CblBtnBack */
.container .RadButton.CblBtnBack,
div .container .RadButton.CblBtnBack,
/* Class : .CblBtnRefresh */
.container .RadButton.CblBtnRefresh,
div .container .RadButton.CblBtnRefresh
/* Class: CblBtnClear */
.container .RadButton.CblBtnClear,
div .container .RadButton.CblBtnClear,
/* Class: .rgReset*/
.container .RadGrid .rgMasterTable .rgRow .rgReset,
.container .RadGrid .rgMasterTable .rgAltRow .rgReset,
.container .RadGrid .rgMasterTable .rgRow .rgEditBroker,
.container .RadGrid .rgMasterTable .rgAltRow .rgEditBroker,
/* Button Class: Cancelled */
.container .RadGrid .rgMasterTable .rgRow .rgcancelled,
.container .RadGrid .rgMasterTable .rgAltRow .rgcancelled,
/* Buttn class : Accept*/
.container .RadGrid .rgMasterTable .rgRow .rgaccept,
.container .RadGrid .rgMasterTable .rgAltRow .rgaccept {
  /*width: 40px;
    height: 40px;*/
  width: 25px;
  height: 25px;
  margin-top: 0em;
  margin-bottom: 0em;
  border-radius: 4px;

}


  /* display: flex */
  /* Class : .rgEditForm table */
  /*.container .RadGrid td div.rgEditForm table,*/
  .container .RadGrid .rgPagerCell .NextPrevAndNumeric .rgAdvPart,
  .container .RadGrid .rgPagerCell .rgInfoPart,
  .container .RadGrid .rgCommandRow .rgCommandCell .rgCommandCellLeft .rgAdd,
  .container .RadGrid .rgCommandRow .rgCommandCell .rgCommandCellRight .rgRefresh,
  .container .RadGrid .rgMasterTable .rgRow .rgEdit,
  .container .RadGrid .rgMasterTable .rgAltRow .rgEdit,
  .container .RadGrid .rgMasterTable .rgRow .rgEditInline,
  .container .RadGrid .rgMasterTable .rgAltRow .rgEditInline,
  .container .RadGrid div.rgEditForm .rgUpdateIcon,
  .container .RadGrid div.rgEditForm .rgCancelIcon,
  .container .RadGrid_Metro .rgPager .Advanced .rgAdvPart,
  .container .RadGrid .rgPager .rgPagerCell .NextPrev,
  .container .rgPager .rgPagerCell .NextPrevNumericAndAdvanced .rgArrPart1,
  .container .rgPager .rgPagerCell .NextPrevNumericAndAdvanced .rgArrPart2,
  .container .rgPager .rgPagerCell .NextPrevNumericAndAdvanced .rgNumPart,
  .container .rgPager .rgPagerCell .NextPrevNumericAndAdvanced .rgNumPart a,
  .container .rgPager .rgPagerCell .NextPrevNumericAndAdvanced .rgAdvPart,
  .container .RadGrid_Metro .rgPager .rgPagerCell .NumericPages,
  .container .RadGrid_Metro .rgPager .rgPagerCell .NumericPages .rgNumPart,
  .container .RadGrid_Metro .rgPager .rgPagerCell .NumericPages .rgNumPart a,
  form .RadMenu_Context ul.rmGroup .rmItem .rmLink,
  .container .RadGrid .rgGroupPanel div,
  .container .RadGrid_Metro .rgGroupPanel span.rgGroupItem,
  .container .RadGrid_Metro .rgGroupPanel span.rgGroupItem .rgActionButton .rgIcon,
  .container .RadGrid_Metro .rgHeaderWrapper,
  .container .RadGrid tr th.rgExpandCol button.rgCollapse, /* button head of the table */
  .container .RadGrid tr th.rgExpandCol button.rgExpand, /* button of head of the table */
  .container .RadGrid tr th.rgExpandCol button.rgExpand .rgExpandIcon, /* icon of button in the head of the table */
  .container .RadGrid tr th.rgExpandCol button.rgCollapse .rgCollapseIcon,
  /* tr.rgRow*/
  .container .RadGrid tr.rgRow td.rgExpandCol button.rgExpand,
  .container .RadGrid tr.rgRow td.rgExpandCol button.rgCollapse,
  /* tr.rgAltRow */
  .container .RadGrid tr.rgAltRow td.rgExpandCol button.rgExpand,
  .container .RadGrid tr.rgAltRow td.rgExpandCol button.rgCollapse,
  /* tr.rgRow => rgExpanIcon && .rgCollapseIcon*/
  .container .RadGrid tr.rgRow td.rgExpandCol button.rgExpand .rgExpandIcon,
  .container .RadGrid tr.rgRow td.rgExpandCol button.rgCollapse .rgCollapseIcon,
  /* tr.rgAltRow => rgExpanIcon && .rgCollapseIcon */
  .container .RadGrid tr.rgAltRow td.rgExpandCol button.rgExpand .rgExpandIcon,
  .container .RadGrid_tr.rgAltRow td.rgExpandCol button.rgCollapse .rgCollapseIcon,
  .container .RadGrid .rgMasterTable .rgRow .rgSelect,
  .container .RadGrid .rgMasterTable .rgAltRow .rgSelect,
  /* Button Class : Update*/
  .container .RadGrid .rgMasterTable .rgRow .rgUpdate,
  .container .RadGrid .rgMasterTable .rgAltRow .rgUpdate,
  /* Button Class: Delete */
  .container .RadGrid .rgMasterTable .rgRow .rgDel,
  .container .RadGrid .rgMasterTable .rgAltRow .rgDel,
  /* Button Class:.rgDeleteCaterer */
  .container .RadGrid .rgMasterTable tr .rgDeleteCaterer,
  .rgDel,
  /* Button Class: Insert */
  .container .RadGrid_Metro .rgMasterTable .rgRow .rgInsert,
  .container .RadGrid_Metro .rgMasterTable .rgAltRow .rgInsert,
  /* Button Class : rgReorganizeLineTraining*/
  .container .RadGrid .rgMasterTable .rgRow .rgReorganizeLineTraining,
  .container .RadGrid .rgMasterTable .rgAltRow .rgReorganizeLineTraining,
  .container .RadGrid .rgMasterTable .rgRow .rgediting,
  .container .RadGrid .rgMasterTable .rgAltRow .rgediting,
  .container .RadGrid .rgMasterTable .rgRow .rgView,
  .container .RadGrid .rgMasterTable .rgAltRow .rgView,
  .container .RadGrid .rgMasterTable .rgRow .rgReorganizeLineTraining span.rgIcon,
  .container .RadGrid .rgMasterTable .rgAltRow .rgReorganizeLineTraining span.rgIcon,
  .container .RadGrid .rgMasterTable .rgRow .rgView,
  .container .RadGrid .rgMasterTable .rgAltRow .rgView,
  .container .RadGrid .rgMasterTable .rgRow .rgShow,
  .container .RadGrid .rgMasterTable .rgAltRow .rgShow,
  /* Class :  .cbl_btn_settings_search*/
  .RadButton.cbl_btn_settings_search,
  /* Class :  .RadButton_Metro.rbButton */
  .container .RadGrid .rgMasterTable .rgRow td.rgEditSchedulingEdit a,
  .container .RadGrid .rgMasterTable .rgAltRow td.rgEditSchedulingEdit a,
  /* CblBtnSave */
  .container .RadButton.CblBtnSave,
  /* CblBtnDelete */
  .container .RadButton.CblBtnDelete,
  /* CblBtnEdit */
  .container .RadButton.CblBtnEdit,
  /* CblBtnCopy */
  .container .RadButton.CblBtnCopy,
  /* CblBtnClose */
  .container .RadButton.CblBtnClose,
  /* CblBtnDownload */
  .container .RadButton.CblBtnDownload,
  /* Class : .rgViewDetails */
  .container .RadGrid .rgMasterTable .rgRow .rgViewDetails,
  .container .RadGrid .rgMasterTable .rgAltRow .rgViewDetails,
  /* CblBtnView */
  .container .RadButton.CblBtnView,
  .container .RadButton.CblBtnAdd,
  /* Class : .rgSendMessage */
  .container .RadGrid .rgMasterTable .rgRow .rgSendMessage,
  .container .RadGrid .rgMasterTable .rgAltRow .rgSendMessage,
  /* Class : .rgCopy */
  .container .RadGrid .rgMasterTable .rgRow .rgCopy,
  .container .RadGrid .rgMasterTable .rgAltRow .rgCopy,
  /* Class: .rgReset*/
  .container .RadGrid .rgMasterTable .rgRow .rgReset,
  .container .RadGrid .rgMasterTable .rgAltRow .rgReset,
  .container .RadGrid .rgMasterTable .rgRow .rgEditBroker,
  .container .RadGrid .rgMasterTable .rgAltRow .rgEditBroker,
  /* Button Class: Cancelled */
  .container .RadGrid .rgMasterTable .rgRow .rgcancelled,
  .container .RadGrid .rgMasterTable .rgAltRow .rgcancelled,
  /* Buttn class : Accept*/
  .container .RadGrid .rgMasterTable .rgRow .rgaccept,
  .container .RadGrid .rgMasterTable .rgAltRow .rgaccept {
    display: flex;

    justify-content: center;
    align-items: center;
  }



/* --------------------------------   */

/* Class : .RadGrid */

/* For reducing less spacess */
.container .RadGrid {

  padding: .25em .25em;
}

.container .RadGrid,
div .RadListBox,
/*RadListView */
.contianer .RadListView {
  background: #fff;
  padding: .25em .25em;
}

  /* ul list group */
  .container .RadGrid div.rlbGroup,
  div .RadListBox div.rlbGroup,
  /*RadListView */
  .contianer .RadListView div.rlbGroup {
  

    border: solid 0em transparent;
  }


/* RadListBox */
/* content of RadListbox */
.container .RadListBox {
  border: solid 1px var(--cw-color-outline-variant);
  border-radius: .25em;

}

  .container .RadListBox .rlbGroup ul.rlbList {
    border-radius: .25em;
 
  }

  .container .RadListBox .rlbButtonAreaRight {
    /* border: solid 1px blue; */
    width: 25px;
    min-width: 25px;
    max-width: 25px;
    padding-left: .45em;
    padding-right: .45em;
  }

    .container .RadListBox .rlbButtonAreaRight ul {
      margin-left: -5px;
    
    }


      .container .RadListBox .rlbButtonAreaRight ul li {
        display: flex;
  
        width: 25px;
        max-width: 25px;
      }

        .container .RadListBox .rlbButtonAreaRight ul li button.rlbButton {
          width: 25px;
          height: 25px;
          padding: 0em 0em !important;
          max-width: 25px !important;
          max-height: 25px !important;
          display: flex;
        
          justify-content: center;
          align-items: center;
          background: transparent;
     
          border: solid 0em transparent;
          outline: none;
          box-shadow: none;
      
        }



          .container .RadListBox .rlbButtonAreaRight ul li button.rlbButton:hover,
          .container .RadListBox .rlbButtonAreaRight ul li button.rlbButton.rlbHovered {
            background: transparent;
            border: solid 0em transparent;
            outline: none;
            box-shadow: none;
        
          }

          .container .RadListBox .rlbButtonAreaRight ul li button.rlbButton > span.rlbButtonIcon {
            color: var(--cw-color-icons); /* PC2 */
          }
          /* icons buttons of RadListBox */
            .container .RadListBox .rlbButtonAreaRight ul li button.rlbButton > span.rlbIconTransferRight::before {
                font-family: "NewCwIcons";
                content: "\ea03";
                clear: both;
                font-size: 14px;
      
            }

            .container .RadListBox .rlbButtonAreaRight ul li button.rlbButton > span.rlbIconTransferLeft::before {
                font-family: "NewCwIcons";
                content: "\ea07";
                clear: both;
                font-size: 14px;
              
            }



            .container .RadListBox .rlbButtonAreaRight ul li button.rlbButton > span.rlbIconTransferAllRight::before {
                font-family: "NewCwIcons";
                content: "\ea83";
                clear: both;
                font-size: 14px;
                font-weight: bolder;
            }



            .container .RadListBox .rlbButtonAreaRight ul li button.rlbButton > span.rlbIconTransferAllLeft::before {
                font-family: "NewCwIcons";
                content: "\ea66";
                clear: both;
                font-size: 14px;
                font-weight: bolder;
            }

    /* Check all container ( JLC with JQS [19.09.2023 ] ) */
    .container .RadListBox .rlbCheckAllItems label {
        margin-left: -8px;
    }

    /* Other lists - given by telerik ( JLC with JQS [19.09.2023 ] ) */
    .container .RadListBox .cblRadListbox_checkbox {
        margin-right: 4px;
    }

    /* ---------------------------------------------------------------------------------------------------- / RadListBox */
    /* each item of group */
    .container .RadGrid .RadListBox .rlbItem,
    div .RadListBox .rlbItem,
    .container .RadListBox .rlbItem {
        padding: 0px 0px;
        padding-left: .15em !important;
        /* font-size: .95em; */
        font-size: 14px;
        font-family: 'Roboto Flex Variable', 'Roboto', sans-serif;
        border: solid 1px #0000;
    }


    .container .RadListBox .rlbItem label:first-child {
      display: flex;
     
      flex-direction: row;
  
      margin-left: 0px;
    }

    /* each item of group li.selected item */
        .container .RadGrid .RadListBox .rlbItem.rlbSelected,
        div .RadListBox .rlbItem.rlbSelected,
        .container .RadListBox .rlbItem.rlbSelected,
        .RadScheduler_Metro .rsSelected > .rsButton {
            background: var(--cw-color-primary, #368ee0);
            color: var(--cw-color-on-primary, #FFF);
        }


      .container .RadListBox .rlbItem.rlbSelected label.cbl-component-check input[type="checkbox"].cbl-checkbox + span.cbl-check-control::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 600;
        content: "\f00c";
        color: #fff;
        font-size: 10px;
      }
    /* each item of group li.selected item */
    .container .RadGrid .RadListBox .rlbItem.rlbHovered,
    div .RadListBox .rlbItem.rlbHovered,
    .container .RadListBox .rlbItem.rlbHovered {
      background: var(--cw-color-primary-variant, #0d47a1);
      color: var(--cw-color-on-primary-variant, #FFF);
      cursor: pointer !important;
    }

      .container .RadGrid .RadListBox .rlbItem.rlbHovered label,
      div .RadListBox .rlbItem.rlbHovered label,
      .container .RadListBox .rlbItem.rlbHovered label {
        cursor: pointer !important;
      }


    .container .RadListBox .rlbItem label.cbl-component-check {
      display: flex;

      justify-content: center;
      align-items: center;
    }

    .container .RadListBox .rlbItem label input[type="checkbox"].cblRadListbox_checkbox {
      /*width:0em;
                           height: 0em;*/
      /*visibility: hidden;*/
    }


/*------------------------------------------------------------------------------------------------------------------------------ /  RadListBox */
/* Class: .rgHeaderWrapper, this is a div, it contains the header of the table when is enable telerik option AllowScrolling */
.container .RadGrid_Metro .rgHeaderWrapper {
  width: 100%;
  height: 80px;
  margin: auto auto;
  padding: 4px 4px;
  margin-top: 12px;
  margin-bottom: 12px;
  /*border: solid 1px;*/
}


  .container .RadGrid_Metro .rgHeaderWrapper .rgHeaderDiv {
    width: 100%;
    height: 100%;
  }

.container .RadGrid_Metro .rgDataDiv {
  width: 100%;
  height: 100%;
  margin: auto auto;
  /*border: solid 1px #368ee0;*/

  border-radius: 8px;

  margin-top: 1em !important;
  margin-bottom: 12px;
}

  .container .RadGrid_Metro .rgDataDiv::-webkit-scrollbar {
    width: 10px;
    border-radius: 20px;

  }

  .container .RadGrid_Metro .rgDataDiv::-webkit-scrollbar-track {
    background: var(--cw-color-surface-dim);
    border-radius: 20px;

  }

    .container .RadGrid_Metro .rgDataDiv::-webkit-scrollbar-thumb {
        background: var(--cw-color-surface-dim);
        border-radius: 20px;
    }


/* Class : .rgDataWrap => other div class when is used telerik option Virtualization Scrolli */

.container .RadGrid .rgDataWrap {
  width: 100%;
  height: 100%;
  margin: auto auto;
  /* border: solid 1px;*/
  border-radius: 8px;

  margin-bottom: 12px;
}


/* Class: .rgGroupPanel , this is a div, it contains the button for ascending and descending of the option GridGroupByField ,
                inside there is another div with out none class and its span and buttons class called .rgActionButton */

/* class: rg.GroupPanel */

.container .RadGrid .rgGroupPanel {
  width: 100%;
  height: 40px;
  background: transparent;
  padding: 4px 4px;
  margin-top: 4px; /* by the moment let this until check this */
  margin-bottom: 12px;

}

  .container .RadGrid .rgGroupPanel div {
    width: 100%;
    height: 100%;
    /*background: rgba(54,142,224,.5);*/
  }

.container .RadGrid_Metro .rgGroupPanel span.rgGroupItem {
  background: var(--cw-color-primary, #368ee0);
  color: var(--cw-color-on-primary, #fff);
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  font-weight: 300;
  font-style: normal;
  padding-top: 4px;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 4px;
  margin-top: 4px;
  margin-right: 8px;
  margin-left: 8px;
  border-bottom: none;
  width: 10%;
  height: 20px;
  box-shadow: none;

}

.container .RadButton_Metro.rbButton:not(.rbIconButton,.cw-button-icon,.rbIconOnly) {
  background-color: var(--cw-color-button-background, #0d47a1);

  font-family: 'Roboto', sans-serif;
  padding: 0.25rem 0.5rem;
  border-radius: .25rem;
  line-height: 150%;
  color: var(--cw-color-button-content, #fff);
  border: none 0em transparent;
  cursor: pointer;
}

  .container .RadButton_Metro.rbButton.rgAddIcon,
  .container .RadButton_Metro.rbButton.rgAddIcon:hover {
    background: transparent;
    border-bottom: solid 0em transparent;
  }

  .container .RadButton_Metro.rbButton span.rbText {
    line-height: 1.80em;
    margin-left: .25em !important;
    margin-right: .25em !important;
  }

    .container .RadButton_Metro.rbButton:hover {
        background-color: var(--cw-color-button-hover-background, #0d47a1);
        color: var(--cw-color-button-hover-content, #fff);
    }

/* CblBtnSave */
/*.container .RadButton.CblBtnSave {
  color: var(--cw-color-icons, #368ee0);
  background: transparent;
}*/

.container .RadGrid thead tr.rgCommandRow td.rgCommandCell .rgAdd .RadButton.CblBtnDownload {
  width: 25px !important;
  height: 25px !important;
}

/* CblBtnEdit */
.container .RadButton.CblBtnEdit,
div .RadButton.CblBtnEdit,
/* CblBtnDownload */
.container .RadButton.CblBtnDownload,
div .RadButton.CblBtnDownload {
  background: transparent;
  color: #368ee0 !important;
  /*border-bottom: solid .25em #093F92;*/
  width: 25px !important;
  height: 25px !important;
  text-align: center !important;
  padding: 0em !important;
}

  .container .RadButton.CblBtnEdit:hover,
  div .RadButton.CblBtnEdit:hover,
  /* CblBtnDownload */
  .container .RadButton.CblBtnDownload:hover,
  div .RadButton.CblBtnDownload:hover {
    background: transparent;
  }

  .container .RadButton.CblBtnDownload[disabled="disabled"],
  div .RadButton.CblBtnDownload[disabled="disabled"] {
    background: #0d47a1;
    color: #fff;
    border-bottom: solid .25em #093F92;
  }
/* CblBtnCopy */
.container .RadButton.CblBtnCopy,
div .RadButton.CblBtnCopy {
  background: #368ee0;
  color: #fff;
  border-bottom: solid .25em #2E86C1;
  width: 25px !important;
  height: 25px !important;
  text-align: center !important;
  padding: 0em !important;
}


/* Class : .CblBtnBack */
.container .RadButton.CblBtnBack,
div .container .RadButton.CblBtnBack,
.container .RadButton.CblBtnBack:hover,
div .container .RadButton.CblBtnBack:hover {
  background: #368ee0;
  color: #fff;
  border-bottom: solid .25em #2E86C1;
  text-align: center !important;
}

/* Class : .CblBtnRefresh */
.container .RadButton.CblBtnRefresh,
div .container .RadButton.CblBtnRefresh,
.container .RadButton.CblBtnRefresh:hover,
div .container .RadButton.CblBtnRefresh:hover {
  background: #0d47a1;
  color: #fff;
  border-bottom: solid .25em #093F92;
}

/* Class: CblBtnClear */
.container .RadButton.CblBtnClear,
div .container .RadButton.CblBtnClear {
  background: #0d47a1;
  color: #fff;
  border-bottom: solid .25em #093F92;
  margin-top: .25em;
}

.container .RadButton.CblBtnCopy:hover,
div .RadButton.CblBtnCopy:hover {
  background: #368ee0;
  border-bottom: solid .25em #2E86C1;
}


.container .RadButton.CblBtnEdit:hover,
div .RadButton.CblBtnEdit:hover,
/* CblBtnDownload */
.container .RadButton.CblBtnDownload:hover,
div .RadButton.CblBtnDownload:hover {
  /*border-bottom: solid .25em #093F92;*/
}

/* CblBtnCancel */
.container .RadButton.CblBtnCancel,
div .RadButton.CblBtnCancel {
  width: 25px !important;
  height: 25px !important;
}

    .container .RadButton.CblBtnCancel,
    .container .RadButton.CblBtnCancel:hover {
        color: var(--cw-color-error, #c24352);
        border-bottom: solid .25em #b32134;
        width: 25px !important;
        height: 25px !important;
        text-align: center !important;
        padding: 0em !important;
    }


/* CblBtnClose */
.container .RadButton.CblBtnClose,
div .RadButton.CblBtnClose {
  background: #c24352;
  color: #fff;
  border-bottom: solid .25em #b32134;
  width: 25px !important;
  height: 25px !important;
  text-align: center !important;
  padding: 0em !important;
}



.container .RadButton.CblBtnAdd,
div .RadButton.CblBtnAdd,
.container .RadButton.CblBtnAdd:hover,
div .RadButton.CblBtnAdd:hover {
  width: 25px !important;
  height: 25px !important;
  background: transparent;
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
                                             START :  GENERAL BTN => RADBUTTON
    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++  */
/* CblBtnSave */
.container .RadButton.CblBtnSave:hover,
html .RadNotification .RadXmlHttpPanel .rnContentWrapper .RadButton.CblBtnSave,
html .RadNotification .RadXmlHttpPanel .rnContentWrapper .RadButton.CblBtnSave:hover {
  /*background: #1974d2;*/
/*  color: #368ee0;*/
  /*border-bottom: solid .25em #1068C3;*/
/*  background: transparent;*/
}

    .container .RadButton.CblBtnSave::before,
    html .RadNotification .RadXmlHttpPanel .rnContentWrapper .RadButton.CblBtnSave::before {
        font-family: "NewCwIcons";
        content: "\ea1a";
        font-size: 1.5rem;
    }

/* CblBtnDelete && CblBtnCancel */
.container .RadButton.CblBtnDelete,
.container .RadButton.CblBtnCancel,
html .RadNotification .RadXmlHttpPanel .rnContentWrapper .RadButton.CblBtnCancel {
  background: transparent;
  border-bottom: solid 0px transparent;
  color: #b32134;
  width: 25px !important;
  height: 25px !important;
  text-align: center !important;
}

  /* CblBtnDelete && CblBtnCancel */
  .container .RadButton.CblBtnDelete:hover,
  .container .RadButton.CblBtnCancel,
  html .RadNotification .RadXmlHttpPanel .rnContentWrapper .RadButton.CblBtnCancel,
  html .RadNotification .RadXmlHttpPanel .rnContentWrapper .RadButton.CblBtnCancel:hover {
    background: transparent;
    border-bottom: solid 0px transparent;
    color: #b32134;
  }


/* CblBtnSearch */
.container .RadButton.CblBtnSearch,
.container .RadButton.CblBtnSearch:hover {
  background: #0d47a1;
  border-bottom: solid 4px #093F92;
  color: #fff;
  width: 25px !important;
  height: 25px !important;
  text-align: center !important;
}

    .container .RadButton.CblBtnSearch::before {
        font-family: "NewCwIcons";
        content: "\ea0a";
        color: #fff;
        font-size: 1em
    }

.container .RadButton.CblBtnDelete::before {
    font-family: "NewCwIcons";
    content: "\ea26";
    color: var(--cw-color-error);
    text-align: center;
    font-size: 1.5rem;
}


.container .RadButton.CblBtnCancel::before,
html .RadNotification .RadXmlHttpPanel .rnContentWrapper .RadButton.CblBtnCancel::before {

  font-family: "Font Awesome 5 Free";
  content: "\f05e";
  font-size: 1em;
}

html .RadNotification .RadXmlHttpPanel .rnContentWrapper .RadButton.CblBtnCancel::before {
  font-weight: 700;
}

.container .RadButton.CblBtnAdd::before {
    font-family: "NewCwIcons";
    content: "\ea29";
    color: var(--cw-color-icons);
    font-size: 1.5rem;
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
                                            END :    GENERAL BTN => RADBUTTON
                  +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++  */

.container .RadGrid_Metro .rgGroupPanel span.rgGroupItem:hover {
  background: #0d47a1;
  border-bottom: solid 3px #093F92;
  transform: scale(1.015);
}

.container .RadGrid_Metro .rgGroupPanel span.rgGroupItem:active {
  border-bottom: solid 0px transparent;
  border-top: solid 3px #093F92;
}


.container .RadGrid_Metro .rgGroupPanel span.rgGroupItem .rgActionButton {
  float: right;
  /*margin-left: 5%;*/
}

  .container .RadGrid_Metro .rgGroupPanel span.rgGroupItem .rgActionButton .rgIcon {
    margin-top: 2px;
  }

  .container .RadGrid_Metro .rgGroupPanel span.rgGroupItem .rgActionButton .rgSortDescIcon {
    color: #fff;
  }

    .container .RadGrid_Metro .rgGroupPanel span.rgGroupItem .rgActionButton .rgSortDescIcon::before {
      /* This icon font is taken from the webpage fontawesome.com . Free icon Licence to use it in personally or comercially */
      font-family: "Font Awesome 5 Free";
      font-weight: 700;
      content: "\f078";
      clear: both;
      color: #fff;
      font-size: 12px;
    }

  .container .RadGrid_Metro .rgGroupPanel span.rgGroupItem .rgActionButton .rgSortAscIcon {
    color: #fff;
  }

    .container .RadGrid_Metro .rgGroupPanel span.rgGroupItem .rgActionButton .rgSortAscIcon::before {
      /* This icon font is taken from the webpage fontawesome.com . Free icon Licence to use it in personally or comercially */
      font-family: "Font Awesome 5 Free";
      font-weight: 700;
      content: "\f077";
      clear: both;
      color: #fff;
      font-size: 12px;
    }




  /* Heading of the table Telerik:RadGrid */

    .container .RadGrid .rgMasterTable thead .rgHeader {
        padding-left: 0em !important;
        text-align: left;
        font-size: 0.75rem;
        background: var(--cw-color-layout-table-headers, #368ee0);
        color: var(--cw-color-layout-on-table-headers, #fff);
        font-family: 'Roboto Flex Variable', 'Roboto', sans-serif;
        line-height: normal;
    }

      .container .RadGrid .rgMasterTable thead .rgHeader:first-child {
        padding-left: .25em !important;
      }

    /* BtnColumn : Adding style When we have button in Columns */
    .container .RadGrid .rgMasterTable thead th.CblBtnThColumn,
    .container .RadGrid .rgMasterTable tbody tr.rgRow td.CblBtnTdColumn,
    .container .RadGrid .rgMasterTable tbody tr.rgAltRow td.CblBtnTdColumn {
      /*border: solid 1px green;*/
    }


    .container .RadGrid .rgMasterTable thead th.CblThEmptyColumn,
    .container .RadGrid .rgMasterTable tbody tr.rgRow td.CblTdEmptyColumn,
    .container .RadGrid .rgMasterTable tbody tr.rgAltRow td.CblTdEmptyColumn {
      font-size: 0em !important;
    }

/* .rgFilterRow => applying with filter options with telerik property AllowFilteringByColumn */

/* Class: rg.FilterRow of tr element tag */
/* Class: .rgFilterRow */

/* --------------------------------------- / .rgFilterRow */

.container .RadGrid thead tr.rgFilterRow {
    padding-top: 4px;
    padding-bottom: 4px;
    background: var(--cw-color-layout-table-row-selected);
    border-bottom: solid 2px var(--cw-color-outline);
    color: var(--cw-color-layout-on-table-row-selected);
    /*display: none;*/
}


  .container .RadGrid thead tr.rgFilterRow td {
    text-align: left;
    justify-content: center;
    align-content: center;
  }


    /* Class: .rgFilterBox => input filter */
    .container .RadGrid thead tr.rgFilterRow td input.rgFilterBox[type="text"] {
      /*width: auto;*/
      width: 100px !important;
      height: 1.875em;
      padding: .25em .25em;
      line-height: 10px;
      color: #000;
      font-family: 'Roboto', sans-serif;
      font-style: normal;
      font-weight: 400;
      border: solid 1px transparent;
      border-radius: 4px;
  
      background: #fff;
      margin-top: 10px;
      margin-bottom: 10px;
      font-size: 12px;
      margin-left: -1em;
    }


      /* Class: .rgFilterBox => input filter:focus */
        .container .RadGrid thead tr.rgFilterRow td input.rgFilterBox[type="text"]:focus {
            border: solid 1px var(--cw-color-outline, #368ee0);
            box-shadow: none;
        }

    /* Class : .rgFilter => buttons class te select items to filter, inside there is an icon filter */
    .container .RadGrid thead tr.rgFilterRow td button.rgFilter {
      /*background: #368ee0;*/
      color: var(--cw-color-layout-on-table-row-selected);
      border-radius: 2px;
      padding:0;

    }

      .container .RadGrid thead tr.rgFilterRow td button.rgFilter span.rgFilterIcon::before {
        /* This icon font is taken from the webpage fontawesome.com . Free icon Licence to use it in personally or comercially */
        font-family: "Font Awesome 5 Free";
        font-weight: 700;
        content: "\f0b0";

        font-size: .75em;
      }
    /* Class : .rgFilterActive => span class when make click on button */
.container .RadGrid_Metro thead tr.rgFilterRow td button.rgFilter .rgFilterActive,
.container .RadGrid_Metro thead tr.rgFilterRow td button.rgFilter .rgFilterActive:hover,
.container .RadGrid_Metro thead tr.rgFilterRow td button.rgFilter .rgFilterActive:focus {
    background: #FFF;
    box-shadow: none;
    color: var(--cw-color-layout-on-table-row-selected);
    border-radius:50%;
}

    .container .RadGrid thead tr.rgFilterRow td span.rgFilterIcon::before {
      /* This icon font is taken from the webpage fontawesome.com . Free icon Licence to use it in personally or comercially */
      font-family: "Font Awesome 5 Free";
      font-weight: 700;
      content: "\f000";
      font-size: 8px;
 
    }

/* Class: RadComboBox || RadComboBox_Metro=> combobox*/

/* Class : RadComboBox || RadComboBox_Metro => combobox */



/* Class : RadMenu */
form .RadMenu_Metro {
  background: var(--cw-color-surface-container, #0d47a1);
  border-radius: .25em;
  box-shadow: 4px 4px 4px var(--cw-color-shadow);
}



form .RadMenu_Metro .rmGroup {
    /*background:linear-gradient(rgba(13,71,161,.8),
     rgba(13,71,161,.8)), url("../../Images/cbl_free_images/ServicesProvidersSelect.jpg");*/
    background: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color: var(--cw-color-on-surface-variant, #FFF);
    border-radius: .25em;
    float: none;
}


    form .RadMenu_Metro .rmGroup .rmFirst {
      box-shadow: none;
    }

    form .RadMenu_Metro .rmGroup .rmItem {
        cursor: pointer;
        border-top: solid 1px var(--cw-color-surface-dim);
        border-bottom: solid 1px var(--cw-color-surface-dim);
    }


      form .RadMenu_Metro .rmGroup .rmItem:hover {
        background: var(--cw-color-surface-container-highest);
        color: var(--cw-color-on-surface);
      }


      form .RadMenu_Metro .rmGroup .rmItem .rmLink {
        cursor: pointer;
        padding: 4px;
        box-shadow: none;
        border:none;
      }



        form .RadMenu_Metro .rmGroup .rmItem .rmLink:hover {
            background: transparent;
            border: solid 0em transparent;
            box-shadow: none;
        }


      form .RadMenu_Metro .rmGroup .rmItem.rmFocused {
        background: var(--cw-color-primary);
        color: var(--cw-color-on-primary);
        box-shadow: none;
  
        padding: 4px;
      }



/* Class: .rcbSlide drop down div of the class RadComboBox


        /* When we active GridGroupExpressiion tr (Grouping)*/
/* Class: tr.rgGroupHeader */
.container .RadGrid .rgMasterTable tr.rgGroupHeader {
    /*border: solid 1px;*/
    width: 100%;
    height: 100%;
}

  .container .RadGrid .rgMasterTable tr.rgGroupHeader td.rgGroupCol {
    /*border: solid 1px; */
  }

  .container .RadGrid .rgMasterTable tr.rgGroupHeader td {
    background: rgba(54,142,224,.5);
    border-bottom: solid 3px rgba(46,134,193,.3);
  }

    .container .RadGrid .rgMasterTable tr.rgGroupHeader td:hover {
      background: #0d47a1;
    }

      .container .RadGrid .rgMasterTable tr.rgGroupHeader td:hover span.rgGroupHeaderText {
        transform: translateX(10em);
      }



    .container .RadGrid .rgMasterTable tr.rgGroupHeader td span.rgGroupHeaderText {
      font-size: 14px;
      color: #fff;
      font-weight: lighter;
      float: left;
    }


    .container .RadGrid .rgMasterTable tr.rgGroupHeader td.rgGroupCol button.rgActionButton {
      background: #0d47a1;
      border-bottom: solid 3px #093F92;

    }

      .container .RadGrid .rgMasterTable tr.rgGroupHeader td.rgGroupCol button.rgActionButton .rgIcon {
        color: #fff;
        font-size: 12px;
      }

      .container .RadGrid .rgMasterTable tr.rgGroupHeader td.rgGroupCol button.rgActionButton .rgExpandIcon::before {
        /* This icon font is taken from the webpage fontawesome.com . Free icon Licence to use it in personally or comercially */
        font-family: "Font Awesome 5 Free";
        font-weight: 700;
        content: "\f054";
        clear: both;
        color: #fff !important;
      }

      .container .RadGrid .rgMasterTable tr.rgGroupHeader td.rgGroupCol button.rgActionButton .rgCollapseIcon::before {
        /* This icon font is taken from the webpage fontawesome.com . Free icon Licence to use it in personally or comercially */
        font-family: "Font Awesome 5 Free";
        font-weight: 700;
        content: "\f078";
        clear: both;
        color: #fff;
      }



/* When is active the property sorted */

.container .RadGrid .rgMasterTable thead th.rgHeader a {
  color: var(--cw-color-layout-on-table-headers, #fff);
/*  font-size: 14px !important;*/
  line-height: normal;
  text-align: left;
}

.container .RadGrid .rgMasterTable .rgHeader .rgActionButton {
  margin-top: -10px;
  margin-right: 5px;
}

  /* When is active the property sorted */
  .container .RadGrid .rgMasterTable .rgHeader .rgActionButton .rgIcon {
    color: #fff;
  }

  /* When is active the property sorted */
  .container .RadGrid .rgMasterTable .rgHeader .rgActionButton .rgSortAscIcon {
    color: #fff;
  }

    /* When is active the property sorted */
    .container .RadGrid .rgMasterTable .rgHeader .rgActionButton .rgSortAscIcon::before {
      /* This icon font is taken from the webpage fontawesome.com . Free icon Licence to use it in personally or comercially */
      font-family: "Font Awesome 5 Free";
      font-weight: 700;
      content: "\f077";
      clear: both;
      color: #fff;
      margin-left: 2px;
      font-size: 20px;
    }

  /* When is active the property sorted */
  .container .RadGrid .rgMasterTable .rgHeader .rgActionButton .rgSortDescIcon {
    /*border: solid 1px;*/
    color: #fff;
  }


    /* When is active the property sorted */
    .container .RadGrid .rgMasterTable .rgHeader .rgActionButton .rgSortDescIcon::before {
      /* This icon font is taken from the webpage fontawesome.com . Free icon Licence to use it in personally or comercially */
      font-family: "Font Awesome 5 Free";
      font-weight: 700;
      content: "\f078";
      clear: both;
      color: #fff;
      margin-left: 2px;
      font-size: 20px;
    }

/* .rgSort when actives the property Allowsorting */

/* class: rgSroted when is active to order items */
/*  .container .RadGrid .rgMasterTable th.rgSorted,*/
.container .RadGrid .rgMasterTable td.rgSorted {
    /*code here think same th properties */
    background: var(--cw-color-layout-table-row-selected, #0d47a1);
 
    color: var(--cw-color-layout-on-table-row-selected, #fff);
    box-shadow: none;
    padding-left: .15em !important;
}



.container .RadGrid .rgMasterTable th.rgHeader.rgSorted {
    width: auto;
    height: auto;
    vertical-align: middle;
    background: var(--cw-color-layout-accent, #0d47a1) !important;
    color: var(--cw-color-layout-on-accent, #FFF);

}



/* tag element inside of th of header table */
.container .RadGrid .rgMasterTable th.rgHeader.rgSorted a {
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-style: normal;
  font-weight: 300;

  display: inline-flex;

  flex-direction: row;

  width: auto;
  margin-left: 1em;
  margin-top: 1.5em;
}


/* button to set ascendence or descendence  */
.container .RadGrid .rgMasterTable th.rgSorted button.rgActionButton {
  /*code here , think style to apply*/
  margin-top: 13px;
  margin-left: .75em;
  height: 100%;
}


  /* icon inside of buton */
  .container .RadGrid .rgMasterTable th.rgSorted button.rgActionButton .rgSortAscIcon,
  .container .RadGrid .rgMasterTable th.rgSorted button.rgActionButton .rgSortDescIcon {
    color: #fff;
    /*border: solid 1px;*/
    margin-top: -15px;
    margin-left: 12px;
  }

    .container .RadGrid .rgMasterTable th.rgSorted button.rgActionButton .rgSortAscIcon::before {
      /* This icon font is taken from the webpage fontawesome.com . Free icon Licence to use it in personally or comercially */
      font-family: "Font Awesome 5 Free";
      font-weight: 700;
      content: "\f077";
      clear: both;
      color: #fff;
      margin-left: 2px;
      font-size: 1em;
    }

    .container .RadGrid .rgMasterTable th.rgSorted button.rgActionButton .rgSortDescIcon::before {
      /* This icon font is taken from the webpage fontawesome.com . Free icon Licence to use it in personally or comercially */
      font-family: "Font Awesome 5 Free";
      font-weight: 700;
      content: "\f078";
      clear: both;
      color: #fff;
      margin-left: 2px;
      font-size: 1em;
    }


.container .RadGrid .rgMasterTable .rgHeader:first-child {
  border-top-left-radius: 10px;

}



.container .RadGrid .rgMasterTable .rgHeader:last-child {
  border-top-right-radius: 10px;

}

/* foot of the table Telerik:RadGrid */

.container .RadGrid .rgMasterTable tfoot {
  width: 100%;
  /*border: solid;*/
}

/* Applying style  to the class .NextPrevAndNumeric */

/* class NextPrevAndNumeric (In this section are the elements like arrow navigation, numeric paginations, and other settings like:
                        PagerStyle = {
                                        Slider,
                                        Advanced,
                                        NextPrev,
                                        NextPrevNumeric,
                                        NexPrevNumeric,
                                        NumericPages
                                     }. ALSO info pages and info items in any numbers of pages)
            These clases can be in the head or the table or in the foot one*/

/* PagerStyle => {NextPrevNumericAndAdvanced} */
/* Mode : [ NextPrevAndNumeric ] */
.container .RadGrid .rgMasterTable div.NextPrevAndNumeric {
  width: 100%;
  height: auto !important;
  padding-top: .25em !important;
  padding-bottom: .25em !important;
  border-radius: .25em;
  display: flex;

  align-items: center;
}



  /* Add this code to Radgrid.reset.css */
  .container .RadGrid .rgMasterTable div.NextPrevAndNumeric .rgWrap.rgArrPart1 button.rgPageFirst {
    display: none;
  }

  /* [buttons Prev && Next ] */
  .container .RadGrid .rgMasterTable div.NextPrevAndNumeric .rgWrap.rgArrPart1,
  .container .RadGrid .rgMasterTable div.NextPrevAndNumeric .rgWrap.rgArrPart2 {
    display: flex;

    margin-left: .25em;
    margin-right: .25em;

    min-width: 2.5em;
    justify-content: center;
  }

    .container .RadGrid .rgMasterTable div.NextPrevAndNumeric .rgWrap.rgArrPart1 button.rgPagePrev,
    .container .RadGrid .rgMasterTable div.NextPrevAndNumeric .rgWrap.rgArrPart2 button.rgPageNext {
      width: 25px !important;
      min-width: 25px !important;
      max-width: 25px !important;
      height: 26px;
      display: flex;

      justify-content: center;
      align-items: baseline;
      border-radius: .25em;

      background: var(--cw-color-button-background, #368ee0);
      border-bottom: solid 0em transparent !important;
      color: var(--cw-color-button-content, #fff);
   
    }

      .container .RadGrid .rgMasterTable div.NextPrevAndNumeric .rgWrap.rgArrPart1 button.rgPagePrev span.rgIcon,
      .container .RadGrid .rgMasterTable div.NextPrevAndNumeric .rgWrap.rgArrPart2 button.rgPageNext span.rgIcon {
        width: 100%;
        height: 100%;
        display: flex;

        justify-content: center;
        align-items: center;
      }

        /* New icons for btn paging */
        .container .RadGrid .rgMasterTable div.NextPrevAndNumeric .rgWrap.rgArrPart1 button.rgPagePrev span.rgIcon::before {
            font-family: "NewCwIcons";
           
            content: "\ea07";
            clear: both;
            color: #fff;
            font-size: 1em;
            margin-left: -0.25em;
        }

        .container .RadGrid .rgMasterTable div.NextPrevAndNumeric .rgWrap.rgArrPart2 button.rgPageNext span.rgIcon::before {
            font-family: "NewCwIcons";
           
            content: "\ea03";
            clear: both;
            color: #fff;
            font-size: 1em;
        }

    .container .RadGrid .rgMasterTable div.NextPrevAndNumeric .rgWrap.rgArrPart2 button.rgPageLast {
      display: none;
    }

  /* Items of Pagination */
  .container .RadGrid .rgMasterTable div.NextPrevAndNumeric .rgWrap.rgNumPart {
    display: flex;

    flex-direction: row;
    -ms-flex-direction: row;
  }

    .container .RadGrid .rgMasterTable div.NextPrevAndNumeric .rgWrap.rgNumPart a {
        width: 25px;
        height: 25px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: .25em;
        background: transparent;
        text-decoration: none;
        color: var(--cw-color-on-surface, #666666);
        font-family: 'Roboto Flex Variable', 'Roboto', sans-serif;
        border: solid 1px var(--cw-color-primary);
        font-size: 1em !important;
        cursor: pointer;
    }

      .container .RadGrid .rgMasterTable div.NextPrevAndNumeric .rgWrap.rgNumPart a.rgCurrentPage {
        background: var(--cw-color-primary-container, #368ee0);
        color: var(--cw-color-on-primary-container, #fff);
      }

      .container .RadGrid .rgMasterTable div.NextPrevAndNumeric .rgWrap.rgNumPart a span {
        width: 100%;
        height: 100%;
        display: flex;

        justify-content: center;
        align-items: center;
      }

        .container .RadGrid .rgMasterTable div.NextPrevAndNumeric .rgWrap.rgNumPart a:hover {
            background: var(--cw-color-primary, #368ee0);
            color: var(--cw-color-on-primary, #fff);
        }



  .container .RadGrid .rgMasterTable div.NextPrevAndNumeric .rgWrap.rgAdvPart {
    /*min-width: 86em;*/

    display: flex;
  
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
   
  }
    /* Label */
    .container .RadGrid .rgMasterTable div.NextPrevAndNumeric .rgWrap.rgAdvPart span.rgPagerLabel {
        color: #666666;
        margin-left: 1em;
        margin-right: 1em;
        font-size: 1em !important;
        font-family: 'Roboto Flex Variable', 'Roboto', sans-serif;
    }

/* RadCombobox */
html .RadGrid .rgMasterTable div.NextPrevAndNumeric .rgWrap.rgAdvPart div.RadCombobox {
  /*width: 2em !important;*/
}

.container .RadGrid .rgMasterTable div.NextPrevAndNumeric .rgWrap.rgInfoPart {
    /*border: solid 1px green;*/
    background: #fff;
    color: #666666;
    border: solid 0em transparent;
    /*border: solid 1px #368ee0;*/
    font-family: 'Roboto Flex Variable', 'Roboto', sans-serif;
    margin-left: .25em;
}

    .container .RadGrid .rgMasterTable div.NextPrevAndNumeric .rgWrap.rgInfoPart strong {
        font-family: 'Roboto Flex Variable', 'Roboto', sans-serif;
        font-size: 1em !important;
        color: #666666;
    }

/* --------------------------------------------------/ Mode : [ NextPrevAndNumeric ] */

/* .RadComboBox pagination */
/* -------------------------------------------- .RadComboBox */
/* class: .rgInfoPart */

.container .RadGrid .rgPagerCell .NextPrevAndNumeric .rgInfoPart {
  /*border: solid 1px;*/
  height: 100%;
  background: #368ee0;
  color: #fff;
  border: solid 3px #368ee0;
}

.container .RadGrid .rgPagerCell .rgInfoPart strong {
  margin-left: 4px;
  margin-right: 4px;
}

/* Class: .Slider => PagerMode : Slider */
.container .RadGrid .rgPager .rgPagerCell .Slider {
  width: 100%;
  height: 50px;
  color: #000;
  margin-top: 12px;
  padding: 4px 4px;
}

  .container .RadGrid .rgPager .rgPagerCell .Slider .RadSlider {
    /*border: solid 1px;*/
    margin-right: 20px;
    margin-top: 16px;
  }

    .container .RadGrid .rgPager .rgPagerCell .Slider .RadSlider .rsHorizontal {
      /*border: solid 1px;*/
      width: 100%;
      color: #000;
    }

.container .RadGrid_Metro .rgPager .rgPagerCell .RadSlider_Metro a.rslDecrease, /* This is a button to decrease the pages */
.container .RadGrid_Metro .rgPager .rgPagerCell .RadSlider_Metro a.rslIncrease {
  padding: 10px 10px;
  background: #0d47a1;
  color: #fff;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
}

  .container .RadGrid_Metro .rgPager .rgPagerCell .RadSlider_Metro a.rslDecrease:hover, /* This is a button to decrease the pages */
  .container .RadGrid_Metro .rgPager .rgPagerCell .RadSlider_Metro a.rslIncrease:hover {
    background: #368ee0;
  }


.container .RadGrid .rgPager .rgPagerCell .Slider .rgInfoPart {
  background: #368ee0;
  color: #000;
  border: solid 3px #368ee0;
}


/* class: .Advanced => PagerMode : Advanced */

.container .RadGrid .rgPager .rgPagerCell .Advanced /* Princial div container of elments */ {
  /* code here */
  width: 100%;
  height: 50px;
  margin: auto auto;
  border: solid 1px #368ee0;
  border-radius: 10px;
  border-bottom: solid 3px #2E86C1;
  margin-top: 20px;
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: 0px 0px 4px rgba(54,142,224,.5);
}

/* this class contains the maquetation of pager {label, input and button} */

.container .RadGrid .rgPager .Advanced .rgAdvPart {
  /* code here */
  width: 80%;
  padding: 10px 10px;
  margin-top: 15px;
}

  /* Label of pager */
  .container .RadGrid .rgPager .Advanced .rgAdvPart .rgPagerLabel {
    /* code here */
    width: 100px;
    height: 30px;
    color: #000;

    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 300;
    font-style: normal;
    text-align: center;
    /*border: solid 1px;*/
    display: flex;
    justify-content: center;
    align-items: center;
  }

    /* Addiing Icon .rgPagerLabel */

    .container .RadGrid .rgPager .Advanced .rgAdvPart .rgPagerLabel::before {
      /* This icon font is taken from the webpage fontawesome.com . Free icon Licence to use it in personally or comercially */
      font-family: "Font Awesome 5 Free";
      /*font-weight: 700;*/
      content: "\f15c";
      clear: both;
      color: #368ee0;
      margin-right: 12px;
      font-size: 20px;
    }


  /* input to set number of page to change it item of the table */
  .container .RadGrid .rgPager .Advanced .rgAdvPart .RadInput {
    /* code here */
    width: 300px;
    height: 30px;
    /*border: solid 1px;*/
    text-align: center;
    margin-left: 2%;
    margin-right: 1%;
    border: solid 1px #368ee0;
    background: #fff;
    color: #000;
  }


    .container .RadGrid .rgPager .Advanced .rgAdvPart .RadInput:hover,
    .container .RadGrid .rgPager .Advanced .rgAdvPart .RadInput:active,
    .container .RadGrid .rgPager .Advanced .rgAdvPart .RadInput:focus {
      background: #368ee0;
      border: solid 1px #2C7FB6;
      color: #fff;
      box-shadow: none;
 
    }


    .container .RadGrid .rgPager .Advanced .rgAdvPart .RadInput:active {
      transform: scale(1.05);
    }



      .container .RadGrid .rgPager .Advanced .rgAdvPart .RadInput:active::before {
        width: 100%;
      }
    /* Input inside of input (maybe autocomplete) */

    .container .RadGrid .rgPager .Advanced .rgAdvPart .RadInput .rgPagerTextBox {
      /* code here */

      text-align: center;
      /*border: solid 1px;*/
      color: #000;
      clear: both;
    }

      .container .RadGrid .rgPager .Advanced .rgAdvPart .RadInput .rgPagerTextBox:hover {
        color: #fff;
      }


  /* button indicates to go or change */

  .container .RadGrid .rgPager .Advanced .rgAdvPart .rgPagerButton {
    width: 100px;
    height: 30px;
    margin-left: 20px;
    margin-right: 20px;
    background: #0d47a1;
    border-bottom: solid 4px #093F92;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-style: normal;
    box-shadow: 0px 0px 4px rgba(13,71,161,.5);
  
  }

    .container .RadGrid .rgPager .Advanced .rgAdvPart .rgPagerButton:active,
    .container .RadGrid .rgPager .Advanced .rgAdvPart .rgPagerButton_focus {
      border-bottom: solid 0px;
      background: #368ee0;
      border-top: solid 4px #2E86C1;
    }

    .container .RadGrid .rgPager .Advanced .rgAdvPart .rgPagerButton:hover {
      background: #368ee0;
      border-bottom: solid 4px #2E86C1;
    }


  /* Text of button , here is posible to add an icon respective of the text */

  .container .RadGrid .rgPager .Advanced .rgAdvPart span.rgPagerButtonText {
    /* code here */
    /*color:#fff;*/
    text-shadow: 0px 0px 2px rgba(54,142,224,.5);
  }



/* Information of page in also items of pages */

.container .RadGrid .rgPager .Advanced .rgInfoPart {
  /* code here */
  width: 150px;
  height: 30px;
  color: #368ee0;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 12px;
  margin-top: 10px;
  margin-left: -12px;
}

/* class: NextPrev */

/* Principal div, it contains elements like rg.ArrPart1, buttons classes .rgActionButton and .rgPageFirst, .rgInfoPart*/

.container .RadGrid .rgPager .rgPagerCell .NextPrev {
  width: 100%;
  height: 50px;
  margin: auto auto;
  border: solid 1px #368ee0;
  border-radius: 10px;
  border-bottom: solid 3px #2E86C1;
  margin-top: 20px;
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: 0px 0px 4px rgba(54,142,224,.5);
  justify-content: space-between;
}
  /* text of the class .rgArrPart1 */

  .container .RadGrid .rgPager .rgPagerCell .NextPrev .rgArrPart1 {
    width: 50%;
    font-family: 'Roboto', sans-serif;
    color: #368ee0;
    margin-left: 20px;
  }

    /* buttons => .t-button, .rgPageFirst, .rgActionButton, .rgPagePrev, .rgPageNext, .rgPageLast */

    /* .t-button  style for all buttons */

    .container .RadGrid .rgPager .rgPagerCell .NextPrev .rgArrPart1 .t-button {
      /*border: solid 1px;*/
      width: 30px;
      height: 30px;
      margin-left: 2%;
      margin-right: 2%;
      border-radius: 4px;

      background: #0d47a1;
      border-bottom: solid 4px #093F92;
      box-shadow: 0px 0px 4px rgba(13,71,161,.3);

      color: #fff;
    }

      .container .RadGrid .rgPager .rgPagerCell .NextPrev .rgArrPart1 .t-button:active,
      .container .RadGrid .rgPager .rgPagerCell .NextPrev .rgArrPart1 .t-button:focus {
        background: #0d47a1;
        border-top: solid 4px #093F92;
      }


      /* icon of the button */

      .container .RadGrid .rgPager .rgPagerCell .NextPrev .rgArrPart1 .t-button .rgIcon {
        /*border: solid 1px;*/
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 2px;
      }

    /* button => .rgPageFirst */

    .container .RadGrid .rgPager .rgPagerCell .NextPrev .rgArrPart1 .rgPageFirst .rgIcon::before {
      /* This icon font is taken from the webpage fontawesome.com . Free icon Licence to use it in personally or comercially */
      font-family: "Font Awesome 5 Free";
      font-weight: 700;
      content: "\f100";
      clear: both;
      color: #fff;
      margin-left: 2px;
      font-size: 20px;
    }

    /* button => .rgPageLast */
    .container .RadGrid .rgPager .rgPagerCell .NextPrev .rgArrPart1 .rgPageLast .rgIcon::before {
      /* This icon font is taken from the webpage fontawesome.com . Free icon Licence to use it in personally or comercially */
      font-family: "Font Awesome 5 Free";
      font-weight: 700;
      content: "\f101";
      clear: both;
      color: #fff;
      margin-left: 4px;
      font-size: 20px;
    }

    /* button => .PagePrev */

    .container .RadGrid .rgPager .rgPagerCell .NextPrev .rgArrPart1 .rgPagePrev .rgIcon::before {
      /* This icon font is taken from the webpage fontawesome.com . Free icon Licence to use it in personally or comercially */
      font-family: "Font Awesome 5 Free";
      font-weight: 700;
      content: "\f0d9";
      clear: both;
      color: #fff;
      margin-left: 3px;
      font-size: 20px;
    }


    /* button => .PageNext */

    .container .RadGrid .rgPager .rgPagerCell .NextPrev .rgArrPart1 .rgPageNext .rgIcon::before {
      /* This icon font is taken from the webpage fontawesome.com . Free icon Licence to use it in personally or comercially */
      font-family: "Font Awesome 5 Free";
      font-weight: 700;
      content: "\f0da";
      clear: both;
      color: #fff;
      margin-left: 8px;
      font-size: 20px;
    }


  /* .rgInfoPart */


  .container .RadGrid .rgPager .rgPagerCell .NextPrev .rgInfoPart {
    /*border: solid 1px;*/
    float: right;
    height: 100%;
    color: #368ee0;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    margin-right: 20px;
  }

/* Class: NextPrevNumericAndAdvanced */

.container .rgPager .rgPagerCell .NextPrevNumericAndAdvanced {
  width: 100%;
  height: 50px;
  margin: auto auto;
  border: none;
  border-radius: 10px;

  margin-top: 20px;
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: none;

}

  .container .rgPager .rgPagerCell .NextPrevNumericAndAdvanced .rgArrPart1 {
    /*width: 10%;*/
    height: 100%;
    /*border: solid 1px; */
    margin-left: 12px;
  }

    .container .rgPager .rgPagerCell .NextPrevNumericAndAdvanced .rgArrPart1 .t-button,
    .container .rgPager .rgPagerCell .NextPrevNumericAndAdvanced .rgArrPart2 .t-button {
      width: 30px;
      height: 30px;
      margin-left: 2%;
      margin-right: 2%;
      border-radius: 4px;

      background: var(--cw-color-button-background);
      border-bottom: none;
      box-shadow: none;
  
      color: var(--cw-color-button-content);
    }

        .container .rgPager .rgPagerCell .NextPrevNumericAndAdvanced .rgArrPart1 .t-button:hover,
        .container .rgPager .rgPagerCell .NextPrevNumericAndAdvanced .rgArrPart2 .t-button:hover {
            background: var(--cw-color-button-hover-background);
            color: var(--cw-color-button-hover-content);
        }




      .container .rgPager .rgPagerCell .NextPrevNumericAndAdvanced .rgArrPart1 .rgPageFirst .rgIcon::before {
        /* This icon font is taken from the webpage fontawesome.com . Free icon Licence to use it in personally or comercially */
        font-family: "Font Awesome 5 Free";
        font-weight: 700;
        content: "\f100";
     
        margin-left: 2px;
     
      }

    .container .rgPager .rgPagerCell .NextPrevNumericAndAdvanced .rgArrPart1 .rgPagePrev {
    }

      .container .rgPager .rgPagerCell .NextPrevNumericAndAdvanced .rgArrPart1 .rgPagePrev .rgIcon::before {
        /* This icon font is taken from the webpage fontawesome.com . Free icon Licence to use it in personally or comercially */
        font-family: "Font Awesome 5 Free";
        font-weight: 700;
        content: "\f0d9";

        margin-left: 3px;
   
      }




  .container .rgPager .rgPagerCell .NextPrevNumericAndAdvanced .rgNumPart {
    height: 100%;
    /* border: solid 1px; */
  }

    .container .rgPager .rgPagerCell .NextPrevNumericAndAdvanced .rgNumPart a {
      width: 20px;
      height: 20px;
      background: transparent;
      border-radius: 4px;
   
      color: var(--cw-color-primary);
      font-family: 'Roboto', sans-serif;
      padding: 4px 4px;
      margin-left: 4px;
      margin-right: 4px;
      border: solid 1px var(--cw-color-primary);
      box-shadow: none;

    }

        .container .rgPager .rgPagerCell .NextPrevNumericAndAdvanced .rgNumPart a:hover {
            background: var(--cw-color-primary);
            color: var(--cw-color-on-primary);
            border: solid 1px var(--cw-color-primary);
        }

        .container .rgPager .rgPagerCell .NextPrevNumericAndAdvanced .rgNumPart a:active,
        .container .rgPager .rgPagerCell .NextPrevNumericAndAdvanced .rgNumPart a:focus {
            background: var(--cw-color-primary-container);
            color: var(--cw-color-on-primary-container);
            border-color: var(--cw-color-on-primary-container);
          
        }



  .container .rgPager .rgPagerCell .NextPrevNumericAndAdvanced .rgArrPart2 {
    height: 100%;
    /*border: solid 1px; */
  }

    .container .rgPager .rgPagerCell .NextPrevNumericAndAdvanced .rgArrPart2 .rgPageLast .rgIcon::before {
      /* This icon font is taken from the webpage fontawesome.com . Free icon Licence to use it in personally or comercially */
      font-family: "Font Awesome 5 Free";
      font-weight: 700;
      content: "\f101";
    
      margin-left: 4px;

    }

    .container .rgPager .rgPagerCell .NextPrevNumericAndAdvanced .rgArrPart2 .rgPageNext .rgIcon::before {
      /* This icon font is taken from the webpage fontawesome.com . Free icon Licence to use it in personally or comercially */
      font-family: "Font Awesome 5 Free";
      font-weight: 700;
      content: "\f0da";
   
      margin-left: 8px;

    }

  .container .rgPager .rgPagerCell .NextPrevNumericAndAdvanced .rgInfoPart {
    height: 100%;
    /*border: solid 1px; */
    float: right;
    color: var(--cw-color-on-surface);
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
  }

  .container .rgPager .rgPagerCell .NextPrevNumericAndAdvanced .rgAdvPart {
    height: 100%;
    /*border: solid 1px; */
    margin-left: 12px;

  }

    .container .rgPager .rgPagerCell .NextPrevNumericAndAdvanced .rgAdvPart .rgPagerLabel {
      /* code here */
      /*width: 100px;*/
      height: 30px;
      color: #000;
  
      font-family: 'Roboto', sans-serif;
      font-size: 12px;
      font-weight: 300;
      font-style: normal;
      text-align: center;
      /*border: solid 1px;*/
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .container .rgPager .rgPagerCell .NextPrevNumericAndAdvanced .rgAdvPart .rgPagerButton {
        width: auto;
        height: 30px;
        margin-left: 20px;
        margin-right: 20px;
        background: var(--cw-color-button-background);
        border-bottom: none;
        color: var(--cw-color-button-content);
        font-family: 'Roboto', sans-serif;
        font-weight: 300;
        font-style: normal;
        box-shadow: none;
        padding: 0 0.75rem;
    }


    .container .rgPager .rgPagerCell .NextPrevNumericAndAdvanced .rgAdvPart .RadInput {
      /* code here */
      width: 40px !important;
      height: 30px;
  
      text-align: center;
      margin-left: 2%;
      margin-right: 1%;
   
      background: #fff;
      color: #000;
      padding: .15em .15em;
      margin-top: -4px !important;
    }

      .container .rgPager .rgPagerCell .NextPrevNumericAndAdvanced .rgAdvPart .RadInput:hover,
      .container .rgPager .rgPagerCell .NextPrevNumericAndAdvanced .rgAdvPart .RadInput:active,
      .container .rgPager .rgPagerCell .NextPrevNumericAndAdvanced .rgAdvPart .RadInput:focus {

      
        color: #000 !important;
        box-shadow: none;
    
        padding: 2px 2px;
      }


      .container .rgPager .rgPagerCell .NextPrevNumericAndAdvanced .rgAdvPart .RadInput:active {
        transform: scale(1.05);
 
      }

/* Input inside of input (maybe autocomplete) */

.container .RadGrid .rgPager .NextPrevNumericAndAdvanced .rgAdvPart .RadInput .rgPagerTextBox,
.container .RadGrid .rgPager .NextPrevNumericAndAdvanced .rgAdvPart .RadInput .rgPagerTextBox:active,
.container .RadGrid .rgPager .NextPrevNumericAndAdvanced .rgAdvPart .RadInput .rgPagerTextBox:focus {
  /* code here */

  text-align: center;
  border: solid 1px var(--cw-color-outline-variant);
  color: var(--cw-color-on-surface);
  clear: both;
  padding: .15em .15em;
}



/* Class: NumericPages => PageerMode : NumericPages */

/* This is a div class and it contains div classes like .rgNumParta and .rgInfoPart */

.container .RadGrid_Metro .rgPager .rgPagerCell .NumericPages {
  width: 100%;
  height: 30px;
  padding: 10px 10px;
  border: solid 0 transparent;
  margin-top: 20px;
  margin-bottom: 20px;
  border-radius: 10px;

  box-shadow: none;

  justify-content: space-between;
}

  /* This div class contains elemnts inside of pagination items */

  .container .RadGrid_Metro .rgPager .rgPagerCell .NumericPages .rgNumPart {
    width: 80%;
    height: 100%;
    /*border: solid 1px;*/
    justify-content: flex-start;
    gap: 0.25rem;
  }

    /* this class contains elements of items pages of the table */

    .container .RadGrid_Metro .rgPager .rgPagerCell .NumericPages .rgNumPart a {
        width: 20px;
        height: 20px;
        padding: 4px;
        font-family: 'Roboto', sans-serif;
        font-size: 14px;
        color: var(--cw-color-primary);
        border-radius: 0.25rem;
        background: transparent;
        border: solid 1px var(--cw-color-primary);
    }

      .container .RadGrid_Metro .rgPager .rgPagerCell .NumericPages .rgNumPart a:hover {
        transform: scale(1.01);
        background: var(--cw-color-primary-container);
        color: var(--cw-color-on-primary-container);
      }
      /* active item of pagination */

      .container .RadGrid_Metro .rgPager .rgPagerCell .NumericPages .rgNumPart a.rgCurrentPage {
        transform: scale(1.05);

        background: var(--cw-color-primary);
        color: var(--cw-color-on-primary);
      }

  /* Information of items and pages  of the table */

  .container .RadGrid_Metro .rgPager .rgPagerCell .NumericPages .rgInfoPart {
    /*border: solid 1px;*/
    width: 20%;
    height: 100%;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 12px;
    float: right;
    color: var(--cw-color-on-surface-variant);
    margin-right: 60px;
  }

    .container .RadGrid_Metro .rgPager .rgPagerCell .NumericPages .rgInfoPart::before {
        /* This icon font is taken from the webpage fontawesome.com . Free icon Licence to use it in personally or comercially */
        font-family: "Font Awesome 5 Free";
        font-weight: 700;
        content: "\f03a";
        clear: both;
        color: var(--cw-color-icons, #368ee0);
        margin-right: 8px;
        font-size: 20px;
        opacity: .6;
    }


    .container .RadGrid_Metro .rgPager .rgPagerCell .NumericPages .rgInfoPart::after {
        /* This icon font is taken from the webpage fontawesome.com . Free icon Licence to use it in personally or comercially */
        font-family: "Font Awesome 5 Free";
        /*font-weight: 700;*/
        content: "\f15c";
        clear: both;
        color: var(--cw-color-icons, #368ee0);
        margin-left: 8px;
        font-size: 20px;
        opacity: .6;
    }


/*Applying style to Telerik:MasterTableView => .rgCommandRow : This class belongs to element table tag tr (tr.rgCommandRow) and has inside of it a class named .rgCommandCell of the element  table tag td (td.rgCommandCell)
                                Suggestion to manage this class preferible use class .{container .RadGrid } and apply the style */

.container .RadGrid .rgCommandRow /* tr element tag of the table */ {
  width: 100%;
  height: 20px;
  background: transparent;
}

  .container .RadGrid .rgCommandRow .rgCommandCell /* td element tag of the table */ {
    width: 100%;
    height: 30px;
    /*border: solid 2px;*/
    padding-top: .015em;
    padding-bottom: .015em;
    background: transparent;
    line-height: 15px;
  }

    .container .RadGrid .rgCommandRow .rgCommandCell .rgCommandCellLeft, /* Div container of button tag. It has inside span icon and text */
    .container .RadGrid .rgCommandRow .rgCommandCell .rgCommandCellRight /* Div container of button tag. It has inside span icon and text */ {
      width: auto;
      width: 25px !important;
      min-width: 25px !important;
      max-width: 25px !important;
      height: 25px;
      max-height: 25px !important;
      /* margin-top: -0.85em;
                                    margin-bottom: .55em;                                  */
      float: left;
    }

    .container .RadGrid .rgCommandRow .rgCommandCell .rgCommandCellRight /* Div container of button tag. It has inside span icon and text */ {
      padding-bottom: 12px;
    }

      .container .RadGrid .rgCommandRow .rgCommandCell .rgCommandCellLeft .rgAdd, /* Button to add new record */
      .container .rgAdd,
      .container .RadGrid .rgCommandRow .rgCommandCell .rgCommandCellRight .rgRefresh /*Button to refresh the table */ {
        width: 25px;
        height: 50px;
        color: #000;
        padding: 2px;
        flex-direction: row;
 
        margin-top: -0.79em !important;
        margin-bottom: .015em;
      }

        .container .RadGrid .rgCommandRow .rgCommandCell .rgCommandCellLeft .rgAdd:hover, /* Button to add new record */
        .container .rgAdd:hover,
        .container .RadGrid .rgCommandRow .rgCommandCell .rgCommandCellRight .rgRefresh:hover /*Button to refresh the table */ {
          color: #0d47a1;
        }


        .container .RadGrid .rgCommandRow .rgCommandCell .rgCommandCellLeft .rgAdd .rgAddIcon,
        .container .RadGrid .rgCommandRow .rgCommandCell .rgCommandCellRight .rgRefresh .rgRefreshIcon {
          width: 25px;
          height: 25px;
          border-radius: .25em;

          color: var(--cw-color-icons);
          display: flex;

          justify-content: center;
          align-items: center;
        }


          /* Button class .rgAdd => Add new record, inside of button there is an icon class called .rgAddIcon */

            .container .RadGrid .rgCommandRow .rgCommandCell .rgCommandCellLeft .rgAdd .rgAddIcon::before,
            .CblFormSettingsBtnSave::before {
                /* This icon font is taken from the webpage fontawesome.com . Free icon Licence to use it in personally or comercially */
                font-family: "NewCwIcons";
                content: "\ea29";
                font-size: 24px;
            }

          /* Button class .rgAdd => Refresh, inside of button there is an icon class called .rgRefersh */

            .container .RadGrid .rgCommandRow .rgCommandCell .rgCommandCellRight .rgRefresh .rgRefreshIcon::before {
        
                content: "\ea12";
                font-family: "NewCwIcons";
                font-size: 18px;
            }

    /* Button class .rgAdd => Add new record, inside of button there is a text  class called .rgButtonText
                                       Button class .rgRefresh => Refresh, inside of button there is a text  class called .rgButtonText */

    .container .RadGrid .rgCommandRow .rgCommandCell .rgAdd .rgButtonText,
    .container .RadGrid .rgCommandRow .rgCommandCell .rgRefresh .rgButtonText {

      display: none;
    }


/* Buttons for exporting data => Word, Csv, Excel and Pdf */

/* Export Buttons */

.container .RadGrid .rgCommandCell .rgCommandCellRight .rgExpXLS, /* Export Buttons Excel */
.container .RadGrid .rgCommandCell .rgCommandCellRight .rgExpPDF, /* Export Buttons PDF */
.container .RadGrid .rgCommandCell .rgCommandCellRight .rgExpCSV, /* Export Buttons CSV */
.container .RadGrid .rgCommandCell .rgCommandCellRight .rgExpDOC /* Export Buttons DOC */ {
  width: 35px;
  height: 35px;

  padding: 10px 10px;
  margin-right: 8px;
  margin-top: -1em;
  border-radius: 100%;

  padding: 4px 4px;
}


  .container .RadGrid .rgCommandCell .rgCommandCellRight .rgExpXLS:active, /* Export Buttons Excel */
  .container .RadGrid .rgCommandCell .rgCommandCellRight .rgExpPDF:active, /* Export Buttons PDF */
  .container .RadGrid .rgCommandCell .rgCommandCellRight .rgExpCSV:active, /* Export Buttons CSV */
  .container .RadGrid .rgCommandCell .rgCommandCellRight .rgExpDOC:active {
/*    transform: scale(0.15);*/

  }
/* Button Excel */
.container .RadGrid .rgCommandCell .rgCommandCellRight .rgExpXLS /* Export Buttons Excel */ {
  background: #1D6F42;
  color: #fff;
  border: solid 3px rgba(16,87,48,.5);
}

  .container .RadGrid .rgCommandCell .rgCommandCellRight .rgExpXLS:hover {
    /* code here */
    background: #105730;
    border: solid 3px rgba(29,111,66,.5);
  }

  /* class: rgExpXLSIcon */
  .container .RadGrid .rgCommandCell .rgCommandCellRight .rgExpXLS .rgExpXLSIcon::before {
    /* This icon font is taken from the webpage fontawesome.com . Free icon Licence to use it in personally or comercially */
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    content: '\f1c3';
    clear: both;

    margin-top: -1px;
  }

/* Button : Pdf */

.container .RadGrid .rgCommandCell .rgCommandCellRight .rgExpPDF /* Export Buttons Excel */ {
  background: #D8221A;
  color: #fff;
  border: solid 3px rgba(184,20,12,.5);
}


  .container .RadGrid .rgCommandCell .rgCommandCellRight .rgExpPDF:hover {
    /* code here */
    background: #B8140C;
    border: solid 3px rgba(216,34,26.5);
  }

  /* class: rgExpPDFIcon */
  .container .RadGrid .rgCommandCell .rgCommandCellRight .rgExpPDF .rgExpPDFIcon::before {
    /* This icon font is taken from the webpage fontawesome.com . Free icon Licence to use it in personally or comercially */
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    content: '\f1c1';
    clear: both;

    margin-top: -1px;
  }

/* Button :  Csv */

.container .RadGrid .rgCommandCell .rgCommandCellRight .rgExpCSV /* Export Buttons Excel */ {
  background: #85BF29;
  color: #fff;
  border: solid 3px rgba(103,150,29,.5);
}

  .container .RadGrid .rgCommandCell .rgCommandCellRight .rgExpCSV:hover {
    /* code here */
    background: #67961D;
    border: solid 3px rgba(133,191,41,.5);
  }

  /* class: rgExpCsvIcon */
  .container .RadGrid .rgCommandCell .rgCommandCellRight .rgExpCSV .rgExpCSVIcon::before {
    /* This icon font is taken from the webpage fontawesome.com . Free icon Licence to use it in personally or comercially */
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    content: '\f6dd';
    clear: both;
    /*margin-left: -6px;*/
    margin-top: -1px;
  }


/* Button : Word */

.container .RadGrid .rgCommandCell .rgCommandCellRight .rgExpDOC /* Export Buttons Excel */ {
  background: #295496;
  color: #fff;
  border: solid 3px rgba(24,60,116,.5);
}

  .container .RadGrid .rgCommandCell .rgCommandCellRight .rgExpDOC:hover {
    /* code here */
    background: #183C74;
    border: solid 3px rgba(41,84,150,.5);
  }

  /* class: rgExpDOCIcon */
  .container .RadGrid .rgCommandCell .rgCommandCellRight .rgExpDOC .rgExpDOCIcon::before {
    /* This icon font is taken from the webpage fontawesome.com . Free icon Licence to use it in personally or comercially */
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    content: '\f1c2';
    clear: both;

    margin-top: -1px;
  }


/* Class: RadToolbar */
.container .RadGrid .RadToolBar {
  width: 100%;
  color: #fff;
  padding: 10px 10px;
  margin: auto auto;
  z-index: 2 !important; /* Overwritting style generated of toolbar - radgrid */
}

  .container .RadGrid .RadToolBar .rtbUL {
    width: 100%;
    display: block;
  }

    .container .RadGrid .RadToolBar .rtbUL .rtbLI {
      display: inline-block;
      margin: 8px 8px;
    }

    .container .RadGrid .RadToolBar .rtbUL .rtbHovered span.rtbButton {
      color: #fff;
    }


    .container .RadGrid .RadToolBar .rtbUL .rtbLI span.rtbButton {
      background: var(--cw-color-button-background, #368ee0);
      color: var(--cw-color-button-content, #FFF);
      font-family: 'Roboto', sans-serif;
      font-weight: 400;
      font-size: 0.75rem;
      border-bottom: none 0px transparent;
      padding: 4px 4px;
      width: 100px;
      border-radius: 4px;

      box-shadow: none;
     
      text-align: center;
      cursor: pointer;
    }

    .container .RadGrid .RadToolBar .rtbUL .rtbLI span.rtbButton:hover {
        background: var(--cw-color-button-hover-background, #368ee0);
        color: var(--cw-color-button-hover-content, #FFF);
    }



        /* body of the table Telerik:RadGrid */
        /* Telerik option (GroupByExpression)*/

        .container .RadGrid .rgMasterTable tbody td.rgGroupCol {
  /*border: solid 1px;*/
  background: transparent;
}

.container .RadGrid .rgMasterTable tbody {
  background: #fff;

  border-radius: 10px;
  text-align: left;
}

  /* Rows and columns of telerik:RadGrid table. Each row has a class named .rgRow and .rgAltRow */

  .container .RadGrid .rgMasterTable tbody .rgRow,
  .container .RadGrid .rgMasterTable tbody .rgAltRow {
  
    border-bottom: solid 1px var(--cw-color-outline-variant, #ccc); /* Hexadecimal color => #D0D3D4 // unable by the moment */
  }



    .container .RadGrid .rgMasterTable tbody .rgRow td.ruButtonHover button,
    .container .RadGrid .rgMasterTable tbody .rgAltRow td.ruButtonHover button {
      float: left !important;
    }

  .container .RadGrid .rgMasterTable tbody tr.rgNoRecords {
    height: 50px;
  }



    .container .RadGrid .rgMasterTable tbody .rgRow td,
    .container .RadGrid .rgMasterTable tbody .rgAltRow td,
    .container .RadGrid .rgMasterTable tbody .rgEditRow td {
        font-family: 'Roboto', sans-serif;
        font-weight: 500;
        font-style: normal;
        font-size: 12px;
        border-collapse: collapse;
        vertical-align: middle;
        line-height: 1.05em;
        text-align: left;
        padding: 0.25rem;
    }



    .container .RadGrid .rgMasterTable tbody tr:is(.rgRow,.rgAltRow,.rgEditRow) td:first-child {
        padding-left: .25em !important;
        min-width: 3rem;
    }





    /* When is used telerik option (Grouping)*/
    .container .RadGrid .rgMasterTable tbody .rgRow td.rgGroupCol,
    .container .RadGrid .rgMasterTable tbody .rgAltRow td.rgGroupCol {
      background: transparent;
    }

    /* when Is active the property Sorted */
    .container .RadGrid .rgMasterTable tbody .rgRow td.rgSorted,
    .container .RadGrid .rgMasterTable tbody .rgAltRow td.rgSorted {
      color: #fff;
      /*border: solid 1px;*/
    }





    .container .RadGrid .rgMasterTable tbody .rgRow:hover,
    .container .RadGrid .rgMasterTable tbody .rgAltRow:hover {
        background: var(--cw-color-layout-table-row-selected, #368ee0);
        color: var(--cw-color-layout-on-table-row-selected, #FFF);
        border-top-width: 0px;
    }


    .container .RadGrid .rgMasterTable tbody .rgRow:hover td,
    .container .RadGrid .rgMasterTable tbody .rgAltRow:hover td {
    
      border-top-width: 0px;
    }

    .container .RadGrid .rgMasterTable tbody .rgRow:hover .rgEdit,
    .container .RadGrid .rgMasterTable tbody .rgAltRow:hover .rgEdit {
      /*IMPORTANT CHECK THIS JUAN, TRY TO SET A BACKGROUND HOVER NOT AFFECTING ITS TD BUTTON JUST WHEN YOU DO NOT HAVE A BUTTON!
                    */
    }


/* Class : RadGrid edit button , its class called .t-button .rgEditButton inside of the class .rgRow and .rgAltRow , content in td element tag of the table */

.container .RadGrid .rgMasterTable .rgRow .rgEdit,
.container .RadGrid .rgMasterTable .rgAltRow .rgEdit,
.container .RadGrid .rgMasterTable .rgRow .rgediting,
.container .RadGrid .rgMasterTable .rgAltRow .rgediting,
.container .RadGrid .rgMasterTable .rgRow .rgEditInline,
.container .RadGrid .rgMasterTable .rgAltRow .rgEditInline,
.container .RadGrid .rgMasterTable .rgRow .rgEditBroker,
.container .RadGrid .rgMasterTable .rgAltRow .rgEditBroker {
  background: transparent;
  padding: 10px 5px;

  color: var(--cw-color-icons, #368ee0);
  text-align: center;

}

.container .RadGrid .rgMasterTable tbody .rgRow .cblbtnSearch,
.container .RadGrid .rgMasterTable tbody .rgAltRow .cblbtnSearch {
  border: solid 0em transparent !important;
}

    .container .RadGrid .rgMasterTable tbody .rgRow .cblbtnSearch::before,
    .container .RadGrid .rgMasterTable tbody .rgAltRow .cblbtnSearch::before {
        font-family: "NewCwIcons";
        content: "\ea0a";
        margin-right: 0px;
        margin-left: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px !important;
        color: var(--cw-color-icons);
    }



/* Button Class: Cancelled */
.container .RadGrid .rgMasterTable .rgRow .rgcancelled .rgcancelledIcon::before,
.container .RadGrid .rgMasterTable .rgAltRow .rgcancelled .rgcancelledIcon::before {
    font-family: "NewCwIcons";
    content: "\ea34";
    margin: 0px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px !important;
    border: solid 0em transparent !important;
}


/* Buttn class : Accept*/
/*.container .RadGrid .rgMasterTable .rgRow .rgaccept .rgacceptIcon::before,
.container .RadGrid .rgMasterTable .rgAltRow .rgaccept .rgacceptIcon::before {
    font-family: "NewCwIcons";
    content: "\ea6d";
    margin: 0px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px !important;
    border: solid 0em transparent !important;
}
*/
/* Class: .rgButton.rgView */
.container .RadGrid .rgMasterTable .rgRow .RadButton.rgView,
.container .RadGrid .rgMasterTable .rgAltRow .RadButton.rgView {
  /*width: 40px !important;
                                height: 40px !important;*/
}

/* Class : .rgSendMessage */
.container .RadGrid .rgMasterTable .rgRow .rgSendMessage,
.container .RadGrid .rgMasterTable .rgAltRow .rgSendMessage {
  background: transparent;
  padding: 10px 5px;
  color: var(--cw-color-icons);
  text-align: center;
  margin: auto auto;
}

/* Class : .rgCopy */
.container .RadGrid .rgMasterTable .rgRow .rgCopy,
.container .RadGrid .rgMasterTable .rgAltRow .rgCopy {
    background: transparent;
    padding: 10px 5px;
    color: var(--cw-color-icons);
    text-align: center;
    margin: auto auto;
}

/* Class: .rgReset*/
.container .RadGrid .rgMasterTable .rgRow .rgReset,
.container .RadGrid .rgMasterTable .rgAltRow .rgReset {
    background: transparent;
    padding: 10px 5px;
    color: var(--cw-color-icons);
    text-align: center;
    margin: auto auto;
}


/* Class : .rgSendMessage */
.container .RadGrid .rgMasterTable .rgRow:hover .rgSendMessage,
.container .RadGrid .rgMasterTable .rgAltRow:hover .rgSendMessage,
/* Class : .rgCopy */
.container .RadGrid .rgMasterTable .rgRow:hover .rgCopy,
.container .RadGrid .rgMasterTable .rgAltRow:hover .rgCopy {
  background: #0d47a1;
  border-bottom-color: #093F92;
}

/* Class : rgEditSchedulingEdit ( this for Scheduling Edit GridEditCommandColumn to apply directly style to the tag a )*/
.container .RadGrid .rgMasterTable .rgRow td.rgEditSchedulingEdit a,
.container .RadGrid .rgMasterTable .rgAltRow td.rgEditSchedulingEdit a {
  background: #0d47a1;
  border-bottom: solid 4px #093F92;
  box-shadow: 0px 0px 10px rgba(13,71,161,.3);
  color: #fff;
  text-align: center;
  margin: auto auto;
  display: flex;

  justify-content: center;
  align-items: center;
  width: 25px;
  height: 25px;
  border-radius: 4px;

}


.container .RadGrid .rgMasterTable .rgEditIcon::before, /* Icon of button , its class named .rgEditIcon */
.container .RadGrid .rgMasterTable .rgEditIcon::before, /* Icon of button , its class named .rgEditIcon */
.container .RadGrid .rgMasterTable .rgRow .rgediting .rgeditingIcon::before,
.container .RadGrid .rgMasterTable .rgAltRow .rgediting .rgeditingIcon::before,
.container .RadGrid .rgMasterTable .rgRow .rgEditInline .rgEditInlineIcon::before,
.container .RadGrid .rgMasterTable .rgAltRow .rgEditInline .rgEditInlineIcon::before,
.container .RadGrid .rgMasterTable .rgRow .rgEditBroker span.rgEditBrokerIcon::before,
.container .RadGrid .rgMasterTable .rgAltRow .rgEditBroker span.rgEditBrokerIcon::before,
.container .RadButton.CblBtnEdit::before
 {
    font-family: "NewCwIcons";
    content: "\ea32";
    font-size: 24px;
}


.container .RadGrid .rgMasterTable .rgRow:hover td .rgEdit span.rgIcon::before,
.container .RadGrid .rgMasterTable .rgAltRow:hover td .rgEdit span.rgIcon::before,
.container .RadGrid .rgMasterTable .rgRow:hover td button span.t-font-icon.rgIcon::before,
.container .RadGrid .rgMasterTable .rgAltRow:hover td button span.t-font-icon.rgIcon::before
.container .RadGrid .rgMasterTable .rgRow:hover td .RadButton.CblBtnDownload::before,
.container .RadGrid .rgMasterTable .rgAltRow:hover td .RadButton.CblBtnDownload:before {
  color: #fff !important;
}

/* CblBtnDownload */
.container .RadButton.CblBtnDownload::before,
div .RadButton.CblBtnDownload::before {

    font-family: "NewCwIcons";
    content: "\ea0c";
    color: var(--cw-color-icons, #0d47a1);
    font-size: 1.55em;
}
/* Class : .rgEditRow , it displays when the user makes click on button .rgEditButton and appears inside section to edit, MPORTANT: WHEN MAKE CLICK ON EDIT BUTTON OF MASTER TABLE CAN BE IN THE FOOTER OF TABLE OR IN THE HEAD OF TABLE ! */

.container .RadGrid tr.rgEditRow td {
    background: var(--cw-color-layout-table-row-selected);
    color: var(--cw-color-layout-on-table-row-selected);
 
    border-bottom: solid 2px var(--cw-color-outline-variant);
    line-height: normal;
    text-align: justify;
    /* padding: 10px; */
}

    .container .RadGrid tr.rgEditRow td button.rgActionButton {
        color: var(--cw-color-layout-on-table-row-selected);
    }


    /* Class: .rgEditRow  form input types*/
    /* .rgEditRow => .RadComboBox */
    /* -------------------------------------------.rgEditRow  */
    /* Class: .rgReset*/
    .container .RadGrid .rgMasterTable .rgRow .rgReset span.rgResetIcon::before, .container .RadGrid .rgMasterTable .rgAltRow .rgReset span.rgResetIcon::before {
  /* This icon font is taken from the webpage fontawesome.com . Free icon Licence to use it in personally or comercially */
  font-family: "Font Awesome 5 Free";
  font-weight: 700;
  content: '\f2f9';
  clear: both;
}

/*.container .RadGrid tr.rgEditRow td .rgEdit > .rgEditIcon,
.container .RadGrid tr.rgEditRow td .rgEdit > .rgIcon {
  color: #fff;
}*/

  /* Edit */
.container .RadGrid tr.rgEditRow td .rgEdit > .rgEditIcon::before {
    font-family: "NewCwIcons";
    content: "\ea32";
    font-size: 1.5rem;
}



/* Class : .rgSendMessage */
.container .RadGrid .rgMasterTable .rgRow .rgSendMessage > span.rgSendMessageIcon::before,
.container .RadGrid .rgMasterTable .rgAltRow .rgSendMessage > span.rgSendMessageIcon::before {
  /* This icon font is taken from the webpage fontawesome.com . Free icon Licence to use it in personally or comercially */
  font-family: "Font Awesome 5 Free";
  /*font-weight: 700;*/
  content: '\f0e0';
  clear: both;
  color: #ffffff;
}

/* Class : .rgCopy */
.container .RadGrid .rgMasterTable .rgRow .rgCopy > span.rgCopyIcon::before,
.container .RadGrid .rgMasterTable .rgAltRow .rgCopy > span.rgCopyIcon::before,
/* CblBtnCopy */
.container .RadButton.CblBtnCopy::before,
div .RadButton.CblBtnCopy::before {
  /* This icon font is taken from the webpage fontawesome.com . Free icon Licence to use it in personally or comercially */
  font-family: "Font Awesome 5 Free";
  font-weight: 700;
  content: '\f0c5';
  clear: both;
  color: #fff;
}

/* Class : .CblBtnBack */
.container .RadButton.CblBtnBack::before,
div .container .RadButton.CblBtnBack::before {
  /* This icon font is taken from the webpage fontawesome.com . Free icon Licence to use it in personally or comercially */
  font-family: "Font Awesome 5 Free";
  font-weight: 700;
  content: '\f359';
  clear: both;
  color: #fff;
}

/* Class: .CblBtnRefresh */
.container .RadButton.CblBtnRefresh::before,
div .container .RadButton.CblBtnRefresh::before {
  /* This icon font is taken from the webpage fontawesome.com . Free icon Licence to use it in personally or comercially */
  font-family: "Font Awesome 5 Free";
  font-weight: 700;
  content: '\f021';
  clear: both;
  color: #fff;
}

/* Class: .CblBtnRefresh */
.container .RadButton.CblBtnClear::before,
div .container .RadButton.CblBtnClear::before {
  /* This icon font is taken from the webpage fontawesome.com . Free icon Licence to use it in personally or comercially */
  font-family: "Font Awesome 5 Free";
  font-weight: 700;
  content: '\f51a';
  clear: both;
  color: #fff;
}

/* Insert */
.container .RadGrid tr.rgEditRow td .rgInsert > .rgInsertIcon::before {
  /* This icon font is taken from the webpage fontawesome.com . Free icon Licence to use it in personally or comercially */
  font-family: "Font Awesome 5 Free";
  /*font-weight: 700;*/
  content: '\f0c7';
  clear: both;
  color: #ffff;
}



/* Update */
.container .RadGrid tr.rgEditRow td .rgUpdate > .rgUpdateIcon::before {
    /* This icon font is taken from the webpage fontawesome.com . Free icon Licence to use it in personally or comercially */
    font-family: "NewCwIcons";
    content: '\ea12';
    text-align: center;
}

.container .RadGrid tr.rgEditRow td .rgCancel > .rgCancelIcon::before,
/* CblBtnCancel */
.container .RadButton.CblBtnCancel::before {
    /* This icon font is taken from the webpage fontawesome.com . Free icon Licence to use it in personally or comercially */
    font-family: "NewCwIcons";
    content: '\ea34';
    text-align: center;
}

/* CblBtnClose */
.container .RadButton.CblBtnClose::before {
    /* This icon font is taken from the webpage fontawesome.com . Free icon Licence to use it in personally or comercially */
    font-family: "NewCwIcons";
    content: '\ea33';
    color: #fff;
    clear: both;
    text-align: center;
}

/* Delete */
.container .RadGrid tr.rgEditRow td .rgDel > .rgDelIcon::before,
/* Class :.rgDeleteCaterer */
.container .RadGrid .rgMasterTable tr .rgDeleteCaterer > .rgDeleteCatererIcon::before {
    font-family: "NewCwIcons";
    content: "\ea26";
    color: var(--cw-color-error);
    text-align: center;
    font-size: 1.5rem;
}

.container .RadGrid .rgMasterTable tr .rgDeleteCaterer > .rgDeleteCatererIcon + .rgButtonText {
    display: none;
}



.container .RadGrid .rgMasterTable .rgRow .RadButton > .rgDelIcon::before,
.container .RadGrid .rgMasterTable .rgAltRow .RadButton > .rgDelIcon::before {
    font-family: "NewCwIcons";
    content: '\ea26';
    font-size: 1.5rem;
    color: var(--cw-color-error);
}


/* ReorganizeLineTraining */
.container .RadGrid tr.rgEditRow td .rgReorganizeLineTraining > .rgReorganizeLineTrainingIcon::before {
    /* Personalize icon  */
    font-family: "NewCwIcons";
    content: "\ea80";
    color: #fff;
    clear: both;
    font-size: 24px;
    text-align: center;
}


/* Class : .rgEditForm inside of tag table element tr td , is a div class called .rgEditForm */

.container .RadGrid td div.rgEditForm {
  width: 100%;
  max-width: 100%;
  /*min-height: 200px;*/
  height: 100%;
  margin-top:4px; /* 12px changed by 1px 09/12/2020 */
  margin-bottom: 4px; /* 12px changed by 6 px 09/12/2020 */
  border: solid 1px #F0EFEF;
  text-align: center;
  display: inline-block;
  border-bottom-left-radius: .25em;
  border-bottom-right-radius: .25em;
  position: relative;
}


  /* Class : .rgEditForm table */
  .container .RadGrid td div.rgEditForm table,
  /* Class : .rgEditForm table */
  .container .RadGrid .rgMasterTable thead tr td div.rgEditForm table {
    width: auto;
    /*min-width: 20%;*/
    height: auto;
    margin: auto;
    padding: .85em;
    padding: 1.25em 1.25em;
    margin-top: 5%;
    margin-bottom: 5%;
    border-radius: .25em;
    -webkit-border-radius: .25em;
    -moz-border-radius: .25em;
    -ms-border-radius: .25em;
    -o-border-radius: .25em;
    font-family: 'Roboto', sans-serif !important;
    margin-top: 3px;
    float: left;
  }

    /*.rgEditForm => body of of the table */
    .container .RadGrid td div.rgEditForm table tbody tr,
    .container .RadGrid .rgMasterTable thead tr td div.rgEditForm table tbody tr {
        padding: .25em;
        text-align: center;
        font-family: 'Roboto Flex Variable', 'Roboto', sans-serif;
    }

        .container .RadGrid td div.rgEditForm table tbody tr td,
        .container .RadGrid .rgMasterTable thead tr td div.rgEditForm table tbody tr td {
                                                           */
            justify-content: center;
            align-items: center;
          
            vertical-align: middle;
            font-family: 'Roboto Flex Variable', 'Roboto', sans-serif;
          
            padding-top: 0px;
            padding-bottom: 0px;
        }


        .container .RadGrid td div.rgEditForm table tbody tr td:first-child,
        .container .RadGrid .rgMasterTable thead tr td div.rgEditForm table tbody tr td:first-child {
          padding-left: .85em;
          padding-right: .85em;
          color: #000;
          border-radius: .25em;
 
          display: flex;

          justify-content: space-between;
          align-items: center;

        }




            .container .RadGrid td div.rgEditForm table tbody tr td label,
            .container .RadGrid .rgMasterTable thead tr td div.rgEditForm table tbody tr td label {
                font-family: 'Roboto Flex Variable', 'Roboto', sans-serif;
                font-size: 12px;
                font-weight: bold;
                color: #000;
            }


        .container .RadGrid td div.rgEditForm table tbody tr td:last-child,
        .container .RadGrid .rgMasterTable thead tr td div.rgEditForm table tbody tr td:last-child {
          padding-left: 1.25em;
          padding-right: 1.25em;
          text-align: left;
          
          justify-content: flex-start;
          align-items: center;
       
        }


        /* WebForm of .rgEditForm in the table */

        /* WebForm: input */
            .container .RadGrid td div.rgEditForm table tbody tr td input[type='text'],
            .container .RadGrid .rgMasterTable thead tr td div.rgEditForm table tbody tr td input[type='text']
            /*.container .RadGrid td div.rgEditForm table tbody tr td input[type='text'].riTextBox,
                                                            .container .RadGrid .rgMasterTable thead tr td div.rgEditForm table tbody tr td input[type='text'].riTextBox*/ {
                height: 24px;
                max-height: 24px;
                border: solid 1px #C3C0C0; /* PC3*/
                border-radius: .25em;
                font-size: 12px !important;
                font-family: 'Roboto Flex Variable', 'Roboto', sans-serif;
                font-weight: 500;
                margin-top: 0px;
            }

        .container .RadGrid td div.rgEditForm table tbody tr td input,
        .container .RadGrid .rgMasterTable thead tr td div.rgEditForm table tbody tr td input,
        /* WebForm: textarea */
        .container .RadGrid td div.rgEditForm table tbody tr td textarea,
        .container .RadGrid .rgMasterTable thead tr td div.rgEditForm table tbody tr td textarea {
          width: 15em;
          float: left;
          display: flex;
          background: #fff;

          color: #000;
          font-family: 'Roboto', sans-serif;
          font-size: 12px !important;
          margin-top: .55em;
          margin-left: -0.50em !important;
        }

        /* WebForm: textarea */
        .container .RadGrid td div.rgEditForm table tbody tr td textarea,
        .container .RadGrid .rgMasterTable thead tr td div.rgEditForm table tbody tr td textarea {
          width: 18.75em !important;
          margin-top: -0.25em !important;
        }



/* ----------------------------------------------------------------------------------------------- /  WebForm of .rgEditForm in the table */



/* -----------------------------------------------------------------------------------------------------------------------------------   / .rgEditForm */

/* head of the table when is active telerik option (GroupByExpression) */
.container .RadGrid .rgMasterTable thead td.rgGroupCol {
  /*border: solid 1px;*/
  background: transparent;
}


/* Buttons for select, delete, update and insert*/

/* Button class: .rgSelect */
.container .RadGrid .rgMasterTable .rgRow .rgSelect,
.container .RadGrid .rgMasterTable .rgAltRow .rgSelect,
/* Button Class : Update*/
.container .RadGrid .rgMasterTable .rgRow .rgUpdate,
.container .RadGrid .rgMasterTable .rgAltRow .rgUpdate,
/* Button Class: Delete */
.container .RadGrid .rgMasterTable .rgRow .rgDel,
.container .RadGrid .rgMasterTable .rgAltRow .rgDel,
/* Class :.rgDeleteCaterer */
.container .RadGrid .rgMasterTable .rgRow .rgDeleteCaterer,
.container .RadGrid .rgMasterTable .rgAltRow .rgDeleteCaterer,
.rgDel,
/* Button Class: Insert */
.container .RadGrid_Metro .rgMasterTable .rgRow .rgInsert,
.container .RadGrid_Metro .rgMasterTable .rgAltRow .rgInsert,
/* Button Class : rgReorganizeLineTraining*/
.container .RadGrid .rgMasterTable .rgRow .rgReorganizeLineTraining,
.container .RadGrid .rgMasterTable .rgAltRow .rgReorganizeLineTraining {
  padding: 10px 5px;

  text-align: center;

}




/* CblBtnView */
.container .RadButton_Metro.CblBtnView {
  color: #fff;
  border-bottom: solid .25em #1068C3;
  width: 25px !important;
  height: 25px !important;
  text-align: center !important;
  padding: 0em !important;
}


/* Button class : .rgView */
.container .RadGrid .rgMasterTable .rgRow .rgView,
.container .RadGrid .rgMasterTable .rgAltRow .rgView {
  margin: auto auto !important;
}

/* Button Class : Update*/
.container .RadGrid .rgMasterTable .rgRow .rgUpdate,
.container .RadGrid .rgMasterTable .rgAltRow .rgUpdate {
  background: #1974d2;
  border-bottom: solid 4px #1068C3;
}



/* Button Class: Insert */
.container .RadGrid .rgMasterTable .rgRow .rgInsert,
.container .RadGrid .rgMasterTable .rgAltRow .rgInsert {
  background: #bbe1fa;
  border-bottom: solid 4px #A9DBFB;
}

/* Button Class : rgReorganizeLineTraining*/
.container .RadGrid .rgMasterTable .rgRow .rgReorganizeLineTraining,
.container .RadGrid .rgMasterTable .rgAltRow .rgReorganizeLineTraining {
  background: #2D6485;
  border-bottom: solid 4px #21506B;
}
/* Icons of buttons */

/* Button Class: Select */
.container .RadGrid .rgMasterTable .rgRow .rgSelect span.rgIcon::before,
.container .RadGrid .rgMasterTable .rgAltRow .rgSelect span.rgIcon::before {
  /* This icon font is taken from the webpage fontawesome.com . Free icon Licence to use it in personally or comercially */
  font-family: "Font Awesome 5 Free";
  /*font-weight: 700;*/
  content: '\f058';
  color: #368ee0;
  clear: both;
  text-align: center;
}

/* Button Class : Update*/
.container .RadGrid .rgMasterTable .rgRow .rgUpdate span.rgIcon::before,
.container .RadGrid .rgMasterTable .rgAltRow .rgUpdate span.rgIcon::before {
  /* This icon font is taken from the webpage fontawesome.com . Free icon Licence to use it in personally or comercially */
  font-family: "Font Awesome 5 Free";
  font-weight: 700;
  content: '\f021';
  color: #fff;
  clear: both;
  text-align: center;
}

/* Button Class: rgIconDel */
.container .RadGrid .rgMasterTable .rgRow .rgDel span.rgIcon::before,
.container .RadGrid .rgMasterTable .rgAltRow .rgDel span.rgIcon::before {
    font-family: "NewCwIcons";
    content: "\ea26";
    color: var(--cw-color-error);
    text-align: center;
    font-size: 1.5rem;
}

/* Button Class: Insert */
.container .RadGrid_Metro .rgMasterTable .rgRow .rgInsert span.rgIcon::before,
.container .RadGrid_Metro .rgMasterTable .rgAltRow .rgInsert span.rgIcon::before {
  /* This icon font is taken from the webpage fontawesome.com . Free icon Licence to use it in personally or comercially */
  font-family: "Font Awesome 5 Free";
  font-weight: 700;
  content: '\f0c7';
  color: #fff;
  clear: both;
  text-align: center;
  font-size: 20px;
}


/* Button Class : View */
.container .RadGrid .rgMasterTable .rgRow .rgView span.rgIcon::before,
.container .RadGrid .rgMasterTable .rgAltRow .rgView span.rgIcon::before,
/* Class : .rgViewDetailsIcon */
.container .RadGrid .rgMasterTable .rgRow .rgViewDetails span.rgIcon::before,
.container .RadGrid .rgMasterTable .rgAltRow .rgViewDetails span.rgIcon::before,
/* CblBtnView */
.container .RadButton.CblBtnView::before,
.container .RadGrid .rgMasterTable .rgRow .rgShow span.rgIcon::before,
.container .RadGrid .rgMasterTable .rgAltRow .rgShow span.rgIcon::before {
    font-family: "NewCwIcons";
    content: "\ea30";
    font-size: 24px;
    color: var(--cw-color-icons);
}

/* Class : .rgViewDetailsIcon */
.container .RadGrid .rgMasterTable .rgRow .rgViewDetails span.rgIcon::before,
.container .RadGrid .rgMasterTable .rgAltRow .rgViewDetails span.rgIcon::before {
}
/* Button Class : rgReorganizeLineTraining*/
.container .RadGrid .rgMasterTable .rgRow .rgReorganizeLineTraining span.rgIcon::before,
.container .RadGrid .rgMasterTable .rgAltRow .rgReorganizeLineTraining span.rgIcon::before {
    /* Personalize icon */
    font-family: "NewCwIcons";
    content: "\ea80";
    color: #fff;
    clear: both;
    font-size: 24px;
    text-align: center;
}




/* Buttons of the class .rgEditform are outsite the table. It has a span with .rgUpdateIcon or .rgCancelIcon*/
.container .RadGrid td div.rgEditForm .rgUpdate,
.container .RadGrid td div.rgEditForm .rgCancel {
    flex-direction: row;
    margin-bottom: 5%;
    border-radius: 4px;
    /*border: solid 1px cyan; */
    position: absolute;
    bottom: 0;
}

.container .RadGrid td div.rgEditForm .rgUpdate {
  /*background: #368ee0;
                                            border-bottom: solid 4px #2E86C1;*/
  margin-right: 12px;
  /*box-shadow: 0px 0px 10px rgba(54,142,224,.5);*/
  text-align: center;
  left: 27px;
  bottom: -4px;
}



.container .RadGrid td div.rgEditForm .rgCancel {

  text-align: center;
  left: 56px;
  bottom: -4px;
}


.container .RadGrid td div.rgEditForm .rgUpdate .rgUpdateIcon {
  color: var(--cw-color-icons);
}

.container .RadGrid td div.rgEditForm .rgCancel .rgCancelIcon {
  color: #c24352;
  margin: auto auto;
}

.container .RadGrid td div.rgEditForm .rgUpdateIcon::before {
    font-family: "NewCwIcons";
    content: "\ea1a";
    font-size: 1.5rem;
}

.container .RadGrid td div.rgEditForm .rgCancelIcon::before {
    font-family: "NewCwIcons";
    content: "\ea34";
    font-size: 1.5rem;

}

/* Class: rgSelectedRow => this class is active when we use telerik option AllowMultiRowSelection and AllowRowSelect */

.container .RadGrid tr.rgSelectedRow {
    background: var(--cw-color-layout-table-row-selected, #0d47a1) !important;
    color: var(--cw-color-layout-on-table-row-selected, #fff) !important;
}

/* Class : .rgSelectedRow ( this is active when we use telerik option AllowRowSelect )*/
.container .RadGrid tr.rgRow.rgSelectedRow,
.container .RadGrid tr.rgAltRow.rgSelectedRow {
  background: var(--cw-color-layout-table-row-selected, #0d47a1)!important;
  color: var(--cw-color-layout-on-table-row-selected, #fff)!important;
}


.container .RadGrid_Metro tr.rgFocusable {
  background: #0d47a1;
  color: #fff;
}

.container .RadGrid_Metro tr td.rgSelectedCell {
  background: #0d47a1;
  color: #fff;
}







/* Hierarchy  telerik option */

/* head of the table*/
.container .RadGrid tr th.rgExpandCol /* head of the tabel */ {
  color: #fff;
  background: #0d47a1;
}

  .container .RadGrid tr th.rgExpandCol button.rgCollapse, /* button head of the table */
  .container .RadGrid tr th.rgExpandCol button.rgExpand /* button of head of the table */ {
    width: 25px;
    height: 25px;

  }






    .container .RadGrid tr th.rgExpandCol button.rgExpand .rgExpandIcon /* icon of button in the head of the table */ {
      color: #368ee0;
      /*border: solid 1px;*/
    }

    .container .RadGrid tr th.rgExpandCol button.rgCollapse .rgCollapseIcon /* icon of button in the head of the table */ {
      color: #0d47a1;
    }



    /* .rgExpandIcon */
    .container .RadGrid tr th.rgExpandCol button.rgExpand .rgExpandIcon::before {
        font-family: "NewCwIcons";
        content: '\ea03';
        color: #fff;
        clear: both;
        text-align: center;
        font-size: 1em;
        margin-top: 1em;
    }
    /* .rgCollapseIcon*/
    .container .RadGrid tr th.rgExpandCol button.rgCollapse .rgCollapseIcon::before {
        font-family: "NewCwIcons";
        /*font-weight: 700;*/
        content: '\ea04';
        color: #fff;
        clear: both;
        text-align: center;
        font-size: 1em;
        margin-top: 1em;
    }




/* body of the table*/



.container .RadGrid tr.rgRow td.rgExpandCol,
.container .RadGrid tr.rgAltRow td.rgExpandCol,
.container .RadGrid tr.rgRow td.rgExpandCol,
.container .RadGrid tr.rgAltRow td.rgExpandCol {
  /* background: rgba(54,142,224,.5); */
  color: #0d47a1;


  width: 25px !important;
  min-width: 25px !important;
  max-width: 25px !important;
  min-height: 26px !important;
  padding: 0px 0px 0px 0px !important;
}

.container .RadGrid tr td.rgCollapseIcon,
.container .RadGrid tr.rgEditRow td.rgCollapseIcon {
  /* background: rgba(54,142,224,.5);*/
  color: #368ee0;
}
/* buttons of the table expand and collapse */

/* tr.rgRow*/
.container .RadGrid tr.rgRow td.rgExpandCol button.rgExpand,
.container .RadGrid tr.rgRow td.rgExpandCol button.rgCollapse,
/* tr.rgAltRow */
.container .RadGrid tr.rgAltRow td.rgExpandCol button.rgExpand,
.container .RadGrid tr.rgAltRow td.rgExpandCol button.rgCollapse,
.container .RadGrid tr.rgEditRow td.rgExpandCol button.rgExpand,
.container .RadGrid tr.rgEditRow td.rgExpandCol button.rgCollapse {
  width: 25px;
  min-width: 25px;
  max-width: 25px;
  height: 25px;
  max-height: 25px;
  min-height: 25px;
  color: #0d47a1;
  display: flex;
  justify-content: center;
  align-items: center;
  background: none;

}




/* tr.rgRow*/
.container .RadGrid tr.rgRow.rgExpandCollapseParent,
/* tr.rgAltRow */
.container .RadGrid tr.rgAltRow.rgExpandCollapseParent,
.container .RadGrid tr.rgEditRow.rgExpandCollapseParent {
  background: #0d47a1;
  color: #fff;
  border-bottom: solid 4px #093F92;
}


  .container .RadGrid tr.rgRow.rgExpandCollapseParent:hover,
  /* tr.rgAltRow */
  .container .RadGrid tr.rgAltRow.rgExpandCollapseParent:hover,
  .container .RadGrid tr.rgEditRow.rgExpandCollapseParent:hover {
    background: #368ee0;
    color: #fff;
    border-bottom: solid 4px #216CE1;
  }


  .container .RadGrid tr.rgRow.rgExpandCollapseParent td button.rgEdit,
  /* tr.rgAltRow */
  .container .RadGrid tr.rgAltRow.rgExpandCollapseParent td button.rgEdit,
  .container .RadGrid tr.rgEditRow.rgExpandCollapseParent td button.rgEdit {
    background: #216CE1 !important;
    border-bottom: solid 4px #175CC7 !important;
  }





  .container .RadGrid tr.rgRow.rgExpandCollapseParent:hover td button.rgEdit,
  /* tr.rgAltRow */
  .container .RadGrid tr.rgAltRow.rgExpandCollapseParent:hover td button.rgEdit,
  .container .RadGrid tr.rgEditRow.rgExpandCollapseParent:hover td button.rgEdit {
    background: #0d47a1 !important;
    border-bottom: solid 4px #093F92 !important;
  }




.container .RadGrid tr.rgEditRow td.rgExpandCol button.rgExpand,
.container .RadGrid tr.rgEditRow td.rgExpandCol button.rgCollapse {
  border-bottom: solid 0px transparent;
}



/* tr.rgRow => rgExpanIcon && .rgCollapseIcon*/
.container .RadGrid tr.rgRow td.rgExpandCol button.rgExpand .rgExpandIcon,
.container .RadGrid tr.rgRow td.rgExpandCol button.rgCollapse .rgCollapseIcon,
/* tr.rgAltRow => rgExpanIcon && .rgCollapseIcon */
.container .RadGrid tr.rgAltRow td.rgExpandCol button.rgExpand .rgExpandIcon,
.container .RadGrid_tr.rgAltRow td.rgExpandCol button.rgCollapse .rgCollapseIcon {
  color: var(--cw-color-icons, #368ee0);

}

  /* tr.rgRow => rgExpandIcon */
    .container .RadGrid tr.rgRow td.rgExpandCol button.rgExpand .rgExpandIcon::before,
    .container .RadGrid tr.rgAltRow td.rgExpandCol button.rgExpand .rgExpandIcon::before,
    .container .RadGrid tr.rgEditRow td.rgExpandCol button.rgExpand .rgExpandIcon::before {
        font-family: "NewCwIcons";
        content: '\ea03';
        clear: both;
        text-align: center;
        font-size: 2rem;
    }

/* tr.rgRow => rgCollpaseIcon */
    .container .RadGrid tr.rgRow td.rgExpandCol button.rgCollapse .rgCollapseIcon::before,
    .container .RadGrid tr.rgAltRow td.rgExpandCol button.rgCollapse .rgCollapseIcon::before,
    .container .RadGrid tr.rgEditRow td.rgExpandCol button.rgCollapse .rgCollapseIcon::before {
        font-family: "NewCwIcons";
        content: '\ea04';
        clear: both;
        text-align: center;
        font-size: 2rem;
    }



.container .RadGrid tr.rgAltRow:hover td.rgExpandCol button.rgCollapse .rgCollapseIcon::before {
  color: #fff;
}



/* Class : rgDetailTable => this class appears when expand items on the table */

.container .RadGrid table.rgDetailTable {
  width: 100%;
  margin-top: 20px;
  margin-bottom: 20px;
  /*border: solid 1px;*/
  padding: 1px 1px;
}


  .container .RadGrid table.rgDetailTable thead tr th.rgHeader:first-child {
    border-top-left-radius: 2px;

  }



/* RadTabsTrip */

div.RadTabStrip {
    background: var(--cw-color-surface-container, #eee);
    padding: 0.25rem;
    border-radius: 0.5rem 0.5rem 0 0;
}

    div.RadTabStrip ul.rtsUL {
        display: flex;
        flex-wrap: wrap;
        background: var(--cw-color-surface-container-lowest, #fff);
        border-radius: 0.375rem;
        padding: 0.25rem;
        gap: 0.25rem 0;
    }

        div.RadTabStrip ul.rtsUL li.rtsLI {
            display: flex;
            padding: 0.125rem 0.5rem 0;
            font-size: 0.75rem;
            font-stretch: semi-condensed;
            border-radius: 0.25rem;
            line-height: 1.5rem;
            color: var(--cw-color-on-surface-variant, #666);
        }

    div.RadTabStrip.small-tabs ul.rtsUL {
        justify-content: space-evenly;
    }
    div.RadTabStrip.small-tabs ul.rtsUL li.rtsLI {
        padding: 0.125rem 0.375rem 0;
    }

            div .RadTabStrip ul.rtsUL li.rtsLI:hover {
                background-color: var(--cw-color-primary-container, #eef);
                color: var(--cw-color-on-primary-container, #223);
            }

            div.RadTabStrip ul.rtsUL li.rtsLI > .rtsLink {
                line-height: 1.5rem;
                border: none;
                padding: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 0.125rem;
                background-color: transparent;
                color: inherit;
            }

            div.RadTabStrip ul.rtsUL li.rtsLI .cwi-icons {
                font-size: 1.5em;
                font-weight: 400;
            }

            div.RadTabStrip ul.rtsUL li.rtsLI:hover > .rtsLink {
                background-color: transparent;
                color: inherit;
            }

            div.RadTabStrip ul.rtsUL li.rtsLI.rtsSelected {
                background-color: transparent;
                color: var(--cw-color-on-surface, #333);
            }

                div.RadTabStrip ul.rtsUL li.rtsLI.rtsSelected:hover {
                    background-color: var(--cw-color-primary-container, #eef);
                    color: var(--cw-color-on-primary-container, #223);
                }

                div.RadTabStrip ul.rtsUL li.rtsLI.rtsSelected > .rtsLink {
                    background-color: transparent;
                    color: inherit;
                    border-bottom: solid 2px var(--cw-color-primary);
                    font-weight: 600;
                }


.cw-tabs-container-legacy:is(.RadGrid) {
    border: solid 0.25rem var(--cw-color-surface-container, #eee);
    border-top: none;
    border-radius: 0 0 0.5rem 0.5rem;
    padding: 0.5rem;
}

/* ----------------------------------------------------------------------------------------------------------------------------------------- / RadTabsTrip */
/* Scrollling */
/* Class: .rtsLevel.rtsButtonsMiddle => here we have tag button prev and next */
.container .RadTabStrip .rtsLevel.rtsButtonsMiddle span.rtsNextArrow,
.container .RadTabStrip .rtsLevel.rtsButtonsMiddle span.rtsPrevArrow {
  width: 2.5em;
  height: 2.5em;
  color: #000 !important;
  margin-top: .55em;
  cursor: pointer;
}



  .container .RadTabStrip .rtsLevel.rtsButtonsMiddle span.rtsNextArrow::before,
  .container .RadMultiPage .RadTabStrip span.rtsNextArrow::before {
    /* This icon font is taken from the webpage fontawesome.com . Free icon Licence to use it in personally or comercially */
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    content: '\f054';
    color: #000;
    clear: both;
    margin-top: .35em;
    text-align: center;
    font-size: 1em;
  }

  .container .RadTabStrip .rtsLevel.rtsButtonsMiddle span.rtsPrevArrow::before,
  .container .RadMultiPage .RadTabStrip span.rtsPrevArrow::before {
    /* This icon font is taken from the webpage fontawesome.com . Free icon Licence to use it in personally or comercially */
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    content: '\f053';
    color: #000;
    clear: both;
    margin-top: .35em;
    text-align: center;
    font-size: 1em;
  }


/* Correcting Arrow IN THE END  [ Important: At the moment, the next update, RadTab is going to be in the middle] */
/* Class: .rtsLevel.rtsButtonsEnd => here we have tag button prev and next */
.container .RadTabStrip .rtsLevel.rtsButtonsEnd span.rtsNextArrow,
.container .RadTabStrip .rtsLevel.rtsrtsButtonsEnd span.rtsPrevArrow {
  width: 2.5em;
  height: 2.5em;
  color: #000 !important;
  margin-top: .55em;
  cursor: pointer;
}

  .container .RadTabStrip .rtsLevel.rtsButtonsEnd span.rtsNextArrow::before {
    /* This icon font is taken from the webpage fontawesome.com . Free icon Licence to use it in personally or comercially */
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    content: '\f054';
    color: #000;
    clear: both;
    margin-top: .35em;
    text-align: center;
    font-size: 1em;
  }

.container .RadTabStrip .rtsLevel.rtsButtonsEnd span.rtsPrevArrow::before {
  /* This icon font is taken from the webpage fontawesome.com . Free icon Licence to use it in personally or comercially */
  font-family: "Font Awesome 5 Free";
  font-weight: 700;
  content: '\f053';
  color: #000;
  clear: both;
  margin-top: .90em;
  text-align: center;
  font-size: 1em;
}




/* Class: .RadMultiPage (Container for tabs) */

.container .RadMultiPage {
    background: var(--cw-color-surface-container, #EEE);
    padding: 0 0.25rem 0.25rem;
    border-radius: 0 0 0.5rem 0.5rem;
}

    .container .RadMultiPage > div.rmpView {
        background: var(--cw-color-surface-container-lowest, #FFF);
        padding: 0.5rem;
        border-radius: 0.375rem;
        box-sizing: border-box;
    }


    .container .RadMultiPage table tbody tr td {
      text-align: center;
      color: #000;
      font-size: 1em;
    }



      .container .RadMultiPage table tbody tr td:last-child {
        text-align: left;
      }

      /* WebForms of DetailsViews [ asp:DetailsView ] */
      .container .RadMultiPage table tbody tr td .RadCombobox,
      .container .RadMultiPage table tbody tr td .RadDropDownList,
      .container .RadMultiPage table tbody tr td input[type="checkbox"],
      .container .RadMultiPage table tbody tr td input[type="text"],
      .container .RadMultiPage table tbody tr td input[type="password"],
      .container .RadMultiPage table tbody tr td textarea {
        margin-left: .20em;
      }



/* Label .CblLabelCheckBox */
.container tr.rgRow td label.CblLabelCheckBox,
.container tr.rgAltRow td label.CblLabelCheckBox,
.container .rgMasterTable thead tr th label.CblLabelCheckBox,
.container label.CblLabelCheckBox {
  width: 40px;
  height: 20px;
  background: #fff;
  box-shadow: inset 0px 0px 5px rgba(0,0,0,0.5);

  cursor: pointer;
  position: relative;
  justify-content: center;
  align-items: center;
  border-radius: 50px;

  text-align: center !important;
  /*margin-left: 8em;*/
}

.container tr.rgRow td label.CblLabelCheckBox,
.container tr.rgAltRow td label.CblLabelCheckBox,
.container .rgMasterTable thead tr th label.CblLabelCheckBox {
  margin: auto auto !important;
}

.container label.CblLabelCheckBox {
}

/* CheckBox */
.container tr.rgRow td input[type="checkbox"].CblCheckbox,
.container tr.rgAltRow td input[type="checkbox"].CblCheckbox,
.container .rgMasterTable thead tr th.rgCheck input[type="checkbox"].CblCheckbox,
.container input[type="checkbox"].CblCheckbox {
  width: 0em;
  height: 20px;
  opacity: 0;
  z-index: 2000;
  display: block;
  border-radius: 50px;

  margin-left: -4em;
}



.container tr.rgRow td label.CblLabelCheckBox div.CblSlideCheckbox,
.container tr.rgAltRow td label.CblLabelCheckBox div.CblSlideCheckbox,
.container .rgMasterTable thead tr th.rgCheck label.CblLabelCheckBox div.CblSlideCheckbox,
.container label.CblLabelCheckBox div.CblSlideCheckbox {
  width: 20px;
  height: 20px;
  background: #807D7D;
  border-radius: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  transform: scale(1.3);
  box-shadow: inset 0px 0px 2px rgba(0,0,0,0.5);
}


.container tr.rgRow td input:checked[type="checkbox"].CblCheckbox + div.CblSlideCheckbox,
.container tr.rgAltRow td input:checked[type="checkbox"].CblCheckbox + div.CblSlideCheckbox,
.container .rgMasterTable thead tr th.rgCheck input:checked[type="checkbox"].CblCheckbox + div.CblSlideCheckbox,
.container input:checked[type="checkbox"].CblCheckbox + div.CblSlideCheckbox {
  left: 20px;
  background: #368ee0;
}



/* [ CblLabelCheckBoxDragDrup ] */

.container div.dragDrop .RadGrid .rgMasterTable {
  margin-top: -2.5em;
}


    .container div.dragDrop .RadGrid .rgMasterTable thead label.CblLabelCheckBoxDragDrop input[type="checkbox"].cblCheckBoxDragDrop,
    .container div.dragDrop .RadGrid .rgMasterTable tbody label.CblLabelCheckBoxDragDrop input[type="checkbox"].cblCheckBoxDragDrop {
      margin-top: -0.46em;
    }






/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------- / checkbox */
/* code moify for checkbox IE */

/* FileManager */

div .div-grid h5 {
  color: #000;
  text-align: left;
  font-size: 1em;
}



/* Class : .CBLFileManager-Content ( this class contains the buttons to delete and add type of file ) */

html .CBLFileManager-Content {
  width: 100%;
  height: 40px;
  margin-bottom: 1em;
}


/* Class : .dragDrop */

.container .RadGrid .rgEditForm table .dragDrop table.rgMasterTable.rgClipCells tbody tr.rgNoRecords td {
  width: 100% !important;
}

html span.ruFileWrap.ruStyled {
  width: 25px !important;
  height: 25px !important;
  margin-left: .85em;
  border-radius: 4px;

  display: flex;

  justify-content: center;
  align-items: center;
  cursor: pointer;
  padding: 0px 0px !important;
}


html .CBLFileManager-Content .RadUpload .ruButton.ruBrowse {
  width: 30px;
  height: 27px;
}

    html .CBLFileManager-Content .RadUpload .ruButton.ruBrowse::before {
        
        font-family: "NewCwIcons";
        content: "\ea4c";
        color: var(--cw-color-icons);
        text-align: center;
        font-size: 20px;
        text-align: center;
        float: left;
        margin-left: -0.5em !important;
        margin-bottom: -0.35em !important;
      
    }



html .CBLFileManager-Content .cblDelFileManager {
  width: 25px !important;
  height: 25px;
  padding: 0px 0px !important;

  text-align: center;
  display: flex;

  border-radius: .25em;

  justify-content: center;
  align-items: center;
}



  html .CBLFileManager-Content .cblDelFileManager .cblDelFileManagerIcon {
    display: flex;

    justify-content: center;
    align-items: center;
  }



    html .CBLFileManager-Content .cblDelFileManager::before {
        font-family: "NewCwIcons";
        content: "\ea26";
        color: var(--cw-color-error);
        text-align: center;
        font-size: 1.5rem;
    }

  html .CBLFileManager-Content .cblDelFileManager:hover::before {
    border: solid 0em transparent !important;
  }




/* ----------------------------------------------- / For FileManager Control V04 */


/* RadWindow */

/* Class : .RadWindow */
body form .RadWindow {
  background: #ffffff;

  border-radius: 1em;

  min-width: 400px !important;
}

/* Head of RadWindow */
html form .RadWindow .rwTitleBar {
  background: #fff;
  height: 2em;
  padding: 0em;
  color: #000;
  border-bottom: solid .1875em #216CE1;
  display: flex;
  align-items: center;
  border-top-left-radius: 1em;

  border-top-right-radius: 1em;
  border-bottom: solid 0.0625em #F0EFEF;
}

html .RadWindow .rwTitleWrapper {
  padding: 0em;
  height: auto;
  /*border: solid 1px cyan;*/
}

html form .RadWindow .rwTitleBar .rwTitle {
    width: 100%;
    max-height: 2em;
    margin-left: 1.125em; /* 18px FG */
    padding: 0em;
    top: calc(50% - 19px/2 - 1.5px);
    font-family: 'Roboto Flex Variable', 'Roboto', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 1em; /* 16px */
    line-height: 19px;
    letter-spacing: -0.45px;
    color: #000000;
    display: flex;
    align-items: center;
}

html form .RadWindow .rwTitleBar .rwCommands {
  height: 2em;
  display: flex;
  justify-content: center;
  align-items: center;
  right: 18px;
  top: 1px;
  margin: auto;
}


form .RadWindow .rwTitlebar .rwTitleWrapper .rwTitle {
  margin: 0px 0px !important;
  line-height: 1.25em;
  margin-top: 4px !important;
}

html form .RadWindow .rwStatusBar {
  height: auto;

  padding0em;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-top: solid 0.0625em #F0EFEF;
  border-bottom-left-radius: 1em;

  border-bottom-right-radius: 1em;

}

@media only screen and (max-width: 700px) {
  html form .RadWindow h3 {
    display: none !important;
  }
}

form .RadWindow .rwContent {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;

}

/* class : cbl-radwindow */
html form .RadWindow.cbl-radwindow .rwTitleBar{  
  min-height: fit-content;
}

html form .RadWindow.cbl-radwindow .rwTitleWrapper{
  width: 100%;
  min-height: auto;
}

html form .RadWindow.cbl-radwindow .rwTitleWrapper .rwTitle{ 
  width: 92%;
  min-height: 2em;
  overflow: hidden;
  white-space: pre-line;
  line-height: 1em;
  font-size: .85em;
}

html form .RadWindow.cbl-radwindow .rwTitleBar .rwTitleWrapper .rwCommands{
  height: 100%;
  top: -0.0625em;
}

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- / RadWindow */

/*  ReportViewer */
div .MSRS-RVC {
    max-height: 72vh;
    overflow: auto;
    border: solid 8px var(--cw-color-surface-container, #efefef) !important;
    border-radius: 0.25rem;
    min-width: 1100px;
    width: 100%;
    max-width: 1600px;
}
div .MSRS-RVC img[blank] {
    visibility: hidden;
}
/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ /  ReportViewer */

/* RadNotification */
html .RadNotification {
  /*border: solid 1px cyan !important;*/
  border-radius: .25em;

}

  html .RadNotification .rnTitleBar {
    background: #368ee0;
    border-bottom: solid .1875em #216CE1;
    color: #fff;
    border-top-left-radius: .25em;

    border-top-right-radius: .25em;

    text-align: left !important;
    color: #fff;
  }

  html .RadNotification .RadXmlHttpPanel {
  }


    html .RadNotification .RadXmlHttpPanel .rnContentWrapper .RadButton_Metro.rbButton,
    html .RadNotification .RadXmlHttpPanel .rnContentWrapper .CblGoLink {
      width: 25px !important;
      height: 25px !important;
      border: solid 0em transparent;
      border-radius: .25em;

    }


    html .RadNotification .RadXmlHttpPanel .rnContentWrapper .CblGoLink {
      background: #368ee0;
      border-bottom: solid 4px #2E86C1;
      color: #fff;
      text-decoration: none !important;
      font-size: 1em;
      display: flex;
      justify-content: center;
      align-items: center;
    }


      html .RadNotification .RadXmlHttpPanel .rnContentWrapper .CblGoLink::before {
        /* This icon font is taken from the webpage fontawesome.com . Free icon Licence to use it in personally or comercially */
        font-family: "Font Awesome 5 Free";
        font-weight: 700;
        content: '\f35d';
        color: #fff;
        clear: both;
        text-align: center;
        font-size: 1em;
      }






/* ------------------------------------------------------------------------------------------------------------------------- / RadNotification */

/* RadNumeric Text Box */
.container .riContSpinButtons {
  height: 2.5em;
}

  .container .riContSpinButtons .riTextBox {
    border-radius: .25em;

    border: solid 1px #368ee0;
    height: 100%;
  }

    .container .riContSpinButtons .riTextBox.riHover {
      border: solid 1px #368ee0;
    }



    .container .riContSpinButtons span.riSelect {
        background: var(--cw-color-primary);
        color: var(--cw-color-on-primary);
        border-top-right-radius: .25em;
        border-bottom-right-radius: .25em;
    }

    .container .riContSpinButtons span.riSelect a.riUp,
    .container .riContSpinButtons span.riSelect a.riDown {
      background: var(--cw-color-primary);
      color: var(--cw-color-on-primary);
    }

        .container .riContSpinButtons span.riSelect a.riUp::before {
            font-family: "NewCwIcons";
            content: "\ea1e";
            clear: both;
            font-size: 12px;
        }

        .container .riContSpinButtons span.riSelect a.riDown::before {
            font-family: "NewCwIcons";
            content: "\ea04";
            clear: both;
            font-size: 12px;
        }
/* ------------------------------------------------------------------------------------------------------------------------------------ / RadNumeric Text Box */

/* CblSelectDropDownList */


/* ------------------------------------------------------------------------------------------------------------------------------------------------ / CblSelectDropDownList */

/* CblGridView */
div .CblFormSettings .RadGrid.CblDetailsViewAddLink {
  width: 100% !important;
  margin-top: 1em;
  border: solid 1px green;
}


.RadGrid.CblDetailsViewAddLink .headerView {
  width: auto;
  background: #368ee0;
  border-bottom: solid 4px #2E86C1;
  padding-left: .55em;
  padding-right: .55em;
  color: #fff;
  border-top-left-radius: .25em;

  border-top-right-radius: .25em;

  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1em;
  margin-left: 6%;
  margin-right: 1em;
}

.cbl-inputFormViewCatering {
  justify-content: center;
  align-items: center;
  height: 20px;
  height: calc(20px + 2em);
  border-bottom: solid 1px rgba(208,211,212,.2); /* Hexadecimal color => #D0D3D4 // unable by the moment */
  border-bottom-width: 4px;
}


  .cbl-inputFormViewCatering span {
    color: #FF5733;
  }


  .cbl-inputFormViewCatering input[type='text'] {
    margin-top: .85em;
    width: 400px !important;
  }

.CblFormSettings .RadGrid tbody tr td .CblBtnFormSettings {
  margin-top: 3em !important;
  margin-bottom: 1em;
  width: 25px;
  height: 25px;
  padding: .55em .75em !important;
  text-align: center;
  justify-content: center;
  padding: 10px 5px;
  text-decoration: none;
  border-radius: .25em;

}




.CblFormSettings .RadGrid tbody tr td input[type='submit'] {
  background: transparent;
  border: solid 0em transparent;
  border-color: none;
  color: #fff;
  outline: none;
}


.CblFormSettings .RadGrid tbody tr td .CblBtnFormSettings:first-child {
  margin-left: 35%;
  margin-right: 2em;
  background: #0d47a1;
  border-bottom: solid 4px #093F92;
}

  .CblFormSettings .RadGrid tbody tr td .CblBtnFormSettings:first-child::before {
    /* This icon font is taken from the webpage fontawesome.com . Free icon Licence to use it in personally or comercially */
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    content: "\f067";
    clear: both;
    color: #fff;
    margin-top: 2px;
  }



.CblFormSettings .RadGrid tbody tr td .CblBtnFormSettings:last-child {
  background: #E50D0D;
  border: solid 0em transparent;
  border-bottom: solid 4px #CA1B1B;
  color: #fff;
}

  .CblFormSettings .RadGrid tbody tr td .CblBtnFormSettings:last-child::before {
    /* This icon font is taken from the webpage fontawesome.com . Free icon Licence to use it in personally or comercially */
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    content: '\f05e';
    color: #fff;
    clear: both;
    text-align: center;
  }





.RadGrid.CblDetailsViewAddLink tbody tr:last-child td:last-child {
  height: 42px;
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------- / CblGridView */



order:  1px blue;*/
}
/* Defining Classes to show columns depending of width of browser */
@media only screen and ( max-width: 1084px ) {



    .container .RadGrid .rgMasterTable thead th.CblCity,
    .container .RadGrid .rgMasterTable tbody tr.rgRow td.CblCity,
    .container .RadGrid .rgMasterTable tbody tr.rgAltRow td.CblCity {
      display: none;
    }


    .container .RadGrid .rgMasterTable thead th.CblLastBorderRadius,
    .container .RadGrid .rgMasterTable tbody tr.rgRow td.CblLastBorderRadius,
    .container .RadGrid .rgMasterTable tbody tr.rgAltRow td.CblLastBorderRadius {
      border-top-right-radius: 10px;
 
    }
}
/* Components */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++
    Start: Buttons With Grit [ Cbl-Buttons ]
+++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* cbl_btn */
.cbl_btn {
    height: 25px;
    padding-left: 6px;
    padding-right: 6px;
    line-height: 1.72em;
    font-family: 'Roboto Flex Variable', 'Roboto', sans-serif;
    border-radius: .25em;
    font-size: 1em;
    margin: 0;
    outline: none !important;
    clear: both;
    cursor: pointer;
    border: solid 0em transparent;
}


.RadButton.rbButton.cbl_btn,
.RadButton.rbButton.cbl_btn:active,
.RadButton.rbButton.cbl_btn:focus {
  border-bottom: solid 0em transparent;
  box-shadow: none;

}

  .RadButton.rbButton.cbl_btn:hover {
    background: transparent;
  }





/* cbl_btn_Default button */
div .RadButton.rbButton.cbl_btn_Default,
div .cbl_btn_Default {
  border: solid 1px #0F54BC;
  background: #fff;
  color: #000000;
}

div .RadButton.rbButton.cbl_btn_DefaultOut_l,
div .cbl_btn_DefaultOut_l {
  border: solid 1px #0F54BC;
  color: #000000;
  background: transparent;
}

  div .RadButton.rbButton.cbl_btn_DefaultOut_l:hover,
  div .cbl_btn_DefaultOut_l:hover {
    border-color: #135dd0;
  }

div .RadButton.rbButton.cbl_btn_Default:hover,
div .cbl_btn_Default:hover {
  background-color: #135dd0;
  color: #fff;
  border-color: none;
}


div .RadButton.rbButton.cbl_btn_Default:active,
div .cbl_btn_Default:active,
.container .cbl_btn_Default:focus {
  background-color: #0B51BE;
  box-shadow: 0em 0em .25em rgba(54, 142, 224,.7);

  color: #fff;
}


/* .cbl_btnPrimary [bc1 ] */
div .RadButton.rbButton.cbl_btnPrimary,
div .cbl_btnPrimary {
  background-color: #226bc1;
  color: #fff;
}

div .RadButton.rbButton.cbl_btnPrimaryOut_l,
div .cbl_btnPrimaryOut_l {
  border: solid 1px #226bc1;
  color: #226bc1;
  background: transparent;
}

  div .RadButton.rbButton.cbl_btnPrimaryOut_l:hover,
  div .cbl_btnPrimaryOut_l:hover {
    border-color: #20518a;
    color: #20518a;
    background: transparent;
  }

div .RadButton.rbButton.cbl_btnPrimary:hover,
div .cbl_btnPrimary:hover {
  background-color: #20518a;
}


/* .cbl_btnSecondary*/
div .RadButton.rbButton.cbl_btnSecondary,
div .cbl_btnSecondary {
  background-color: #8e8e8e !important;
  color: #fff !important;
}

div .cbl_btnSecondaryNobg::before {
  /*color: #8e8e8e !important;*/
}


/* .cbl_btnSecondary*/
div .RadButton.rbButton.cbl_btnSecondaryOut_l,
div .cbl_btnSecondaryOut_l {
  border: solid 1px #8e8e8e;
  color: #8e8e8e;
  background: transparent;
}

  div .RadButton.rbButton.cbl_btnSecondaryOut_l:hover,
  div .cbl_btnSecondaryOut_l:hover {
    border-color: #7E7E7E;
    color: #7E7E7E;
  }



div .RadButton.rbButton.cbl_btnSecondary:hover
div .cbl_btnSecondary:hover {
  background-color: #7E7E7E;
  color: #fff;
}


/* .cbl_btnConfirmation */
div .RadButton.rbButton.cbl_btnConfirmation,
div .cbl_btnConfirmation {
  background: #B0D7A1;
  color: #fff;
}

  div .RadButton.rbButton.cbl_btnConfirmation:hover,
  div .cbl_btnConfirmation:hover {
    background-color: #8aac7c;
    color: #fff;
  }

div .RadButton.rbButton.cbl_btnConfirmationOut_l,
div .cbl_btnConfirmationOut_l {
  border: solid 1px #B0D7A1;
  color: #B0D7A1;
  background: transparent;
}

  div .RadButton.rbButton.cbl_btnConfirmationOut_l:hover,
  div .cbl_btnConfirmationOut_l:hover {
    border-color: #8aac7c;
    color: #8aac7c;
    background: transparent;
  }


/* .cbl_btnDanger */
div .RadButton.rbButton.cbl_btnDanger,
div .cbl_btnDanger {
  background: #DD1111;
  color: #ffffff;
}

div .cbl_btnDangerNobg::before {
  color: #DD1111;
}

div .RadButton.rbButton.cbl_btnDanger:hover,
div .cbl_btnDanger:hover {
  background-color: #c01111;
  color: #fff;
}

div .RadButton.rbButton.cbl_btnDangerOut_l,
div .cbl_btnDangerOut_l {
  border: solid 1px #DD1111;
  color: #DD1111;
  background: transparent;
}

  div .RadButton.rbButton.cbl_btnDangerOut_l:hover,
  div .cbl_btnDangerOut_l:hover {
    border-color: #c01111;
    color: #c01111 !important;
    background: transparent;
  }

/* .cbl_btnInfo */
div .RadButton.rbButton.cbl_btnInfo,
div .cbl_btnInfo {
  background: #FFC47A;
  color: #000000;
}

  div .RadButton.rbButton.cbl_btnInfo:hover,
  div .cbl_btnInfo:hover {
    background-color: #d39d5c;
    color: #fff;
  }


div .RadButton.rbButton.cbl_btnInfoOut_l,
div .cbl_btnInfoOut_l {
  border: solid 1px #FFC47A;
  color: #000000;
  background: transparent;
}

  div .RadButton.rbButton.cbl_btnInfoOut_l:hover,
  div .cbl_btnInfoOut_l:hover {
    border-color: #d39d5c !important;
    color: #000000 !important;
    background: transparent !important;
  }



/* .cbl_btnInfo */
div .RadButton.rbButton.cbl_btnWarning,
div .cbl_btnWarning {
  background: #FFD75C !important;
  color: #000000 !important;
}

  div .RadButton.rbButton.cbl_btnWarning:hover,
  div .cbl_btnWarning:hover {
    background-color: #c2a44b !important;
    color: #fff !important;
  }

div .RadButton.rbButton.cbl_btnWarningOut_l,
div .cbl_btnWarningOut_l {
  border: solid 1px #FFD75C !important;
  color: #000000 !important;
  background: transparent !important;
}


  div .RadButton.rbButton.cbl_btnWarningOut_l:hover,
  div .cbl_btnWarningOut_l:hover {
    border-color: #c2a44b !important;
    color: #000000 !important;
    background: transparent !important;
  }




/* .cbl_btnDesabled */
div .RadButton.rbButton.cbl_btnDesabled,
div .cbl_btnDesabled {
  background: #F0EFEF !important;
  color: #000000 !important;
  cursor: default;
  opacity: .5;
}

div .cblbtnDesabledNobg::before,
div .RadButton.rbButton.cblbtnDesabledNobg::before {
  color: #F0EFEF !important;
}

div .RadButton.rbButton.cbl_btnDesabledOut_l:hover,
div .cbl_btnDesabledOut_l {
  border: solid 1px #F0EFEF !important;
  color: #F0EFEF !important;
  background: transparent !important;
  opacity: .5;
}

/* .cbl_btnDarkbg */
div .RadButton.rbButton.cbl_btnDarkbg,
div .cbl_btnDarkbg {
  background: #0d47a1 !important;
  color: #ffffff !important;
}

div .RadButton.rbButton.cbl_btnDarkbgOut_l,
div .cbl_btnDarkbgOut_l {
  border: solid 1px #0d47a1 !important;
  color: #0d47a1 !important;
  background: transparent;
}

  div .RadButton.rbButton.cbl_btnDarkbgOut_l:hover,
  div .cbl_btnDarkbgOut_l:hover {
    border-color: #093F92 !important;
    color: #093F92 !important;
    background: transparent;
  }


div .RadButton.rbButton.cbl_btnDarkbg:hover,
div .cbl_btnDarkbg:hover {
  background-color: #093F92 !important;
  color: #fff !important;
}


/*
     Buttons tag Html  [Actions buttons ]
*/


/*
     RadButtons [Actions buttons ]
*/


/*
     RadButton [Actions buttons ]
*/

/* Buttons */
button.cbl_btn_actn,
button.cbl_btn_actnBg,
button.cbl_btn_actnOut_l,
/* delete */
button.cbl_btn_actnDel,
button.cbl_btn_actnDelBg,
button.cbl_btn_actnDelOut_l {
    width: 25px !important;
    height: 25px !important;
    padding: 0px 0px !important;
    line-height: 1.72em;
    font-family: 'Roboto Flex Variable', 'Roboto', sans-serif;
    border-radius: .25em;
    font-size: 16px !important;
    margin: 0;
    outline: none !important;
    cursor: pointer;
    border: solid 0em transparent;
    border-bottom: solid 0em transparent !important;
    display: flex;

    justify-content: center;
    align-items: center;
    font-size: 16px !important;
}

div .cbl_btn_actn.cbl_btnPrimaryNobg,
div .cbl_btn_actn.cbl_btnPrimaryNobg:hover {
  border: solid 0em transparent !important;
}


div .RadButton.cbl_btn_actn,
div .RadButton.cbl_btn_actnBg,
div .RadButton.cbl_btn_actnOut_l,
/* delete */
div .RadButton.cbl_btn_actnDel,
div .RadButton.cbl_btn_actnDelBg,
div .RadButton.cbl_btn_actnDelOut_l {
    width: 25px !important;
    height: 25px !important;
    padding: 0px 0px !important;
    line-height: 1.72em;
    font-family: 'Roboto Flex Variable', 'Roboto', sans-serif;
    border-radius: .25em;
    font-size: 1em;

    outline: none !important;
    cursor: pointer;
    border: solid 0em transparent;
    border-bottom: solid 0em transparent !important;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* Save */
button.cblbtnSave::before {
    font-family: "NewCwIcons";
    content: "\ea1a";
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
}

button.cblbtnEdit::before {
    font-family: "NewCwIcons";
    content: "\ea32";
    margin: 0px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px !important;
}

/* Search */
button.cblbtnSearch::before {
    font-family: "NewCwIcons";
    content: "\ea0a";
    margin: 0px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px !important;
}



/* view */
button.cblbtnView::before {
    font-family: "NewCwIcons";
    content: "\ea30";
    margin: 0px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px !important;
}

/* Check */
/*button.cblbtnCheck::before {
    font-family: "NewCwIcons";
    content: "\ea6d";
    clear: both;
    margin: 0px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px !important;
}*/

/* Delete */
button.cblbtnDelete::before {
    font-family: "NewCwIcons";
    content: "\ea26";
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem !important;
    color: var(--cw-color-error);
}

/* Cancel */
button.cblbtnCancel::before {
    font-family: "NewCwIcons";
    content: "\ea34";
    font-size: 24px !important;
    color: var(--cw-color-error);
}


/* Add */
button.cblbtnAdd::before {
    font-family: "NewCwIcons";
    content: "\ea29";
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px !important;
    border: solid 0em transparent !important;
}


/* Refresh */
button.cblbtnRefresh::before {
    content: "\ea12";
    font-family: "NewCwIcons";
    margin: 0px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px !important;
    border: solid 0em transparent !important;
}

button.cblbtnReset::before {
    content: "\ea4b";
    font-family: "NewCwIcons";
    margin: 0px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px !important;
    border: solid 0em transparent !important;
}



/* Clock */
button.cblbtnClock::before {
    font-family: "NewCwIcons";
    content: "\ea35";
    font-size: 25px !important;
    border: solid 0em transparent !important;
    margin: 0px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}



/* Print */

button.cblbtnPrint::before {
    font-family: "NewCwIcons";
    content: "\ea31";
    font-size: 25px !important;
    border: solid 0em transparent !important;
    margin: 0px 0px;
    display: flex;
    justify-content: center;
    align-items: center;

}





/* Back*/
button.cblbtnBack::before {
    font-family: "NewCwIcons";
    content: "\ea07";
    clear: both;
    font-size: 25px !important;
    font-weight: bold;
    border: solid 0em transparent !important;
    margin: 0px 0px;
    display: flex;
    display: -ms-flexbox;
    justify-content: center;
    align-items: center;
    font-size: 25px !important;
    font-weight: lighter;
}




/* Next */
button.cblbtnNext::before {
    font-family: "NewCwIcons";
    content: "\ea03";
    clear: both;
    font-size: 25px !important;
    font-weight: bold;
    border: solid 0em transparent !important;
    margin: 0px 0px;
    display: flex;
    display: -ms-flexbox;
    justify-content: center;
    align-items: center;
    font-size: 25px !important;
    font-weight: lighter;
}

/* trip*/
button.cblbtnTrip::before {
    font-family: "NewCwIcons";
    content: "\ea41";
    border: solid 0em transparent !important;
    margin: 0px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px !important;

}



/* Search flight */
button.cblbtnSearchFlight::before {
    font-family: "NewCwIcons";
    content: "\ea43";
    border: solid 0em transparent !important;
    margin: 0px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px !important;
}


/* Calculate */
button.cblbtnCalculate::before {
    font-family: "NewCwIcons";
    content: "\ea38";
    font-size: 25px !important;
    font-weight: bold;
    border: solid 0em transparent !important;
    margin: 0px 0px;
    display: flex;
    display: -ms-flexbox;
    justify-content: center;
    align-items: center;
    font-size: 25px !important;
    font-weight: lighter;
}



/* Info */
/*button.cblbtnInfo::before {
    font-family: "NewCwIcons";
    content: "\ea6e";
    font-size: 25px !important;
    border: solid 0em transparent !important;
    margin: 0px 0px;
    display: flex;
    justify-content: center;
    align-items: center;

}*/
/*

button.cblbtnInfo {
  transform: rotate(180deg);

}*/

/* Download */
button.CblBtnDownload::before {
    font-family: "NewCwIcons";
    content: "\ea0c";
    border: solid 0em transparent !important;
    margin: 0px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px !important;
}



/* Generate */
button.cblbtnGenerate::before {
    font-family: "NewCwIcons";
    content: "\ea44";
    border: solid 0em transparent !important;
    margin: 0px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px !important;

}


/* FindAirport */
button.cblbtnFindAirport::before {
    font-family: "NewCwIcons";
    content: "\ea42";
    border: solid 0em transparent !important;
    margin: 0px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px !important;

}



/* EnvelopeSent */
button.cblbtnEnvelopeSent::before {
    font-family: "NewCwIcons";
    content: "\ea67";
    border: solid 0em transparent !important;
    margin: 0px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px !important;

}




/* Passport */
button.cblbtnPassport::before {
    font-family: "NewCwIcons";
    content: "\ea46";
    border: solid 0em transparent !important;
    margin: 0px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px !important;
}


/* Add new trip*/
button.cblbtnNewTrip::before {
    font-family: "NewCwIcons";
    content: "\ea17";

    border: solid 0em transparent !important;
    margin: 0px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px !important;

}


/* TripFlightWorld */
button.cblbtnTripFlightWorld::before {
    font-family: "NewCwIcons";
    content: "\ea24";
    border: solid 0em transparent !important;
    margin: 0px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px !important;
}


/* ViewCalculate */
button.cblbtnViewCalculate::before {
    font-family: "NewCwIcons";
    content: "\ea38";
    border: solid 0em transparent !important;
    margin: 0px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px !important;
}


/* NotRequested */
button.cblbtnNotRequested::before {
    font-family: "NewCwIcons";
    content: "\ea2a";
    font-size: 24px !important;
    border: solid 0em transparent !important;
    margin: 0px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}

div .RadButton.cbl_btn_actn::before,
div .RadButton.cbl_btn_actnBg::before,
div .RadButton.cbl_btn_actnOut_l::before
div .RadButton.cbl_btn_actn::before {
  display: block !important;
  margin-right: 0px !important;
  margin-left: 0px !important;
}

div .RadButton.cbl_btn_actn {
  background: transparent !important;
  color: var(--cw-color-icons);
}

div .RadButton.cbl_btn_actnBg {
  background: #368ee0 !important;
  color: #fff;
}

div .RadButton.cbl_btn_actnOut_l {
  background: transparent !important;
  border: solid 1px #368ee0 !important;
  color: #368ee0 !important;
}


div .RadButton.cbl_btn_actnDel {
  background: transparent !important;
  color: #DD1111 !important;
}

div .RadButton.cbl_btn_actnDelBg {
  background: #DD1111 !important;
  color: #fff;
}

div .RadButton.cbl_btn_actnDelOut_l {
  background: transparent !important;
  border: solid 1px #DD1111 !important;
  color: #DD1111 !important;
}

/* Custom row status for example [ DlgCheckList ] */

/* Requested */
.container .RadGrid .rgMasterTable tbody .rgRow.cblRequestedRow .cbl_btn_actn::before,
.container .RadGrid .rgMasterTable tbody .rgRow.cblRequestedRow button.rgActionButton span.rgEditIcon::before,
.container .RadGrid .rgMasterTable tbody .rgRow.cblRequestedRow button.rgActionButton span.rgDelIcon::before,
.container .RadGrid .rgMasterTable tbody .rgRow.cblRequestedRow td span,
.container .RadGrid .rgMasterTable tbody .rgRow.cblRequestedRow td {
  color: #000 !important;
}

/* Confirmed */
.container .RadGrid .rgMasterTable tbody .rgRow.rgRow.cblConfirmedRow .cbl_btn_actn::before,
.container .RadGrid .rgMasterTable tbody .rgRow.cblConfirmedRow button.rgActionButton span.rgEditIcon::before,
.container .RadGrid .rgMasterTable tbody .rgRow.cblConfirmedRow button.rgActionButton span.rgDelIcon::before,
.container .RadGrid .rgMasterTable tbody .rgRow.cblConfirmedRow td span,
.container .RadGrid .rgMasterTable tbody .rgRow.cblConfirmedRow td {
  color: #fff !important;
}


/* Cancelled */
.container .RadGrid .rgMasterTable tbody .rgRow.rgRow.cblCancelledRow .cbl_btn_actn::before,
.container .RadGrid .rgMasterTable tbody .rgRow.cblCancelledRow button.rgActionButton span.rgEditIcon::before,
.container .RadGrid .rgMasterTable tbody .rgRow.cblCancelledRow button.rgActionButton span.rgDelIcon::before,
.container .RadGrid .rgMasterTable tbody .rgRow.cblCancelledRow td span,
.container .RadGrid .rgMasterTable tbody .rgRow.cblCancelledRow td {
  color: #fff !important;
}


/* Gray Row */
.container .RadGrid .rgMasterTable tbody .rgRow.cblNotDue .cbl_btn_actn::before,
.container .RadGrid .rgMasterTable tbody .rgRow.cblNotDue button.rgActionButton span.rgEditIcon::before,
.container .RadGrid .rgMasterTable tbody .rgRow.cblNotDue button.rgActionButton span.rgDelIcon::before,
.container .RadGrid .rgMasterTable tbody .rgRow.cblNotDue td span,
.container .RadGrid .rgMasterTable tbody .rgRow.cblNotDue td {
  color: #000 !important;
}



/* jsut for delete button */

/* Save */
div .RadButton.cblbtnSave::before {
    font-family: "NewCwIcons";
    content: "\ea1a";
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Add */
div .RadButton.cblbtnAdd::before {
    font-family: "NewCwIcons";
    content: "\ea29";
    margin-right: 0px;
    margin-left: 1px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Edit */
div .RadButton.cblbtnEdit::before {
    font-family: "NewCwIcons";
    content: "\ea32";
    margin-right: 0px;
    margin-left: 1px;
    display: flex;
    display: -ms-flexbox;
    justify-content: center;
    align-items: center;
}

/* Search */
div .RadButton.cblbtnSearch::before {
    font-family: "NewCwIcons";
    content: "\ea0a";
    margin-right: 0px;
    margin-left: 1px;
    display: flex;
    display: -ms-flexbox;
    justify-content: center;
    align-items: center;
}

/* Delete */
div .RadButton.cblbtnDelete::before {
    font-family: "NewCwIcons";
    content: "\ea26";
    margin-right: 0px;
    margin-left: 1px;
    display: flex;
    justify-content: center;
    align-items: center;
}



/* View */
div .RadButton.cblbtnViewFile::before {
    font-family: "NewCwIcons";
    content: "\ea3b";
    /* font-size: 1.55em; */
    margin-right: 0px;
    margin-left: 1px;
    display: flex;
    display: -ms-flexbox;
    justify-content: center;
    align-items: center;
}


/* Refresh */
div .RadButton.cblbtnRefresh::before {
    content: "\ea12";
    font-family: "NewCwIcons";
    margin-right: 0px;
    margin-left: 1px;
    display: flex;
    justify-content: center;
    align-items: center;
}

div .RadButton.cblbtnUpdate::before {
    content: "\ea4b";
    font-family: "NewCwIcons";
    margin-right: 0px;
    margin-left: 1px;
    display: flex;
    justify-content: center;
    align-items: center;
}


div .RadButton.cblbtnUpdate::before {
    content: "\ea4b";
    font-family: "NewCwIcons";
    margin-right: 0px;
    margin-left: 1px;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* +++++++++++++++++++++++++++++++++++++++++++++++++++++
        End: Buttons With Grit [ Cbl-Buttons ]
   +++++++++++++++++++++++++++++++++++++++++++++++++++++ */


/* +++++++++++++++++++++++++++++++++++++++++++++++++++++
        Start: Inputs With Grit  [Cbl-Inputs ]
   +++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* Input[type="text"] */
.cbl_g_flex.input[type="text"],
input[type="text"].cbl_g_flex,
.RadInput.riTextBox.cbl_g_flex {
  font-family: Roboto !important;
  background-color: var(--cw-color-surface-container-low, #fafafa);
  height: 23px;
  max-height: 24px !important;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  padding-left: 6px;
  vertical-align: middle;
  border-radius: 4px;
  border: none;
  outline: none !important;
  min-width: 50px;
  font-size: 14px !important;
  box-sizing: content-box;
  box-shadow: none;

}

/* For IE browser */
input[type="text"]::-ms-clear {
  display: none !important;
}

/* -/For IE browser */
.cbl_gFlex1
/*cbl_input */
.cbl_g_flex {
  border-color: #000 !important;
  line-height: 1em !important;
  font-size: 1em !important;
  margin-right: .25em;
  margin-left: .25em;
}

.cbl_g_flex:active,
.cbl_g_flex:focus {
  box-shadow: none !important;
}

div input:disabled[type="text"].cbl_InputDefault {
  border: solid 1px #C3C0C0 !important; /* SC7 */
  color: #C3C0C0 !important;
}



/* cbl_InputDefault */
div .cbl_InputDefault {
    border: none;
    background-color: var(--cw-color-surface-container-low, #fafafa);
    color: var(--cw-color-on-surface-variant, #666);
    font-family: 'Roboto Flex Variable', 'Roboto', sans-serif;
}

.container .RadGrid td div.rgEditForm table tbody tr td textarea.cblTextArea,
.container .RadGrid .rgMasterTable thead tr td div.rgEditForm table tbody tr td textarea.cblTextArea
div .cblTextArea {
    border: none;
    background-color: var(--cw-color-surface-container-low, #fafafa);
    color: var(--cw-color-on-surface-variant, #666);
    font-family: 'Roboto Flex Variable', 'Roboto', sans-serif;
    margin-left: -0.25em !important;
}

div .cblTextArea:active,
div .cblTextArea:focus {
  box-shadow: none !important;
}


/* cbl_InputDefaultDesc */
div .cbl_InputDefaultDesc {
  border-color: #000000 !important;
  color: #666666;
}

/* cbl_InputNoValidate */
div .cbl_InputNoValidate {
  border-color: #000000 !important;
  color: #666666;
}

/* cbl_InputValidate */
div .cbl_InputValidate {
  border-color: #B0D7A1 !important;
  color: #666666;
}

/* cbl_InputErrorState */
div .cbl_InputErrorState {
  border-color: #DD1111 !important;
  color: #DD1111;
}

div .cbl_error_state {
  color: #DD1111;
}

div span.icons8-info-squared {
  font-size: 1.55em;
  color: #DD1111;
}




/* cbl_InputDesabled */
div .cbl_InputDesabled {
  border-color: #8e8e8e !important;
  color: #8e8e8e;
  opacity: .8;
}


/* Input Size */
.cbl_gFlex1 {
  flex: 1 1 auto;
}

.cbl_gFlex2 {
  flex: 2 1 auto;
}

.cbl_gFlex3 {
  flex: 3 1 auto;
}

.cbl_gFlex4 {
  flex: 4 1 auto;
}

/* RadnumericTextBoox */
.container .riContSpinButtons {
  max-height: 23px !important;
  margin-left: .25em;
  margin-right: .25em;
}

  .container .riContSpinButtons .riTextBox.cblRadNumericTextBox {
    border-color: #C3C0C0 !important;
    height: 23px !important;
    outline: none;
    min-width: 50px;
    padding-top: 0px !important;
    padding-bottom: 0px;
    box-sizing: content-box;
  }

    .container .riContSpinButtons .riTextBox.cblRadNumericTextBox.cbl_InputErrorState {
      border-color: #DD1111 !important;
      color: #DD1111 !important;
    }

    .container .riContSpinButtons .riTextBox.cblRadNumericTextBox.cblRadNumericTextBox:active,
    .container .riContSpinButtons .riTextBox.cblRadNumericTextBox:focus {
      box-shadow: none !important;

    }

  .container .riContSpinButtons span.riSelect {
    border: solid 0em transaprent;
    box-shadow: none !important;

    background: transparent !important;
    border-top-right-radius: .25em;

    border-bottom-right-radius: .25em;
    right: -21px !important;
    height: 23px !important;
    max-height: 23px !important;
  }


  /* disbaled .RanumerictextBox */
  .container .riContSpinButtons.RadInputDisabled .riTextBox {
    border: solid 1px #C3C0C0 !important; /* SC7 */
    color: #C3C0C0 !important;
  }

  .container .riContSpinButtons.RadInputDisabled span.riSelect {
    background-color: #C3C0C0 !important;
  }

    .container .riContSpinButtons.RadInputDisabled span.riSelect a {
      border: solid 0em transparent;
      color: #000000;
      background: transparent !important;
      box-shadow: none !important;

    }

  /* Radnumerictextbox error icon */
    .container .riContSpinButtons.RadInputError::after {
        font-family: "NewCwIcons";
        content: "\ea09";
        margin-top: 3px;
    }


/* ----------- CheckBoxes ------------------ */
label.cbl-component-check {

  width: 12px;
  height: 12px;

  border: solid 1px #C3C0C0; 
  margin-top: .15em;
  margin-left: .25em;
  margin-right: .25em;
  margin-bottom: .15em;
  border-radius: .25em;

  display: inline-flex;

  justify-content: center;
  align-items: center;
  cursor: pointer;
}



/* when checkBox is disabled */
label.cbl-component-checkDisabled {
  opacity: .4;
  cursor: default;
}


/* Hover Row and AltRow */
.RadGrid table .rgRow:hover label.cbl-component-check,
.RadGrid table .rgAltRow:hover label.cbl-component-check {
  border-color: #ffffff;
  color: #ffffff;
}

label.cbl-component-check input[type="checkbox"].cbl-checkbox {
  width: 0em;
  height: 0em;
  appearance: none;
}

.RadGrid table thead th label.cbl-component-check {
  border-color: #ffffff;
}

  .RadGrid table thead th label.cbl-component-check input:checked[type="checkbox"] + span.cbl-check-control::before {
    color: #fff;
  }

label.cbl-component-check span.span.cbl-check-control {
  text-align: center !important;
}
/* checbox checked  */
label.cbl-component-check input:checked[type="checkbox"] + span.cbl-check-control::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 600;
  content: "\f00c";
  color: #000000;
  font-size: 10px;
  display: flex;
}

label.cbl-component-check input:checked + span.cbl-check-control::before {
  /*content:"1" !important;*/
}

.RadGrid table .rgRow:hover label.cbl-component-check span::before,
.RadGrid table .rgAltRow:hover label.cbl-component-check span.cbl-check-control::before,
.RadGrid table thead label.cbl-component-check span.cbl-check-control::before {
  color: #ffffff;
}

/* .RadGrid > .rgEditForm table label.cbl-component-check span.cbl-check-control::before
        {
            color: #ffffff;
        } */


/* Disabled CheckBox */
.aspNetDisabled label.cbl-component-check {
  opacity: 0.8;
  cursor: default;
}

.cbl-component-check-disabled {
  opacity: 0.8;
  cursor: default !important;
  border-color: #C3C0C0 !important; /* PC3*/ /* customer coloir here juan */
  color: #C3C0C0; /* PC3*/ /* customer coloir here juan */
}
  /* checkbox checked */
  .cbl-component-check-disabled span.cbl-check-control::before {
    color: #C3C0C0 !important; /* PC3*/ /* customer coloir here juan */
  }


/*checkbox error handling */
.cbl-checkbox-error-handling {
  position: relative;
  /* border: solid 1px green; */
}

  .cbl-checkbox-error-handling > label.cbl-component-check {
    border-color: #DD1111 !important;
    color: #DD1111 !important;
  }

    .cbl-checkbox-error-handling > label.cbl-component-check span.cbl-check-control::before {
      color: #DD1111 !important;
    }

  /*.cbl-checkbox-error-handling > label.cbl-label-form
          {
              color: #DD1111 !important;
          }*/

  /* CblToolTip */
  .cbl-checkbox-error-handling span.cblToolTipErrorMessage {
    background: #DD1111;
    padding: 5px 5px;
    position: absolute;
    left: 0;
    bottom: 39px;
    z-index: 500;
    border-radius: .25em;

    box-shadow: 0em 0em .15em rgba(202,15,15,5);
  
    display: none;
  }

  .cbl-checkbox-error-handling:hover span.cblToolTipErrorMessage {
    display: block;
  }

    .cbl-checkbox-error-handling span.cblToolTipErrorMessage span.cblToolTipBox {
        color: #ffff;
        font-family: 'Roboto Flex Variable', 'Roboto', sans-serif;
        text-align: left;
    }

    .cbl-checkbox-error-handling span.cblToolTipErrorMessage span.cblToolTipBox::after {
      content: "";
      display: block;
      border-top: 7px solid #DD1111;
      border-right: 7px solid transparent;
      border-left: 7px solid transparent;
      position: absolute;
      bottom: -7px;
      left: calc( 50% - 7px);
    }

.cblWebFormRowError {
  position: relative;
}
/* CheckBoxToggleSwitch */
/* ++++++++++++++
             [.cblToggleSwitchContent ] : This class is very important when this is the class container we can see the ToggleSwitch
          ++++++++++++++
        */
.cblToggleSwitchContent {
  width: auto;
  /*border-bottom: solid 1px #368ee0;*/ /* testing juan */
}

/* Label [ This lable just for wrap the element ] */
label.cblToggleSwitch {
  width: 50px;
  height: 20px;
  display: flex;

  justify-content: center;
  align-items: center;
  cursor: pointer !important;
  margin-top: .25em;
  margin-left: 4px;
  transition: all 0.3s ease-out;

}
  /* input[type="checkbox"] */
  label.cblToggleSwitch .cbl_checkbox_toggle_switch {

    width: 0em;
    height: 0em;
    visibility: hidden;
  }

  label.cblToggleSwitch span.cbl_checkbox_toggle_switchControl {
    width: 50px;
    height: 20px;
    background: var(--cw-color-on-surface-variant); 

    border-radius: 25px;

   
    cursor: pointer;
    display: flex;

    justify-content: space-between;
    align-items: center;
    flex-direction: row;

    transition: all 0.3s ease-out;
 
  }

    label.cblToggleSwitch span.cbl_checkbox_toggle_switchControl::before {
        content: "";
        width: 16px;
        height: 16px;
        border-radius: 25px;
        background: #ffffff;
        border: solid 1px var(--cw-color-on-surface-variant);
        transform: scale(1.1);
        margin-left: 2px !important;
        transition: all 0.3s ease-out;
    }


    label.cblToggleSwitch span.cbl_checkbox_toggle_switchControl::after {
      font-family: "Font Awesome 5 Free";
      content: "\f00d";
      color: #fff;
      clear: both;
      font-weight: 700;
      font-size: .85em;
  
      margin-right: 8px;
  
      transition: all 0.3s ease-out;
    
    }

  /* input checked */
  label.cblToggleSwitch input:checked[type="checkbox"] + span.cbl_checkbox_toggle_switchControl {

    background: var(--cw-color-success, #4FA52F); 


    display: flex;

    justify-content: center;
    align-items: center;
    position: relative;
  }

    label.cblToggleSwitch input:checked[type="checkbox"] + span.cbl_checkbox_toggle_switchControl::before {
        margin-left: 26px !important;
        margin-right: -4px;
        border: solid 1px var(--cw-color-success, #4FA52F);
    }

    label.cblToggleSwitch input:checked[type="checkbox"] + span.cbl_checkbox_toggle_switchControl::after {
      font-family: "Font Awesome 5 Free";
      content: "\f00c";
      color: #fff;
      clear: both;
      font-weight: 700;
      font-size: .85em;
      position: absolute;
      left: 8px;
      /*top:3px;*/
      top: 3.5px !important;
    }

  /* checkBox disabled */
  /* input [not checked disabled ]*/
  label.cblToggleSwitch input[type="checkbox"]:disabled + span.cbl_checkbox_toggle_switchControl {
    background: #C3C0C0;
    opacity: .8;
    cursor: default;
  }

    label.cblToggleSwitch input[type="checkbox"]:disabled + span.cbl_checkbox_toggle_switchControl::before {
      border: solid 1px #C3C0C0;
    }

  /* input [checked disabled ]*/
  label.cblToggleSwitch input:checked[type="checkbox"]:disabled + span.cbl_checkbox_toggle_switchControl {
    cursor: default;
    /*opacity: .7;*/
    background: #B0D7A1;
  }

    label.cblToggleSwitch input:checked[type="checkbox"]:disabled + span.cbl_checkbox_toggle_switchControl::before {
      border: solid 1px #B0D7A1;
    }


/* -------------------------------------- / CheckBoxToggleSwitch */
/* RadCheckBox */
.container button.RadCheckBox {
  /*border: solid 1px green;*/
  /*min-width: 220px;*/
  height: 23px;
  max-height: 23px !important;
  padding: 0px 0px !important;
  display: flex;

  justify-content: flex-start;
  align-items: center;
}

  /* Span icon [ chekced : true ] ||  [ chekced : false ] */
  .container button.RadCheckBox span.rbIcon {
    cursor: pointer;
    width: 12px;
    height: 12px;

    border: solid 1px #C3C0C0;
 
    margin-top: .15em;
    margin-left: .25em;
    margin-right: .25em;
    margin-bottom: .15em;
    border-radius: .25em;
 
    display: flex;

    justify-content: center;
    align-items: center;
    cursor: pointer;
  }

  /*[ chekced : false ]*/
  .container button.RadCheckBox span.rbToggleCheckbox::before {
    content: "" !important;
    border: solid 0em transparent !important;
  }

  .container button.RadCheckBox span.rbToggleCheckboxChecked::before {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 600 !important;
    content: "\f00c" !important;
    color: #000000 !important;
    font-size: 10px;
  }

  /* text of RadCheckBox */
    .container button.RadCheckBox .rbText {
        
        font-family: 'Roboto Flex Variable', 'Roboto', sans-serif;
        font-size: 1em;
        text-align: left;
        font-weight: 600;
        margin-top: .25em;
        margin-bottom: .25em;
        cursor: pointer
    }

 



/* -------------------------------------- / RadCheckBox */

/* Radio button */
label.cbl-component-radio {
  width: 12px;
  height: 12px;
  border: solid 1px #000000;
  margin-top: .15em;
  margin-left: .25em;
  margin-right: .25em;
  margin-bottom: .15em;
  border-radius: 50%;

  outline: none;
  display: flex;

  justify-content: center;
  align-items: center;
  cursor: pointer;
}

  label.cbl-component-radio input[type="radio"].cblRadioButton {
    width: 0em;
    height: 0em;
    display: none;
  }

  /* Radio button tag :checked */
  label.cbl-component-radio input:checked[type="radio"].cblRadioButton + span.cbl-radio-check-control {
    width: 12px;
    height: 12px;
    background: #000000;
    display: inline-block;
    transform: scale(0.48);
    border-radius: 50%;

    box-shadow: inset 0em 0em 4em rgba(13,71,161,.3);
  }

/* label.cbl-component-radio input:not(:checked)[type="radio"].cblRadioButton + span.cbl-radio-check-control::before
                {
                    content: "0";
                } */

/* Radio button disabled */

label.cbl-component-radio-disabled {
  opacity: .8;
  cursor: default;
  border-color: #c3c0c0;
}

  label.cbl-component-radio-disabled input:checked[type="radio"].cblRadioButton + span.cbl-radio-check-control {
    background: #c3c0c0;
    box-shadow: none;

  }

/* Radio button list ( JLC with JQS 12.09.2023 ) */
.cblRadioButtonList label.cbl-component-radio input[type="radio"] {
    width: 0em;
    height: 0em;
    display: none;
}

    /* Radio checked  ( JLC with JQS 12.09.2023 ) */
.cblRadioButtonList label.cbl-component-radio input[type="radio"]:checked + span.cbl-radio-check-control {
    width: 6px;
    height: 6px;
    background: #000000;
    display: inline;
    border-radius: 50%;

    box-shadow: inset 0em 0em 4em rgba(13,71,161,.3);
}
/* ---------------------------------------------------------- / Radio button */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++
        End: Inputs With Grit  [Cbl-Inputs ]
   +++++++++++++++++++++++++++++++++++++++++++++++++++++ */


/* icons_cbl : for preview icons reference */

.cblPrevIcon {
  border: solid 1px #368ee0;
  color: #368ee0;
  margin: .45em .45em;
  width: 9em;
  height: 8em;
  text-align: center;
  border-radius: .25em;

  padding: .45em .45em;
  display: flex;

  justify-content: center;
  align-items: center;
  font-weight: lighter;
  flex-direction: column;

  transition: all 0.3s ease-in-out;
}

.icons_cbl {
  font-size: 2.25rem;
}

  .icons_cbl::before {
    margin-top: .15em;
  }



.cblPrevIcon:hover {
  background: #0d47a1;
  color: #ffffff;
  border: solid 1px #0d47a1;
  box-shadow: 0em 0em .15em rgba(13,71,161,.7);

}


.icons_cbl_class,
.icons_cbl_unicode {
    font-size: 14px !important;
    font-family: 'Roboto Flex Variable', 'Roboto', sans-serif;
    margin-top: .25em;
    margin-bottom: .15em;
    cursor: pointer;
    display: flex;

    justify-content: center;
    align-items: center;
    min-width: 8em;
    padding: .25em .15em;
    border-radius: .25em;
    border: solid 1px #368ee0;
}

.cblPrevIcon:hover .icons_cbl_class,
.cblPrevIcon:hover .icons_cbl_unicode {
  border: solid 1px #fff;
}

/* -------------------------------------------------------------------------------------------------------------------------------------- / icons_cbl : fore preview icons reference */

/* CblFindAirport  */
.container .cblAirportContent {
  /*border: solid 1px #000;*/
  /*min-width: 50px;*/
  min-width: 232px !important;
  width: 220px;
  height: 23px;
  max-height: 23px !important;
  margin-top: .45em;
  margin-bottom: .45em;
  /*display: block;*/
  display: flex;
  display: -ms-flexbox;
  flex-direction: row;
  -ms-flex-direction: row;
}

/* CBLFindAirport : container div */
div .CblFindAirport {

  width: 100% !important;
  height: 23px !important;
  display: flex;
  display: -ms-flexbox;
  justify-content: space-between;
}


  /* RadSearchbox : div.container of find airport  input type text */
  div .CblFindAirport .RadSearchBox {

    background: #fff;
    height: 23px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    width: 81%;
  }



    div .CblFindAirport .RadSearchBox span.rsbInner {
      height: 23px !important;
      max-height: 23px !important;
      border: solid 1px #C3C0C0;
      border-radius: .25em;
   
      padding: 0px 0px !important;
      display: flex;

      justify-content: space-around;
      align-items: center;
    }

      div .CblFindAirport .RadSearchBox span.rsbInner.rsbFocused {
        border: solid 1px #C3C0C0 !important;
      }

      div .CblFindAirport .RadSearchBox span.rsbInner input[type="text"].rsbInput {
      
        max-width: 80% !important;
        height: 22px;
        border-radius: 0px;
        margin-left: 0px !important;
        margin-right: 1px !important;
        padding-left: .15em;
        padding-right: .15em;
        text-transform: uppercase;
      }

      div .CblFindAirport .RadSearchBox span.rsbInner.rsbFocused input[type="text"].rsbInput {
        outline: none !important;
        border: solid 0em transparent !important;
      }



      /* Buttons */
      div .CblFindAirport .RadSearchBox span.rsbInner span.rsbButtonsRight {
        width: 25px;
        min-width: 25px !important;
        max-width: 25px !important;
        height: 20px;
        overflow: hidden;
        display: flex;
  
        justify-content: center;
        align-items: center;
      }



        div .CblFindAirport .RadSearchBox span.rsbInner span.rsbButtonsRight > button.rsbButton::before {
            font-family: "NewCwIcons";
            content: "\ea33";
            font-size: 20px !important;
      
            padding: 0em 0em !important;
        }


  div .CblFindAirport button.RadButton {

    border: solid 0em transparent !important;
  }


        div .CblFindAirport button.RadButton i.fa-search::before {
            font-family: "NewCwIcons";
            content: "\ea42";
            font-size: 24px !important;
            color: var(--cw-color-icons);
            font-weight: 400;
        }

  div .CblFindAirport span.cblAirportIcon {
    margin-top: 4px;
    margin-left: 4px;
 
  }

    div .CblFindAirport span.cblAirportIcon::before {
      font-size: 18px;
      font-weight: 600;
      color: #4FA52F; /* IC8*/
    }

 

  div .CblFindAirport .RadSearchBox span.rsbInner span.rsbButtonsRight > button.rsbButton > img {
    display: none;
  }


/* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- / CblFindAirport  */



/* ListBox */


/* --------------------------------------------------------------------------------------------------------------------------------------------------- / CblFindAirport */

.cblPictureManagerEdit,
.cropImgPanel {
  width: 100%;
  box-shadow: 0em 0em .25em rgba(192,192,192,.5);

  border-radius: .25em;

  margin-bottom: .50em;
  border: solid 1px rgba(54,142,224,.5);
  display: flex;
  justify-content: flex-start;
  align-items: center;
}


  .cblPictureManagerEdit table {
    margin: 0em !important;
  }

.container .RadGrid table .rgEditForm .cblPictureManagerEdit table {
  margin-left: -1em !important;
}

.cblPictureManagerEdit .CustomerImage {
  width: 8em;
  height: 8em;
  padding: .25em;
  margin-left: .15em;
  margin-right: .15em;
  box-shadow: 0em 0em .25em rgba(192,192,192,.5);

}

/*Add Picture */

.cropImgPanel .cropImgBtn {
  width: 25px;
  height: 25px;
  padding: 0em;
  outline: none !important;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: #368ee0;
  border-radius: .25em;

  box-shadow: 0em 0em .25em rgba(192,192,192,.5);

  margin-bottom: .50em;
}

    .cropImgPanel .cropImgBtn::before {
        font-family: "NewCwIcons";
        content: "\ea3a";
        font-size: 1.50em;
        color: #368ee0;
    }


  .cropImgPanel .cropImgBtn.cropImgBtnActive {
    border: solid 1px #368ee0;
  }

.cblCropImgPanelContainer {
  width: 32.64875em;
  padding: .15em;
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  flex-direction: column;
}


  .cblCropImgPanelContainer .cropper-container,
  .cblCropImgPanelContainer .cropper-bg {
    max-width: 507px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1em;
  }

.container .cblPictureManagerEdit img {
  width: 10em;
  height: 10em;
  margin: .25em;
  border: solid 0em transparent;
  border-radius: .50em;

}
/* ------------------------------------------------------------------------------------- / .cblPictureManager */

/* Class : .cblRadgrid_rEditForm [
           this class is required to correct well webform to add and edit
           must of the cases are with passports grid, visa grids using crop
    ]*/


.container .RadGrid.cblRadgrid_rEditForm .cblPictureManagerEdit,
.container .RadGrid.cblRadgrid_rEditForm .cropImgPanel {
  margin-left: -0.50em;
}

.container .RadGrid.cblRadgrid_rEditForm .rgEditForm .cbl-component-check {
  margin-left: -0.50em !important;
}

.container .RadGrid.cblRadgrid_rEditForm .rgEditForm textarea {
  width: 100% !important;
  min-width: 100%;
  border: solid 1px #C3C0C0 !important;
}


  .container .RadGrid.cblRadgrid_rEditForm .rgEditForm textarea:active,
  .container .RadGrid.cblRadgrid_rEditForm .rgEditForm textarea:focus {
    box-shadow: none !important;
  }

.container .RadGrid.cblRadgrid_rEditForm .rgEditForm input,
.container .RadGrid.cblRadgrid_rEditForm .rgEditForm .cbl_InputDefault,
.container .RadGrid.cblRadgrid_rEditForm .rgEditForm textarea {
  margin-left: -0.5em !important;
}

.container .RadGrid.cblRadgrid_rEditForm .rgEditForm .cblPictureManagerEdit input[type="file"] {
  margin-left: 0em !important;
}

.container .RadGrid.cblRadgrid_rEditForm table tr td .rgEditForm .cblRadCombobox {
  min-width: 97.5% !important;
}

.container .RadGrid.cblRadgrid_rEditForm table tr td .rgEditForm textarea {
  min-width: 43em;
}

/*.container .RadGrid.cblRadgrid_rEditForm table .rgEditRow .rgEditForm .cblRadCombobox,
.container .RadGrid.cblRadgrid_rEditForm table .rgEditRow .rgEditForm textarea{

    border: solid 1px !important;
}*/
/* ------------------------------------------------------------------------------ / components */
/* testing RadGrid header and item btn */


/* Properties display to each part of the table : table.cblTablegrid */

/* table */
.container .cblRadGrid table.cblTablegrid {
  display: table;
  /* border: solid 1px blue;       */
}



    .container .cblRadGrid table.cblTablegrid thead th.cblRadGridHeaderBtn.rgHeader {
 
      padding: 0px 0px !important;
    }

    .container .cblRadGrid table.cblTablegrid thead th.cblempty.rgHeader {
   
      overflow: hidden;
      padding-left: 0px !important;
      padding-right: 0px !important;
    }

  /* tbody */
  .container .cblRadGrid table.cblTablegrid tbody {
    /* border: solid 1px #9c9c9c; */
    /* display: table; */
    min-width: 100%;
  }

  /* tfoot */
  .container .cblRadGrid table.cblTablegrid tfoot {
    /* border: 1px green; */
    display: table-footer-group;
  }




      .container .cblRadGrid table.cblTablegrid tbody tr.rgRow td.cblempty,
      .container .cblRadGrid table.cblTablegrid tbody tr.rgAltRow td.cblempty {
        /* background: #4FA52F;         */
        max-width: 20px !important;
        overflow: hidden;
        padding-left: 2px !important;
        padding-right: 2px !important;
      }


/* ------------------------------------------------------  / .cblTablegrid */

/* RadWindow [ layout of webForm]*/

@media only screen and ( max-width: 768px ) {
}
/* ------------------------------------------------------------- / RadWindow [ Layout of web form ]*/


/* RadColorPicker */
/*.container .RadColorPicker {
  min-width: 39.7143em;
}*/

  .container .RadColorPicker .rcpPalette {
    /*border: solid 1px green;*/
  }


    /*header */
    .container .RadColorPicker .rcpPalette .rcpHeader {
    }

    /* Body of input */
    .container .RadColorPicker .rcpPalette .rcpViews .rcpPageView.rcpMillionColorsPageView.rcpHsvPageView {
      /*border: solid 1px blue;*/
      display: flex;
      flex-direction: row-reverse;
      justify-content: center;
    }
/* ------------------------------------------------------------------------------------------- / RadColorPicker*/

/* RadTriView */
.container .RadTreeView {
  width: 100%;
}

  .container .RadTreeView ul.rtUL {
    width: 100%;
  }

    .container .RadTreeView ul.rtUL li.rtLI div.rtOut div.rtIn {
      width: 100%;
    }

      .container .RadTreeView ul.rtUL li.rtLI div.rtOut div.rtIn button.RadButton_Metro {
        padding-left: .25em !important;
        padding-right: .25em !important;
      }

        .container .RadTreeView ul.rtUL li.rtLI div.rtOut div.rtIn button.RadButton_Metro span {
          margin-left: .25em;
          margin-right: .25em;
        }

        .container .RadTreeView ul.rtUL li.rtLI div.rtOut div.rtIn button.RadButton_Metro .cblArrowUp:before {
            font-family: "NewCwIcons";
            content: "\ea1e";
            font-size: 16px;
            clear: both;
        }

        .container .RadTreeView ul.rtUL li.rtLI div.rtOut div.rtIn button.RadButton_Metro .cblArrowDown::before {
            font-family: "NewCwIcons";
            content: "\ea04";
            font-size: 16px;
            clear: both;
        }

        .container .RadTreeView ul.rtUL li.rtLI div.rtOut div.rtIn table tr td:first-child {
            width: 4rem !important;
            text-align: center;
        }


      .container .RadTreeView ul.rtUL li.rtLI div.rtOut div.rtIn table tr td:nth-child(2) {
        width: 25em !important;
      }


      .container .RadTreeView ul.rtUL li.rtLI div.rtOut div.rtIn table tr td:last-child {
        width: 4em !important;
      }





/* Notification */
.cblNotificationInfo {
    padding: 1rem;
    margin: .50rem;
    border-radius: .25rem;
    
    background: var(--cw-color-warn-container,#FFC47A);
    color: var(--cw-color-on-warn-container, #fff);
}

    .cblNotificationInfo .labelError {
        font-size: 1.25rem;
        margin-bottom: .50rem;
        color: var(--cw-color-on-warn-container, #000);
    }



/*  ----------------------- / Notification */


/* Tree directory */

/* Principal div container */
.cblRadTreeView {

  border-radius: .25em;

}

  /* Group of the lists of tree */
  .cblRadTreeView .rtUL.rtLines {
    padding: 0em;
    margin: .25em;
    overflow: hidden;
  }


  /* List of items */
  .cblRadTreeView .rtUL .rtLI {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0em;
    max-width: 97%;
    flex-direction: column;
  }
    /* Sub list of the items */
    .cblRadTreeView .rtUL .rtLI .rtUL {
      margin: 1em;
    }

    .cblRadTreeView .rtUL .rtLI .mnuNormalColor {
/*      padding: 0em;
      width: 100%;
      margin-left: 1em;*/
    }

      /* Hovering list item */
      .cblRadTreeView .rtUL .rtLI .mnuNormalColor:hover {
        background: #368ee0;
        border: solid 0em transparent;
      }

  .cblRadTreeView.RadTreeView .rtIn {
    padding: 0em !important;
  }

    .cblRadTreeView.RadTreeView .rtIn:hover {
      background: #368ee0 !important;
    }


  /* Checkbox of  TreeView */
  .cblRadTreeView label.cbl-component-check input:checked[type="checkbox"] + span.cbl-check-control::before {
    margin-top: -19px;
  }

/* -------------------------------------- / Tree directory */

/* DropDownList */
.cblDropDown {
  border: solid 1px #c3c0c0;
  min-width: 50px !important;
  max-width: 220px;
  margin-right: .25em;
  margin-bottom: .25em;
  height: 23px;
  background: #fff !important;
  border-radius: .25em !important;
 
  cursor: pointer !important;
  box-shadow: none !important;

}



  .cblDropDown span.rddlInner {
    border-bottom: solid 0em transparent;
    background: #fff;
    padding: 0em;
    height: 20px;
  }


    .cblDropDown span.rddlInner:hover {
      background: transparent !important;
      color: #000 !important;
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }

    .cblDropDown span.rddlInner.rddlFocused {
      border: solid 0em transparent !important;
      box-shadow: none !important;

    }

    /* Input of dropDownList */
    .cblDropDown span.rddlInner .rddlFakeInput {
      padding-left: .25em;
      height: 18px;
    }


    .cblDropDown span.rddlInner.rddlFocused .rddlFakeInput,
    .cblDropDown span.rddlInner:active .rddlFakeInput,
    .cblDropDown span.rddlInner:active .rddlFakeInput:active {
      color: #000 !important;
    }

    /* Buttons to expand and collpase DropDownList */
    .cblDropDown span.rddlInner .rddlSelect {
      padding: 0em !important;
      width: 20px;
      height: 23px;
      display: flex;
      justify-content: center;
      align-items: center;
    }


      .cblDropDown span.rddlInner .rddlSelect .p-i-arrow-60-down {
        display: flex;
        justify-content: center;
        align-items: center;
      }

        .cblDropDown span.rddlInner .rddlSelect .p-i-arrow-60-down::before {
          font-family: "Font Awesome 5 Free";
          font-weight: 600;
          content: "\f078";
          font-size: 12px;
          clear: both;
          color: #000 !important;
          cursor: pointer;
          margin: 0em;
        }



.container .cblRadGrid table.cblTablegrid tbody tr.rgRow td.cblRadGridItemBtn .rgDel::before,
.container .cblRadGrid table.cblTablegrid tbody tr.rgAltRow td.cblRadGridItemBtn .rgDel::before {
    font-family: "NewCwIcons";
    content: "\ea26";
    color: var(--cw-color-error);
    text-align: center;
    font-size: 1.5rem;
    display: flex;
}

.cblInnerContainer .rgMasterTable .rgRow td button.rgEditScheduling,
.cblInnerContainer .rgMasterTable .rgAltRow td button.rgDeleteScheduling,
.cblInnerContainer .rgMasterTable .rgAltRow td button.rgEditScheduling,
.cblInnerContainer .rgMasterTable .rgRow td button.rgDeleteScheduling {
  border: solid 1px purple !important;
}

.cblInnerContainer .rgMasterTable .rgRow td button.rgEditScheduling,
.cblInnerContainer .rgMasterTable .rgAltRow td button.rgEditScheduling,
.cblInnerContainer .rgMasterTable .rgAltRow td button.rgDeleteScheduling,
.cblInnerContainer .rgMasterTable .rgRow td button.rgDeleteScheduling {
  border: solid 1px purple !important;
}


/* Custom Loading */
html .RadAjax_Metro .raDiv {
  background-image: none;
}

.cblLoadingContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.cblContentLoading {
  width: 4em;
  height: 4em;
  margin: .50em;
  position: relative;
  border-radius: 100%;

  animation: cbl_loading 2.08s linear infinite;

  box-shadow: inset -0.125em 0em 0em 0.125em var(--cw-color-inverse-primary);

  display: flex;
  justify-content: center;
  align-items: center;
}

.cblLoadingContent,
.cblLoadingText {
  margin: .50em;
}

  .cblLoadingText
  h1 {
    color: var(--cw-color-primary, #368ee0);
    font-size: 1.25em;
  }

/* Loading icon [ Airplane] */
.cblIconLoading {
  position: absolute;
  left: -0.50em;
  transform: rotate(-90deg);

  font-size: 1.80em;
}

    .cblIconLoading::before {
        font-family: "NewCwIcons";
        content: "\ea6f";
        color: var(--cw-color-primary, #368ee0);
    }


/* Animation of loading */
@keyframes cbl_loading {

  from {
    transform: rotate(0deg);

  }

  to {
    transform: rotate(360deg);

  }
}

/* --------------------------------------------- / Custom Loading */
/* RadScheduler */
.cblRadScheduler {
  border: solid 0em transparent !important;
}

  .cblRadScheduler .rsTopWrap {
    min-height: 100%;
    border: solid 1px #dcdcdc;
  }

/* ----------------------------------------------/ RadScheduler */



/* Size of tables in [ em ]*/

.cblWTbExpandColumn {
  border: solid 1px purple !important;
}

.cblWTbBtnColumn {
  width: 25px !important;
  max-height: 25px !important;
  padding: 0em !important;
}

.cblWTb4em {
  width: 4em;
}

.cblWTb6em {
  width: 6em;
}

.cblWTb12em {
  width: 12em;
}

.cblWTb14em {
  width: 14em;
}

.cblWTb80em {
  width: 80em;
}

.cblWTb20em {
  width: 20em;
}

.cblWTb120em {
  width: 120em;
}

.cblWTb140em {
  width: 140em;
}

/* MinWidth of tables */

.cblMinWidthColumn2em
{
  min-width: 2em;
}

.cblMinWidthColumn4em
{
  min-width: 4em;
}

.cblMinWidthColumn5em
{
  min-width: 5em;
}

.cblMinWidthColumn6em
{
  min-width: 6em;
}

.cblMinWidthColumn8em
{
  min-width: 8em;
}


.cblMinWidthColumn12em
{
  min-width: 12em;
}

.cblMinWidthColumn14em
{
  min-width: 14em;
}

.cblMinWidthColumn16em
{
  min-width: 16em;
}

.cblMinWidthColumn18em
{
  min-width: 18em;
}


.cblMinWidthColumn20em
{
  min-width: 20em;
}

.cblMinWidthColumn32em
{
  min-width: 32em;
}


/*#region  grid iframe grid for mvc react */

.container .cblIframeGrid iframe
{
    width: 100%;
        min-height:50em;
        height: 1100px !important;
    border: solid 0em transparent;
}

/*#endregion */

/*#region Removing " : " for Template radGrid like Departure services - JLC with JQ 29.06.2023 */
/* tbody */
.cblRadGrid_emptyLabel_tmpl .rgMasterTable tbody .rgEditForm tr:nth-child(4) td:first-child label,
.cblRadGrid_emptyLabel_tmpl .rgMasterTable tbody .rgEditForm tr:nth-child(5) td:first-child label,
/* thead */
.cblRadGrid_emptyLabel_tmpl .rgMasterTable thead .rgEditForm tr:nth-child(4) td:first-child label,
.cblRadGrid_emptyLabel_tmpl .rgMasterTable thead .rgEditForm tr:nth-child(5) td:first-child label {
    background: #fff;
    color: #fff;
}

/* Removing AptsType2 from edit form - tbody */
.cblRadGrid_emptyLabel_tmpl .rgMasterTable tbody .rgEditForm tr:nth-child(2){
    display: none;
}

/* width of RadComboBox */
.cblRadGrid_emptyLabel_tmpl .rgMasterTable tbody .rgEditForm tr .RadComboBox,
.cblRadGrid_emptyLabel_tmpl .rgMasterTable thead .rgEditForm tr .RadComboBox {
   width: 250px !important;
}

/* width of RadComboBox */
.cblRadGrid_emptyLabel_tmpl .rgMasterTable tbody .rgEditForm tr textarea,
.cblRadGrid_emptyLabel_tmpl .rgMasterTable thead .rgEditForm tr textarea {
    min-width: 235px !important;
}


/* ASk Mr. Iago about it */
/* Removing AptsType2 from edit form */
.cblRadGrid_emptyLabel_tmpl .rgMasterTable thead .rgEditForm tr:nth-child(2) {
    display: none;
}
/*#endregion */


/** DFA 2024 temporal fixes **/

button.RadButton_Metro.rbButton.rbIconOnly {
    width: 1.75rem;
    height: 2rem;
    border: none;
    box-shadow: none;
    color: var(--cw-color-icons);
    background: transparent;
    font-size: 1.5rem;
    line-height: 100%;
    padding: 0;
}

    button.RadButton_Metro.rbButton.rbIconOnly:hover {
        color: var(--cw-color-icons-variant);
        background: transparent;
    }


.RadGrid_Metro tr.rgEditRow {
    background: var(--cw-color-layout-table-row-selected);
    color: var(--cw-color-layout-on-table-row-selected);
}

.cw-button-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    padding: 0.5rem;
    width: 2rem;
    height: 2rem;
    color: var(--cw-color-icons, #368ee0);
    font-size: 1.5rem;
    box-sizing: border-box;

}

    .cw-button-icon:hover {
        background-color: transparent;
        color: var(--cw-color-icons-variant, #0d47a1);
    }

    .cw-button-icon:active {
        background-color: var(--cw-color-primary-container, #d6e3ff);
        color: var(--cw-color-on-primary-container, #0d47a1);
    }

    .cblRequestedRow {
        --cw-color-icons: var(--cw-color-on-warn);
    }



tr.cw-row-status-success {
    background-color: var(--cw-color-success-container);
    color: var(--cw-color-on-success-container);
    --cw-color-icons: var(--cw-color-on-success-container);
    --cw-color-error: var(--cw-color-on-success-container);
}

tr.cw-row-status-warn {

	background-color: var(--cw-color-warn-container);
	color: var(--cw-color-on-warn-container);
	--cw-color-icons: var(--cw-color-on-warn-container);
	--cw-color-error: var(--cw-color-on-warn-container);
		
}
tr.cw-row-status-error {

	background-color: var(--cw-color-error-container);
	color: var(--cw-color-on-error-container);
	--cw-color-icons: var(--cw-color-on-error-container);
	--cw-color-error: var(--cw-color-on-error-container);
	
}

input.riTextBox.cw-input {
    background-color: var(--cw-color-surface-container-low);
    border-radius: 0.25rem;
    border: solid 1px var(--cw-color-surface-container);
    box-shadow: none;
}

    input.riTextBox.cw-input.riHover,
    input.riTextBox.cw-input.riFocused {
        background-color: var(--cw-color-surface-container-low);
        border: solid 1px var(--cw-color-outline-variant);
        box-shadow: none;
    }


.select-max-width-20rem,
.select-max-width-20rem > option {
    max-width: 20rem;
}
/* */