@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
/* fallback */
@font-face {
    font-family: 'Material Icons Round';
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/materialiconsround.woff2) format('woff2');
}
/*-----------------------------------------------------------------*/
:root {
    --color-head-grid: #f0f0f0; /*Mã màu head trong grid*/
    --color-all-page: #00d287; /*Màu xanh*/
    --color-orange-page: #FF990A; /*Màu cam*/
}
/*-----------------------------------------------------------------*/

.material-icons-round {
    font-family: 'Material Icons Round';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    color: #000;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(/fonts/materialicons.woff2) format('woff2');
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

.cyber-icon-confirm:before {
    content: '\e92d';
    font-family: 'Material Icons';
    font-size: 20px !important;
    color: #2125297d;
}
.cyber-icon-dadontiep:before {
    content: '\e9b1';
    font-family: 'Material Icons';
    font-size: 20px !important;
    color: #2125297d;
}
.cyber-icon-complete:before {
    content: '\e877';
    font-family: 'Material Icons';
    font-size: 20px !important;
    color: #2125297d;
}
.cyber-icon-cancel:before {
    content: '\e888';
    font-family: 'Material Icons';
    font-size: 20px !important;
    color: #2125297d;
}

.cyber-icon-delete:before {
    content: '\e92e';
    font-family: 'Material Icons';
    font-size: 20px !important;
    color: #2125297d;
}

.cyber-icon-edit:before {
    content: '\e3c9';
    font-family: 'Material Icons';
    font-size: 20px !important;
    color: #2125297d;
}

.cyber-icon-new:before {
    content: '\e147';
    font-family: 'Material Icons';
    font-size: 20px !important;
    color: #2125297d;
}

.cyber-icon-call:before {
    content: '\e0cd';
    font-family: 'Material Icons';
    font-size: 20px !important;
    color: #2125297d;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.presmlist {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-size: 1em !important;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

span {
    text-decoration: none;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    /*display:none !important;*/
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }




/*#region Khai bao chung*/
/*#region Font*/
@font-face {
    font-family: RobotoBold;
    src: url(../fonts/ROBOTO-BOLD.TTF);
}

@font-face {
    font-family: RobotoMedium;
    src: url(../fonts/ROBOTO-MEDIUM.TTF);
}

@font-face {
    font-family: RobotoRegular;
    src: url(../fonts/ROBOTO-REGULAR.TTF);
}
/*#endregion */
* {
    padding: 0px;
    margin: 0px;
    color: #000000;
    /*font-family: RobotoRegular;*/
    /*font-family: Mulish, sans-serif;*/


    font-family: "Manrope", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size:14px;
}
/*.e-dlg-content {
    background-color:#ccc;
}*/
body {
    background-color: #F7F8FA;
}

div.e-spin-overlay {
    z-index: 999999999999999 !important;
}
/*::-webkit-scrollbar {
    width: 12px;
    height: 8px;
}*/
p {
    font-size: 12.5px;
    margin-bottom: 1px;
    color: #333;
}

a {
    text-decoration: none !important;
}

select {
    border: none;
    outline: none;
}

.cyberTextRegular {
    font-family: RobotoRegular;
}

.cyberTextBold {
    font-family: RobotoBold;
}

.cyber-padding {
    padding: 16px
}

.cyber-padding-left {
    padding-left: 16px
}

.cyber-padding-top {
    padding-top: 16px
}

.cyber-padding-right {
    padding-right: 16px
}

.cyber-padding-bottom {
    padding-bottom: 16px
}

.cyber-margin {
    margin: 16px
}

.cyber-margin-left {
    margin-left: 16px
}

.cyber-margin-top {
    margin-top: 16px
}

.cyber-margin-right {
    margin-right: 16px
}

.cyber-margin-bottom {
    margin-bottom: 16px
}

.cyber-sub-text {
    color: #888888;
}
/*#endregion*/


input {
    outline: none;
    /*border: 1px solid #ccc !important;*/
}
/*#region Input*/
.CyberDivInput {
    background-color: white;
    border-radius: 6px;
    align-items: center;
}

.cyberInput {
    border: none;
    outline: none;
    padding: 6px;
}
/*#endregion */


/*#region DevExpress*/
/*icon date none*/
.input-group > .form-control.dxbs-input-group-append.dxbs-btn-group {
    display: none;
}
/*#endregion */

#cyber-main-inner-splitter{
    border:none !important;
}
/*#region CyberButton*/
.cyberButtonDefault {
    padding: 6px;
    width: 120px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 5px;
    background-color: #E4EDFF;
    cursor: pointer;
}

.cyberTextButtonDefault {
    margin-bottom: 0px;
    font-size: 14px;
    font-weight: 700;
}
/*#endregion */


/*#region CyberComboBox*/
.textComboBoxDefault {
    font-weight: 400;
    font-size: 12px;
    color: #4D5E80;
}

.selectComboBoxDefault {
    width: 161px;
    height: 49px;
    background: #FFFFFF;
    box-shadow: 0px 2px 5px rgba(38, 51, 77, 0.03);
    border-radius: 5px;
    padding: 4px;
}

.selectComboBoxReadonly {
    width: 161px;
    height: 49px;
    background: #D9DBE0;
    box-shadow: 0px 2px 5px rgba(38, 51, 77, 0.03);
    border-radius: 5px;
    padding: 4px;
}
/*#endregion */
/*#region CyberCheckBox*/
.textCheckBox {
    margin-top: 4px;
    font-size: 14px;
}

.custom-checkbox {
    display: inline-block;
    position: relative;
    margin-bottom: 0px !important;
    cursor: pointer;
    font-size: 16px;
    user-select: none;
}

    .custom-checkbox .checkbox-input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

    .custom-checkbox .checkbox-icon:after {
        content: "";
        position: absolute;
        display: none;
    }
/*#endregion */


/*#region CyberTextBox*/
.cyberText {
    font-weight: 400;
    /*font-size: 12px;*/
    color: #4D5E80;
}

.cyberInputDefault {
    width: 161px;
    height: 30px;
    min-height: 30px;
    padding: 0px;
    border-radius: 4px;
}

.cyberInputReadonly {
    background: #D9DBE0;
    box-shadow: 0px 2px 5px rgba(38, 51, 77, 0.03);
    border-radius: 5px;
}

.CyberDivInputCustom {
    border-radius: 6px;
    width: fit-content;
    padding: 10px 6px;
    display: flex;
    align-items: center;
    height: 49px;
    overflow: hidden;
}
/*#endregion */


/*#region CyberNumberic*/
.cyberNumbericDefault {
    width: 175px;
}
/*#endregion */

/*#region CyberAutoComplete*/
.divTable {
    background-color: white;
    height: 400px;
    z-index: 2147483647;
    overflow: scroll;
    max-width: 600px;
    position: absolute;
    scroll-behavior: smooth;
}

.divTableChild {
    height: 400px;
    background-color: white;
    padding-bottom: 4px;
    scroll-behavior: smooth;
}
/*#endregion */

#container {
    display: none;
}

.e-dlg-container {
    z-index: 9999990 !important;
}

.e-popup {
    z-index: 9999992 !important;
}

.e-dlg-overlay {
    z-index: 9999991 !important;
}

.material-icons-round {
    cursor: pointer;
}

.CyberGridviewEdit thead tr th {
    font-weight: bold;
    font-size: 14px;
}

.CyberGridviewEdit .material-icons-round {
    font-size: 18px;
}

.out-splitter {
    height: 100vh;
}

.dxbl-popup-cell {
    z-index: 9999999999999999999999 !important;
}

.mobileChungTu {
    display: flex;
    align-items: flex-end;
}

@media screen and (max-width: 600px) {
    .mobileChungTu {
        display: block;
    }

    .Cybermobilescroll {
        overflow: scroll;
    }
    .cyber-col-mobile {
        width: 100% !important;
    }
}

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

    .tooltip .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: black;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        bottom: 100%;
        left: 50%;
        margin-left: -60px;
        /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
        opacity: 0;
        transition: opacity 1s;
    }

    .tooltip:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
    }

.e-radio-wrapper {
    padding-left: 12px !important;
}

.cyber-input-hover:read-only {
    background-color: #f1f1f1;
}

.cyber-input-hover-numeric {
    border: 1px solid transparent !important;
}
.cyber-input-hover-numeric:hover {
    border: 1px solid #526d69bf !important;
    transition: 0.2s ease;
    border-radius: 4px !important;
}

.cyber-input-hover:hover {
    /*background-color: #9e9e9e !important;*/
    border: 1px solid #526d69bf !important;
    transition: 0.2s ease;
}

.CyberHeightNumberic {
    height: 32px;
    flex: 1;
    background-color: #f1f1f1;
}

.button-voucher {
    min-width: 60px;
}

/*Voucher*/
.CyberButton_disabled {
    cursor: not-allowed;
    opacity: 0.3;
    padding: 3px 12px;
    width: 100px;
    pointer-events: none;
}

.CyberButton_Save {
    background-color: green !important;
    border-color: white;
    color: white;
    padding: 3px 12px;
    width: 100px;
}

.CyberButton_New {
    background-color: green !important;
    border-color: white;
    color: white;
    padding: 3px 12px;
    width: 100px;
}

.CyberButton_Print {
    background-color: green !important;
    border-color: white;
    color: white;
    padding: 3px 12px;
    width: 100px;
}

.CyberButton_Edit {
    background-color: green !important;
    border-color: white;
    color: white;
    padding: 3px 12px;
    width: 100px;
}

.CyberButton_View {
    background-color: green !important;
    border-color: white;
    color: white;
    padding: 3px 12px;
    width: 100px;
}

.CyberButton_Cancel {
    background-color: green !important;
    border-color: white;
    color: white;
    padding: 3px 12px;
    width: 100px;
}

.CyberButton_Delete {
    background-color: green !important;
    border-color: white;
    color: white;
    padding: 3px 12px;
    width: 100px;
}

.CyberButton_Copy {
    background-color: green !important;
    border-color: white;
    color: white;
    padding: 3px 12px;
    width: 100px;
}

.CyberButton_Search {
    background-color: green !important;
    border-color: white;
    color: white;
    padding: 3px 12px;
    width: 100px;
}

.CyberButton_Approval {
    background-color: green !important;
    border-color: white;
    color: white;
    padding: 3px 12px;
    width: 100px;
}

.CyberButton_Attach {
    background-color: green !important;
    border-color: white;
    color: white;
    padding: 3px 12px;
    width: 100px;
}

.CyberButton_Sms {
    background-color: green !important;
    border-color: white;
    color: white;
    padding: 3px 12px;
    width: 100px;
}

.CyberButton_Phan_Bo {
    background-color: green !important;
    border-color: white;
    color: white;
    padding: 3px 12px;
    width: 100px;
}

.CyberButton_Import {
    background-color: red !important; /* green !important;*/
    border-color: white;
    color: white;
    padding: 3px 12px;
    width: 100px;
}

.CyberButton_History {
    background-color: green !important;
    border-color: white;
    color: white;
    padding: 3px 12px;
    width: 100px;
}

.CyberButton_Note {
    background-color: green !important;
    border-color: white;
    color: white;
    padding: 3px 12px;
    width: 100px;
}

.CyberButton_Top {
    background-color: green !important;
    border-color: white;
    color: white;
    padding: 3px 12px;
    width: 100px;
}

.CyberButton_Before {
    background-color: green !important;
    border-color: white;
    color: white;
    padding: 3px 12px;
    width: 100px;
}

.CyberButton_Next {
    background-color: green !important;
    border-color: white;
    color: white;
    padding: 3px 12px;
    width: 100px;
}

.CyberButton_Bottom {
    background-color: green !important;
    border-color: white;
    color: white;
    padding: 3px 12px;
    width: 100px;
}

/*Danh muc*/
.CyberButton_Red {
    background-color: #ff5722 !important;
    border-color: white;
    color: white;
    padding: 3px 12px;
    width: 100px;
}

.CyberButton_Green {
    background-color: var(--color-all-page) !important;
    border-color: white;
    color: white;
    padding: 3px 12px;
    width: 100px;
}

.CyberButton_Disable {
    background-color: #dddddd !important;
    border-color: white;
    color: #BFBFBF;
    padding: 3px 12px;
    width: 100px;
}

.CyberLable_Ngang {
    max-width: 100px;
    width: 100px;
}

.Cyberlabel_Aci .e-label {
    color: blue !important;
}

.Cyberlabel_Aci {
    color: blue !important;
}

.CyberLable_Blue {
    color: blue !important;
}

    .CyberLable_Blue .e-label {
        color: blue !important;
    }

.CyberLable_Red {
    color: red !important;
}

    .CyberLable_Red .e-label {
        color: red !important;
    }

.CyberLable_Pink {
    color: pink !important;
}

    .CyberLable_Pink .e-label {
        color: pink !important;
    }
.Cyberlabel_Group {
    color: #4980b8 !important;
}

.CyberPadding1px {
    padding: 1px !important;
}

.CyberPadding2px {
    padding: 2px !important;
}

.CyberPadding3px {
    padding: 3px !important;
}

.CyberPadding4px {
    padding: 4px !important;
}

.CyberPadding5px {
    padding: 5px !important;
}

.CyberPadding6px {
    padding: 6px !important;
}

.CyberPadding7px {
    padding: 7px !important;
}

.CyberPadding8px {
    padding: 8px !important;
}

.CyberPadding9px {
    padding: 9px !important;
}

.CyberPadding10px {
    padding: 10px !important;
}
/*D�ng Cho Grid*/
.Cyber-Header_Grid-DM {
    position: sticky;
    z-index: 99;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}
.Cyber-Header_Grid-DM-Fix {
    position: sticky;
    top: 0px;
    z-index: 999 !important;
    background-color:#fff;
}
.Cyber-Body_Grid-DM {
    position: sticky;
    z-index: 9;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}
.cyber-hover-row-dm:hover td {
    background-color: #ffe5c1 !important;
}

.Cyber-Body_Grid-DM-Fix {
    position: sticky;
    top: 0px;
    z-index: 99 !important;
    background-color: #fff;
}


.Cyber-Header_Grid {
    background-color: var(--color-head-grid) !important;
    text-align: center;
    outline: 1px solid #ccc;
    /*padding: 0px 12px;*/
    font-weight: 500;
    font-family: Arial;
    /*font-size: 12px;*/
    position: sticky;
    z-index: 9999;
    /*height: 53px;*/
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.Cyber-Header_Grid1 {
    background-color: white !important;
    text-align: center;
    outline: 1px solid #ccc;
    /*padding: 0px 12px;*/
    font-weight: 500;
    font-family: Arial;
    /*font-size: 12px;*/
    position: sticky;
    z-index: 9999;
    /*height: 53px;*/
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.Cyber-Header_Grid-Fix {
    position: sticky;
    top: 0px;
    z-index: 99999;
}



.Cyber-Header_Grid-Fix-search {
    position: sticky;
    top: 50px !important;
    z-index: 99999;
}
.Cyber-Body_Grid {
    background-color: #fff !important;
    text-align: center;
    /*outline: 1px solid #ccc;*/
    border: 1px solid #ccc;
    padding: 8px;
    /*  font-weight: bold;*/
    font-family: Arial;
    font-size: 12px;
}

.Cyber-Body_Grid-Fix {
    border: none;
    position: sticky;
    z-index: 9990;
    top: 0px;
}

.Cyber-Data_Grid {
    border: 1px solid #ccc;
    padding: 0px 8px;
}

.Cyber-Data_Grid-Fix {
    border: 1px solid #ccc;
    padding: 0px 8px;
    z-index: 1;
    background-color: #fff;
    top: 0px;
    position: sticky;
}

.bodyCssLooup {
    padding: 0px !important;
}

#DropArea {
    visibility: hidden;
}


.CyberHoverButton {
    color:#fff !important;
    background-color: var(--color-all-page) !important;
    transition: 0.3s ease;
}

    .CyberHoverButton:hover {
        color: #fff !important;
        background-color: #526d69 !important;
        transition: 0.3s ease;
    }

/*table select*/
.Tabselect {
    border-bottom: 2px solid #FF990A;
    background-color: #FF990A !important;
    color: #fff !important;
}

.cyberrowActi {
    background-color: #FF990A !important;
    color: white !important;
}

.cyberrowActi > td {
        background-color: #FF990A !important;
        color: white !important;
    }

.cyberrowhover:hover {
    background-color: #FF990A !important;
    color: white !important;
}

    .cyberrowhover:hover > td {
        background-color: #FF990A !important;
        color: white !important;
    }
    .cyberrowhover:hover > td > div {
        background-color: #FF990A !important;
        color: white !important;
    }
.hoverLinkVoucher:hover {
    color: blue !important;
    text-decoration: underline !important;
}

.e-checkbox-wrapper .e-label {
    line-height: 20px !important
}

.e-checkbox-wrapper .e-frame.e-check, .e-css.e-checkbox-wrapper .e-frame.e-check {
    background-color: #2196F3 !important;
}

/*nút chung */
.CyberButtonAllPage {
    height: 32px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background-color: var(--color-all-page) !important;
    border-radius: 4px;
    transition: 0.3s ease;
    color: #fff !important;
    cursor: pointer;
    user-select: none;
    padding: 0px !important;
    width: 80px !important;
}

    .CyberButtonAllPage:hover {
        transition: 0.3s ease;
        background-color: #526d69 !important;
    }

.CyberButtonFunctionAllPage {
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background-color: var(--color-all-page) !important;
    border-radius: 4px;
    transition: 0.3s ease;
    color: #fff !important;
    cursor: pointer;
    user-select: none;
    padding: 0px !important;
}

    .CyberButtonFunctionAllPage:hover {
        transition: 0.3s ease;
        background-color: #526d69 !important;
    }
.list-show-more {
    display: none;
    background-color: white;
    padding: 0px 6px;
}

    .list-show-more:hover .list-show-more-Show-Fnc {
        display: block;
    }


.list-show-more-Show-Fnc {
    display: none;
    cursor: auto;
    color: #000;
    background-color: #fff;
    display: none;
    position: absolute;
    min-width: 160px;
    left: 12px;
    margin: 0;
    padding: 0;
    z-index: 8;
}

    .list-show-more-Show-Fnc p {
        cursor: pointer;
        padding: 6px 22px;
        border-bottom: solid 1px var(--color-all-page) !important;
        margin: 0px !important;
        font-weight: normal;
    }
.cyber-smlist-data-tr:hover .cyber-smlist-data-fix {
    background-color: #FF990A !important;
    border: 1px solid #ccc;
}

.cyber-smlist-data-tr:hover td.cyber-smlist-stt {
    z-index: 3 !important;
}

.cyber-smlist-data-tr:hover .list-show-more {
    display: block;
}
.Cyber-Body_Grid-Fix:hover .list-show-more {
    display: block;
}
td.hoverTdGrid > div.showMenuGrid {
    display: none;
    position: absolute; 
}
td.hoverTdGrid > div.w3-row > div.showThreePoint {
    display: none;
}
td.hoverTdGrid:hover > div.w3-row > div.showThreePoint {
    display: block;
}
td.hoverTdGrid:hover > div.showMenuGrid {
    display: block;
}



.hoverGridEdit:hover .cyber-smlist-data-fix {
    background-color: #FF990A !important;
    border: 1px solid #ccc;
}

.hoverGridEdit:hover td.cyber-smlist-stt {
    z-index: 99999 !important;
}

.hoverGridEdit:hover .list-show-more {
    display: block;
}
.hoverGridEdit {
    position: relative;
}

.cyberfontlabel {
   /* margin: 0;
    font-family: var(--bs-body-font-family);*/
    font-size: 14px !important;
/*    font-weight: var(--bs-body-font-weight);
    line-height: var(--bs-body-line-height);
    color: var(--bs-body-color);
    text-align: var(--bs-body-text-align);
    background-color: var(--bs-body-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;*/
}


/*-------sửa giao diện cho trường hợp menu khai báo nhiều bị tràn ra khỏi màn hình----------*/
.Cyber-Menu-Bar > ul.e-ul:nth-of-type(2) {
    max-height: 70vh;
    overflow-y: scroll !important;
}
/*---------------------------------------------------------------*/


/*---------------------------------------------------------------*/
.menu-right-css {
    border-bottom: 1px solid #cccccc57;
    cursor: pointer;
    padding: 8px 18px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
}

.menu-right-kiem-duyet-ct {
    min-width: 200px;
    position: fixed;
    visibility: hidden;
    z-index: 999999999999999999;
    background-color: #fff;
    border-radius: 6px;
    padding: 6px 0px;
    box-shadow: 4px 5px 9px 0px rgb(0 0 0 / 39%), 0 2px 10px 0 rgb(0 0 0 / 25%);
}

.menu-right-kiem-duyet-ct.CyberActive {
    visibility: visible;
}



.classDateInput {
    height: 30px;
    border-radius: 4px !important;
}
dxbl-date-edit.dxbl-text-edit {
    border-radius: 4px !important;
}
input[readonly] {
    background-color: red;
}
input:focus {
    border: 1px solid #526d69bf !important;
    transition: 0.2s ease;
}


.hover-ngay-ks:hover .text-icon-ks {
    color: #bf6c00;
}

.itemfooter {
    padding-bottom: 8px;
}

    .itemfooter .material-icons-round {
        font-size: 18px;
    }

.hoverTextFunc:hover {
    text-decoration: underline;
}

#scrollMenuLeft::-webkit-scrollbar {
    display: none;
}

.hideMenuConClick {
    display: @(SidebarToggle && isDevice == "0" ? "none" : "") !important;
}

.e-menu-url {
    width: 100%;
}

#scrollMenuMain::-webkit-scrollbar {
    display: none;
}

body {
    background: #F8F9FA;
}

#menu-left::-webkit-scrollbar {
    display: none;
}

#cyber-body::-webkit-scrollbar {
    display: none;
}
/* .CyberNoneScroll::-webkit-scrollbar {
                        display: none;
                    }

                    .CyberNoneScroll-X::-webkit-scrollbar-thumb:horizontal {
                        background: #000;
                        border-radius: 10px;
                    } */
.iconcbb::before {
    content: "\e729";
}

div.css-lang > select.select-lang {
    -moz-appearance: none; /* Firefox */
    -webkit-appearance: none; /* Safari and Chrome */
    appearance: none;
}

ul.e-menu > li.e-menu-caret-icon {
    background-color: #fff;
}

span, li {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.hoverlimenu0 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: 0.1s ease;
    /* background-color: var(--color-all-page)1f;
                                        border-radius: 10px; */
    /* margin-bottom:4px */
}

    .hoverlimenu0:hover {
        border-radius: 4px;
        transition: 0.1s ease;
        background-color: #fff !important;
        box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
    }

.e-spinner-pane.e-spin-overlay .e-spinner-inner .e-spin-label {
    font-size: 16px;
}

.hide_ShowMenu {
    width: @(SidebarToggle == true ? "0px" : "16.6666666%");
}

.hide_ShowBody {
    margin-left: @(SidebarToggle == true ? "0px" : "16.6666666%");
}

.arrowBackMobile {
    display: none;
}

.hoverInforUser:hover .inforAccHover {
    display: block !important;
}

.inforAccHover:hover {
    display: block !important;
}

.hoverMenuHide:hover {
    transform: scale(1.3);
    transition: 0.3s;
}

a {
    text-decoration: none;
}

.imgLogoIndexMobile {
    display: none;
}
/* Css cho mobile */
@media only screen and (max-width: 600px) {
    #bodyWeb {
        /* display: @(SidebarToggle ? "none" : "block") !important; */
    }

    .menuLeftMain {
        width: 100% !important;
    }

    #menu-left {
        width: @(!SidebarToggle ? "0px" : "100%") !important;
        border: none !important;
        position: fixed;
        background-color: #00000054;
        z-index: 9999999;
    }

    .imgLogoIndex {
        width: 100% !important;
    }

    .arrowBackMobile {
        display: block;
    }

    .hideMenuHover {
        display: none;
    }

    .nameMenuIndex {
        width: auto;
    }

    .formThongBaoIndex {
        right: 0px !important;
    }

    .textFooterMain {
        height: auto !important;
    }

    .menuLeftMain {
        width: 80%;
        height: 100%;
    }

    .iconMobile {
        display: none !important;
    }

    .imgLogoIndexMobile {
        display: block;
    }
    .menu-list-mobile {
        position: fixed;
        z-index: 9999999999999999999999999;
    }

    .cyber-meunu-bar-mobile:not(.e-menu-popup) {
        width: 100%;
        background-color: transparent !important;
    }

    div.cyber-meunu-bar-mobile > span.e-menu-header {
        padding: 0px 8px;
    }

    div.cyber-meunu-bar-mobile > span.e-menu-header > span.e-icons {
        padding: 0px 6px 0px 0px !important;
        font-size: 24px !important;
        font-weight: 700;
    }

    div.cyber-meunu-bar-mobile > span.e-menu-header > span.e-menu-title {
        visibility: hidden;
    }

    .cyber-page-main-icon {
        width:auto !important;
        min-width:auto !important;
        max-width:auto !important;
    }
}

.hover-menu-tree-list:hover {
    background-color: #FF8828;
}
.hover-menu-tree-list:hover > div > span.span-ten-key {
    color:#fff;
}
.hover-row-cyber-lookup {
    background-color: #FF990A !important;
    color:#fff !important;
}


/*-----------------------menu voucher---------------------------*/
.cyber-menu-voucher {
    display: none;
    position: absolute;
    top: 28px;
    background-color: #fff;
    z-index: 1999999998;
}
.cyber-menu-voucher:hover {
    display: block;
    z-index: 1999999998;
}
.cyber-icon-menu-voucher:hover + .cyber-menu-voucher {
    display: block;
}
.cyber-hover-func-voucher {
    background-color: transparent !important;
}
.cyber-hover-func-voucher:hover {
    background-color: #FF990A !important;
}
/*-----------------------------------------------------------------*/




/*----------------------font chữ----------------------------*/

/* cyrillic-ext */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url(../fonts/Manrope/cyrillic-ext.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url(../fonts/Manrope/cyrillic.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url(../fonts/Manrope/greek.woff2) format('woff2');
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url(../fonts/Manrope/vietnamese.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url(../fonts/Manrope/latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url(../fonts/Manrope/latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}