.Nav_drawer_BG_Color {
    background-image: linear-gradient(var(--BG_Menu), var(--BG_Menu_UpLight)) !important;

    /*background-image: linear-gradient(rgb(27, 165, 254) 25%, rgb(41, 201, 255) 95%) */
}

/* .Nav_drawer_BG_ColorPreview {
    background-image: linear-gradient(var(--BG_Menu), var(--BG_Menu_UpLight)) !important;
 
}
 */

.Nav_NameCompany_L_To_R_BG_Color span:after,
.Sub_Page_PageNow:after {

    /* background: linear-gradient(to right,var(--BG_Menu_UpLight) 10%, var( --BG_Menu ) 75%) !important;  */
    background: linear-gradient(to right, var(--BG_Menu_UpLight), var(--BG_Menu)) !important;
}





.Sub_Page_PageNow {
    overflow: hidden;
    text-overflow: ellipsis;
}


.CheckBox_C_Input .v-icon,
.CheckBox_C_Input .v-label {
    color: var(--C_Input) !important;
}



.Span_Nav_NameCompany_L_To_R_BG_Color_Preview:after,
.Sub_Page_PageNow_Preview:after {

    background: linear-gradient(to right, var(--BG_Menu_UpLight_Preview), var(--BG_Menu_Preview)) !important;
 
}

.Nav_NameCompany_L_To_R_BG_Color_Preview span:after,
.Sub_Page_PageNow_Preview:after {

    /* background: linear-gradient(to right,var(--BG_Menu_UpLight) 10%, var( --BG_Menu ) 75%) !important;  */
    background: linear-gradient(to right, var(--BG_Menu_UpLight_Preview), var(--BG_Menu_Preview)) !important;
}

 
.Sub_Page_PageNow_Preview
 {
    overflow: hidden;
    text-overflow: ellipsis;
}

.Nav_drawer_Select {

    /* background: var(--C_Menu) !important; */
    background: var(--BG_Data_L) !important;
}



.Nav_drawer_width_Hr_SystemConfig {

    border: 1px solid var(--C_Menu_Preview);
        opacity: 1;
}

.Nav_drawer_width_Hr {

    border: 1px solid var(--C_Menu);
        opacity: 1;
}





#Nav_drawer i {
    color: var(--C_Menu) !important;
}

#Nav_drawer .HItem {
    color: var(--C_Menu) !important;
}

.Cls_GroupReport_Filter {

    filter: var(--Filter_GroupReport_Img);

}

.Bv_Model_But_Img_V2 {
    /* filter: var(--Filter_Img); */
}


.Bv_Model_But_Img_V2_Nav {
    filter: var(--Filter_Img_Nav);
}


.Bv_Model_But_Img_V2_Nav_Select {
    filter: var(--Filter_Img_NavSelect);
}



.C_Menu {
    color: var(--C_Menu) !important
}


.C_BG_Menu {
    color: var(--BG_Menu) !important
}

.BG_Menu {
    background-color: var(--BG_Menu) !important
}


.BG_Menu_10 {
    background-color: var(--BG_Menu_10) !important
}


.BG_Menu_Setting {
    background-color: var(--BG_Menu_Setting) !important;

}


.Loadding .Loadding_progress_linear .v-progress-linear__background {
    background-color: var(--C_Menu) !important;
    border-color: var(--C_Menu) !important;
}

.Loadding .Loadding_progress_linear .v-progress-linear__indeterminate .v-progress-linear__indeterminate {
    background-color: var(--C_Menu) !important;
    border-color: var(--C_Menu) !important;
}

.C_Title_L {
    color: var(--C_Title_L) !important
}

.C_Title_L_D0 {
    color: var(--C_Title_L_D0) !important
}



.C_Title_Page {
    color: var(--C_Title_L) !important
}

.C_Title_L_border {
    border: 1px solid var(--C_Title_L) !important
}

 .C_Title_L_SystemConfig hr{
    border: 1px solid var(--C_Title_L_Preview) !important;
    opacity: 1;
    margin: 0px;
    
}

.C_Title_L hr {
    border: 1px solid var(--C_Title_L) !important;
    opacity: 1;
    margin: 0px;
    
}

.BG_Data_L {
    background-color: var(--BG_Data_L) !important
}

.BG_Data_L_78 {
    background-color: var(--BG_Data_L_78) !important
}

.cls_v_data_table .v-data-table-header th span,
.cls_v_data_table .v-data-table__thead th span ,

.cls_v_data_table thead .v-data-table__td

 {
    color: var(--C_Menu) !important
}

.cls_v_data_table .v-data-table-header,
.cls_v_data_table .v-data-table__thead,

.cls_v_data_table thead .v-data-table__td {
    background-color: var(--BG_Menu) !important
}

.cls_v_data_table .v-data-footer,
.cls_v_data_table .v-data-table-footer {
    color: var(--C_Menu) !important;
    background-color: var(--BG_Menu) !important
}

.cls_v_data_table .v-data-footer .v-btn__content .v-icon,


.cls_v_data_table .v-data-table-footer .v-btn__content .v-icon
 {


    color: var(--C_Menu) ;
}

.cls_v_data_table .v-data-footer__select .v-input__control .v-select__slot {
    border: 1px solid var(--C_Menu) !important;
}

.cls_v_data_table .v-data-footer__select .v-input__control .v-select__selections {
    border-right: 1px solid var(--C_Menu) !important;
}

.cls_v_data_table .v-data-footer__select .v-input__control .v-input__append-inner {
    border: 0px solid var(--C_Menu) !important;
}




.cls_v_data_table .v-data-footer__select .v-input__control .v-select__selections .v-select__selection {
    color: var(--C_Menu) !important;
}

.cls_v_data_table .v-data-footer__select .v-input__control .v-input__slot {
    background-color: var(--BG_Menu) !important;
}

.cls_v_data_table .v-data-footer__select .v-input__control .v-input__slot i {
    color: var(--C_Menu) !important;
}

.C_Tb_Title {
    color: var(--C_Tb_Title) !important
}

.BG_Tb_Title {
    background-color: var(--BG_Tb_Title) !important
}

.cls_v_data_table tbody tr:nth-child(odd) {
    color: var(--C_Tb_Title) !important;
    background-color: var(--BG_Tb_Title) !important
}


/* .cls_v_data_table tbody tr:nth-child(odd) { */
.cls_v_data_table tr:nth-child(even) {
    color: var(--C_Tb_Title) !important;
    background-color: var(--BG_Tb_Title_78) !important
}

.C_Input {
    color: var(--C_Input) !important
}

.BG_Input {
    background-color: var(--BG_Input) !important
}

.C_Sicon label{

    color: var(--C_Menu) !important
}


.Cls_Nav_C .v-list-group__header i,
.Cls_Nav_C .v-list-group__header label,
.Cls_Nav_C .v-list-group__header button,
.Cls_Nav_C .v-list-item__icon i,
.Cls_Nav_C .v-list-item__icon label
/* ,
.C_Sicon .Cls_Nav_C .v-list-item__icon i,
.C_Sicon .Cls_Nav_C .v-list-item__content.SubItem label  */
{
    color: var(--C_Menu) !important
}

.Cls_Nav_C_Click .v-list-group__header i,
.Cls_Nav_C_Click .v-list-group__header label,
.Cls_Nav_C_Click .v-list-group__header button,
.Cls_Nav_C_Click .v-list-item__icon i,
.Cls_Nav_C_Click .v-list-item__icon label
/* ,
.C_Sicon .Cls_Nav_C_Click .v-list-item__icon i,
.C_Sicon .Cls_Nav_C_Click .v-list-item__content.SubItem label  */
{
    color: var(--BG_Menu) !important
}

.Cls_Nav_C_Click .v-list-group__header,
.Cls_Nav_C_Click .Cls_Nav_C_Click {
    background-color: var(--C_Menu) !important
}

.Cls_Nav_C_Setting .v-list-group__header i,
.Cls_Nav_C_Setting .v-list-group__header label,
.Cls_Nav_C_Setting .v-list-group__header button,
.Cls_Nav_C_Setting .v-list-item__icon i,
.Cls_Nav_C_Setting .v-list-item__icon label
/* ,
.C_Sicon .Cls_Nav_C_Setting .v-list-item__icon i,
.C_Sicon .Cls_Nav_C_Setting .v-list-item__content.SubItem label  */
{
    color: var(--BG_Menu) !important
}

.Cls_Nav_C_Click_Setting .v-list-group__header i,
.Cls_Nav_C_Click_Setting .v-list-group__header label,
.Cls_Nav_C_Click_Setting .v-list-group__header button,
.Cls_Nav_C_Click_Setting .v-list-item__icon i,
.Cls_Nav_C_Click_Setting .v-list-item__icon label,
.Cls_Nav_C_Click_Setting
/* ,
.C_Sicon .Cls_Nav_C_Click_Setting .v-list-item__icon i,
.C_Sicon .Cls_Nav_C_Click_Setting .v-list-item__content.SubItem label  */
{
    color: var(--C_Menu) !important
}

.Cls_Nav_C_Click_Setting .v-list-group__header,
.Cls_Nav_C_Click_Setting{
    background-color: var(--BG_Menu) !important
}

.multiselect .multiselect__tags .multiselect__tag {
    background-color: var(--BG_Input);
    border: 1px solid var(--C_Input);
}

.multiselect .multiselect__tags .multiselect__tag i,
.multiselect .multiselect__tags .multiselect__tag i:after,
.multiselect .multiselect__tags .multiselect__tag i:hover:after {
    color: var(--C_Input);
    background-color: var(--BG_Input);
}

.multiselect .multiselect__content-wrapper,
.multiselect .multiselect__option--highlight,
.multiselect .multiselect__option--selected {
    color: var(--C_Input) !important;
    background-color: var(--BG_Input) !important;

}


.multiselect .multiselect__content-wrapper .multiselect__content .multiselect__element {
    background-color: var(--BG_Input) !important;

}

.multiselect .v-input--selection-controls__input .v-icon,
.multiselect .multiselect__option .Cls_Arrow_Multiselect,
.multiselect .multiselect__option--highlight .v-input--selection-controls__input .v-icon,
.multiselect .multiselect__option--highlight .Cls_Arrow_Multiselect {
    color: var(--C_Input) !important;
    caret-color: var(--C_Input) !important;
}




.multiselect .multiselect__tags {
    border-color: var(--C_Input_78);
}

.v-text-field .v-input__slot {
    /* background-color: var(--BG_Input) !important; */
}

.v-text-field input {
    /* 
    color: var(--C_Input) !important;
        max-height: 40px !important;
    min-height: 40px !important; 
    */
    color: var(--C_Input) !important;
    max-height: 28px !important;
    min-height: 28px !important;
    margin-top: -2px;
}

.v-text-field label {
    color: var(--C_Input) !important;
}

.v-text-field .v-select__slot .v-input__icon i {
    color: var(--C_Input) !important;
 
 
    
}






.v-text-field .v-select__slot input::placeholder {
    color: var(--C_Input) !important
}

.v-text-field .v-text-field__slot input::placeholder {
    color: var(--C_Input) !important;
    opacity: 0.8;
}



.v-text-field .v-input__control .v-input__slot fieldset {
    border: 1px solid var(--C_Input_78) !important;
    background-color: var(--BG_Input) !important;
}



.v-input--is-readonly .v-input__control .v-input__slot fieldset{
    background-color: rgba(0, 0, 0, 0.06) !important;
  }

.v-text-field .v-input__control .v-input__slot .v-select__slot .v-select__selections span {
    margin-top: 5px;
    margin-bottom: 5px;
    border-radius: 5px;
    color: var(--C_Input);
}

.v-text-field .v-input__control .v-input__slot .v-select__slot .v-select__selections .v-select__selection {
    color: var(--C_Input)
}

.v-text-field.v-input--is-disabled .v-input__control  .v-input__slot fieldset{
    background-color: rgba(0, 0, 0, 0.06) !important;
} 




.v-text-field .v-input__append-inner .mdi-close,
.v-text-field .v-input__append-inner .mdi-eye,
.v-text-field .v-input__append-inner .mdi-eye-off {
    color: var(--C_Input)
}




.v-menu__content .v-list .v-list-item,
.v-menu__content .v-list .v-list-item i {
    color: var(--C_Input) !important
}


.v-menu__content .v-list .v-list-item i {
    color: var(--C_Input) !important
}


.v-menu__content .v-list {
    background-color: var(--BG_Input) !important
}

.v-menu__content .v-list .v-list-item:hover,
.v-menu__content .v-list .v-list-item:hover i {
    color: var(--C_Menu) !important
}




.v-menu__content .v-list .v-list-item:hover {
    background-color: var(--BG_Menu) !important
}

.v-radio .v-input--selection-controls__input .v-icon {
    color: var(--C_Input) !important;
}

.v-radio .v-label {
    color: var(--C_Input) !important;
}



#Nav_drawer ::-webkit-scrollbar-thumb {
    background: var(--C_Menu) !important;
}

#Nav_drawer ::-webkit-scrollbar-thumb:hover {
    background: var(--BG_Menu) !important;
}


.C_BG_Menu_Login hr {
    border: 1px solid var(--BG_Menu) !important
}


.v-dialog__content ::-webkit-scrollbar-thumb ,

.v-dialog .v-overlay__content .v-card::-webkit-scrollbar-thumb
{
    /* background: var(--BG_Menu_78) !important; */
 
    /* background: var(--BG_Btn_Top_Right) !important;  */
    background:  #9AA6B2 !important;
    
    cursor: pointer;
}

.v-dialog__content ::-webkit-scrollbar-thumb:hover  {
    /* background: var(--BG_Menu) !important; */

    /* background: var(--BG_Btn_Top_Right) !important;  */
    background:  #9AA6B2 !important;
    cursor: pointer;
}

.C_v_switch .v-input__control .v-input__slot .v-input--selection-controls__input .v-input--switch__track.theme--light.primary--text
{
    color: var(--C_Input) !important;
    caret-color: var(--C_Input) !important;
}




.C_v_switch .v-input__control  .v-switch__track{
    background-color: rgba(0, 0, 0, 0.21) !important;
} 
.C_v_switch .v-input__control   .v-selection-control--dirty  .v-switch__track{
    background-color: var(--C_Input) !important;
        opacity: 0.32;
}


.C_v_switch .v-input__control .v-input__slot .v-input--selection-controls__input .v-input--switch__thumb.theme--light.primary--text {
    color: var(--C_Input) !important;
    caret-color: var(--C_Input) !important;
}


.v-switch--inset .v-switch__thumb{

    background-color: white !important; 
}



.v-switch--inset .v-selection-control--dirty  .v-switch__thumb{
  

    background-color: var(--C_Input) !important; 
}

.C_Btn_Top_Right {
    color: var(--C_Btn_Top_Right) !important
}



.BG_Btn_Top_Right {
    /* background-color: var(--BG_Btn_Top_Right) !important; */


    background-image: linear-gradient(var(--BG_Btn_Top_Right), var(--BG_Btn_Top_Right_DownLight)) !important;
}

.BG_Btn_Setting_Import {
    /* background-color: var(--BG_Btn_Top_Right) !important; */


    background-color: var(--BG_Btn_Top_Right);
}




.C_Btn_Top_Right_SW {
    color: var(--BG_Btn_Top_Right) !important
}


.C_BG_Menu_gradient_To_right {
    /* background-image:   linear-gradient(to right, var(--BG_Menu_UpLight), var(--BG_Menu)) !important; */
    background-image: linear-gradient(to right, var(--BG_Menu_UpLight)0%, var(--BG_Menu)45%) !important;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

}

.BG_Menu_gradient_To_right {
    background: linear-gradient(to right, var(--BG_Menu_UpLight), var(--BG_Menu)) !important;


}


.BG_Btn_Top_Right_SW {
    background-color: var(--C_Btn_Top_Right) !important
}



.Btn_Close_FixRed {
    color: red !important;
    border: 1px solid red;
    background-color: transparent;

}



.C_Btn_Top_Right_Login hr {
    border: 1px solid var(--C_Btn_Top_Right) !important
}

.date-time-picker {
    /* max-width: 200px !important;
    width: 200px !important; */
}



/* @media (min-width: 1200px) { */
/* @media (min-width: 1200px) {
    #SearchDate-wrapper.date-time-picker {
        max-width: 200px !important;
        width: 200px !important;
    }
} */

/* @media (min-width: 960px) {
    
    #SearchDate-wrapper.date-time-picker {
        max-width: 200px !important;
        width: 200px !important;
    }
} */

.date-time-picker input {
    /* border: 1px solid var(--C_Input) !important; */
    border: 1px solid var(--C_Input_78) !important;

    color: var(--C_Input) !important;
    background-color: var(--BG_Input) !important;
}


.date-time-picker input::placeholder {
    color: var(--C_Input) !important;
    opacity: 0.8;
}

.datepicker {

    border: 1.5px solid var(--BG_Menu) !important;
}

.pickers-container {


    background-color: var(--BG_Data_L) !important;
}



.pickers-container .datepicker-container .shortcuts-container {
    height: 340px !important;
}


.pickers-container .date-buttons {

    background-color: var(--BG_Data_L) !important;
}

.pickers-container .custom-button-content {
    color: var(--C_Input) !important;

    /* background-color:  var(--BG_Data_L) !important; */
}

.pickers-container .datepicker-prev svg,
.pickers-container .datepicker-next svg {
    fill: var(--C_Title_L) !important;

}


.date-time-picker .week-days,
.date-time-picker .week-days-container {
    color: var(--C_Input) !important;

}

.date-time-picker .year-month-selector .justify-content-right .with-border.custom-button{
    width: 100%;
}

.date-time-picker .year-month-selector  .justify-content-between .custom-button{
    /* height: 50%; */
    margin-top: 5px;
    margin-bottom: 5px; 
}
.date-time-picker .year-month-selector  .justify-content-between {
        max-height: fit-content;
    align-items: end !important;
}

.date-time-picker .custom-button{
    width: 70px;
}

.date-time-picker .datepicker-day-text {
    color: var(--C_Title_L) !important;
}

/* .date-time-picker .datepicker-today {} */

.date-time-picker .datepicker-day.selected .datepicker-day-effect {

    /* background-color: var(--BG_Input) !important;  */
}

.date-time-picker .datepicker-day.selected .datepicker-day-text {
    /* color : rebeccapurple !important; */

    /* color: var(--C_Input) !important;  */
}

/* 
.date-time-picker .datepicker-day:hover{

    color: var(--C_Input) !important; 
    background-color: var(--BG_Input) !important; 

} */
.date-time-picker .datepicker-day .datepicker-day-text {

    color: var(--C_Input) !important;
}

.date-time-picker .datepicker-day .datepicker-day-effect {
    /* background-color: var(--BG_Input) !important;  */
    background-color: var(--C_Input) !important;
    /* background-color: red !important */
}



.date-time-picker .datepicker-day.selected .datepicker-day-text,
.date-time-picker button.datepicker-day:hover .datepicker-day-text {
    /* background-color: var(--BG_Input) !important;  */
    color: var(--BG_Input) !important;
    /* background-color: red !important */
}

.custom-button:hover .datepicker-day-text {
    color: var(--BG_Input) !important;

}

.custom-button:hover .custom-button-effect {

    background-color: var(--C_Input) !important;
}

/*
.tagReportCls {
    height: auto !important; 
    min-height: 40px !important;
    border-radius: 4px !important;
    border: 1px solid var(--C_Input_78) !important;
    background-color: var(--BG_Input) !important;
}*/
.tagReportCls .ti-input {
    /* max-height: 32px !important; */
    border: unset !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 32px;
    padding-left: 6px;
    /* color: var(--C_Input) !important; */
      padding-right: 5px;
    padding-top: 0px;
    padding-bottom: 0px;  
}

.tagReportCls .ti-tags {
    padding-top: 0px;
    padding-bottom: 0px;
}

.tagReportCls .ti-tag {
    color: var(--BG_Input) !important;
    background-color: var(--C_Input) !important;
    border: 1px solid var(--BG_Input) !important;
    border-radius: 4px !important;  
      font-size: inherit;
}

.vue-tags-input{
    
    background-color: var(--C_Input) !important;
    border: 1px solid var(--BG_Input) !important;
}


/* .tagReportCls {
    height: auto !important;
    min-height: 40px !important; 
    border-radius: 4px !important; 
    background-color: var(--BG_Input) !important;
    width: 100% !important;
    max-width: 100% !important;
} */

.vue-tags-input{
    
    height: auto !important;
    min-height: 40px !important; 
    border-radius: 4px !important; 
    background-color: var(--BG_Input) !important;
        border: 1px solid var(--C_Input_78) !important;
    width: 100% !important;
    max-width: 100% !important;
}

.vue-tags-input input {
    color: var(--C_Input) !important;
    font-size: initial;
}

.vue-tags-input input::placeholder {
    color: var(--C_Input) !important;
    font-size: initial;  
      opacity: 0.8;
}




/* 
.tagReportCls {
    height: auto !important; 
    min-height: 40px !important;
    border-radius: 4px !important;
    border: 1px solid var(--C_Input_78) !important;
    background-color: var(--BG_Input) !important;
}

.tagReportCls input {
    padding: 0 12px !important;
    color: var(--C_Input) !important;
    font-size: 16px !important;

}


.tagReportCls .input-tag ,
.tagReportCls .ti-tags{
    border-radius: 4px !important;
    color: var(--BG_Input) !important;
    background-color: var(--C_Input) !important;
    border: 1px solid var(--BG_Input) !important;
    font-size: 15px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
} */



.tagReportCls .input-tag .remove,
.tagReportCls .ti-tags .remove {

    color: var(--BG_Input) !important;
    margin-left: 5px !important;
}



.text-field-search .v-input__slot {
    min-height: 36px !important;
    font-size: 12px;
}

.v-select-Search fieldset {
    min-height: 40px;
    height: 40px;
}

.v-select-Search .v-input__slot {
    min-height: 36px !important;
    font-size: 12px;
}


.v-select-Search .v-input__slot .v-input__append-inner {
    margin-top: 6px;
}
 


.v-dialog--active {
    background: var(--BG_Data_L) !important;
}

/* 
.col-xs-0 ,.col-sm-0, .col-md-0 ,.col-lg-0 ,.col-0
{
    flex: 0 0 0% !important;
    max-width: 0% !important;
} */


.v-col-xs-0 ,.v-col-sm-0, .v-col-md-0 ,.v-col-lg-0 ,.v-col-0
{
    flex: 0 0 0% !important;
    max-width: 0% !important;
}




/* Vue 3 */

.v-select i {
    opacity: 1 !important;
  
}
/* 
.v-select .v-field__input{
    padding: 0px;
} */


.v-menu .v-list .v-list-item,
.v-menu .v-list .v-list-item i {
    color: var(--C_Input) !important;
}


/* .v-menu .v-list .v-list-item i {
    color: var(--C_Input) !important
} */


.v-menu .v-list {
    background-color: var(--BG_Input) !important
}

.v-menu .v-list .v-list-item:hover,
.v-menu .v-list .v-list-item:hover i {
    color: var(--C_Menu) !important;
    background-color: var(--BG_Menu) !important;
}




.v-menu .v-list-item__overlay{
    background-color: transparent !important;
}

.v-messages{
    opacity: 1 !important;
}

.v-field__input {
    opacity: 1 !important;
}

.v-select{
    color: var(--C_Input) !important 
}


 


.v-select__content .v-list::-webkit-scrollbar-track {
  /* background-color: gainsboro; */


  background-color: var(--BG_Input) !important;
  border-radius: 5px;
}


.v-select__content .v-list::-webkit-scrollbar-track-piece{
  /* background-color: gainsboro; */


  background-color: var(--BG_Input) !important;
  border-radius: 5px;
}



.v-select__content .v-list::-webkit-scrollbar-thumb {

  /*   background-color: rgb(0, 78, 140); */
  background-color: var(--C_Input) !important;
  border-radius: 5px;
}

.v-select__content .v-list::-webkit-scrollbar  {
  width: 7px !important;
}  

.v-pagination__first,
.v-pagination__last{
    display: none;
}