::-webkit-scrollbar {
    width: 10px !important;
    height: 10px !important;
}

::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
    border-radius: 10px !important;
    min-height: 30px;
}

::-webkit-scrollbar-thumb {
    background: #888 !important;
    border-radius: 10px !important;
    min-height: 30px
}

    ::-webkit-scrollbar-thumb:hover {
        background: #555 !important;
    }
body{
    padding: 0px !important;
}
.align-right {
    text-align: right;
}

#Searchform label {
    padding-top: 3px;
}

.mgb10 {
    margin-bottom: 10px;
}

.align-center {
    text-align: center;
}

#src .modal-dialog, #ViewInvoice .modal-dialog {
    /*width: 850px;*/
    position: relative;
    display: table;
    overflow-y: auto;
    overflow-x: auto;
    width: auto;
    min-width: 300px;
}

/*Messages*/
#messagewrapper {
    margin-left: 0 !important;
    position: fixed;
    top: 0px;
    width: 30%;
    z-index: 100000;
    right: 0;
}

.messagebox {
    color: #060;
    margin: 0px;
    padding: 10px 10px 10px 30px;
    border: 1px solid #396;
    background: #cfc url(/Content/img/information.png) no-repeat 8px 11px;
    opacity: 0.9;
}

.errorbox {
    color: #c00;
    margin: 0px;
    padding: 10px 10px 10px 30px;
    border: 1px solid #c00;
    background: #fcc url(/Content/img/exclamation.png) no-repeat 8px 11px;
}

    .errorbox ul {
        margin: 7px 0 0 0;
    }

.exceptionbox {
    color: #c00;
    margin: 10px;
    padding: 10px 10px 10px 30px;
    border: 1px solid #c00;
    background: #fcc url(/Content/img/exclamation.png) no-repeat 8px 11px;
}

.wrap-preload {
    height: 127px;
    width: 267px;
    font-family: Arial;
    position: fixed;
    top: 40%;
    left: 45%;
    z-index: 10100;
    border-radius:6px;
}
#fade{
   width: 100%;
   height: 100%;
   top: 0px;
   left: 0px;
   position: fixed;
   display: block;
   opacity: 0.8;
   background-color: #fff;
   z-index: 99;
   text-align: center;
}
.loader {
    height: 20px;
    width: 250px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}


.sendemail {
    color:#3fbae4;
    cursor:pointer;
}

.loader--dot {
    animation-name: loader;
    animation-timing-function: ease-in-out;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    height: 20px;
    width: 20px;
    border-radius: 100%;
    background-color: black;
    position: absolute;
    border: 2px solid white;
}

    .loader--dot:first-child {
        background-color: #8cc759;
        animation-delay: 0.5s;
    }

    .loader--dot:nth-child(2) {
        background-color: #8c6daf;
        animation-delay: 0.4s;
    }

    .loader--dot:nth-child(3) {
        background-color: #ef5d74;
        animation-delay: 0.3s;
    }

    .loader--dot:nth-child(4) {
        background-color: #f9a74b;
        animation-delay: 0.2s;
    }

    .loader--dot:nth-child(5) {
        background-color: #60beeb;
        animation-delay: 0.1s;
    }

    .loader--dot:nth-child(6) {
        background-color: #fbef5a;
        animation-delay: 0s;
    }

.loader--text {
    position: absolute;
    top: 200%;
    left: 0;
    right: 0;
    width: 100%;
    text-align:center;
    margin: auto;
}

    .loader--text:after {
        content: "Đang thực hiện, vui lòng đợi...";
        font-weight: bold;
        animation-name: loading-text;
        animation-duration: 3s;
        animation-iteration-count: infinite;
    }

@keyframes loader {
    15% {
        transform: translateX(0);
    }

    45% {
        transform: translateX(230px);
    }

    65% {
        transform: translateX(230px);
    }

    95% {
        transform: translateX(0);
    }
}

@keyframes loading-text {
    0% {
        content: "Đang thực hiện, vui lòng đợi";
    }

    25% {
        content: "Đang thực hiện, vui lòng đợi.";
    }

    50% {
        content: "Đang thực hiện, vui lòng đợi..";
    }

    75% {
        content: "Đang thực hiện, vui lòng đợi...";
    }
}

#attachFileModal input[type=file] {
    display: none;
    visibility: hidden;
}

#attachFileModal input[type=text] {
    resize: none;
    padding: 0px 5px;
    border: none;
    border-bottom: 1px dashed #ccc;
    height: 22px;
    background-color: #fee !important;
}

#ViewInvoice #TicketFrm .VATTEMP {
    margin: auto;
}

#tb-fileattach input[type=file] {
    display: none;
    visibility: hidden;
}

#tb-fileattach input[type=text] {
    resize: none;
    padding: 0px 5px;
    border: none;
    border-bottom: 1px dashed #ccc;
    height: 22px;
    background-color: #fee !important;
}

#documentModal input[type=file] {
    display: none;
    visibility: hidden;
}

#documentModal input[type=text] {
    resize: none;
    padding: 0px 5px;
    border: none;
    border-bottom: 1px dashed #ccc;
    height: 22px;
    background-color: #fee !important;
}

.certificate-notify.message {
    text-align: justify;
    /*font-style: italic;*/
    margin-bottom: 7px;
}

.certificate-notify.message .i {
    font-style: italic;
    margin-top: 5px;
}

.certificate-notify.actions {
    margin-top: 0px !important;
    border-top: 1px solid #E5E5E5;
    padding-top: 6px;
}

.certificate-notify.content {
    margin-top: 10px !important;
}
.certificate-notify.header {
    border-bottom: 1px solid #E5E5E5;
}

.certificate-notify.input {
    margin-top: 0px !important;
    /*margin-bottom: 0px !important;*/
}

.certificate-notify.wrap-content {
    height: 22px;
    background-color: #B84C4B;
    /*color: #fbff00;*/
    color: white;
    float: left;
    width: 300px;
    margin: 0px 25px;
    border-radius: 4px;
    cursor: pointer;
    padding-top: 1px;
    margin-bottom: 2px;
}

.certificate-notify.wrap-text {
    padding-left: 5px;
}

.certificate-notify.wrap-text .icon {
    padding-right: 5px;
    color: yellow;
}

.focus-border {
    border: 1px solid #8dc2f7 !important;
}

.select2-container .select2-selection--single {
    height: 30px !important;
}

.select2-dropdown {
    border: 1px solid #d5d5d5 !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #d5d5d5 !important;
}

.select2-container--default .select2-selection--single {
    border: 1px solid #d5d5d5 !important;
}

.select2-container--default .select2-selection--single:focus {
    border: 1px solid #8dc2f7 !important;
}

.select2-container--default .select2-selection--multiple {
    border: 1px solid #d5d5d5 !important;
}

.select2-container--default .select2-search--inline .select2-search__field:focus {
    border: none !important
}

.select2-container .select2-selection--multiple {
    min-height: 30px !important;
}

.select2-container--default .select2-selection--multiple {
    padding-bottom: 3px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin-top: 3px !important;
}

/* Tab */
.tabset > input[type="radio"] {
    position: absolute;
    left: -200vw;
}

.tabset .tab-panel {
    display: none;
}

.tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
.tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
.tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3),
.tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4),
.tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5),
.tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6) {
    display: block;
}

.tabset > label {
    position: relative;
    display: inline-block;
    padding: 10px 10px;
    border: 1px solid transparent;
    border-bottom: 0;
    cursor: pointer;
    font-weight: 600;
    margin-bottom: 0px;
    width: 50%;
    text-align: center;
}

input:focus-visible + label {
    outline: 2px solid rgba(0,102,204,1);
    border-radius: 3px;
}

.tabset > label:hover,
.tabset > input:focus + label,
.tabset > input:checked + label {
    color: #06c;
}

    .tabset > label:hover::after,
    .tabset > input:focus + label::after,
    .tabset > input:checked + label::after {
        background: #06c;
    }

.tabset > input:checked + label {
    border-color: #ccc;
    border-bottom: 1px solid #fff;
    margin-bottom: -1px;
}

.tab-panel {
    padding: 15px 0;
    border-top: 1px solid #ccc;
}

.group-btn {
    margin-left: 4px;
    width: auto;
    display: inline-block;
}
    .group-btn > .dropdown {
        position: relative;
        display: block;
    }

    .group-btn > .dropdown > .dropdown-text {
        padding: 10px 20px;
    }

    .group-btn > .dropdown > input {
        top: 0;
        left: 0px;
        opacity: 0;
        margin: 0;
        position: absolute;
        height: 100%;
        width: 100%;
        cursor: pointer;
    }
        .group-btn > .dropdown > button > i {
            margin-left: 6px;
            margin-top: 6px;
            float: right;
        }
        .group-btn > .dropdown > .dropdown-btn:hover ~ button {
            background-color: #89ad4d;
            border-color: #89ad4d;
        }

        .group-btn > .dropdown > input:checked ~ .dropdown-container {
            animation: rotateX 300ms ease-in-out forwards;
            transform-origin: top center;
            transform: scaleY(1);
        }

        .group-btn > .dropdown > .dropdown-container {
            transform: scaleY(0);
            background-color: #d4d2d2db;
            box-shadow: 0 1px 16px 0 rgba(0, 0, 0, 0.3);
            position: absolute;
            z-index: 3;
            margin-top: 10px;
            right: 5%;
        }
            .group-btn > .dropdown > .dropdown-container::before {
                width: 0;
                height: 0;
                content: '';
                top: -8px;
                right: 20px;
                z-index: -1;
                display: block;
                position: absolute;
                background: transparent;
                border-left: 10px solid transparent;
                border-right: 10px solid transparent;
                border-bottom: 10px solid #fafafa;
                -webkit-filter: drop-shadow(0px 0px 2px rgba(0,0,0,0.3));
                filter: drop-shadow(0px 0px 2px rgba(0,0,0,0.3));
            }

            .group-btn > .dropdown > .dropdown-container > a, .dropdown-container .menu-item {
                display: inline-block;
                width: 240px;
                text-decoration: none;
                padding: 10px;
                background-color: #fafafa;
                color: #656d78;
                text-align: left;
                font-size: 12px;
                line-height: 20px;
                font-weight: 400;
                cursor: pointer;
                -webkit-transition: all 200ms ease;
                -moz-transition: all 200ms ease;
                -ms-transition: all 200ms ease;
                -o-transition: all 200ms ease;
                transition: all 200ms ease;
            }
                .group-btn > .dropdown > .dropdown-container > a:hover, .dropdown-container .dropdown-submenu a:hover, .menu-item:hover {
                    background: #f0f0f0;
                    /*transform: translate(-5px, -5px);*/
                    padding-left: 15px;
                    -webkit-transition: all 200ms ease;
                    -moz-transition: all 200ms ease;
                    -ms-transition: all 200ms ease;
                    -o-transition: all 200ms ease;
                    transition: all 200ms ease;
                }
            .group-btn > .dropdown > .dropdown-container > a::selection {
                background: #f0f0f0;
            }
            .group-btn > .dropdown > .dropdown-container > a .fa {
                font-size: 14px;
                margin-right: 5px;
            }

            .dropdown-container .dropdown-submenu {
                position: absolute;
                right: 100%;
                top: 0;
                display: none;
                background: white;
                border: 1px solid #ccc;
                z-index: 3;
                padding-left: 10px;
                margin-right: 10px;
                top: 0%;
                width: 100%;
                text-align: left;
                color: black;
                animation: rotateX 300ms ease-in-out forwards;
                transform-origin: top center;
                transform: scaleY(1);
                box-shadow: 0 1px 16px 0 rgba(0, 0, 0, 0.3);
            }
            .dropdown-container .dropdown-submenu::before {
                content: "";
                display: block;
                position: absolute;
                right: -10px;
                top: 10px;
                width: 0;
                height: 0;
                z-index: 3;
                border-top: 10px solid transparent;
                border-bottom: 10px solid transparent;
                border-left: 10px solid #fafafa;
            }
.dropdown-submenu:hover, .submenu-toggle:hover + .dropdown-submenu {
    display: block;
}
.menu-item:focus-within .dropdown-submenu {
    display: block;
}
            .dropdown-container .dropdown-submenu a {
                display: block;
                padding: 8px 10px;
                text-decoration: none;
                color: #656d78;
                font-size: 12px;
            }
.menu-item {
    position: relative;
}
    .menu-item a {
        color: #656d78;
    }
        .group-btn > .dropdown > .dropdown-container > button {
            margin: 2px 2px;
        }

@keyframes slideDown {
    0% {
        opacity: 0 transform: translateY(-60px)
    }

    100% {
        opacity: 1 transform: translateY(0);
    }
}
@keyframes rotateX {
    0% {
        opacity: 0;
        transform: rotateX(-90deg);
    }

    50% {
        transform: rotateX(-20deg);
    }

    100% {
        opacity: 1;
        transform: rotateX(0deg);
    }
}
@keyframes translateX {
    0% {
        opacity: 0;
        transform: translateX(60px);
    }

    80% {
        transform: translateX(-5px);
    }

    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}

/* notification */

.notify .notify-icon {
    position: relative;
    margin-right: 0 !important;
}

    .notify .notify-icon .unread-count {
        width: 15px;
        height: 15px;
        background: red;
        border-radius: 50%;
        position: absolute;
        font-size: 10px;
        text-align: center;
        padding-top: 2px;
        top: -8px;
        right: -8px;
        display: none;
    }

.notify .notify-dropdown {
    left: auto !important;
    right: 0px;
    width: 400px !important;
}

    .notify .notify-dropdown::after {
        left: auto !important;
        right: 27px;
    }

    .notify .notify-dropdown .notify-box {
        padding: 10px;
        color: #cccccc;
    }
        .notify .notify-dropdown .notify-box .notify-content {
            max-height: 80vh;
            overflow-y: auto;
        }

        .notify .notify-dropdown .notify-box .notify-content .notifi-item {
            padding: 5px 0;
            cursor: pointer;
        }

            .notify .notify-dropdown .notify-box .notify-content .notifi-item:hover {
                background: #23303b;
                padding-left: 5px;
                color: white;
                transition: all 200ms ease;
            }

        .notify .notify-dropdown .notify-box .notify-content .unread {
            color: white;
            font-weight: bold;
        }

ul.x-navigation.x-navigation-horizontal {
    display: flex;
    flex-wrap: wrap;
}

    ul.x-navigation.x-navigation-horizontal li.xn-openable {
        flex: 0 0 auto;
    }

        ul.x-navigation.x-navigation-horizontal li.xn-openable.pull-right {
            margin-left: auto;
        }

.page-container .page-content ul.x-navigation.x-navigation-horizontal {
    padding-right: 220px !important;
}

.page-container.page-navigation-toggled .page-content ul.x-navigation.x-navigation-horizontal {
    padding-right: 50px !important;
}

input:focus,
textarea:focus,
select:focus,
button:focus,
combobox:focus {
    border: 1px solid #8dc2f7 !important;
}

.close-date {
    color: dimgray;
    background: white;
    border: 1px solid #D5D5D5;
    border-left: 0px;
    padding: 0px;
}

    .close-date:hover {
        cursor: pointer;
        background: white;
        color: dimgray;
    }