body[data-color=color-1] {
    --bs-text-primary: #451083;
    --bs-primary-rgba: rgb(105, 108, 255, 0.3);
    --bs-primary: #451083;
    --bs-primary-hover: #571297;
    --bs-secondary: #8592a3;
    --bs-secondary-hover: #788393;
    --bs-success: #008951;
    --bs-success-hover: #22c55e;
    --bs-info: #6366f1;
    --bs-info-hover: #6366f1;
    --bs-warning: #f59e0b;
    --bs-warning-hover: #f59e0b;
    --bs-danger: #e11d48;
    --bs-danger-hover: #e11d48;
    --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;
}

.wrapperBgProfile .wrapperBg {
    background-image: linear-gradient(225deg, #dec581 0%, #856C3D 50%, #FFEECB 100%);
}

.loading-page-animation {
    background-image: radial-gradient(circle farthest-corner at 10% 20%, var(--bs-primary) 0.1%, #fff 100.2%);
    color: #dec581;
}

.text-success {
    color: var(--bs-success) !important;
}

.btn-primary {
    color: white !important;
    background-color: #451083;
    border-color: #451083;
    box-shadow: 0 0.125rem 0.25rem 0 #ffbf534d;
}

    .btn-primary:hover {
        color: white !important;
        background-color: #571297 !important;
        border-color: #571297 !important;
        transform: translateY(-1px) !important;
    }

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: black;
}

    .table-responsive .sticky-table-header .table tr th a:hover {
        color: #005C73;
    }

.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;
    }

    .tabs-horizontal .card-header-pills .nav-item {
        width: 100%;
        border-right: 1px solid var(--bs-primary);
    }
}
@media (max-width: 576px) {
    table.datatable.extra-grid th {
        background-color: white;
    }
}

.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 / 90%);
}

@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);
}

.input-group .input-group-text {
    border: var(--bs-border-width) solid #d9dee3 !important;
}

.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;
}

.linkMenuHeader.active, .linkMenuHeader.active .btnDropdownMenuSub {
    font-weight: bold !important;
    color: var(--bs-text-primary) !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;
}

select {
    height: 40px;
    width: 100%;
    padding-left: 20px;
    border-color: var(--bs-border-width) solid #b3c6d9 !important;
    border-radius: var(--bs-border-radius);
}

    select:focus-visible {
        outline: -webkit-focus-ring-color auto 0px !important;
    }

.bottomBarMobile .wrapList .btn span {
    font-size: 18px;
}


@media(max-width: 576px) {
    div:has(> .input-search) {
        width: 100%;
    }
}

table.dataTable > tbody > tr.child ul.dtr-details > li {
    white-space: normal;
}

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

.multipleSelect2Form {
    max-width: unset !important;
}

.table-responsive {
    height: calc(100vh - 399px) !important;
    overflow-y: auto !important;
}

/*.main-content .container-fluid .card .card-body {
   
}*/
.data-content {
    height: 0px;
}

.card-body {
    padding-right: 10px !important;
}

.tab-pane.tab-scroll {
    height: calc(100vh - 320px) !important;
    overflow-y: auto;
    overflow-x: hidden;
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    .tab-pane.tab-scroll {
        height: calc(100vh - 386px) !important;
    }

    .table-responsive {
        height: calc(100vh - 453px);
    }

    .tab-pane .table-responsive {
        height: calc(100vh - 602px);
    }
}

@media only screen and (max-device-width:600px) {
    .tab-pane.tab-scroll {
        height: calc(100vh - 389px) !important;
    }

    .table-responsive {
        height: calc(100vh - 404px)!important;
    }

    .tab-pane .table-responsive {
        height: calc(100vh - 550px);
    }

    .offcanvas-form-search .offcanvas-header {
        padding: 10px 15px;
    }

    .card {
        padding: 8px !important;
    }

    .container-fluid {
        padding-right: 5px;
        padding-left: 5px;
    }

    .footer {
        padding: 8px !important;
    }


    body[data-layout=horizontal] .page-content {
        padding: 10px 0px !important;
    }
}

.page-content .container-fluid .row {
    height: unset !important;
}

.sticky-table-header {
    display: none;
}

.card {
    padding: 15px !important;
}

.btn-toolbar {
    margin-bottom: 5px;
}

    .btn-toolbar button {
        height: 30px;
        font-size: 9pt !important;
    }

*::-webkit-scrollbar {
    width: 4px;
    background-color: #ffff;
}

body[data-style=ios] .footer.wrapperFooter .container-fluid .wrapperContent {
    height: 100%;
    padding: 10px 0px;
}

body[data-layout=horizontal] .page-content {
    padding: 15px 0px;
    margin-top: 0px;
}

.modal-dialog .modal-body {
    overflow-x: unset;
}

.accordion-custom .accordion-item .accordion-header {
    padding: 5px 15px;
}

/* Home Page Default */
.margin-t-h3 {
    margin-top: 14px;
}

.margin-t-text {
    margin-bottom: 20px;
    position: absolute;
    bottom: 10px;
}

.cardBody {
    height: 130px;
}

.cursor-default{
    cursor: default;
}
.custom-review {
    @media screen and (max-width: 1420px) {
        .rate > i {
            font-size: 24px !important;
            margin-right: 6px;
        }
    }

    @media screen and (max-width: 1318px) {
        .rate > i {
            font-size: 24px !important;
        }

        h1 {
            font-size: 1rem;
        }
    }

    @media screen and (max-width: 1118px) {
        .rate > i {
            font-size: 20px !important;
        }
    }

    @media screen and (max-width: 1018px) {
        .rate > i {
            margin-right: 4px;
        }
    }

    @media screen and (max-width: 908px) {
        .rate > i {
            margin-right: 2px;
        }
    }

    @media screen and (max-width: 857px) {
        .rate > i {
            font-size: 18px !important;
            margin-right: 1px;
        }
    }

    @media screen and (max-width: 789px) {
        .rate > i {
            font-size: 16px !important;
            margin-right: 2px;
        }
    }

    @media screen and (max-width: 767px) {
        .rate > i {
            font-size: 28px !important;
            margin-right: 16px;
        }
    }
}

.divCard {
    @media screen and (max-width: 1420px) {
        .fs-5 {
            font-size: 1rem !important;  
        }
    }
    @media screen and (max-width: 1199px) {
        h1 {
            font-size: 2rem;
            margin-bottom: 0;
        }
        .me-1 {
            margin-right: 0 !important;
        }
        .margin-t-h3 {
             margin-top: 12px;
        }
    }
    @media screen and (max-width: 1000px) {
        h1 {
            font-size: 1.7rem;
        }
        .fs-5 {
            font-size: 15px !important;
        }
        .me-1 {
            margin-right: 0 !important;
        }
        .margin-t-h3 {
            margin-top: 5px;
        }
    }
    @media screen and (max-width: 767px) {
        h1{
            font-size: 2rem;
        }
        .fs-5 {
            font-size: 2rem;
        }
        .margin-t-h3 {
            margin-top: 10px;
        }
        .cardBody {
            height: 120px;
        }
    }
}
.divCard {
    cursor: pointer;
}
@media screen and (min-width: 1221px) {
    .d-mobile-custom {
        display: none !important;
    }
}

@media screen and (max-width: 767px) {
    .card {
    }
}

.list-group-item label {
    margin-bottom: 0px;
    font-weight: normal;
    position: relative;
    padding-left: 0;
    padding-bottom: 0;
    text-transform: unset;
}

@media screen and (max-width: 478px) {
    .contentHeader .wrapperContentTop .wrapLogoHeader .linkLogoHeader .imgLogoHeader {
        height: 35px;
    }
    .contentHeader .wrapperContentTop .userNotification {

    }

    .contentHeader .wrapperContentTop .wrapImgResize {

    }
}

@media screen and (max-width: 433px) {
    .contentHeader .wrapperContentTop .wrapLogoHeader .linkLogoHeader .imgLogoHeader {
        height: 30px;
    }
    .contentHeader .wrapperContentTop .userNotification .iconWrap .redDot {
        top: 2%;
        right: 4%;
    }
}

@media screen and (max-width: 403px) {
    .contentHeader .wrapperContentTop .wrapLogoHeader .linkLogoHeader .imgLogoHeader {
        height: 28px;
    }
    .contentHeader .wrapperContentTop .avatar__image {
        width: 40px;
    }
}

@media screen and (max-width: 391px) {
    .contentHeader .wrapperContentTop .userNotification .iconWrap {
        height: 32px;
        width: 32px;
    }

        .contentHeader .wrapperContentTop .userNotification .iconWrap .redDot {
            top: -14%;
            right: -10%;
        }

    .contentHeader .wrapperContentTop .avatar__image {
        width: 38px;
    }
}

@media screen and (max-width: 375px) {
    .contentHeader .wrapperContentTop .wrapLogoHeader .linkLogoHeader .imgLogoHeader {
        height: 27px;
    }

    .contentHeader .wrapperContentTop .userNotification .iconWrap {
        height: 24px;
        width: 24px;
    }

        .contentHeader .wrapperContentTop .userNotification .iconWrap .redDot {
            top: -28%;
            right: -30%;
            font-size: 8px;
        }

    .contentHeader .wrapperContentTop .avatar__image {
        width: 36px;
    }
}

@media screen and (max-width: 768px) {
    .container-fluid .row .col-md-9 .card .card-header .wrapActionTable {
        flex-wrap: wrap;
        justify-content: space-between;
    }

        .container-fluid .row .col-md-9 .card .card-header .wrapActionTable .btn-group .div-group-search {
            width: 25%;
        }
}

.spinner-notify {
    width: 30px;
    height: 30px;
    border: 3px solid #ccc;
    border-top-color: #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loading-custom {
    text-align: center !important;
    position: absolute !important;
    background-color: #f5f5f5a3 !important;
    width: 91%;
    height: 79vh;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    align-items: center;
}
.daterangepicker {
    overflow-y: auto;
    height: 266px;
}