body[data-color=color-1] {
    --bs-primary-rgba: rgb(105, 108, 255, 0.3);
    --bs-primary: #A57718;
    --bs-primary-hover: #996F23;
    --bs-secondary: #8592a3;
    --bs-secondary-hover: #788393;
    --bs-success: #0E934D;
    --bs-success-hover: #07623B;
    --bs-info: #6366f1;
    --bs-info-hover: #6366f1;
    --bs-warning: #f59e0b;
    --bs-warning-hover: #ebae48;
    --bs-danger: #DF5143;
    --bs-danger-hover: #ef5274;
    --bs-light: #fcfdfd;
    --bs-light-hover: #fcfdfd;
    --bs-dark: #233446;
    --bs-dark-hover: #202f3f;
    --bs-gray: rgba(67, 89, 113, 0.1);
    --bs-blue: #007bff;
    --bs-indigo: #6610f2;
    --bs-purple: #696cff;
    --bs-pink: #e83e8c;
    --bs-red: #ff3e1d;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffab00;
    --bs-green: #71dd37;
    --bs-teal: #20c997;
    --bs-cyan: #03c3ec;
    --bs-black: #435971;
    --bs-white: #fff;
    --bs-gray: rgba(67, 89, 113, 0.6);
    --bs-warning-bg-subtle: #EEE8A9;
}

input[switch=bool] + label {
    background-color: #8592a3;
}

a:hover {
    color: var(--bs-primary-hover);
}

.grid-loading {
    display: none !important;
}

.table-responsive th, th a {
    white-space: nowrap;
    font-weight: 700 !important;
}

/*.footer.wrapperFooter {
    position: absolute !important;
}*/

th[align="center"], td[align="center"] {
    text-align: center;
}

.d-inline-flex {
    display: inline-flex;
}


table.datatable.extra-grid th.fixed-column, table.datatable.extra-grid td.fixed-column {
    position: -webkit-sticky !important;
    position: sticky !important;
    background-color: var(--bs-warning-bg-subtle);
    z-index: 10;
    right: 0;
    --bs-table-color-type: var(--bs-warning-bg-subtle) !important;
    --bs-table-bg-type: var(--bs-warning-bg-subtle) !important;
}

table.datatable.extra-grid th {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    /*background-color: white;*/
    z-index: 2;
}

.table-responsive .sticky-table-header .table tr th, .table-responsive .sticky-table-header .table tr th a {
    color: #eff0f0;
}

    .table-responsive .sticky-table-header .table tr th a:hover {
        color: var(--bs-primary-hover);
    }

/*.wrap-table-responsive > .table-responsive {
    margin-top: 62.53125px !important;
}*/

.red {
    color: red;
}


input[readonly="readonly"] {
    background-color: #eee;
}

input[disabled="disabled"] {
    background-color: #eee !important;
}

.card .card-header + .card-body {
    padding-top: 20px;
}


/*@media (max-width: 576px) {
    .wrap-table-responsive > .table-responsive {
        margin-top: unset !important;
    }
}*/

.multipleSelect2Form .select2-container .select2-selection--multiple {
    padding: 0.42rem 0.875rem !important;
}

.select2-search__field::-webkit-input-placeholder,
.select2-search__field::placeholder {
    color: #CBD1D7 !important;
    padding-left: -20px !important;
    padding-top: -20px !important;
}


.modal-fullscreen {
    width: 90vw !important;
    margin-left: 5% !important;
    padding-top: 20px;
}

#toast-container > div {
    width: 350px;
}

label {
    margin-bottom: 0px;
    font-weight: bold;
    position: relative;
    padding-left: 20px;
    padding-bottom: 8px;
    text-transform: unset;
}

.text-muted {
    color: #0c2440 !important;
}

.col-12 {
    width: 100% !important;
}

.loader-content {
    z-index: 9999;
    background-color: rgb(251 251 251 / 0%);
}

@media only screen and (max-width: 576px) {
    .modal-dialog .modal-body {
        padding: var(--bs-modal-padding);
    }
}

.tab-overide.tab-content > .tab-pane {
    display: none !important;
}

.tab-overide.tab-content > .active.tab-pane {
    display: block !important;
}

.form-control {
    border: var(--bs-border-width) solid #b3c6d9;
}

    .form-control:hover:not([disabled]):not([focus]) {
        border: var(--bs-border-width) solid #b3c6d9;
    }

.select2-selection {
    border: var(--bs-border-width) solid #b3c6d9 !important;
}

.modal-lockScreen {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
}

    .modal-lockScreen .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0;
    }

.btn-unlock:hover {
    opacity: 1 !important;
}

input::placeholder {
    text-align: left;
}

.flatpickr-time .flatpickr-am-pm, .flatpickr-time .flatpickr-time-separator, .flatpickr-time input {
    color: var(--bs-white) !important;
}

.flatpickr-time {
    background-color: var(--bs-primary);
}

.invalid-feedback {
    position: absolute;
    margin-top: 0px !important;
    /* top: 100%;
    left: 0;*/
}


.select2-container .select2-search--inline .select2-search__field {
    margin-top: 0px !important;
    height: 22px !important;
}

.select2-container .select2-search--inline .select2-search__field {
    font-family: "Nunito", sans-serif !important;
}

.flatpickr-monthSelect-theme-dark {
    background: #3f4458 !important;
}


.linkMenuHeader.active, .linkMenuHeader.active .btnDropdownMenuSub {
    font-weight: bold !important;
    color: var(--bs-primary) !important;
}

.btn-toolbar .btn-group .dropdown-menu {
    max-height: 220px !important;
}

.daterangepicker .ranges li.active {
    background-color: var(--bs-primary) !important;
}

.daterangepicker td.active, .daterangepicker td.active:hover {
    background-color: var(--bs-primary) !important;
}

.daterangepicker td.start-date, .daterangepicker td.end-date, .daterangepicker td.start-date.end-date {
    border-radius: 150px !important;
    height: 32px !important;
}

.daterangepicker .calendar-table th, .daterangepicker .calendar-table td {
    height: 32px !important;
}

.daterangepicker .ranges li {
    padding: 6px 12px !important;
}

.hidden-impotant {
    display: none !important;
}

.multipleSelect2Form {
    max-width: unset;
}

.input-group .invalid-feedback {
    top: 38px;
}

input[readonly] {
    background: lightgray;
}

table.extra-grid tr td {
    white-space: normal;
}

.text-left {
    text-align: left !important;
}

/*Btn fixed scan QrCode*/
@keyframes hoverWave {
    0% {
        box-shadow: 0 8px 10px rgba(56,163,253,.3),0 0 0 0 rgba(56,163,253,.2),0 0 0 0 rgba(56,163,253,.2);
    }

    40% {
        box-shadow: 0 8px 10px rgba(56,163,253,.3),0 0 0 15px rgba(56,163,253,.2),0 0 0 0 rgba(56,163,253,.2);
    }

    80% {
        box-shadow: 0 8px 10px rgba(56,163,253,.3),0 0 0 30px rgba(56,163,253,0),0 0 0 26.7px rgba(56,163,253,.067);
    }

    100% {
        box-shadow: 0 8px 10px rgba(56,163,253,.3),0 0 0 30px rgba(56,163,253,0),0 0 0 40px rgba(56,163,253,0);
    }
}

@keyframes shake {
    0% {
        transform: rotateZ(0deg);
        -ms-transform: rotateZ(0deg);
        -webkit-transform: rotateZ(0deg);
    }

    10% {
        transform: rotateZ(-30deg);
        -ms-transform: rotateZ(-30deg);
        -webkit-transform: rotateZ(-30deg);
    }

    20% {
        transform: rotateZ(15deg);
        -ms-transform: rotateZ(15deg);
        -webkit-transform: rotateZ(15deg);
    }

    30% {
        transform: rotateZ(-10deg);
        -ms-transform: rotateZ(-10deg);
        -webkit-transform: rotateZ(-10deg);
    }

    40% {
        transform: rotateZ(7.5deg);
        -ms-transform: rotateZ(7.5deg);
        -webkit-transform: rotateZ(7.5deg);
    }

    50% {
        transform: rotateZ(-6deg);
        -ms-transform: rotateZ(-6deg);
        -webkit-transform: rotateZ(-6deg);
    }

    60% {
        transform: rotateZ(5deg);
        -ms-transform: rotateZ(5deg);
        -webkit-transform: rotateZ(5deg);
    }

    70% {
        transform: rotateZ(-4.28571deg);
        -ms-transform: rotateZ(-4.28571deg);
        -webkit-transform: rotateZ(-4.28571deg);
    }

    80% {
        transform: rotateZ(3.75deg);
        -ms-transform: rotateZ(3.75deg);
        -webkit-transform: rotateZ(3.75deg);
    }

    90% {
        transform: rotateZ(-3.33333deg);
        -ms-transform: rotateZ(-3.33333deg);
        -webkit-transform: rotateZ(-3.33333deg);
    }

    100% {
        transform: rotateZ(0deg);
        -ms-transform: rotateZ(0deg);
        -webkit-transform: rotateZ(0deg);
    }
}

.btnScannerFixScreen {
    position: fixed;
    bottom: 15px;
    right: 15px;
    z-index: 990;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    box-shadow: 0 8px 10px rgba(56,163,253,.3);
    padding: 0;
}

@media screen and (min-width: 576px) {
    .btnScannerFixScreen {
        animation: hoverWave linear 1s infinite;
    }
}

@media screen and (max-width: 575px) {
    .btnScannerFixScreen {
        width: 100%;
        border-radius: 0;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        -ms-border-radius: 0;
        -o-border-radius: 0;
        bottom: 0;
        right: 0;
    }

        .btnScannerFixScreen:hover {
            transform: unset !important;
            -webkit-transform: unset !important;
            -moz-transform: unset !important;
            -ms-transform: unset !important;
            -o-transform: unset !important;
        }
}

.btnScannerFixScreen .btn__ico {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    transition: .3s all;
    width: 50px;
    height: 50px;
    font-size: 0;
    line-height: 0;
}

    .btnScannerFixScreen .btn__ico i {
        font-size: 30px;
        line-height: 1.4;
    }

@media screen and (min-width: 576px) {
    .btnScannerFixScreen .btn__ico {
        animation: 1200ms ease 0s normal none 1 running shake;
        animation-iteration-count: infinite;
        -webkit-animation: 1200ms ease 0s normal none 1 running shake;
        -webkit-animation-iteration-count: infinite;
    }
}

@media screen and (max-width: 575px) {
    .btnScannerFixScreen .btn__ico {
        width: 100%;
        font-size: 16px;
        color: #fff;
        font-weight: 700;
        gap: 5px;
    }
}

@media screen and (max-width: 575px) {
    .wrapperFooter {
        padding-bottom: 50px !important;
    }
}

.showMenu .btnScannerFixScreen {
    display: none;
}


@media screen and (max-width: 1220px)and (min-width: 992px) {
    .wrapperFilterForm {
        flex-direction: row;
    }

        .wrapperFilterForm .input-group {
            width: 285px;
        }

            .wrapperFilterForm .input-group .btn-uncheck-save {
                padding-left: 10px;
                padding-right: 10px;
            }
}

#modalSearchByCameraScanner .modal-body {
    padding: 15px;
}

#modalSearchByCameraScanner .modal-dialog {
    max-width: 530px;
}

#qr-reader video {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.modalScanQRCode .contentQR + .js-content-alert, .modalScanQRCode .contentQR {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width: 575px) {
    .modalScanQRCode .contentQR + .js-content-alert, .modalScanQRCode .contentQR {
        max-width: 500px;
    }
}

@media screen and (max-width: 575px) {
    .modalScanQRCode .contentQR {
        max-width: 100%;
    }
}

.modalScanQRCode .js-content-alert {
    margin-top: 15px;
}

    .modalScanQRCode .js-content-alert > *:not(first-child) {
        margin-top: 15px;
    }

@media screen and (max-width: 575px) {
    .modalScanQRCode .js-content-alert > *:not(first-child) {
        margin-top: 5px;
    }
}

@media screen and (max-width: 575px) {
    .modalScanQRCode .js-content-alert {
        margin-top: 5px;
    }
}

.modalScanQRCode .js-content-alert .titleScanItem {
    font-size: 14px;
    color: #000;
    text-align: center;
}

@media screen and (max-width: 575px) {
    .modalScanQRCode .js-content-alert .titleScanItem {
        font-size: 12px;
    }
}

.modalScanQRCode .js-content-alert .textTitle {
    font-weight: 700;
    width: 96px;
    display: flex;
    justify-content: space-between;
    padding-right: 6px;
}

    .modalScanQRCode .js-content-alert .textTitle::after {
        content: ":";
        display: block;
    }

.modalScanQRCode .js-content-alert .textVal {
    flex: 1;
}

.modalScanQRCode .js-content-alert .textItem {
    display: flex;
    align-items: center;
    text-align: left;
    color: #000;
    font-size: 18px;
}

@media screen and (max-width: 575px) {
    .modalScanQRCode .js-content-alert .textItem {
        font-size: 14px;
    }
    input#cpMain_txtSearch {
        height:36px;
    }
}

@media screen and (max-width: 1220px)and (min-width: 992px) {
    .cardHeaderSmall .wrapperFilterForm {
        gap: 5px;
    }

        .cardHeaderSmall .wrapperFilterForm .gap-3 {
            gap: 5px !important;
        }

        .cardHeaderSmall .wrapperFilterForm .wrapperAddNew {
            gap: 5px;
        }

        .cardHeaderSmall .wrapperFilterForm .btn {
            font-size: 12px;
            padding-left: 5px;
            padding-right: 5px;
        }

        .cardHeaderSmall .wrapperFilterForm .btn-uncheck-save {
            padding-left: 10px;
            padding-right: 10px;
        }

    .cardHeaderSmall .card-header > .row {
        flex-wrap: nowrap;
    }
      input#cpMain_txtSearch {
        height:36px;
    }
}

@media screen and (max-width: 575px) {
    .showMenu .wrapperFooter {
        padding-bottom: 0 !important;
    }


    button.btn.btn-primary.dropdown-toggle {
        font-size: 10pt;
    }
}

@media screen and (max-width: 1220px) {
    .tablePurchaseOrderDetail .table .form-control, .tablePurchaseOrderDetail .table td, .tablePurchaseOrderDetail .table th {
        font-size: 12px;
    }

    .tablePurchaseOrderDetail .table td, .tablePurchaseOrderDetail .table th, .tablePurchaseOrderDetail .table .form-control {
        padding-left: 5px;
        padding-right: 5px;
    }

    .tablePurchaseOrderDetail .table .btn, .tablePurchaseOrderDetail .table .form-control {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .tablePurchaseOrderDetail .table .btn {
        padding-left: 10px;
        padding-right: 10px;
    }

    .tablePurchaseOrderDetail .table thead tr > *:nth-child(2) {
        max-width: 230px !important;
        min-width: 230px !important;
    }

    .tablePurchaseOrderDetail .table thead tr > *:nth-child(3) {
        max-width: 50px !important;
        min-width: 50px !important;
    }

    .tablePurchaseOrderDetail .table thead tr > *:nth-child(4) {
        max-width: 60px !important;
        min-width: 60px !important;
    }

    .tablePurchaseOrderDetail .table thead tr > *:nth-child(5) {
        max-width: 80px !important;
        min-width: 80px !important;
    }

    .tablePurchaseOrderDetail .table thead tr > *:nth-child(6) {
        max-width: 110px !important;
        min-width: 110px !important;
    }

    .tablePurchaseOrderDetail .table thead tr > *:nth-child(7) {
        max-width: 150px !important;
        min-width: 150px !important;
    }
}

@media screen and (min-width: 992px)and (max-width: 1220px) {
    .rowInfoPurchaseOrderDetail > * {
        flex: 50%;
        -webkit-flex: 50%;
        -moz-flex: 50%;
        -ms-flex: 50%;
        -o-flex: 50%;
        max-width: 50%;
    }
}
.offcanvas{
    overflow-y:scroll;
}
.help-block.text {
    font-style: italic;
    color: #a57718;
}
.custom_valid {
    color: #fd625e;
    font-size: 12px;
    display: inline-block;
    margin-left: 5px;
}