:root {
    --theme-default: #05a6f0;
    --theme-secondary: #94A3B8;
    --light-background: rgba(242, 243, 247, 0.7);
    --body-font-color: #2F2F3B;
    --chart-border: #ECF3FA;
    --recent-chart-bg: #FCFCFD;
    --light-bg: #EEF1F6;
    --white: #fff;
    --light2: #F5F6F9;
    --sidebar-border: rgba(0, 0, 0, 0.1);
    --chart-text-color: rgba(82, 82, 108, 0.8);
    --recent-dashed-border: rgba(82, 82, 108, 0.3);
    --chart-dashed-border: rgba(82, 82, 108, 0.2);
    --chart-progress-light: rgba(82, 82, 108, 0.1);
    --recent-box-bg: #F2F4F7;
    --recent-border: rgba(97, 101, 122, 0.25);
    --course-light-btn: #F2F3F7;
    --course-bg: #F7F7F7;
    --balance-profie-bg: #E0DFEF;
    --view-grid-bg: #ECF3FA80;
    --view-border-marker: #cfcdfc;
    --light-slate: #F5F6F9;
    --text-gray: rgba(82, 82, 108, 0.8);
    --product-shadow: 0px 1px 0px rgba(82, 82, 108, 0.15);
    --fc-button-bg-color: var(--theme-default);
    --fc-button-active-bg-color: var(--theme-default);
    --fc-button-active-border-color: var(--theme-default);
    --fc-button-border-color: var(--theme-default);
    --fc-button-hover-bg-color: var(--theme-default);
    --fc-button-hover-border-color: var(--theme-default);
    --normal: #ECEAF3;
    --normal-shadow: #D9D8E3;
    --normal-mouth: #9795A4;
    --normal-eye: #595861;
    --active: #F8DA69;
    --active-shadow: #F4B555;
    --active-mouth: #F05136;
    --active-eye: #313036;
    --active-tear: #76b5e7;
    --active-shadow-angry: #e94f1d;
    /* Do not show the "remove tag" (x) button when only a single tag remains */
}

    :root .customLook {
        --tag-bg: var(--theme-default);
        --tag-hover: var(--theme-secondary);
        --tag-text-color: var(--white);
        --tags-border-color: silver;
        --tag-border-radius: 25px;
        --tag-text-color--edit: #111;
        --tag-remove-bg: var(--tag-hover);
        --tag-pad: .6em 1em;
        --tag-inset-shadow-size: 1.35em;
        --tag-remove-btn-bg--hover: #000;
        --tagify-dd-color-primary: var(var(--theme-default));
        --tagify-dd-bg-color: var(--course-light-btn);
    }

/**=====================
    1.1 Reset CSS start
==========================**/

.light-background {
    background-color: var(--light-bg);
}

.icon-arrow-down.icon-rotate,
.icon-arrow-up.icon-rotate {
    transform: rotate(-45deg);
    display: inline-block;
}

/*====== Padding css starts ======*/
.p-0 {
    padding: 0px;
}

.p-5 {
    padding: 5px;
}

.p-10 {
    padding: 10px;
}

.p-15 {
    padding: 15px;
}

.p-20 {
    padding: 20px;
}

.p-25 {
    padding: 25px;
}

.p-30 {
    padding: 30px;
}

.p-35 {
    padding: 35px;
}

.p-40 {
    padding: 40px;
}

.p-45 {
    padding: 45px;
}

.p-50 {
    padding: 50px;
}

/*====== Padding css ends ======*/
/*====== Padding-left css starts ======*/
.p-l-0 {
    padding-left: 0px;
}

.p-l-5 {
    padding-left: 5px;
}

.p-l-10 {
    padding-left: 10px;
}

.p-l-15 {
    padding-left: 15px;
}

.p-l-20 {
    padding-left: 20px;
}

.p-l-25 {
    padding-left: 25px;
}

.p-l-30 {
    padding-left: 30px;
}

.p-l-35 {
    padding-left: 35px;
}

.p-l-40 {
    padding-left: 40px;
}

.p-l-45 {
    padding-left: 45px;
}

.p-l-50 {
    padding-left: 50px;
}

/*====== Padding-left css ends ======*/
/*====== Padding-top css starts ======*/
.p-t-0 {
    padding-top: 0px !important;
}

.p-t-5 {
    padding-top: 5px !important;
}

.p-t-10 {
    padding-top: 10px !important;
}

.p-t-15 {
    padding-top: 15px !important;
}

.p-t-20 {
    padding-top: 20px !important;
}

.p-t-25 {
    padding-top: 25px !important;
}

.p-t-30 {
    padding-top: 30px !important;
}

.p-t-35 {
    padding-top: 35px !important;
}

.p-t-40 {
    padding-top: 40px !important;
}

.p-t-45 {
    padding-top: 45px !important;
}

.p-t-50 {
    padding-top: 50px !important;
}

/*====== Padding-top css ends ======*/
/*====== Padding-bottom css starts ======*/
.p-b-0 {
    padding-bottom: 0px !important;
}

.p-b-5 {
    padding-bottom: 5px !important;
}

.p-b-10 {
    padding-bottom: 10px !important;
}

.p-b-15 {
    padding-bottom: 15px !important;
}

.p-b-20 {
    padding-bottom: 20px !important;
}

.p-b-25 {
    padding-bottom: 25px !important;
}

.p-b-30 {
    padding-bottom: 30px !important;
}

.p-b-35 {
    padding-bottom: 35px !important;
}

.p-b-40 {
    padding-bottom: 40px !important;
}

.p-b-45 {
    padding-bottom: 45px !important;
}

.p-b-50 {
    padding-bottom: 50px !important;
}

/*====== Padding-bottom css ends ======*/
/*====== Padding-right css starts ======*/
.p-r-0 {
    padding-right: 0px;
}

.p-r-5 {
    padding-right: 5px;
}

.p-r-10 {
    padding-right: 10px;
}

.p-r-15 {
    padding-right: 15px;
}

.p-r-20 {
    padding-right: 20px;
}

.p-r-25 {
    padding-right: 25px;
}

.p-r-30 {
    padding-right: 30px;
}

.p-r-35 {
    padding-right: 35px;
}

.p-r-40 {
    padding-right: 40px;
}

.p-r-45 {
    padding-right: 45px;
}

.p-r-50 {
    padding-right: 50px;
}

/*====== Padding-right css ends ======*/
/*====== Margin css starts ======*/
.m-0 {
    margin: 0px !important;
}

.m-5 {
    margin: 5px !important;
}

.m-10 {
    margin: 10px !important;
}

.m-15 {
    margin: 15px !important;
}

.m-20 {
    margin: 20px !important;
}

.m-25 {
    margin: 25px !important;
}

.m-30 {
    margin: 30px !important;
}

.m-35 {
    margin: 35px !important;
}

.m-40 {
    margin: 40px !important;
}

.m-45 {
    margin: 45px !important;
}

.m-50 {
    margin: 50px !important;
}

/*====== Margin css ends ======*/
/*====== Margin-top css starts ======*/
.m-t-0 {
    margin-top: 0px !important;
}

.m-t-5 {
    margin-top: 5px !important;
}

.m-t-10 {
    margin-top: 10px !important;
}

.m-t-15 {
    margin-top: 15px !important;
}

.m-t-20 {
    margin-top: 20px !important;
}

.m-t-25 {
    margin-top: 25px !important;
}

.m-t-30 {
    margin-top: 30px !important;
}

.m-t-35 {
    margin-top: 35px !important;
}

.m-t-40 {
    margin-top: 40px !important;
}

.m-t-45 {
    margin-top: 45px !important;
}

.m-t-50 {
    margin-top: 50px !important;
}

/*====== Margin-top css ends ======*/
/*====== Margin-Bottom css starts ======*/
.m-b-0 {
    margin-bottom: 0px !important;
}

.m-b-5 {
    margin-bottom: 5px !important;
}

.m-b-10 {
    margin-bottom: 10px !important;
}

.m-b-15 {
    margin-bottom: 15px !important;
}

.m-b-20 {
    margin-bottom: 20px !important;
}

.m-b-25 {
    margin-bottom: 25px !important;
}

.m-b-30 {
    margin-bottom: 30px !important;
}

.m-b-35 {
    margin-bottom: 35px !important;
}

.m-b-40 {
    margin-bottom: 40px !important;
}

.m-b-45 {
    margin-bottom: 45px !important;
}

.m-b-50 {
    margin-bottom: 50px !important;
}

/*====== Margin-Bottom css ends ======*/
/*====== Margin-left css starts ======*/
.m-l-0 {
    margin-left: 0px !important;
}

.m-l-5 {
    margin-left: 5px !important;
}

.m-l-10 {
    margin-left: 10px !important;
}

.m-l-15 {
    margin-left: 15px !important;
}

.m-l-20 {
    margin-left: 20px !important;
}

.m-l-25 {
    margin-left: 25px !important;
}

.m-l-30 {
    margin-left: 30px !important;
}

.m-l-35 {
    margin-left: 35px !important;
}

.m-l-40 {
    margin-left: 40px !important;
}

.m-l-45 {
    margin-left: 45px !important;
}

.m-l-50 {
    margin-left: 50px !important;
}

/*====== Margin-left css ends ======*/
/*====== Margin-right css starts ======*/
.m-r-0 {
    margin-right: 0px;
}

.m-r-5 {
    margin-right: 5px;
}

.m-r-10 {
    margin-right: 10px;
}

.m-r-15 {
    margin-right: 15px;
}

.m-r-20 {
    margin-right: 20px;
}

.m-r-25 {
    margin-right: 25px;
}

.m-r-30 {
    margin-right: 30px;
}

.m-r-35 {
    margin-right: 35px;
}

.m-r-40 {
    margin-right: 40px;
}

.m-r-45 {
    margin-right: 45px;
}

.m-r-50 {
    margin-right: 50px;
}

/*====== Margin-right css ends ======*/
/*====== Border-radius css starts ======*/
.b-r-0 {
    border-radius: 0px !important;
}

.b-r-1 {
    border-radius: 1px !important;
}

.b-r-2 {
    border-radius: 2px !important;
}

.b-r-3 {
    border-radius: 3px !important;
}

.b-r-4 {
    border-radius: 4px !important;
}

.b-r-5 {
    border-radius: 5px !important;
}

.b-r-6 {
    border-radius: 6px !important;
}

.b-r-7 {
    border-radius: 7px !important;
}

.b-r-8 {
    border-radius: 8px !important;
}

.b-r-9 {
    border-radius: 9px !important;
}

.b-r-10 {
    border-radius: 10px !important;
}

/*====== Border-radius css ends ======*/
/*====== Font-size css starts ======*/
.f-8 {
    font-size: 8px !important;
}

.f-9 {
    font-size: 9px !important;
}

.f-10 {
    font-size: 10px !important;
}

.f-11 {
    font-size: 11px !important;
}

.f-12 {
    font-size: 12px !important;
}

.f-13 {
    font-size: 13px !important;
}

.f-14 {
    font-size: 14px !important;
}

.f-15 {
    font-size: 15px !important;
}

.f-16 {
    font-size: 16px !important;
}

.f-17 {
    font-size: 17px !important;
}

.f-18 {
    font-size: 18px !important;
}

.f-19 {
    font-size: 19px !important;
}

.f-20 {
    font-size: 20px !important;
}

.f-21 {
    font-size: 21px !important;
}

.f-22 {
    font-size: 22px !important;
}

.f-23 {
    font-size: 23px !important;
}

.f-24 {
    font-size: 24px !important;
}

.f-25 {
    font-size: 25px !important;
}

.f-26 {
    font-size: 26px !important;
}

.f-27 {
    font-size: 27px !important;
}

.f-28 {
    font-size: 28px !important;
}

.f-29 {
    font-size: 29px !important;
}

.f-30 {
    font-size: 30px !important;
}

/*====== Font-size css ends ======*/
/*====== Font-weight css starts ======*/
.f-w-100 {
    font-weight: 100 !important;
}

.f-w-300 {
    font-weight: 300 !important;
}

.f-w-400 {
    font-weight: 400 !important;
}

.f-w-500 {
    font-weight: 500 !important;
}

.f-w-600 {
    font-weight: 600 !important;
}

.f-w-700 {
    font-weight: 700 !important;
}

.f-w-900 {
    font-weight: 900 !important;
}

/*====== Font-weight css ends ======*/

/*====== Text-Decoration css starts ======*/
.text-overline {
    text-decoration: overline;
}

.text-line-through {
    text-decoration: line-through;
}

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

.text-dashed {
    text-decoration: dashed;
}

.text-dotted {
    text-decoration: dotted;
}

.text-initial {
    text-decoration: initial;
}

.text-none {
    text-decoration: none;
}

.text-solid {
    text-decoration: solid;
}

.text-wavy {
    text-decoration: wavy;
}

.text-inherit {
    text-decoration: inherit;
}

.text-double {
    text-decoration: double;
}

/*====== Text-Decoration css ends ======*/
/*====== Vertical-Align css starts ======*/
.baseline {
    vertical-align: baseline;
}

.sub {
    vertical-align: sub;
}

.super {
    vertical-align: super;
}

.top {
    vertical-align: top;
}

.text-top {
    vertical-align: text-top;
}

.middle {
    vertical-align: middle;
}

.bottom {
    vertical-align: bottom;
}

.text-bottom {
    vertical-align: text-bottom;
}

.initial {
    vertical-align: initial;
}

.inherit {
    vertical-align: inherit;
}

/*====== Vertical-Align css ends ======*/
/*====== Position css starts ======*/
.p-static {
    position: static;
}

.p-absolute {
    position: absolute;
}

.p-fixed {
    position: fixed;
}

.p-relative {
    position: relative;
}

.p-initial {
    position: initial;
}

.p-inherit {
    position: inherit;
}

/*====== Position css ends ======*/

/*======= Text css starts ===========*/
.font-primary {
    color: #7366FF !important;
}

.font-secondary {
    color: #FF3364 !important;
}

.font-success {
    color: #54BA4A !important;
}

.font-danger {
    color: #FC4438 !important;
}

.font-info {
    color: #16C7F9 !important;
}

.font-light {
    color: #f4f4f4 !important;
}

.font-dark {
    color: #2c323f !important;
}

.font-warning {
    color: #FFAA05 !important;
}

.font-primary {
    color: var(--theme-default) !important;
}

.font-secondary {
    color: var(--theme-secondary) !important;
}

/*======= Text css ends ===========*/




/*======= Font-color css starts  ======= */

.txt-secondary {
    color: #FF3364 !important;
}

.txt-success {
    color: #54BA4A !important;
}

.txt-danger {
    color: #F34040 !important;
}

.txt-info {
    color: #16C7F9 !important;
}

.txt-light {
    color: #f4f4f4 !important;
}

.txt-dark {
    color: #1E2432 !important;
}

.txt-black {
    color: #000 !important;
}

.txt-warning {
    color: #F3A515 !important;
}

.txt-orange {
    color: #DC6803 !important;
}

.txt-google-plus {
    color: #c64e40 !important;
}

.txt-twitter {
    color: #6fa2d8 !important;
}

.txt-linkedin {
    color: #0077B5 !important;
}

.txt-fb {
    color: #50598e !important;
}

.txt-primary {
    color: var(--theme-default) !important;
}

.txt-secondary {
    color: var(--theme-secondary) !important;
}

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

.txt-light-success {
    color: #ddf7e6;
}

/*======= Font-color css end  ======= */

/*======= Width css start  ======= */

.w-10 {
    width: 10% !important;
}

.w-20 {
    width: 20% !important;
}

.w-30 {
    width: 30% !important;
}

.w-40 {
    width: 40% !important;
}

.w-50 {
    width: 50% !important;
}

.w-60 {
    width: 60% !important;
}

.w-70 {
    width: 70% !important;
}

.w-80 {
    width: 80% !important;
}

.w-90 {
    width: 90% !important;
}
/*======= Width css end  ======= */

/*======= Button-color css starts  ======= */
@keyframes push {
    50% {
        transform: scale(0.95);
    }

    100% {
        transform: scale(1);
    }
}

.btn-primary.disabled, .btn-primary:disabled {
    background-color: #f5f5f5 !important;
    border-color: #fafafa !important;
    color: #95a1b1;
}

.btn-primary:focus {
    box-shadow: 0 0 0 0.2rem white;
}

.btn-danger {
    background-color: #FC4438 !important;
    border-color: #FC4438 !important;
    -webkit-tap-highlight-color: transparent;
    transform: translateZ(0);
}

    .btn-danger.disabled, .btn-danger:disabled {
        background-color: #FC4438 !important;
        border-color: #FC4438 !important;
    }

    .btn-danger:focus {
        box-shadow: 0 0 0 0.2rem #fed2cf;
    }

.btn-outline {
    background-color: #fff !important;
    border-color: #d5d9e1 !important;
    -webkit-tap-highlight-color: transparent;
    color: #1E2432;
    font-weight: 500;
    box-shadow: 0px 1px 2px 0px #1018280D;
    color: #666D80;
}

.btn-light.disabled, .btn-light:disabled {
    background-color: #f4f4f4 !important;
    border-color: #f4f4f4 !important;
    color: #95a1b1;
}

.btn-light:focus {
    box-shadow: 0 0 0 0.2rem white;
}

.btn-light {
    background-color: #fff !important;
    border-color: #05A6F0 !important;
    color: #05A6F0;
    font-weight: 500;
    box-shadow: 0px 1px 2px 0px #1018280D;
}

    .btn-light:hover {
        background-color: rgba(115, 102, 255, 0.1) !important;
        border-color: rgba(115, 102, 255, 0.1) !important;
    }

.btn-primary {
    background-color: var(--theme-default) !important;
    border-color: var(--theme-default) !important;
    box-shadow: 0px 1px 2px 0px #1018280D;
}

.btn-hover-effect:hover {
    animation: push 0.5s linear 1;
}

.btn-transparent {
    background-color: #ffffff00 !important;
    border-color: transparent !important;
    color: #6B7C94;
    font-weight: 500;
    padding: 0.25rem !important;
}

.btn-light-blue {
    background-color: #CDEDFC33 !important;
    border-color: #ACE1FA !important;
    color: #05A6F0;
    font-weight: 500;
}

.btn-outline-danger {
    font-weight: 500;
}

/*======= Button-color css end  ======= */


/**********************************
    Grid css start  
***********************************/
table {
    border-collapse: separate;
    border-spacing: 0;
    min-width: 100%;
    margin-bottom: 1rem;
    font-family: 'Montserrat';
}

    table tbody tr, table tfoot tr {
        vertical-align: middle;
        background: #fff;
    }

    table tr th {
        padding: 8px;
        border-bottom: 1px solid #E2E8F0 !important;
        font-weight: 500;
        font-size: 12px;
    }

    table tr td {
        padding: 6px;
        border-bottom: 1px solid #E2E8F0 !important;
        font-weight: 500;
        font-size: 12px;
    }

    table tr td {
        border-right: 1px solid #E2E8F0 !important;
        color: #1E2432;
    }

        table tr th:first-child,
        table tr td:first-child {
            border-left: 1px solid #E2E8F0;
        }

    table tr th {
        background: #dce6f0;
        border-top: 1px solid #E2E8F0 !important;
        text-align: left;
        color: #475569;
        border-left: 0;
        font-weight: 600;
    }

    /* top-left border-radius */
    table tr:first-child th:first-child {
        border-top-left-radius: 6px;
        border-bottom: 1px solid #E2E8F0;
    }

    /* top-right border-radius */
    table tr:first-child th:last-child {
        border-top-right-radius: 6px;
        border-bottom: 1px solid #E2E8F0;
        border-right: 1px solid #E2E8F0;
    }

    /* bottom-left border-radius */
    table tr:last-child td:first-child {
        border-bottom-left-radius: 6px;
        border-bottom: 1px solid #E2E8F0;
    }

    /* bottom-right border-radius */
    table tr:last-child td:last-child {
        border-bottom-right-radius: 6px;
        border-bottom: 1px solid #E2E8F0;
    }

    table tr th:first-child, table tr td:first-child {
        padding-left: 1rem;
    }

    table tr th:last-child, table tr td:last-child {
        padding-right: 1rem;
    }

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgb(248, 247, 255);
    --bs-table-accent-bg: unset;
}

thead.table-header-fixed {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background: #e9f8ff;
    z-index: 2;
    font-weight: 700;
}

.hr_table thead.thead_fixed tr td {
    background-color: #fff;
}

.table-tr-fixed {
    position: -webkit-sticky;
    position: sticky;
    top: 2rem;
    background: #e9f8ff;
    z-index: 1;
}

.table-th-r-fixed {
    position: -webkit-sticky;
    position: sticky;
    right: 0;
    background: #dce6f0;
    z-index: 1;
}

.thead_fixed {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 2;
    background: #dce6f0;
}

.bulk_thead_fixed {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 7;
}

.t_foot_fixed {
    position: -webkit-sticky;
    position: sticky;
    bottom: -1px;
    z-index: 2;
}

.table-td-r-fixed {
    position: -webkit-sticky;
    position: sticky;
    right: 0;
    background: #fff;
    z-index: 1;
}

.table-th-l-fixed {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    background: #dce6f0;
    z-index: 3;
    border-right: 1px solid #e2e8f0ad;
}

.table-td-l-fixed {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 1;
}

.ME_sticky_right.actions {
    position: -webkit-sticky;
    position: sticky;
    right: -1px;
    background: #fff;
    border-left: 1px solid #e2e8f0ad;
}

.ME_sticky_right.status {
    position: -webkit-sticky;
    position: sticky;
    right: 72px;
    background: #fff;
    border-left: 1px solid #e2e8f0ad;
}

.reports_sticky_left.e_code {
    position: -webkit-sticky;
    position: sticky;
    left: 122px;
    background: #dce6f0;
}

.reports_sticky_left.employee {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    background: #dce6f0;
}

.border-end-th {
    border-right: 1px solid #E2E8F0;
}

.bg-fixed-header {
    background: #dce6f0 !important;
}

.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
    color: #2F2F3B !important;
}

table.table-hover > tbody > tr:hover {
    background: #fff !important;
}

table.hr_table thead tr th, .hr_table table tbody tr td {
    padding: 8px 10px;
}

table.hr_table thead tr th {
    font-size: 12px;
    color: #1E2432;
}

table.hr_table tr th:first-child, table.hr_table tr td:first-child {
    padding-left: 1rem;
}

table.hr_table tr th:last-child, table.hr_table tr td:last-child {
    padding-right: 1rem;
}

table tfoot.t-footer {
    border-bottom: 2px double rgba(153, 153, 153, 0.3);
    border-top: 2px double rgba(153, 153, 153, 0.3);
    font-weight: 500;
    position: sticky;
    bottom: -1px;
}

    table tfoot.t-footer tr {
        background-color: #f4f7f9;
    }

table.sales_tables tr th {
    font-size: 11px !important;
    padding: 6px 4px;
}

table.sales_tables tr td {
    font-size: 11px !important;
    padding: 4px;
}

.verticaltext_content {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    font-weight: bold;
    color: #fff;
}

table.consolidated-table tr th {
    border: none;
}

table.consolidated-table tr td {
    border-width: 0 0px;
}

table.consolidated-table tr th, table.consolidated-table tr td {
    font-size: 12px !important;
    padding: 0.5rem;
}

table.consolidated-table tr.grey-bg {
    background-color: #edf0f2;
    border-bottom: 2px double rgba(153, 153, 153, 0.3);
}

table tr.td-footer {
    background-color: #f4f7f9;
    border-bottom: 2px double rgba(153, 153, 153, 0.3);
    border-top: 2px double rgba(153, 153, 153, 0.3);
    position: sticky;
    bottom: -1px;
}

    table tr.td-footer td {
        font-weight: 700;
    }

tr.f-w-700 td {
    font-weight: 700;
}

table tr.t-footer {
    background-color: #f4f7f9;
    border-bottom: 2px double rgba(153, 153, 153, 0.3);
    border-top: 2px double rgba(153, 153, 153, 0.3);
    position: sticky;
    bottom: -1px;
}

    table tr.t-footer td {
        font-weight: 700 !important;
    }

/**********************************
    Grid css end  
***********************************/
/*======= Background-color css starts  ======= */
.bg-primary {
    background-color: #7366FF !important;
    color: #fff;
}

.bg-light-primary {
    background-color: #e9f8ff !important;
    /*color: #fff;*/
}

.bg-secondary {
    background-color: #FF3364 !important;
    color: #fff;
}

.bg-light-secondary {
    background-color: rgba(255, 51, 100, 0.1) !important;
    color: #fff;
}

.bg-success {
    background-color: #54BA4A !important;
    color: #fff;
}

.bg-light-success {
    background-color: rgba(84, 186, 74, 0.1) !important;
    /*color: #fff;*/
}

.bg-danger {
    background-color: #FC4438 !important;
    color: #fff;
}

.bg-light-danger {
    background-color: rgba(252, 68, 56, 0.1) !important;
    color: #fff;
}

.bg-info {
    background-color: #16C7F9 !important;
    color: #fff;
}

.bg-light-info {
    background-color: rgba(22, 199, 249, 0.1) !important;
    color: #fff;
}

.bg-light {
    background-color: #f4f4f4 !important;
    /*color: #fff;*/
}

.bg-light-light {
    background-color: rgba(244, 244, 244, 0.1) !important;
    color: #fff;
}

.bg-dark {
    background-color: #2c323f !important;
    color: #fff;
}

.bg-light-dark {
    background-color: rgba(44, 50, 63, 0.1) !important;
    color: #fff;
}

.bg-warning {
    background-color: #FFAA05 !important;
    color: #fff;
}

.bg-light-warning {
    background-color: rgba(255, 170, 5, 0.1) !important;
}

.bg-primary {
    background-color: var(--theme-default) !important;
}

.bg-secondary {
    background-color: var(--theme-secondary) !important;
}

.bg-gray {
    background-color: var(--text-gray);
}

.bg_dd_table {
    background-color: #f8fbff;
}

.balance_bg {
    background-color: #f5f6f8;
}

.bg-mud {
    background: #c1dee8 !important;
}

.bg-mud-dark {
    background: #e2edec !important;
}

.bg-light-green {
    background: #d5e7d9 !important;
    font-weight: 600;
}

.bg-light-purple {
    background-color: #f1efff !important;
    color: #6956ee;
}

.balance_border {
    border: 1px solid #bfc8d4 !important;
    font-size: 12px;
}

.bg-total-2 {
    background: #d5e1fd !important;
    font-weight: 600;
}

/*======= Background-color css end  ======= */


/*======= All-Borders-color css starts  ======= */
.border {
    border: 1px solid #E2E8F0 !important;
}

.b-primary {
    border: 1px solid #7366FF !important;
}

.b-t-primary {
    border-top: 1px solid #7366FF !important;
}

.border-t-primary {
    border-top: 1px solid #7366FF !important;
}

.b-b-primary {
    border-bottom: 1px solid #7366FF !important;
}

.border-b-primary {
    border-bottom: 1px solid #7366FF !important;
}

.b-l-primary {
    border-left: 1px solid #7366FF !important;
}

.border-l-primary {
    border-left: 1px solid #7366FF !important;
}

.b-r-primary {
    border-right: 1px solid #7366FF !important;
}

.border-r-primary {
    border-right: 1px solid #7366FF !important;
}

.b-secondary {
    border: 1px solid #FF3364 !important;
}

.b-t-secondary {
    border-top: 1px solid #FF3364 !important;
}

.border-t-secondary {
    border-top: 1px solid #FF3364 !important;
}

.border-l-blue {
    border-left: 5px solid #05a6f0 !important;
}

.b-b-secondary {
    border-bottom: 1px solid #FF3364 !important;
}

.border-b-secondary {
    border-bottom: 1px solid #FF3364 !important;
}

.b-l-secondary {
    border-left: 1px solid #FF3364 !important;
}

.border-l-secondary {
    border-left: 1px solid #FF3364 !important;
}

.b-r-secondary {
    border-right: 1px solid #FF3364 !important;
}

.border-r-secondary {
    border-right: 1px solid #FF3364 !important;
}

.b-success {
    border: 1px solid #54BA4A !important;
}

.b-t-success {
    border-top: 1px solid #54BA4A !important;
}

.border-t-success {
    border-top: 1px solid #54BA4A !important;
}

.border-t-grey {
    border-top: 2px solid #a2d7ff !important;
}

.b-b-success {
    border-bottom: 1px solid #54BA4A !important;
}

.border-b-success {
    border-bottom: 1px solid #54BA4A !important;
}

.b-l-success {
    border-left: 1px solid #54BA4A !important;
}

.border-l-success {
    border-left: 1px solid #54BA4A !important;
}

.b-r-success {
    border-right: 1px solid #54BA4A !important;
}

.border-r-success {
    border-right: 1px solid #54BA4A !important;
}

.b-danger {
    border: 1px solid #FC4438 !important;
}

.b-t-danger {
    border-top: 1px solid #FC4438 !important;
}

.border-t-danger {
    border-top: 1px solid #FC4438 !important;
}

.b-b-danger {
    border-bottom: 1px solid #FC4438 !important;
}

.border-b-danger {
    border-bottom: 1px solid #FC4438 !important;
}

.b-l-danger {
    border-left: 1px solid #FC4438 !important;
}

.border-l-danger {
    border-left: 1px solid #FC4438 !important;
}

.b-r-danger {
    border-right: 1px solid #FC4438 !important;
}

.border-r-danger {
    border-right: 1px solid #FC4438 !important;
}

.b-info {
    border: 1px solid #16C7F9 !important;
}

.b-t-info {
    border-top: 1px solid #16C7F9 !important;
}

.border-t-info {
    border-top: 1px solid #16C7F9 !important;
}

.b-b-info {
    border-bottom: 1px solid #16C7F9 !important;
}

.border-b-info {
    border-bottom: 1px solid #16C7F9 !important;
}

.b-l-info {
    border-left: 1px solid #16C7F9 !important;
}

.border-l-info {
    border-left: 1px solid #16C7F9 !important;
}

.b-r-info {
    border-right: 1px solid #16C7F9 !important;
}

.border-r-info {
    border-right: 1px solid #16C7F9 !important;
}

.b-light {
    border: 1px solid #f4f4f4 !important;
}

.b-t-light {
    border-top: 1px solid #f4f4f4 !important;
}

.border-t-light {
    border-top: 1px solid #f4f4f4 !important;
}

.b-b-light {
    border-bottom: 1px solid #f4f4f4 !important;
}

.border-b-light {
    border-bottom: 1px solid #f4f4f4 !important;
}

.b-l-light {
    border-left: 1px solid #f4f4f4 !important;
}

.border-l-light {
    border-left: 1px solid #f4f4f4 !important;
}

.b-r-light {
    border-right: 1px solid #f4f4f4 !important;
}

.border-r-light {
    border-right: 1px solid #f4f4f4 !important;
}

.b-dark {
    border: 1px solid #2c323f !important;
}

.b-t-dark {
    border-top: 1px solid #2c323f !important;
}

.border-t-dark {
    border-top: 1px solid #2c323f !important;
}

.b-b-dark {
    border-bottom: 1px solid #2c323f !important;
}

.border-b-dark {
    border-bottom: 1px solid #2c323f !important;
}

.b-l-dark {
    border-left: 1px solid #2c323f !important;
}

.border-l-dark {
    border-left: 1px solid #2c323f !important;
}

.b-r-dark {
    border-right: 1px solid #2c323f !important;
}

.border-r-dark {
    border-right: 1px solid #2c323f !important;
}

.b-warning {
    border: 1px solid #FFAA05 !important;
}

.b-t-warning {
    border-top: 1px solid #FFAA05 !important;
}

.border-t-warning {
    border-top: 1px solid #FFAA05 !important;
}

.b-b-warning {
    border-bottom: 1px solid #FFAA05 !important;
}

.border-b-warning {
    border-bottom: 1px solid #FFAA05 !important;
}

.b-l-warning {
    border-left: 1px solid #FFAA05 !important;
}

.border-l-warning {
    border-left: 1px solid #FFAA05 !important;
}

.b-r-warning {
    border-right: 1px solid #FFAA05 !important;
}

.border-r-warning {
    border-right: 1px solid #FFAA05 !important;
}

tbody tr td:nth-last-child(-n+2).border-bottom-acknowledged {
    border-bottom: 1px solid #E2E8F0 !important;
}

tbody tr:last-child td.border-bottom-yetacknowledge {
    border-bottom: 1px solid #E2E8F0 !important;
}

.exception_border {
    border-bottom: 1px solid #f34040 !important;
    transition: all 0.5s;
}
/*======= All-Borders-color css ends  ======= */

.opacity-0 {
    opacity: 0;
}

/**====== list style css Start ======**/
.list-circle {
    list-style: circle;
}

/**====== list style css end ======**/

/**====== Modal style css Start ======**/
.theme-close {
    opacity: 1;
    height: 40px;
    width: 40px;
    position: absolute;
    font-weight: 400;
    z-index: 1;
    right: 0;
    background-color: #fff !important;
    border-radius: 5px;
}

.btn-close {
    padding: 0.25em 0.25em;
    color: #1E2432;
    opacity: 1;
    font-size: 12px;
}

.modal-content {
    border: none;
}

.modal-title {
    font-size: 16px;
    font-weight: 600;
    color: #1E2432;
}

.modal-header {
    border-bottom: 1px solid #E2E8F0;
}

.modal-footer {
    flex-wrap: wrap;
}

button:focus {
    /*outline: none !important;*/
}

.modal-fullscreen .modal-header .btn-close {
    margin: -0.5rem 0.5rem -0.5rem auto;
}

/**====== Modal style css end ======**/

.apexcharts-canvas .apexcharts-tooltip .apexcharts-tooltip-marker {
    width: 10px;
    height: 10px;
}

.apexcharts-canvas .apexcharts-tooltip .apexcharts-tooltip-goals-group,
.apexcharts-canvas .apexcharts-tooltip .apexcharts-tooltip-z-group {
    display: none;
}

.apexcharts-series.apexcharts-heatmap-series rect {
    stroke: #fff;
    stroke-width: 0.5px;
}


/**=====================
    1.1 Reset CSS Ends
==========================**/

/**=====================
    1.2 Typography CSS start
==========================**/
body {
    font-size: 12px;
    overflow-x: hidden;
    font-family: Montserrat, sans-serif;
    color: #1E2432;
    font-weight: 500;
    /*padding-top: 60px;
    padding-bottom: 50px;*/
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-weight: 600;
}

ul {
    padding-left: 0px;
    list-style-type: none;
    margin-bottom: 0;
}

a {
    text-decoration: none;
    color: var(--theme-default);
    /*transition: 0.5s all;*/
}

    a:hover {
        color: var(--theme-default);
        transition: all 0.5s all;
    }

*.btn:focus {
    box-shadow: none !important;
}

p {
    font-size: 12px;
    color: #94A3B8;
}

hr {
    margin: 1rem 0;
    color: inherit;
    background-color: #E2E8F0;
    border: 0;
    opacity: 1;
}

code {
    color: var(--theme-default) !important;
    border-radius: 2px;
    font-family: 'Montserrat';
}

span {
    display: inline-block;
}

.media {
    display: flex;
    align-items: flex-start;
}

    .media .media-body {
        flex: 1;
    }

blockquote {
    border-left: 4px solid #AFD584;
    padding: 10px;
}

.figure.text-center blockquote {
    border: none !important;
}

.figure.text-end blockquote {
    border-left: none !important;
    border-right: 4px solid #7366FF;
}

.row > div {
    position: relative;
}

:focus {
    outline-color: var(--theme-default);
}

.modal .modal-body .card {
    box-shadow: none !important;
}

.modal-dialog .modal-content .modal-body p a {
    margin-right: 0;
}

.modal-body.scrollbar-wrapper {
    max-height: 78vh;
}

.alert-theme span + span + span {
    background-color: #fff;
    color: var(--theme-default);
    border-radius: 4px;
    box-shadow: 0 2px 14px -3px rgba(0, 0, 0, 0.2);
}

.alert-theme .close {
    color: var(--theme-default);
}

.alert-theme i {
    padding: 20px;
    padding-right: 0 !important;
    margin-right: 20px !important;
}

.alert-theme .progress {
    margin-top: -2px !important;
    height: 2px;
    width: 100%;
}

    .alert-theme .progress .progress-bar {
        background-color: var(--theme-default);
    }

.alert-copy {
    border: 1px solid var(--theme-default);
    line-height: 1;
    display: inline-block;
    width: 300px;
    color: #fff;
    background-color: var(--theme-default);
}

    .alert-copy .close {
        box-shadow: none;
        color: #fff;
        line-height: 1.4;
        font-weight: 100;
        top: -15px;
    }

        .alert-copy .close:focus {
            outline: none;
        }

.form-inline .form-group {
    display: flex;
}

.form-group {
    margin-bottom: 1rem;
}

.input-group-text i {
    line-height: 1.5;
}

/* ===== Scrollbar CSS ===== */
/* Firefox */
/** {
    scrollbar-width: auto;
    scrollbar-color: #e9f8ff #ffffff;
}*/

/**====== custom scrollbar css start ======**/
.custom-scrollbar::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px #ecf3fa;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(68, 102, 242, 0.15);
}

.custom-scrollbar {
    max-height: 280px;
    overflow-y: auto;
    background: #fff;
    width: 100%;
}

ul.custom-scrollbar .dropdown-menu::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

ul.custom-scrollbar .dropdown-menu::-webkit-scrollbar-track {
    background: #ccc;
    border-radius: 10px;
}

ul.custom-scrollbar .dropdown-menu::-webkit-scrollbar-thumb {
    background: #999;
    border-radius: 10px;
}

/**====== Custom scrollbar css end ======**/


/**=====================
    2.1 According CSS start
==========================**/
.accordion-button:not(.collapsed) {
    background-color: unset;
    box-shadow: none;
}

    .accordion-button:not(.collapsed)::after {
        /*background-image: unset;*/
    }

.accordion-button::after {
    /*background-image: unset;*/
}

.accordion-button:focus {
    box-shadow: none;
    z-index: auto;
}

.accordion-button.accordion-light-primary:not(.collapsed) {
    border-bottom: 1px solid #d7dbe3;
}

.accordion-button.accordion-light-primary:active, .accordion-button.accordion-light-primary.active {
    border-bottom: 1px solid #d7dbe3;
    color: #000;
}

.multi-collapse.show .collapse-wrapper.accordion-light-primary {
    background-color: #E0DDFF !important;
}

.accordion-button.accordion-light-secondary:not(.collapsed) {
    background-color: #FFE0E8;
}

.accordion-button.accordion-light-secondary:active, .accordion-button.accordion-light-secondary.active {
    background-color: #FFE0E8;
    color: #000;
}

.multi-collapse.show .collapse-wrapper.accordion-light-secondary {
    background-color: #FFE0E8 !important;
}

.accordion-button.accordion-light-success:not(.collapsed) {
    background-color: #D6EED4;
}

.accordion-button.accordion-light-success:active, .accordion-button.accordion-light-success.active {
    background-color: #D6EED4;
    color: #000;
}

.multi-collapse.show .collapse-wrapper.accordion-light-success {
    background-color: #D6EED4 !important;
}

.accordion-button.accordion-light-warning:not(.collapsed) {
    background-color: #FFF0D2;
}

.accordion-button.accordion-light-warning:active, .accordion-button.accordion-light-warning.active {
    background-color: #FFF0D2;
    color: #000;
}

.multi-collapse.show .collapse-wrapper.accordion-light-warning {
    background-color: #FFF0D2 !important;
}

.accordion-button.accordion-light-info:not(.collapsed) {
    background-color: #D5F5FE;
}

.accordion-button.accordion-light-info:active, .accordion-button.accordion-light-info.active {
    background-color: #D5F5FE;
    color: #000;
}

.multi-collapse.show .collapse-wrapper.accordion-light-info {
    background-color: #D5F5FE !important;
}

.accordion-button.accordion-light-light:not(.collapsed) {
    background-color: #F9F9FB;
}

.accordion-button.accordion-light-light:active, .accordion-button.accordion-light-light.active {
    background-color: #F9F9FB;
    color: #000;
}

.multi-collapse.show .collapse-wrapper.accordion-light-light {
    background-color: #F9F9FB !important;
}

.accordion-button.accordion-light-danger:not(.collapsed) {
    background-color: #FEDDDB;
}

.accordion-button.accordion-light-danger:active, .accordion-button.accordion-light-danger.active {
    background-color: #FEDDDB;
    color: #000;
}

.multi-collapse.show .collapse-wrapper.accordion-light-danger {
    background-color: #FEDDDB !important;
}

.accordion-button.accordion-light-dark:not(.collapsed) {
    background-color: #EAEBF2;
}

.accordion-button.accordion-light-dark:active, .accordion-button.accordion-light-dark.active {
    background-color: #EAEBF2;
    color: #000;
}

.multi-collapse.show .collapse-wrapper.accordion-light-dark {
    background-color: #EAEBF2 !important;
}

.accordion-item .accordion-button .svg-wrapper {
    width: 18px;
    height: 18px;
}

.accordion-wrapper:active {
    /*border: 1px solid #7366FF;
    border-top: 1px solid #7366FF !important;*/
}

.accordion-border .accordion-item {
    border: 0;
}

.icons-accordion .accordion-item:last-child .accordion-body {
    padding-bottom: 0 !important;
}

.accordions-content li {
    color: #2c323f;
}

.collapse-accordion .btn-dark.show {
    border-radius: 15px;
}

/**=====================
    2.1 According CSS Ends
==========================**/
/**=====================
     2.2 Alert CSS start
==========================**/
.notify-alert .close {
    background: unset;
    border: none;
    font-size: 25px;
}

.alert {
    border-radius: 6px;
    padding: 5px 15px;
}

    .alert svg {
        vertical-align: middle;
    }

    .alert .progress {
        margin-top: 15px;
    }

    .alert [data-notify=icon] {
        margin-right: 10px;
        line-height: 20px;
        position: absolute;
    }

    .alert [data-notify=message] {
        display: inline-block;
        width: 100%;
    }

    .alert i {
        margin-right: 5px;
    }

    .alert p {
        margin-bottom: 0;
    }

    .alert .close {
        opacity: 1;
    }

        .alert .close span {
            font-size: 24px;
            font-weight: 400;
            display: inline-block;
            border-radius: 3px;
            text-shadow: none;
            padding: 0 5px;
            padding-right: 0;
        }

.alert-dismissible {
    padding-right: 2.5rem;
}

[dir=rtl] .alert-dismissible {
    padding-right: 15px;
    padding-left: 2.5rem;
}

.alert-dismissible .close {
    padding: 10px 1.25rem;
    top: 4px;
    padding-right: 13px;
    opacity: 0.5;
    transition: all 0.3s ease;
}

    .alert-dismissible .close:hover {
        transition: all 0.3s ease;
        opacity: 1;
        color: inherit;
    }

.card-body button:focus {
    /*outline: none;*/
}

.card-body .alert:last-child {
    margin-bottom: 0;
}

.card-body .alert svg {
    width: 14px;
    height: 14px;
    margin-right: 4px;
    position: absolute;
    top: 18px;
}

    .card-body .alert svg ~ p {
        padding-left: 20px;
    }

strong {
    display: inline;
}

    strong ~ p {
        display: inline-block;
    }

.alert-primary {
    background-color: rgba(115, 102, 255, 0.8);
    border-color: rgba(115, 102, 255, 0.9);
    color: #fff;
}

    .alert-primary .progress {
        height: 5px;
        background-color: #6e61ff;
        border-radius: 0;
    }

    .alert-primary .progress-bar {
        background-color: white;
    }

    .alert-primary .btn-close {
        filter: brightness(1) invert(1);
    }

    .alert-primary .alert-link {
        color: #7366FF;
    }

    .alert-primary hr {
        border-top-color: #7366FF;
    }

.border-primary {
    border-color: #7366FF !important;
}

.income-wrapper ul li .income-dot.dot-primary {
    background-color: #7366FF;
}

.touchspin-wrapper .btn-touchspin.touchspin-primary {
    background-color: #7366FF;
    border: 1px solid #7366FF;
    color: #fff;
}

.touchspin-wrapper .btn-touchspin.spin-border-primary {
    background-color: unset;
    border: 1px solid #7366FF;
    color: #7366FF;
}

.touchspin-wrapper input[type=number].spin-outline-primary {
    outline: 1px solid #7366FF;
    border: none;
    border-radius: 3px;
}

.pre-post-touchspin .btn-touchspin.touchspin-primary {
    background-color: #7366FF;
    border: 1px solid #7366FF;
    color: #fff;
}

.form-switch .form-check-input.switch-primary:checked {
    background-color: #7366FF;
    border-color: #7366FF;
}

.form-check-input:checked {
    background-color: #fff;
    border-color: var(--theme-default);
}

    .form-check-input:checked[type=checkbox] {
        background-image: url('../images/HR/check.svg');
        background-size: 66%;
    }

.payment-second .mega-icons.stroke-primary {
    stroke: #7366FF;
}

.toast-primary {
    color: #7366FF !important;
}

.list-group-horizontal-sm .list-group-item.border-left-primary, .list-group-horizontal-md .list-group-item.border-left-primary, .list-group-horizontal-lg .list-group-item.border-left-primary, .list-group-horizontal-xl .list-group-item.border-left-primary, .list-group-horizontal-xxl .list-group-item.border-left-primary {
    border-left: 4px solid #7366FF;
}

.main-radio-toggle .btn-check.radio-light-primary:focus + .btn {
    box-shadow: 0 0 0 4px rgba(115, 102, 255, 0.55);
}

.fill-radios .radio.radio-primary input[type=radio]:checked + label::before {
    border: 10px solid #7366FF;
}

.fill-radios .radio.radio-primary input[type=radio]:checked + label::after {
    background-color: #7366FF;
}

.list-group .form-check-input:checked[type=checkbox].checkbox-primary,
.list-group [type=radio].checkbox-primary {
    background-color: unset;
    border-color: #7366FF;
    outline: 0;
    background-color: unset;
}

    .list-group .form-check-input:checked[type=checkbox].checkbox-primary:focus, .list-group .form-check-input:checked[type=checkbox].checkbox-primary:active, .list-group .form-check-input:checked[type=checkbox].checkbox-primary.active,
    .list-group [type=radio].checkbox-primary:focus,
    .list-group [type=radio].checkbox-primary:active,
    .list-group [type=radio].checkbox-primary.active {
        border-color: #7366FF;
        outline: 0;
        background-color: #7366FF;
    }

.list-group .alert-primary.light {
    background-color: rgba(115, 102, 255, 0.4);
    border-color: rgba(115, 102, 255, 0.7);
}

.list-group .alert-primary.dark {
    background-color: #7366FF;
    border-color: #7366FF;
    color: #fafafa;
}

    .list-group .alert-primary.dark .alert-link {
        color: #fff;
    }

.list-group .alert-primary.outline,
.list-group .alert-primary.outline-2x {
    background-color: transparent;
    border-color: #7366FF;
    color: #7366FF;
}

    .list-group .alert-primary.outline .btn-close,
    .list-group .alert-primary.outline-2x .btn-close {
        filter: unset;
    }

.list-group .alert-primary.inverse {
    background-color: transparent;
    padding: 13px 20px 13px 65px;
    border-color: #7366FF;
    color: #2F2F3B;
}

    .list-group .alert-primary.inverse:before {
        top: 16px;
        content: "";
        position: absolute;
        left: 54px;
        width: 0;
        height: 0;
        border-left: 7px solid #7366FF;
        border-top: 7px solid transparent;
        border-bottom: 7px solid transparent;
    }

@media (max-width: 576px) {
    .list-group .alert-primary.inverse:before {
        left: 45px;
    }
}

.list-group .alert-primary.inverse i {
    padding: 17px 20px;
    display: inline-block;
    background-color: #7366FF;
    color: #fff;
    border-radius: 3px 0 0 3px;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
}

@media (max-width: 576px) {
    .list-group .alert-primary.inverse i {
        padding: 17px 14px;
    }
}

.list-group .btn-close {
    filter: unset;
    top: -3px;
}

.alert-secondary {
    background-color: rgba(255, 51, 100, 0.8);
    border-color: rgba(255, 51, 100, 0.9);
    color: #fff;
}

    .alert-secondary .progress {
        height: 5px;
        background-color: #ff2e60;
        border-radius: 0;
    }

    .alert-secondary .progress-bar {
        background-color: white;
    }

    .alert-secondary .btn-close {
        filter: brightness(1) invert(1);
    }

    .alert-secondary .alert-link {
        color: #FF3364;
    }

    .alert-secondary hr {
        border-top-color: #FF3364;
    }

.border-secondary {
    border-color: #FF3364 !important;
}

.form-switch .form-check-input.switch-secondary:checked {
    background-color: #FF3364;
    border-color: #FF3364;
}

.main-radio-toggle .btn-check.radio-light-secondary:focus + .btn {
    box-shadow: 0 0 0 4px rgba(255, 51, 100, 0.55);
}

.fill-radios .radio.radio-secondary input[type=radio]:checked + label::before {
    border: 10px solid #FF3364;
}

.fill-radios .radio.radio-secondary input[type=radio]:checked + label::after {
    background-color: #FF3364;
}

.list-group .form-check-input:checked[type=checkbox].checkbox-secondary,
.list-group [type=radio].checkbox-secondary {
    background-color: unset;
    border-color: #FF3364;
    outline: 0;
    background-color: unset;
}

    .list-group .form-check-input:checked[type=checkbox].checkbox-secondary:focus, .list-group .form-check-input:checked[type=checkbox].checkbox-secondary:active, .list-group .form-check-input:checked[type=checkbox].checkbox-secondary.active,
    .list-group [type=radio].checkbox-secondary:focus,
    .list-group [type=radio].checkbox-secondary:active,
    .list-group [type=radio].checkbox-secondary.active {
        border-color: #FF3364;
        outline: 0;
        background-color: #FF3364;
    }

.list-group .alert-secondary.light {
    background-color: rgba(255, 51, 100, 0.4);
    border-color: rgba(255, 51, 100, 0.7);
}

.list-group .alert-secondary.dark {
    background-color: #FF3364;
    border-color: #FF3364;
    color: #fafafa;
}

    .list-group .alert-secondary.dark .alert-link {
        color: #fff;
    }

.list-group .alert-secondary.outline,
.list-group .alert-secondary.outline-2x {
    background-color: transparent;
    border-color: #FF3364;
    color: #FF3364;
}

    .list-group .alert-secondary.outline .btn-close,
    .list-group .alert-secondary.outline-2x .btn-close {
        filter: unset;
    }

.list-group .alert-secondary.inverse {
    background-color: transparent;
    padding: 13px 20px 13px 65px;
    border-color: #FF3364;
    color: #2F2F3B;
}

    .list-group .alert-secondary.inverse:before {
        top: 16px;
        content: "";
        position: absolute;
        left: 54px;
        width: 0;
        height: 0;
        border-left: 7px solid #FF3364;
        border-top: 7px solid transparent;
        border-bottom: 7px solid transparent;
    }

@media (max-width: 576px) {
    .list-group .alert-secondary.inverse:before {
        left: 45px;
    }
}

.list-group .alert-secondary.inverse i {
    padding: 17px 20px;
    display: inline-block;
    background-color: #FF3364;
    color: #fff;
    border-radius: 3px 0 0 3px;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
}

@media (max-width: 576px) {
    .list-group .alert-secondary.inverse i {
        padding: 17px 14px;
    }
}

.list-group .btn-close {
    filter: unset;
    top: -3px;
}

.alert-success {
    background-color: rgba(84, 186, 74, 0.8);
    border-color: rgba(84, 186, 74, 0.9);
    color: #fff;
}

    .alert-success .progress {
        height: 5px;
        background-color: #51b946;
        border-radius: 0;
    }

    .alert-success .progress-bar {
        background-color: white;
    }

    .alert-success .btn-close {
        filter: brightness(1) invert(1);
    }

    .alert-success .alert-link {
        color: #54BA4A;
    }

    .alert-success hr {
        border-top-color: #54BA4A;
    }

.border-success {
    border-color: #54BA4A !important;
}

.form-switch .form-check-input.switch-success:checked {
    background-color: #54BA4A;
    border-color: #54BA4A;
}

.list-group-horizontal-sm .list-group-item.border-left-success, .list-group-horizontal-md .list-group-item.border-left-success, .list-group-horizontal-lg .list-group-item.border-left-success, .list-group-horizontal-xl .list-group-item.border-left-success, .list-group-horizontal-xxl .list-group-item.border-left-success {
    border-left: 4px solid #54BA4A;
}

.main-radio-toggle .btn-check.radio-light-success:focus + .btn {
    box-shadow: 0 0 0 4px rgba(84, 186, 74, 0.55);
}

.fill-radios .radio.radio-success input[type=radio]:checked + label::before {
    border: 10px solid #54BA4A;
}

.fill-radios .radio.radio-success input[type=radio]:checked + label::after {
    background-color: #54BA4A;
}

.list-group .form-check-input:checked[type=checkbox].checkbox-success,
.list-group [type=radio].checkbox-success {
    background-color: unset;
    border-color: #54BA4A;
    outline: 0;
    background-color: unset;
}

    .list-group .form-check-input:checked[type=checkbox].checkbox-success:focus, .list-group .form-check-input:checked[type=checkbox].checkbox-success:active, .list-group .form-check-input:checked[type=checkbox].checkbox-success.active,
    .list-group [type=radio].checkbox-success:focus,
    .list-group [type=radio].checkbox-success:active,
    .list-group [type=radio].checkbox-success.active {
        border-color: #54BA4A;
        outline: 0;
        background-color: #54BA4A;
    }

.list-group .alert-success.light {
    background-color: rgba(84, 186, 74, 0.4);
    border-color: rgba(84, 186, 74, 0.7);
}

.list-group .alert-success.dark {
    background-color: #54BA4A;
    border-color: #54BA4A;
    color: #fafafa;
}

    .list-group .alert-success.dark .alert-link {
        color: #fff;
    }

.list-group .alert-success.outline,
.list-group .alert-success.outline-2x {
    background-color: transparent;
    border-color: #54BA4A;
    color: #54BA4A;
}

    .list-group .alert-success.outline .btn-close,
    .list-group .alert-success.outline-2x .btn-close {
        filter: unset;
    }

.list-group .alert-success.inverse {
    background-color: transparent;
    padding: 13px 20px 13px 65px;
    border-color: #54BA4A;
    color: #2F2F3B;
}

    .list-group .alert-success.inverse:before {
        top: 16px;
        content: "";
        position: absolute;
        left: 54px;
        width: 0;
        height: 0;
        border-left: 7px solid #54BA4A;
        border-top: 7px solid transparent;
        border-bottom: 7px solid transparent;
    }

@media (max-width: 576px) {
    .list-group .alert-success.inverse:before {
        left: 45px;
    }
}

.list-group .alert-success.inverse i {
    padding: 17px 20px;
    display: inline-block;
    background-color: #54BA4A;
    color: #fff;
    border-radius: 3px 0 0 3px;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
}

@media (max-width: 576px) {
    .list-group .alert-success.inverse i {
        padding: 17px 14px;
    }
}

.list-group .btn-close {
    filter: unset;
    top: -3px;
}

.alert-danger {
    background-color: rgba(252, 68, 56, 0.8);
    border-color: rgba(252, 68, 56, 0.9);
    color: #fff;
}

    .alert-danger .progress {
        height: 5px;
        background-color: #fc3f33;
        border-radius: 0;
    }

    .alert-danger .progress-bar {
        background-color: white;
    }

    .alert-danger .btn-close {
        filter: brightness(1) invert(1);
    }

    .alert-danger .alert-link {
        color: #FC4438;
    }

    .alert-danger hr {
        border-top-color: #FC4438;
    }

.border-danger {
    border-color: #FC4438 !important;
}

.form-switch .form-check-input.switch-danger:checked {
    background-color: #FC4438;
    border-color: #FC4438;
}

.list-group-horizontal-sm .list-group-item.border-left-danger, .list-group-horizontal-md .list-group-item.border-left-danger, .list-group-horizontal-lg .list-group-item.border-left-danger, .list-group-horizontal-xl .list-group-item.border-left-danger, .list-group-horizontal-xxl .list-group-item.border-left-danger {
    border-left: 4px solid #FC4438;
}

.main-radio-toggle .btn-check.radio-light-danger:focus + .btn {
    box-shadow: 0 0 0 4px rgba(252, 68, 56, 0.55);
}

.fill-radios .radio.radio-danger input[type=radio]:checked + label::before {
    border: 10px solid #FC4438;
}

.fill-radios .radio.radio-danger input[type=radio]:checked + label::after {
    background-color: #FC4438;
}

.list-group .form-check-input:checked[type=checkbox].checkbox-danger,
.list-group [type=radio].checkbox-danger {
    background-color: unset;
    border-color: #FC4438;
    outline: 0;
    background-color: unset;
}

    .list-group .form-check-input:checked[type=checkbox].checkbox-danger:focus, .list-group .form-check-input:checked[type=checkbox].checkbox-danger:active, .list-group .form-check-input:checked[type=checkbox].checkbox-danger.active,
    .list-group [type=radio].checkbox-danger:focus,
    .list-group [type=radio].checkbox-danger:active,
    .list-group [type=radio].checkbox-danger.active {
        border-color: #FC4438;
        outline: 0;
        background-color: #FC4438;
    }

.list-group .alert-danger.light {
    background-color: rgba(252, 68, 56, 0.4);
    border-color: rgba(252, 68, 56, 0.7);
}

.list-group .alert-danger.dark {
    background-color: #FC4438;
    border-color: #FC4438;
    color: #fafafa;
}

    .list-group .alert-danger.dark .alert-link {
        color: #fff;
    }

.list-group .alert-danger.outline,
.list-group .alert-danger.outline-2x {
    background-color: transparent;
    border-color: #FC4438;
    color: #FC4438;
}

    .list-group .alert-danger.outline .btn-close,
    .list-group .alert-danger.outline-2x .btn-close {
        filter: unset;
    }

.list-group .alert-danger.inverse {
    background-color: transparent;
    padding: 13px 20px 13px 65px;
    border-color: #FC4438;
    color: #2F2F3B;
}

    .list-group .alert-danger.inverse:before {
        top: 16px;
        content: "";
        position: absolute;
        left: 54px;
        width: 0;
        height: 0;
        border-left: 7px solid #FC4438;
        border-top: 7px solid transparent;
        border-bottom: 7px solid transparent;
    }

@media (max-width: 576px) {
    .list-group .alert-danger.inverse:before {
        left: 45px;
    }
}

.list-group .alert-danger.inverse i {
    padding: 17px 20px;
    display: inline-block;
    background-color: #FC4438;
    color: #fff;
    border-radius: 3px 0 0 3px;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
}

@media (max-width: 576px) {
    .list-group .alert-danger.inverse i {
        padding: 17px 14px;
    }
}

.list-group .btn-close {
    filter: unset;
    top: -3px;
}

.alert-warning {
    background-color: rgba(255, 170, 5, 0.8);
    border-color: rgba(255, 170, 5, 0.9);
    color: #fff;
}

    .alert-warning .progress {
        height: 5px;
        background-color: #ffa800;
        border-radius: 0;
    }

    .alert-warning .progress-bar {
        background-color: white;
    }

    .alert-warning .btn-close {
        filter: brightness(1) invert(1);
    }

    .alert-warning .alert-link {
        color: #FFAA05;
    }

    .alert-warning hr {
        border-top-color: #FFAA05;
    }

.border-warning {
    border-color: #FFAA05 !important;
}

.income-wrapper ul li .income-dot.dot-warning {
    background-color: #FFAA05;
}

.form-switch .form-check-input.switch-warning:checked {
    background-color: #FFAA05;
    border-color: #FFAA05;
}

.list-group-horizontal-sm .list-group-item.border-left-warning, .list-group-horizontal-md .list-group-item.border-left-warning, .list-group-horizontal-lg .list-group-item.border-left-warning, .list-group-horizontal-xl .list-group-item.border-left-warning, .list-group-horizontal-xxl .list-group-item.border-left-warning {
    border-left: 4px solid #FFAA05;
}

.main-radio-toggle .btn-check.radio-light-warning:focus + .btn {
    box-shadow: 0 0 0 4px rgba(255, 170, 5, 0.55);
}

.fill-radios .radio.radio-warning input[type=radio]:checked + label::before {
    border: 10px solid #FFAA05;
}

.fill-radios .radio.radio-warning input[type=radio]:checked + label::after {
    background-color: #FFAA05;
}

.list-group .form-check-input:checked[type=checkbox].checkbox-warning,
.list-group [type=radio].checkbox-warning {
    background-color: unset;
    border-color: #FFAA05;
    outline: 0;
    background-color: unset;
}

    .list-group .form-check-input:checked[type=checkbox].checkbox-warning:focus, .list-group .form-check-input:checked[type=checkbox].checkbox-warning:active, .list-group .form-check-input:checked[type=checkbox].checkbox-warning.active,
    .list-group [type=radio].checkbox-warning:focus,
    .list-group [type=radio].checkbox-warning:active,
    .list-group [type=radio].checkbox-warning.active {
        border-color: #FFAA05;
        outline: 0;
        background-color: #FFAA05;
    }

.list-group .alert-warning.light {
    background-color: rgba(255, 170, 5, 0.4);
    border-color: rgba(255, 170, 5, 0.7);
}

.list-group .alert-warning.dark {
    background-color: #FFAA05;
    border-color: #FFAA05;
    color: #fafafa;
}

    .list-group .alert-warning.dark .alert-link {
        color: #fff;
    }

.list-group .alert-warning.outline,
.list-group .alert-warning.outline-2x {
    background-color: transparent;
    border-color: #FFAA05;
    color: #FFAA05;
}

    .list-group .alert-warning.outline .btn-close,
    .list-group .alert-warning.outline-2x .btn-close {
        filter: unset;
    }

.list-group .alert-warning.inverse {
    background-color: transparent;
    padding: 13px 20px 13px 65px;
    border-color: #FFAA05;
    color: #2F2F3B;
}

    .list-group .alert-warning.inverse:before {
        top: 16px;
        content: "";
        position: absolute;
        left: 54px;
        width: 0;
        height: 0;
        border-left: 7px solid #FFAA05;
        border-top: 7px solid transparent;
        border-bottom: 7px solid transparent;
    }

@media (max-width: 576px) {
    .list-group .alert-warning.inverse:before {
        left: 45px;
    }
}

.list-group .alert-warning.inverse i {
    padding: 17px 20px;
    display: inline-block;
    background-color: #FFAA05;
    color: #fff;
    border-radius: 3px 0 0 3px;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
}

@media (max-width: 576px) {
    .list-group .alert-warning.inverse i {
        padding: 17px 14px;
    }
}

.list-group .btn-close {
    filter: unset;
    top: -3px;
}

.alert-info {
    background-color: rgba(22, 199, 249, 0.8);
    border-color: rgba(22, 199, 249, 0.9);
    color: #fff;
}

    .alert-info .progress {
        height: 5px;
        background-color: #11c6f9;
        border-radius: 0;
    }

    .alert-info .progress-bar {
        background-color: white;
    }

    .alert-info .btn-close {
        filter: brightness(1) invert(1);
    }

    .alert-info .alert-link {
        color: #16C7F9;
    }

    .alert-info hr {
        border-top-color: #16C7F9;
    }

.border-info {
    border-color: #16C7F9 !important;
}

.income-wrapper ul li .income-dot.dot-info {
    background-color: #16C7F9;
}

.form-switch .form-check-input.switch-info:checked {
    background-color: #16C7F9;
    border-color: #16C7F9;
}

.list-group-horizontal-sm .list-group-item.border-left-info, .list-group-horizontal-md .list-group-item.border-left-info, .list-group-horizontal-lg .list-group-item.border-left-info, .list-group-horizontal-xl .list-group-item.border-left-info, .list-group-horizontal-xxl .list-group-item.border-left-info {
    border-left: 4px solid #16C7F9;
}

.main-radio-toggle .btn-check.radio-light-info:focus + .btn {
    box-shadow: 0 0 0 4px rgba(22, 199, 249, 0.55);
}

.fill-radios .radio.radio-info input[type=radio]:checked + label::before {
    border: 10px solid #16C7F9;
}

.fill-radios .radio.radio-info input[type=radio]:checked + label::after {
    background-color: #16C7F9;
}

.list-group .form-check-input:checked[type=checkbox].checkbox-info,
.list-group [type=radio].checkbox-info {
    background-color: unset;
    border-color: #16C7F9;
    outline: 0;
    background-color: unset;
}

    .list-group .form-check-input:checked[type=checkbox].checkbox-info:focus, .list-group .form-check-input:checked[type=checkbox].checkbox-info:active, .list-group .form-check-input:checked[type=checkbox].checkbox-info.active,
    .list-group [type=radio].checkbox-info:focus,
    .list-group [type=radio].checkbox-info:active,
    .list-group [type=radio].checkbox-info.active {
        border-color: #16C7F9;
        outline: 0;
        background-color: #16C7F9;
    }

.list-group .alert-info.light {
    background-color: rgba(22, 199, 249, 0.4);
    border-color: rgba(22, 199, 249, 0.7);
}

.list-group .alert-info.dark {
    background-color: #16C7F9;
    border-color: #16C7F9;
    color: #fafafa;
}

    .list-group .alert-info.dark .alert-link {
        color: #fff;
    }

.list-group .alert-info.outline,
.list-group .alert-info.outline-2x {
    background-color: transparent;
    border-color: #16C7F9;
    color: #16C7F9;
}

    .list-group .alert-info.outline .btn-close,
    .list-group .alert-info.outline-2x .btn-close {
        filter: unset;
    }

.list-group .alert-info.inverse {
    background-color: transparent;
    padding: 13px 20px 13px 65px;
    border-color: #16C7F9;
    color: #2F2F3B;
}

    .list-group .alert-info.inverse:before {
        top: 16px;
        content: "";
        position: absolute;
        left: 54px;
        width: 0;
        height: 0;
        border-left: 7px solid #16C7F9;
        border-top: 7px solid transparent;
        border-bottom: 7px solid transparent;
    }

@media (max-width: 576px) {
    .list-group .alert-info.inverse:before {
        left: 45px;
    }
}

.list-group .alert-info.inverse i {
    padding: 17px 20px;
    display: inline-block;
    background-color: #16C7F9;
    color: #fff;
    border-radius: 3px 0 0 3px;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
}

@media (max-width: 576px) {
    .list-group .alert-info.inverse i {
        padding: 17px 14px;
    }
}

.list-group .btn-close {
    filter: unset;
    top: -3px;
}

.alert-light {
    background-color: rgba(244, 244, 244, 0.8);
    border-color: rgba(244, 244, 244, 0.9);
    color: #fff;
    color: #2c323f;
    background-color: #f4f4f4;
}

    .alert-light .progress {
        height: 5px;
        background-color: #f1f1f1;
        border-radius: 0;
    }

    .alert-light .progress-bar {
        background-color: white;
    }

    .alert-light .btn-close {
        filter: brightness(1) invert(1);
    }

    .alert-light .alert-link {
        color: #f4f4f4;
        color: #2c323f;
    }

    .alert-light .btn-close {
        filter: unset;
    }

    .alert-light hr {
        border-top-color: #f4f4f4;
    }

.border-light {
    border-color: #f4f4f4 !important;
}

.touchspin-wrapper .btn-touchspin.touchspin-light {
    background-color: #f4f4f4;
    border: 1px solid #f4f4f4;
    color: #fff;
}

.form-switch .form-check-input.switch-light:checked {
    background-color: #f4f4f4;
    border-color: #f4f4f4;
}

.list-group-horizontal-sm .list-group-item.border-left-light, .list-group-horizontal-md .list-group-item.border-left-light, .list-group-horizontal-lg .list-group-item.border-left-light, .list-group-horizontal-xl .list-group-item.border-left-light, .list-group-horizontal-xxl .list-group-item.border-left-light {
    border-left: 4px solid #f4f4f4;
}

.main-radio-toggle .btn-check.radio-light-light:focus + .btn {
    box-shadow: 0 0 0 4px rgba(244, 244, 244, 0.55);
}

.fill-radios .radio.radio-light input[type=radio]:checked + label::before {
    border: 10px solid #f4f4f4;
}

.fill-radios .radio.radio-light input[type=radio]:checked + label::after {
    background-color: #f4f4f4;
}

.list-group .form-check-input:checked[type=checkbox].checkbox-light,
.list-group [type=radio].checkbox-light {
    background-color: unset;
    border-color: #f4f4f4;
    outline: 0;
    background-color: unset;
}

    .list-group .form-check-input:checked[type=checkbox].checkbox-light:focus, .list-group .form-check-input:checked[type=checkbox].checkbox-light:active, .list-group .form-check-input:checked[type=checkbox].checkbox-light.active,
    .list-group [type=radio].checkbox-light:focus,
    .list-group [type=radio].checkbox-light:active,
    .list-group [type=radio].checkbox-light.active {
        border-color: #f4f4f4;
        outline: 0;
        background-color: #f4f4f4;
    }

.list-group .alert-light.light {
    background-color: rgba(244, 244, 244, 0.4);
    border-color: rgba(244, 244, 244, 0.7);
}

.list-group .alert-light.dark {
    background-color: #f4f4f4;
    border-color: #f4f4f4;
    color: #fafafa;
    color: #2c323f;
}

    .list-group .alert-light.dark .alert-link {
        color: #fff;
        color: #2c323f;
    }

.list-group .alert-light.outline,
.list-group .alert-light.outline-2x {
    background-color: transparent;
    border-color: #f4f4f4;
    color: #f4f4f4;
    color: #2c323f;
}

    .list-group .alert-light.outline .btn-close,
    .list-group .alert-light.outline-2x .btn-close {
        filter: unset;
    }

.list-group .alert-light.inverse {
    background-color: transparent;
    padding: 13px 20px 13px 65px;
    border-color: #f4f4f4;
    color: #2F2F3B;
}

    .list-group .alert-light.inverse:before {
        top: 16px;
        content: "";
        position: absolute;
        left: 54px;
        width: 0;
        height: 0;
        border-left: 7px solid #f4f4f4;
        border-top: 7px solid transparent;
        border-bottom: 7px solid transparent;
    }

@media (max-width: 576px) {
    .list-group .alert-light.inverse:before {
        left: 45px;
    }
}

.list-group .alert-light.inverse i {
    padding: 17px 20px;
    display: inline-block;
    background-color: #f4f4f4;
    color: #fff;
    border-radius: 3px 0 0 3px;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
}

@media (max-width: 576px) {
    .list-group .alert-light.inverse i {
        padding: 17px 14px;
    }
}

.list-group .btn-close {
    filter: unset;
    top: -3px;
}

.alert-dark {
    background-color: rgba(44, 50, 63, 0.8);
    border-color: rgba(44, 50, 63, 0.9);
    color: #fff;
}

    .alert-dark .progress {
        height: 5px;
        background-color: #2a303c;
        border-radius: 0;
    }

    .alert-dark .progress-bar {
        background-color: #a8b0c2;
    }

    .alert-dark .btn-close {
        filter: brightness(1) invert(1);
    }

    .alert-dark .alert-link {
        color: #2c323f;
    }

    .alert-dark hr {
        border-top-color: #2c323f;
    }

.border-dark {
    border-color: #2c323f !important;
}

.income-wrapper ul li .income-dot.dot-dark {
    background-color: #2c323f;
}

.form-switch .form-check-input.switch-dark:checked {
    background-color: #2c323f;
    border-color: #2c323f;
}


.list-group-horizontal-sm .list-group-item.border-left-dark, .list-group-horizontal-md .list-group-item.border-left-dark, .list-group-horizontal-lg .list-group-item.border-left-dark, .list-group-horizontal-xl .list-group-item.border-left-dark, .list-group-horizontal-xxl .list-group-item.border-left-dark {
    border-left: 4px solid #2c323f;
}

.main-radio-toggle .btn-check.radio-light-dark:focus + .btn {
    box-shadow: 0 0 0 4px rgba(44, 50, 63, 0.55);
}

.fill-radios .radio.radio-dark input[type=radio]:checked + label::before {
    border: 10px solid #2c323f;
}

.fill-radios .radio.radio-dark input[type=radio]:checked + label::after {
    background-color: #2c323f;
}

.list-group .form-check-input:checked[type=checkbox].checkbox-dark,
.list-group [type=radio].checkbox-dark {
    background-color: unset;
    border-color: #2c323f;
    outline: 0;
    background-color: unset;
}

    .list-group .form-check-input:checked[type=checkbox].checkbox-dark:focus, .list-group .form-check-input:checked[type=checkbox].checkbox-dark:active, .list-group .form-check-input:checked[type=checkbox].checkbox-dark.active,
    .list-group [type=radio].checkbox-dark:focus,
    .list-group [type=radio].checkbox-dark:active,
    .list-group [type=radio].checkbox-dark.active {
        border-color: #2c323f;
        outline: 0;
        background-color: #2c323f;
    }

.list-group .alert-dark.light {
    background-color: rgba(44, 50, 63, 0.4);
    border-color: rgba(44, 50, 63, 0.7);
}

.list-group .alert-dark.dark {
    background-color: #2c323f;
    border-color: #2c323f;
    color: #fafafa;
}

    .list-group .alert-dark.dark .alert-link {
        color: #fff;
    }

.list-group .alert-dark.outline,
.list-group .alert-dark.outline-2x {
    background-color: transparent;
    border-color: #2c323f;
    color: #2c323f;
}

    .list-group .alert-dark.outline .btn-close,
    .list-group .alert-dark.outline-2x .btn-close {
        filter: unset;
    }

.list-group .alert-dark.inverse {
    background-color: transparent;
    padding: 13px 20px 13px 65px;
    border-color: #2c323f;
    color: #2F2F3B;
}

    .list-group .alert-dark.inverse:before {
        top: 16px;
        content: "";
        position: absolute;
        left: 54px;
        width: 0;
        height: 0;
        border-left: 7px solid #2c323f;
        border-top: 7px solid transparent;
        border-bottom: 7px solid transparent;
    }

@media (max-width: 576px) {
    .list-group .alert-dark.inverse:before {
        left: 45px;
    }
}

.list-group .alert-dark.inverse i {
    padding: 17px 20px;
    display: inline-block;
    background-color: #2c323f;
    color: #fff;
    border-radius: 3px 0 0 3px;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
}

@media (max-width: 576px) {
    .list-group .alert-dark.inverse i {
        padding: 17px 14px;
    }
}

.list-group .btn-close {
    filter: unset;
    top: -3px;
}

.outline-2x {
    border-width: 2px;
    padding: 11px 1.25rem;
}

.alert-icons.outline-2x {
    padding: 15px;
}

.alert-icons svg {
    position: absolute !important;
    top: 18px !important;
}

.alert-dark .btn-close,
.alert-info .btn-close {
    filter: none;
}

.border-left-wrapper {
    border-left: 4px solid #2c323f;
}

.alert-light-primary {
    background-color: #F0F8FF;
    border: 1px solid #3B80F21A;
}

.alert-light-secondary {
    background-color: #FFE0E8;
}

.alert-light-success {
    background-color: #EEFFF4;
    color: #039855;
    border: 1px solid #1DCA5D1A;
}

.alert-light-warning {
    background-color: #FFF7DE;
    border: 1px solid #F3A5151A;
}

.alert-light-info {
    background-color: #D5F5FE;
}

.alert-light-light {
    background-color: #F9F9FB;
}

.alert-light-danger {
    background-color: #FEDDDB;
}

.alert-light-dark {
    background-color: #EAEBF2;
}

.alert-primary-text {
    color: #1570EF;
    font-weight: 500;
    font-size: 12px;
}

.alert-danger-text {
    color: #F34040;
    font-weight: 500;
    font-size: 12px;
}

.alert-arrow {
    min-width: 55px;
    height: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

    .alert-arrow i {
        margin-right: 0;
    }

@media (max-width: 576px) {
    .ellipsis.content {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 294px;
    }
}

@media (max-width: 575px) {
    .ellipsis.content {
        max-width: 180px;
    }
}

.alert-dismissible {
    display: flex;
    align-items: center;
    gap: 8px;
}

.alert.notify-alert.alert-copy {
    display: flex !important;
}


.alert-dismissible .btn-close {
    padding: .5rem 1rem;
}


/**=====================
   2.2 Alert CSS end
==========================**/
/**=====================
  2.3 Avatars CSS start
==========================**/
.avatars .avatar {
    display: inline-block;
    margin-right: 10px;
    position: relative;
    width: auto;
}

    .avatars .avatar:last-child {
        margin-right: 0;
    }

    .avatars .avatar .b-r-30 {
        border-radius: 30px;
    }

    .avatars .avatar .b-r-35 {
        border-radius: 35px;
    }

    .avatars .avatar .b-r-25 {
        border-radius: 25px;
    }

    .avatars .avatar .b-r-15 {
        border-radius: 15px;
    }

    .avatars .avatar.ratio img {
        width: auto;
    }

    .avatars .avatar .status {
        position: absolute;
        height: 12%;
        width: 12%;
        border-radius: 100%;
        bottom: 12%;
        right: 4%;
    }

    .avatars .avatar .img-100 {
        width: calc(75px + 25 * (100vw - 320px) / 1600) !important;
        height: calc(75px + 25 * (100vw - 320px) / 1600);
    }

    .avatars .avatar .img-90 {
        width: calc(65px + 25 * (100vw - 320px) / 1600) !important;
        height: calc(65px + 25 * (100vw - 320px) / 1600);
    }

    .avatars .avatar .img-80 {
        width: calc(55px + 25 * (100vw - 320px) / 1600) !important;
        height: calc(55px + 25 * (100vw - 320px) / 1600);
    }

    .avatars .avatar .img-70 {
        width: calc(45px + 25 * (100vw - 320px) / 1600) !important;
        height: calc(45px + 25 * (100vw - 320px) / 1600);
    }

.status-offline {
    background-color: #FC4438;
}

.status-online {
    background-color: #54BA4A;
}

.status-dnd {
    background-color: #FFAA05;
}

.customers ul {
    display: inline-block;
}

    .customers ul li img {
        border: 2px solid var(--white);
        transition: 0.5s;
    }

        .customers ul li img:hover {
            transform: translateY(-4px) scale(1.02);
            transition: 0.5s;
        }

    .customers ul li + li {
        margin-left: -7%;
    }

.customers.avatar-group {
    margin-right: 30px;
}

    .customers.avatar-group:last-child {
        margin-right: 0;
    }

.avatar-showcase {
    margin-bottom: -10px;
}

    .avatar-showcase .avatars .avatar {
        margin-bottom: 10px;
    }

    .avatar-showcase .avatar-group {
        margin-bottom: 10px;
    }

    .avatar-showcase .ratio > * {
        position: relative;
        top: unset;
        left: unset;
    }

/**=====================
    2.3 Avatars CSS Ends
==========================**/
/**=====================
    2.4 Badge CSS start
==========================**/
.badge-spacing {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

    .badge-spacing .badge {
        padding: 6px 12px;
        font-size: 12px;
    }

        .badge-spacing .badge.badge svg {
            padding-top: 0px;
        }

        .badge-spacing .badge.rounded-circle {
            padding: 10px 14px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .badge-spacing .badge.badge-p-space {
            padding: 10px 13px;
        }

        .badge-spacing .badge + .badge {
            margin-left: 0px;
        }

        .badge-spacing .badge.btn-p-space {
            padding: 8px 10px;
        }

a.badge:hover {
    color: inherit;
}

    a.badge:hover.badge-dark:hover {
        color: #fff;
    }

.badge + .badge {
    margin-left: 5px;
}

.badge svg {
    width: 16px;
    height: 16px;
    padding-top: 3px;
}

.b-ln-height {
    line-height: 5px;
}

.pill-badge-primary {
    background-color: var(--theme-default);
    box-shadow: -0.5px 4.33px 16px 0px rgba(var(--theme-default), 0.25);
    color: #fff;
    border-radius: 0;
}

.pill-badge-secondary {
    background-color: #FF3364;
    box-shadow: -0.5px 4.33px 16px 0px rgba(255, 51, 100, 0.25);
    color: #fff;
    border-radius: 0;
}

.pill-badge-success {
    background-color: #54BA4A;
    box-shadow: -0.5px 4.33px 16px 0px rgba(84, 186, 74, 0.25);
    color: #fff;
    border-radius: 0;
}

.pill-badge-danger {
    background-color: #FC4438;
    box-shadow: -0.5px 4.33px 16px 0px rgba(252, 68, 56, 0.25);
    color: #fff;
    border-radius: 0;
}

.pill-badge-info {
    background-color: #16C7F9;
    box-shadow: -0.5px 4.33px 16px 0px rgba(22, 199, 249, 0.25);
    color: #fff;
    border-radius: 0;
}

.pill-badge-light {
    background-color: #f4f4f4;
    box-shadow: -0.5px 4.33px 16px 0px rgba(244, 244, 244, 0.25);
    color: #fff;
    border-radius: 0;
}

.pill-badge-dark {
    background-color: #2c323f;
    box-shadow: -0.5px 4.33px 16px 0px rgba(44, 50, 63, 0.25);
    color: #fff;
    border-radius: 0;
}

.pill-badge-warning {
    background-color: #FFAA05;
    box-shadow: -0.5px 4.33px 16px 0px rgba(255, 170, 5, 0.25);
    color: #fff;
    border-radius: 0;
}

.pill-badge-primary {
    background-color: var(--theme-default);
}

.pill-badge-secondary {
    background-color: var(--theme-secondary);
}

.round-badge-primary {
    border-radius: 6px;
    background-color: var(--theme-default);
    box-shadow: -0.5px -6.67px 14px 0px rgba(var(--theme-default), 0.18);
    color: #fff !important;
}

.round-badge-secondary {
    border-radius: 6px;
    background-color: #FF3364;
    box-shadow: -0.5px -6.67px 14px 0px rgba(255, 51, 100, 0.18);
    color: #fff !important;
}

.round-badge-success {
    border-radius: 6px;
    background-color: #54BA4A;
    box-shadow: -0.5px -6.67px 14px 0px rgba(84, 186, 74, 0.18);
    color: #fff !important;
}

.round-badge-danger {
    border-radius: 6px;
    background-color: #FC4438;
    box-shadow: -0.5px -6.67px 14px 0px rgba(252, 68, 56, 0.18);
    color: #fff !important;
}

.round-badge-info {
    border-radius: 6px;
    background-color: #16C7F9;
    box-shadow: -0.5px -6.67px 14px 0px rgba(22, 199, 249, 0.18);
    color: #fff !important;
}

.round-badge-light {
    border-radius: 6px;
    background-color: #f4f4f4;
    box-shadow: -0.5px -6.67px 14px 0px rgba(244, 244, 244, 0.18);
    color: #fff !important;
}

.round-badge-dark {
    border-radius: 6px;
    background-color: #2c323f;
    box-shadow: -0.5px -6.67px 14px 0px rgba(44, 50, 63, 0.18);
    color: #fff !important;
}

.round-badge-warning {
    border-radius: 6px;
    background-color: #FFAA05;
    box-shadow: -0.5px -6.67px 14px 0px rgba(255, 170, 5, 0.18);
    color: #fff !important;
}

.round-badge-primary {
    background-color: var(--theme-default);
}

.round-badge-secondary {
    background-color: var(--theme-secondary);
}

.badge-heading {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 8px;
}

/**=====================
  2.4 Badge CSS Ends
==========================**/

/**=====================
  2.9 Buttons CSS start
==========================**/

.btn-light:not([disabled]):not(.disabled).active.active {
    color: #2F2F3B;
    background-color: #efefef !important;
}

.btn-primary-gradien {
    background-image: linear-gradient(to right, #988fff 0%, #4e3dff 51%, #988fff 100%);
    border: none;
    color: #fff;
    background-size: auto 200%;
    transition: all 0.3s ease;
    color: #fff;
}

    .btn-primary-gradien:focus, .btn-primary-gradien:active, .btn-primary-gradien.active {
        transition: 1.5s;
        background-position: right center;
        background-image: linear-gradient(to right, #988fff, 0%, #4e3dff, 100%, #fff) !important;
    }

.btn-secondary-gradien {
    background-image: linear-gradient(to right, #ff5c83 0%, #ff0a45 51%, #ff5c83 100%);
    border: none;
    color: #fff;
    background-size: auto 200%;
    transition: all 0.3s ease;
}

    .btn-secondary-gradien:hover, .btn-secondary-gradien:focus, .btn-secondary-gradien:active, .btn-secondary-gradien.active, .btn-secondary-gradien.hover {
        transition: 1.5s;
        background-position: right center;
        background-image: linear-gradient(to right, #ff5c83, 0%, #ff0a45, 100%, #fff) !important;
    }

.btn-success-gradien {
    background-image: linear-gradient(to right, #70c568 0%, #459f3c 51%, #70c568 100%);
    border: none;
    color: #fff;
    background-size: auto 200%;
    transition: all 0.3s ease;
}

    .btn-success-gradien:hover, .btn-success-gradien:focus, .btn-success-gradien:active, .btn-success-gradien.active, .btn-success-gradien.hover {
        transition: 1.5s;
        background-position: right center;
        background-image: linear-gradient(to right, #70c568, 0%, #459f3c, 100%, #fff) !important;
    }

.btn-danger-gradien {
    background-image: linear-gradient(to right, #fd6a60 0%, #fb1e10 51%, #fd6a60 100%);
    border: none;
    color: #fff;
    background-size: auto 200%;
    transition: all 0.3s ease;
}

    .btn-danger-gradien:hover, .btn-danger-gradien:focus, .btn-danger-gradien:active, .btn-danger-gradien.active, .btn-danger-gradien.hover {
        transition: 1.5s;
        background-position: right center;
        background-image: linear-gradient(to right, #fd6a60, 0%, #fb1e10, 100%, #fff) !important;
    }

.btn-warning-gradien {
    background-image: linear-gradient(to right, #ffb82e 0%, #db9100 51%, #ffb82e 100%);
    border: none;
    color: #fff;
    background-size: auto 200%;
    transition: all 0.3s ease;
}

    .btn-warning-gradien:hover, .btn-warning-gradien:focus, .btn-warning-gradien:active, .btn-warning-gradien.active, .btn-warning-gradien.hover {
        transition: 1.5s;
        background-position: right center;
        background-image: linear-gradient(to right, #ffb82e, 0%, #db9100, 100%, #fff) !important;
    }

.btn-info-gradien {
    background-image: linear-gradient(to right, #3ed1fa 0%, #06b0e0 51%, #3ed1fa 100%);
    border: none;
    color: #fff;
    background-size: auto 200%;
    transition: all 0.3s ease;
}

    .btn-info-gradien:hover, .btn-info-gradien:focus, .btn-info-gradien:active, .btn-info-gradien.active, .btn-info-gradien.hover {
        transition: 1.5s;
        background-position: right center;
        background-image: linear-gradient(to right, #3ed1fa, 0%, #06b0e0, 100%, #fff) !important;
    }

.btn-light-gradien {
    background-image: linear-gradient(to right, white 0%, #e0e0e0 51%, white 100%);
    border: none;
    color: #fff;
    background-size: auto 200%;
    transition: all 0.3s ease;
}

    .btn-light-gradien:hover, .btn-light-gradien:focus, .btn-light-gradien:active, .btn-light-gradien.active, .btn-light-gradien.hover {
        transition: 1.5s;
        background-position: right center;
        background-image: linear-gradient(to right, white, 0%, #e0e0e0, 100%, #fff) !important;
    }

.btn-dark-gradien {
    background-image: linear-gradient(to right, #3d4557 0%, #1b1f27 51%, #3d4557 100%);
    border: none;
    color: #fff;
    background-size: auto 200%;
    transition: all 0.3s ease;
}

    .btn-dark-gradien:hover, .btn-dark-gradien:focus, .btn-dark-gradien:active, .btn-dark-gradien.active, .btn-dark-gradien.hover {
        transition: 1.5s;
        background-position: right center;
        background-image: linear-gradient(to right, #3d4557, 0%, #1b1f27, 100%, #fff) !important;
    }

.btn {
    font-size: 12px;
    border-radius: 6px;
    padding: 0.55rem 1rem;
    cursor: pointer;
    font-weight: 500;
}

    .btn.bg-light-primary:hover {
        background: #7366FF !important;
        color: #fff !important;
    }

.btn-lg {
    font-size: 18px;
}

.btn-sm {
    font-size: 12px;
    padding: 0.3rem 1rem;
}

.btn-xs {
    padding: 0.08rem 0.5rem !important;
    font-size: 11px !important;
}

.large-btn {
    margin-bottom: -20px;
}

    .large-btn .btn {
        margin-right: 5px;
        margin-bottom: 15px;
    }

.btn-outline-white {
    border: 1px solid #fff;
    color: #fff;
}

    .btn-outline-white:hover, .btn-outline-white:focus {
        background: #fff;
    }

.btn-group .radio label::before {
    top: 2px;
}

.btn-group .radio label::after {
    top: 7px;
}

.btn-group .checkbox label {
    margin-top: 3px;
}

.tooltiptext {
    visibility: visible;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 1;
    transition: opacity 0.3s;
}

    .tooltiptext::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #555 transparent transparent transparent;
    }

.card-header-right-icon .btn.badge-light-primary:hover {
    color: var(--white);
}

.btn-check:checked + .btn-light, .btn-check:active + .btn-light, .btn-light:active, .btn-light.active, .show > .btn-light.dropdown-toggle, .btn-light:focus {
    color: #05A6F0;
}

/**=====================
    2.9 Buttons CSS end
==========================**/
/**=====================
    2.10 Card CSS Start
==========================**/
.card {
    margin-bottom: 1rem;
    /*border: 0;*/
    border: 1px solid #E2E8F0;
    transition: all 0.3s ease;
    /*  letter-spacing: 0.5px;*/
    border-radius: 8px;
    box-shadow: 0px 9px 20px rgba(46, 35, 94, 0.07);
}

    .card:hover {
        /*box-shadow: 0 0 40px rgba(8, 21, 66, 0.05);
        transition: all 0.3s ease;*/
    }

    .card .card-header {
        background-color: #fff;
        padding: 15px 20px;
        border-bottom: 1px solid #E2E8F0;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        position: relative;
    }

.card-header {
    background-color: #fff;
}

.card .card-header h6 {
    font-size: 14px;
    font-weight: 700;
    color: #1E2432;
}

.card .card-header h5 {
    font-size: 12px;
    font-weight: 700;
    color: #1E2432;
    display: inline-block;
}

.card .card-header.card-no-border {
    border-bottom: none !important;
}

.card .card-header h5:not(.mb-0), .card .card-header h5:not(.m-0) {
    margin-bottom: 0;
    /*text-transform: capitalize;*/
}

.card .card-header > span {
    font-size: 12px;
    color: #6B7C94;
    margin-top: 5px;
    display: block;
    font-weight: 400;
}

.card .card-header .card-header-right {
    border-radius: 0 0 0 7px;
    right: 35px;
    top: 24px;
    display: inline-block;
    float: right;
    padding: 8px 0;
    position: absolute;
    background-color: #fff;
    z-index: 1;
}

    .card .card-header .card-header-right .card-option {
        text-align: right;
        width: 35px;
        height: 20px;
        overflow: hidden;
        transition: 0.3s ease-in-out;
    }

        .card .card-header .card-header-right .card-option li {
            display: inline-block;
        }

            .card .card-header .card-header-right .card-option li:first-child i {
                transition: 1s;
                font-size: 16px;
                color: var(--theme-default);
            }

                .card .card-header .card-header-right .card-option li:first-child i.icofont {
                    color: unset;
                }

    .card .card-header .card-header-right i {
        margin: 0 5px;
        cursor: pointer;
        color: #2c323f;
        line-height: 20px;
    }

        .card .card-header .card-header-right i.icofont-refresh {
            font-size: 13px;
        }

.card .sub-title {
    padding-bottom: 12px;
    font-size: calc(15px + 3 * (100vw - 320px) / 1600);
}

.card .card-footer {
    background-color: #fff;
    border-top: 1px solid #E2E8F0;
    padding: 20px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

.card.card-load .card-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    background-color: rgba(255, 255, 255, 0.7);
    z-index: 8;
    align-items: center;
    justify-content: center;
}

    .card.card-load .card-loader i {
        margin: 0 auto;
        color: var(--theme-default);
        font-size: 20px;
    }

.card.full-card {
    position: fixed;
    top: 0;
    z-index: 99999;
    box-shadow: none;
    right: 0;
    border-radius: 0;
    border: 1px solid #efefef;
    width: calc(100vw - 12px);
    height: 100vh;
}

    .card.full-card .card-body {
        overflow: auto;
    }

.page-body-wrapper .card .sub-title {
    font-weight: normal;
    color: #52526c;
}

.card-absolute {
    margin-top: 20px;
}

    .card-absolute .card-header {
        position: absolute;
        top: -20px;
        left: 15px;
        border-radius: 0.25rem;
        padding: 10px 15px;
    }

        .card-absolute .card-header h5 {
            font-size: 17px;
        }

    .card-absolute .card-body {
        margin-top: 10px;
    }

.card-header .border-tab {
    margin-bottom: -13px;
}

.card .card-body {
    padding: 20px;
    background-color: transparent;
}

.custom-card {
    overflow: hidden;
    padding: 30px;
}

    .custom-card .card-header {
        padding: 0;
    }

        .custom-card .card-header img {
            border-radius: 50%;
            margin-top: -100px;
            transform: scale(1.5);
        }

    .custom-card .card-profile {
        text-align: center;
    }

        .custom-card .card-profile img {
            height: 110px;
            padding: 7px;
            background-color: #fff;
            z-index: 1;
            position: relative;
        }

    .custom-card .card-social {
        text-align: center;
    }

        .custom-card .card-social li {
            display: inline-block;
            padding: 15px 0;
        }

            .custom-card .card-social li:last-child a {
                margin-right: 0;
            }

            .custom-card .card-social li a {
                padding: 0;
                margin-right: 15px;
                color: rgb(188, 198, 222);
                font-size: 16px;
                transition: all 0.3s ease;
            }

                .custom-card .card-social li a:hover {
                    color: var(--theme-default);
                    transition: all 0.3s ease;
                }

    .custom-card .profile-details h6 {
        margin-bottom: 30px;
        margin-top: 10px;
        color: #52526c;
        font-size: 12px;
    }

    .custom-card .card-footer {
        padding: 0;
    }

        .custom-card .card-footer > div {
            padding: 15px;
            text-align: center;
        }

            .custom-card .card-footer > div + div {
                border-left: 1px solid #efefef;
            }

            .custom-card .card-footer > div h3 {
                margin-bottom: 0;
                font-size: 24px;
            }

            .custom-card .card-footer > div h6 {
                font-size: 12px;
                color: #52526c;
            }

            .custom-card .card-footer > div h5 {
                font-size: 16px;
                margin-bottom: 0;
            }

            .custom-card .card-footer > div i {
                font-size: 24px;
                display: inline-block;
                margin-bottom: 15px;
            }

            .custom-card .card-footer > div .m-b-card {
                margin-bottom: 10px;
            }

/**=====================
    2.10 Card CSS End
==========================**/

/**=====================
    2.13 Datapicker CSS Start
==========================**/
.clockpicker-canvas line {
    stroke: var(--theme-default);
}

.clockpicker-canvas-fg,
.clockpicker-canvas-bearing {
    fill: var(--theme-default);
}

.datepicker--day-name {
    color: #7366FF;
    font-weight: bold;
}

.datepicker--cell.-current- {
    color: #000;
    border-radius: 5px;
    font-weight: bold;
    border: 2px solid var(--theme-default);
}

.datepicker--cell.-focus- {
    background: var(--theme-default);
    color: #fff;
}

.datepicker--cell.-selected- {
    background: var(--theme-default) !important;
}

.datepicker--cell-day {
    width: 14.2857142857%;
}

.datepickers-container,
.bootstrap-datetimepicker-widget {
    z-index: 7;
}

.datetime-picker .bootstrap-datetimepicker-widget.dropdown-menu {
    width: auto;
}

.datetime-picker .input-group-text i {
    line-height: 1.3;
}

.datepicker table tr td span:hover, .datepicker table tr td span.focused {
    background: #05a6f0;
    color: #fff;
}

.dateTrigger {
    border: 1px solid #ccc;
    padding: 7px 9px;
    border-radius: 4px;
    background: white;
    height: 38px;
    display: flex;
    align-items: center;
}

.clockpicker-popover {
    border: none;
    box-shadow: 0px 9px 20px rgba(46, 35, 94, 0.07);
    z-index: 7;
}

    .clockpicker-popover .popover-content {
        background-color: rgba(115, 102, 255, 0.05);
    }

.clockpicker-canvas-bg {
    fill: white;
}

.clockpicker-tick:hover {
    color: inherit;
    background-color: white;
}

.calendar-basic .md-sidebar-aside {
    background-color: #fff;
}

.calendar-basic #external-events {
    padding: 20px;
    border: 1px solid #d7e2e9;
}

    .calendar-basic #external-events h4 {
        margin-bottom: 14px;
    }

    .calendar-basic #external-events p {
        margin-top: 12px;
    }

    .calendar-basic #external-events .fc-h-event {
        padding: 12px;
        background-color: var(--theme-default);
        border: 1px solid var(--theme-default);
    }

        .calendar-basic #external-events .fc-h-event + .fc-h-event {
            margin-top: 10px;
        }

        .calendar-basic #external-events .fc-h-event .fc-event-main {
            font-size: 13px;
        }

.calendar-basic .calendar-default .fc-daygrid-dot-event .fc-event-title {
    text-overflow: ellipsis;
}

.calendar-basic .calendar-default .fc td[role=presentation] {
    border: 0;
}

.calendar-basic .calendar-default .fc .fc-daygrid-day-number,
.calendar-basic .calendar-default .fc .fc-col-header-cell-cushion {
    color: #2F2F3B;
}

.calendar-basic .calendar-default .fc .fc-button .fc-icon {
    height: 23px;
}

.calendar-basic .calendar-default .fc-h-event {
    padding: 2px;
    background-color: #7366FF;
    border: 1px solid #7366FF;
}

.calendar-basic .calendar-default .fc-toolbar-chunk .fc-button-group ~ .fc-today-button {
    margin: 0 8px;
}

.fc-event-dragging {
    padding: 10px;
    background-color: var(--theme-default);
}

.fc .fc-toolbar {
    flex-wrap: wrap;
    gap: 10px;
}

.fc .fc-button-primary:focus {
    box-shadow: 0 0 0 0.2rem rgba(115, 102, 255, 0.5);
}

.main-inline-calender.input-group {
    flex-direction: column;
}

    .main-inline-calender.input-group .form-control {
        width: 100%;
    }

    .main-inline-calender.input-group .flatpickr-calendar.inline {
        width: 100%;
    }

    .main-inline-calender.input-group .flatpickr-innerContainer {
        display: block;
    }

    .main-inline-calender.input-group .flatpickr-rContainer {
        display: block;
    }

        .main-inline-calender.input-group .flatpickr-rContainer .flatpickr-weekdays {
            width: 100%;
        }

        .main-inline-calender.input-group .flatpickr-rContainer .flatpickr-days {
            width: 100%;
        }

            .main-inline-calender.input-group .flatpickr-rContainer .flatpickr-days .dayContainer {
                width: 100%;
                max-width: none;
                min-width: unset;
            }

                .main-inline-calender.input-group .flatpickr-rContainer .flatpickr-days .dayContainer .flatpickr-day {
                    border-radius: 5px;
                    width: 100%;
                    max-width: unset;
                }

                    .main-inline-calender.input-group .flatpickr-rContainer .flatpickr-days .dayContainer .flatpickr-day:hover {
                        color: var(--body-font-color);
                    }

.flatpickr-day.selected,
.flatpickr-day .endRange {
    background-color: var(--theme-default);
    border-color: var(--theme-default);
}

    .flatpickr-day.selected:hover,
    .flatpickr-day .endRange:hover {
        background-color: var(--theme-default);
        border-color: var(--theme-default);
    }

.main-flatpickr .form-control:read-only {
    background-color: unset;
}

.flatpickr-months {
    font-size: calc(12px + 2 * (100vw - 320px) / 1600);
}

.flatpickr-current-month {
    font-size: calc(14px + 5 * (100vw - 320px) / 1600);
}

@media (max-width: 400px) {
    .flatpickr-calendar.animate {
        width: 77%;
        left: 50% !important;
        transform: translateX(-50%);
    }
}

.flatpickr-calendar .flatpickr-days {
    width: unset;
}

    .flatpickr-calendar .flatpickr-days .dayContainer {
        width: unset;
        min-width: unset;
        max-width: unset;
    }

@media (max-width: 768px) {
    .flatpicker-calender .form-control {
        font-size: 12px;
    }
}

.timepicker-wrapper .row {
    margin-bottom: 16px;
}

    .timepicker-wrapper .row:last-child {
        margin-bottom: 0;
    }

/**=====================
   2.13 Datapicker CSS End
==========================**/

/**=====================
   2.20 List CSS Start
==========================**/
.list-group-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.125) !important;
    border: none;
}


    .list-group-item.active {
        background-color: var(--theme-default);
        border-color: var(--theme-default);
    }

.list-group i {
    margin-right: 10px;
}

.list-group img {
    height: 40px;
    width: 40px;
    margin-right: 10px;
}

.list-light-primary {
    background-color: #d9ecfb;
}

    .list-light-primary:hover, .list-light-primary:active, .list-light-primary:focus {
        background-color: #05a5ef;
        color: #fff;
    }

/*.btn.list-light-primary {
    padding: 0.55rem;
    line-height: 0.6;
}*/

.list-hover-primary {
    background-color: unset;
}

    .list-hover-primary:hover, .list-hover-primary:active, .list-hover-primary.active, .list-hover-primary:focus {
        background-color: #E0DDFF;
        color: #2c323f;
        z-index: 0;
    }

.list-light-secondary {
    background-color: #05a5ef;
    color: #fff;
}

    .list-light-secondary:hover, .list-light-secondary:active, .list-light-secondary:focus {
        background-color: #05a5ef;
        color: #fff;
    }

.list-hover-secondary {
    background-color: unset;
}

    .list-hover-secondary:hover, .list-hover-secondary:active, .list-hover-secondary.active, .list-hover-secondary:focus {
        background-color: #FFE0E8;
        color: #2c323f;
        z-index: 0;
    }

.list-light-success {
    background-color: #D6EED4;
}

    .list-light-success:hover, .list-light-success:active, .list-light-success:focus {
        background-color: #D6EED4;
    }

.list-hover-success {
    background-color: unset;
}

    .list-hover-success:hover, .list-hover-success:active, .list-hover-success.active, .list-hover-success:focus {
        background-color: #D6EED4;
        color: #2c323f;
        z-index: 0;
    }

.list-light-warning {
    background-color: #FFF0D2;
}

    .list-light-warning:hover, .list-light-warning:active, .list-light-warning:focus {
        background-color: #FFF0D2;
    }

.list-hover-warning {
    background-color: unset;
}

    .list-hover-warning:hover, .list-hover-warning:active, .list-hover-warning.active, .list-hover-warning:focus {
        background-color: #FFF0D2;
        color: #2c323f;
        z-index: 0;
    }

.list-light-info {
    background-color: #D5F5FE;
}

    .list-light-info:hover, .list-light-info:active, .list-light-info:focus {
        background-color: #D5F5FE;
    }

.list-hover-info {
    background-color: unset;
}

    .list-hover-info:hover, .list-hover-info:active, .list-hover-info.active, .list-hover-info:focus {
        background-color: #D5F5FE;
        color: #2c323f;
        z-index: 0;
    }

.list-light-light {
    background-color: #F9F9FB;
}

    .list-light-light:hover, .list-light-light:active, .list-light-light:focus {
        background-color: #F9F9FB;
    }

.list-hover-light {
    background-color: unset;
}

    .list-hover-light:hover, .list-hover-light:active, .list-hover-light.active, .list-hover-light:focus {
        background-color: #F9F9FB;
        color: #2c323f;
        z-index: 0;
    }

.list-light-danger {
    background-color: #FEDDDB;
}

    .list-light-danger:hover, .list-light-danger:active, .list-light-danger:focus {
        background-color: #FEDDDB;
    }

.list-hover-danger {
    background-color: unset;
}

    .list-hover-danger:hover, .list-hover-danger:active, .list-hover-danger.active, .list-hover-danger:focus {
        background-color: #FEDDDB;
        color: #2c323f;
        z-index: 0;
    }

.list-light-dark {
    background-color: #EAEBF2;
}

    .list-light-dark:hover, .list-light-dark:active, .list-light-dark:focus {
        background-color: #EAEBF2;
    }

.list-hover-dark {
    background-color: unset;
}

    .list-hover-dark:hover, .list-hover-dark:active, .list-hover-dark.active, .list-hover-dark:focus {
        background-color: #EAEBF2;
        color: #2c323f;
        z-index: 0;
    }

.horizontal-list-wrapper .list-group .list-group-item {
    padding: 8px;
}

.list-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

@media (max-width: 414px) {
    .list-wrapper {
        flex-wrap: unset;
        word-break: break-word;
    }
}

@media (max-width: 366px) {
    .list-wrapper {
        padding-bottom: 8px;
    }
}

.list-wrapper .list-img {
    width: calc(40px + 15 * (100vw - 320px) / 1600);
    height: calc(40px + 15 * (100vw - 320px) / 1600);
    margin-bottom: 10px;
    border-radius: 50%;
}

.list-wrapper .list-content p {
    margin-bottom: 0;
}

@media (max-width: 480px) {
    .main-lists-content small {
        display: none;
    }
}

@media (max-width: 1199px) {
    .list-behavior-1 {
        gap: 12px;
    }
}

@media (max-width: 575px) {
    .list-behavior-1:first-child {
        margin-bottom: 14px;
    }
}

@media (max-width: 1999px) {
    .list-behavior-1 img {
        height: 86px;
    }
}

@media (max-width: 992px) {
    .list-behavior-1 img {
        height: 70px;
    }
}

.list-behavior-1 .flex-grow-1 {
    margin-left: 16px;
}

@media (max-width: 1199px) {
    .list-behavior-1 .flex-grow-1 {
        margin-left: 0;
    }

        .list-behavior-1 .flex-grow-1 p {
            display: block;
            display: -webkit-box;
            max-width: 100%;
            margin: 0 auto;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }
}

[dir=rtl] .list-behavior-1 .flex-grow-1 {
    margin-right: 16px;
    margin-left: unset;
}

.list-behaviors > div:nth-child(even) .flex-grow-1 {
    order: -1;
    margin-left: unset;
    margin-right: 16px;
}

@media (max-width: 1199px) {
    .list-behaviors > div:nth-child(even) .flex-grow-1 {
        margin-left: 0;
        margin-right: 0;
        order: unset;
    }
}

.list-group .list-group-item {
    padding: 11px 16px;
}

    .list-group .list-group-item .form-check-input:focus {
        box-shadow: unset !important;
    }

[dir=rtl] .list-group .list-group-item i {
    margin-left: 10px;
    margin-right: unset;
}

@media (max-width: 1216px) {
    .contact-profile {
        background-color: unset;
    }

        .contact-profile.list-light-dark:hover {
            background-color: unset;
        }
}

.badge-list .list-group-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

    .badge-list .list-group-item div {
        margin-right: auto;
        margin-left: 8px;
    }

[dir=rtl] .badge-list .list-group-item div {
    margin-left: auto;
    margin-right: 8px;
}

.list-group-item:last-child {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.file {
    font-size: 12px;
    width: 100%;
}

.file_date {
    font-size: 12px;
    color: #6B7C94;
    float: right;
    margin-left: auto !important;
}
/**=====================
   2.20 List CSS Ends
==========================**/
/**=====================
    2.21 Loader CSS Start
==========================**/
.loader-wrapper {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    background-color: #fff;
    z-index: 11;
    top: 0;
    /*Color Loader*/
    /*Color Loader*/
}

    .loader-wrapper .loader-index {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        filter: url("#goo");
    }

        .loader-wrapper .loader-index:after {
            content: "";
            width: 4em;
            height: 4em;
            background: var(--theme-default);
            border-radius: 50%;
            position: absolute;
            transform: scale(0.5);
            animation: grow 2s cubic-bezier(0.14, 0.05, 0.55, 0.5) infinite alternate;
        }

        .loader-wrapper .loader-index span {
            width: 2em;
            height: 2em;
            background: var(--theme-secondary);
            border-radius: 50%;
            margin-right: 2em;
            position: relative;
            transform: translateX(7em);
            animation: move 4s ease-in-out infinite;
        }

            .loader-wrapper .loader-index span:before {
                content: "";
                width: 2em;
                height: 2em;
                background: var(--theme-default);
                border-radius: 50%;
                position: absolute;
                left: 3em;
                transform: translateX(0em);
                animation: shrink 2s ease-in-out infinite;
            }

            .loader-wrapper .loader-index span:after {
                content: "";
                width: 2em;
                height: 2em;
                background: #16C7F9;
                border-radius: 50%;
                position: absolute;
                right: 3em;
                transform: translateX(0em);
                animation: shrink 2s ease-in-out infinite;
            }

@keyframes grow {
    0% {
        transform: scale(0.5);
        background: #16C7F9;
    }

    50% {
        transform: scale(1);
        background: var(--theme-secondary);
    }
}

@keyframes move {
    0% {
        transform: translateX(7em);
    }

    50% {
        transform: translateX(-5em);
    }
}

@keyframes shrink {
    0% {
        transform: translateX(0em);
    }

    50% {
        transform: translateX(-1em);
    }
}

.loader-wrapper svg {
    width: 0;
    height: 0;
}

.loader-wrapper body {
    /*font-family: sans;*/
    min-height: 100vh;
    margin: 0;
    display: grid;
    background: black;
}

.loader-wrapper h1 {
    color: #fff;
    text-align: center;
    margin-bottom: 2em;
    letter-spacing: 3px;
    position: relative;
    z-index: 2;
}

    .loader-wrapper h1:before {
        position: absolute;
        content: "";
        height: 1px;
        background: linear-gradient(to right, var(--theme-secondary), var(--theme-default), #16C7F9);
        color: #fff;
        top: 2.75em;
        left: 0.75em;
        width: 2.5em;
        font-weight: 400;
        font-variant: small-caps;
        font-size: 0.5em;
    }

/**=====================
    2.21 Loader CSS Ends
==========================**/

/**=====================
  5.7 Sidebar CSS Start
==========================**/
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .mega-menu-container .mega-box .link-section .submenu-title h5:after, .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-submenu li a:after {
    position: absolute;
    content: "";
    top: 48%;
    width: 8px;
    border-top: 1px solid rgba(82, 82, 108, 0.4);
}

.media.media-wrapper {
    width: 100%;
    display: -webkit-flex;
}

.media .media-body {
    flex: unset;
    margin-left: 5px;
    word-break: break-word;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .mega-menu-container .mega-box .link-section .submenu-title h5::before, .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-submenu li a::before {
    position: absolute;
    content: "";
    width: 5px;
    height: 5px;
    top: 50%;
    transform: translateY(-50%);
    left: 25px;
    border-radius: 100%;
    background: var(--theme-default);
    opacity: 0;
    visibility: hidden;
}

[dir=rtl] .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .mega-menu-container .mega-box .link-section .submenu-title h5::before, .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .mega-menu-container .mega-box .link-section .submenu-title [dir=rtl] h5::before, [dir=rtl] .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-submenu li a::before, .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-submenu li [dir=rtl] a::before {
    left: unset;
    right: 25px;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .mega-menu-container::before, .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-submenu::before {
    position: absolute;
    content: "";
    width: 1px;
    height: 0;
    background: rgba(82, 82, 108, 0.4);
    top: -10px;
    left: 27px;
    transition: height 0.5s;
}

[dir=rtl] .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .mega-menu-container::before, .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li [dir=rtl] .mega-menu-container::before, [dir=rtl] .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-submenu::before, .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li [dir=rtl] .sidebar-submenu::before {
    left: unset;
    right: 27px;
}

.page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-submenu li a:after {
    position: absolute;
    content: "";
    top: 49%;
    width: 5px;
    height: 1px;
    border-radius: 100%;
    background-color: #59667a;
}

.onhover-show-div {
    box-shadow: 0 0 20px rgba(89, 102, 122, 0.1);
    transform: translateY(30px);
    opacity: 0;
    visibility: hidden;
    left: 0;
}

.onhover-dropdown:hover .onhover-show-div {
    opacity: 1;
    transform: translateY(0px);
    visibility: visible;
    border-radius: 5px;
    overflow: hidden;
}

    .onhover-dropdown:hover .onhover-show-div:before {
        width: 0;
        height: 0;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-bottom: 7px solid #fff;
        content: "";
        top: -7px;
        position: absolute;
        left: 10px;
        z-index: 2;
    }

    .onhover-dropdown:hover .onhover-show-div:after {
        width: 0;
        height: 0;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-bottom: 7px solid #d7e2e9;
        content: "";
        top: -7px;
        position: absolute;
        left: 10px;
        z-index: 1;
    }

.page-wrapper {
    position: relative;
}

    .page-wrapper .page-header {
        max-width: 100vw;
        position: fixed;
        top: 0;
        z-index: 1002;
        transition: 0.5s;
        background-color: #fff;
        box-shadow: 0px 4px 40px rgba(39, 32, 120, 0.1);
    }

        .page-wrapper .page-header .header-wrapper {
            width: 100%;
            height: 60px;
            align-items: center;
            padding: 0px 0px 0px 20px;
            position: relative;
        }

@media (max-width: 1399px) {
    .page-wrapper .page-header .header-wrapper {
        padding: 0px 0px 0px 20px;
    }
}

.page-wrapper .page-header .header-wrapper .search-full {
    background-color: #fff;
    position: absolute;
    right: 0;
    z-index: 1;
    height: 0;
    width: 0;
    transform: scale(0);
    transition: all 0.3s ease;
}

    .page-wrapper .page-header .header-wrapper .search-full.open {
        height: 100%;
        width: 100%;
        animation: zoomIn 0.5s ease-in-out;
        transform: scale(1);
        transition: all 0.3s ease;
    }

    .page-wrapper .page-header .header-wrapper .search-full input {
        line-height: 65px;
        padding-left: 60px;
        width: 100% !important;
    }

        .page-wrapper .page-header .header-wrapper .search-full input:focus {
            outline: none !important;
        }

    .page-wrapper .page-header .header-wrapper .search-full .form-group .close-search {
        position: absolute;
        font-size: 15px;
        right: 30px;
        top: 30px;
        color: #898989;
        cursor: pointer;
    }

[dir=rtl] .page-wrapper .page-header .header-wrapper .search-full .form-group .close-search {
    left: 30px;
    right: unset;
}

.page-wrapper .page-header .header-wrapper .search-full .form-group:before {
    position: absolute;
    left: 30px;
    top: 27px;
    content: "\f002";
    font-size: 16px;
    color: #898989;
    font-family: FontAwesome;
}

[dir=rtl] .page-wrapper .page-header .header-wrapper .search-full .form-group:before {
    left: unset;
    right: 30px;
}

.page-wrapper .page-header .header-wrapper .nav-right {
    justify-content: flex-end;
}

    .page-wrapper .page-header .header-wrapper .nav-right ul li svg {
        vertical-align: middle;
        width: 20px;
        height: 20px;
        stroke: rgba(47, 47, 59, 0.9);
        fill: none;
    }

        .page-wrapper .page-header .header-wrapper .nav-right ul li svg path {
            color: #242934;
        }

    .page-wrapper .page-header .header-wrapper .nav-right ul li .mode.active svg {
        fill: #fff;
    }

    .page-wrapper .page-header .header-wrapper .nav-right.right-header ul li .mode {
        cursor: pointer;
        text-align: center;
    }

        .page-wrapper .page-header .header-wrapper .nav-right.right-header ul li .mode i {
            font-size: 18px;
            font-weight: 600;
            transition: all 0.3s ease;
        }

            .page-wrapper .page-header .header-wrapper .nav-right.right-header ul li .mode i.fa-lightbulb-o {
                font-weight: 500;
                font-size: 22px;
                transition: all 0.3s ease;
                animation: zoomIn 300ms ease-in-out;
            }

    .page-wrapper .page-header .header-wrapper .nav-right.right-header ul li .header-search {
        cursor: pointer;
    }

    .page-wrapper .page-header .header-wrapper .nav-right.right-header ul li .profile-media .media-body {
        margin-left: 15px;
    }

        .page-wrapper .page-header .header-wrapper .nav-right.right-header ul li .profile-media .media-body span {
            font-weight: 500;
        }

        .page-wrapper .page-header .header-wrapper .nav-right.right-header ul li .profile-media .media-body p {
            font-size: 12px;
            line-height: 1;
            color: rgba(47, 47, 59, 0.7);
        }

    .page-wrapper .page-header .header-wrapper .nav-right > ul {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        line-height: 3;
    }

        .page-wrapper .page-header .header-wrapper .nav-right > ul > li {
            padding: 6px 0px;
            display: inline-block;
            position: relative;
            line-height: 1.5;
            margin: 0 15px;
        }

            .page-wrapper .page-header .header-wrapper .nav-right > ul > li .badge {
                position: absolute;
                right: -5px;
                top: -6px;
                padding: 2px 4px;
                font-size: 11px;
                font-weight: 700;
            }

            .page-wrapper .page-header .header-wrapper .nav-right > ul > li span ul {
                left: inherit;
                right: -10px;
                width: 130px;
            }

                .page-wrapper .page-header .header-wrapper .nav-right > ul > li span ul:before, .page-wrapper .page-header .header-wrapper .nav-right > ul > li span ul:after {
                    left: inherit;
                    right: 10px;
                }

                .page-wrapper .page-header .header-wrapper .nav-right > ul > li span ul li {
                    display: block;
                }

                    .page-wrapper .page-header .header-wrapper .nav-right > ul > li span ul li a {
                        font-size: 14px;
                        color: #2c323f;
                    }

                        .page-wrapper .page-header .header-wrapper .nav-right > ul > li span ul li a i {
                            margin-left: 10px;
                            font-size: 13px;
                            color: #2c323f;
                        }

        .page-wrapper .page-header .header-wrapper .nav-right > ul .flag-icon {
            font-size: 16px;
        }

    .page-wrapper .page-header .header-wrapper .nav-right .bookmark-flip {
        width: unset !important;
        box-shadow: unset !important;
        background-color: transparent !important;
        overflow: initial;
    }

        .page-wrapper .page-header .header-wrapper .nav-right .bookmark-flip::after, .page-wrapper .page-header .header-wrapper .nav-right .bookmark-flip::before {
            display: none;
        }

        .page-wrapper .page-header .header-wrapper .nav-right .bookmark-flip .bookmark-dropdown .bookmark-content {
            text-align: center;
        }

            .page-wrapper .page-header .header-wrapper .nav-right .bookmark-flip .bookmark-dropdown .bookmark-content .bookmark-icon {
                width: 52px;
                height: 52px;
                background-color: #f9f9f9;
                border-radius: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 0 auto;
            }

            .page-wrapper .page-header .header-wrapper .nav-right .bookmark-flip .bookmark-dropdown .bookmark-content span {
                font-size: 12px;
                font-weight: 500;
                letter-spacing: 0.5px;
            }

    .page-wrapper .page-header .header-wrapper .nav-right .flip-card {
        width: 300px;
        height: 260px;
        background-color: transparent;
    }

        .page-wrapper .page-header .header-wrapper .nav-right .flip-card .flip-card-inner {
            position: relative;
            height: 100%;
            text-align: center;
            transition: transform 0.6s;
            transform-style: preserve-3d;
        }

            .page-wrapper .page-header .header-wrapper .nav-right .flip-card .flip-card-inner .front,
            .page-wrapper .page-header .header-wrapper .nav-right .flip-card .flip-card-inner .back {
                position: absolute;
                backface-visibility: hidden;
                border-radius: 10px;
                overflow: hidden;
                box-shadow: 0 0 20px rgba(89, 102, 122, 0.1);
                width: 300px;
                height: 260px;
            }

                .page-wrapper .page-header .header-wrapper .nav-right .flip-card .flip-card-inner .front button,
                .page-wrapper .page-header .header-wrapper .nav-right .flip-card .flip-card-inner .back button {
                    background-color: transparent;
                    color: #7366FF;
                    border: none;
                }

                    .page-wrapper .page-header .header-wrapper .nav-right .flip-card .flip-card-inner .front button:focus,
                    .page-wrapper .page-header .header-wrapper .nav-right .flip-card .flip-card-inner .back button:focus {
                        outline: transparent;
                    }

            .page-wrapper .page-header .header-wrapper .nav-right .flip-card .flip-card-inner .front {
                background-color: #fff;
                transition: 0.3s;
            }

                .page-wrapper .page-header .header-wrapper .nav-right .flip-card .flip-card-inner .front svg {
                    stroke: #2c323f;
                    transition: all 0.3s ease;
                }

                    .page-wrapper .page-header .header-wrapper .nav-right .flip-card .flip-card-inner .front svg:hover {
                        stroke: var(--theme-default);
                        transition: all 0.3s ease;
                    }

            .page-wrapper .page-header .header-wrapper .nav-right .flip-card .flip-card-inner .back {
                background-color: #fff;
                transform: rotateY(180deg);
            }

                .page-wrapper .page-header .header-wrapper .nav-right .flip-card .flip-card-inner .back li:first-child {
                    margin-top: 20px;
                    height: 140px !important;
                }

                .page-wrapper .page-header .header-wrapper .nav-right .flip-card .flip-card-inner .back button {
                    width: 100%;
                }

                .page-wrapper .page-header .header-wrapper .nav-right .flip-card .flip-card-inner .back .flip-back-content input {
                    border-radius: 25px;
                    padding: 6px 12px;
                    width: 100%;
                    border: 1px solid #ddd;
                }

                    .page-wrapper .page-header .header-wrapper .nav-right .flip-card .flip-card-inner .back .flip-back-content input:focus {
                        outline: none;
                    }

            .page-wrapper .page-header .header-wrapper .nav-right .flip-card .flip-card-inner.flipped {
                transform: rotateY(180deg);
            }

                .page-wrapper .page-header .header-wrapper .nav-right .flip-card .flip-card-inner.flipped .front {
                    opacity: 0;
                }

    .page-wrapper .page-header .header-wrapper .nav-right .onhover-show-div {
        width: 330px;
        top: 50px;
        right: 0;
        left: unset;
    }

        .page-wrapper .page-header .header-wrapper .nav-right .onhover-show-div .dropdown-title {
            padding: 20px;
            text-align: center;
            border-bottom: 1px solid rgba(145, 142, 153, 0.3);
        }

        .page-wrapper .page-header .header-wrapper .nav-right .onhover-show-div ul {
            padding: 15px;
        }

        .page-wrapper .page-header .header-wrapper .nav-right .onhover-show-div li {
            padding: 15px;
        }

            .page-wrapper .page-header .header-wrapper .nav-right .onhover-show-div li p {
                font-size: 14px;
                letter-spacing: 0.3px;
                margin-bottom: 0;
            }

            .page-wrapper .page-header .header-wrapper .nav-right .onhover-show-div li a {
                text-decoration: underline;
                text-transform: uppercase;
                letter-spacing: 0.3px;
            }

            .page-wrapper .page-header .header-wrapper .nav-right .onhover-show-div li + li {
                margin-top: 15px;
            }

            .page-wrapper .page-header .header-wrapper .nav-right .onhover-show-div li:last-child {
                padding-bottom: 15px;
            }

            .page-wrapper .page-header .header-wrapper .nav-right .onhover-show-div li .media {
                position: relative;
            }

                .page-wrapper .page-header .header-wrapper .nav-right .onhover-show-div li .media img {
                    width: 40px;
                    position: relative;
                }

                .page-wrapper .page-header .header-wrapper .nav-right .onhover-show-div li .media .status-circle {
                    left: 0;
                }

                .page-wrapper .page-header .header-wrapper .nav-right .onhover-show-div li .media .media-body > span {
                    letter-spacing: 0.8px;
                    padding-right: 10px;
                    display: inline-block;
                }

                .page-wrapper .page-header .header-wrapper .nav-right .onhover-show-div li .media .media-body p {
                    margin-bottom: 8px;
                }

        .page-wrapper .page-header .header-wrapper .nav-right .onhover-show-div:before, .page-wrapper .page-header .header-wrapper .nav-right .onhover-show-div:after {
            right: 10px !important;
            left: unset !important;
        }

    .page-wrapper .page-header .header-wrapper .nav-right .notification-box {
        position: relative;
    }

    .page-wrapper .page-header .header-wrapper .nav-right .cart-box {
        position: relative;
    }

    .page-wrapper .page-header .header-wrapper .nav-right .cart-dropdown ul {
        padding: 0 0 15px;
    }

    .page-wrapper .page-header .header-wrapper .nav-right .cart-dropdown li {
        margin: 0 15px;
        padding: 10px 0;
    }

        .page-wrapper .page-header .header-wrapper .nav-right .cart-dropdown li .media {
            align-items: center;
        }

            .page-wrapper .page-header .header-wrapper .nav-right .cart-dropdown li .media .media-body {
                margin-right: 20px;
            }

[dir=rtl] .page-wrapper .page-header .header-wrapper .nav-right .cart-dropdown li .media .media-body {
    margin-right: unset;
    margin-left: 20px;
}

.page-wrapper .page-header .header-wrapper .nav-right .cart-dropdown li + li {
    margin-top: 0;
    border-top: 1px solid rgba(145, 142, 153, 0.1);
}

.page-wrapper .page-header .header-wrapper .nav-right .cart-dropdown li:last-child {
    padding: 20px 15px;
    border-top: none;
}

.page-wrapper .page-header .header-wrapper .nav-right .cart-dropdown p {
    line-height: 1.3;
    margin-top: 3px;
    opacity: 0.6;
}

.page-wrapper .page-header .header-wrapper .nav-right .cart-dropdown .close-circle {
    position: absolute;
    right: 0;
    top: 0;
}

    .page-wrapper .page-header .header-wrapper .nav-right .cart-dropdown .close-circle a {
        width: 18px;
        height: 18px;
        border-radius: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .page-wrapper .page-header .header-wrapper .nav-right .cart-dropdown .close-circle svg {
        width: 14px;
        stroke: #fff;
    }

.page-wrapper .page-header .header-wrapper .nav-right .cart-dropdown .qty-box {
    margin: 5px 0;
}

    .page-wrapper .page-header .header-wrapper .nav-right .cart-dropdown .qty-box .input-group {
        width: 80px;
        background-color: transparent;
    }

        .page-wrapper .page-header .header-wrapper .nav-right .cart-dropdown .qty-box .input-group input {
            background-color: transparent;
        }

        .page-wrapper .page-header .header-wrapper .nav-right .cart-dropdown .qty-box .input-group input,
        .page-wrapper .page-header .header-wrapper .nav-right .cart-dropdown .qty-box .input-group .btn {
            font-size: 10px;
            font-weight: 700;
        }

        .page-wrapper .page-header .header-wrapper .nav-right .cart-dropdown .qty-box .input-group .btn {
            padding: 0px 7px;
            background-color: #F7F6FF !important;
            border-color: #F7F6FF !important;
            border-radius: 100%;
            font-size: 14px;
            color: #2F2F3B;
        }

.page-wrapper .page-header .header-wrapper .nav-right .cart-dropdown .total {
    margin: 0;
    padding: 15px;
    background-color: #f9f9f9;
    border: none;
}

    .page-wrapper .page-header .header-wrapper .nav-right .cart-dropdown .total h6 {
        font-weight: 500;
        font-size: 12px;
        line-height: 14px;
        letter-spacing: 0.5px;
    }

        .page-wrapper .page-header .header-wrapper .nav-right .cart-dropdown .total h6 span {
            font-size: 14px;
        }

.page-wrapper .page-header .header-wrapper .nav-right .cart-dropdown .view-checkout {
    text-decoration: unset;
}

.page-wrapper .page-header .header-wrapper .nav-right .notification-box svg {
    animation: swing 1.5s ease infinite;
}

.page-wrapper .page-header .header-wrapper .nav-right .notification-dropdown {
    top: 27px;
    width: 300px;
    right: -20px !important;
    left: unset;
}

@media (max-width: 575.98px) {
    .page-wrapper .page-header .header-wrapper .nav-right .notification-dropdown {
        width: calc(100vw - 30px);
    }
}

.page-wrapper .page-header .header-wrapper .nav-right .notification-dropdown li {
    background-color: #f9f9f9;
    border-radius: 5px;
}

    .page-wrapper .page-header .header-wrapper .nav-right .notification-dropdown li:last-child {
        text-align: center;
        background-color: transparent;
    }

    .page-wrapper .page-header .header-wrapper .nav-right .notification-dropdown li p {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

        .page-wrapper .page-header .header-wrapper .nav-right .notification-dropdown li p span {
            font-size: 11px;
            vertical-align: middle;
        }

.page-wrapper .page-header .header-wrapper .nav-right .notification-dropdown:before, .page-wrapper .page-header .header-wrapper .nav-right .notification-dropdown:after {
    right: 28px !important;
    left: unset !important;
}

.page-wrapper .page-header .header-wrapper .nav-right .profile-dropdown {
    width: 200px;
    top: 36px;
    left: -152px;
    padding: 0 10px;
}

    .page-wrapper .page-header .header-wrapper .nav-right .profile-dropdown li {
        padding: 10px !important;
    }

        .page-wrapper .page-header .header-wrapper .nav-right .profile-dropdown li a {
            text-decoration: unset;
            display: block;
        }

        .page-wrapper .page-header .header-wrapper .nav-right .profile-dropdown li:hover a span {
            color: var(--theme-default);
            transition: color 0.3s ease;
        }

        .page-wrapper .page-header .header-wrapper .nav-right .profile-dropdown li:hover a svg {
            stroke: var(--theme-default);
            transition: stroke 0.3s ease;
        }

            .page-wrapper .page-header .header-wrapper .nav-right .profile-dropdown li:hover a svg path {
                stroke: var(--theme-default);
                transition: stroke 0.3s ease;
            }

        .page-wrapper .page-header .header-wrapper .nav-right .profile-dropdown li + li {
            margin-top: 0;
        }

        .page-wrapper .page-header .header-wrapper .nav-right .profile-dropdown li:last-child {
            padding-top: 10px !important;
        }

        .page-wrapper .page-header .header-wrapper .nav-right .profile-dropdown li span {
            color: #2c323f;
        }

        .page-wrapper .page-header .header-wrapper .nav-right .profile-dropdown li svg {
            width: 16px;
            vertical-align: bottom;
            margin-right: 10px;
            stroke: #2c323f;
        }

.page-wrapper .page-body-wrapper {
    background-color: #F7F8F9;
}

    .page-wrapper .page-body-wrapper .page-body {
        min-height: calc(100vh - 136px);
        margin-top: 136px;
        position: relative;
        transition: 0.5s;
    }

        .page-wrapper .page-body-wrapper .page-body:before {
            animation: fadeIn 0.5s ease-in-out;
        }

    .page-wrapper .page-body-wrapper .page-title {
        padding: 15px;
        margin: 0 -27px 15px;
        background-color: #fff;
        box-shadow: 0px 4px 40px rgba(39, 32, 120, 0.1);
    }

        .page-wrapper .page-body-wrapper .page-title > .row {
            margin: 0;
        }

            .page-wrapper .page-body-wrapper .page-title > .row .col-6 {
                padding: 0;
            }

        .page-wrapper .page-body-wrapper .page-title .row {
            align-items: center;
        }

            .page-wrapper .page-body-wrapper .page-title .row h3 {
                font-size: 24px;
                margin-bottom: 0;
                text-transform: capitalize;
            }

                .page-wrapper .page-body-wrapper .page-title .row h3 small {
                    display: block;
                    font-size: 12px;
                    margin-bottom: 5px;
                    text-transform: capitalize;
                    color: #52526c;
                }

        .page-wrapper .page-body-wrapper .page-title .breadcrumb {
            background-color: transparent;
            padding: 0;
            margin-bottom: 0;
            align-items: center;
            justify-content: flex-end;
        }

            .page-wrapper .page-body-wrapper .page-title .breadcrumb li {
                font-size: 13px;
                letter-spacing: 1px;
            }

            .page-wrapper .page-body-wrapper .page-title .breadcrumb .breadcrumb-item + .breadcrumb-item:before {
                content: "/";
            }

            .page-wrapper .page-body-wrapper .page-title .breadcrumb .breadcrumb-item a svg {
                width: 16px;
                height: 16px;
                stroke: #2c323f;
                vertical-align: text-top;
            }

            .page-wrapper .page-body-wrapper .page-title .breadcrumb .breadcrumb-item.active {
                color: var(--theme-default);
                font-weight: 500;
            }

    .page-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li a svg.stroke-icon {
        stroke: #2c323f;
    }

    .page-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li a svg.fill-icon {
        fill: #757589;
    }

    .page-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li a.active svg {
        transition: all 0.3s ease;
    }

        .page-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li a.active svg.stroke-icon {
            stroke: var(--theme-default);
        }

        .page-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li a.active svg.fill-icon {
            fill: var(--theme-default);
        }

    .page-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content li a {
        text-transform: capitalize;
    }

.page-wrapper .sidebar-wrapper[sidebar-layout=stroke-svg] .stroke-icon {
    display: inline-block;
}

.page-wrapper .sidebar-wrapper[sidebar-layout=stroke-svg] .fill-icon {
    display: none;
}

.page-wrapper .sidebar-wrapper[sidebar-layout=fill-svg] .stroke-icon {
    display: none;
}

.page-wrapper .sidebar-wrapper[sidebar-layout=fill-svg] .fill-icon {
    display: inline-block;
}

.page-wrapper.horizontal-wrapper [data-simplebar] {
    position: relative;
}

.page-wrapper.horizontal-wrapper .footer {
    margin-left: 0;
}

.page-wrapper.horizontal-wrapper .header-logo-wrapper {
    width: 150px;
}

    .page-wrapper.horizontal-wrapper .header-logo-wrapper .toggle-sidebar {
        display: none;
    }

.page-wrapper.horizontal-wrapper .sidebar-list i.fa-thumb-tack {
    visibility: hidden;
    position: absolute;
    top: 19px;
    right: 0px;
    color: #7366FF;
}

[dir=rtl] .page-wrapper.horizontal-wrapper .sidebar-list i.fa-thumb-tack {
    left: 0;
    right: unset;
}

.page-wrapper.horizontal-wrapper .sidebar-list:hover i.fa-thumb-tack {
    visibility: hidden;
    cursor: pointer;
}

.page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper {
    height: 54px;
    line-height: inherit;
    top: 79px;
    background: #fff;
    box-shadow: 0px 9px 24px rgba(89, 102, 122, 0.05);
    overflow-x: hidden;
    z-index: 1;
    overflow-y: visible;
    position: fixed;
    width: 100vw;
    border-top: 1px solid #efefef;
    z-index: 3;
}

    .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .simplebar-content {
        display: flex;
    }

    .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper li {
        display: inline-block;
    }

    .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .badge {
        position: absolute;
        top: 2px;
        right: 0px;
        z-index: 1;
    }

    .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .logo-wrapper,
    .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .logo-icon-wrapper {
        display: none;
    }

    .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main {
        text-align: left;
        position: relative;
    }

        .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main .left-arrow,
        .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main .right-arrow {
            position: absolute;
            top: 0px;
            padding: 15px;
            background-color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1;
            cursor: pointer;
        }

            .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main .left-arrow.disabled,
            .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main .right-arrow.disabled {
                display: none;
            }

        .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main .left-arrow {
            left: 0;
        }

        .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main .right-arrow {
            right: 0;
        }

        .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main .sidebar-links {
            list-style: none;
            margin: 0;
            padding: 0;
            line-height: normal;
            direction: ltr;
            text-align: left;
            display: -webkit-box !important;
            padding: 0 5px;
            transition: all 0.5s ease;
            white-space: nowrap;
        }

            .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main .sidebar-links li.sidebar-list a.active .according-menu i:before {
                content: "-";
            }

            .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main .sidebar-links li.sidebar-list a .according-menu {
                display: none;
            }

            .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main .sidebar-links li.sidebar-list ul.sidebar-submenu li a.active {
                color: var(--theme-default);
            }

                .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main .sidebar-links li.sidebar-list ul.sidebar-submenu li a.active:after {
                    background-color: var(--theme-default);
                }

            .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li {
                position: relative;
                padding-top: 10px;
                padding-bottom: 10px;
            }

                .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li.sidebar-main-title.pin-title {
                    display: none !important;
                }

                    .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li.sidebar-main-title.pin-title.show {
                        display: none !important;
                    }

                .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li:hover > a > span {
                    color: var(--theme-default);
                    transition: all 0.3s ease;
                }

                .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li:hover a {
                    background-color: rgba(115, 102, 255, 0.0015);
                    transition: all 0.3s ease;
                }

                    .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li:hover a svg.stroke-icon {
                        stroke: var(--theme-default);
                        transition: all 0.3s ease;
                    }

                    .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li:hover a svg.fill-icon {
                        fill: var(--theme-default);
                        transition: all 0.3s ease;
                    }

                .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li:first-child {
                    display: none !important;
                }

                .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li > a {
                    display: block;
                    color: #2F2F3B;
                    line-height: 23px;
                    text-decoration: none;
                    text-transform: capitalize;
                    padding: 5px 15px;
                    margin: 0 3px;
                    letter-spacing: 0.04em;
                    position: relative;
                    border-radius: 5px;
                    font-weight: 500;
                    transition: all 0.3s ease;
                }

                    .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li > a.active {
                        background-color: #dad6ff;
                        transition: all 0.3s ease;
                    }

                        .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li > a.active svg,
                        .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li > a.active span {
                            color: var(--theme-default);
                            transition: all 0.3s ease;
                        }

                    .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li > a .badge {
                        position: absolute;
                        top: -5px;
                        margin-left: 1px;
                        right: 10px;
                        padding: 0.2em 0.7em;
                    }

                    .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li > a svg {
                        width: 18px;
                        height: 18px;
                        vertical-align: middle;
                        margin-right: 10px;
                    }

                .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-submenu {
                    position: fixed;
                    z-index: 4;
                    box-shadow: 0 0 1px 0 #898989;
                    padding: 15px 0px 15px 0px;
                    background: white;
                }

                    .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-submenu li {
                        border: 0;
                        float: none;
                        position: relative;
                        display: block;
                    }

                        .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-submenu li a {
                            background: transparent;
                            padding: 4px 30px;
                            display: block;
                            transition: all 0.5s ease;
                            line-height: 1.9;
                            color: rgba(43, 43, 43, 0.6);
                            letter-spacing: 0.06em;
                            font-weight: 500;
                            transition: all 0.3s ease;
                        }

                            .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-submenu li a:after {
                                left: 20px;
                            }

                            .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-submenu li a:hover {
                                color: var(--theme-default);
                                letter-spacing: 1.5px;
                                transition: all 0.3s ease;
                            }

                                .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-submenu li a:hover:after {
                                    background-color: var(--theme-default);
                                }

                .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .mega-menu-container {
                    position: fixed;
                    right: 0;
                    left: 0;
                    margin: 0 auto;
                    z-index: 4;
                    box-shadow: 0 0 1px 0 #898989;
                    padding: 30px;
                    background: white;
                    width: 95%;
                    border-radius: 4px;
                    display: block !important;
                }

                    .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .mega-menu-container .mega-box {
                        width: 20%;
                    }

                        .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .mega-menu-container .mega-box .link-section .submenu-title h5 {
                            text-transform: uppercase;
                            font-size: 14px;
                            margin-left: -13px;
                        }

                        .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .mega-menu-container .mega-box .link-section .submenu-content {
                            box-shadow: none;
                            background-color: transparent;
                            position: relative;
                            display: block;
                            padding: 0;
                        }

                            .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .mega-menu-container .mega-box .link-section .submenu-content li {
                                border: 0;
                                float: none;
                                position: relative;
                                display: block;
                            }

                                .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .mega-menu-container .mega-box .link-section .submenu-content li a {
                                    border: 0 !important;
                                    background: transparent;
                                    color: #2F2F3B;
                                    border-radius: 0 !important;
                                    text-transform: capitalize;
                                    padding: 3px 0;
                                    font-size: 13px;
                                    display: block;
                                    letter-spacing: 0.07em;
                                    line-height: 1.9;
                                    position: relative;
                                    transition: all 0.3s ease;
                                }

                                    .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .mega-menu-container .mega-box .link-section .submenu-content li a:hover {
                                        color: var(--theme-default);
                                        letter-spacing: 1.5px;
                                        transition: all 0.3s ease;
                                    }

                                        .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .mega-menu-container .mega-box .link-section .submenu-content li a:hover:after {
                                            color: var(--theme-default);
                                            transition: all 0.3s ease;
                                        }

                                    .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .mega-menu-container .mega-box .link-section .submenu-content li a:after {
                                        position: absolute;
                                        content: "";
                                        left: -12px;
                                        top: 50%;
                                        width: 5px;
                                        height: 1px;
                                        background-color: #59667a;
                                    }

                .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li:hover > a:after {
                    left: 0;
                    right: 0;
                    opacity: 1;
                }

                .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li.mega-menu {
                    position: unset;
                }

    .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper.overlay-white {
        background-color: rgba(255, 255, 255, 0.08);
    }

.page-wrapper.horizontal-wrapper .page-body-wrapper .toggle-nav {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
}

    .page-wrapper.horizontal-wrapper .page-body-wrapper .toggle-nav i {
        font-size: 24px;
    }

.page-wrapper.horizontal-wrapper .page-body-wrapper .page-body {
    margin-top: 135px;
}

.page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-main-title {
    display: none !important;
}

.page-wrapper.horizontal-wrapper .page-body-wrapper.scorlled .sidebar-wrapper {
    display: none;
    transition: all 0.3s ease;
}

.page-wrapper.horizontal-wrapper .page-header {
    width: 100%;
    box-shadow: none;
}

    .page-wrapper.horizontal-wrapper .page-header .header-wrapper .form-control-plaintext {
        width: auto !important;
    }

    .page-wrapper.horizontal-wrapper .page-header .header-wrapper .left-header {
        width: 30%;
    }

@media (max-width: 1428px) and (min-width: 1324px) {
    .page-wrapper.horizontal-wrapper .page-header .header-wrapper .left-header {
        width: 32%;
    }
}

@media (max-width: 1323px) and (min-width: 1200px) {
    .page-wrapper.horizontal-wrapper .page-header .header-wrapper .left-header {
        width: 37%;
    }
}

@media (max-width: 1199px) and (min-width: 992px) {
    .page-wrapper.horizontal-wrapper .page-header .header-wrapper .left-header {
        width: 32%;
    }
}

@media (max-width: 1428px) and (min-width: 1324px) {
    .page-wrapper.horizontal-wrapper .page-header .header-wrapper .nav-right {
        width: 55%;
    }
}

@media (max-width: 1323px) and (min-width: 1200px) {
    .page-wrapper.horizontal-wrapper .page-header .header-wrapper .nav-right {
        width: 40%;
    }
}

@media (max-width: 1199px) and (min-width: 992px) {
    .page-wrapper.horizontal-wrapper .page-header .header-wrapper .nav-right {
        width: 50%;
    }
}

.page-wrapper.horizontal-wrapper.enterprice-type footer {
    margin-left: 0;
}

.page-wrapper.material-icon .card {
    border-radius: 30px;
    box-shadow: 0 0 20px rgba(115, 102, 255, 0.1);
}

.page-wrapper .sidebar-main-title h6 {
    font-size: 14px;
    font-weight: 600;
    color: #52526c;
    text-transform: uppercase;
    margin-bottom: 0;
    letter-spacing: 0.4px;
}

.page-wrapper.compact-wrapper .sidebar-list i.fa-thumb-tack {
    visibility: hidden;
    position: absolute;
    top: 11px;
    right: -9px;
    color: #7366FF;
    z-index: 9999;
}

[dir=rtl] .page-wrapper.compact-wrapper .sidebar-list i.fa-thumb-tack {
    left: -9px;
    right: unset;
}

.page-wrapper.compact-wrapper .sidebar-list:hover i.fa-thumb-tack {
    visibility: visible;
    cursor: pointer;
}

.page-wrapper.compact-wrapper .sidebar-list.pined {
    order: -1;
}

.page-wrapper.compact-wrapper .pin-title {
    order: -1;
}

.page-wrapper.compact-wrapper .page-header {
    /* margin-left: 265px; */
    width: calc(100% - 0px);
}

    .page-wrapper.compact-wrapper .page-header.close_icon {
        /*margin-left: 90px;
        width: calc(100% - 90px);*/
        margin-left: 0px;
        width: 100%;
    }

    /*.page-wrapper.compact-wrapper .page-header .header-wrapper .logo-wrapper {
        display: none;
    }*/

    .page-wrapper.compact-wrapper .page-header .header-wrapper .toggle-sidebar {
        display: none;
    }

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper {
    position: fixed;
    z-index: 10;
    height: 100%;
    line-height: inherit;
    background: #fff;
    width: 16.66666667%;
    text-align: left;
    transition: 0.3s;
    /*box-shadow: 0 0 21px 0 rgba(89, 102, 122, 0.1);*/
    box-shadow: none;
    border-right: 1px solid #E2E8F0;
    top: 3.8rem;
    left: 0;
}

    .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .logo-wrapper,
    .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .logo-icon-wrapper {
        padding: 22px 30px;
        box-shadow: -9px 0 20px rgba(89, 102, 122, 0.1);
        display: none;
    }

    .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .logo-icon-wrapper {
        display: none;
    }

    .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon {
        width: auto;
        transition: all 0.3s ease;
    }

        .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .badge {
            opacity: 0;
            width: 0;
            padding: 0;
        }

        .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li {
            max-width: 86px;
            margin: 0;
            transition: all 0.3s ease;
        }

            .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-submenu a {
                display: none;
            }

            .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li a {
                text-align: center;
                padding: 12px 14px;
                transition: all 0.3s ease;
            }

        .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .sidebar-main-title {
            display: none !important;
            opacity: 0;
            transition: all 0.3s ease;
        }

        .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .logo-wrapper {
            display: none;
        }

        .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .logo-icon-wrapper {
            text-align: right;
            display: block;
        }

        .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon:hover {
            width: 265px;
            transition: all 0.3s ease;
        }

            .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon:hover .badge {
                opacity: 1;
                width: auto;
                transition: all 0.3s ease;
            }

            .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon:hover .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li {
                max-width: unset;
                margin: initial;
                transition: all 0.3s ease;
            }

                .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon:hover .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li a {
                    text-align: left;
                }

[dir=rtl] .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon:hover .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li a {
    text-align: right;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon:hover .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-submenu a {
    display: block;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon:hover .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li > a {
    padding: 12px 15px;
    transition: all 0.3s ease;
}

    .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon:hover .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li > a span {
        display: inline-block;
    }

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon:hover .sidebar-main-title {
    opacity: 1;
    display: block !important;
    transition: all 0.3s ease;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon:hover .logo-wrapper {
    display: block;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon:hover .logo-icon-wrapper {
    display: none;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .mobile-sidebar {
    transform: translate(183px);
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon ~ .page-body,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon ~ footer {
    /*margin-left: 90px;*/
    margin-left: 0px;
    transition: 0.5s;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon ~ .footer-fix {
    width: calc(100% - 90px);
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .sidebar-main .sidebar-links {
    height: calc(100vh - 118px);
}

    .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-link::before {
        right: 20px;
        left: unset;
    }

    .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li a span {
        display: none;
    }

    .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .sidebar-main .sidebar-links .sidebar-list .sidebar-title.active ~ .sidebar-submenu {
        display: none;
    }

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .according-menu {
    display: none;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .left-arrow,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .right-arrow {
    display: none;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-list i.fa-thumb-tack {
    visibility: hidden;
    position: absolute;
    top: 16px;
    right: 35px;
    color: #05a4ee;
}

[dir=rtl] .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-list i.fa-thumb-tack {
    left: 35px;
    right: unset;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-list:hover i.fa-thumb-tack {
    visibility: visible;
    cursor: pointer;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-list.pined, .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-list.pin-title {
    order: -1;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .pin-title {
    order: -1;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links {
    height: calc(100vh - 140px);
    left: -300px;
    z-index: 99;
    transition: color 1s ease;
    overflow: auto;
    color: rgba(0, 0, 0, 0);
    margin-top: 20px;
    margin-bottom: 30px;
}

    .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li a {
        font-weight: 500;
    }

        .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li a svg {
            width: 18px;
            height: 18px;
            margin-right: 10px;
            vertical-align: -2px;
            float: none;
            transition: all 0.3s ease;
        }

        .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li a span {
            letter-spacing: 0.7px;
            text-transform: capitalize;
            color: rgba(82, 82, 108, 0.8);
        }

        .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li a.link-nav .according-menu {
            display: none;
        }

    .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li:last-child {
        border-bottom: none;
    }

    .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links.opennav {
        left: 0;
    }

    .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .back-btn {
        display: block;
        width: 100%;
        padding: 0;
    }

        .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .back-btn .mobile-back {
            padding: 20px;
            color: #242934;
            font-weight: 700;
            text-transform: uppercase;
            border-bottom: 1px solid #efefef;
            cursor: pointer;
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }

    .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li {
        display: block;
        width: 100%;
        position: relative;
    }

        .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li.sidebar-main-title {
            padding: 25px 0 6px 20px;
            margin-top: 10px;
        }

            .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li.sidebar-main-title.pin-title {
                display: none;
            }

                .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li.sidebar-main-title.pin-title.show {
                    display: block;
                }

[dir=rtl] .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li.sidebar-main-title {
    padding: 25px 20px 6px 0;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li.sidebar-main-title::before {
    position: absolute;
    content: "";
    top: 0;
    left: 50%;
    background: var(--sidebar-border);
    width: calc(100% - 40px);
    height: 1px;
    transform: translateX(-50%);
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li.sidebar-main-title:nth-child(2) {
    margin-top: 0;
}

    .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li.sidebar-main-title:nth-child(2)::before {
        display: none;
    }

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li.sidebar-list .badge {
    position: absolute;
    right: 50px;
    top: 14.5px;
    padding: 0.45em 0.8em 0.33em;
    z-index: 1;
    font-size: 10px;
    letter-spacing: 0.7px;
    font-weight: 600;
    border-radius: 10px;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li.sidebar-list:hover > a:hover {
    background-color: #e9f8ff;
    transition: all 0.3s ease;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li:hover .sidebar-link:not(.active):hover svg {
    fill: rgba(115, 102, 255, 0.001);
    stroke: var(--theme-default);
    transition: all 0.3s ease;
}

    .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li:hover .sidebar-link:not(.active):hover svg.fill-icon {
        fill: var(--theme-default);
        stroke: none;
    }

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li:hover .sidebar-link:not(.active):hover span {
    color: var(--theme-default);
    transition: all 0.3s ease;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li:hover .sidebar-link:not(.active):hover .according-menu i {
    color: var(--theme-default);
    transition: all 0.3s ease;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li a {
    padding: 12px 20px;
    position: relative;
    color: #222222;
    transition: all 0.3s ease;
}

    .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li a .sub-arrow {
        right: 20px;
        position: absolute;
        top: 10px;
    }

        .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li a .sub-arrow i {
            display: none;
        }

        .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li a .sub-arrow:before {
            display: none;
        }

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li:first-child {
    display: none !important;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-submenu {
    width: 100%;
    padding: 0;
    position: relative !important;
}

    .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-submenu > li a {
        padding-left: 48px !important;
        font-weight: 400;
    }

    .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-submenu .submenu-title .according-menu {
        top: 7px;
    }

    .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-submenu.opensubmenu {
        display: block;
    }

    .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-submenu li:hover > a {
        color: var(--theme-default);
        transition: all 0.3s ease;
    }

    .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-submenu li .nav-sub-childmenu {
        display: none;
        position: relative !important;
        right: 0;
        width: 100%;
        padding: 0;
    }

        .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-submenu li .nav-sub-childmenu.opensubchild {
            display: block;
        }

        .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-submenu li .nav-sub-childmenu li a {
            padding: 6px 45px;
            padding-left: 56px !important;
        }

            .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-submenu li .nav-sub-childmenu li a:after {
                display: none;
            }

    .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-submenu li a {
        padding: 7px 25px;
        font-size: 12px;
        color: #6B7C94;
        display: block;
        position: relative;
        letter-spacing: 0.06em;
        font-weight: 500;
        transition: all 0.3s ease;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-submenu li a.active {
            color: var(--theme-default);
        }

            .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-submenu li a.active::before {
                opacity: 1;
                visibility: visible;
            }

        .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-submenu li a:after {
            left: 27px;
        }

        .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-submenu li a:hover {
            margin-left: 0;
        }

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .mega-menu-container {
    padding: 0;
    position: relative;
}

    .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .mega-menu-container.opensubmenu {
        display: block;
    }

    .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .mega-menu-container .mega-box {
        width: 100%;
        padding: 0;
    }

        .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .mega-menu-container .mega-box .link-section:hover h5 {
            color: var(--theme-default) !important;
            transition: all 0.3s ease;
        }

        .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .mega-menu-container .mega-box .link-section .submenu-title {
            position: relative;
        }

            .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .mega-menu-container .mega-box .link-section .submenu-title h5 {
                margin-bottom: 0;
                line-height: 1.9;
                padding: 6px 25px 6px 45px;
                font-size: 14px;
                position: relative;
                color: rgba(43, 43, 43, 0.6);
                display: block;
                letter-spacing: 0.06em;
                font-weight: 500;
                cursor: pointer;
            }

                .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .mega-menu-container .mega-box .link-section .submenu-title h5:after {
                    left: 28px;
                }

            .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .mega-menu-container .mega-box .link-section .submenu-title.active h5 {
                color: var(--theme-default);
            }

                .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .mega-menu-container .mega-box .link-section .submenu-title.active h5::before {
                    opacity: 1;
                    visibility: visible;
                }

            .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .mega-menu-container .mega-box .link-section .submenu-title .according-menu {
                top: 8px;
            }

        .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .mega-menu-container .mega-box .link-section .submenu-content.opensubmegamenu li a {
            margin-bottom: 0;
            line-height: 1.9;
            padding: 6px 25px 6px 45px;
            font-size: 14px;
            position: relative;
            color: rgba(43, 43, 43, 0.6);
            display: block;
            letter-spacing: 0.06em;
            font-weight: 500;
        }

            .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .mega-menu-container .mega-box .link-section .submenu-content.opensubmegamenu li a:after {
                display: none;
            }

            .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .mega-menu-container .mega-box .link-section .submenu-content.opensubmegamenu li a.active {
                color: var(--theme-default);
            }

        .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .mega-menu-container .mega-box .link-section .submenu-content ul li a {
            line-height: 1.9;
        }

            .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .mega-menu-container .mega-box .link-section .submenu-content ul li a:hover {
                margin-left: 0;
            }

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li.mega-menu .sidebar-title.active ~ .mega-menu-container {
    display: block !important;
}

    .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li.mega-menu .sidebar-title.active ~ .mega-menu-container::before {
        height: calc(100% - 9px);
        transition: height 0.5s;
    }

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-link {
    transition: all 0.5s ease;
    display: block;
    cursor: pointer;
}

    .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-link::after {
        position: absolute;
        content: "";
        width: 4px;
        height: 35px;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        background-color: #05a6f0;
        border-radius: 5px 0px 0px 5px;
        opacity: 0;
        visibility: hidden;
    }

[dir=rtl] .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-link::after {
    right: unset;
    left: 0;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-link.active {
    transition: all 0.5s ease;
    position: relative;
    margin-bottom: 10px;
    background-color: #e9f8ff;
    cursor: pointer;
}

    .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-link.active::after {
        opacity: 1;
        visibility: visible;
    }

    .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-link.active ~ .sidebar-submenu::before {
        height: calc(100% - 8px);
        transition: height 0.5s;
    }

    .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-link.active .according-menu i {
        color: var(--theme-default);
    }

    .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-link.active span {
        color: var(--theme-default);
        transition: all 0.3s ease;
    }

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .simplebar-content {
    display: flex;
    flex-direction: column;
}

.page-wrapper.compact-wrapper .page-body-wrapper .mega-box.col {
    flex-basis: unset;
}

.page-wrapper.compact-wrapper .page-body-wrapper .according-menu {
    position: absolute;
    right: 20px;
    top: 11px;
    display: block;
}

    .page-wrapper.compact-wrapper .page-body-wrapper .according-menu i {
        vertical-align: middle;
        color: rgba(82, 82, 108, 0.8);
        font-weight: 500;
    }

.page-wrapper.compact-wrapper .page-body-wrapper .main-menu.border-section {
    border: none;
}

.page-wrapper.compact-wrapper .page-body-wrapper .main-menu .menu-left .main-menu-right .toggle-nav {
    position: absolute;
    z-index: 2;
    right: 145px;
    top: 6px;
}

    .page-wrapper.compact-wrapper .page-body-wrapper .main-menu .menu-left .main-menu-right .toggle-nav .sidebar-name {
        font-size: 18px;
        padding-left: 5px;
        text-transform: uppercase;
    }

.page-wrapper.compact-wrapper .page-body-wrapper .page-body {
    min-height: calc(100vh - 60px);
    margin-top: 60px;
    padding: 10px 10px 50px 10px;
    /*padding-top: 10px;
    padding-bottom: 60px; 
    margin-left: 265px;*/
}

.page-wrapper.compact-wrapper.dark-sidebar .sidebar-main-title h6, .page-wrapper.compact-wrapper.color-sidebar .sidebar-main-title h6 {
    color: rgba(255, 255, 255, 0.6);
}

.page-wrapper.compact-wrapper.dark-sidebar .toggle-sidebar svg, .page-wrapper.compact-wrapper.color-sidebar .toggle-sidebar svg {
    stroke: var(--theme-default);
}

.page-wrapper.compact-wrapper.dark-sidebar .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li a svg.stroke-icon, .page-wrapper.compact-wrapper.color-sidebar .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li a svg.stroke-icon {
    stroke: rgba(255, 255, 255, 0.6);
}

.page-wrapper.compact-wrapper.dark-sidebar .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li a svg.fill-icon, .page-wrapper.compact-wrapper.color-sidebar .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li a svg.fill-icon {
    fill: rgba(255, 255, 255, 0.6);
}

.page-wrapper.compact-wrapper.dark-sidebar .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li a.active svg.stroke-icon, .page-wrapper.compact-wrapper.color-sidebar .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li a.active svg.stroke-icon {
    stroke: var(--theme-default);
}

.page-wrapper.compact-wrapper.dark-sidebar .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li a.active svg.fill-icon, .page-wrapper.compact-wrapper.color-sidebar .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li a.active svg.fill-icon {
    fill: var(--theme-default);
}

.page-wrapper.compact-wrapper.dark-sidebar .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li.sidebar-main-title::before, .page-wrapper.compact-wrapper.color-sidebar .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li.sidebar-main-title::before {
    background: #374558;
}

.page-wrapper.compact-wrapper.dark-sidebar div.sidebar-wrapper, .page-wrapper.compact-wrapper.color-sidebar div.sidebar-wrapper {
    background-color: #262932;
}

    .page-wrapper.compact-wrapper.dark-sidebar div.sidebar-wrapper .sidebar-main .sidebar-links li a span, .page-wrapper.compact-wrapper.color-sidebar div.sidebar-wrapper .sidebar-main .sidebar-links li a span {
        color: rgba(255, 255, 255, 0.6);
    }

    .page-wrapper.compact-wrapper.dark-sidebar div.sidebar-wrapper .sidebar-main .sidebar-links li a svg.stroke-icon, .page-wrapper.compact-wrapper.color-sidebar div.sidebar-wrapper .sidebar-main .sidebar-links li a svg.stroke-icon {
        stroke: rgba(255, 255, 255, 0.6);
    }

    .page-wrapper.compact-wrapper.dark-sidebar div.sidebar-wrapper .sidebar-main .sidebar-links li a svg.fill-icon, .page-wrapper.compact-wrapper.color-sidebar div.sidebar-wrapper .sidebar-main .sidebar-links li a svg.fill-icon {
        fill: rgba(255, 255, 255, 0.6);
    }

    .page-wrapper.compact-wrapper.dark-sidebar div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .mega-menu-container .mega-box .link-section .submenu-title h5, .page-wrapper.compact-wrapper.color-sidebar div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .mega-menu-container .mega-box .link-section .submenu-title h5 {
        color: rgba(255, 255, 255, 0.6);
    }

    .page-wrapper.compact-wrapper.dark-sidebar div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .mega-menu-container .mega-box .link-section .submenu-content.opensubmegamenu li a, .page-wrapper.compact-wrapper.color-sidebar div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .mega-menu-container .mega-box .link-section .submenu-content.opensubmegamenu li a {
        color: rgba(255, 255, 255, 0.6);
        font-weight: 400;
    }

    .page-wrapper.compact-wrapper.dark-sidebar div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .mega-menu-container::after, .page-wrapper.compact-wrapper.color-sidebar div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .mega-menu-container::after {
        background-color: rgba(255, 255, 255, 0.2);
    }

    .page-wrapper.compact-wrapper.dark-sidebar div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-link.active, .page-wrapper.compact-wrapper.color-sidebar div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-link.active {
        background-color: rgba(115, 102, 255, 0.2);
    }

        .page-wrapper.compact-wrapper.dark-sidebar div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-link.active svg, .page-wrapper.compact-wrapper.color-sidebar div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-link.active svg {
            color: var(--theme-default);
            stroke: var(--theme-default);
        }

    .page-wrapper.compact-wrapper.dark-sidebar div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-submenu li a, .page-wrapper.compact-wrapper.color-sidebar div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-submenu li a {
        color: rgba(255, 255, 255, 0.6);
    }

    .page-wrapper.compact-wrapper.dark-sidebar div.sidebar-wrapper .sidebar-main .sidebar-links .sidebar-list ul.sidebar-submenu li a span, .page-wrapper.compact-wrapper.color-sidebar div.sidebar-wrapper .sidebar-main .sidebar-links .sidebar-list ul.sidebar-submenu li a span {
        color: rgba(255, 255, 255, 0.6);
    }

    .page-wrapper.compact-wrapper.dark-sidebar div.sidebar-wrapper .sidebar-main .sidebar-links .sidebar-list ul.sidebar-submenu li a.active, .page-wrapper.compact-wrapper.color-sidebar div.sidebar-wrapper .sidebar-main .sidebar-links .sidebar-list ul.sidebar-submenu li a.active {
        color: var(--theme-default);
    }

    .page-wrapper.compact-wrapper.dark-sidebar div.sidebar-wrapper .logo-wrapper .for-light, .page-wrapper.compact-wrapper.color-sidebar div.sidebar-wrapper .logo-wrapper .for-light {
        display: none;
    }

    .page-wrapper.compact-wrapper.dark-sidebar div.sidebar-wrapper .logo-wrapper .for-dark, .page-wrapper.compact-wrapper.color-sidebar div.sidebar-wrapper .logo-wrapper .for-dark {
        display: block;
    }

.page-wrapper.compact-wrapper.dark-sidebar .according-menu i, .page-wrapper.compact-wrapper.color-sidebar .according-menu i {
    color: rgba(255, 255, 255, 0.6);
}

.page-wrapper.compact-wrapper.color-sidebar div.sidebar-wrapper {
    background-color: #2f3c4e;
}

.page-wrapper.compact-sidebar .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content {
    display: flex;
    flex-direction: column;
}

.page-wrapper.compact-sidebar .sidebar-list i.fa-thumb-tack {
    visibility: hidden;
    position: absolute;
    top: 8px;
    right: 54px;
    color: #7366FF;
    width: 20px;
    height: 20px;
    background-color: #E0DDFF;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

[dir=rtl] .page-wrapper.compact-sidebar .sidebar-list i.fa-thumb-tack {
    left: 54px;
    right: unset;
}

.page-wrapper.compact-sidebar .sidebar-list:hover i.fa-thumb-tack {
    visibility: visible;
    cursor: pointer;
    z-index: 1;
}

.page-wrapper.compact-sidebar .sidebar-list.pined {
    order: -1;
}

.page-wrapper.compact-sidebar .pin-title {
    order: -1;
}

.page-wrapper.compact-sidebar ~ .bg-overlay1 {
    transition: 0.8s;
}

    .page-wrapper.compact-sidebar ~ .bg-overlay1.active {
        z-index: 8;
        height: 100vh;
        width: 100vw;
        background-color: rgba(0, 0, 0, 0.2);
        position: fixed;
        top: 0;
    }

.page-wrapper.compact-sidebar .toggle-sidebar {
    position: relative;
    right: unset;
    top: unset;
    margin-right: 15px;
}

.page-wrapper.compact-sidebar .sidebar-main-title {
    display: none;
}

.page-wrapper.compact-sidebar .logo-wrapper {
    display: none;
}

.page-wrapper.compact-sidebar .logo-icon-wrapper {
    display: block;
    text-align: center;
    padding: 24px 30px;
    box-shadow: -9px 0 20px rgba(89, 102, 122, 0.1);
}

.page-wrapper.compact-sidebar .page-header {
    margin-left: 150px;
    width: calc(100% - 150px);
}

    .page-wrapper.compact-sidebar .page-header .header-wrapper .logo-wrapper {
        display: none;
    }

    .page-wrapper.compact-sidebar .page-header .header-wrapper .left-header {
        width: 30%;
    }

@media (max-width: 1578px) and (min-width: 1274px) {
    .page-wrapper.compact-sidebar .page-header .header-wrapper .left-header {
        width: 38%;
    }
}

@media (max-width: 1273px) and (min-width: 1200px) {
    .page-wrapper.compact-sidebar .page-header .header-wrapper .left-header {
        width: 45%;
    }
}

@media (max-width: 991px) and (min-width: 768px) {
    .page-wrapper.compact-sidebar .page-header .header-wrapper .left-header {
        width: 36%;
    }
}

@media (max-width: 767px) and (min-width: 756px) {
    .page-wrapper.compact-sidebar .page-header .header-wrapper .left-header {
        width: 28%;
    }
}

@media (max-width: 1199px) {
    .page-wrapper.compact-sidebar .page-header .header-wrapper .left-header h6 {
        width: 132px;
    }
}

@media (max-width: 767px) {
    .page-wrapper.compact-sidebar .page-header .header-wrapper .left-header h6 {
        width: 83px;
    }
}

.page-wrapper.compact-sidebar .page-header.close_icon {
    margin-left: 0;
    width: calc(100% - 0px);
}

.page-wrapper.compact-sidebar .page-body-wrapper .page-body {
    margin-top: 80px;
    margin-left: 150px;
}

.page-wrapper.compact-sidebar .page-body-wrapper .footer {
    margin-left: 150px;
}

.page-wrapper.compact-sidebar .page-body-wrapper div.sidebar-wrapper {
    position: fixed;
    top: 0;
    z-index: 9;
}

    .page-wrapper.compact-sidebar .page-body-wrapper div.sidebar-wrapper > div {
        height: auto;
        line-height: inherit;
        background: #fff;
        width: 150px;
        text-align: left;
        transition: 0.3s;
        box-shadow: 0 0 21px 0 rgba(89, 102, 122, 0.1);
    }

    .page-wrapper.compact-sidebar .page-body-wrapper div.sidebar-wrapper .sidebar-main .left-arrow,
    .page-wrapper.compact-sidebar .page-body-wrapper div.sidebar-wrapper .sidebar-main .right-arrow {
        display: none;
    }

    .page-wrapper.compact-sidebar .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links {
        margin: 30px 0;
        height: calc(100vh - 113px);
        overflow: auto;
    }

        .page-wrapper.compact-sidebar .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li a {
            color: #2c323f;
        }

            .page-wrapper.compact-sidebar .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li a span {
                text-transform: capitalize;
                color: #2c323f;
                font-weight: 500;
                letter-spacing: 1px;
                font-size: 14px;
            }

            .page-wrapper.compact-sidebar .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li a.active {
                background: rgba(115, 102, 255, 0.1);
                color: #7366FF;
                border-radius: 20px;
                margin: 0 10px;
            }

                .page-wrapper.compact-sidebar .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li a.active span {
                    color: #7366FF;
                }

                .page-wrapper.compact-sidebar .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li a.active ~ .sidebar-submenu,
                .page-wrapper.compact-sidebar .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li a.active ~ .mega-menu-container {
                    animation: fadeInLeft 300ms ease-in-out;
                }

        .page-wrapper.compact-sidebar .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li .sidebar-title {
            display: block;
            padding: 20px 0;
            border-bottom: 1px solid #f3f3f3;
        }

        .page-wrapper.compact-sidebar .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li .sidebar-submenu,
        .page-wrapper.compact-sidebar .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li .mega-menu-container {
            position: fixed;
            top: 0px;
            height: calc(100vh - 0px);
            overflow: auto;
            left: 150px;
            width: 230px;
            background-color: #fff;
            box-shadow: 0 16px 15px 15px rgba(126, 55, 216, 0.03);
            transition: all 0.5s ease-in-out;
            display: none;
            padding-top: 20px;
            z-index: -1;
        }

            .page-wrapper.compact-sidebar .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li .sidebar-submenu li a,
            .page-wrapper.compact-sidebar .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li .mega-menu-container li a {
                padding: 15px 15px 15px 40px;
                display: block;
                position: relative;
                border-bottom: 1px solid #f1f1f1;
            }

                .page-wrapper.compact-sidebar .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li .sidebar-submenu li a .sub-arrow,
                .page-wrapper.compact-sidebar .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li .mega-menu-container li a .sub-arrow {
                    display: none;
                }

                .page-wrapper.compact-sidebar .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li .sidebar-submenu li a .according-menu,
                .page-wrapper.compact-sidebar .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li .mega-menu-container li a .according-menu {
                    position: absolute;
                    right: 20px;
                    top: 16px;
                }

                .page-wrapper.compact-sidebar .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li .sidebar-submenu li a.active,
                .page-wrapper.compact-sidebar .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li .mega-menu-container li a.active {
                    background-color: rgba(115, 102, 255, 0.1);
                    color: #7366FF;
                    transition: all 0.3s ease;
                }

            .page-wrapper.compact-sidebar .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li .sidebar-submenu li .submenu-content li a.active,
            .page-wrapper.compact-sidebar .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li .mega-menu-container li .submenu-content li a.active {
                background-color: transparent;
            }

            .page-wrapper.compact-sidebar .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li .sidebar-submenu > li > a::after,
            .page-wrapper.compact-sidebar .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li .mega-menu-container > li > a::after {
                position: absolute;
                content: "";
                left: 20px;
                top: 48%;
                width: 8px;
                border-top: 2px solid rgba(82, 82, 108, 0.4);
            }

            .page-wrapper.compact-sidebar .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li .sidebar-submenu .mega-box,
            .page-wrapper.compact-sidebar .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li .mega-menu-container .mega-box {
                flex: 0 0 100%;
                max-width: 100%;
                padding: 0;
            }

                .page-wrapper.compact-sidebar .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li .sidebar-submenu .mega-box .link-section,
                .page-wrapper.compact-sidebar .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li .mega-menu-container .mega-box .link-section {
                    text-align: left;
                }

                    .page-wrapper.compact-sidebar .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li .sidebar-submenu .mega-box .link-section .submenu-title h5,
                    .page-wrapper.compact-sidebar .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li .mega-menu-container .mega-box .link-section .submenu-title h5 {
                        position: relative;
                        font-size: 14px;
                        font-weight: 400;
                        padding: 15px 15px 15px 40px;
                        letter-spacing: 1px;
                        margin-bottom: 0;
                    }

                        .page-wrapper.compact-sidebar .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li .sidebar-submenu .mega-box .link-section .submenu-title h5::after,
                        .page-wrapper.compact-sidebar .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li .mega-menu-container .mega-box .link-section .submenu-title h5::after {
                            position: absolute;
                            content: "";
                            left: 20px;
                            top: 48%;
                            width: 6px;
                            border-top: 2px solid #595c60;
                        }

        .page-wrapper.compact-sidebar .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .sidebar-list {
            position: relative;
        }

            .page-wrapper.compact-sidebar .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .sidebar-list .badge {
                position: absolute;
                left: 53%;
                top: 7px;
                font-weight: 500;
                font-size: 9px;
            }

            .page-wrapper.compact-sidebar .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .sidebar-list .sidebar-link {
                text-align: center;
            }

                .page-wrapper.compact-sidebar .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .sidebar-list .sidebar-link svg {
                    margin: 0 auto 6px;
                    width: 24px;
                    height: 24px;
                }

                .page-wrapper.compact-sidebar .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .sidebar-list .sidebar-link > span {
                    display: block;
                    font-weight: 500;
                    letter-spacing: 1px;
                    font-size: 14px;
                    word-break: break-word;
                }

                .page-wrapper.compact-sidebar .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .sidebar-list .sidebar-link .according-menu {
                    display: none;
                }

        .page-wrapper.compact-sidebar .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .mega-menu {
            text-align: center;
            padding: 0;
        }

            .page-wrapper.compact-sidebar .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .mega-menu svg {
                width: 24px;
                height: 24px;
            }

            .page-wrapper.compact-sidebar .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .mega-menu .according-menu {
                position: absolute;
                right: 20px;
                top: 13px;
            }

    .page-wrapper.compact-sidebar .page-body-wrapper div.sidebar-wrapper[sidebar-layout=stroke-svg] .sidebar-links .mega-menu svg.stroke-icon {
        display: block;
        margin: 0 auto 6px;
    }

    .page-wrapper.compact-sidebar .page-body-wrapper div.sidebar-wrapper[sidebar-layout=stroke-svg] .sidebar-links .mega-menu svg.fill-icon {
        display: none;
    }

    .page-wrapper.compact-sidebar .page-body-wrapper div.sidebar-wrapper[sidebar-layout=fill-svg] .sidebar-links .mega-menu svg.stroke-icon {
        display: none;
    }

    .page-wrapper.compact-sidebar .page-body-wrapper div.sidebar-wrapper[sidebar-layout=fill-svg] .sidebar-links .mega-menu svg.fill-icon {
        display: block;
        margin: 0 auto 6px;
    }

    .page-wrapper.compact-sidebar .page-body-wrapper div.sidebar-wrapper.close_icon {
        transform: translateX(-150px);
    }

        .page-wrapper.compact-sidebar .page-body-wrapper div.sidebar-wrapper.close_icon ~ .page-body,
        .page-wrapper.compact-sidebar .page-body-wrapper div.sidebar-wrapper.close_icon ~ .footer {
            margin-left: 0px;
        }

.page-wrapper.compact-small .toggle-sidebar {
    position: relative;
    right: unset;
    top: unset;
    margin-right: 15px;
}

.page-wrapper.compact-small .sidebar-list i.fa-thumb-tack {
    visibility: hidden;
    position: absolute;
    top: 8px;
    right: 22px;
    color: #7366FF;
    width: 20px;
    height: 20px;
    background-color: #E0DDFF;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

[dir=rtl] .page-wrapper.compact-small .sidebar-list i.fa-thumb-tack {
    left: 22px;
    right: unset;
}

.page-wrapper.compact-small .sidebar-list:hover i.fa-thumb-tack {
    visibility: visible;
}

.page-wrapper.compact-small .sidebar-list.pined, .page-wrapper.compact-small .sidebar-list.pin-title {
    order: -1;
}

.page-wrapper.compact-small .sidebar-main-title,
.page-wrapper.compact-small .logo-wrapper {
    display: none;
}

.page-wrapper.compact-small .logo-icon-wrapper {
    display: block;
    text-align: center;
    padding: 27px 30px;
    box-shadow: -9px 0 20px rgba(89, 102, 122, 0.1);
}

.page-wrapper.compact-small .page-header {
    margin-left: 90px;
    width: calc(100% - 90px);
}

    .page-wrapper.compact-small .page-header .header-wrapper .logo-wrapper {
        display: none;
    }

    .page-wrapper.compact-small .page-header.close_icon {
        margin-left: 0;
        width: calc(100% - 0px);
    }

.page-wrapper.compact-small .page-body-wrapper .page-body {
    margin-left: 90px;
}

.page-wrapper.compact-small .page-body-wrapper .footer {
    margin-left: 90px;
}

.page-wrapper.compact-small .page-body-wrapper div.sidebar-wrapper > div {
    width: 90px;
}

@media (max-width: 420px) {
    .page-wrapper.compact-small .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links {
        height: calc(100vh - 105px);
    }
}

.page-wrapper.compact-small .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li .sidebar-title {
    display: block;
    padding: 15px 0;
}

.page-wrapper.compact-small .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li .sidebar-submenu,
.page-wrapper.compact-small .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li .mega-menu-container {
    left: 90px;
}

    .page-wrapper.compact-small .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li .sidebar-submenu li a,
    .page-wrapper.compact-small .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li .mega-menu-container li a {
        padding: 10px 15px 10px 40px;
    }

        .page-wrapper.compact-small .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li .sidebar-submenu li a .sub-arrow,
        .page-wrapper.compact-small .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li .mega-menu-container li a .sub-arrow {
            display: none;
        }

        .page-wrapper.compact-small .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li .sidebar-submenu li a .according-menu,
        .page-wrapper.compact-small .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li .mega-menu-container li a .according-menu {
            top: 11px;
        }

.page-wrapper.compact-small .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .sidebar-list .badge {
    display: none;
}

.page-wrapper.compact-small .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .sidebar-list .sidebar-link svg {
    margin: 0 auto;
    width: 20px;
    height: 20px;
}

.page-wrapper.compact-small .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .sidebar-list .sidebar-link > span {
    display: none;
}

.page-wrapper.compact-small .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .mega-menu svg {
    margin: 0 auto;
}

.page-wrapper.compact-small .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .mega-menu a > span {
    display: none;
}

.page-wrapper.compact-small .page-body-wrapper div.sidebar-wrapper.close_icon {
    transform: translateX(-150px);
}

    .page-wrapper.compact-small .page-body-wrapper div.sidebar-wrapper.close_icon ~ .page-body,
    .page-wrapper.compact-small .page-body-wrapper div.sidebar-wrapper.close_icon ~ .footer {
        margin-left: 0px;
    }

.page-wrapper.only-body {
    background-color: #f2f0fa;
}

    .page-wrapper.only-body .page-body-wrapper {
        background-color: #f2f0fa;
    }

    .page-wrapper.only-body .page-header {
        position: relative;
    }

        .page-wrapper.only-body .page-header .header-logo-wrapper {
            display: none;
        }

        .page-wrapper.only-body .page-header .header-wrapper {
            padding: 0 !important;
        }

            .page-wrapper.only-body .page-header .header-wrapper .left-header {
                display: none;
            }

            .page-wrapper.only-body .page-header .header-wrapper .nav-right {
                position: absolute;
                right: 60px;
                top: 58px;
            }

            .page-wrapper.only-body .page-header .header-wrapper .search-full {
                top: 37px;
                width: calc(100% - 50px);
                left: 25px;
            }

[dir=rtl] .page-wrapper.only-body .page-header .header-wrapper .search-full {
    left: unset;
    right: 25px;
}

.page-wrapper.only-body .page-header .header-wrapper .search-full .form-group .Typeahead .u-posRelative {
    background-color: #fff;
    border-radius: 15px;
}

.page-wrapper.only-body .page-header .header-wrapper .search-full .Typeahead-menu {
    top: 78px;
    width: calc(100% - 30px);
    margin: 0 auto;
    right: 0;
}

.page-wrapper.only-body .page-body-wrapper .page-title {
    padding-top: 20px;
    padding-bottom: 20px;
}

.page-wrapper.only-body .sidebar-wrapper,
.page-wrapper.only-body footer {
    display: none;
}

.page-wrapper.only-body .page-body-wrapper .page-body {
    margin-top: 0px;
    min-height: calc(100vh - 0px);
}

.page-wrapper.only-body .page-body-wrapper .page-title {
    padding-left: 30px;
    padding-right: 30px;
    margin: 30px 0;
    border-radius: 15px;
}

@media (max-width: 991.98px) {
    .page-wrapper.only-body .page-body-wrapper .page-title {
        padding-left: 20px;
        padding-right: 20px;
        margin: 20px 0;
    }
}

.page-wrapper.only-body .page-body-wrapper .page-title > .row .col-6 {
    flex: 0 0 100%;
    max-width: 100%;
}

.page-wrapper.only-body .page-body-wrapper .page-title .breadcrumb {
    margin-top: 5px;
    justify-content: flex-start;
}

.page-wrapper.modern-type .progress-chart-wrap {
    margin-left: -22px;
}

[dir=rtl] .page-wrapper.modern-type .progress-chart-wrap {
    margin-left: unset;
    margin-right: -22px;
}

.page-wrapper.modern-type .ecommerce-widget {
    border: 1px solid #dad6ff !important;
}

.page-wrapper.modern-type .file-sidebar .pricing-plan {
    border: 1px solid #dad6ff !important;
}

.page-wrapper.modern-type .alert-primary {
    color: #7366FF;
}

.page-wrapper.modern-type .project-box {
    background-color: #dad6ff;
}

.page-wrapper.modern-type .nav-tabs .nav-link.active {
    background-color: transparent;
}

.page-wrapper.modern-type .simplebar-mask {
    top: 10px;
}

.page-wrapper.modern-type .page-header {
    margin-left: 0px;
    width: calc(100% - 0px);
}

    .page-wrapper.modern-type .page-header.close_icon {
        margin-left: 0px;
        width: calc(100% - 0px);
    }

    .page-wrapper.modern-type .page-header .header-wrapper .left-header {
        width: 30%;
    }

@media (max-width: 1428px) and (min-width: 1200px) {
    .page-wrapper.modern-type .page-header .header-wrapper .left-header {
        width: 37%;
    }
}

@media (max-width: 818px) {
    .page-wrapper.modern-type .page-header .header-wrapper .left-header {
        width: 36%;
    }
}

@media (max-width: 1669px) {
    .page-wrapper.modern-type .page-header .header-wrapper .nav-right {
        width: 50%;
    }
}

@media (max-width: 1428px) and (min-width: 1200px) {
    .page-wrapper.modern-type .page-header .header-wrapper .nav-right {
        width: 40%;
    }
}

.page-wrapper.modern-type .page-header .header-wrapper .header-logo-wrapper {
    display: flex;
    align-items: center;
}

.page-wrapper.modern-type .page-header .header-wrapper .logo-wrapper {
    display: block;
    margin-right: 30px;
}

.page-wrapper.modern-type .page-header .header-wrapper .toggle-sidebar {
    display: block;
    position: relative;
    top: unset;
    right: unset;
    margin-right: 15px;
}

.page-wrapper.modern-type .page-body-wrapper .page-title {
    background-color: transparent;
    padding-bottom: 0;
}

.page-wrapper.modern-type .page-body-wrapper div.sidebar-wrapper {
    margin: 30px !important;
    top: 80px;
    bottom: 0;
    border-radius: 15px;
}

    .page-wrapper.modern-type .page-body-wrapper div.sidebar-wrapper .logo-wrapper,
    .page-wrapper.modern-type .page-body-wrapper div.sidebar-wrapper .logo-icon-wrapper {
        display: none;
    }

    .page-wrapper.modern-type .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links {
        height: calc(100vh - 160px);
    }

    .page-wrapper.modern-type .page-body-wrapper div.sidebar-wrapper.close_icon .logo-icon-wrapper {
        display: none;
    }

    .page-wrapper.modern-type .page-body-wrapper div.sidebar-wrapper.close_icon ~ .page-body {
        margin-left: 0px;
    }

    .page-wrapper.modern-type .page-body-wrapper div.sidebar-wrapper.close_icon ~ footer {
        margin-left: 0px;
        margin-right: 0px;
    }

    .page-wrapper.modern-type .page-body-wrapper div.sidebar-wrapper.close_icon:hover .logo-wrapper {
        display: none;
    }

.page-wrapper.modern-type .page-body-wrapper .page-body {
    margin-left: 296px;
}

    .page-wrapper.modern-type .page-body-wrapper .page-body .container-fluid {
        max-width: 1500px;
    }

.page-wrapper.modern-type .page-body-wrapper .footer {
    margin-left: 360px;
    margin-right: 70px;
    border-radius: 10px;
}

@media (max-width: 991px) {
    .page-wrapper.modern-type .page-body-wrapper .footer {
        margin-right: 0;
        margin-left: 0;
    }
}

.page-wrapper.material-type {
    position: relative;
}

    .page-wrapper.material-type::before {
        position: absolute;
        content: "";
        left: 0;
        width: 100%;
        height: 300px;
        background-image: linear-gradient(103.75deg, #33B1EE -13.9%, var(--theme-default) 79.68%);
    }

    .page-wrapper.material-type .card {
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
    }

    .page-wrapper.material-type .page-header {
        position: relative;
        max-width: 1560px;
        margin: 50px auto 0;
        border-radius: 15px 15px 0 0;
    }

        .page-wrapper.material-type .page-header .header-wrapper .left-header {
            width: 31%;
        }

@media (max-width: 1600px) {
    .page-wrapper.material-type .page-header .header-wrapper .left-header {
        width: 33%;
    }
}

@media (max-width: 1366px) {
    .page-wrapper.material-type .page-header .header-wrapper .left-header {
        width: 38%;
    }
}

@media (max-width: 1199px) {
    .page-wrapper.material-type .page-header .header-wrapper .left-header {
        width: 30%;
    }
}

@media (max-width: 1600px) {
    .page-wrapper.material-type .page-header .header-wrapper .nav-right {
        width: 40%;
    }
}

@media (max-width: 1199px) {
    .page-wrapper.material-type .page-header .header-wrapper .nav-right {
        width: 45%;
    }
}

.page-wrapper.material-type .page-body-wrapper {
    background-image: url(../images/other-images/boxbg.jpg);
    background-color: rgba(255, 255, 255, 0.5);
}

    .page-wrapper.material-type .page-body-wrapper .sidebar-wrapper {
        position: relative;
        max-width: 1560px;
        margin: 0 auto;
        top: unset;
        height: 56px;
    }

    .page-wrapper.material-type .page-body-wrapper .page-body {
        margin: 0 auto;
        max-width: 1560px;
        background-color: #f8f8f8;
        box-shadow: 0 0 20px 7px rgba(8, 21, 66, 0.05);
        border-radius: 0 0 15px 15px;
    }

.page-wrapper.material-type .footer {
    margin-top: 40px;
}

.page-wrapper.material-type.compact-wrapper .page-header .header-wrapper .left-header {
    width: 38%;
}

@media (max-width: 991px) {
    .page-wrapper.material-type.compact-wrapper .page-header .header-wrapper .nav-right {
        width: 50%;
    }
}

.page-wrapper.advance-layout {
    background-blend-mode: overlay;
    background-color: #F7F8F9;
}

    .page-wrapper.advance-layout .card {
        border-radius: 5px;
        box-shadow: none;
        border: 1px solid #ecf3fa;
    }

    .page-wrapper.advance-layout .page-header {
        position: relative;
        background-color: #fff;
        margin: 0 auto;
    }

    .page-wrapper.advance-layout .page-body-wrapper {
        background: transparent;
    }

        .page-wrapper.advance-layout .page-body-wrapper .sidebar-wrapper {
            position: relative !important;
            top: unset !important;
            height: unset;
            box-shadow: none;
            border-top: 1px solid #efefef;
            border-bottom: 1px solid #efefef;
        }

            .page-wrapper.advance-layout .page-body-wrapper .sidebar-wrapper > div {
                overflow-x: hidden;
            }

        .page-wrapper.advance-layout .page-body-wrapper .page-body {
            margin-top: 0 !important;
        }

@keyframes pagebody {
    from {
        opacity: 0;
        transform: scale3d(0.98, 0.98, 0.98) translate(-20px, -50px);
    }

    50% {
        opacity: 1;
    }
}

.md-sidebar {
    position: relative;
}

    .md-sidebar .md-sidebar-toggle {
        display: none;
        width: fit-content;
        text-transform: capitalize;
        margin-bottom: 20px;
    }

@media screen and (max-width: 1480px) {
    .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .mega-menu-container {
        right: -18%;
        width: 91%;
    }
}

@media screen and (max-width: 1460px) {
    .page-wrapper.horizontal-wrapper .page-body-wrapper.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .mega-menu-container {
        right: -54%;
        width: 75%;
    }

    .sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li {
        margin-right: 8px;
    }
}

@media screen and (max-width: 1366px) {
    .page-wrapper.horizontal-wrapper .page-body-wrapper.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .mega-menu-container {
        right: -49%;
        width: 70%;
    }

    .profile-dropdown.onhover-show-div {
        right: 0;
        left: unset !important;
    }

        .profile-dropdown.onhover-show-div:before, .profile-dropdown.onhover-show-div:after {
            right: 10px !important;
            left: unset !important;
        }
}

@media screen and (max-width: 1199px) {
    .page-wrapper .page-header .header-wrapper .nav-right > ul > li {
        padding: 6px;
    }

    .mobile-title.d-none {
        display: flex !important;
        justify-content: space-between;
        padding: 20px 30px 17px;
        border-bottom: 1px solid #ddd;
        margin: 0 -15px;
    }

        .mobile-title.d-none h5 {
            color: var(--theme-default);
        }

        .mobile-title.d-none svg {
            stroke: var(--theme-default) !important;
        }

    .page-wrapper.horizontal-wrapper .page-body-wrapper.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .mega-menu-container {
        right: -35%;
        width: 56%;
    }
}

@media screen and (min-width: 992px) {
    .page-header .header-wrapper .nav-right .notification-dropdown {
        top: 46px;
    }

    .responsive-btn {
        display: none;
    }

    .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-main .sidebar-links .simplebar-mask {
        top: 0;
    }

    .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-submenu {
        width: 200px;
        opacity: 0;
        visibility: hidden;
        border-radius: 5px;
        transition: all 0.5s ease;
    }

        .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-submenu a .sub-arrow {
            position: absolute;
            right: 20px;
            top: 5px;
            color: #59667a;
            font-weight: 100;
            transition: all 0.5s ease;
            font-size: 15px;
            top: 5px;
        }

        .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-submenu li .nav-sub-childmenu {
            display: none;
            border-radius: 4px;
        }

        .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-submenu li:hover .nav-sub-childmenu {
            display: block;
            position: absolute;
            left: 200px;
            background-color: #fff;
            top: -10px;
            padding: 15px 0px 15px 0px;
            box-shadow: 0 0 1px 0 #898989;
        }

        .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-submenu li a:hover .sub-arrow {
            right: 16px;
            transition: all 0.5s ease;
        }

    .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .mega-menu-container {
        opacity: 0;
        visibility: hidden;
        transition: all 0.5s ease;
    }

    .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li.hoverd .sidebar-submenu {
        opacity: 1;
        visibility: visible;
        margin-top: 8px;
        transition: all 0.5s ease;
    }

    .sidebar-submenu a i {
        width: 25px;
    }

    .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li:hover .mega-menu-container {
        opacity: 1;
        visibility: visible;
        margin-top: 20px;
        transition: all 0.5s ease;
    }

    .page-wrapper.horizontal-wrapper .page-body-wrapper .toggle-nav {
        display: none;
    }

    .page-wrapper.horizontal-wrapper .page-body-wrapper .mobile-back {
        display: none !important;
    }
}

@media only screen and (min-width: 768px) {
    .page-wrapper.material-icon {
        position: relative;
    }

        .page-wrapper.material-icon::before {
            position: absolute;
            content: "";
            left: 0;
            width: 100%;
            height: 200px;
            background: linear-gradient(103.75deg, #33B1EE -13.9%, var(--theme-default) 79.68%);
        }

        .page-wrapper.material-icon .toggle-sidebar {
            color: rgba(255, 255, 255, 0.8);
        }

            .page-wrapper.material-icon .toggle-sidebar:hover > svg {
                color: #fff !important;
                stroke: #fff !important;
            }

        .page-wrapper.material-icon .page-header {
            position: relative;
            background: transparent;
            padding-left: 90px;
            max-width: 1660px;
            margin: 0 auto;
            width: calc(100% - 0px);
            box-shadow: none;
        }

            .page-wrapper.material-icon .page-header .f-light {
                color: #fff;
            }

            .page-wrapper.material-icon .page-header .header-wrapper .nav-right ul li svg {
                stroke: #fff;
            }

            .page-wrapper.material-icon .page-header .header-wrapper .nav-right ul li .profile-dropdown li svg {
                stroke: #2F2F3B;
            }

            .page-wrapper.material-icon .page-header .header-wrapper .nav-right > ul > li {
                color: #fff;
            }

                .page-wrapper.material-icon .page-header .header-wrapper .nav-right > ul > li .notification-box svg,
                .page-wrapper.material-icon .page-header .header-wrapper .nav-right > ul > li .cart-box svg {
                    stroke: #fff;
                }

                .page-wrapper.material-icon .page-header .header-wrapper .nav-right > ul > li > a > svg {
                    stroke: #fff;
                }

                .page-wrapper.material-icon .page-header .header-wrapper .nav-right > ul > li > svg {
                    stroke: #fff;
                }

            .page-wrapper.material-icon .page-header .header-wrapper .nav-right .language-nav .more_lang {
                color: #2F2F3B;
            }

            .page-wrapper.material-icon .page-header .header-wrapper .nav-right .onhover-show-div {
                color: #2F2F3B;
            }

            .page-wrapper.material-icon .page-header .header-wrapper .nav-right.right-header ul li .profile-media .media-body p {
                color: rgba(255, 255, 255, 0.7);
            }

            .page-wrapper.material-icon .page-header.close_icon {
                padding-left: 0;
                margin: 0 auto !important;
            }

        .page-wrapper.material-icon .page-body-wrapper .page-body {
            margin-top: 0 !important;
            padding-left: 90px;
            max-width: 1660px;
            margin: 0 auto;
        }

        .page-wrapper.material-icon .page-body-wrapper div.sidebar-wrapper.close_icon ~ .page-body {
            padding-left: 15px;
            margin: 0 auto !important;
        }

        .page-wrapper.material-icon .page-body-wrapper .page-title {
            color: #fff;
            background-color: transparent;
            border-bottom: none;
            box-shadow: none;
        }

            .page-wrapper.material-icon .page-body-wrapper .page-title .breadcrumb .breadcrumb-item a svg {
                stroke: #fff;
            }

            .page-wrapper.material-icon .page-body-wrapper .page-title .breadcrumb .breadcrumb-item.active {
                color: rgba(255, 255, 255, 0.6);
            }

            .page-wrapper.material-icon .page-body-wrapper .page-title .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
                color: rgba(255, 255, 255, 0.8);
            }
}

@media only screen and (min-width: 992px) {
    .page-wrapper.material-icon::before {
        height: 240px;
    }
}

@media screen and (max-width: 767px) {
    .sidebar-wrapper .menu .brand-logo img {
        width: 120px;
    }
}

@media screen and (max-width: 576px) {
    .toggle-nav i {
        font-size: 20px;
    }
}

.simplebar-placeholder {
    display: none;
}
/**=====================
  5.7 Sidebar CSS Ends
==========================**/

#return-to-top {
    display: none !important;
}
/**=====================
    2.22 Modal CSS start
==========================**/

.modal-backdrop {
    width: 100%;
    height: 100%;
}

.modal-toggle-wrapper .form-control::placeholder {
    font-size: 13px;
}

.modal-toggle-wrapper .modal-img {
    display: flex;
    justify-content: center;
}

    .modal-toggle-wrapper .modal-img img {
        width: 200px;
        height: 200px;
    }

@media (max-width: 992px) {
    .modal-toggle-wrapper .modal-img img {
        width: calc(136px + 64 * (100vw - 320px) / 672);
        height: calc(136px + 64 * (100vw - 320px) / 672);
    }
}

.modal-toggle-wrapper .modal-img li img {
    width: 100px;
    height: 100px;
}

@media (max-width: 992px) {
    .modal-toggle-wrapper .modal-img li img {
        width: calc(75px + 25 * (100vw - 320px) / 672);
        height: calc(75px + 25 * (100vw - 320px) / 672);
    }
}

.modal-toggle-wrapper .modal-img li + li {
    margin-left: -39px;
}

.modal-toggle-wrapper button svg {
    width: 16px;
    height: 16px;
}

.large-modal-header,
.large-modal-body {
    display: flex;
    align-items: center;
    color: #2c323f;
}

    .large-modal-header svg,
    .large-modal-body svg {
        width: 20px;
        height: 20px;
    }

.modal-padding-space {
    padding-left: 20px;
}

.svg-modal {
    width: 15px;
    height: 15px;
    stroke: #FF3364;
    vertical-align: middle;
}

.card-wrapper .modal-heading h5 {
    font-size: calc(15px + 3 * (100vw - 320px) / 1080);
}

@media (min-width: 750px) and (max-width: 1200px) {
    .card-wrapper .balance-modal {
        display: flex;
        flex-direction: column;
    }
}

.modal-footer .btn {
    margin: 0 4px;
}

.modal-content .modal-header .btn-close:focus {
    box-shadow: unset;
}

.modal-details h6 {
    padding-bottom: 12px;
}

.modal-details .web-content {
    margin-bottom: 16px;
}

    .modal-details .web-content .d-flex p {
        padding-bottom: 8px;
    }

    .modal-details .web-content .d-flex:last-child p {
        padding-bottom: 0;
    }

    .modal-details .web-content:last-child {
        margin-bottom: 0;
    }

/**=====================
    2.22 Modal CSS end
==========================**/
/**=====================
  2.23 Popover CSS Start
==========================**/
.popover-header {
    background-color: #2c323f;
    color: #fff;
}

.popover-main .btn-showcase a {
    color: #fff;
}

.popover-main .btn-showcase button:last-child {
    margin-right: 0;
}

/**=====================
  2.23 Popover CSS Ends
==========================**/

/**=====================
    2.25 Radio CSS Start
==========================**/
.animate-chk label {
    line-height: 1.6;
    cursor: pointer;
}

    .animate-chk label:last-child {
        margin-bottom: 0;
    }

.checkbox_animated {
    cursor: pointer;
    position: relative;
    margin: 0 1rem 0 0;
}

    .checkbox_animated:before {
        transition: transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
        transform: rotate(-45deg) scale(0, 0);
        content: "";
        position: absolute;
        left: 0.25rem;
        top: 0.225rem;
        z-index: 1;
        width: 0.75rem;
        height: 0.375rem;
        border: 2px solid var(--theme-default);
        border-top-style: none;
        border-right-style: none;
    }

    .checkbox_animated:after {
        content: "";
        position: absolute;
        top: -0.125rem;
        left: 0;
        width: 1.3rem;
        height: 1.3rem;
        background: #fff;
        border: 2px solid #ecf3fa;
        cursor: pointer;
    }

    .checkbox_animated:checked:before {
        transform: rotate(-45deg) scale(1, 1);
    }

.radio_animated {
    position: relative;
    margin: 0 0.5rem 0 0;
    cursor: pointer;
    top: 2px;
}

    .radio_animated:before {
        transition: transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
        transform: scale(0, 0);
        content: "";
        position: absolute;
        top: 3px;
        left: 3px;
        z-index: 1;
        width: 6px;
        height: 6px;
        background: var(--theme-default);
        border-radius: 50%;
    }

    .radio_animated:after {
        content: "";
        position: absolute;
        top: -0.10rem;
        left: -0.1rem;
        width: 1rem;
        height: 1rem;
        background: #fff;
        border: 1px solid #D0D5DD;
        border-radius: 50%;
    }

    .radio_animated:checked:after {
        content: "";
        position: absolute;
        top: -2px;
        left: -2px;
        width: 1rem;
        height: 1rem;
        background: #fff;
        border: 1px solid #05a6f0;
        border-radius: 50%;
    }

    .radio_animated:checked:before {
        transform: scale(1, 1);
    }

.checkbox label {
    display: inline-block;
    position: relative;
    padding-left: 16px;
    cursor: pointer;
}

    .checkbox label::before {
        content: "";
        display: inline-block;
        position: absolute;
        width: 19px;
        height: 19px;
        left: 0;
        margin-left: -16px;
        border: 1px solid #efefef;
        border-radius: 3px;
        background-color: #fff;
        -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
        -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
        transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
    }

    .checkbox label::after {
        display: inline-block;
        position: absolute;
        width: 16px;
        height: 16px;
        left: 0;
        top: 0;
        margin-left: -20px;
        padding-left: 3px;
        padding-top: 1px;
        font-size: 11px;
        color: #242934;
    }

.checkbox input[type=checkbox] {
    opacity: 0;
}

    .checkbox input[type=checkbox]:focus {
        outline-offset: -2px;
    }

        .checkbox input[type=checkbox]:focus + label::before {
            outline-offset: -2px;
        }

    .checkbox input[type=checkbox]:checked + label::before {
        font-family: themify;
        content: "\e64c";
        text-align: center;
        line-height: 1.2;
    }

    .checkbox input[type=checkbox]:disabled + label {
        opacity: 0.65;
    }

        .checkbox input[type=checkbox]:disabled + label::before {
            background-color: #f4f4f4;
            cursor: not-allowed;
        }

.checkbox .checkbox-circle label::before {
    border-radius: 50%;
}

.checkbox .checkbox-inline {
    margin-top: 0;
}

.m-squar label::before {
    border-radius: 0;
}

.m-squar .checkbox-circle label::before {
    border-radius: 50%;
}

.m-squar .checkbox-inline {
    margin-top: 0;
}

.checkbox-primary label::before {
    border-color: var(--theme-default);
}

.checkbox-primary input[type=checkbox]:checked + label::before {
    border-color: var(--theme-default);
    color: var(--theme-default);
}

.checkbox-primary input[type=checkbox]:checked + label::after {
    color: #fff;
}

.checkbox-solid-primary label:before {
    background-color: var(--theme-default);
    border-color: var(--theme-default);
    color: #fff;
}

.checkbox-solid-primary input[type=checkbox]:checked + label::before {
    background-color: var(--theme-default);
    border-color: var(--theme-default);
    color: #fff;
}

.checkbox-solid-primary input[type=checkbox]:checked + label::after {
    color: #fff;
}

.radio-primary input[type=radio] + label::before {
    border-color: var(--theme-default);
}

.radio-primary input[type=radio] + label::after {
    background-color: var(--theme-default);
}

.radio-primary input[type=radio]:checked + label::before {
    border-color: var(--theme-default);
}

.radio-primary input[type=radio]:checked + label::after {
    background-color: var(--theme-default);
}

.checkbox-secondary label::before {
    border-color: #FF3364;
}

.checkbox-secondary input[type=checkbox]:checked + label::before {
    border-color: #FF3364;
    color: #FF3364;
}

.checkbox-secondary input[type=checkbox]:checked + label::after {
    color: #fff;
}

.checkbox-solid-secondary label:before {
    background-color: #FF3364;
    border-color: #FF3364;
    color: #fff;
}

.checkbox-solid-secondary input[type=checkbox]:checked + label::before {
    background-color: #FF3364;
    border-color: #FF3364;
    color: #fff;
}

.checkbox-solid-secondary input[type=checkbox]:checked + label::after {
    color: #fff;
}

.radio-secondary input[type=radio] + label::before {
    border-color: #FF3364;
}

.radio-secondary input[type=radio] + label::after {
    background-color: #FF3364;
}

.radio-secondary input[type=radio]:checked + label::before {
    border-color: #FF3364;
}

.radio-secondary input[type=radio]:checked + label::after {
    background-color: #FF3364;
}

.checkbox-success label::before {
    border-color: #54BA4A;
}

.checkbox-success input[type=checkbox]:checked + label::before {
    border-color: #54BA4A;
    color: #54BA4A;
}

.checkbox-success input[type=checkbox]:checked + label::after {
    color: #fff;
}

.checkbox-solid-success label:before {
    background-color: #54BA4A;
    border-color: #54BA4A;
    color: #fff;
}

.checkbox-solid-success input[type=checkbox]:checked + label::before {
    background-color: #54BA4A;
    border-color: #54BA4A;
    color: #fff;
}

.checkbox-solid-success input[type=checkbox]:checked + label::after {
    color: #fff;
}

.radio-success input[type=radio] + label::before {
    border-color: #54BA4A;
}

.radio-success input[type=radio] + label::after {
    background-color: #54BA4A;
}

.radio-success input[type=radio]:checked + label::before {
    border-color: #54BA4A;
}

.radio-success input[type=radio]:checked + label::after {
    background-color: #54BA4A;
}

.checkbox-danger label::before {
    border-color: #FC4438;
}

.checkbox-danger input[type=checkbox]:checked + label::before {
    border-color: #FC4438;
    color: #FC4438;
}

.checkbox-danger input[type=checkbox]:checked + label::after {
    color: #fff;
}

.checkbox-solid-danger label:before {
    background-color: #FC4438;
    border-color: #FC4438;
    color: #fff;
}

.checkbox-solid-danger input[type=checkbox]:checked + label::before {
    background-color: #FC4438;
    border-color: #FC4438;
    color: #fff;
}

.checkbox-solid-danger input[type=checkbox]:checked + label::after {
    color: #fff;
}

.radio-danger input[type=radio] + label::before {
    border-color: #FC4438;
}

.radio-danger input[type=radio] + label::after {
    background-color: #FC4438;
}

.radio-danger input[type=radio]:checked + label::before {
    border-color: #FC4438;
}

.radio-danger input[type=radio]:checked + label::after {
    background-color: #FC4438;
}

.checkbox-info label::before {
    border-color: #16C7F9;
}

.checkbox-info input[type=checkbox]:checked + label::before {
    border-color: #16C7F9;
    color: #16C7F9;
}

.checkbox-info input[type=checkbox]:checked + label::after {
    color: #fff;
}

.checkbox-solid-info label:before {
    background-color: #16C7F9;
    border-color: #16C7F9;
    color: #fff;
}

.checkbox-solid-info input[type=checkbox]:checked + label::before {
    background-color: #16C7F9;
    border-color: #16C7F9;
    color: #fff;
}

.checkbox-solid-info input[type=checkbox]:checked + label::after {
    color: #fff;
}

.radio-info input[type=radio] + label::before {
    border-color: #16C7F9;
}

.radio-info input[type=radio] + label::after {
    background-color: #16C7F9;
}

.radio-info input[type=radio]:checked + label::before {
    border-color: #16C7F9;
}

.radio-info input[type=radio]:checked + label::after {
    background-color: #16C7F9;
}

.checkbox-light label::before {
    border-color: #f4f4f4;
}

.checkbox-light input[type=checkbox]:checked + label::before {
    border-color: #f4f4f4;
    color: #f4f4f4;
}

.checkbox-light input[type=checkbox]:checked + label::after {
    color: #fff;
}

.checkbox-solid-light label:before {
    background-color: #f4f4f4;
    border-color: #f4f4f4;
    color: #fff;
}

.checkbox-solid-light input[type=checkbox]:checked + label::before {
    background-color: #f4f4f4;
    border-color: #f4f4f4;
    color: #fff;
}

.checkbox-solid-light input[type=checkbox]:checked + label::after {
    color: #fff;
}

.radio-light input[type=radio] + label::before {
    border-color: #f4f4f4;
}

.radio-light input[type=radio] + label::after {
    background-color: #f4f4f4;
}

.radio-light input[type=radio]:checked + label::before {
    border-color: #f4f4f4;
}

.radio-light input[type=radio]:checked + label::after {
    background-color: #f4f4f4;
}

.checkbox-dark label::before {
    border-color: #2c323f;
}

.checkbox-dark input[type=checkbox]:checked + label::before {
    border-color: #2c323f;
    color: #2c323f;
}

.checkbox-dark input[type=checkbox]:checked + label::after {
    color: #fff;
}

.checkbox-solid-dark label:before {
    background-color: #2c323f;
    border-color: #2c323f;
    color: #fff;
}

.checkbox-solid-dark input[type=checkbox]:checked + label::before {
    background-color: #2c323f;
    border-color: #2c323f;
    color: #fff;
}

.checkbox-solid-dark input[type=checkbox]:checked + label::after {
    color: #fff;
}

.radio-dark input[type=radio] + label::before {
    border-color: #2c323f;
}

.radio-dark input[type=radio] + label::after {
    background-color: #2c323f;
}

.radio-dark input[type=radio]:checked + label::before {
    border-color: #2c323f;
}

.radio-dark input[type=radio]:checked + label::after {
    background-color: #2c323f;
}

.checkbox-warning label::before {
    border-color: #FFAA05;
}

.checkbox-warning input[type=checkbox]:checked + label::before {
    border-color: #FFAA05;
    color: #FFAA05;
}

.checkbox-warning input[type=checkbox]:checked + label::after {
    color: #fff;
}

.checkbox-solid-warning label:before {
    background-color: #FFAA05;
    border-color: #FFAA05;
    color: #fff;
}

.checkbox-solid-warning input[type=checkbox]:checked + label::before {
    background-color: #FFAA05;
    border-color: #FFAA05;
    color: #fff;
}

.checkbox-solid-warning input[type=checkbox]:checked + label::after {
    color: #fff;
}

.radio-warning input[type=radio] + label::before {
    border-color: #FFAA05;
}

.radio-warning input[type=radio] + label::after {
    background-color: #FFAA05;
}

.radio-warning input[type=radio]:checked + label::before {
    border-color: #FFAA05;
}

.radio-warning input[type=radio]:checked + label::after {
    background-color: #FFAA05;
}

.m-checkbox-inline .checkbox {
    display: inline-block;
}

.m-checkbox-inline .radio {
    display: inline-block;
}

.m-checkbox-inline label {
    margin-right: 20px;
}

.radio label {
    display: inline-block;
    position: relative;
    padding-left: 5px;
    cursor: pointer;
}

    .radio label::before {
        content: "";
        display: inline-block;
        position: absolute;
        width: 19px;
        height: 19px;
        left: 0;
        margin-left: -20px;
        border: 1px solid #efefef;
        border-radius: 50%;
        background-color: #fff;
        -webkit-transition: border 0.15s ease-in-out;
        -o-transition: border 0.15s ease-in-out;
        transition: border 0.15s ease-in-out;
    }

    .radio label::after {
        display: inline-block;
        position: absolute;
        content: " ";
        width: 9px;
        height: 9px;
        left: 5px;
        top: 5px;
        margin-left: -20px;
        border-radius: 50%;
        background-color: #898989;
        -webkit-transform: scale(0, 0);
        -ms-transform: scale(0, 0);
        -o-transform: scale(0, 0);
        transform: scale(0, 0);
        -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
        -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
        -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
        transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
    }

.radio input[type=radio] {
    opacity: 0;
}

    .radio input[type=radio]:focus + label::before {
        outline-offset: -2px;
    }

    .radio input[type=radio]:checked + label::after {
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }

    .radio input[type=radio]:disabled + label {
        opacity: 0.65;
    }

        .radio input[type=radio]:disabled + label::before {
            cursor: not-allowed;
        }

.radio .radio-inline {
    margin-top: 0;
}

/**=====================
    2.25 Radio CSS Ends
==========================**/

/**=====================
    2.28 Switch CSS Start
==========================**/
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

    .switch input:disabled + .switch-state {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .switch input {
        display: none;
    }

        .switch input:checked + .switch-state {
            background-color: var(--theme-default);
        }

            .switch input:checked + .switch-state:before {
                transform: translateX(11px);
                background-color: var(--theme-default);
            }

        .switch input:focus + .switch-state {
            box-shadow: 0 0 1px var(--theme-default);
        }

.switch-state {
    border-radius: 20px;
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #E2E8F0;
    transition: 0.2s;
}

    .switch-state:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: #E2E8F0;
        border: 3.5px solid #fff;
        transition: 0.4s;
        border-radius: 20px;
    }

.switch-state-toggle:before {
    background-color: var(--theme-default);
}

.icon-state .switch-state:after {
    content: "\efb8";
    font-family: IcoFont;
    left: 10px;
    position: absolute;
    top: 10px;
    color: #2c323f;
    transition: 0.4s;
    opacity: 0.3;
}

.icon-state input:checked + .switch-state:after {
    content: "\efad";
    left: 36px;
    opacity: 1;
    transition: 0.4s;
}

.switch-lg .switch {
    width: 75px;
    height: 40px;
    padding: 0;
    margin: 0;
}

    .switch-lg .switch .switch-state:before {
        height: 30px;
        width: 30px;
        left: 7px;
        bottom: 5px;
        top: 4px;
    }

.switch-lg.icon-state .switch .switch-state:after {
    left: 12px;
    font-size: 18px;
}

.switch-lg.icon-state .switch input:checked + .switch-state:after {
    left: 47px;
}

.switch-lg.icon-state .switch input:checked + .switch-state:before {
    transform: translateX(32px);
}

.switch-sm.icon-state .switch .switch-state:after {
    top: 4px;
    left: 4px;
    font-size: 8px;
}

.switch-sm.icon-state .switch input:checked + .switch-state:after {
    left: 13px;
    top: 4px;
}

.switch-sm .switch {
    width: 25px;
    height: 16px;
    margin-top: 7px;
    margin-bottom: 0px;
}


    .switch-sm .switch .switch-state:before {
        height: 10px;
        width: 10px;
        left: 4px;
        bottom: 3px;
    }

.switch-sm input:checked + .switch-state:before {
    left: 0;
}

.switch-md .switch {
    width: 45px;
    height: 25px;
    margin-top: 5px;
    margin-bottom: 0px;
}

    .switch-md .switch .switch-state:before {
        height: 16px;
        width: 16px;
        left: 4px;
    }

.switch-md input:checked + .switch-state:before {
    left: -2px;
}

.switch-md-print input:checked + .switch-state:before {
    left: -25px !important;
}

/*Switch XS Start*/

.col-form-label-xs {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    margin-bottom: 0;
    font-size: 10px;
    line-height: 1.5;
}

.switch-xs .switch {
    width: 25px;
    height: 16px;
    margin-top: 4px;
    margin-bottom: 0px;
}

.switch-state-xs {
    border-radius: 20px;
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #E2E8F0;
    transition: 0.2s;
}

    .switch-state-xs:before {
        position: absolute;
        content: "";
        height: 12px;
        width: 12px;
        left: 2px;
        bottom: 2px;
        background-color: #E2E8F0;
        border: 3.5px solid #fff;
        transition: 0.2s;
        border-radius: 20px;
    }

.switch input:checked + .switch-state-xs {
    background-color: var(--theme-default);
}

    .switch input:checked + .switch-state-xs:before {
        transform: translateX(8px);
        background-color: var(--theme-default);
    }

/*Switch XS End*/

.switch-md .switch {
    width: 45px;
    height: 25px;
    margin-top: 5px;
    margin-bottom: 0px;
}

.switch-md input:checked + .switch-state:before {
    left: 13px;
    bottom: 4px;
}

.switch-outline .switch-state {
    background-color: #fff;
    border: 1px solid var(--theme-default);
    transition: 0.4s;
}

    .switch-outline .switch-state:before {
        background-color: #fb8a8a;
        bottom: 3px;
        color: #fff;
    }

.switch-outline .switch input {
    display: none;
}

    .switch-outline .switch input:checked + .switch-state {
        background-color: transparent;
        border: 1px solid var(--theme-default);
    }

        .switch-outline .switch input:checked + .switch-state:before {
            background-color: var(--theme-default);
            bottom: 3px;
            transform: translateX(26px);
        }

        .switch-outline .switch input:checked + .switch-state:after {
            color: #fff;
        }

.switch-outline .switch-state.bg-primary {
    border: 1px solid var(--theme-default);
    background-color: transparent !important;
}

.switch-outline .switch input:checked + .switch-state.bg-primary {
    background-color: transparent !important;
    border: 1px solid var(--theme-default);
}

    .switch-outline .switch input:checked + .switch-state.bg-primary:before {
        background-color: var(--theme-default);
    }

.switch-outline .switch-state.bg-dark {
    border: 1px solid #2c323f;
    background-color: transparent !important;
}

.switch-outline .switch input:checked + .switch-state.bg-dark {
    background-color: transparent !important;
    border: 1px solid #2c323f;
}

    .switch-outline .switch input:checked + .switch-state.bg-dark:before {
        background-color: #2c323f;
    }

.switch-outline .switch-state.bg-warning {
    border: 1px solid #FFAA05;
    background-color: transparent !important;
}

.switch-outline .switch input:checked + .switch-state.bg-warning {
    background-color: transparent !important;
    border: 1px solid #FFAA05;
}

    .switch-outline .switch input:checked + .switch-state.bg-warning:before {
        background-color: #FFAA05;
    }

.switch-outline .switch-state.bg-success {
    border: 1px solid #54BA4A;
    background-color: transparent !important;
}

.switch-outline .switch input:checked + .switch-state.bg-success {
    background-color: transparent !important;
    border: 1px solid #54BA4A;
}

    .switch-outline .switch input:checked + .switch-state.bg-success:before {
        background-color: #54BA4A;
    }

.switch-outline .switch-state.bg-info {
    border: 1px solid #16C7F9;
    background-color: transparent !important;
}

.switch-outline .switch input:checked + .switch-state.bg-info {
    background-color: transparent !important;
    border: 1px solid #16C7F9;
}

    .switch-outline .switch input:checked + .switch-state.bg-info:before {
        background-color: #16C7F9;
    }

.switch-outline .switch-state.bg-danger {
    border: 1px solid #FC4438;
    background-color: transparent !important;
}

.switch-outline .switch input:checked + .switch-state.bg-danger {
    background-color: transparent !important;
    border: 1px solid #FC4438;
}

    .switch-outline .switch input:checked + .switch-state.bg-danger:before {
        background-color: #FC4438;
    }

.switch-outline .switch-state.bg-primary {
    border: 1px solid #fb8a8a;
    background-color: transparent !important;
}

.switch-outline .switch input:checked + .switch-state.bg-primary {
    background-color: transparent !important;
    border: 1px solid var(--theme-default);
}

    .switch-outline .switch input:checked + .switch-state.bg-primary:before {
        background-color: var(--theme-default);
    }

.switch-outline .switch-state.bg-secondary {
    border: 1px solid var(--theme-secondary);
    background-color: transparent !important;
}

.switch-outline .switch input:checked + .switch-state.bg-secondary {
    background-color: transparent !important;
    border: 1px solid var(--theme-secondary);
}

    .switch-outline .switch input:checked + .switch-state.bg-secondary:before {
        background-color: var(--theme-secondary);
    }

.switch-showcase {
    margin-bottom: -8px;
}

    .switch-showcase .media {
        line-height: 1;
    }

    .switch-showcase .form-check .form-check-input {
        float: right;
    }

.form-switch .form-check-input:checked {
    background-color: var(--theme-default);
    border-color: var(--theme-default);
}


.default-square .form-switch .form-check-input {
    background-image: url(../images/switch/square-gray.png);
}

    .default-square .form-switch .form-check-input:checked {
        background-image: url(../images/switch/square.svg);
    }

.form-check-input:focus {
    box-shadow: none;
}
/**=====================
    2.28 Switch CSS Ends
==========================**/
/**=====================
  2.29 Tab CSS Start
==========================**/
.nav {
    margin-bottom: 1rem;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--theme-default);
}

.nav-right {
    justify-content: flex-end;
}

.nav-theme .nav-link,
.nav-pills.nav-theme .nav-link {
    color: var(--theme-default);
}

    .nav-theme .nav-link.active,
    .nav-theme .show > .nav-link,
    .nav-pills.nav-theme .nav-link.active,
    .nav-pills.nav-theme .show > .nav-link {
        background-color: var(--theme-default);
        color: #fff;
    }

.nav-primary .nav-link,
.nav-pills.nav-primary .nav-link {
    color: var(--theme-default);
}

    .nav-primary .nav-link.active,
    .nav-primary .show > .nav-link,
    .nav-pills.nav-primary .nav-link.active,
    .nav-pills.nav-primary .show > .nav-link {
        background-color: var(--theme-default);
        color: #fff;
    }

.nav-secondary .nav-link,
.nav-pills.nav-secondary .nav-link {
    color: #FF3364;
}

    .nav-secondary .nav-link.active,
    .nav-secondary .show > .nav-link,
    .nav-pills.nav-secondary .nav-link.active,
    .nav-pills.nav-secondary .show > .nav-link {
        background-color: #FF3364;
        color: #fff;
    }

.nav-success .nav-link,
.nav-pills.nav-success .nav-link {
    color: #54BA4A;
}

    .nav-success .nav-link.active,
    .nav-success .show > .nav-link,
    .nav-pills.nav-success .nav-link.active,
    .nav-pills.nav-success .show > .nav-link {
        background-color: #54BA4A;
        color: #fff;
    }

.nav-danger .nav-link,
.nav-pills.nav-danger .nav-link {
    color: #FC4438;
}

    .nav-danger .nav-link.active,
    .nav-danger .show > .nav-link,
    .nav-pills.nav-danger .nav-link.active,
    .nav-pills.nav-danger .show > .nav-link {
        background-color: #FC4438;
        color: #fff;
    }

.nav-info .nav-link,
.nav-pills.nav-info .nav-link {
    color: #16C7F9;
}

    .nav-info .nav-link.active,
    .nav-info .show > .nav-link,
    .nav-pills.nav-info .nav-link.active,
    .nav-pills.nav-info .show > .nav-link {
        background-color: #16C7F9;
        color: #fff;
    }

.nav-light .nav-link,
.nav-pills.nav-light .nav-link {
    color: #f4f4f4;
}

    .nav-light .nav-link.active,
    .nav-light .show > .nav-link,
    .nav-pills.nav-light .nav-link.active,
    .nav-pills.nav-light .show > .nav-link {
        background-color: #f4f4f4;
        color: #fff;
    }

.nav-dark .nav-link,
.nav-pills.nav-dark .nav-link {
    color: #2c323f;
}

    .nav-dark .nav-link.active,
    .nav-dark .show > .nav-link,
    .nav-pills.nav-dark .nav-link.active,
    .nav-pills.nav-dark .show > .nav-link {
        background-color: #2c323f;
        color: #fff;
    }

.nav-warning .nav-link,
.nav-pills.nav-warning .nav-link {
    color: #FFAA05;
}

    .nav-warning .nav-link.active,
    .nav-warning .show > .nav-link,
    .nav-pills.nav-warning .nav-link.active,
    .nav-pills.nav-warning .show > .nav-link {
        background-color: #FFAA05;
        color: #fff;
    }

.nav-tabs.nav-bottom .nav-item .nav-link.active,
.nav-tabs.nav-bottom .nav-item .nav-link.focus,
.nav-tabs.nav-bottom .nav-item .nav-link.hover {
    border-color: #fff #dee2e6 #dee2e6;
}

.nav-link.tab-info.completed {
    color: #1DCA5D !important;
}

.nav-link.tab-info.pending {
    color: #FFBF00 !important;
}

.tab-content ~ .nav-tabs.border-tab {
    margin-bottom: 0;
    margin-top: 30px;
}

.border-tab.nav-tabs {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    margin-bottom: 30px;
}

ul.edit_employee li {
    line-height: 38px;
}


.border-tab.nav-tabs .nav-item .nav-link {
    font-size: 12px;
    color: #6B7C94;
    text-align: center;
    padding: 10px 0px;
    margin: 0px 25px;
    border: none;
    border-bottom: none;
    transition: none;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.border-tab.nav-tabs li i {
    color: #6B7C94;
}

.border-tab.nav-tabs .nav-item .nav-link:first-child {
    margin-left: 0px;
}

@media (min-width: 576px) and (max-width: 1920px) {
    .border-tab.nav-tabs .nav-item .nav-link {
        padding-top: 0;
    }
}

.border-tab.nav-tabs .nav-item .nav-link.active, .border-tab.nav-tabs .nav-item .nav-link.show, .border-tab.nav-tabs .nav-item .nav-link:focus, .border-tab.nav-tabs .nav-item .nav-link:hover {
    color: var(--theme-default);
}

.border-tab.nav-tabs .nav-item .nav-link.active, .border-tab.nav-tabs .nav-item .nav-link.show, .border-tab.nav-tabs .nav-item .nav-link:focus {
    border-bottom: none;
}

.border-tab.nav-left .nav-link {
    transition: all 0.3s ease;
    color: #2c323f;
}

    .border-tab.nav-left .nav-link.active,
    .border-tab.nav-left .show > .nav-link {
        background-color: transparent;
        border-left-color: var(--theme-default);
        color: var(--theme-default);
        border-radius: 0;
        transition: all 0.3s ease;
    }

.border-tab.nav-right .nav-link {
    border-right: 2px solid transparent;
    transition: all 0.3s ease;
    color: #2c323f;
    text-align: right;
}

    .border-tab.nav-right .nav-link.active,
    .border-tab.nav-right .show > .nav-link {
        background-color: transparent;
        border-right-color: var(--theme-default);
        color: var(--theme-default);
        border-radius: 0;
        transition: all 0.3s ease;
    }

.border-tab.nav-theme .nav-link.active,
.border-tab.nav-theme .nav-item.show,
.border-tab.nav-theme .nav-link:focus,
.border-tab.nav-theme .nav-link:hover {
    color: var(--theme-default);
    background-color: transparent;
}

.border-tab.nav-theme .nav-item .nav-link {
    transition: 0.3s;
}

    .border-tab.nav-theme .nav-item .nav-link.active, .border-tab.nav-theme .nav-item .nav-link.show, .border-tab.nav-theme .nav-item .nav-link:focus {
        border-bottom: 2px solid var(--theme-default);
    }

    .border-tab.nav-theme .nav-item .nav-link.active, .border-tab.nav-theme .nav-item .nav-link.show, .border-tab.nav-theme .nav-item .nav-link:focus, .border-tab.nav-theme .nav-item .nav-link:hover {
        color: var(--theme-default);
    }

.border-tab.nav-left.nav-theme .nav-link.active,
.border-tab.nav-left.nav-theme .show > .nav-link {
    border-left-color: var(--theme-default);
    color: var(--theme-default);
}

.border-tab.nav-right.nav-theme .nav-link.active,
.border-tab.nav-right.nav-theme .show > .nav-link {
    border-right-color: var(--theme-default);
    color: var(--theme-default);
}

.border-tab.nav-primary .nav-link.active,
.border-tab.nav-primary .nav-item.show,
.border-tab.nav-primary .nav-link:focus,
.border-tab.nav-primary .nav-link:hover {
    color: var(--theme-default);
    background-color: transparent;
}

.border-tab.nav-primary .nav-item .nav-link {
    transition: 0.3s;
}

    .border-tab.nav-primary .nav-item .nav-link.active, .border-tab.nav-primary .nav-item .nav-link.show, .border-tab.nav-primary .nav-item .nav-link:focus {
        border-bottom: 2px solid var(--theme-default);
    }

    .border-tab.nav-primary .nav-item .nav-link.active, .border-tab.nav-primary .nav-item .nav-link.show, .border-tab.nav-primary .nav-item .nav-link:focus, .border-tab.nav-primary .nav-item .nav-link:hover {
        color: var(--theme-default);
    }

.border-tab.nav-left.nav-primary .nav-link.active,
.border-tab.nav-left.nav-primary .show > .nav-link {
    border-left-color: var(--theme-default);
    color: var(--theme-default);
}

.border-tab.nav-right.nav-primary .nav-link.active,
.border-tab.nav-right.nav-primary .show > .nav-link {
    border-right-color: var(--theme-default);
    color: var(--theme-default);
}

.border-tab.nav-secondary .nav-link.active,
.border-tab.nav-secondary .nav-item.show,
.border-tab.nav-secondary .nav-link:focus,
.border-tab.nav-secondary .nav-link:hover {
    color: #FF3364;
    background-color: transparent;
}

.border-tab.nav-secondary .nav-item .nav-link {
    transition: 0.3s;
}

    .border-tab.nav-secondary .nav-item .nav-link.active, .border-tab.nav-secondary .nav-item .nav-link.show, .border-tab.nav-secondary .nav-item .nav-link:focus {
        border-bottom: 2px solid #FF3364;
    }

    .border-tab.nav-secondary .nav-item .nav-link.active, .border-tab.nav-secondary .nav-item .nav-link.show, .border-tab.nav-secondary .nav-item .nav-link:focus, .border-tab.nav-secondary .nav-item .nav-link:hover {
        color: #FF3364;
    }

.border-tab.nav-left.nav-secondary .nav-link.active,
.border-tab.nav-left.nav-secondary .show > .nav-link {
    border-left-color: #FF3364;
    color: #FF3364;
}

.border-tab.nav-right.nav-secondary .nav-link.active,
.border-tab.nav-right.nav-secondary .show > .nav-link {
    border-right-color: #FF3364;
    color: #FF3364;
}

.border-tab.nav-success .nav-link.active,
.border-tab.nav-success .nav-item.show,
.border-tab.nav-success .nav-link:focus,
.border-tab.nav-success .nav-link:hover {
    color: #54BA4A;
    background-color: transparent;
}

.border-tab.nav-success .nav-item .nav-link {
    transition: 0.3s;
}

    .border-tab.nav-success .nav-item .nav-link.active, .border-tab.nav-success .nav-item .nav-link.show, .border-tab.nav-success .nav-item .nav-link:focus {
        border-bottom: 2px solid #54BA4A;
    }

    .border-tab.nav-success .nav-item .nav-link.active, .border-tab.nav-success .nav-item .nav-link.show, .border-tab.nav-success .nav-item .nav-link:focus, .border-tab.nav-success .nav-item .nav-link:hover {
        color: #54BA4A;
    }

.border-tab.nav-left.nav-success .nav-link.active,
.border-tab.nav-left.nav-success .show > .nav-link {
    border-left-color: #54BA4A;
    color: #54BA4A;
}

.border-tab.nav-right.nav-success .nav-link.active,
.border-tab.nav-right.nav-success .show > .nav-link {
    border-right-color: #54BA4A;
    color: #54BA4A;
}

.border-tab.nav-danger .nav-link.active,
.border-tab.nav-danger .nav-item.show,
.border-tab.nav-danger .nav-link:focus,
.border-tab.nav-danger .nav-link:hover {
    color: #FC4438;
    background-color: transparent;
}

.border-tab.nav-danger .nav-item .nav-link {
    transition: 0.3s;
}

    .border-tab.nav-danger .nav-item .nav-link.active, .border-tab.nav-danger .nav-item .nav-link.show, .border-tab.nav-danger .nav-item .nav-link:focus {
        border-bottom: 2px solid #FC4438;
    }

    .border-tab.nav-danger .nav-item .nav-link.active, .border-tab.nav-danger .nav-item .nav-link.show, .border-tab.nav-danger .nav-item .nav-link:focus, .border-tab.nav-danger .nav-item .nav-link:hover {
        color: #FC4438;
    }

.border-tab.nav-left.nav-danger .nav-link.active,
.border-tab.nav-left.nav-danger .show > .nav-link {
    border-left-color: #FC4438;
    color: #FC4438;
}

.border-tab.nav-right.nav-danger .nav-link.active,
.border-tab.nav-right.nav-danger .show > .nav-link {
    border-right-color: #FC4438;
    color: #FC4438;
}

.border-tab.nav-info .nav-link.active,
.border-tab.nav-info .nav-item.show,
.border-tab.nav-info .nav-link:focus,
.border-tab.nav-info .nav-link:hover {
    color: #16C7F9;
    background-color: transparent;
}

.border-tab.nav-info .nav-item .nav-link {
    transition: 0.3s;
}

    .border-tab.nav-info .nav-item .nav-link.active, .border-tab.nav-info .nav-item .nav-link.show, .border-tab.nav-info .nav-item .nav-link:focus {
        border-bottom: 2px solid #16C7F9;
    }

    .border-tab.nav-info .nav-item .nav-link.active, .border-tab.nav-info .nav-item .nav-link.show, .border-tab.nav-info .nav-item .nav-link:focus, .border-tab.nav-info .nav-item .nav-link:hover {
        color: #16C7F9;
    }

.border-tab.nav-left.nav-info .nav-link.active,
.border-tab.nav-left.nav-info .show > .nav-link {
    border-left-color: #16C7F9;
    color: #16C7F9;
}

.border-tab.nav-right.nav-info .nav-link.active,
.border-tab.nav-right.nav-info .show > .nav-link {
    border-right-color: #16C7F9;
    color: #16C7F9;
}

.border-tab.nav-light .nav-link.active,
.border-tab.nav-light .nav-item.show,
.border-tab.nav-light .nav-link:focus,
.border-tab.nav-light .nav-link:hover {
    color: #f4f4f4;
    background-color: transparent;
}

.border-tab.nav-light .nav-item .nav-link {
    transition: 0.3s;
}

    .border-tab.nav-light .nav-item .nav-link.active, .border-tab.nav-light .nav-item .nav-link.show, .border-tab.nav-light .nav-item .nav-link:focus {
        border-bottom: 2px solid #f4f4f4;
    }

    .border-tab.nav-light .nav-item .nav-link.active, .border-tab.nav-light .nav-item .nav-link.show, .border-tab.nav-light .nav-item .nav-link:focus, .border-tab.nav-light .nav-item .nav-link:hover {
        color: #f4f4f4;
    }

.border-tab.nav-left.nav-light .nav-link.active,
.border-tab.nav-left.nav-light .show > .nav-link {
    border-left-color: #f4f4f4;
    color: #f4f4f4;
}

.border-tab.nav-right.nav-light .nav-link.active,
.border-tab.nav-right.nav-light .show > .nav-link {
    border-right-color: #f4f4f4;
    color: #f4f4f4;
}

.border-tab.nav-dark .nav-link.active,
.border-tab.nav-dark .nav-item.show,
.border-tab.nav-dark .nav-link:focus,
.border-tab.nav-dark .nav-link:hover {
    color: #2c323f;
    background-color: transparent;
}

.border-tab.nav-dark .nav-item .nav-link {
    transition: 0.3s;
}

    .border-tab.nav-dark .nav-item .nav-link.active, .border-tab.nav-dark .nav-item .nav-link.show, .border-tab.nav-dark .nav-item .nav-link:focus {
        border-bottom: 2px solid #2c323f;
    }

    .border-tab.nav-dark .nav-item .nav-link.active, .border-tab.nav-dark .nav-item .nav-link.show, .border-tab.nav-dark .nav-item .nav-link:focus, .border-tab.nav-dark .nav-item .nav-link:hover {
        color: #2c323f;
    }

.border-tab.nav-left.nav-dark .nav-link.active,
.border-tab.nav-left.nav-dark .show > .nav-link {
    border-left-color: #2c323f;
    color: #2c323f;
}

.border-tab.nav-right.nav-dark .nav-link.active,
.border-tab.nav-right.nav-dark .show > .nav-link {
    border-right-color: #2c323f;
    color: #2c323f;
}

.border-tab.nav-warning .nav-link.active,
.border-tab.nav-warning .nav-item.show,
.border-tab.nav-warning .nav-link:focus,
.border-tab.nav-warning .nav-link:hover {
    color: #FFAA05;
    background-color: transparent;
}

.border-tab.nav-warning .nav-item .nav-link {
    transition: 0.3s;
}

    .border-tab.nav-warning .nav-item .nav-link.active, .border-tab.nav-warning .nav-item .nav-link.show, .border-tab.nav-warning .nav-item .nav-link:focus {
        border-bottom: 2px solid #FFAA05;
    }

    .border-tab.nav-warning .nav-item .nav-link.active, .border-tab.nav-warning .nav-item .nav-link.show, .border-tab.nav-warning .nav-item .nav-link:focus, .border-tab.nav-warning .nav-item .nav-link:hover {
        color: #FFAA05;
    }

.border-tab.nav-left.nav-warning .nav-link.active,
.border-tab.nav-left.nav-warning .show > .nav-link {
    border-left-color: #FFAA05;
    color: #FFAA05;
}

.border-tab.nav-right.nav-warning .nav-link.active,
.border-tab.nav-right.nav-warning .show > .nav-link {
    border-right-color: #FFAA05;
    color: #FFAA05;
}

.tabbed-card ul {
    position: absolute;
    right: 22px;
    top: 23px;
    border-bottom: none;
}

    .tabbed-card ul.border-tab.nav-tabs {
        top: 12px;
    }

        .tabbed-card ul.border-tab.nav-tabs .nav-item {
            float: right;
        }

            .tabbed-card ul.border-tab.nav-tabs .nav-item .nav-link {
                padding: 23px 15px;
            }

.flex-space {
    display: flex;
    gap: 16px;
}

@media (max-width: 576px) {
    .flex-space {
        justify-content: center;
    }
}

.tab-img {
    height: 100px;
}

.nav-item .navlink-title {
    background-color: unset;
    padding: 8px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.sticky_tabs {
    position: -webkit-sticky;
    position: sticky !important;
    top: 3.4rem;
    z-index: 10;
    padding: 5px 0px;
    /*border-bottom: 1px solid #E2E8F0;*/
}

.nav-tabs .nav-border {
    color: #000;
    border: none;
}

.ico-color {
    color: #FFAA05;
    font-size: 16px;
}

#bottom-tab .nav-border.tab-primary:hover {
    color: #7366FF;
}

#bottom-tab .nav-border.tab-primary:focus, #bottom-tab .nav-border.tab-primary:active, #bottom-tab .nav-border.tab-primary.active {
    color: #7366FF;
    border-bottom: 2px solid #7366FF;
}

#bottom-tab .nav-border.tab-secondary:hover {
    color: #FF3364;
}

#bottom-tab .nav-border.tab-secondary:focus, #bottom-tab .nav-border.tab-secondary:active, #bottom-tab .nav-border.tab-secondary.active {
    color: #FF3364;
    border-bottom: 2px solid #FF3364;
}

#bottom-tab .nav-border.tab-success:hover {
    color: #54BA4A;
}

#bottom-tab .nav-border.tab-success:focus, #bottom-tab .nav-border.tab-success:active, #bottom-tab .nav-border.tab-success.active {
    color: #54BA4A;
    border-bottom: 2px solid #54BA4A;
}

#bottom-tab .nav-border.tab-danger:hover {
    color: #FC4438;
}

#bottom-tab .nav-border.tab-danger:focus, #bottom-tab .nav-border.tab-danger:active, #bottom-tab .nav-border.tab-danger.active {
    color: #FC4438;
    border-bottom: 2px solid #FC4438;
}

#bottom-tab .nav-border.tab-warning:hover {
    color: #FFAA05;
}

#bottom-tab .nav-border.tab-warning:focus, #bottom-tab .nav-border.tab-warning:active, #bottom-tab .nav-border.tab-warning.active {
    color: #FFAA05;
    border-bottom: 2px solid #FFAA05;
}

#bottom-tab .nav-border.tab-info:hover {
    color: #048AC8;
    cursor: pointer;
}

#bottom-tab .nav-border.tab-info:focus, #bottom-tab .nav-border.tab-info:active, #bottom-tab .nav-border.tab-info.active {
    color: #05A6F0;
    border-bottom: 2px solid #05A6F0;
}

#bottom-tab .nav-border.tab-light:hover {
    color: #f4f4f4;
}

#bottom-tab .nav-border.tab-light:focus, #bottom-tab .nav-border.tab-light:active, #bottom-tab .nav-border.tab-light.active {
    color: #f4f4f4;
    border-bottom: 2px solid #f4f4f4;
}

#bottom-tab .nav-border.tab-dark:hover {
    color: #2c323f;
}

#bottom-tab .nav-border.tab-dark:focus, #bottom-tab .nav-border.tab-dark:active, #bottom-tab .nav-border.tab-dark.active {
    color: #2c323f;
    border-bottom: 2px solid #2c323f;
}

.border-tab.nav-tabs li.nav-item:first-child {
    padding-left: 20px;
}

.border-tab.nav-tabs li.nav-item:last-child {
    padding-right: 10px;
}

#sideline-tab .nav-effect {
    display: inline-block;
    position: relative;
}

    #sideline-tab .nav-effect::after {
        content: "";
        position: absolute;
        left: 0;
        display: inline-block;
        height: 14px;
        width: 80%;
        border-bottom: 1px solid;
        margin-top: 10px;
        opacity: 0;
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s, transform 0.35s;
        -webkit-transform: scale(0, 1);
        transform: scale(0, 1);
    }

    #sideline-tab .nav-effect:hover::after {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }

.tabs-responsive-side .border-tab.nav-secondary.nav-left .nav-link:hover, .tabs-responsive-side .border-tab.nav-secondary.nav-left .nav-link.active {
    background-color: unset;
    border-left: none;
    border-radius: 0;
    transition: none;
}

@media (max-width: 576px) {
    .pills-blogger {
        justify-content: center;
        flex-wrap: wrap;
    }
}

input::placeholder, input.int_numbers::placeholder {
    color: #b5b5cf !important;
    font-size: 12px;
    font-weight: 500;
    opacity: 1 !important;
    text-transform: capitalize;
}

.material-wrapper {
    display: flex;
    gap: 12px;
}

@media (max-width: 576px) {
    .material-wrapper {
        flex-direction: column;
        align-items: center;
    }
}

.pills-component {
    width: 20%;
}

#row_create td.highlight {
    font-weight: 600;
    color: #7366FF;
}

#row_create td.danger {
    font-weight: 600;
    color: #FC4438;
}

.dropdown a.disabled .select-label {
    background-color: #F7F9FB;
    cursor: not-allowed !important;
    /*border: 0;*/
    pointer-events: none;
}


/**=====================
    2.36 Scrollbar CSS Start
==========================**/
[data-simplebar] {
    position: unset;
}

.simplebar-mask {
    top: 100px;
}

.simplebar-track {
    right: -2px;
}

    .simplebar-track.simplebar-vertical {
        top: 100px;
        width: 10px;
    }

    .simplebar-track.simplebar-horizontal {
        visibility: hidden !important;
    }

.simplebar-scrollbar:before {
    background: rgba(115, 102, 255, 0.2);
}

.scrollbar-images {
    margin-bottom: 12px;
}

.visible-wrapper img {
    width: calc(230px + 100 * (100vw - 320px) / 1600) !important;
    height: calc(230px + 100 * (100vw - 320px) / 1600);
}

.horizontal-scroll .horz-scroll-content .horizontal-img {
    height: 100%;
    max-width: 240px;
}

@media (max-width: 576px) {
    .horizontal-scroll .horz-scroll-content .horizontal-img {
        max-width: calc(220px + 20 * (100vw - 320px) / 256);
    }
}

.horizontal-scroll .horz-scroll-content .horizontal-img img {
    height: 100%;
    object-fit: cover;
}

.scroll-demo.scroll-b-none {
    padding: 0;
    border: none;
}

[dir=rtl] .scroll-demo .scroll-rtl .list-group-item span {
    margin-right: auto;
}

/**=====================
    2.36 Scrollbar CSS Ends
==========================**/

/**=====================
   3.5 Chart CSS Start
==========================**/
.radial-bar.radial-bar-lg > img, .radial-bar.radial-bar-lg:after {
    width: 70px;
    height: 70px;
    margin-left: 15px;
    margin-top: 15px;
    line-height: 70px;
}

.radial-bar.radial-bar-sm > img, .radial-bar.radial-bar-sm:after {
    width: 35px;
    height: 35px;
    margin-left: 7.5px;
    margin-top: 7.5px;
    line-height: 35px;
}

.radial-bar.radial-bar-xs > img, .radial-bar.radial-bar-xs:after {
    width: 20px;
    height: 20px;
    margin-left: 5.5px;
    margin-top: 4.5px;
    line-height: 21px;
}

.chart-block canvas {
    width: 100% !important;
}

.chart-block .chart-overflow {
    overflow: hidden;
    text-align: center;
}

.candidcahrt {
    width: 100%;
    height: 470px;
}

.amcharts-export-canvas {
    position: absolute;
    display: none;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #fff;
}

    .amcharts-export-canvas .canvas-container {
        transition: opacity 0.5s ease-out;
    }

    .amcharts-export-canvas.active {
        display: block;
    }

    .amcharts-export-canvas.dropbox .canvas-container {
        opacity: 0.5;
    }

.flot-chart-container {
    box-sizing: border-box;
    width: 100%;
    height: 400px;
}

    .flot-chart-container #toggling-series-flot {
        width: 79% !important;
    }

.all-chart .flot-chart-container {
    height: 350px;
}

.flot-chart-placeholder {
    width: 100%;
    height: 100%;
    font-size: 12px;
    line-height: 1.2em;
    text-align: center;
}

    .flot-chart-placeholder .legend table {
        border-spacing: 5px;
    }

.morris-hover {
    position: absolute;
    z-index: 1;
}

    .morris-hover.morris-default-style {
        border-radius: 10px;
        padding: 6px;
        color: #898989;
        background: #fff;
        border: solid 1px #ecf3fa;
        font-size: 12px;
        text-align: center;
    }

        .morris-hover.morris-default-style .morris-hover-row-label {
            font-weight: bold;
            margin: 0.25em 0;
        }

        .morris-hover.morris-default-style .morris-hover-point {
            white-space: nowrap;
            margin: 0.1em 0;
        }

.chart-sparkline {
    position: absolute;
    left: 0;
    top: 0;
    visibility: hidden;
    background: rgba(49, 49, 49, 0.7);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    color: #fff;
    font: 10px Rubik, sans-serif;
    text-align: left;
    white-space: nowrap;
    padding: 5px;
    border: 1px solid rgba(49, 49, 49, 0.75);
    box-sizing: content-box;
    z-index: 10000;
    border-radius: 5px;
}

    .chart-sparkline .jqsfield {
        color: #fff;
        font: 10px Rubik, sans-serif;
        text-align: left;
    }

.radial-bar {
    position: relative;
    display: inline-block;
    border-radius: 50%;
    background-color: transparent;
    box-sizing: content-box;
    width: 80px;
    height: 80px;
    font-size: 18px;
    background-clip: content-box;
}

    .radial-bar:after {
        display: inline-block;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 50%;
        text-align: center;
        font-weight: 500;
        color: #455a64;
        content: attr(data-label);
        background-color: #fff;
        z-index: 1;
        width: 56px;
        height: 56px;
        margin-left: 12px;
        margin-top: 12px;
        line-height: 56px;
    }

    .radial-bar > img {
        display: inline-block;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 50%;
        text-align: center;
        font-weight: 500;
        color: #455a64;
        z-index: 3;
        width: 56px;
        height: 56px;
        margin-left: 12px;
        margin-top: 12px;
        line-height: 56px;
    }

.radial-bar-danger.radial-bar-20 {
    background-image: linear-gradient(90deg, #efefef 50%, transparent 50%, transparent), linear-gradient(162deg, #FC4438 50%, #efefef 50%, #efefef);
}

.radial-bar.radial-bar-lg {
    width: 100px;
    height: 100px;
    font-size: 20px;
}

.radial-bar.radial-bar-sm {
    width: 50px;
    height: 50px;
    font-size: 12px;
}

.radial-bar.radial-bar-xs {
    width: 30px;
    height: 30px;
    font-size: 8px;
}

.pieLabel div {
    color: #fff !important;
}

    .pieLabel div input[type=checkbox] {
        margin: 7px;
    }

.knob-chart {
    min-height: 255px;
}

    .knob-chart .chart-clock-main {
        position: relative;
        width: 200px;
        margin: 45px auto;
    }

        .knob-chart .chart-clock-main .clock-large {
            position: absolute;
            left: -48px;
            top: -45px;
        }

        .knob-chart .chart-clock-main .clock-medium {
            position: absolute;
            left: 2px;
            top: 5px;
        }

        .knob-chart .chart-clock-main .clock-small {
            position: absolute;
            left: 15px;
            top: 55px;
        }

.peity-charts svg {
    width: 100%;
    height: 250px;
}

.peity-charts.peity-chart-primary svg polygon {
    fill: rgba(115, 102, 255, 0.2);
}

.peity-charts.peity-chart-primary svg polyline {
    stroke: var(--theme-default);
}

.bar-odd-even svg rect:nth-child(odd) {
    fill: var(--theme-default);
}

.bar-odd-even svg rect:nth-child(even) {
    fill: var(--theme-secondary);
}

.donut-peity svg path:nth-child(odd) {
    fill: var(--theme-default);
}

.donut-peity svg path:nth-child(even) {
    fill: var(--theme-secondary);
}

.small-donut ~ svg path:nth-child(odd),
.small-donut svg path:nth-child(odd),
.donut-peity2 ~ svg path:nth-child(odd),
.donut-peity2 svg path:nth-child(odd),
.pie-peity ~ svg path:nth-child(odd),
.pie-peity svg path:nth-child(odd) {
    fill: var(--theme-default);
}

.small-donut ~ svg path:nth-child(even),
.small-donut svg path:nth-child(even),
.donut-peity2 ~ svg path:nth-child(even),
.donut-peity2 svg path:nth-child(even),
.pie-peity ~ svg path:nth-child(even),
.pie-peity svg path:nth-child(even) {
    fill: #efefef;
}

.small-donut2 ~ svg path:nth-child(odd) {
    fill: var(--theme-secondary);
}

.small-donut3 ~ svg path:nth-child(odd) {
    fill: #54BA4A;
}

.small-donut4 ~ svg path:nth-child(odd) {
    fill: #16C7F9;
}

.small-donut5 ~ svg path:nth-child(odd) {
    fill: #FFAA05;
}

.small-donut6 ~ svg path:nth-child(odd) {
    fill: #FC4438;
}

p.data-attributes svg {
    margin-right: 10px;
}

.knob-block {
    position: relative;
}

    .knob-block input {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
        width: 100% !important;
        left: 0 !important;
        top: 0 !important;
        margin-left: 0 !important;
        margin-top: -3px !important;
    }

.knob-input-disable input {
    display: none !important;
}

.apex-chart {
    margin: 0 auto;
}

.apexcharts-toolbar {
    z-index: inherit !important;
}

.apexcharts-menu-item {
    width: 110px;
}

.word-tree {
    height: 400px;
}

.ct-series-a .ct-slice-pie,
.ct-series-a .ct-slice-donut-solid,
.ct-series-a .ct-area {
    fill: var(--theme-default);
}

.ct-series-a .ct-point,
.ct-series-a .ct-line,
.ct-series-a .ct-bar,
.ct-series-a .ct-slice-donut {
    stroke: var(--theme-default);
}

.ct-series-b .ct-point,
.ct-series-b .ct-line,
.ct-series-b .ct-bar,
.ct-series-b .ct-slice-donut {
    stroke: var(--theme-secondary);
}

.ct-series-b .ct-slice-pie,
.ct-series-b .ct-slice-donut-solid,
.ct-series-b .ct-area {
    fill: var(--theme-secondary);
}

.apache-cotainer {
    width: 100%;
    height: 350px;
    margin: 0;
}

.boxplot-cotainer {
    height: 420px;
}

.apache-cotainer-large {
    width: 100%;
    height: 500px;
    margin: 0;
}

.test-buttons button + button {
    margin-left: 10px;
}

.clip-chart-wrapper .test-chart-block {
    margin-bottom: -30px;
}

#echart-gauge .test-chart {
    width: 100%;
    height: 395px;
}

.polar-line {
    height: 350px;
}

#dotted {
    height: 390px;
}

.apexcharts-canvas .apexcharts-tooltip,
.apexcharts-canvas .apexcharts-xaxistooltip,
.apexcharts-canvas .apexcharts-yaxistooltip {
    z-index: 1;
}

@media (max-width: 1346px) {
    .flot-chart-container .flot-chart-placeholder ~ p.float-end {
        float: left !important;
    }

    [dir=rtl] .flot-chart-container .flot-chart-placeholder ~ p.float-end {
        float: right !important;
    }
}

/**=====================
    3.5 Chart CSS End
==========================**/

/* ========= responsive scss for 1200 screen ========= */
@media only screen and (max-width: 1199px) {
    .sticky-header header.sticky .nav-padding {
        padding: 15px 25px;
    }

    .navbar-toggler span {
        background-color: #fff;
    }

    .sticky-header .navbar-nav .nav-item .nav-link {
        color: #000;
        padding: 10px 12px !important;
        font-size: 15px;
    }

    .sticky-header .navbar-nav li {
        display: block;
        width: 100%;
    }
}



@media only screen and (max-width: 480px) {
    .sticky-header header.sticky {
        height: 56px;
    }
}

/**=====================
    5.1 Footer CSS Start
==========================**/
.footer {
    background-color: #fff;
    box-shadow: 0 0 20px rgba(89, 102, 122, 0.1);
    padding: 10px;
    bottom: 0;
    left: 0;
    /*margin-left: 265px;*/
    transition: 0.5s;
    z-index: 1000;
}

    .footer.footer-dark {
        background-color: #242934;
    }

        .footer.footer-dark p {
            color: #fff;
        }

.footer-fix {
    width: calc(100% - 0px);
    position: fixed;
    height: 50px;
}

/**=====================
    5.1 Footer CSS Ends
==========================**/


/**=====================
    Main Header css Start
==========================**/
.offcanvas .page-wrapper .page-body-wrapper .page-body,
.offcanvas-bookmark .page-wrapper .page-body-wrapper .page-body {
    position: relative;
    filter: blur(5px) grayscale(100%);
}

.offcanvas {
    position: unset;
    visibility: visible;
    background: unset;
    z-index: 2;
}

.toggle-sidebar {
    position: absolute;
    right: 30px;
    top: 25px;
    cursor: pointer;
}

    .toggle-sidebar svg {
        width: 20px;
        height: 20px;
    }

    .toggle-sidebar:before {
        content: "";
        position: absolute;
        height: 40px;
        width: 40px;
        background-color: rgba(115, 102, 255, 0.1);
        border-radius: 100%;
        left: -13px;
        z-index: -2;
        top: -10px;
        transform: scale(0);
        transition: all 0.3s ease;
    }

    .toggle-sidebar:hover:before {
        height: 40px;
        width: 40px;
        transform: scale(1);
        transition: all 0.3s ease;
    }

    .toggle-sidebar:hover > svg {
        color: var(--theme-default) !important;
        stroke: var(--theme-default) !important;
    }

.onhover-dropdown {
    cursor: pointer;
    position: relative;
}

.onhover-show-div {
    top: 80px;
    position: absolute;
    z-index: 8;
    background-color: #fff;
    transition: all linear 0.1s;
}

    .onhover-show-div li a svg {
        margin-top: 0 !important;
    }

        .onhover-show-div li a svg path,
        .onhover-show-div li a svg line {
            color: #2F2F3B !important;
        }

/**=====================
    Main Header css Ends 
==========================**/


/**=====================
    5.4 Navs CSS Start
==========================**/
#accordionoc #collapseicon,
#accordionoc #collapseicon1 {
    padding-top: 0px;
}

#accordionoc li button {
    display: flex;
    align-items: center;
}

.navs-icon.default-according.style-1 li button {
    position: relative;
}

    .navs-icon.default-according.style-1 li button:hover {
        color: var(--theme-default) !important;
    }

    .navs-icon.default-according.style-1 li button[aria-expanded=true]:before {
        right: 2px;
        top: 6px;
    }

    .navs-icon.default-according.style-1 li button[aria-expanded=false]:before {
        right: 2px;
        top: 6px;
    }

.navs-icon {
    padding: 30px;
}

    .navs-icon li {
        padding: 9px 0;
    }

        .navs-icon li a {
            color: #2F2F3B;
        }

            .navs-icon li a:hover {
                color: var(--theme-default);
            }

        .navs-icon li ul {
            padding-top: 9px;
        }

.onhover-dropdown.navs-dropdown:hover .onhover-show-div:before, .onhover-dropdown.navs-dropdown:hover .onhover-show-div:after {
    right: 77px;
    left: unset;
}


.pl-navs-inline {
    padding-left: 30px !important;
}

.inline-nav li {
    line-height: 1.3;
}

/**=====================
    5.4 Navs CSS Ends
==========================**/

.accordion-item {
    background-color: #F7F9FB;
    border: none;
    margin-bottom: 1rem;
    border-radius: 0.25rem;
}

.accordion-header {
    display: -webkit-inline-box;
    width: 100%;
}

h2.accordion-header .fa-trash-can {
    position: relative;
    font-size: 14px;
    right: 4rem;
    top: -1px;
    margin: 0 6px;
    color: #6B7C94;
    z-index: 7;
    cursor: pointer;
}

h2.accordion-header .fa-pen {
    position: relative;
    font-size: 14px;
    right: 4rem;
    top: -1px;
    margin: 0 6px;
    color: #6B7C94;
    cursor: pointer;
}

.accordion-button:hover {
    z-index: auto;
}

.accordion-button .hide_on_collapse {
    display: none;
}

.accordion-button.collapsed .hide_on_collapse {
    display: inline-block;
}

.accordion-button .hide_on_collapsed {
    display: inline-block;
}

.accordion-button.collapsed .hide_on_collapsed {
    display: none;
}

.accordion-button {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.8rem 1.25rem;
    font-size: 12px;
    color: #1E2432;
    font-weight: 500;
    text-align: left;
    background-color: #f7f9fb;
    border: 0;
    border-radius: 8px 8px 0px 0px !important;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
}

    .accordion-button:not(.collapsed) {
        color: inherit;
    }

    .accordion-button::after {
        display: none;
    }

    .accordion-button:not(.collapsed) {
        border-bottom: 1px solid #E2E8F0;
    }

    .accordion-button::before {
        flex-shrink: 0;
        width: 1.25rem;
        height: 1.25rem;
        margin-left: 0;
        margin-right: 10px;
        content: "";
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-size: 1.25rem;
        transition: transform 0.2s ease-in-out;
    }

    .accordion-button.power_insight::before {
        flex-shrink: 0;
        width: 1.25rem;
        height: 1.25rem;
        margin-left: auto;
        content: "";
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-size: 1.25rem;
        transition: transform 0.2s ease-in-out;
    }

    .accordion-button:not(.collapsed)::before {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
        transform: rotate(-180deg);
    }

    .accordion-button::before {
        width: 1rem;
        height: 1rem;
        background-size: 1rem;
    }


    .accordion-button .edit_button::after {
        flex-shrink: 0;
        width: 1.25rem;
        height: 1.25rem;
        position: absolute;
        left: 18px;
        content: "";
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-size: 1.25rem;
        transition: transform 0.2s ease-in-out;
    }

    .accordion-button .edit_button:not(.collapsed)::after {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
        transform: rotate(-180deg);
    }

.form-select, .form-control {
    background-color: #fff;
    color: var(--chart-text-color);
}

.bg-total {
    background: #166ac1 !important;
    color: #fff !important;
}

.page-title h4 {
    font-size: 16px;
    margin-top: 3px;
}

.dropdown .select-label {
    position: relative;
    display: flex;
    width: 100%;
    align-items: center;
    min-height: 34px;
    line-height: 20px;
    color: var(--text-gray);
    font-weight: 500;
    text-indent: 6px;
    background: #ffffff;
    z-index: 6;
    cursor: pointer;
    transform-style: preserve-3d;
    transform-origin: 50% 0%;
    transition: transform 300ms;
    user-select: none;
    font-size: 12px;
    border: 1px solid #d7dbe3;
    border-radius: 6px;
    overflow: hidden;
    padding: 8px;
    box-shadow: 0px 1px 2px 0px #12376914;
}

.custom-select {
    position: relative;
}

    .custom-select select1 {
        display: none; /*hide original SELECT element:*/
    }

.select-selected {
    background-color: #F7F9FB;
}

    /*style the arrow inside the select element:*/
    .select-selected:after {
        position: absolute;
        content: "";
        top: 8px;
        right: 25px;
        width: 0;
        height: 0;
        content: "\f078";
        font-family: 'Font Awesome 6 Pro';
        font-weight: normal;
    }

    /*point the arrow upwards when the select box is open (active):*/
    .select-selected.select-arrow-active:after {
        border-color: transparent transparent #fff transparent;
        top: 7px;
    }

/*style the items (options), including the selected item:*/
.select-items div, .select-selected {
    color: #000;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-color: #E2E8F0;
    cursor: pointer;
    user-select: none;
    border-radius: 0.25rem;
    /*    font-family: Rubik, sans-serif;*/
}

/*style items (options):*/
.select-items {
    position: absolute;
    background-color: #fff;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
    box-shadow: 0px 9px 20px rgba(46, 35, 94, 0.07);
}

/*hide the items when the select box is closed:*/
.select-hide {
    display: none;
}

.select-items div:hover, .same-as-selected {
    background-color: rgb(5 184 246);
    color: #fff;
}

.column-count-2 {
    column-count: 2 !important;
}

.accordion-flush .accordion-item {
    border-radius: 8px;
}

.form-control:disabled, .form-control[readonly] {
    background-color: #fff;
    color: var(--text-gray);
}

.form-control:disabled {
    background-color: #F7F9FB !important;
    opacity: 1;
}

.bulk_management_height {
    max-height: 76vh;
}

.calendar-icon {
    position: absolute;
    top: 8px;
    right: 15px;
}

.dropdown .select-label:after {
    content: '\f078';
    font-family: 'Font Awesome 6 Pro';
    position: absolute;
    top: 2px;
    right: 12px;
    line-height: 32px;
    text-align: center;
    font-size: 12px;
}

.dropdown .select-label.approval-matrix:after {
    content: none !important;
}


.dropdown .select-label.approval-matrix-another:after {
    content: none !important;
}

.dropdown .select-label.approval-matrix {
    border: 0 !important;
    padding: 0px !important;
}

.dropdown .select-label.approval-matrix-another {
    border: 0 !important;
    padding: 0px !important;
    box-shadow: none !important;
    color: #212529 !important;
    margin-left: 5px;
}

.dropdown .select-label:active:after {
    content: '\f077';
}

.dropdown.active .select-label:after {
    content: '\f077';
}

.dropdown.active .dropdown-list li {
    box-shadow: 0px 9px 20px rgba(46, 35, 94, 0.07);
}

#secondary_content {
    display: none;
}

.badge {
    font-size: 0.85em;
}

.bg-primary-curve {
    background-color: #05a6f0 !important;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    border-right: 1px solid white !important;
    color: #fff !important;
    width: 100%;
    padding: 5px;
}

.bg-primary-left {
    background-color: #05a6f0 !important;
    border-radius: 25px 0px 0px 25px;
    border-right: 2px solid white !important
}


.bg-grey {
    background-color: #f7f9fb !important;
}

.card_active {
    background-color: #e9f8ff !important;
}

.c-pointer {
    cursor: pointer !important;
}

.c-default {
    cursor: default !important;
}

.no-pointer-events {
    pointer-events: none !important;
}

.c-grab {
    cursor: grab;
}

.fa-rotate-success {
    -webkit-transform: rotate(270deg);
    transform: rotate(55deg);
}

.fa-rotate-danger {
    -webkit-transform: rotate(270deg);
    transform: rotate(-45deg);
}

.fa-rotate-success-130 {
    -webkit-transform: rotate(270deg);
    transform: rotate(-50deg);
}

.fa-rotate-danger-130 {
    -webkit-transform: rotate(270deg);
    transform: rotate(50deg);
}

.dropdown ul li {
    cursor: pointer;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 400;
    color: #666D80;
}

    .dropdown ul li:last-child {
        border-bottom: none;
    }

    .dropdown ul li:hover {
        background: #dcf2fd;
        transition: all 0.3s ease;
    }

.dropdown-item.active, .dropdown-item:active {
    color: #1e2125;
    text-decoration: none;
    background-color: #0d6efd;
}

.dropdown-item:hover, .dropdown-item:focus {
    background-color: #05a6f024;
    cursor: pointer;
}

.dropdown-item {
    padding: 0.5rem 1rem;
    font-size: 12px;
}

ul.dropdown-menu.DontHideOnClick.scrollbar-wrapper li .form-check label {
    cursor: pointer;
}

.week-picker {
    width: 50%
}

    .week-picker:after {
        content: '\f078';
        font-family: 'Font Awesome 6 Pro';
        position: absolute;
        top: 0;
        right: 12px;
        line-height: 32px;
        text-align: center;
        font-size: 12px;
    }

.datepicker .cw {
    font-size: 12px !important;
    font-weight: 700;
}

.datepicker table tr td, .datepicker table tr th {
    font-size: 13px !important;
}

.Print_Logo_start {
    width: 100px;
    height: 25px;
    float: left;
}

.Print_Logo_end {
    width: 120px;
    height: 25px;
    margin-bottom: 5px;
}


.datepicker.datepicker-dropdown {
    margin-top: 60px;
    z-index: 1001;
}

    .datepicker.datepicker-dropdown table.table-condensed tr th, .datepicker.datepicker-dropdown table.table-condensed tr td {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }

.dropdown .select-label.disabled {
    background-color: #F7F9FB;
    cursor: not-allowed !important;
    /* border: 0; */
    pointer-events: none;
}

.dropdown ul li.active {
    background-color: #dcf2fd;
}

/**********************************
    App Suite Start
**********************************/
.at-section__title {
    margin: 0 0 70px;
    color: #000;
    font-size: 3.5rem;
    font-weight: 300;
    line-height: 2.625rem;
    text-align: center;
}

.bg-appsuite-light-blue {
    background-color: #DBF0F0;
}

.at-grid {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    flex-wrap: wrap;
    padding-bottom: 3%;
}


    .at-grid[data-column="1"] .at-column {
        width: 100%;
        max-width: 100%;
        min-width: 100%;
        flex-basis: 100%;
    }

    .at-grid[data-column="2"] .at-column {
        width: 50%;
        max-width: 50%;
        min-width: 50%;
        flex-basis: 50%;
    }

    .at-grid[data-column="3"] .at-column {
        width: 33.3333333333%;
        max-width: 33.3333333333%;
        min-width: 33.3333333333%;
        flex-basis: 33.3333333333%;
    }

    .at-grid[data-column="4"] .at-column {
        width: 25%;
        max-width: 25%;
        min-width: 25%;
        flex-basis: 25%;
    }

    .at-grid[data-column="5"] .at-column {
        width: 20%;
        max-width: 20%;
        min-width: 20%;
        flex-basis: 20%;
    }

    .at-grid[data-column="6"] .at-column {
        width: 16.6666666667%;
        max-width: 16.6666666667%;
        min-width: 16.6666666667%;
        flex-basis: 16.6666666667%;
    }

    .at-grid[data-column="7"] .at-column {
        width: 14.2857142857%;
        max-width: 14.2857142857%;
        min-width: 14.2857142857%;
        flex-basis: 14.2857142857%;
    }

    .at-grid[data-column="8"] .at-column {
        width: 12.5%;
        max-width: 12.5%;
        min-width: 12.5%;
        flex-basis: 12.5%;
    }

    .at-grid[data-column="9"] .at-column {
        width: 12%;
        max-width: 12%;
        min-width: 12%;
        flex-basis: 12%;
    }

.middle {
    transition: .5s ease;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
    color: var(--theme-default);
}

    .middle a:hover, .middle a:hover span {
        color: #fff;
    }

    .middle img {
        display: block;
        max-width: 50px;
        margin: 0 auto;
    }

img.hide-on-hover {
    opacity: 0.6;
}

.at-column:hover .middle {
    opacity: 1;
}

.at-column:hover span {
    display: block;
    font-size: 12px;
}

.at-column:hover .hide-on-hover {
    opacity: 0;
    display: none;
}


.at-column {
    z-index: 0;
    position: relative;
    box-shadow: 0 8px 20px rgb(215, 215, 215);
    padding: 10px;
    margin: 12px;
    box-sizing: border-box;
    -webkit-transition: box-shadow 0.2s ease, z-index 0s 0.2s ease, -webkit-transform 0.2s ease;
    transition: box-shadow 0.2s ease, z-index 0s 0.2s ease, -webkit-transform 0.2s ease;
    transition: box-shadow 0.2s ease, transform 0.2s ease, z-index 0s 0.2s ease;
    transition: box-shadow 0.2s ease, transform 0.2s ease, z-index 0s 0.2s ease, -webkit-transform 0.2s ease;
    border-radius: 30px;
    font-size: 12px;
}

    .at-column:hover .at-social {
        margin: 16px 0 0;
        opacity: 1;
    }

    .at-column:before {
        content: "";
        display: block;
        padding-top: 100%;
    }

    .at-column:hover {
        z-index: 1 !important;
        color: #fff;
        cursor: pointer;
    }


@media (max-width: 800px) {
    .at-column {
        width: 50% !important;
        max-width: 50% !important;
        min-width: 50% !important;
        flex-basis: 50% !important;
    }
}

@media (max-width: 600px) {
    .at-column {
        width: 25% !important;
        max-width: 25% !important;
        min-width: 25% !important;
        flex-basis: 25% !important;
    }
}

.at-column.app-suit-inside:hover {
    -webkit-transform: scale(1.10);
    transform: scale(1.10);
}

.at-user {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    text-align: center;
    padding: 5px;
}

.at-user__avatar {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.inside_icons img {
    max-width: 20px !important;
}
.inside_icons i {
    color:#fff !important;
}
.at-user__avatar img {
    display: block;
    max-width: 50px;
    margin: 0 auto;
}

.at-user__name {
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    margin-top: 1rem;
    line-height: 1rem;
}

.at-user__title {
    color: #6f808a;
    font-size: 0.875rem;
    line-height: 2.375rem;
}

.at-social {
    margin: 0 0 -18px;
    opacity: 1;
    -webkit-transition: margin 0.2s ease, opacity 0.2s ease;
    transition: margin 0.2s ease, opacity 0.2s ease;
}

.at-social__item {
    display: inline-block;
    margin: 0 10px;
}

    .at-social__item a {
        display: block;
    }

    .at-social__item svg {
        fill: #515f65;
        display: block;
        height: 18px;
        -webkit-transition: fill 0.2s ease;
        transition: fill 0.2s ease;
    }

        .at-social__item svg:hover {
            fill: #788d96;
        }


.app-suit {
    max-width: 80%;
    width: 100%;
    margin: 0 auto;
}

.pt-10p {
    padding-top: 10%;
}

.profile-user-img {
    border: 3px solid #05A6F0;
    margin: 0 auto;
    padding: 3px;
    width: 130px !important;
    height: 130px !important;
    border-radius: 5%;
    display: block;
    text-align: center;
}

.app-suit-margin {
    margin: 2rem 0rem 1rem;
    background: #fff;
}

.app-suit-inside {
    z-index: 0 !important;
    position: relative !important;
    box-shadow: 0 0 0 1px #e2e9ed;
    padding: 0px !important;
    margin: 10px !important;
    box-sizing: border-box !important;
    -webkit-transition: box-shadow 0.2s ease, z-index 0s 0.2s ease, -webkit-transform 0.2s ease !important;
    transition: box-shadow 0.2s ease, z-index 0s 0.2s ease, -webkit-transform 0.2s ease !important;
    transition: box-shadow 0.2s ease, transform 0.2s ease, z-index 0s 0.2s ease !important;
    transition: box-shadow 0.2s ease, transform 0.2s ease, z-index 0s 0.2s ease, -webkit-transform 0.2s ease !important;
    border-radius: 10px;
}

/*.app-bg-green {
    background-image: linear-gradient(to right top, #aff4e9, #a1f1e5, #71e9d7, #71e9d7, #71e9d7);
}

.app-bg-yellow {
    background-image: linear-gradient(to right top, #ffde75, #fed561, #ffb718, #ffb718, #ffb718);
}

.app-bg-skyblue {
    background-image: linear-gradient(to right top, #29c0ff, #20bafb, #17b3f8, #0eadf4, #05a6f0);
}

.app-bg-pink {
    background-image: linear-gradient(to right top, #ff7d98, #ff7894, #ff7491, #ff6f8d, #ff6a89);
}

.app-bg-darkblue {
    background-image: linear-gradient(to right top, #335571, #2e4e68, #2a475f, #254157, #213a4e);
}

.app-bg-blue {
    background-image: linear-gradient(to right top, #4a96fd, #398cfe, #2882ff, #1578ff, #006dff);
}*/


.app-bg-green {
    background-image: linear-gradient(to right top, #31ebe1, #29ded4, #20d1c7, #16c4ba, #08b7ae);
}

.app-bg-yellow {
    background-image: linear-gradient(to right top, #ffde75, #fed561, #ffb718, #ffb718, #efa606);
}

.app-bg-skyblue {
    background-image: linear-gradient(to right top, #24b7f5, #20bafb, #14a6e7, #0da7ed, #2797cb);
}

.app-bg-pink {
    background-image: linear-gradient(to right top, #ff7d98, #ff7894, #ff7491, #fa6383, #f7476b);
}

.app-bg-darkblue {
    background-image: linear-gradient(to right top, #335571, #2e4e68, #2a475f, #254157, #192f41);
}

.app-bg-blue {
    background-image: linear-gradient(to right top, #889fd1, #7e96c8, #758cbf, #6b83b7, #5973ab);
    /*background-image: linear-gradient(to right top, rgb(175, 203, 213), rgb(163, 190, 200), rgb(150, 178, 188), rgb(138, 165, 175), rgb(126, 153, 163));*/
}

/**********************************
    App Suite End
**********************************/
.fs-12 {
    font-size: 12px !important;
}

.input-group > .form-control {
    font-size: 12px;
}

.blockquote p {
    font-size: 12px;
}

.sites-block {
    color: #000;
    text-align: left;
    margin: 5px 0px;
}

    .sites-block:first-child {
        margin-left: 0;
    }

    .sites-block span:first-child {
        margin-left: 1rem !important;
    }

    .sites-block i:hover {
        color: #FC4438;
        cursor: pointer;
    }

.mandatory {
    color: #FC4438 !important;
}

.header-top h5.txt-primary, .header-top h6.font-primary {
    font-size: 1rem;
}

.border-bottom-white {
    border-bottom: 1px solid #fff !important;
}

button.btn.btn-light.week-prev, button.btn.btn-light.week-next {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
}


@supports ((position: -webkit-sticky) or (position: sticky)) {
    .sticky-bottom {
        position: -webkit-sticky;
        position: sticky;
        bottom: -1px;
        z-index: 1020;
        background: #fff;
        width: 100%;
    }
}

.input-group .form-control.week-picker.week-picker-disabled {
    padding: 0.45rem;
}

.weekly_pandl-height {
    max-height: 55vh;
}

.td-text-white td {
    color: #fff;
}

.text-dark {
    color: #212529 !important;
}

.page-wrapper .page-title {
    max-width: 100vw;
    position: fixed;
    top: 3.6rem;
    z-index: 7;
    transition: 0.5s;
    background-color: #fff;
    box-shadow: 0px 4px 40px rgba(39, 32, 120, 0.1);
}

.page-wrapper.compact-wrapper .page-title {
    width: calc(100% - 265px);
}

    .page-wrapper.compact-wrapper .page-title.close_icon {
        width: calc(100% - 90px)
    }


.accordion-item:last-of-type .accordion-button.collapsed {
    border-radius: 5px !important;
}

.cp-4 {
    margin-top: -4rem;
}

.form-check {
    min-height: 0rem;
}

.fontawesome-state .switch-state:after {
    content: "\f00d";
    font-family: 'Font Awesome 6 Pro';
    font-size: 10px;
    left: 8px;
    position: absolute;
    top: 5px;
    color: #fff;
    transition: 0.4s;
}

.fontawesome-state input:checked + .switch-state:after {
    content: "\f00c";
    right: 7px;
    opacity: 1;
    transition: 0.4s;
}

li.disabled-li {
    background: transparent;
    color: #000 !important;
    pointer-events: none;
}



/*********************
    Time Picker Start
*********************/
.date_time input {
    cursor: pointer;
    border: none;
    outline: none;
    -webkit-appearance: none;
    color: var(--main-dark-grey);
}

    .date_time input:focus {
        outline: none;
    }

    .date_time input:active {
        border: none;
        outline: none;
    }

.ui-timepicker-container {
    z-index: 999 !important;
}

.date_time {
    width: 100%;
    align-items: center;
    border-radius: 8px;
    justify-content: flex-end;
    box-sizing: border-box;
    height: auto;
}

    .date_time input::placeholder {
        font-size: 12px;
    }

    .date_time span {
        background-color: var(--main-light-grey);
        color: #ddd;
        box-sizing: border-box;
        padding: 10px;
        display: flex;
        justify-content: center;
        border: 1px solid #ddd;
        align-items: center;
        border-radius: 0 0.15rem 0.15rem 0;
        cursor: pointer;
        position: absolute;
        z-index: 0;
        height: 36px;
        border-right: none;
    }

    .date_time input {
        /*height: 100%;*/
        width: 100%;
        box-sizing: border-box;
        background-color: transparent;
        z-index: 2;
        text-align: left;
        padding: 15px;
        color: rgba(82, 82, 108, 0.8);
    }

.ui-timepicker-standard {
    font-family: Rubik, sans-serif;
    font-size: 1.1em;
    background-color: #FFF;
    border: none;
    border-radius: 0.25rem;
    color: #212121;
    margin: 0;
    padding: 2px;
    box-shadow: 0 0 20px rgba(89, 102, 122, 0.1);
}

    .ui-timepicker-standard a {
        border: none;
        color: #212121;
        display: block;
        padding: 5px 0px;
        text-decoration: none;
    }


    .ui-timepicker-standard .ui-state-hover {
        background-color: #05A6F00A;
        border: none;
        font-weight: normal;
        color: #212121;
        cursor: pointer;
    }

ul.ui-timepicker-viewport li.ui-menu-item {
    border-bottom: 1px solid #e7e7e7;
}


/**************************************************Checkbox style for Leaves section**************************************************/
table.leave_table thead tr th, table.leave_table tbody tr td {
    border: none !important;
    text-align: center;
}

table.leave_table thead tr, table.leave_table tbody tr {
    background-color: transparent;
}

    table.leave_table thead tr th {
        background-color: transparent;
    }

.border_box {
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    background-color: transparent;
    padding-top: 5px;
}

/*.checkbox_group {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
    align-items: center;
}*/

.checkbox_group div {
    margin: 0px 0px;
}

.checkbox_group .leave_date {
    font-size: 14px;
    font-weight: 600;
}

.checkbox_group input[type="radio"],
.checkbox_group input[type="checkbox"] {
    visibility: hidden;
    height: 0;
    width: 0;
}


.checkbox_group label {
    text-align: center;
    vertical-align: middle;
    padding: 5px 0px;
    color: #707070;
    background-color: #ededed;
    outline: none;
    border-radius: 50%;
    cursor: pointer;
    width: 30px;
    height: 30px;
}

    .checkbox_group label:hover {
        /*color: #fff;*/
        box-shadow: rgb(84 186 74) 0px 0px 10px;
        transition: all 0.5s;
    }

    .checkbox_group label.bg-white:hover {
        color: #fff;
        background-color: none;
        box-shadow: none;
        cursor: default;
    }

.checkbox_group input[type="checkbox"]:checked + label {
    outline: none;
    color: #fff;
    background-color: #54BA4A;
    box-shadow: rgb(84 186 74) 0px 0px 10px;
    transition: all 0.5s;
}

table.table_non_editable .checkbox_group label:hover {
    box-shadow: none;
    cursor: default;
}


/*.checkbox_group input[type="radio"] + label,
.checkbox_group input[type="checkbox"] + label {
    outline: none;
    color: #707070;
    background-color: #ededed;
    transition: all 0.5s;
}*/
/**************************************************Checkbox style for Leaves section**************************************************/
/*********************
    Time Picker End
*********************/
.border-right {
    border-right: 1px solid #dee2e6;
}

.border-left {
    border-left: 1px solid #dee2e6;
}

/***********************************
    CSS Multilevel Menu Start
***********************************/
header {
    position: relative;
    width: auto !important;
}


nav {
    position: relative;
    margin: 0 auto;
}

#cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a, #cssmenu #head-mobile {
    border: 0;
    list-style: none;
    line-height: 3;
    display: block;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: #fff;
}

    #cssmenu ul li.has-sub ul {
        box-shadow: 0px 16px 32px -12px #07204540;
    }


    #cssmenu:after, #cssmenu > ul:after {
        content: ".";
        display: block;
        clear: both;
        visibility: hidden;
        line-height: 0;
        height: 0
    }

    #cssmenu #head-mobile {
        display: none
    }


    #cssmenu > ul > li {
        float: left;
        margin: 0 3px;
    }

        #cssmenu > ul > li > a {
            padding: 9px 16px;
            font-size: 13px;
            text-decoration: none;
            color: #6B7C94;
            font-weight: 500;
            cursor: pointer;
        }

        #cssmenu > ul > li:hover > a, #cssmenu ul li.active a {
            color: #05A6F0;
            font-weight: 700;
        }

        #cssmenu > ul > li:hover, #cssmenu ul li.active:hover, #cssmenu ul li.active, #cssmenu ul li.has-sub.active:hover {
            border-bottom: 2px solid #05A6F0 !important;
            -webkit-transition: background .3s ease;
            -ms-transition: background .3s ease;
            transition: background .3s ease;
        }

        #cssmenu > ul > li.active a:after {
            border-bottom: 2px solid #05A6F0 !important;
            position: absolute;
        }

        #cssmenu > ul > li.has-sub > a {
            padding-right: 30px
        }

.has-sub span {
    display: block;
}

#cssmenu > ul > li.has-sub > a:after {
    /*position: absolute;
    top: 28px;
    right: 11px;
    width: 8px;
    height: 2px;
    display: block;
    background: #ddd;
    content: "\f077";
    font-family: 'Font Awesome 6 Pro';*/
}

#cssmenu > ul > li.has-sub > a:before {
    position: absolute;
    top: 12px;
    right: 14px;
    display: block;
    font-size: 11px;
    content: "\f078";
    font-family: 'Font Awesome 6 Pro';
    -webkit-transition: all .25s ease;
    -ms-transition: all .25s ease;
    transition: all .25s ease;
    /*width: 2px;
    height: 8px;
    background: #ddd;*/
}

#cssmenu > ul > li.has-sub:hover > a:before {
    content: "\f077";
    font-family: 'Font Awesome 6 Pro';
}

#cssmenu ul li.has-sub ul {
    box-shadow: 0px 16px 32px -12px #07204540;
}

#cssmenu ul ul {
    position: absolute;
    left: -9999px;
    top: 59px;
}

    #cssmenu ul ul li {
        height: 0;
        -webkit-transition: all .25s ease;
        -ms-transition: all .25s ease;
        transition: all .25s ease
    }

        #cssmenu ul ul li:hover {
        }

#cssmenu li:hover > ul {
    left: auto;
    border-radius: 8px;
}

    #cssmenu li:hover > ul > li {
        height: auto;
        padding: 11px 15px;
        max-width: 100%;
        width: auto;
        margin: 5px;
        cursor: pointer;
    }

#cssmenu ul ul ul {
    margin-left: 100%;
    top: 0
}

#cssmenu ul ul li a {
    font-size: 12px;
    text-decoration: none;
    color: #36394A;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

#cssmenu ul ul li:last-child > a, #cssmenu ul ul li.last-item > a {
    border-bottom: 0
}

#cssmenu ul ul li:hover {
    background: #dcf2fd;
    color: #1E2432;
    margin: 5px;
    border-radius: 5px;
}

    #cssmenu ul ul li:hover > a, #cssmenu ul ul li a:hover {
        background: transparent;
    }

#cssmenu ul ul li.has-sub > a:after {
    position: absolute;
    top: 16px;
    right: 11px;
    width: 8px;
    height: 2px;
    display: block;
    background: #ddd;
    content: ''
}

#cssmenu ul ul li.has-sub > a:before {
    position: absolute;
    top: 13px;
    right: 14px;
    display: block;
    width: 2px;
    height: 8px;
    background: #ddd;
    content: '';
    -webkit-transition: all .25s ease;
    -ms-transition: all .25s ease;
    transition: all .25s ease
}

#cssmenu ul ul > li.has-sub:hover > a:before {
    top: 17px;
    height: 0
}

#cssmenu ul ul li.has-sub:hover, #cssmenu ul li.has-sub ul li.has-sub ul li:hover {
    background: #363636;
}

#cssmenu ul ul ul li.active a {
    border-left: 1px solid #333
}

#cssmenu > ul > li.has-sub > ul > li.active > a, #cssmenu > ul ul > li.has-sub > ul > li.active > a {
    border-top: 1px solid #333
}

@media screen and (max-width:1000px) {
    .logo {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 46px;
        text-align: center;
        padding: 10px 0 0 0;
        float: none
    }

    .logo2 {
        display: none
    }

    nav {
        width: 100%;
    }

    #cssmenu {
        width: 100%
    }

        #cssmenu ul ul {
            top: 0px;
        }

        #cssmenu ul {
            width: 100%;
            display: none;
            position: absolute;
            min-width: 350px;
        }

            #cssmenu ul li {
                width: 100%;
            }

                #cssmenu ul li:hover {
                    /*background: #363636;*/
                }

            #cssmenu ul ul li, #cssmenu li:hover > ul > li {
                height: auto;
                padding: 10px 25px;
            }

                #cssmenu ul li a, #cssmenu ul ul li a {
                    width: 100%;
                    border-bottom: 0
                }

        #cssmenu > ul > li {
            float: none
        }

        #cssmenu ul ul li a {
            padding: 10px 25px;
        }

        #cssmenu ul li.has-sub ul {
            box-shadow: none;
        }

        #cssmenu ul ul li {
            /*background: #333 !important;*/
        }

            #cssmenu ul ul li:hover {
                /*background: #363636 !important*/
            }

        #cssmenu ul ul ul li a {
            padding-left: 35px
        }

        #cssmenu ul ul li a {
            color: #1E2432;
            background: none;
            padding: 0px 10px;
        }

        #cssmenu ul ul li:hover > a, #cssmenu ul ul li.active > a {
            /*color: #fff*/
        }

        #cssmenu ul ul, #cssmenu ul ul ul {
            position: relative;
            left: 0;
            width: 100%;
            margin: 0;
            text-align: left
        }

            #cssmenu > ul > li.has-sub > a:after, #cssmenu > ul > li.has-sub > a:before, #cssmenu ul ul > li.has-sub > a:after, #cssmenu ul ul > li.has-sub > a:before {
                display: none
            }

        #cssmenu #head-mobile {
            display: block;
            padding: 23px;
            color: #ddd;
            font-size: 12px;
            font-weight: 700
        }

    .button {
        width: 55px;
        height: 46px;
        position: absolute;
        right: 0;
        top: 0;
        cursor: pointer;
        z-index: 12399994;
    }

        .button:after {
            position: absolute;
            top: 22px;
            right: 20px;
            display: block;
            height: 4px;
            width: 20px;
            border-top: 2px solid #6b7c94;
            border-bottom: 2px solid #6b7c94;
            content: ''
        }

        .button:before {
            -webkit-transition: all .3s ease;
            -ms-transition: all .3s ease;
            transition: all .3s ease;
            position: absolute;
            top: 16px;
            right: 20px;
            display: block;
            height: 2px;
            width: 20px;
            background: #6b7c94;
            content: ''
        }

        .button.menu-opened:after {
            -webkit-transition: all .3s ease;
            -ms-transition: all .3s ease;
            transition: all .3s ease;
            top: 23px;
            border: 0;
            height: 2px;
            width: 19px;
            background: #6b7c94;
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg)
        }

        .button.menu-opened:before {
            top: 23px;
            background: #6b7c94;
            width: 19px;
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            transform: rotate(-45deg)
        }

    #cssmenu .submenu-button {
        position: absolute;
        z-index: 99;
        right: 0;
        top: 15px;
        display: block;
        /*border-left: 1px solid #444;*/
        height: 28px;
        width: 100%;
        cursor: pointer
    }

        #cssmenu .submenu-button.submenu-opened {
            /*background: #262626*/
        }

    #cssmenu ul ul .submenu-button {
        height: 34px;
        width: 34px
    }

    #cssmenu .submenu-button:after {
        /*position: absolute;
            top: 13px;
            right: 19px;
            display: block;
            content: "\f078";
            font-family: 'Font Awesome 6 Pro';
            width: 8px;
            height: 2px;
            background: #ddd;*/
    }

    #cssmenu ul ul .submenu-button:after {
        /*top: 15px;
            right: 13px*/
    }

    #cssmenu .submenu-button.submenu-opened:after {
        background: #fff
    }

    #cssmenu .submenu-button:before {
        position: absolute;
        top: 0px;
        right: 22px;
        display: block;
        content: "\f077";
        font-family: 'Font Awesome 6 Pro';
        /*width: 2px;
            height: 8px;
            background: #ddd;*/
    }

    #cssmenu ul ul .submenu-button:before {
        top: 12px;
        right: 16px
    }



    #cssmenu .submenu-button.submenu-opened:after {
        display: none
    }

    #cssmenu ul ul ul li.active a {
        border-left: none
    }

    #cssmenu > ul > li.has-sub > ul > li.active > a, #cssmenu > ul ul > li.has-sub > ul > li.active > a {
        border-top: none
    }
}

/***********************************
    CSS Multilevel Menu End
***********************************/

.tap-top {
    position: absolute;
}

ul.nav-menus li i {
    color: #6B7C94;
}

.text-grey {
    color: #6B7C94 !important;
}

.txt-green {
    color: #1DCA5D !important;
}

.dropdown-menu.scrollbar-wrapper li {
    padding: 0.5rem;
    font-size: 12px;
}

    .dropdown-menu.scrollbar-wrapper li:hover {
        background: #05a6f024;
        transition: all 0.3s ease;
    }

    .dropdown-menu.scrollbar-wrapper li a {
        display: block;
    }

.dropdown-menu {
    padding: 0;
    margin-top: 5px;
    box-shadow: 0px 2px 18px 4px #12376914;
    /*box-shadow: 0px 16px 32px 12px #12376914;*/
    border: none;
    z-index: 1001;
}

ul.dropdown-menu li.active {
    background: #05a6f024;
}

.btn_fixed {
    position: sticky;
    right: 17px;
    float: right;
}

.bg_reports_dd {
    background-color: #f0f6ff !important;
}


/***********************************
    Right panel Start
***********************************/

.right-panel {
    /*padding: 20px 20px;
    height:100%;*/
}

.headings {
    color: #1E2432;
    font-weight: 600 !important;
    font-size: 14px;
    margin-bottom: 1rem;
}

.heading-text {
    font-weight: 600;
    text-align: center;
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
    display: inline;
}

.logo-font {
    font-size: 14px;
    font-weight: 500;
    color: #1E2432;
    margin-bottom: 5px;
}

/***********************************
        Image Upload Start
 ***********************************/

.image-preview {
    width: 96px;
    height: 96px;
    background-color: #fff;
    border-radius: 50%;
    border: 1px solid #E2E8F0;
}

.image-preview-entity {
    width: 200px;
    height: 100px;
    background-color: #fff;
    border-radius: 6px;
    border: 1px solid #E2E8F0;
}

.image-preview-user {
    width: 100px;
    height: 100px;
    background-color: #fff;
    border-radius: 50%;
    border: 1px solid #E2E8F0;
}

div.btn {
    position: relative;
    overflow: hidden;
}

input.logo_input {
    position: absolute;
    opacity: 0;
    right: 0;
    top: 0;
    cursor: pointer;
}

.image-format-text {
    color: #94A3B8;
}

.bg-user-circle {
    background-color: #F7F9FB;
}

/***********************************
      Image Upload End
***********************************/

/***********************************
     Image Crop Start
***********************************/
.filepreviewprofile {
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    height: 100%;
    height: -webkit-fill-available;
    opacity: 0;
    cursor: pointer;
}

/*----modal--------*/
.cr-vp-square {
    width: 200px !important;
    height: 100px !important;
    border-radius: 8px;
}

.cr-vp-circle {
    width: 150px !important;
    height: 150px !important;
    border-radius: 50% !important;
}

.cropImageModal .modal-dialog {
    max-width: 750px;
    width: 90%;
    margin: 0.5rem auto;
}

.up-photo-title {
    padding: 8px 15px;
    text-align: center;
}

#upload-demo {
    position: relative;
    width: 100%;
    height: 250px;
    padding-bottom: 0;
}

.croppie-container h5 {
    position: absolute;
    bottom: 4px;
    text-align: center;
    left: 0;
    right: 0;
    color: #fff;
    z-index: 2;
    font-size: 13px;
}

figure figcaption {
    position: absolute;
    bottom: 0;
    color: #fff;
    width: 100%;
    padding-left: 9px;
    padding-bottom: 5px;
    text-shadow: 0 0 10px #000;
}

.croppie-container .cr-image {
    right: 0;
}

.croppie-container .cr-slider-wrap {
    width: 275px;
}

.cr-slider-wrap p {
    font-size: 13px;
    color: #94A3B8;
    text-align: center;
}

.upload-action-btn {
    margin-top: 60px;
    padding-top: 40px;
}

.cr-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: #006AFA;
    cursor: pointer;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.25);
}

.cr-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: #006AFA;
    cursor: pointer;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.25);
}

.cr-slider::-ms-thumb {
    width: 18px;
    height: 18px;
    background: #006AFA;
    cursor: pointer;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.25);
}

.cr-slider::-webkit-slider-runnable-track {
    width: 275px;
    height: 2px;
    cursor: pointer;
    box-shadow: none;
    background: #E0E0E0;
    border-radius: 3px;
    border: none;
}

.cr-slider:focus::-webkit-slider-runnable-track {
    background: #E0E0E0;
}

.cr-slider::-moz-range-track {
    width: 275px;
    height: 2px;
    cursor: pointer;
    box-shadow: none;
    background: #000;
    border-radius: 3px;
    border: none;
}

.cr-slider::-ms-track {
    width: 275px;
    height: 2px;
    cursor: pointer;
    box-shadow: none;
    background: #FF3364;
    border-radius: 3px;
    border: none;
    color: transparent;
}

.croppie-container .cr-viewport, .croppie-container .cr-resizer {
    box-shadow: 0 0 2000px 2000px rgb(199 199 199 / 50%) !important;
}
/***********************************
       Image Crop End
***********************************/


/***********************************
    form Control UI Start
***********************************/
label {
    font-weight: 500;
    font-size: 12px;
    color: #1E2432;
    margin-bottom: 2px;
}

input:disabled, input[type=text]:disabled, input[type=date]:disabled, textarea:disabled, input[type=email]:disabled, input[type=password]:disabled, input[id="primary_phone"]:disabled, input[id="country"]:disabled, .custom-select.form-control-box.disabled {
    background-color: #F7F9FB;
    cursor: not-allowed;
    /*border: 0;*/
    pointer-events: none;
}

input[type=text], input[type=email], input[type=password], input[type=date], input[type=tel] {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d7dbe3;
    border-radius: 6px;
    font-size: 12px;
    background-color: white;
    color: var(--text-gray);
    font-weight: 500;
    padding: 9px;
    box-shadow: 0px 1px 2px 0px #12376914;
    margin-bottom: 1rem;
}

input[name="search"] {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d7dbe3;
    border-radius: 6px;
    font-size: 12px;
    background-color: white;
    padding: 9px 9px 9px 30px;
    box-shadow: 0px 1px 2px 0px #12376914;
    background-image: url(../images/HR/search-lg.svg);
    background-size: 18px;
    background-position: 7px 7px;
    background-repeat: no-repeat;
    margin-bottom: 1rem;
}

input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, input[type=date]:focus, textarea:focus, .form-control:focus, input[type=tel]:focus {
    color: #212529;
    background-color: #fff;
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.25) !important;
}

input.error, .error {
    border: 1px solid #F34040 !important;
    border-radius: 6px;
}

.hidden-input {
    display: none;
}


#date {
    width: 100%;
    outline: none;
    border: 1px solid #aaa;
    padding: 6px 28px;
    color: #aaa;
}

.date-column {
    position: relative;
}

    .date-column .date-text {
        position: absolute;
        top: 6px;
        left: 12px;
        color: #aaa;
    }

    .date-column .date-icon {
        position: absolute;
        top: 13px;
        right: 10px;
        color: #6B7C94;
        pointer-events: none;
    }

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
}


@font-face {
    font-family: 'password';
    font-style: normal;
    font-weight: 400;
    src: url(https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/password.ttf);
}

.Passwordkey {
    font-family: 'password';
}


.placeholder::after {
    content: attr(data-type);
    position: absolute;
    right: 25px;
    font-size: 12px;
    transform: translateY(52%);
    color: #1E2432;
    font-weight: 400;
}

.placeholder_API::after {
    content: "\f24d";
    font-family: 'Font Awesome 6 Pro';
    position: absolute;
    right: 25px;
    top: 39px;
    font-size: 12px;
    transform: translateY(-50%);
    color: #6B7C94;
    font-weight: 300;
    cursor: pointer;
}


.placeholder_eye::after {
    content: "\f070";
    font-family: 'Font Awesome 6 Pro';
    position: absolute;
    right: 25px;
    top: 34px;
    font-size: 12px;
    transform: none;
    color: #6B7C94;
    font-weight: 300;
    cursor: pointer;
}

.placeholder_eye_slash::after {
    content: "\f06e";
    font-family: 'Font Awesome 6 Pro';
    position: absolute;
    right: 25px;
    top: 34px;
    font-size: 12px;
    color: #6B7C94;
    font-weight: 300;
    cursor: pointer;
}


.placeholder_eye_basic::after {
    content: "\f070";
    font-family: 'Font Awesome 6 Pro';
    position: absolute;
    right: 25px;
    top: 40px;
    font-size: 12px;
    transform: none;
    color: #6B7C94;
    font-weight: 300;
    cursor: pointer;
}

.placeholder_eye_slash_basic::after {
    content: "\f06e";
    font-family: 'Font Awesome 6 Pro';
    position: absolute;
    right: 25px;
    top: 40px;
    font-size: 12px;
    color: #6B7C94;
    font-weight: 300;
    cursor: pointer;
}

.placeholder_blank::after {
    content: attr(data-type);
    position: absolute;
    right: 25px;
    top: 35%;
    font-size: 12px;
    transform: translateY(-50%);
    color: #1E2432;
    font-weight: 400;
}

.placeholder_eye_table::after {
    content: "\f06e";
    font-family: 'Font Awesome 6 Pro';
    position: absolute;
    right: 10px;
    top: 45%;
    font-size: 12px;
    transform: translateY(-50%);
    color: #6B7C94;
    font-weight: 300;
    cursor: pointer;
}

.placeholder_pound_before::before {
    content: attr(data-type);
    position: absolute;
    left: 10px;
    top: 25%;
    font-size: 12px;
    /*transform: translateY(-50%);*/
    color: #1E2432;
    font-weight: 400;
}

.placeholder_pound::after {
    content: attr(data-type);
    position: absolute;
    left: 25px;
    top: 53%;
    font-size: 12px;
    transform: translateY(-50%);
    color: #1E2432;
    font-weight: 400;
}

.placeholder_pound input {
    padding-left: 1.75rem;
}

textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d7dbe3;
    border-radius: 6px;
    font-size: 12px;
    background-color: white;
    padding: 8px;
    box-shadow: 0px 1px 2px 0px #12376914;
    margin-bottom: 1rem;
}

    textarea::-webkit-scrollbar-thumb {
        cursor: default !important;
    }

.form-control {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d7dbe3;
    border-radius: 6px;
    font-size: 12px;
    background-color: white;
    padding: 3px 8px;
    box-shadow: 0px 1px 2px 0px #12376914;
    margin-bottom: 1rem;
}

.form-control-box {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d7dbe3;
    border-radius: 6px;
    font-size: 12px;
    color: var(--text-gray);
    background-color: white;
    padding: 9px;
    box-shadow: 0px 1px 2px 0px #12376914;
    margin-bottom: 1rem;
}

.date_range {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d7dbe3;
    border-radius: 6px;
    font-size: 12px;
    background-color: white;
    padding: 9px;
    box-shadow: 0px 1px 2px 0px #12376914;
    margin-bottom: 1rem;
}

    .date_range span {
        color: #757589;
        font-size: 11px;
    }

.form-check-input {
    border: 1px solid #D0D5DD;
    width: 14px;
    height: 14px;
    min-width: 14px;
    max-width: 14px;
}

.form-check.form-control {
    padding: 8px;
}

.entity_field {
    margin-bottom: 0 !important;
    width: 300px !important;
    height: 30px;
}

.form-check-input[type=checkbox] {
    border-radius: 4px;
}

.form-control span {
    font-size: 12px;
    font-weight: 500;
}

.leave-duration-input {
    border: 0 !important;
    max-width: 35px;
    font-weight: 700 !important;
    cursor: pointer !important;
    text-align: center;
    box-shadow: none !important;
    padding: 3px !important;
    font-size: 10px !important;
    background: transparent !important;
    display: block;
    margin: 0 auto;
}

input.leave-duration-input:focus {
    border: 1px solid #d7dbe3 !important;
    font-weight: 500 !important;
    transition: 0.3s ease-in-out;
    background:#fff !important;
}

/***********************************
    form Control UI End
***********************************/
/***********************************
    Tags UI start
***********************************/
.tags {
    background-color: #F7F9FB;
    padding: 10px;
    border-radius: 0.25rem;
    color: #1E2432;
    display: block;
    text-align: center;
    cursor: not-allowed;
}

.tags-normal {
    background-color: #F7F9FB;
    padding: 10px;
    border-radius: 0.25rem;
    color: #1E2432;
    display: block;
    text-align: center;
}

    .tags-normal i {
        color: #6B7C94;
        z-index: 10;
        cursor: pointer;
        margin-top: 3px;
        float: right;
    }

.tags-editable {
    background-color: #F7F9FB;
    padding: 7px;
    border-radius: 6px;
    color: #1E2432;
    display: block;
    text-align: center;
    cursor: pointer;
}

    .tags-editable:hover {
        background-color: #E2E8F0;
        transition: 0.5s;
    }

    .tags-editable i {
        display: none;
        color: #6B7C94;
        z-index: 10;
        margin-top: 6px;
    }

    .tags-editable:hover i:first-child {
        display: inline-block;
        float: left;
        transition: 0.5s;
    }

    .tags-editable:hover i:last-child {
        display: inline-block;
        float: right;
        transition: 0.5s;
    }

    .tags-editable span {
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 60%;
    }
/***********************************
    Tags UI End
***********************************/

/***********************************
    File Upload UI Start
***********************************/
.dropzone {
    margin-right: auto;
    margin-left: auto;
    padding: 20px;
    border: 2px solid #ACE1FA;
    border-radius: 6px;
    -webkit-border-image: none;
    -o-border-image: none;
    border-image: none;
    background: #CDEDFC33;
    box-sizing: border-box;
    position: relative;
}

.file-area {
    width: 100%;
    position: relative;
    border: 2px solid #ACE1FA;
    border-radius: 6px;
    -webkit-border-image: none;
    -o-border-image: none;
    border-image: none;
    background: #CDEDFC33;
}

    .file-area input[type=file] {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
        cursor: pointer;
    }

        .file-area input[type=file]:focus {
            outline: none;
            border: none;
        }

    .file-area .file-dummy {
        width: 100%;
        padding: 13px;
        background: rgba(255, 255, 255, 0.2);
        border: 2px dashed rgba(255, 255, 255, 0.2);
        text-align: center;
        transition: background 0.3s ease-in-out;
        outline: none;
        height: 69px;
    }

        .file-area .file-dummy .success {
            display: none;
        }

    .file-area:hover .file-dummy {
        background: rgba(255, 255, 255, 0.5);
        transition: all 0.3s;
    }

    .file-area input[type=file]:valid + .file-dummy .success {
        display: inline-block;
    }

    .file-area input[type=file]:valid + .file-dummy .default {
        display: none;
    }

.file_text {
    float: left;
}

/***********************************
    File Upload UI End
***********************************/


/*======= Badge-color css starts  ======= */
.badge {
    border-radius: 8px;
    padding: 0.44em 0.7em;
    min-width: 25px;
    vertical-align: middle;
}

.badge-lg {
    border-radius: 8px;
    padding: 7px 16px;
    min-width: 25px;
    white-space: nowrap;
}

.badge-primary {
    background-color: #7366FF;
}

.badge-secondary {
    background-color: var(--theme-secondary);
}

.badge-success {
    background-color: #54BA4A;
    color: #fff;
}

.badge-danger {
    background-color: #F34040;
}

.badge-info {
    background-color: #16C7F9;
}

.badge-light {
    background-color: #F7F9FB;
    border: 1px solid #E2E8F0;
    color: #1E2432;
}

.badge-dark {
    background-color: #2c323f;
}

.badge-warning {
    background-color: #F3A515;
}

.badge-primary {
    background-color: var(--theme-default) !important;
}

.badge-white {
    background-color: #fff;
    border: 1px solid #E2E8F0;
    color: #6B7C94;
}

/*======= Badge-color css end  ======= */

/***********************************
    Badge UI Start
***********************************/

.badge-light-primary {
    background-color: #3B80F21A;
    border: 1px solid #3B80F21A;
    color: #05a5ef;
}

.badge-light-secondary {
    background-color: #ededed;
    color: #707070;
}

.badge-light-success {
    background-color: #EEFFF4;
    color: #039855;
    border: 1px solid #1DCA5D1A;
}

.badge-light-available {
    background-color: #ddf7e6;
    color: #039855;
    border: 1px solid #1DCA5D1A;
}

.badge-light-danger {
    background-color: #fff7f7;
    color: #FC4438 !important;
    border: 1px solid #F340401A;
}

.badge-light-purple {
    background-color: #FAF5FF;
    color: #9747FF;
    border: 1px solid #9747FF1A;
}

.badge-light-grey {
    background-color: #F3F8FF;
    color: #8494AD;
    border: 1px solid #8494AD1A;
}

.badge-light-info {
    background-color: #d3f4fe;
    color: #05a6f0;
}

.badge-light-light {
    background-color: #b7b7c9;
    color: #52526c;
}

.badge-light-dark {
    background-color: #8490a9;
    color: #2c323f;
}

.badge-light-warning {
    background-color: #FFF7DE;
    border: 1px solid #F3A5151A;
    color: #DC6803;
}

.badge-pending {
    background-color: #FFBF00;
    color: #fff;
}

/***********************************
    Badge UI End
***********************************/

/*====== Image-sizes css starts ======*/
.img-10 {
    width: 10px !important;
}

.img-h-10 {
    height: 10px !important;
}

.img-20 {
    width: 20px !important;
}

.img-24 {
    width: 24px !important;
}

.img-h-20 {
    height: 20px !important;
}

.img-30 {
    width: 30px !important;
}

.img-h-30 {
    height: 30px !important;
}

.img-32 {
    width: 32px !important;
    height: 32px !important;
}

.img-36 {
    width: 36px !important;
    height: 36px !important;
}

.img-40 {
    width: 40px !important;
    height: 40px !important;
}

.img-h-40 {
    height: 40px !important;
}

.img-50 {
    width: 50px !important;
}

.img-h-50 {
    height: 50px !important;
}

.img-60 {
    width: 60px !important;
}

.img-h-60 {
    height: 60px !important;
}

.img-70 {
    width: 70px !important;
}

.img-h-70 {
    height: 70px !important;
}

.img-80 {
    width: 80px !important;
}

.img-h-80 {
    height: 80px !important;
}

.img-90 {
    width: 90px !important;
}

.img-h-90 {
    height: 90px !important;
}

.img-100 {
    width: 100px !important;
}

.img-h-100 {
    height: 100px !important;
}

.img-hw-100 {
    width: 100% !important;
    height: 100% !important;
}

/*====== Image-sizes css ends ======*/

/**=====================
  2.3 Avatars CSS start
==========================**/
.avatars .avatar {
    display: inline-block;
    margin-right: 10px;
    position: relative;
    width: auto;
}

    .avatars .avatar:last-child {
        margin-right: 0;
    }

    .avatars .avatar .b-r-30 {
        border-radius: 30px;
    }

    .avatars .avatar .b-r-35 {
        border-radius: 35px;
    }

    .avatars .avatar .b-r-25 {
        border-radius: 25px;
    }

    .avatars .avatar .b-r-15 {
        border-radius: 15px;
    }

    .avatars .avatar.ratio img {
        width: auto;
    }

    .avatars .avatar .status {
        position: absolute;
        height: 12%;
        width: 12%;
        border-radius: 100%;
        bottom: 12%;
        right: 4%;
    }

    .avatars .avatar .img-100 {
        width: calc(75px + 25 * (100vw - 320px) / 1600) !important;
        height: calc(75px + 25 * (100vw - 320px) / 1600);
    }

    .avatars .avatar .img-90 {
        width: calc(65px + 25 * (100vw - 320px) / 1600) !important;
        height: calc(65px + 25 * (100vw - 320px) / 1600);
    }

    .avatars .avatar .img-80 {
        width: calc(55px + 25 * (100vw - 320px) / 1600) !important;
        height: calc(55px + 25 * (100vw - 320px) / 1600);
    }

    .avatars .avatar .img-70 {
        width: calc(45px + 25 * (100vw - 320px) / 1600) !important;
        height: calc(45px + 25 * (100vw - 320px) / 1600);
    }

.status-offline {
    background-color: #FC4438;
}

.status-online {
    background-color: #54BA4A;
}

.status-dnd {
    background-color: #FFAA05;
}

.customers ul {
    display: inline-block;
}

    .customers ul li img {
        border: 2px solid var(--white);
        transition: 0.5s;
    }

        .customers ul li img:hover {
            transform: translateY(-4px) scale(1.02);
            transition: 0.5s;
        }

    .customers ul li + li {
        margin-left: -7%;
    }

.customers.avatar-group {
    margin-right: 30px;
}

    .customers.avatar-group:last-child {
        margin-right: 0;
    }

.avatar-showcase {
    margin-bottom: -10px;
}

    .avatar-showcase .avatars .avatar {
        margin-bottom: 10px;
    }

    .avatar-showcase .avatar-group {
        margin-bottom: 10px;
    }

    .avatar-showcase .ratio > * {
        position: relative;
        top: unset;
        left: unset;
    }

.text_avatar {
    background: #3B80F2;
    border-radius: 50%;
    color: #fff;
    text-transform: uppercase;
    padding: 8px 3px;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    font-size: 8px;
    white-space: nowrap;
    font-weight: normal;
    text-align: center;
    display: inline-block;
    line-height: 1;
}

.text_avatar_36 {
    background: #3B80F2;
    border-radius: 50%;
    color: #fff;
    text-transform: uppercase;
    padding: 12px 0px;
    vertical-align: middle;
    width: 36px;
    height: 36px;
    font-size: 9px;
    white-space: nowrap;
    font-weight: 700;
    text-align: center;
    float: left;
    margin-right: 12px;
    display: block;
}

.text_avatar_40 {
    background: #3B80F2;
    border-radius: 50%;
    color: #fff;
    text-transform: uppercase;
    padding: 12px 0px;
    vertical-align: middle;
    width: 40px;
    height: 40px;
    min-width: 40px;
    font-size: 9px;
    white-space: nowrap;
    font-weight: 700;
    text-align: center;
    float: left;
    margin-right: 12px;
    display: block;
}


.text_avatar_36_t {
    background: #3B80F2;
    border-radius: 50%;
    color: #fff;
    text-transform: uppercase;
    padding: 12px 0px;
    vertical-align: middle;
    width: 36px;
    height: 36px;
    font-size: 9px;
    white-space: nowrap;
    font-weight: 700;
    text-align: center;
}

.text_avatar_48 {
    background: #3B80F2;
    border-radius: 50%;
    color: #fff;
    text-transform: uppercase;
    padding: 15px 0px;
    vertical-align: middle;
    width: 48px;
    height: 48px;
    font-size: 12px;
    white-space: nowrap;
    font-weight: 700;
    text-align: center;
    float: left;
    margin-right: 12px;
    display: block;
}

.avatar p {
    margin-bottom: 0;
}

.profile_avatar {
    background: #3B80F2;
    border-radius: 50%;
    color: #fff;
    text-transform: uppercase;
    padding: 15px 3px;
    vertical-align: middle;
    width: 48px;
    height: 48px;
    font-size: 12px;
    white-space: nowrap;
    font-weight: 700;
    text-align: center;
    display: inline-block;
}

/**=====================
    2.3 Avatars CSS Ends
==========================**/


/**=====================================
    Dragable and Non-dragable CSS Start
=====================================**/
.dragable {
    width: 100%;
    background-color: white;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid #d7dbe3;
    text-align: center;
    font-size: 13px;
    margin: 0.5rem;
    box-shadow: 0px 1px 2px 0px #12376914;
    cursor: move;
}

.non-dragable {
    width: 100%;
    background-color: #F7F9FB;
    padding: 10px;
    border-radius: 6px;
    color: #1E2432;
    display: block;
    text-align: center;
    margin: 0.5rem;
    cursor: not-allowed;
}

.dragable_head {
    background-color: #fff;
    color: #05A6F0;
    border-radius: 6px 6px 0px 0px;
    padding: 5px 10px;
    font-size: 12px;
}

.dragged {
    border: 1px dashed #fff;
    border-radius: 6px;
    color: #fff;
    font-size: 12px;
    padding: 8px 15px;
    text-align: center;
    width: 100%;
}

.non-editable-border {
    border: 1px solid #FFFFFF80 !important;
    border-radius: 0px 6px 6px 6px;
}

/**=====================================
    Dragable and Non-dragable CSS End
=====================================**/
.employee_name {
    font-weight: 500;
    margin-top: 0.5rem;
    display: block;
}

.f-14-text {
    font-size: 12px;
    font-weight: 500;
    color: #94A3B8;
    display: block;
}


.m-w-100 {
    width: 100px;
}

.total_Hours {
    background: #F7F9FB;
    padding: 0.6rem 1rem;
    border-radius: 6px;
}

.leave_section {
    background-color: #f7f9fb;
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid #E2E8F0;
    margin-bottom: 1rem;
}

.department_number {
    font-weight: 600;
    color: #1E2432;
    display: flex;
}

    .department_number span {
        font-weight: 500;
        font-size: 12px;
        color: #94A3B8;
        text-transform: uppercase;
        margin-left: 5px;
    }

.card-header-right-icon {
    float: right;
    color: var(--theme-default);
}

    .card-header-right-icon i {
        cursor: pointer;
    }

.font-8 {
    font-size: 8px !important;
}

/********************************
    Helper Box UI Start
********************************/
.helper-box {
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 8px;
    color: #1E2432;
    font-size: 10px;
}

    .helper-box span {
        float: right;
        font-weight: 700;
    }

/********************************
    Helper Box UI End
********************************/

/********************************
    Listing UI Start
********************************/
.lessons-lists li {
    /*display: flex;*/
    align-items: center;
    gap: 10px;
    padding: 6px 0;
}

    .lessons-lists li img {
        transition: 0.5s;
    }

    .lessons-lists li + li {
        border-top: 1px solid #E2E8F0;
    }

    .lessons-lists li:first-child {
        padding-top: 0;
    }

    .lessons-lists li:last-child {
        padding-bottom: 0;
    }

.listing-lh {
    line-height: 1.8;
}
/********************************
    Listing UI End
********************************/


/********************************
    Notification Popup UI start
********************************/
.unread_notifications {
    background: #CDEDFC33;
    padding: 0.8rem !important;
}
/********************************
    Notification Popup UI End
********************************/



/********************************
    Event Cards UI Start
********************************/
.card_birthday {
    background-image: url('../images/HR/Birthday_BG.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #1570EF;
    color: #fff;
    border-radius: 12px;
    margin-bottom: 0.5rem;
}

    .card_birthday i {
        background-color: #3B80F2;
        border-radius: 50%;
        padding: 13px;
        text-align: center;
        color: #fff;
        font-size: 12px;
        float: left;
        margin-right: 20px;
        width: 40px;
        height: 40px;
    }

.card_anniversary {
    background-image: url('../images/HR/Birthday_BG.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #039855;
    color: #fff;
    border-radius: 12px;
    margin-bottom: 0.5rem;
}

    .card_anniversary i {
        background-color: #FFFFFF33;
        border-radius: 50%;
        padding: 13px;
        text-align: center;
        color: #fff;
        font-size: 12px;
        float: left;
        margin-right: 20px;
        width: 40px;
        height: 40px;
    }


/********************************
    Event Cards UI End
********************************/


.circle_icon {
    border-radius: 50%;
    border: 1px solid #E2E8F0;
    padding: 11px 5px;
    width: 42px;
    height: 42px;
    text-align: center;
}

    .circle_icon i {
        font-size: 16px;
        color: #6B7C94;
    }

.header_anchor {
    color: #1E2432;
    text-decoration: underline;
    font-size: 12px;
    padding-left: 1rem;
    cursor: pointer;
}

th.border-right span.float-end i {
    color: var(--theme-default);
    border: 1px solid #A4ACB93D;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    padding: 5px;
    background-color: #fff;
    font-size: 12px;
    cursor: pointer;
    text-align: center;
}

.nav-item i.fa-arrow-up-right {
    cursor: pointer;
}

.paragraph {
    color: #6B7C94;
    font-size: 12px;
}

.time_block {
    float: right;
    color: #6B7C94;
    font-size: 12px;
}

/**************************************
    Grouped Toggle button UI Start
**************************************/
.btn_toggle_grouped {
    margin-bottom: 1rem;
}

.toggle_btn {
    display: inline-block;
    padding: 10px;
    position: relative;
    text-align: center;
    transition: background 600ms ease, color 600ms ease;
}

input[type=radio].grouped_toggle {
    display: none;
}

    input[type=radio].grouped_toggle + label {
        cursor: pointer;
        min-width: 50%;
        color: #6B7C94;
    }

        input[type=radio].grouped_toggle + label:hover {
            background: none;
            color: #1a1a1a;
        }


    input[type=radio].grouped_toggle.grouped-toggle-left + label {
        border-right: 0;
        border-radius: 8px 0px 0px 8px;
        border: 1px solid #E2E8F0;
    }


    input[type=radio].grouped_toggle.grouped-toggle-right + label {
        margin-left: -5px;
        border-radius: 0px 8px 8px 0px;
        border: 1px solid #E2E8F0;
    }


    input[type=radio].grouped_toggle:checked + label {
        cursor: default;
        color: #05A6F0;
        background: #CDEDFC33;
        transition: color 200ms;
        border: 1px solid #05A6F0;
        z-index: 1;
    }


/**************************************
    Grouped Toggle button UI End
**************************************/


.user_preview {
    background: var(--theme-default);
    font-size: 12px;
    color: #fff;
    padding: 8px;
    border-radius: 8px;
    width: 100%;
}

.dropdown-item i {
    color: #6B7C94;
}

.normal-content {
    color: #6B7C94;
    font-size: 12px;
    font-weight: 500;
    display: block;
    white-space: nowrap;
}

.normal_content {
    color: #6B7C94;
}

ul.list {
    padding-left: 30px;
    list-style-type: disc;
    margin-bottom: 15px;
}

/**************************************
    Breadcrumb UI Start
**************************************/
.breadcrumb-colored {
    padding: 12px 16px;
    border-radius: 4px;
}

    .breadcrumb-colored li a {
        color: #fff;
    }

    .breadcrumb-colored li.active {
        color: #fff;
        opacity: 0.7;
    }

.breadcrumb-item {
    color: #6B7C94;
    font-size: 12px;
}

    .breadcrumb-item.active {
        color: #1E2432;
    }

.breadcrumb-colored .breadcrumb-item:before {
    color: #fff;
}

.breadcrumb-colored .breadcrumb-item.txt-dark:before {
    color: #000;
}

.breadcrumb-icon {
    --bs-breadcrumb-divider: ">";
    color: #6B7C94;
}

    .breadcrumb-icon li {
        display: inline-block;
    }

.breadcrumb-no-divider {
    --bs-breadcrumb-divider: "";
}

.breadcrumb-item.active {
    text-transform: capitalize;
}

.breadcrumb-space .breadcrumb-item::before {
    padding-right: 0;
}

.breadcrumb-item + .breadcrumb-item::before {
    float: left;
    padding-right: 1rem;
    color: #6c757d;
    content: "\f054";
    font-family: 'Font Awesome 6 Pro';
}

.breadcrumb-item + .breadcrumb-item {
    padding-left: 1rem;
}

/**************************************
    Breadcrumb UI End
**************************************/

.flag-icon-squared {
    background-size: contain;
    background-position: 50%;
    background-repeat: no-repeat;
}

/**************************************
    Country List UI Start
**************************************/

.international-num input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d7dbe3;
    border-radius: 6px;
    font-size: 12px;
    background-color: white;
    padding: 9px 9px 9px 40px;
    box-shadow: 0px 1px 2px 0px #12376914;
    /*background-image: url(../images/HR/search-lg.svg);*/
    background-position: 7px 7px;
    background-repeat: no-repeat;
    margin-bottom: 1rem;
}

.iti--allow-dropdown .iti__flag-container, .iti--separate-dial-code .iti__flag-container {
    width: 100%;
}

.iti {
    width: 100%;
}

.iti--separate-dial-code .iti__selected-flag {
    background-color: #F7F9FB !important;
}

.iti--allow-dropdown input, .iti--allow-dropdown input[type=tel], .iti--allow-dropdown input[type=text], .iti--separate-dial-code input, .iti--separate-dial-code input[type=tel], .iti--separate-dial-code input[type=text] {
    padding-left: 40px !important;
    outline: none;
}

.flag_input {
    border-radius: 5px 0px 0px 5px !important;
    border-right: 0 !important;
}

.int_numbers {
    border-left: 0 !important;
    border-radius: 0px 5px 5px 0px !important;
    padding-left: 10px !important;
}

.international-num input:focus {
    outline-color: #cccccc;
}

.international-num input::placeholder {
    color: #cccccc;
}

.international-num .results ul {
    border: 1px solid #cccccc;
    margin-top: 12px;
    padding: 8px;
    line-height: 1.9;
}

.iti--allow-dropdown .iti__flag {
    background-image: url("../images/HR/flags.png");
}

.international-num input[disabled=disabled] {
    background-color: #F7F9FB;
    cursor: not-allowed;
    /*border: 0;*/
    /*pointer-events: none;*/
    color: var(--text-gray);
}

.iti__flag {
    min-width: 20px;
}

.iti__selected-flag {
    cursor: default !important;
}
/**************************************
    Country List UI Start
**************************************/
.min-w-300 {
    min-width: 230px;
}

.min-width-300 {
    min-width: 300px;
}

.info-color {
    color: #818898;
}

.content-grey {
    display: block;
    color: #A4ACB9;
    font-size: 12px;
    font-weight: 400;
}

.no-record {
    background-color: #eeeeee;
    padding: 9px;
    border-radius: 6px;
    color: #6B7C94;
    width: 100%;
    text-align: center;
}

.bottom-text {
    color: #475569;
    font-weight: 400;
}

.file_size_text {
    font-size: 10px;
    font-weight: 400;
    color: #6B7C94;
    float: right;
    margin-top: 2px;
}

.employee_card_view {
    font-size: 12px;
}

    .employee_card_view i {
        color: #94A3B8;
    }


.basic_details {
    margin-top: -13px;
}

.bottom_container {
    background: #fff;
    padding: 20px;
    /*position: relative;
    bottom: 0rem;
    width: 100%;
    z-index: 6;*/
}

.m-x-200 {
    max-width: 230px;
}

/******************************************************
    Week and datepicker calendar CSS Start
******************************************************/
.datepicker table tr td span.active {
    background: #04c !important;
    border-color: #04c !important;
}

.datepicker .datepicker-days tr td.active {
    background: #05A6F0 !important;
}

#week-picker-wrapper .datepicker .datepicker-days tr td.active ~ td, #week-picker-wrapper .datepicker .datepicker-days tr td.active {
    color: #fff;
    background-color: #0888c3;
    border-radius: 0;
}

#week-picker-wrapper .datepicker .datepicker-days tr:hover td, #week-picker-wrapper .datepicker table tr td.day:hover, #week-picker-wrapper .datepicker table tr td.focused {
    color: #1E2432 !important;
    background: #F9FAFB !important;
    border-radius: 0 !important;
}

    #week-picker-wrapper .datepicker .datepicker-days tr:hover td:nth-child(2),
    #week-picker-wrapper .datepicker .datepicker-days tr:hover td:last-child {
        color: #fff !important;
        background: #05A6F0 !important;
        border-radius: 50% !important;
        width: 30px;
        display: inline-block;
        text-align: center;
        padding: 5px;
    }

#week-picker-wrapper table tr th:last-child, #week-picker-wrapper table tr td:last-child {
    /*padding: 0;*/
}

#week-filter-picker-wrapper .datepicker .datepicker-days tr td.active ~ td, #week-filter-picker-wrapperr .datepicker .datepicker-days tr td.active {
    color: #fff;
    background-color: #0888c3;
    border-radius: 0;
}

#week-filter-picker-wrapper .datepicker .datepicker-days tr:hover td, #week-filter-picker-wrapper .datepicker table tr td.day:hover, #week-filter-picker-wrapper .datepicker table tr td.focused {
    color: #fff !important;
    background: #0888c3 !important;
    border-radius: 0 !important;
}
/* EOS CALENDAR WEEK CSS*/
/* EOS TEMPLATE-->COPY WEEK CSS*/

#week-picker-copy-wrapper .datepicker .datepicker-days tr td.active ~ td, #week-picker-copy-wrapper .datepicker .datepicker-days tr td.active {
    color: #fff;
    background-color: #04c;
    border-radius: 0;
}

#week-picker-copy-wrapper .datepicker .datepicker-days tr:hover td, #week-picker-copy-wrapper .datepicker table tr td.day:hover, #week-picker-copy-wrapper .datepicker table tr td.focused {
    color: #000 !important;
    background: #e5e2e3 !important;
    border-radius: 0 !important;
}

.week-prev {
    border-radius: 5px 0px 0px 5px;
    border: 0 !important;
}

.week-next {
    border-radius: 0px 5px 5px 0px;
    border: 0 !important;
}

.datepicker-days table.table-condensed tr th, .daterangepicker table.table-condensed tr th {
    background: #fff;
    border: none;
}

    .datepicker-days table.table-condensed tr th:last-child {
        padding-right: 6px;
    }

.datepicker-days table.table-condensed thead tr th, .datepicker-days table.table-condensed tr td {
    border-right: none !important;
    border-bottom: none !important;
}
/******************************************************
    Week and datepicker calendar CSS End
******************************************************/
/***************************************
    Scrollbar CSS Start
***************************************/
::-webkit-scrollbar {
    width: 8px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
    scrollbar-width: thin;
}

::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 16px;
}

.scrollbar-wrapper {
    max-height: 300px;
    overflow: auto;
}

    .scrollbar-wrapper::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    .scrollbar-wrapper::-webkit-scrollbar-track {
        background: #fff;
    }

    .scrollbar-wrapper::-webkit-scrollbar-thumb {
        background: #CBD5E1;
        border-radius: 16px;
        cursor: default;
    }

    .scrollbar-wrapper:hover::-webkit-scrollbar-thumb {
        /*background: #CBD5E1;*/
    }

/*RESPONSIVE SCROLLBAR STARTS*/

@media screen and (max-width: 768px) {
    ::-webkit-scrollbar-thumb {
        background: #CBD5E1 !important;
        border-radius: 16px !important;
    }
}
/*RESPONSIVE SCROLLBAR ENDS*/
/***************************************
    Scrollbar CSS End
***************************************/
.w-180 {
    width: 180px;
}

.ipad_filter_3 {
    width: 125px;
}

.employee_card {
    max-height: 280px;
}

.employee_card_others {
    max-height: 370px;
}

.dashboard_tabs_card {
    max-height: 251px;
}

.non_employee_card {
    max-height: 238px;
}

.mx-height-leave {
    max-height: 65vh;
}

.mx-height-100 {
    max-height: 100%;
}

.mx-height-400 {
    max-height: 400px;
}

.mx-height-long {
    max-height: 80vh;
}

.mx-height-short {
    max-height: 73vh;
}

.mx-height-card-long {
    max-height: 76vh;
}

.mx-height-card-short {
    max-height: 70vh;
}

.min-height-200 {
    min-height: 250px;
}

.min-height-315 {
    min-height: 315px;
}

.mx-height-reports {
    max-height: 68vh;
}

.mx-height-alert {
    max-height: 63vh !important;
}

.mx-height-audit {
    max-height: 73vh !important;
}

.mx-height-bulk {
    max-height: 54vh;
}

.mx-height-entity {
    max-height: 82vh;
}

.mx-height-leaves-accordion {
    max-height: 50vh;
}

.mx-height-payroll {
    max-height: 55vh;
}

.custom_dashboard_reports_height {
    max-height: 64vh;
}
/***************************
    Musa CSS Start
***************************/
.row h3 {
    color: #1E2432;
    font-weight: 600;
    font-size: 24px;
}


.myContainer {
    background-color: #F7F9FB;
    padding: 12px;
    border-radius: 16px;
    width: 100%;
    margin: 10px 0px;
}

    .myContainer .accordion-item {
        background-color: #FFFFFF !important;
    }

.accordion-body select1 {
    border-radius: 6px;
    border: 2px solid #E2E8F0;
    outline: none;
    padding: 6px 10px;
    width: 100%;
}


.bgInput input {
    background: #F7F9FB;
    border: none;
}


.siteLabel label {
    color: #1E2432 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

.saveBtn {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.anchorTag {
    position: relative;
    font-size: 12px;
    right: 11.5rem;
    top: 0px;
    margin: 0 6px;
    color: #6B7C94;
    z-index: 7;
    cursor: pointer;
    color: #05A6F0 !important;
    width: auto !important;
}

.penIcon {
    position: relative !important;
    font-size: 12px !important;
    right: 12.5rem !important;
    top: -4px !important;
    margin: 0 6px !important;
    color: #6B7C94 !important;
    z-index: 9 !important;
    cursor: pointer !important;
}

.mLeft {
    margin-left: 10px;
    margin-right: 5px;
}

.mRight {
    margin-right: 10px;
}

.alert-sm {
    padding: 8px 15px !important;
    border-radius: 6px;
}

.imgContainer {
    border: 1px solid #dee2e6;
    border-radius: 5px;
    height: 158px;
    width: 100%;
    background-color: #F7F9FB;
}

.cross {
    color: #6B7C94;
}


/****************Modal******************/

.modal-title-exception {
    font-size: 18px;
    font-weight: 500;
    color: #1E2432;
    margin-top: 10px;
}

.modal-icon-container {
    background-color: #FFF7DE;
    border-radius: 50%;
    padding: 12px;
    display: inline;
}

.modal-text {
    font-size: 12px;
    font-weight: 400;
    color: #667085;
    padding-right: 1rem;
    padding-left: 1rem;
}


.fa-triangle-exclamation.modal-icon {
    color: #F3A515;
    font-size: 24px;
}

.btn-close.modal-close {
    color: #667085 !important;
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 15px;
    margin-right: 22px;
}

.exception-footer {
    padding-top: 1rem;
    padding-bottom: 1rem;
    justify-content: center;
}


/****************Modal******************/

/********************************
    input group CSS Start
********************************/
.input-group .form-control {
    margin-bottom: 0px;
}

.input-group-wrapper .input-group:last-child {
    margin-bottom: 0;
}

.input-group-wrapper .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    /*border-top-left-radius: 0;
    border-bottom-left-radius: 0;*/
}

.input-group .btn-transparent {
    position: relative;
    border: 1px solid #d7dbe3 !important;
    width: 40px;
    border-left: 0 !important;
    box-shadow: 0px 1px 2px 0px #12376914;
}

.input-group button i {
    /*color: #54BA4A;*/
}
/********************************
    input group CSS End
********************************/
/************* QR Scan Styling *******************/
.timing-child-container {
    border-radius: 4px;
    padding: 15px 15px !important;
    color: #1E2432;
}

    .timing-child-container.green {
        border-left: 3px solid #1dca5d;
        background: #eefff4;
    }

    .timing-child-container.grey {
        border-left: 3px solid #94a3b8;
        background: #f3f6f8;
    }

.date-container {
    border-radius: 8px;
    padding: 14px 5px;
    background: #eefff4;
    text-align: center;
}

.qr-shift {
    font-size: 18px;
    font-weight: 700;
    color: #1E2432;
    display: block
}

.btn-timer {
    color: #dc3545;
    border-color: #dc3545;
    background-color: white;
}

    .btn-timer:hover {
        color: #fff;
        background-color: red;
        border-color: #dc3545;
    }

.modal-content-clock {
    margin-top: 5px;
    text-align: center;
    padding: 10px;
}

    .modal-content-clock .modal-body h5 {
        margin-top: 10px;
        margin-bottom: 10px;
        font-size: 1.25rem;
    }

    .modal-content-clock .modal-body p {
        color: #6c757d;
    }

.bloc-time {
    border-top: 1px solid #d7dbe3;
    border-bottom: 1px solid #d7dbe3;
    padding: 5px 10px;
}
/********** Badge ****************/
.badge-check {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.badge-icon {
    border: 14px solid #e4fcec;
    background-color: #33cf6d;
    color: #f3fcf6;
    border-radius: 50%;
    padding: 10px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
}

.modal-footer .okay {
    width: 100%;
}

.resp_label {
    display: none;
}

/********** QR Scan Styling**************/



/***************************
    Musa CSS End
***************************/
/***************************
    Arsalan CSS Start
***************************/
.container-sm {
    max-width: 60%;
    margin: 0 auto;
    padding: 20px 0px;
    height: 95%;
    /*height: calc(100vh - 240px);*/
    display: flex;
    flex-direction: column;
}

.container form p {
    color: #475569;
    font-family: 'Montserrat';
    font-weight: 400;
}

.badgeContainer {
    background-color: #F7F9FB;
    margin: 8px 0px;
    border-radius: 6px;
    padding: 6px 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .badgeContainer span {
        color: #1E2432;
        font-size: 12px;
        font-weight: 400;
    }

    .badgeContainer i {
        color: #6B7C94;
        text-align: right;
        cursor: pointer;
    }

.badgeContainerSuggestion {
    background-color: #F7F9FB;
    margin: 8px 0px;
    border-radius: 6px;
    padding: 6px 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

    .badgeContainerSuggestion span {
        color: #1E2432;
        font-size: 12px;
        font-weight: 400;
    }

.btn-tabs {
    color: #6B7C94;
    font-weight: 500;
    font-size: 12px;
    padding: 0.5rem 1rem;
    cursor: pointer;
    margin: 0 3px;
    white-space: nowrap;
    text-align: center;
}

    .btn-tabs.active, .btn-tabs:hover {
        background: #CDEDFC33;
        border: 1px solid #05A6F0;
        color: #05A6F0;
        font-weight: 500;
        font-size: 12px;
        border-radius: 8px;
        padding: 0.5rem 1rem;
        cursor: pointer;
        transition: 0s all;
    }


.max-w-140px {
    min-width: 140px;
}

.min-w-200px {
    min-width: 140px;
}

.min-w-220 {
    min-width: 220px;
}

.min-w-160 {
    min-width: 160px;
}

.min-w-140 {
    min-width: 140px;
}

.min-w-120 {
    min-width: 120px;
}

.min-w-130 {
    min-width: 130px;
}

.min-w-210 {
    width: 210px;
}

.min-w-100 {
    min-width: 100px;
}

.min-w-80 {
    min-width: 80px;
}

/*.width_first {
    min-width: 135px;
}

.site_width {
    min-width: 110px;
}

.pay_type {
    min-width: 110px;
}

.date_filter {
    min-width: 95px;
}

.date_ranger_filter {
    width: 210px;
}

.department_filter {
    min-width: 125px;
}

.section_type {
    min-width: 125px;
}

.single_date_filter {
    width: 120px;
}

.order_by {
    width: 212px;
}

.position_filter {
    min-width: 120px;
}

.pay_schedule {
    min-width: 125px;
}

.absence_type {
    min-width: 138px;
}

.termination_filter {
    min-width: 180px !important;
}

.standard_role {
    min-width: 130px !important;
}*/

.saveChanges {
    display: flex;
    justify-content: space-between;
    margin: 20px 0px;
    align-items: center;
    width: 100% !important;
}

.avatarContainer {
    display: flex;
    align-items: center;
    justify-content: center
}

    .avatarContainer img, .avatarContainer span.text_avatar {
        border-radius: 50%;
        height: 24px;
        width: 24px;
        margin-left: -10px;
        border: 2px solid white;
    }

    .avatarContainer span {
        border-radius: 50%;
        height: 30px;
        width: 30px;
        text-align: center;
        background-color: #3B80F2;
        color: #ffffff;
        font-size: 10px;
        border: 2px solid white;
        margin-left: -15px;
        padding: 5px 3px;
        font-weight: 500;
    }

.bulkUpdateSpan {
    color: #666D80;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
}

.tickIcon {
    height: 64px;
    width: 64px;
    background-color: #EEFFF4;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0px;
    padding: 10px 0px;
}

.text-bg-success-modal {
    background-color: #1DCA5D !important;
    height: 36.67px;
    width: 36.67px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white !important;
}

.tickIcon_danger {
    height: 64px;
    width: 64px;
    background-color: #FFF5F4;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0px;
    padding: 10px 0px;
}

.tickIcon_warning {
    height: 64px;
    width: 64px;
    background-color: #FFF7DE;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0px;
    padding: 10px 0px;
}

.tickIcon_primary {
    height: 64px;
    width: 64px;
    background-color: #e5f7ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0px;
    padding: 10px 0px;
}

.text-bg-primary-modal {
    background-color: var(--theme-default) !important;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white !important;
}

.text-bg-warning-modal {
    background-color: #DC6803 !important;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white !important;
}

.text-bg-danger-modal {
    background-color: #F34040 !important;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white !important;
}

.modal_heading {
    color: #1E2432;
    font-size: 16px;
    font-weight: 600;
    margin: 8px 0px;
    line-height: 24px;
    text-align: center;
}

.modal_content {
    color: #475569;
    font-size: 12px;
    font-weight: 400;
    line-height: 21px;
    text-align: center;
}
/***************************
    Arsalan CSS End
***************************/

.popout {
    width: 100%;
    height: 100vh;
    position: absolute;
    background: #0000007a;
    z-index: 99;
}

    .popout span {
        background-image: url('../images/arrow.png');
        z-index: 999999;
        display: block;
        position: relative;
        left: 33rem;
        top: 20px;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
    }

.input_12 {
    font-size: 12px !important;
}

    .input_12::placeholder {
        font-size: 12px !important;
    }


/***********************************
    Admin left panel Start
***********************************/
/*.column_auto {
    width:auto !important;
}*/
.filter-panel {
    height: 100%;
    width: 0%;
    position: fixed;
    top: 0;
    right: 0;
    z-index: -1;
    border-left: 1px solid #dee2e6;
    box-shadow: 0px 0px 100px rgba(0,0,0,.6);
    background: #fff;
    transition: 0.5s;
}

.left-panel {
    left:0;
    right:auto;
}

.filter-panel-bottom {
    height: 50%;
    width: 0;
    position: fixed;
    bottom: 0px;
    left: 0;
    z-index: -1;
    border-top: 1px solid #dee2e6;
    box-shadow: 0px -350px 500px rgb(157 157 157 / 50%);
    background: #fff;
    transition: 0.5s;
}

/* Example for the side panel */

#schdular_div_id {
    position: fixed;
    right: 0;
    top: 0;
    height: 100%;
    width: 20%;
    background: #fff;
    transform: translateX(-100%);
    transition: transform 0.35s ease-in-out;
    z-index: -1;
    overflow-y: auto;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

    /* When panel is open */

    #schdular_div_id.open {
        transform: translateX(0);
        z-index: 1500;
    }
 

#sidenav {
    position: fixed;
    width: 16.66666667%;
    height: auto;
    top: 3.8rem;
    bottom: 0;
    left: 0;
    z-index: 10;
    background: #fff;
    border-right: 1px solid #d7dbe3;
}

    #sidenav.open {
        left: -300px;
    }

    #sidenav .logo {
        width: 100%;
        padding: 20px 50px;
        background: #fff;
        display: none;
    }

    /*#sidenav .logo a.nav-icon {
                display: none;
            }*/

    #sidenav .menu {
        position: static;
    }

        #sidenav .menu ul {
            list-style: none;
            background: #fff;
            padding: 20px;
            margin: 0;
            line-height: 30px;
        }

            #sidenav .menu ul li {
                padding: 6px;
                font-weight: 500;
                color: #6B7C94;
                white-space: nowrap;
            }

                #sidenav .menu ul li.active {
                    background-color: #CDEDFC33;
                    border-radius: 8px;
                    color: #05A6F0;
                }

                    #sidenav .menu ul li.active i {
                        font-weight: 900;
                    }

                #sidenav .menu ul li:hover {
                    background-color: #CDEDFC33;
                    border-radius: 8px;
                    color: #05A6F0;
                    cursor: pointer;
                }

                #sidenav .menu ul li a.logout:hover {
                    color: red;
                }

                #sidenav .menu ul li ul {
                    list-style: none;
                    margin: 10px auto 0;
                    padding: 10px 15px;
                    border-top: solid 1px rgba(255, 255, 255, 0.08);
                    border-bottom: solid 1px rgba(255, 255, 255, 0.08);
                }


    #sidenav .wrapper .menu ul li a {
        color: #6B7C94;
        font-size: 14px;
        font-weight: 500;
        line-height: 2.5;
    }

    #sidenav .menu ul li.active a {
        color: #05A6F0;
    }

    #sidenav .wrapper .menu ul li a i {
        font-size: 20px;
        width: 30px;
    }

    #sidenav .wrapper .menu ul li a .badge i {
        font-size: 12px;
        width: auto;
    }

.location {
    color: #666D80;
    display: block;
    font-size: 12px;
    font-weight: 400;
}

@media (max-width: 575px) {
    #sidenav {
        top: 60px !important;
    }
}


@media (max-width: 767px) {
    #sidenav {
        top: 0px;
    }

    #launcher-frame {
        right: 5.6rem !important;
    }
}

@media (max-width: 1024px) {
    #sidenav {
        width: 100%;
        height: 60px;
        background: none;
        position: relative;
        top: 0px;
        height: auto;
        border-right: none;
        /*margin-top: 15px;*/
    }



    .heading-text {
        margin-top: 3.5rem !important;
    }

    #sidenav .wrapper .menu ul li a {
        font-size: 12px;
    }

    h2.accordion-header .fa-pen {
        right: 4.5rem;
    }

    #sidenav .logo {
        padding: 10px 20px;
        display: none;
    }

        #sidenav .logo a {
            font-size: 20px;
        }

    #sidenav .menu {
        /*display: none;*/
    }

        #sidenav .menu.open {
            position: fixed;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            z-index: -1;
            display: block !important;
        }

        #sidenav .menu ul {
            /*border-top: solid 1px #333;*/
        }

            #sidenav .menu ul li {
                padding: 6px 5%;
            }

    h2.accordion-header .fa-pen {
        position: relative;
        font-size: 14px;
        right: 4.5rem;
        top: 0px;
        margin: 0 6px;
        color: #6B7C94;
        cursor: pointer;
    }

    h2.accordion-header .fa-trash-can {
        top: 0px;
    }

    .resp_label {
        display: block;
    }

    .desktop_label {
        display: none;
    }

    .resp_margin input {
        margin: 0.5rem 0;
    }
}

/***********************************
    Angucomplete CSS Start
***********************************/
angucomplete {
    width: 100%;
}

angucompletehrm .angucomplete-holder input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d7dbe3;
    border-radius: 6px;
    font-size: 12px;
    background-color: white;
    box-shadow: 0px 1px 2px 0px #12376914;
    padding: 8px 9px 8px 32px;
    background-image: url(../images/HR/search-lg.svg);
    background-position: 7px 7px;
    background-size: 18px;
    background-repeat: no-repeat;
    margin-bottom: 0rem;
}


.angucomplete-holder {
    position: relative;
}

.angucomplete-dropdown {
    border-color: #ececec;
    border-width: 1px;
    border-style: solid;
    border-radius: 2px;
    min-width: 250px;
    width: 100%;
    padding: 6px;
    cursor: pointer;
    z-index: 9999;
    position: absolute;
    top: 42px;
    margin-top: 0px;
    background-color: #ffffff;
    box-shadow: 0 0 1px rgb(0 0 0 / 13%), 4px 4px 12px rgb(0 0 0 / 30%);
}

    .angucomplete-dropdown img {
        width: 24px;
        height: 24px;
        border-radius: 50%;
    }

.angucomplete-searching {
    color: #acacac;
    font-size: 12px;
}

.angucomplete-description {
    font-size: 12px;
}

.angucomplete-row {
    padding: 5px;
    color: #000000;
    margin-bottom: 4px;
    display: flex;
    flex-wrap: wrap;
}

    .angucomplete-selected-row, .angucomplete-row:hover {
        background-color: #05a6f024;
        color: #000 !important;
    }

.angucomplete-image-holder {
    padding-top: 2px;
    float: left;
    margin-right: 10px;
    margin-left: 5px;
}

.angucomplete-image {
    height: 34px;
    width: 34px;
    border-radius: 5px;
    border: none;
    outline: none;
}

.angucomplete-image-default {
    background-image: url('../images/user2-160x160.jpg') !important;
    background-position: center;
    background-size: contain;
    height: 36px;
    width: 36px;
    outline: none;
    border-radius: 50%;
}

/*.autocomplete-height {
    height: calc(2.2rem + 2px);
}*/

.autocomplete-height button {
    padding: 2px 12px;
}

.employee-search-border {
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}


/***********************************
    Angucomplete CSS End
***********************************/

/***********************************
    Admin left panel End
***********************************/
.dropdown_custom {
    width: 100%;
    font-family: "Helvetica", sans-serif;
    font-weight: 300;
}

@media (min-width: 768px) {
    .dropdown_custom {
        width: 500px;
    }
}

.dropdown__switch:checked + .dropdown__options-filter .dropdown__select {
    transform: scaleY(1);
    opacity: 1;
}

.dropdown__switch:checked + .dropdown__options-filter .dropdown__filter:after {
    transform: rotate(-135deg);
}

.dropdown__options-filter {
    width: 100%;
    cursor: pointer;
}

.dropdown__filter {
    position: relative;
    display: flex;
    padding: 20px;
    color: #595959;
    background-color: #fff;
    border-color: #ccc;
    border-radius: 18px;
    font-size: 14px;
    transition: 0.3s;
}

    .dropdown__filter:focus {
        outline: none;
    }

    .dropdown__filter::after {
        position: absolute;
        top: 45%;
        right: 20px;
        content: "";
        width: 10px;
        height: 10px;
        border-right: 1px solid #595959;
        border-bottom: 1px solid #595959;
        transform: rotate(45deg) translateX(-45%);
        transition: 0.3s ease-in-out;
    }

.dropdown__select {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    margin-top: 5px;
    overflow: hidden;
    transform: scaleY(0);
    transform-origin: top;
    border-radius: 18px;
    opacity: 0;
    transition: 0.2s ease-in-out;
}

.dropdown__select-option {
    padding: 20px;
    background-color: #fff;
    border-bottom: 1px solid #e9ecef;
    transition: 0.3s;
}

    .dropdown__select-option:last-of-type {
        border-bottom: 0;
    }

    .dropdown__select-option:hover {
        background-color: #e9ecef;
    }

.select2-container {
    margin-bottom: 1rem;
}

table tr td .select2-container {
    margin-bottom: 0;
}

.select2-container .select2-choice {
    width: 100%;
    height: 40px;
    line-height: 38px !important;
    color: var(--chart-text-color);
    text-indent: 6px;
    background: #ffffff;
    z-index: 6;
    cursor: pointer;
    transform-style: preserve-3d;
    transform-origin: 50% 0%;
    transition: transform 300ms;
    font-size: 12px;
    border: 1px solid #d7dbe3;
    border-radius: 6px;
    overflow: hidden !important;
    padding-left: 3px;
    box-shadow: 0px 1px 2px 0px #12376914;
    background-image: none;
    /*margin-bottom: 1rem;*/
}

.select2-drop {
    width: 100%;
    margin-top: 0px;
    position: absolute;
    z-index: 9999;
    top: 100%;
    background: #fff;
    color: #000;
    border: none !important;
    border-top: 0;
    border-radius: 0 0 4px 4px;
    -webkit-box-shadow: 0px 16px 32px 12px #12376914;
    box-shadow: 0px 16px 32px 12px #12376914;
}

.select2-container .select2-choice .select2-arrow {
    width: 35px;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBTdmcgVmVjdG9yIEljb25zIDogaHR0cDovL3d3dy5vbmxpbmV3ZWJmb250cy5jb20vaWNvbiAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KCiA8Zz4KICA8dGl0bGU+YmFja2dyb3VuZDwvdGl0bGU+CiAgPHJlY3QgZmlsbD0ibm9uZSIgaWQ9ImNhbnZhc19iYWNrZ3JvdW5kIiBoZWlnaHQ9IjQwMiIgd2lkdGg9IjU4MiIgeT0iLTEiIHg9Ii0xIi8+CiA8L2c+CiA8Zz4KICA8dGl0bGU+TGF5ZXIgMTwvdGl0bGU+CiAgPHBvbHlnb24gdHJhbnNmb3JtPSJyb3RhdGUoMC40NDY4MzM2OTk5NDE2MzUxMyAxMjcuOTk5NDk2NDU5OTU1NDUsMTMwLjE4MTUwMzI5NTg5ODkpICIgaWQ9InN2Z18xIiBmaWxsPSIjMDQxRTQyIiBwb2ludHM9IjE3Ny4wMTMsOTguNjA0IDEyOCwxNDcuNjE2IDc4Ljk4Nyw5OC42MDQgNzEuOTE2LDEwNS42NzUgMTI4LDE2MS43NTkgMTg0LjA4MywxMDUuNjc1ICIvPgogPC9nPgo8L3N2Zz4=);
    background-position: center center;
    background-size: 20px;
    background-repeat: no-repeat;
    outline: none;
    padding: 0;
    border-color: #ccc;
    border-radius: 0px;
    font-family: "Scania Sans Condensed", Helvetica, Arial, sans-serif;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-left: none;
}

.select2-results .select2-highlighted {
    background: #05A6F00A;
    color: #666D80;
}

.select2-results li {
    list-style: none;
    display: list-item;
    background-image: none;
    font-size: 12px;
    font-weight: 400;
    color: #666D80;
    padding: 5px;
}

.logo-wrap {
    max-width: 150px;
}

.tooltiptextx {
    width: 450px;
}

.tooltipx {
    position: relative;
    display: inline-block;
}
    /* Tooltip text */
    .tooltipx .tooltiptextx {
        visibility: hidden;
        display: none;
        _width: 150px !important;
        position: absolute;
        _background-color: #6a95ab;
        z-index: 100001;
        _border: 2px solid #6a95ab;
        _border-radius: 5px !important;
        background-color: #fff;
        box-shadow: 0 .150rem .50rem rgba(0,0,0,.08) !important;
        top: auto;
        left: 0;
        padding: 15px;
    }
    /* Show the tooltip text when you mouse over the tooltip container */
    .tooltipx:hover .tooltiptextx {
        visibility: visible;
        display: block;
    }

.tooltiptextx ul {
    font-size: 12px;
    margin: 0;
    padding: 0;
}

.tooltiptextx li {
    padding: 5px 10px;
    border-bottom: 1px solid #d7dbe3;
    list-style: none;
    text-align: left;
}

    .tooltiptextx li:last-child {
        border-bottom: none;
    }


.txt-normal {
    font-weight: 500;
}


/****************************
    Uplaod button UI Start
****************************/
.upload-btn-wrapper {
    position: relative;
    overflow: hidden;
    display: inline-block;
}


    .upload-btn-wrapper input[type=file] {
        font-size: 100px;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
    }
/****************************
    Uplaod button UI End
****************************/

/****************************
  Arsalan ROTA CSS STARTS
****************************/
.btn-timer-rota {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #fff;
    -webkit-tap-highlight-color: transparent;
    color: #1E2432;
    font-weight: 500;
    height: 38px;
    width: 38px;
    border: 1px solid #A4ACB93D;
}

.btn-timer-rota-enabled {
    background-color: var(--theme-default) !important;
}

    .btn-timer-rota-enabled i {
        color: #fff !important;
    }

.col-form-label {
    font-size: 12px;
    padding-top: calc(0.3rem + 1px);
    padding-bottom: calc(0.3rem + 1px);
}

.week_range_container {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d7dbe3;
    border-radius: 6px;
    background-color: white;
    box-shadow: 0px 1px 2px 0px #12376914;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

    .week_range_container .datepicker.datepicker-dropdown, .datepicker_margin .datepicker.datepicker-dropdown {
        margin-top: 0px;
    }

.week_range {
    padding: 9px;
    font-size: 12px !important;
    background-color: white !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0px !important;
    font-weight: 500;
}

.btn-timer-rota i {
    color: #6B7C94;
}

.btn_rota_shifts {
    padding: 0.7rem 1rem;
    color: #05A6F0;
    background-color: #fff !important;
    border-color: #eaedf1 !important;
    -webkit-tap-highlight-color: transparent;
    font-weight: 500;
    box-shadow: 0px 1px 2px 0px #1018280D;
}

.btn-vertical-ellipsis {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #fff !important;
    -webkit-tap-highlight-color: transparent;
    color: #1E2432;
    font-weight: 500;
    height: 38px;
    width: 38px;
    border: 1px solid #A4ACB93D;
}

    .btn-vertical-ellipsis i {
        color: #6B7C94;
    }

.schedule_costing {
    display: block;
    font-size: 10px;
}

.resp_text_totals {
    font-size: 10px !important;
}

.badge_text_totals {
    font-size: 10px !important;
    font-weight: 500;
}

.rotate {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}

/***************************************
    template container Start
***************************************/
.template-container {
    cursor: grab;
    border-radius: 8px;
    padding: 4px !important;
    color: #1E2432;
    width: 100%;
    width: 120px;
    /*min-width: 140px;
    max-width: 260px;*/
}

    .template-container:active {
        cursor: grabbing;
    }

    .template-container .fa-thumbtack {
        display: none;
    }


    .template-container:hover .fa-thumbtack {
        display: block;
    }

    .template-container .fa-thumbtack {
        cursor: pointer;
    }


    .template-container i {
        text-align: left;
        font-size: 12px !important;
        font-weight: 400 !important;
    }

    .template-container span {
        text-align: left;
        font-size: 10px;
        font-weight: 400 !important;
        /*width: 100%;*/
    }

    .template-container.unpublished {
        border-left: 3px solid #3b80f2;
        background: repeating-linear-gradient( 50deg, #e9f3fe, #e9f3fe 10px, #f0f8ff 10px, #f0f8ff 20px);
    }

/***************************************
    template container End
***************************************/

.child-container {
    cursor: grab;
    border-radius: 8px;
    padding: 4px !important;
    color: #1E2432;
    width: 100%;
    max-width: 200px;
    /*min-width: 140px;
    max-width: 260px;*/
}

.inner_child_container {
    display: flex;
    align-items: center;
    min-width: 0;
}

.child-container .fa-thumbtack {
    display: none;
}


.child-container:hover .fa-thumbtack {
    display: block;
}

.child-container .fa-thumbtack {
    cursor: pointer;
}

.e_position {
    color: #6B7C94 !important;
    font-size: 10px;
    display: block;
}

.child-container i {
    text-align: left;
    font-size: 12px !important;
    font-weight: 400 !important;
}

.child-container span {
    text-align: left;
    font-size: 10px;
    font-weight: 400 !important;
    /*width: 100%;*/
}

.child-container.unpublished {
    border-left: 3px solid #3b80f2;
    background: repeating-linear-gradient( 50deg, #e9f3fe, #e9f3fe 10px, #f0f8ff 10px, #f0f8ff 20px);
}

.child-container.published {
    border-left: 3px solid #f3a515;
    background: repeating-linear-gradient( 50deg, #fff7de, #fff7de 10px, #fff4d6 10px, #fff4d6 20px);
}

.child-container.holiday {
    border-left: 3px solid #94a3b8;
    background: repeating-linear-gradient( 50deg, #f7f9fb, #f7f9fb 10px, #f3f6f8 10px, #f3f6f8 20px);
}

.child-container.approved {
    border-left: 3px solid #1dca5d;
    background: repeating-linear-gradient( 50deg, #eefff4, #eefff4 10px, #e6fdee 10px, #e6fdee 20px);
}

.child-container.purple {
    border-left: 3px solid #5d5fef;
    background: repeating-linear-gradient( 50deg, #eef2ff, #eef2ff 10px, #e8ecfe 10px, #e8ecfe 20px);
}

.child-container.noshow {
    border-left: 3px solid #F34040;
    background: repeating-linear-gradient( 50deg, #fff1f0, #fff1f0 10px, #fff5f4 10px, #fff5f4 20px);
}

.child-container.shift_table_view {
    position: absolute;
    z-index: 1;
    left: 0px;
    margin-left: 4px;
    display: flex;
    flex-direction: column;
}

    .child-container.shift_table_view.wid_1 {
        min-width: calc((120px * 1) - 5px ) !important;
        max-width: 120px;
        padding: 5px !important;
        margin-left: 0px;
    }

    .child-container.shift_table_view.wid_2 {
        min-width: calc((120px * 2) - 10px) !important;
    }

    .child-container.shift_table_view.wid_3 {
        min-width: calc((120px * 3) - 10px) !important;
    }

    .child-container.shift_table_view.wid_4 {
        min-width: calc((120px * 4) - 10px) !important;
    }

    .child-container.shift_table_view.wid_5 {
        min-width: calc((120px * 5) - 10px) !important;
    }


    .child-container.shift_table_view.wid_6 {
        min-width: calc((120px * 6) - 10px) !important;
    }


    .child-container.shift_table_view.wid_7 {
        min-width: calc((120px * 7) - 10px) !important;
    }


    .child-container.shift_table_view.wid_8 {
        min-width: calc((120px * 8) - 10px) !important;
    }

    .child-container.shift_table_view.wid_9 {
        min-width: calc((120px * 9) - 10px) !important;
    }

    .child-container.shift_table_view.wid_10 {
        min-width: calc((120px * 10) - 10px) !important;
    }

    .child-container.shift_table_view.wid_11 {
        min-width: calc((120px * 11) - 10px) !important;
    }

    .child-container.shift_table_view.wid_12 {
        min-width: calc((120px * 12) - 10px) !important;
    }

    .child-container.shift_table_view.wid_13 {
        min-width: calc((120px * 13) - 10px) !important;
    }

    .child-container.shift_table_view.wid_14 {
        min-width: calc((120px * 14) - 10px) !important;
    }

    .child-container.shift_table_view.wid_15 {
        min-width: calc((120px * 15) - 10px) !important;
    }

    .child-container.shift_table_view.wid_16 {
        min-width: calc((120px * 16) - 10px) !important;
    }

    .child-container.shift_table_view.wid_17 {
        min-width: calc((120px * 17) - 10px) !important;
    }

    .child-container.shift_table_view.wid_18 {
        min-width: calc((120px * 18) - 10px) !important;
    }

    .child-container.shift_table_view.wid_19 {
        min-width: calc((120px * 19) - 10px) !important;
    }

    .child-container.shift_table_view.wid_20 {
        min-width: calc((120px * 20) - 10px) !important;
    }

    .child-container.shift_table_view.wid_21 {
        min-width: calc((120px * 21) - 10px) !important;
    }

    .child-container.shift_table_view.wid_22 {
        min-width: calc((120px * 22) - 10px) !important;
    }

    .child-container.shift_table_view.wid_23 {
        min-width: calc((120px * 23) - 10px) !important;
    }

    .child-container.shift_table_view.wid_24 {
        min-width: calc((120px * 24) - 10px) !important;
    }


.heading-rota-dayView .wid_1 ~ a.three-dots {
    position: absolute;
    z-index: 1 !important;
    left: calc((120px * 1) - 15px) !important;
}

.heading-rota-dayView .wid_2 ~ a.three-dots {
    position: absolute;
    z-index: 1 !important;
    left: calc((120px * 2) - 20px) !important;
}

.heading-rota-dayView .wid_3 ~ a.three-dots {
    position: absolute;
    z-index: 1 !important;
    left: calc((120px * 3) - 20px) !important;
}

.heading-rota-dayView .wid_4 ~ a.three-dots {
    position: absolute;
    z-index: 1 !important;
    left: calc((120px * 4) - 20px) !important;
}

.heading-rota-dayView .wid_5 ~ a.three-dots {
    position: absolute;
    z-index: 1 !important;
    left: calc((120px * 5) - 20px) !important;
}

.heading-rota-dayView .wid_6 ~ a.three-dots {
    position: absolute;
    z-index: 1 !important;
    left: calc((120px * 6) - 20px) !important;
}

.heading-rota-dayView .wid_7 ~ a.three-dots {
    position: absolute;
    z-index: 1 !important;
    left: calc((120px * 7) - 20px) !important;
}

.heading-rota-dayView .wid_8 ~ a.three-dots {
    position: absolute;
    z-index: 1 !important;
    left: calc((120px * 8) - 20px) !important;
}

.heading-rota-dayView .wid_9 ~ a.three-dots {
    position: absolute;
    z-index: 1 !important;
    left: calc((120px * 9) - 20px) !important;
}

.heading-rota-dayView .wid_10 ~ a.three-dots {
    position: absolute;
    z-index: 1 !important;
    left: calc((120px * 10) - 20px) !important;
}

.heading-rota-dayView .wid_11 ~ a.three-dots {
    position: absolute;
    z-index: 1 !important;
    left: calc((120px * 11) - 20px) !important;
}

.heading-rota-dayView .wid_12 ~ a.three-dots {
    position: absolute;
    z-index: 1 !important;
    left: calc((120px * 12) - 20px) !important;
}

.heading-rota-dayView .wid_13 ~ a.three-dots {
    position: absolute;
    z-index: 1 !important;
    left: calc((120px * 13) - 20px) !important;
}

.heading-rota-dayView .wid_14 ~ a.three-dots {
    position: absolute;
    z-index: 1 !important;
    left: calc((120px * 14) - 20px) !important;
}

.heading-rota-dayView .wid_15 ~ a.three-dots {
    position: absolute;
    z-index: 1 !important;
    left: calc((120px * 15) - 20px) !important;
}

.heading-rota-dayView .wid_16 ~ a.three-dots {
    position: absolute;
    z-index: 1 !important;
    left: calc((120px * 16) - 20px) !important;
}

.heading-rota-dayView .wid_17 ~ a.three-dots {
    position: absolute;
    z-index: 1 !important;
    left: calc((120px * 17) - 20px) !important;
}

.heading-rota-dayView .wid_18 ~ a.three-dots {
    position: absolute;
    z-index: 1 !important;
    left: calc((120px * 18) - 20px) !important;
}

.heading-rota-dayView .wid_19 ~ a.three-dots {
    position: absolute;
    z-index: 1 !important;
    left: calc((120px * 19) - 20px) !important;
}

.heading-rota-dayView .wid_20 ~ a.three-dots {
    position: absolute;
    z-index: 1 !important;
    left: calc((120px * 20) - 20px) !important;
}

.heading-rota-dayView .wid_21 ~ a.three-dots {
    position: absolute;
    z-index: 1 !important;
    left: calc((120px * 21) - 20px) !important;
}

.heading-rota-dayView .wid_22 ~ a.three-dots {
    position: absolute;
    z-index: 1 !important;
    left: calc((120px * 22) - 20px) !important;
}

.heading-rota-dayView .wid_23 ~ a.three-dots {
    position: absolute;
    z-index: 1 !important;
    left: calc((120px * 23) - 20px) !important;
}

.heading-rota-dayView .wid_24 ~ a.three-dots {
    position: absolute;
    z-index: 1 !important;
    left: calc((120px * 24) - 20px) !important;
}

.shift_check {
    z-index: 1;
    position: absolute;
    bottom: 10px;
    right: 9px
}

.txt-holiday {
    color: #94A3B8 !important;
}

.truncate_absence {
    max-width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

.text_truncate {
    box-sizing: border-box;
    appearance: none;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.text_truncate_schedule {
    font-size: 11px;
    box-sizing: border-box;
    appearance: none;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}

.truncate {
    max-width: 88%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

.truncate_99 {
    max-width: 99%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

.truncate_employee {
    max-width: 75%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.truncate-group {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60%;
}

.truncate-rota {
    display: inline-block;
    max-width: 90% !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.truncate-site {
    display: inline-block;
    max-width: 75% !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.truncate_names {
    display: inline-block;
    max-width: 90% !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 12px;
}

.truncate_Leavetype {
    display: inline-block;
    max-width: 40% !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 12px;
}

.truncate_dropdown {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 56%;
}

.row-container-rota-last {
    border: 1px solid #E2E8F0;
    border-top: none;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.btn-plus-rota {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background-color: #fff !important;
    -webkit-tap-highlight-color: transparent;
    color: #1E2432;
    font-weight: 500;
    padding: 8px;
    border: 1px solid #A4ACB93D;
    box-shadow: 0px 0px 0px 1px #12376914;
}

.employees-container-rota {
    display: flex;
    justify-content: center;
    padding: 8px 16px;
    /*border: 1px solid #E2E8F0;*/
    align-items: center;
}

.timer-modal {
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
    border: 1px solid #E2E8F0;
    align-items: center;
}

.totals_heading {
    /*display: flex;
    justify-content: center;*/
    padding: 9px 10px;
    border: 1px solid #E2E8F0;
    max-width: 20.6%;
    min-width: 20.6%;
    white-space: nowrap;
    font-size: 10px;
    text-align: center;
}

.dropdown-container-rota {
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
    border: 1px solid #E2E8F0;
    color: #1E2432 !important;
}

.heading-rota {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 1px;
    border: 1px solid #E2E8F0;
    width: 9.5%;
    text-align: center;
    min-width: 9.94%;
    max-width: 9.94%;
    flex-direction: column;
    background-color: #fff;
}

.heading-rota-dashboard {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 1px;
    border: 1px solid #E2E8F0;
    width: 12.07%;
    text-align: center;
    min-width: 12.07%;
    max-width: 12.07%;
    flex-direction: column;
    background-color: #fff;
}

.child_container_dashboard {
    cursor: default;
    border-radius: 8px;
    padding: 4px !important;
    color: #1E2432;
    width: 100%;
    max-width: 100% !important;
}


.schedule_dropdown {
    width: 15px;
    cursor: pointer;
    color: var(--text-gray) !important;
    margin-right: 0.25rem !important;
    text-align: right;
    z-index: 1;
}

.total-rota {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 2px;
    border: 1px solid #E2E8F0;
    width: 9.9%;
    text-align: center;
    min-width: 9.9%;
    max-width: 9.9%;
    background-color: #fff;
    white-space: nowrap;
    font-size: 10px;
}

.sm-heading-rota {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border: 1px solid #E2E8F0;
    width: 5%;
    text-align: center;
    min-width: 5%;
    max-width: 5%;
    background-color: #fff;
    white-space: nowrap;
    flex-direction: column;
}

.shift_col_sm {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border: 1px solid #E2E8F0;
    width: 5.5%;
    text-align: center;
    min-width: 6%;
    max-width: 6%;
    background-color: #fff;
}

.shift_col_last {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 2px;
    border: 1px solid #E2E8F0;
    width: 5%;
    text-align: center;
    min-width: 5%;
    max-width: 5%;
    background-color: #fff;
    font-size: 12px;
    flex-direction: column;
}

.shift_col_sm2 {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border: 1px solid #E2E8F0;
    width: 5%;
    text-align: center;
    min-width: 5%;
    max-width: 5%;
    background-color: #fff;
}

.shift_lg_col {
    min-width: 85%;
    max-width: 85%;
}

.sm-heading-rota_v2 {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border: 1px solid #E2E8F0;
    width: 130px;
    text-align: center;
    min-width: 130px;
    max-width: 130px;
    background-color: #fff;
}

.heading-rota_v2 {
    padding: 12px 16px;
    border: 1px solid #E2E8F0;
    width: 12.3%;
    min-width: 12.3%;
    max-width: 12.3%;
}


.shift_col {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 5px;
    border: 1px solid #E2E8F0;
    width: 10.15%;
    text-align: center;
    background-color: #fff;
}

.bottom-rota {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 2px;
    border: 1px solid #E2E8F0;
    width: 10%;
    min-width: 10%;
    max-width: 10%;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}


.text-spans-main {
    color: #1E2432 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}


.text-spans-mini {
    color: #6B7C94 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
}

.heading-rota span {
    color: #1E2432;
    /*font-size: 12px;*/
    font-weight: 500;
}

.profile_pic {
    border-radius: 50%;
    height: 36px;
    width: 36px;
    margin: 0px 6px;
}

.profile_pic_24 {
    border-radius: 50%;
    height: 24px;
    width: 24px;
    margin: 0px 6px;
}

.text-light-gray {
    color: #E2E8F0 !important;
}

.sticky_header {
    position: sticky !important;
    top: 105px;
    z-index: 3;
}

.sticky_pi_header {
    position: -webkit-sticky;
    position: sticky !important;
    top: 60px;
    z-index: 999;
    background: #fff;
    padding: 15px;
    margin: -9px -22px 13px;
    box-shadow: 0px 4px 40px rgba(39, 32, 120, 0.1);
    --bs-gutter-x: 0.5rem;
}

    .sticky_pi_header h4 {
        font-size: 14px;
        margin-top: 3px;
    }

.sticky_rota_header {
    position: -webkit-sticky;
    position: sticky;
    top: 59px;
    z-index: 5;
    border-radius: 10px;
    background: #fff;
    padding: 0 5px;
    margin: 0 3px;
}

.sticky_row {
    position: -webkit-sticky;
    position: sticky;
    top: 156px;
    z-index: 3;
    background: #fff;
    /*border-bottom: 1px solid #E2E8F0;*/
}

.custom-sticky-top_rota {
    position: -webkit-sticky;
    position: sticky;
    top: 168px;
    z-index: 2;
    background: white;
    border-top-left-radius: 6px;
    width: 100%;
    box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.18) !important;
}

.unchecked {
    top: 156px;
}

.top-120 {
    top: 105px;
}

.checked {
    top: 200px;
}

.exception_view {
    top: 105px !important;
}

.exception_view.checked {
    top: 147px !important;
}

.for_employee {
    top: 107px;
}

.custom-sticky-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    z-index: 3;
    background: white;
    box-shadow: 0 0.2rem 0.9rem rgba(0, 0, 0, 0.18) !important;
    border-top-left-radius: 6px;
    width: 100%;
}


.heading-timer {
    width: 20%;
    max-width: 20%;
    min-width: 24%;
}

.min-w-1900 {
    min-width: 1900px;
}

.totals_section {
    min-width: 1580px;
    max-width: 1580px;
}

.dViewMainW {
    min-width: 3420px;
}

.fixed-bottom-rota {
    position: fixed;
    bottom: 0rem;
    left: 0;
    width: 100%;
    background: #fff;
    box-shadow: 0px -4px 12px 0px #4848480F;
    z-index: 100;
    border-bottom: 1px solid #E2E8F0;
    font-size: 10px;
}


.custom-border {
    padding: 6px !important;
    border-right: 1px solid #dee2e6 !important;
    /*max-width: 185px !important;*/
    /*width: calc( 100% / 11 ) !important;*/
}

.footerIcons {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 0px;
}

.border-bottom-right-radius {
    border-top: none;
    border: 1px solid #E2E8F0;
}

.dropdown-toggle::after {
    display: none !important;
}

.child-container .other-site {
    font-size: 8px !important;
    white-space: nowrap;
    background-color: #8494ad;
    color: #fff !important;
    border-radius: 20px;
    padding: 3px 5px;
}

.child-container .other-site {
    font-size: 8px !important;
    white-space: nowrap;
    background-color: #8494ad;
    color: #fff !important;
    border-radius: 20px;
    padding: 3px 5px;
}

.uneditable-shift {
    background-color: #f2f2f2;
    cursor: not-allowed;
}

.txt-light-gray {
    color: #94a3b8 !important;
}

/*  ********************************** BORDER RADIUS STARTS  ************************************** */
.b-t-r-l-6 {
    border-top-left-radius: 6px;
}

.b-t-r-r-6 {
    border-top-right-radius: 6px;
}



.border-radius-parent > .row.flex-nowrap.g-0:last-of-type > .col-xxl-2:first-of-type .dropdown-container-rota-secondary {
    border-bottom-left-radius: 6px !important;
}


.border-radius-parent > .row.flex-nowrap.g-0:last-of-type > .col-xxl-2:first-of-type .dropdown-container-rota {
    border-bottom-left-radius: 6px !important;
}


.border-radius-parent .row:last-of-type .col-xxl-2.totals_heading {
    border-bottom-left-radius: 6px !important;
}



.border-radius-parent > .row.flex-nowrap.g-0:last-of-type > .col-xxl-2:first-of-type .table-container-rota {
    border-bottom-left-radius: 6px !important;
}

.border-radius-parent > .row.flex-nowrap.g-0:last-of-type > .col-xxl-1:last-of-type {
    border-bottom-right-radius: 6px !important;
}

.border-radius-parent > .row.flex-nowrap.g-0:last-of-type > .col-xxl-auto:last-of-type {
    border-bottom-right-radius: 6px !important;
}


.border-radius-parent > .row.flex-nowrap.g-0:last-of-type > .border-bottom-right-radius:last-of-type {
    border-bottom-right-radius: 6px !important;
}
/*  ********************************** BORDER RADIUS ENDS  ************************************** */
.day-view-height {
    max-height: 60vh;
}

.heading-primary-rota_dayView {
    position: sticky !important;
    left: 0 !important;
    z-index: 2 !important;
    width: 280px;
    min-width: 280px;
    max-width: 280px;
}

.week.custom-sticky-top_rota {
    position: sticky;
    top: 181px;
    z-index: 2;
    background: white;
    border-top-left-radius: 6px;
    width: 100%;
    box-shadow: 0 0.2rem 0.9rem rgba(0, 0, 0, 0.18) !important;
}

.sticky-top {
    top: -2px;
}


.sticky_filters {
    position: sticky !important;
    top: 60px !important;
    z-index: 1;
    background: #f7f9fb;
}


.sticky_console {
    position: sticky;
    top: 110px;
    z-index: 1;
    background-color: #fff;
    padding: 15px 20px;
}


/*  ********************************** ROTA RESPONSIVENESS STARTS  ************************************** */

@media screen and (max-width: 1199px) {
    .custom-border {
        border-right: none;
        border-bottom: 1px solid #E2E8F0;
    }
}

@media screen and (max-width: 1023px) {
    .res_shift_col {
        min-width: 140px;
        max-width: 140px;
    }

    .res_days {
        min-width: 200px;
        max-width: 220px;
    }

    .week_panel {
        min-width: 1500px;
    }

    .mb-totals {
        margin-bottom: 5rem !important;
    }

    .scrollbar-wrapper-rota {
        overflow: auto;
    }

    .custom-sticky-top_rota {
        position: static;
        top: 0px;
        box-shadow: 0 0.2rem 0.9rem rgba(0, 0, 0, 0.18) !important;
        z-index: 100 !important;
    }

    .heading-rota_v2 {
        width: 18%;
        min-width: 18%;
        max-width: 18%;
    }

    .shift_lg_col {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
    }

    .shift_col {
        width: 11% !important;
        min-width: 11% !important;
        max-width: 11% !important;
    }

    .shift_col_sm {
        width: 6.3%;
        min-width: 6.3%;
        max-width: 6.3%;
    }

    .shift_col_sm2 {
        width: 95px;
        min-width: 95px;
        max-width: 95px;
    }

    .bottom-rota {
        width: 13%;
        min-width: 13%;
        max-width: 13%;
    }
}

@media screen and (max-width: 1024px) {

    .resp_icon {
        float: none;
    }

    .res_days {
        min-width: 200px;
        max-width: 220px;
    }

    td .btn.btn-sm.btn-light {
        width: auto !important;
    }

    .time_block {
        float: none;
        display: block;
    }

    .btn.btn-light.ms-2 {
        margin-left: 0px !important;
    }

    .ipad_int_columns {
        width: 6% !important;
    }

    .ipad_int_numbers {
        width: 94% !important;
    }

    .resp_delete_button {
        border: 1px solid #F34040 !important;
        margin-bottom: 10px !important;
    }
}


@media screen and (min-width: 1023px) and (max-width: 1199px) {
    .heading-rota .time_font {
        font-size: 10px !important;
    }

    .res_shift i {
        font-size: 10px !important;
    }

    .truncate_names {
        display: inline-block;
        max-width: 75% !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-right: 20px;
    }
}


@media screen and (max-width: 1590px) and (min-width: 1024px) {
    .employees-container-rota span {
        font-size: 12px !important;
    }

    .btn-plus-rota {
        padding: 6px;
    }

    .heading-rota {
        font-size: 12px;
    }

    .sm-heading-rota {
        font-size: 12px;
    }

    .heading-rota_v2 {
        font-size: 12px;
    }

    .shift_col {
        font-size: 12px;
    }



    .shift_col_sm {
        font-size: 12px;
    }

    .bottom-rota {
        font-size: 12px;
    }
}

@media screen and (max-width: 1023px) and (min-width: 768px) {
    .heading-primary-rota {
        width: 25% !important;
        min-width: 25% !important;
        max-width: 25% !important;
    }

    .sm-heading-rota {
        width: 10% !important;
        min-width: 10% !important;
        max-width: 10% !important;
    }

    .heading-rota {
        width: 17% !important;
        min-width: 17% !important;
        max-width: 17% !important;
    }

    .totals_heading {
        width: 25% !important;
        min-width: 25% !important;
        max-width: 25% !important;
    }

    .total-rota {
        width: 17% !important;
        min-width: 17% !important;
        max-width: 17% !important;
    }

    .heading-timer {
        width: 25% !important;
        min-width: 25% !important;
        max-width: 25% !important;
    }

    .timer-rota-secondary {
        width: 136% !important;
        min-width: 136% !important;
        max-width: 136% !important;
    }

    .ipad_totals {
        width: 1214px;
    }

    .shift_col_last {
        width: 77.7969px;
        min-width: 77.7969px;
        max-width: 77.7969px;
    }
}

@media screen and (max-width: 768px) {
    .heading-primary-rota {
        width: 30% !important;
        min-width: 30% !important;
        max-width: 30% !important;
    }

    .sm-heading-rota {
        width: 10% !important;
        min-width: 10% !important;
        max-width: 10% !important;
    }

    .heading-rota {
        width: 18% !important;
        min-width: 18% !important;
        max-width: 18% !important;
    }

    .totals_heading {
        width: 55% !important;
        min-width: 55% !important;
        max-width: 55% !important;
    }

    .total-rota {
        width: 35% !important;
        min-width: 35% !important;
        max-width: 35% !important;
    }

    .heading-timer {
        width: 55% !important;
        min-width: 55% !important;
        max-width: 55% !important;
    }

    .timer-rota-secondary {
        width: 320% !important;
        min-width: 320% !important;
        max-width: 320% !important;
    }
}

/*  ********************************** ROTA RESPONSIVENESS ENDS  ******************************************** */
.modal_custom_color {
    color: #535353 !important
}

/*ROTA DEPARTMENT STARTS*/

.heading-rota.bg-blue, .heading-primary-rota.bg-blue {
    background-color: #F0F8FF !important;
}


.heading-primary-rota.bg-light-gray {
    background-color: #F7F9FB !important;
}

.heading-primary-rota.bg-light-warning {
    background-color: rgba(255, 170, 5, 0.1) !important;
}

.bg-light-gray {
    background-color: #F7F9FB !important;
}

.bg-blue {
    background-color: #f0f8ff !important;
}
/*ROTA DEPARTMENT ENDS*/


/*ROTA  Position than person STARTS*/
.min-w-260 {
    min-width: 260px;
}
/*ROTA  Position than person ENDS*/

/*ROTA SCHEDULE BY PERSON STARTS*/
.btn-chevron-rota i {
    color: #475569
}

.btn-chevron-rota:hover {
    cursor: pointer
}

.btn-chevron-rota-nested:hover {
    cursor: pointer
}

.depart_width {
    min-width: 84.5%;
    max-width: 84.5%;
}

.dayViewWidth {
    width: 3140px;
    max-width: 3140px;
    min-width: 3140px;
}


.dropdown-container-rota-secondary {
    display: flex;
    padding: 4px 12px;
    border: 1px solid #E2E8F0;
    width: 100% !important;
    /* justify-content: center; */
    align-items: center;
}


.employee_add_shift {
    display: flex;
    padding: 12px;
    width: 100% !important;
    align-items: center;
}

.checkbox_container {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d7dbe3;
    border-radius: 6px;
    font-size: 13px;
    background-color: white;
    padding: 9px;
    box-shadow: 0px 1px 2px 0px #12376914;
    margin-bottom: 1rem;
    height: 40px;
}
/*ROTA  SCHEDULE BY PERSON ENDS*/
/*ROTA SCHEDULE ADD SHIFT STARTS*/
.btn-rounded-primary {
    height: 20px;
    width: 20px;
    border: none;
    outline: none;
    border-radius: 50%;
    background-color: #05A6F0;
    display: flex;
    justify-content: center;
    padding: 10px;
    align-items: center;
    margin-bottom: 3px;
    cursor: pointer;
    z-index: 1;
}

    .btn-rounded-primary i {
        color: #FFFFFF;
    }

/*ROTA  SCHEDULE ADD SHIFT ENDS*/

/**************************************************************************
     ROTA SCHEDULE BY POSITION STARTS
*************************************************************************/

span.font-icon-badge {
    font-size: 11px !important;
    font-weight: 500 !important;
}

/* *************************************************************************
     ROTA SCHEDULE BY POSITION STARTS
*********************************************************************** */

.btn-light-success {
    background-color: #1dca5d;
    color: #fff;
    font-weight: 500;
}


    .btn-light-success:hover {
        background-color: #18813f;
        color: #fff;
    }

.btn-edit-mode {
    background-color: #1dca5d;
    color: #fff;
    font-weight: 500;
}

    .btn-edit-mode:hover {
        background-color: #1dca5d;
        color: #fff;
        font-weight: 500;
    }

/**************************************************************************
     ROTA SCHEDULE ADD SHIFT STARTS
*************************************************************************/

.my-container-bg-gray {
    background-color: #eff4f9;
    border-radius: 8px;
    padding: 7px 10px;
}

.badge-dark-primary {
    background-color: #025378;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    padding: 12px;
    height: 40px;
    width: 40px;
}

    .badge-dark-primary i {
        color: white;
    }


.shift-modal-container {
    display: flex !important;
    width: 100% !important;
    justify-content: space-between;
}



    .shift-modal-container a {
        cursor: pointer;
    }

.span-head-mini {
    font-weight: 400;
    font-size: 12px;
    margin-left: 0.5rem;
}

.span-head {
    font-weight: 500;
    font-size: 12px;
    margin-left: 0.5rem;
    display: block;
}

.label_box {
    border: 1px solid #E2E8F0;
    border-radius: 5px;
    padding: 0.25rem 0.5rem;
}

.label_text {
    font-weight: 500;
    font-size: 12px;
    color: #6B7C94 !important;
    display: block;
}

.btn-overlap {
    background-color: #E2E8F0;
    border-radius: 50%;
    outline: none;
    border: 2px solid white;
    padding: 1px 5px;
    position: absolute;
    right: 10px;
    cursor: pointer
}

    .btn-overlap i {
        color: #6B7C94;
    }

.span-small-text {
    font-weight: 500;
    font-size: 12px;
    color: #94A3B8;
    display: block;
    margin: 5px 0px;
}

.f-s-12 {
    font-size: 12px;
}

.small-primary-heading {
    color: #1E2432;
    font-weight: 700;
    font-size: 12px;
    margin: 5px 0px;
}

.shiftNotes {
    display: flex !important;
    width: 100% !important;
    justify-content: space-between;
}

    .shiftNotes a {
        cursor: pointer;
    }

.divider {
    height: 1px;
    width: 100%;
    background-color: #F7F9FB;
}

.txt-sm-danger {
    color: #D92D20 !important;
    font-weight: 400 !important;
}

.txt-sm-success {
    color: #039855 !important;
    font-weight: 400 !important;
}

.heading-timer-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border: 1px solid #E2E8F0;
    text-align: center;
    background-color: #fff;
    max-width: 160px;
    min-width: 160px;
}

.timer-rota-primary {
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
    border: 1px solid #E2E8F0;
    border-right: none;
}

    .timer-rota-primary a {
        cursor: pointer;
    }

.timer-rota-secondary {
    background-color: #F7F9FB !important;
    min-width: 76%;
    max-width: 76%;
    width: 76%;
    border: 1px solid #E2E8F0;
}


.timer-collapse {
    font-size: 16px !important;
    font-weight: 500 !important;
}

.text-timer-main {
    color: #1E2432 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

.text-timer-mini {
    color: #1E2432 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}



.week_panel {
    background-color: #f7f9fb;
    border: 1px solid #e4eaf2;
    border-radius: 8px;
    padding: 4px;
}

.dayButtonView {
    outline: none;
    border: none;
    background-color: #f7f9fb;
    color: #6B7C94;
    font-size: 12px;
    font-weight: 500;
    margin: 0px 5px;
    padding: 8px 20px;
    border-radius: 6px;
}

    .dayButtonView.active {
        background-color: #FFFFFF;
        box-shadow: 0px 1px 3px 0px #1018281A;
    }

.heading-rota-dayView {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border: 1px solid #E2E8F0;
    width: calc((100% - 16.6667%) / 10);
    text-align: center;
    min-width: 120px;
    max-width: 120px;
    background-color: #fff;
    min-height: 120px;
}

.p_heading-rota-dayView {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border: 1px solid #E2E8F0;
    width: calc((100% - 16.6667%) / 10);
    text-align: center;
    min-width: 120px;
    max-width: 120px;
    background-color: #fff;
}

.spanDay {
    color: #1E2432;
    font-size: 16px;
    font-weight: 600;
}

.child-container-dayView.unpublished {
    border-left: 3px solid #3b80f2;
    background: repeating-linear-gradient( 50deg, #e9f3fe, #e9f3fe 10px, #f0f8ff 10px, #f0f8ff 20px);
}

.child-container-dayView.published {
    border-left: 3px solid #f3a515;
    background: repeating-linear-gradient( 50deg, #fff7de, #fff7de 10px, #fff4d6 10px, #fff4d6 20px);
}

.child-container-dayView.holiday {
    border-left: 3px solid #94a3b8;
    background: repeating-linear-gradient( 50deg, #f7f9fb, #f7f9fb 10px, #f3f6f8 10px, #f3f6f8 20px);
}

.child-container-dayView.approved {
    border-left: 3px solid #1dca5d;
    background: repeating-linear-gradient( 50deg, #eefff4, #eefff4 10px, #e6fdee 10px, #e6fdee 20px);
}

.child-container-dayView.purple {
    border-left: 3px solid #5d5fef;
    background: repeating-linear-gradient( 50deg, #eef2ff, #eef2ff 10px, #e8ecfe 10px, #e8ecfe 20px);
}

.child-container-dayView.noshow {
    border-left: 3px solid #F34040;
    background: repeating-linear-gradient( 50deg, #fff1f0, #fff1f0 10px, #fff5f4 10px, #fff5f4 20px);
}

.heading-rota.disabled_shift {
    background-color: #f2f2f2 !important;
    cursor: not-allowed;
    width: 100% !important;
    border-radius: 0px;
    margin: 0px;
}

.modal-header h5 {
    font-size: 16px;
    font-weight: 500;
    color: #1e2432;
}

.bor_top_rig {
    border-top-right-radius: 6px;
}

.bor_bottom_rig {
    border-bottom-right-radius: 6px;
}


.bor_top_left {
    border-top-left-radius: 6px;
}

.bor_bottom_left {
    border-bottom-left-radius: 6px;
}

.publish_parent {
    background-color: #e5f7ff;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.publish_danger {
    background-color: #fff5f4;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mb-totals {
    margin-bottom: 3rem;
}

.btn-warning-outline {
    border: 1px solid #f1c39c;
    color: #f5b53f;
}

    .btn-warning-outline:hover {
        background-color: #f5b53f;
        color: white;
    }

.txt-100 {
    font-size: 100%
}

.pin_icon {
    color: #6B7C94;
}

ul.copy_week {
    margin: 0.5em auto;
    -webkit-columns: 2;
    display: block;
}

.copy_week li {
    text-align: left;
    /*border-bottom: 1px solid #dee2e6 !important;*/
}

.break_column {
    height: 18px;
    margin: 10px 0;
}


/* -------- Musa CSS Start -------- */
.page_navbar {
    background-color: #f8f9fa;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 20px;
}

.accept {
    font-weight: 500;
    font-size: 12px;
}

.imgContainer {
    border: 1px solid #dee2e6;
    border-radius: 5px;
    height: 158px;
    width: 100%;
    background-color: #F7F9FB;
}

    .imgContainer img {
        max-height: 150px;
        width: 100%;
    }

.card-title {
    font-weight: 600;
    font-size: 12px;
}

.card-text {
    font-size: 12px;
    color: #1E2432;
    font-weight: 400;
}

/* Modal */

.sent {
    margin-right: 12px;
    margin-left: 12px;
}

.borderRight {
    border-right: 0px;
}


.cross {
    color: #6B7C94;
}

.fa-arrow-left {
    cursor: pointer;
}


.heading-total-rota {
    margin: 20px 0px;
    color: #1E2432;
    font-weight: 700;
    font-size: 12px;
}


.initialHeading {
    width: 16.66666667%;
    min-width: 300px;
    padding: 1rem !important;
    font-size: 12px;
    font-weight: 500;
    border: 0.5px solid #E2E8F0;
    color: #1E2432;
}

.last-column {
    font-weight: 700;
    font-size: 10px;
    color: #1E2432;
}

.heading-primary-rota {
    width: 10.5%;
    min-width: 10.5%;
    max-width: 10.5%;
}

.lh-32 {
    line-height: 32px;
}

#qrcode canvas {
    width: 80%;
    height: 80%;
}

.grey-box {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d7dbe3;
    border-radius: 6px;
    font-size: 12px;
    background-color: #f7f9fb;
    color: #757589;
    padding: 9px;
    box-shadow: 0px 1px 2px 0px #12376914;
    margin-bottom: 1rem;
}

.on_leave_tag {
    position: absolute;
    bottom: 2px;
    left: 2px;
}

.bank_holiday_tag {
    position: absolute;
    bottom: 2px;
    right: 2px;
}

.approval_rota {
    background: white;
    box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.18) !important;
    z-index: 4;
    position: relative;
}

.approval-primary-rota {
    background-color: #F7F9FB !important;
    display: flex;
    align-items: center;
    padding: 8px 16px;
    min-width: 15%;
    max-width: 15%;
    border: 1px solid #E2E8F0;
}

.approval-rota {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 1px;
    border: 1px solid #E2E8F0;
    text-align: center;
    flex-direction: column;
    background-color: #fff;
    padding: 8px 16px;
    min-width: 9%;
    max-width: 9%;
}


/********************************************************
    ARSALAN ROTA CSS ENDS
*********************************************************/
/****************************************************** ROTA ENDS ******************************************************/
/********************************************************
     RESPONSIVE 1.25 1.5 and 2 CSS STARTS
*********************************************************/


/********************************************************
    ARSALAN RESPONSIVE 1.25, 1.5 and 2 CSS ENDS
*********************************************************/
@media (max-width: 767px) {
    .container-sm {
        max-width: 85%;
    }

    .penIcon {
        top: 4px !important;
        right: 12.5rem !important;
    }

    .anchorTag {
        top: 4px;
        width: auto !important;
    }
}

@media screen and (max-width: 1024px) {
    .initialHeading {
        max-width: 150px;
    }

    #launcher-frame {
        right: 4.6rem !important;
    }
}

@media screen and (max-width: 1452px) {
    .file_text {
        font-size: 12px;
    }

    .file_size_text {
        font-size: 10px;
    }
}

@media screen and (max-width: 1398px) {
    .file_size_text {
        display: none;
    }
}

@media screen and (max-width: 1024px) {
    .file_size_text {
        display: block;
        font-size: 12px;
    }
}

@media only screen and (min-width: 1081px) and (max-width: 1150px) {
    #launcher-frame {
        right: 4.6rem !important;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1360px) {
    .container-sm {
        height: 86%;
    }

    .helper-box {
        font-size: 10px;
    }

        .helper-box span {
            font-size: 9px;
        }

    .mx-height-long {
        max-height: 69vh;
    }

    .mx-height-short {
        max-height: 57vh;
    }

    .mx-height-card-long {
        max-height: 63vh;
    }

    .mx-height-card-short {
        max-height: 53vh;
    }

    .int_numbers {
        padding-left: 20px !important;
    }

    input[name="search"] {
        font-size: 12px;
        background-position: 7px 8px;
    }

    input::placeholder {
        font-size: 12px;
    }

    .input-group > .form-control {
        font-size: 10px !important;
    }

    .text_truncate_schedule {
        max-width: 147px;
    }

    .mx-height-reports {
        max-height: 62vh;
    }

    .dropdown .select-label {
        text-indent: 2px;
        font-size: 10px
    }

    .date_range span {
        font-size: 10px;
    }

    /*.width_first {
        min-width: 125px;
    }

    .order_by {
        width: 207px;
    }

    .site_width {
        min-width: 104px;
    }

    .department_filter {
        min-width: 110px;
    }

    .position_filter {
        min-width: 110px;
    }

    .pay_type {
        min-width: 102px;
    }

    .date_filter {
        min-width: 88px;
    }

    .date_ranger_filter {
        width: 176px;
    }

    .absence_type {
        min-width: 123px;
    }

    .order_by {
        width: 192px;
    }

    .termination_filter {
        min-width: 148px !important;
    }*/

    .mx-height-leaves-accordion {
        max-height: 73vh !important;
    }
}

@media only screen and (min-width: 1361px) and (max-width: 1366px) {
    .container-sm {
        height: 86%;
    }

    .helper-box {
        font-size: 10px;
    }

        .helper-box span {
            font-size: 9px;
        }

    .mx-height-long {
        max-height: 67vh;
    }

    .mx-height-short {
        max-height: 55vh;
    }

    .mx-height-card-long {
        max-height: 62vh;
    }

    .mx-height-card-short {
        max-height: 50vh;
    }

    .int_numbers {
        padding-left: 20px !important;
    }

    input[name="search"] {
        font-size: 12px;
    }

    input::placeholder {
        font-size: 12px;
    }

    .dropdown .select-label, .btn {
        font-size: 12px;
        height: 36px;
    }

    .sticky_row {
        top: 105px;
    }

    .unchecked {
        top: 152px;
    }

    .checked {
        top: 151px !important;
    }

    .exception_view {
        top: 60px;
    }

    .res_text {
        font-size: 10px !important;
    }

    input.week_range {
        font-size: 10px !important;
    }

    .truncate_names {
        max-width: 75% !important;
        padding-right: 0px;
    }

    .dashboard_cards {
        max-height: 270px;
    }

    .text_truncate_schedule {
        max-width: 124px;
    }

    .mx-height-reports {
        max-height: 61vh;
    }

    .dropdown .select-label {
        text-indent: 2px;
        font-size: 10px;
    }

    .date_range span {
        font-size: 10px;
    }

    /*.width_first {
        min-width: 118px;
    }

    .site_width {
        min-width: 96px;
    }

    .department_filter {
        min-width: 108px;
    }

    .position_filter {
        min-width: 101px;
    }

    .pay_type {
        min-width: 96px;
    }

    .date_filter {
        min-width: 85px;
    }

    .date_ranger_filter {
        width: 175px;
    }*/

    .mx-height-leaves-accordion {
        max-height: 73vh !important;
    }
}

@media only screen and (max-width: 1440px) {
    .int_numbers {
        padding-left: 20px !important;
    }
}

@media only screen and (min-width: 1367px) and (max-width: 1600px) {
    .mx-height-long {
        max-height: 74vh;
    }

    .mx-height-short {
        max-height: 65vh;
    }

    .mx-height-card-long {
        max-height: 70vh;
    }

    .mx-height-card-short {
        max-height: 62vh;
    }
}

@media only screen and (min-width: 1601px) and (max-width: 1680px) {
    .mx-height-long {
        max-height: 73vh;
    }

    .mx-height-short {
        max-height: 63vh;
    }

    .mx-height-card-long {
        max-height: 68vh;
    }

    .mx-height-card-short {
        max-height: 58vh;
    }
}

@media only screen and (min-device-width: 810px) and (max-device-width: 1080px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: portrait) {
    #launcher-frame {
        right: 65px !important;
    }

    ul.dropdown-menu {
        transform: translate3d(0px, 36px, 0px) !important;
    }

    angucompletehrm .angucomplete-holder input {
        margin: 1rem 0;
    }

    .ipad_int_columns {
        width: 6% !important;
    }

    .ipad_column_auto {
        width: auto !important;
    }

    .ipad_footer_logo {
        width: 50% !important;
        text-align: left;
    }

    .ipad_footer_links {
        width: 50% !important;
        text-align: right;
    }

    .datepicker.datepicker-dropdown, dropdown-menu {
        margin-top: 0px;
    }

    .ipad_int_numbers {
        width: 94% !important;
    }

    .accordion-button .btn.btn-light {
        width: auto !important;
        margin: 0px 0px !important;
        margin-left: auto !important;
    }

    .btn {
        margin: 6px 0px;
    }

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

    .ci-user-picture {
        text-align: center;
    }

    .ipad_row {
        min-width: 1197px;
    }

    .heading-rota_v2 {
        width: 194.5px;
        min-width: 194.5px;
        max-width: 194.5px;
    }

    .shift_col_sm {
        width: 77.7969px;
        min-width: 77.7969px;
        max-width: 77.7969px;
    }

    .shift_col {
        width: 132.25px;
        min-width: 132.25px;
        max-width: 132.25px;
    }

    .shift_col_last {
        width: 77.7969px;
        min-width: 77.7969px;
        max-width: 77.7969px;
    }

    .bottom-rota {
        width: 190px;
        min-width: 150px;
        max-width: 156px;
    }

    .ipad_totals {
        width: 1198px;
    }

    .mt-xs-2 {
        margin-top: 5px !important;
    }

    .ME_sticky_right.status {
        right: 71px;
    }

    .fixed-bottom-rota .custom-border {
        min-width: 110px;
    }

    .badge-lg {
        padding: 5px 10px;
        font-size: 10px;
    }

    .ipad_column_auto {
        width: auto !important;
    }

    .sticky_row {
        position: relative;
        top: 0;
    }
}

@media only screen and (min-device-width: 810px) and (max-device-width: 1080px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: landscape) {
    #launcher-frame {
        right: 68px !important;
    }

    .truncate_dropdown {
        max-width: 45%;
    }

    .mx-height-reports {
        max-height: 67vh;
    }

    .dashboard_cards {
        max-height: 310px;
    }

    .responsive-rota .col-xxl-auto.col-xl-auto.col-md-auto.ms-auto {
        margin-left: 0 !important;
    }

    .min-w-130 {
        min-width: 100px !important;
    }

    ul.dropdown-menu {
        transform: translate3d(0px, 36px, 0px) !important;
    }

    .side_content {
        width: 80%;
    }

    .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper {
        width: 19.666667%;
    }

    .card .card-header h5 {
        font-size: 12px;
    }

    .helper-box {
        font-size: 10px;
    }

        .helper-box span {
            font-size: 9px;
        }

    .border-tab.nav-tabs .nav-item .nav-link {
        /*font-size: 11px;*/
    }

    .helper-box {
        padding: 3px 8px;
    }

    .datepicker.datepicker-dropdown, dropdown-menu {
        margin-top: 60px;
    }

    .w-180 {
        width: 155px;
    }

    .mx-height-long {
        max-height: 62vh;
    }

    .min-w-220 {
        min-width: 122px;
    }

    .dropdown .select-label {
        font-size: 12px;
        height: 36px;
        line-height: 34px;
    }

    input::placeholder {
        font-size: 12px !important;
    }

    input[type=text], input[type=email], input[type=password], input[type=date] {
        font-size: 10px;
        padding: 8px;
    }

    input[name="search"] {
        padding: 10px 9px 9px 33px;
    }

    .ipad_filter_1 {
        min-width: 106px;
    }

    .ipad_filter_3 {
        min-width: 112px;
    }

    .btn-vertical-ellipsis {
        width: 38px;
        height: 38px;
    }

    .btn {
        font-size: 11px;
        padding: 0.5rem 0.7rem;
    }



    .responsiveLabel {
        display: block !important;
    }

    .nav-tabs.border-tab.resp_tabs .nav-item .nav-link {
        font-size: 11px !important;
    }

    .border-tab.nav-tabs.resp_tabs .nav-item .nav-link:first-child {
        margin-left: 0px;
    }

    .border-tab.nav-tabs.resp_tabs .nav-item .nav-link {
        margin: 0px 18px;
    }

    .rounded-circle.p-3.bg-white.border {
        padding: 0.5rem !important;
    }

    #sidenav {
        position: fixed;
        width: 20%;
    }

    .form-control {
        font-size: 10px;
        padding: 8px;
    }

    label {
        font-size: 12px;
    }

    .iti--allow-dropdown input, .iti--allow-dropdown input[type=tel], .iti--allow-dropdown input[type=text], .iti--separate-dial-code input, .iti--separate-dial-code input[type=tel], .iti--separate-dial-code input[type=text] {
        padding-right: 12px !important;
    }

    .international-num input {
        padding: 7px 9px 8px 40px;
    }

    .placeholder_eye::after {
        top: 30px;
    }

    .placeholder::after {
        font-size: 12px;
    }

    .dropdown .select-label:after {
        line-height: 28px;
    }

    .date-column .date-icon {
        top: 11px;
    }

    .mx-height-long {
        max-height: 75vh;
    }

    .mx-height-short {
        max-height: 68vh;
    }

    .tags-editable {
        padding: 5px;
    }

        .tags-editable i {
            margin-top: 6px;
        }

    .alert.alert-light-primary {
        margin-bottom: 1rem !important;
    }

    .media.form-control {
        padding: 4px 6px !important;
    }

    .col-form-label {
        font-size: 10px;
        padding: 6px;
    }

    .placeholder_API::after {
        top: 38px;
    }

    table thead tr th, table tr td {
        font-size: 12px;
    }

    .ME_sticky_right.status {
        right: 70px;
    }

    .birthday_boy {
        font-size: 10px;
    }

    input.week_range {
        font-size: 10px !important;
    }

    .text_truncate_schedule {
        max-width: 78px;
    }

    .card_birthday .card-body i, .card_anniversary .card-body i {
        display: none;
    }

    .ipad_search {
        width: 120px;
    }

    .sm-heading-rota {
        min-width: 5.3%;
        max-width: 5.3%;
    }

    .department_name {
        font-size: 10px !important;
    }

    .res_text {
        font-size: 8px !important;
    }

    .sm-heading-rota span.d-block, .sm-heading-rota .badge.badge-light-success {
        font-size: 9px;
    }

    .sticky_header {
        z-index: 4;
    }

    .sticky_row {
        top: 154px;
    }

    .unchecked {
        top: 154px;
    }

    .date_range span {
        font-size: 10px;
    }

    /*.width_first {
        min-width: 95px;
    }

    .site_width {
        min-width: 90px;
    }

    .department_filter {
        min-width: 100px;
    }

    .position_filter {
        min-width: 90px;
    }

    .pay_type {
        min-width: 90px;
    }

    .date_filter {
        min-width: 77px;
    }

    .date_ranger_filter {
        width: 158px;
    }

        .date_ranger_filter i, .width_first i {
            display: none;
        }

    .order_by {
        width: 134px;
    }

    .termination_filter {
        min-width: 115px !important;
    }

    .absence_type {
        min-width: 105px;
    }*/

    .ipad_btn {
        padding: 8px 8px;
    }

        .ipad_btn i {
            display: none;
        }

    .date_range {
        font-size: 10px;
        padding: 9px;
    }

    .modal-dialog.modal-lg, .modal-dialog.modal-xl {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0;
    }

    .dashboard_tabs_card {
        max-height: 308px;
    }
}

@media only screen and (min-device-width: 834px) and (max-device-width: 1194px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: portrait) {
    .ipad_totals {
        width: 1239px;
    }

    .heading-rota_v2 {
        width: 16%;
        min-width: 16%;
        max-width: 16%;
    }

    .shift_col {
        width: 11.1%;
        min-width: 11.1%;
        max-width: 11.1%;
    }

    .page-wrapper .page-header .header-wrapper .nav-right > ul > li {
        padding: 0;
    }

    ul.dropdown-menu {
        top: 16px !important;
    }
}

@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: portrait) {
    ul.dropdown-menu {
        transform: translate3d(0px, 36px, 0px) !important;
    }

    .res_text {
        font-size: 8px !important;
    }

    .res_shift_col {
        width: auto !important;
    }

    .department_name {
        font-size: 10px !important;
    }

    .btn_rota_shifts {
        margin: 0 !important;
    }

    .ipad_rota_labels {
        font-size: 10px;
    }

    .heading-rota_v2 {
        width: 17.5% !important;
        min-width: 17.5% !important;
        max-width: 17.5% !important;
    }

    .ipad_totals {
        width: 982px !important;
    }

    .shift_col_sm {
        width: 5.8% !important;
        min-width: 5.8% !important;
        max-width: 5.8% !important;
    }

    .shift_col {
        width: 11% !important;
        min-width: 11% !important;
        max-width: 11% !important;
    }

    .shift_col_last {
        width: 5% !important;
        min-width: 5% !important;
        max-width: 5% !important;
    }

    .bottom-rota {
        width: 10% !important;
        min-width: 10% !important;
        max-width: 10% !important;
    }

    .min-w-220 {
        min-width: 100%;
        max-width: 100%;
    }

    .sticky_rota_header {
        position: relative;
        top: 0;
    }
}

@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: landscape) {
    #launcher-frame {
        right: 14rem;
    }

    .dashboard_cards {
        max-height: 253px;
    }

    .helper-box {
        font-size: 10px;
    }

        .helper-box span {
            font-size: 9px;
        }

    .birthday_boy, .card_anniversary {
        font-size: 10px;
    }

    .checked {
        top: 199px;
    }

    ul.dropdown-menu {
        /*transform: translate3d(0px, 36px, 0px) !important;*/
    }

    .ME_sticky_right.status {
        right: 70px;
    }

    .mx-height-leaves-accordion {
        max-height: 45vh;
    }

    .min-w-220 {
        min-width: 175px;
    }
}

@media only screen and (min-device-width: 820px) and (max-device-width: 1180px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: portrait) {
    ul.dropdown-menu {
        transform: translate3d(0px, 36px, 0px) !important;
    }

    .helper-box {
        font-size: 12px;
    }

    .page-wrapper.compact-wrapper .page-body-wrapper .page-body {
        padding: 15px 15px;
    }

    .ipad_column_auto {
        width: auto !important;
    }

    .ipad_row {
        min-width: 1197px;
    }

    .heading-rota_v2 {
        width: 194.5px;
        min-width: 194.5px;
        max-width: 194.5px;
    }

    .shift_col_sm {
        width: 77.7969px;
        min-width: 77.7969px;
        max-width: 77.7969px;
    }

    .shift_col {
        width: 132.25px;
        min-width: 132.25px;
        max-width: 132.25px;
    }

    .shift_col_last {
        width: 77.7969px;
        min-width: 77.7969px;
        max-width: 77.7969px;
    }

    .sticky_rota_header {
        position: relative;
        top: 0;
    }

    .sticky_header {
        position: relative !important;
        top: 0;
        z-index: 3;
    }

    .mx-height-leaves-accordion {
        max-height: 100%;
    }
}

@media only screen and (min-device-width: 820px) and (max-device-width: 1180px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: landscape) {
    #launcher-frame {
        right: 13.6rem;
    }

    .dashboard_tabs_card {
        max-height: 308px;
    }

    .dashboard_cards {
        max-height: 330px;
    }

    ul.dropdown-menu {
        transform: translate3d(0px, 36px, 0px) !important;
    }

    .AddCustomScroll_Contact ul.dropdown-menu {
        transform: none !important;
    }

    .container-sm {
        height: 90%;
    }

    .side_content {
        width: 80%;
    }

    .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper {
        width: 19.666667%;
    }

    .card .card-header h5 {
        font-size: 12px;
    }

    .helper-box {
        font-size: 10px;
    }

        .helper-box span {
            font-size: 9px;
        }

    .border-tab.nav-tabs .nav-item .nav-link {
        /*font-size: 11px;*/
    }

    .helper-box {
        padding: 3px 8px;
    }

    .w-180 {
        width: 155px;
    }

    .mx-height-long {
        max-height: 62vh;
    }


    .dropdown .select-label {
        font-size: 10px !important;
        padding: 7px 2px;
    }

    input::placeholder {
        font-size: 10px !important;
    }

    input[type=text], input[type=email], input[type=password], input[type=date] {
        font-size: 10px !important;
        padding: 9px;
    }

    input.week_range {
        padding: 0px 2px !important;
        height: 34px;
    }

    .btn-vertical-ellipsis, .btn-timer-rota {
        height: 37px;
        width: 37px;
    }

    .week-prev, .week-next {
        padding: 0px 8px !important;
    }

    input[name="search"] {
        padding: 9px 9px 10px 33px !important;
    }

    .ipad_filter_1 {
        min-width: 106px;
    }

    .ipad_filter_3 {
        min-width: 112px;
    }

    .btn {
        font-size: 12px;
    }

    .responsiveLabel {
        display: block !important;
    }

    .nav-tabs.border-tab.resp_tabs .nav-item .nav-link {
        font-size: 12px !important;
    }

    .rounded-circle.p-3.bg-white.border {
        padding: 0.5rem !important;
    }

    #sidenav {
        position: fixed;
        width: 20%;
    }

    .form-control {
        font-size: 10px;
        padding: 8px;
    }

    label {
        font-size: 11px;
    }

    .break_column {
        height: 13px;
        margin: 10px 0;
    }

    .iti--allow-dropdown input, .iti--allow-dropdown input[type=tel], .iti--allow-dropdown input[type=text], .iti--separate-dial-code input, .iti--separate-dial-code input[type=tel], .iti--separate-dial-code input[type=text] {
        padding-right: 12px !important;
    }

    .international-num input {
        padding: 7px 9px 8px 80px;
    }

    .placeholder_eye::after {
        top: 30px;
    }

    .placeholder::after {
        font-size: 12px;
    }

    .dropdown .select-label:after {
        line-height: 28px;
    }

    .date-column .date-icon {
        top: 11px;
    }

    .mx-height-long {
        max-height: 73vh;
    }

    .mx-height-short {
        max-height: 68vh;
    }

    .tags-editable {
        padding: 5px;
    }

        .tags-editable i {
            margin-top: 6px;
        }

    .alert.alert-light-primary {
        margin-bottom: 1rem !important;
    }

    .media.form-control {
        padding: 2px 6px !important;
    }

    .col-form-label {
        font-size: 10px;
        padding: 4px;
    }

    .placeholder_API::after {
        top: 38px;
    }

    table thead tr th, table tr td {
        font-size: 11px;
    }

    .ME_sticky_right.status {
        right: 67px;
    }

    .sticky_row {
        top: 154px;
    }

    .unchecked {
        top: 154px;
    }

    .checked {
        top: 197px;
    }

    .ipad_group {
        width: 122px;
    }

    .text_truncate_schedule {
        max-width: 95px;
    }

    .dropdown-container-rota-secondary .text_avatar_36 {
        display: none;
    }

    .heading-primary-rota {
        width: 14.5%;
        min-width: 14.5%;
        max-width: 14.5%;
    }

    .dropdown-container-rota-secondary input.form-check-input {
        /*margin-right: 0.5rem;*/
    }

    .heading-rota_v2 {
        width: 16.1%;
        min-width: 16.1%;
        max-width: 16.1%;
    }

    angucomplete {
        padding: 3px !important;
    }

    .badge-dark-primary {
        height: 25px;
        width: 25px;
    }

    .btn-light-blue {
        padding: 0.3rem 0.5rem;
    }

    .min-w-130 {
        min-width: 105px;
    }

    .res_text {
        font-size: 9px !important;
    }

    .sm-heading-rota {
        min-width: 5.3%;
        max-width: 5.3%;
    }

    .child-container {
        padding: 2px !important;
    }

    .department_name {
        font-size: 10px !important;
    }

    .btn_rota_shifts {
        padding: 0.64rem 1rem;
    }

    .span-head {
        font-size: 11px;
        display: block;
    }

    .truncate_dropdown {
        max-width: 8ch;
    }

    .shift_col_sm {
        width: 5.9%;
        min-width: 5.9%;
        max-width: 5.9%;
    }

    .shift_col {
        width: 11.06%;
        min-width: 11.06%;
        max-width: 11.06%;
    }

    .modal-dialog.modal-lg, .modal-dialog.modal-xl {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0;
    }

    /*.width_first {
        min-width: 115px;
    }

    .site_width {
        min-width: 96px;
    }

    .department_filter {
        min-width: 102px;
    }

    .position_filter {
        min-width: 98px;
    }

    .pay_type {
        min-width: 96px;
    }

    .date_filter {
        min-width: 79px;
    }

    .date_ranger_filter {
        width: 178px;
    }

    .order_by {
        width: 138px;
    }

    .date_range {
        padding: 8px;
    }

    .week_rng {
        max-width: 182px;
    }

    .date_ranger_filter {
        width: 168px;
    }

    .absence_type {
        min-width: 110px;
    }

    .termination_filter {
        max-width: 110px !important;
        min-width: 110px !important;
    }*/

    .btn {
        padding: 0.5rem 1rem;
    }

    .date_range span {
        font-size: 10px;
    }

    .mx-height-leaves-accordion {
        max-height: 55vh;
    }

    .min-w-220 {
        min-width: 122px;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: portrait) {
    .sticky_rota_header {
        position: relative;
    }

    #launcher-frame {
        right: 5.6rem !important;
    }

    ul.dropdown-menu {
        transform: translate3d(0px, 36px, 0px) !important;
    }

    .ipad_int_columns {
        width: 6% !important;
    }

    .ipad_int_numbers {
        width: 94% !important;
    }

    angucompletehrm .angucomplete-holder input {
        margin: 1rem 0;
    }

    .ME_sticky_right.status {
        right: 71px;
    }

    .ipad_column_auto {
        width: auto !important;
    }

    .mt-xs-2 {
        margin-top: 5px !important;
    }

    .sticky_rota_header {
        position: relative;
        top: 0;
    }

    .sticky_header {
        position: relative !important;
        top: 0;
    }

    .sticky_row {
        position: relative;
        top: 0;
    }

    .ipad_footer_logo {
        width: 50% !important;
        text-align: left !important;
    }

    .ipad_footer_links {
        width: 50% !important;
        text-align: right !important;
    }

    .mx-height-leaves-accordion {
        max-height: 100%;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: landscape) {
    #launcher-frame {
        right: 4.6rem !important;
    }

    ul.dropdown-menu {
        transform: translate3d(0px, 36px, 0px) !important;
    }

    .container-sm {
        height: 90%;
    }

    .ipad_int_columns {
        width: 6% !important;
    }

    .ipad_int_numbers {
        width: 94% !important;
    }

    .modal-dialog.modal-lg, .modal-dialog.modal-xl {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0;
    }

    .mx-height-leaves-accordion {
        max-height: 100%;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: landscape) {
    ul.dropdown-menu {
        transform: translate3d(0px, 36px, 0px) !important;
    }

    .side_content {
        width: 80% !important;
    }

    .btn.btn-transparent {
        width: 50px !important;
        margin: 0;
    }

    angucompletehrm .angucomplete-holder input {
        margin: 1rem 0;
    }

    .ipad_footer_logo {
        width: 50% !important;
        text-align: left;
    }

    .ipad_footer_links {
        width: 50% !important;
        text-align: right;
    }

    .modal-dialog.modal-lg, .modal-dialog.modal-xl {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0;
    }

    .min-w-220 {
        min-width: 100%;
        max-width: 100%;
    }

    .sticky_rota_header {
        position: relative;
        top: 0;
    }

    .sticky_header {
        position: relative;
        top: 0;
    }

    .unchecked {
        top: 60px;
    }

    .sticky_row {
        position: relative;
        top: 0;
    }

    .checked {
        top: 60px !important;
    }
}

@media (-webkit-device-pixel-ratio: 1.25) {
    body {
        font-size: 12px;
    }

    input::placeholder, input.int_numbers::placeholder {
        color: #b5b5cf !important;
        font-size: 12px;
        font-weight: 500;
        opacity: 1 !important;
        text-transform: capitalize;
    }

    #launcher-frame {
        /*right: 14rem !important;*/
    }

    .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links {
        height: calc(100vh - 132px);
    }

    .dropdown .select-label, input[type=text], input[type=email], input[type=password], input[type=date], .week_range {
        font-size: 12px;
        padding: 6px;
    }

        .dropdown .select-label:after {
            top: 0;
        }

    .checkbox_container {
        height: 38px;
    }

    .modal-body.scrollbar-wrapper {
        max-height: 74vh;
    }

    .min-w-100 {
        min-width: 115px !important;
    }

    .min-w-220 {
        min-width: 180px;
    }

    .min-w-260 {
        min-width: 230px !important;
    }

    .min-w-300 {
        min-width: 140px !important;
        max-width: 160px !important;
    }

    .min-w-140 {
        min-width: 120px !important;
    }

    .btn {
        font-size: 12px;
        padding: 0.45rem 1rem;
    }

    .col-form-label {
        font-size: 12px;
        padding-top: calc(0.37rem + 1px);
        padding-bottom: calc(0.3rem + 1px);
    }

    label {
        font-size: 12px;
    }

    input[name="search"]::placeholder {
        font-size: 12px;
    }

    .placeholder_API::after {
        top: 38px;
        font-size: 12px;
    }

    .placeholder_eye_slash::after {
        top: 29px;
        font-size: 12px;
    }

    .placeholder::after {
        transform: translateY(50%);
    }

    .date-column .date-icon {
        top: 12px;
    }

    table thead tr th, table tbody tr td {
        font-size: 11px;
    }

    .btn-timer-rota, .btn-vertical-ellipsis {
        height: 35px;
        width: 35px;
    }

    .truncate-group {
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 35%;
    }

    input[type=text], input[type=email], input[type=password], input[type=date], input[type=tel] {
        padding: 7px;
    }

    input[name="search"] {
        padding: 7px 7px 7px 32px;
        background-position: 7px 5px;
    }

    .int_numbers {
        padding-left: 25px !important;
    }

    .mx-height-long {
        max-height: 75vh;
    }

    .mx-height-short {
        max-height: 66vh;
    }

    .mx-height-card-long {
        max-height: 71vh;
    }

    .mx-height-card-short {
        max-height: 62vh;
    }

    .mx-height-bulk {
        max-height: 44vh;
    }

    .mx-height-entity {
        max-height: 78vh;
    }

    .sticky_row {
        top: 144px;
    }

    .checked {
        top: 186px;
    }

    .unchecked {
        top: 148px;
    }

    .top-120 {
        top: 105px;
    }

    .text_truncate_schedule {
        max-width: 182px;
    }

    .upload-btn-wrapper .btn.btn-light-blue {
        padding: 0.4rem 0.5rem;
    }

    .week_range {
        font-size: 12px !important;
        /*padding: 0.3rem !important;*/
    }

    .media.form-control {
        padding: 1px 6px !important;
    }

    .template-container {
        padding: 2px 4px !important;
    }

    table tr td {
        font-size: 12px;
    }

    .ME_sticky_right.status {
        right: 67px;
    }

    .date_range {
        padding: 7px 9px;
    }

    .mx-height-reports {
        max-height: 59vh;
    }

    .mx-height-audit {
        max-height: 65vh !important;
    }

    .mx-height-alert {
        max-height: 52vh !important;
    }

    .break_column {
        height: 14px;
        margin: 10px 0;
    }

    .grey-box {
        padding: 7px 9px;
    }

    .truncate_dropdown {
        max-width: 53%;
    }

    .mx-height-leaves-accordion {
        max-height: 63vh;
    }

    .total_Hours {
        padding: 0.5rem 1rem;
    }

    .form-control-box {
        padding: 7px;
    }

    .bulk_management_height {
        max-height: 70vh;
    }

    .reports_sticky_left.e_code {
        left: 112px;
    }

    .dashboard_tabs_card {
        max-height: 246px;
    }
}

@media (-webkit-device-pixel-ratio: 1.5) {
    table.table_non_editable tr td, table.leave_table tr td {
        font-size: 10px;
    }

    .checkbox_group .leave_date {
        font-size: 12px;
    }

    .checkbox_group label {
        width: 26px;
        height: 26px;
    }

    table.table_non_editable tr td {
        font-size: 10px;
    }

    .time_block {
        float: none;
        display: block;
    }

    .international-num input {
        max-height: 35px;
    }

    .international-num input {
        padding: 10px 9px 9px 40px;
    }

    #launcher-frame {
        right: 14rem !important;
        top: 4px !important;
    }

    .basic_details {
        margin-top: -20px;
    }

    .border-tab.nav-tabs li .fa-chevron-right {
        font-size: 8px;
    }

    .container-sm {
        height: 81% !important;
    }

    .ME_sticky_right.status {
        right: 67px;
    }

    .select-label {
        display: flex;
        align-items: center;
    }

    .placeholder_API::after {
        top: 38px;
    }

    .placeholder_eye::after {
        top: 28px;
    }

    .datepicker table tr td, .datepicker table tr th {
        font-size: 11px !important;
    }

    .truncate-group {
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 35%;
    }

    .dropdown .select-label {
        font-size: 10px;
        text-indent: 0px;
        padding: 6px;
    }

    input::placeholder {
        font-size: 10px !important;
    }

    .min-w-100 {
        min-width: 70px !important;
    }

    .min-w-220 {
        min-width: 120px !important;
    }

    .min-w-260 {
        min-width: 230px !important;
    }

    .min-w-300 {
        min-width: 120px !important;
        max-width: 130px !important;
    }

    .min-w-140 {
        min-width: 110px !important;
    }

    .min-w-110 {
        min-width: 87px !important
    }

    .min-w-120 {
        min-width: 100px;
    }

    .max-w-140 {
        max-width: 140px;
    }

    .btn {
        font-size: 11px;
        padding: 0.45rem 0.5rem;
    }

    .dropdown .select-label:after {
        top: 0px;
        font-size: 11px;
    }

    .col-form-label {
        font-size: 10px !important;
    }

    .btn-timer, .btn-vertical-ellipsis, .btn-timer-rota {
        height: 35px;
        width: 35px;
    }

    .input-group > .form-control {
        font-size: 10px !important;
    }

    input[name="search"]::placeholder {
        font-size: 12px;
    }

    .int_numbers {
        padding-left: 25px !important;
    }

    .exception_view {
        top: 100px;
    }

    .btn.week-prev {
        padding: 0px 7px;
    }

    .btn.week-next {
        padding: 0px 7px;
    }

    .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links {
        height: calc(100vh - 150px);
    }

    .text_truncate_schedule {
        max-width: 108px;
    }

    .sticky_row {
        top: 148px;
    }

    .unchecked {
        top: 151px;
    }

    .top-120 {
        top: 105px;
    }

    .checked {
        top: 190px;
    }

    .upload-btn-wrapper .btn.btn-light-blue {
        padding: 0.57rem 0.5rem;
    }

    .modal-body.scrollbar-wrapper {
        max-height: 67vh;
    }

    .child-container span {
        font-size: 9px;
    }

    .date_range {
        padding: 7px 9px;
    }

        .date_range span {
            font-size: 10px;
        }

    /*.width_first {
        min-width: 115px !important;
    }

    .site_width {
        min-width: 93px !important;
    }

    .department_filter {
        min-width: 102px !important;
    }

    .position_filter {
        min-width: 100px !important;
    }

    .pay_type {
        min-width: 92px !important;
    }

    .date_filter {
        min-width: 80px !important;
    }

    .date_ranger_filter {
        width: 177px !important;
    }

    .order_by {
        width: 173px !important;
    }

    .termination_filter {
        min-width: 150px !important;
    }*/

    .mx-height-reports {
        max-height: 48vh !important;
    }

    .mx-height-alert {
        max-height: 40vh !important;
    }

    .mx-height-audit {
        max-height: 57vh !important;
    }

    .width_first .fa-thin.fa-columns-3 {
        margin-right: 2px;
    }

    .dashboard_cards {
        max-height: 370px;
    }

    .employee_card {
        max-height: 280px;
    }

    .week_range {
        padding: 8.5px !important;
    }

    .reports_sticky_left.e_code {
        left: 113px;
    }

    .mx-height-entity {
        max-height: 74vh;
    }

    .switch-sm .switch {
        margin-top: 5px;
    }

    .grey-box {
        padding: 7.5px 9px;
    }

    .dashboard_tabs_card {
        max-height: 248px;
    }

    .non_employee_card {
        max-height: 236px;
    }

    .select-label span.font-secondary {
        margin-right: 2px;
    }

    angucompletehrm .angucomplete-holder input {
        padding: 7px 9px 7px 32px;
    }

    .truncate_dropdown {
        max-width: 40%;
    }

    .mx-height-leaves-accordion {
        max-height: 76vh;
    }

    .nav.nav-pills .fa-location-dot, .nav.nav-pills .fa-building, .nav.nav-pills .fa-briefcase-blank {
        margin-right: 0.5rem;
    }

    input[name="search"] {
        background-size: 15px;
    }

    .total_Hours {
        padding: 0.5rem 1rem;
    }

    .badge {
        font-size: 0.65em;
    }

    .bulk_management_height {
        max-height: 62vh;
    }

    .blockquote p {
        font-size: 10px;
    }

    @-moz-document url-prefix() {
        .min-w-220 {
            min-width: 115px !important;
        }
    }
}

@media (-webkit-device-pixel-ratio: 2) {
    .resp_text_totals {
        font-size: 9px !important;
    }

    .child-container span {
        font-size: 9px;
    }

    .badge_text_totals {
        font-size: 9px !important;
        font-weight: 500;
    }

    helper-box {
        font-size: 10px !important;
    }

    .balance_border {
        font-size: 11px;
    }

    .dropdown .select-label {
        font-size: 9px;
    }

    .dropdown .select-label {
        font-size: 10px !important;
        padding: 7px 2px;
    }

    .col-form-label {
        font-size: 10px;
    }

    label {
        font-size: 11px;
    }

    .page-wrapper .page-header .header-wrapper .nav-right > ul > li {
        margin: 0 15px;
    }

    .checked {
        top: 199px;
    }
}


/*************************************************************PowerInsight CSS Start*************************************************************/
.widget-box {
    border: 1px solid #d7dbe3;
    border-radius: 5px;
    padding: 0.24rem;
    box-shadow: 0px 1px 2px 0px #12376914;
}

.icon-widget {
    border: 1px solid #d7dbe3;
    border-radius: 5px;
    padding: 0.55rem;
    justify-content: space-between;
    display: flex;
    gap: 15px;
    box-shadow: 0px 1px 2px 0px #12376914;
}

@media (-webkit-device-pixel-ratio: 1.25) {
    .widget-box {
        padding: 0.17rem 0.24rem;
    }

    .icon-widget {
        padding: 0.45rem 0.55rem;
    }
}

@media (-webkit-device-pixel-ratio: 1.5) {
    .widget-box {
        padding: 0.17rem 0.24rem;
    }

    .icon-widget {
        padding: 0.45rem 0.55rem;
    }
}

.widget-hover:hover {
    transform: translateY(-5px);
    transition: 0.5s;
}

.week_filter_pre {
    border-radius: 5px 0px 0px 5px;
    border: 1px solid #d7dbe3;
}

.week_filter_next {
    border-radius: 0px 5px 5px 0px;
    border: 1px solid #d7dbe3;
}

#week-filter-picker-wrapper .datepicker.datepicker-dropdown {
    margin-top: 0px;
}

.card.margin_bottom_last .card:last-child {
    /*margin-bottom: 0 !important;*/
}

.crypto-main-card {
    background-image: linear-gradient(to bottom right, #05a6f0, #66c0e9);
    color: #fff !important;
}

    .crypto-main-card p {
        color: #fff !important;
    }

.deposit-wrap p.border-bottom {
    line-height: 28px;
}


.badge-light-carousel {
    background-color: #e6f7ff;
    border: 1px solid #e6f7ff;
    color: #05a5ef;
}

@media (max-width: 1199px) {
    .crypto-main-card .card-body {
        padding: 20px;
    }
}

.crypto-main-card .btn {
    padding: 8px 20px;
}

.CUSTOM_HTH {
    height: 87px;
}

@media (-webkit-device-pixel-ratio: 1.25) {
    .CUSTOM_HTH {
        height: 88px;
    }
}

@media (-webkit-device-pixel-ratio: 1.5) {
    .CUSTOM_HTH {
        height: 86px;
    }
}

ul.menu-profitability {
    color: #000;
}

    ul.menu-profitability li.header {
        font-weight: 700;
        padding: 10px;
        background: #eceff1 !important;
        font-size: 14px;
    }

    ul.menu-profitability li {
        border-bottom: 1px solid #eceff1;
        padding: 10px;
        background: #fff;
        font-weight: normal;
        font-size: 12px;
        font-weight: 600;
    }

        ul.menu-profitability li span.dots {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            display: inline-block;
        }

        ul.menu-profitability li.header span.dots {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            display: inline-block;
        }


@media (max-width: 1660px) {
    .crypto-main-card .btn {
        padding: 8px 15px;
    }
}

.crypto-main-card .deposit-wrap > div {
    width: 65%;
}

@media (max-width: 1660px) {
    .crypto-main-card .deposit-wrap > div {
        width: 90%;
    }
}

@media (max-width: 1536px) {
    .crypto-main-card .deposit-wrap > div {
        width: 100%;
    }
}

@media (max-width: 1399px) {
    .crypto-main-card .deposit-wrap > div {
        width: 75%;
    }
}

@media (max-width: 1199px) {
    .crypto-main-card .deposit-wrap > div {
        width: 95%;
    }
}

@media (max-width: 1660px) {
    .crypto-main-card .deposit-wrap > div h5 {
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        display: -webkit-box;
    }
}

@media (max-width: 767px) {
    .crypto-main-card .deposit-wrap > div h5 {
        -webkit-line-clamp: 1;
    }
}

.crypto-main-card .deposit-wrap img {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 55%;
}

[dir=rtl] .crypto-main-card .deposit-wrap img {
    right: unset;
    left: 10px;
    transform: scaleX(-1);
}

@media (max-width: 1660px) {
    .crypto-main-card .deposit-wrap img {
        width: 44%;
    }
}

@media (max-width: 1399px) {
    .crypto-main-card .deposit-wrap img {
        width: 52%;
    }
}

@media (max-width: 1199px) {
    .crypto-main-card .deposit-wrap img {
        width: 30%;
    }
}

table tr.bg-light-purple.f-w-700 td {
    font-weight: 700;
}

.full-screen-height {
    max-height: 71vh;
}

.switch-md-print input:checked + .switch-state:before {
    left: 4px !important;
}

/*****************************************************Powerpulse css Start*****************************************************/
.powerpulse {
    border-radius: 10px;
    position: absolute;
    /*Change to move pulse*/
    top: 0px;
    right: 52px;
    /*End Change*/
    width: 8px;
    height: 8px;
    animation: powerpulse 0.85s ease-in-out infinite;
}

.powerpulse-text {
    text-transform: uppercase;
    font-size: 6px;
    font-weight: 700;
    margin-left: 4px;
    position: relative;
    top: -2px;
    color: #fff;
    border-radius: 3px;
    padding: 4px 0.7em;
    display: inline;
    white-space: nowrap;
    vertical-align: middle;
    background-color: #05a5ef;
    background-image: linear-gradient(to right, #05a5ef, #25adf0, #39b5f2, #4abcf3, #5ac4f4);
}
/* Style 1 - Outer pulsing with icon */
.powerpulse:before {
    content: '';
    display: block;
    background-color: #ea6565;
    border-radius: 20px;
    position: absolute;
    /*Change to align pulse*/
    top: 0px;
    right: 0px;
    /*End Change*/
    height: 12px;
    width: 12px;
    transform: scale(1);
    animation: pulse-fade 2s infinite;
}

/* Style 2 - Pulse with text element */
.powerpulse-text:before {
    content: '';
    display: block;
    background-color: #5AC4F4;
    border-radius: 20px;
    position: absolute;
    /*Change to align pulse*/
    top: -4px;
    right: -5px;
    /*End Change*/
    height: 10px;
    width: 10px;
    transform: scale(1);
    animation: pulse-fade 2s infinite;
}

@keyframes powerpulse {
    0% {
        transform: scale(0.9);
    }

    50% {
        transform: scale(1.0);
    }

    100% {
        transform: scale(0.9);
    }
}

/* Outer Pulsing */
@keyframes pulse-fade {
    0% {
        transform: scale(0.9);
        box-shadow: 0 0 0 0 rgb(5 165 239 / 70%);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgb(5 165 239 / 0%);
    }

    100% {
        transform: scale(0.9);
        box-shadow: 0 0 0 0 rgb(5 165 239 / 0%);
    }
}

.pulse {
    animation: pulse 5s infinite;
}

.input_hidden_click {
    width: 100%;
    box-sizing: border-box;
    border: none !important;
    border-radius: 6px;
    font-size: 12px;
    background-color: white;
    padding: 9px 15px;
    box-shadow: none !important;
    color: var(--chart-text-color);
    font-weight: 500;
    margin-bottom: 0 !important;
    cursor: pointer;
}

    .input_hidden_click:focus {
        width: 100%;
        box-sizing: border-box;
        border: 1px solid #d7dbe3;
        border-radius: 6px;
        font-size: 12px;
        background-color: white;
        box-shadow: 0px 1px 2px 0px #12376914;
        color: var(--chart-text-color);
        font-weight: 500;
        margin-bottom: 0;
        cursor: text;
    }

.sidebar_img {
    max-width: 100%;
    height: auto;
    border: 1px dashed #d7dbe3;
    border-radius: 3px;
    box-shadow: 0px 5px 18px rgba(46, 35, 94, 0.07);
    margin: 10px auto;
}

.close_icon:hover .sidebar_img {
    border-radius: 7px;
}

.close_icon:hover .sidebar_img {
    max-width: 215px;
}

li.custom_dashboard_image a .sidebar_components {
    display: none;
}

.close_icon:hover li.custom_dashboard_image a .sidebar_components {
    display: block;
}

.sidebar_img_view {
    max-width: 100%;
    height: auto;
    border: 1px dashed #d7dbe3;
    border-radius: 10px;
    box-shadow: 0px 5px 18px rgba(46, 35, 94, 0.07);
    margin: 10px auto;
}

.sidebar_components:hover {
    transform: scale(1.05);
    cursor: grab;
    border: 1px dashed #05a6f0;
    transition: ease-in-out 0.3s;
}

.custom_dashboard_image img {
    max-width: 25px;
    margin: 0;
}

.custom_dashboard_sidebar {
    text-align: center;
    padding: 12px 14px;
    transition: all 0.3s ease;
    margin-top: 250%;
}

.card-footer.card_footer_fixed {
    position: sticky;
    bottom: 3rem;
    width: 100%;
}

.print_gutter {
    --bs-gutter-x: 1.5rem !important;
}

.sticky_link {
    position: -webkit-sticky;
    position: sticky !important;
    top: 0px;
    z-index: 1020;
    background: #fff;
    width: 100%;
    border-bottom: 4px solid #fff !important;
}

.nav-mx-height {
    max-height: 44vh !important;
}

.min-width-200 {
    min-width: 200px;
}

@media (-webkit-device-pixel-ratio: 1.25) {
    .custom_dashboard_sidebar {
        margin-top: 200%;
    }
}

@media (-webkit-device-pixel-ratio: 1.5) {
    .custom_dashboard_sidebar {
        margin-top: 100%;
    }
}

.custom_dashboard_bottom a {
    text-align: center;
    padding: 12px 14px;
    transition: all 0.3s ease;
    position: absolute;
    bottom: 3.5rem;
    left: 22%;
}

.custom_dashboard_sidebar i, .custom_dashboard_bottom i {
    color: #05a6f0;
}

.close_icon:hover .custom_dashboard_sidebar, .close_icon:hover .custom_dashboard_bottom {
    display: none;
}

.sidebar_components {
    border: 1px solid #E2E8F0;
    border-radius: 5px;
    padding: 0.5rem;
    margin: 0.5rem;
}


@media (-webkit-device-pixel-ratio: 1.5) {
    #cssmenu > ul > li.has-sub > a:before {
        top: 7px;
    }

    #cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a, #cssmenu #head-mobile {
        line-height: 4.2;
    }

        #cssmenu > ul > li {
            margin: 0 0;
        }
}
/*****************************************************Powerpulse css End*****************************************************/
/*************************************************************Grid Height Start*************************************************************/
.daily_weekly_flash {
    max-height: 67vh;
}

.weekly_pandl_height {
    max-height: 55vh;
}

.height-60vh {
    max-height: 60vh;
}

@media (max-width: 1360px) {
    .height-60vh {
        max-height: 42vh;
    }
}

@media (max-width: 1366px) {
    .height-60vh {
        max-height: 70vh !important;
    }
}
/*************************************************************Grid Height End*************************************************************/

.carousel-caption {
    bottom: auto;
    right: 0;
    left: 0;
}

.carousel-inner {
    min-height: 225px;
}

.carousel-caption {
    padding-top: 0;
    padding-bottom: 0;
}

.carousel-indicators {
    margin-bottom: 0;
    margin-right: 0;
    margin-left: 0;
}

    .carousel-indicators [data-bs-target] {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #fff;
    }

.carousel-dark .carousel-indicators [data-bs-target] {
    background-color: #fff;
}

.badge-light-carousel {
    margin: 0.1rem;
}

.sticky-top-net {
    position: sticky;
    /*top: 1.7rem;*/
    z-index: 6;
}

.light-card {
    background-color: var(--light-background);
}

.balance-card {
    display: flex;
    padding: 15px;
    border-radius: 5px;
    gap: 5px;
    transition: 0.5s;
}

@media (max-width: 1199px) {
    .balance-card {
        gap: 8px;
    }
}

.balance-card .svg-box {
    width: 43px;
    height: 43px;
    background: #fff;
    box-shadow: 0px 71.2527px 51.5055px rgba(229, 229, 245, 0.189815), 0px 42.3445px 28.0125px rgba(229, 229, 245, 0.151852), 0px 21.9866px 14.2913px rgba(229, 229, 245, 0.125), 0px 8.95749px 7.16599px rgba(229, 229, 245, 0.0981481), 0px 2.03579px 3.46085px rgba(229, 229, 245, 0.0601852);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 1199px) {
    .balance-card .svg-box {
        width: 35px;
        height: 35px;
    }
}

.balance-card .svg-box svg {
    height: 20px;
    fill: rgba(82, 82, 108, 0.85);
}

@media (max-width: 1199px) {
    .balance-card .svg-box svg {
        height: 17px;
    }
}

.radial-progress-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

    .radial-progress-card .sale-details h5 {
        font-size: 18px;
    }

    .radial-progress-card.card-body {
        padding: 10px 20px;
    }

@media (max-width: 1199px) {
    .radial-progress-card.card-body {
        padding: 30px 20px;
    }
}

#chart_widget_Staff_Cost {
    /*max-width:200px;*/
}


.radial-progress-card p {
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    display: -webkit-box;
}

.radial-progress-card h6 {
    /*-webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  display: -webkit-box;*/
    display: block;
    white-space: nowrap;
    font-size: 14px;
}

.radial-progress-card .sale-details {
    margin: 10px 0;
}

    .radial-progress-card .sale-details svg {
        width: 15px;
        height: 15px;
        vertical-align: middle;
    }

.radial-progress-card .radial-chart-wrap {
    width: 110px;
    margin-right: -25px;
}

[dir=rtl] .radial-progress-card .radial-chart-wrap {
    margin-right: unset;
    margin-left: -25px;
}

@media (max-width: 1820px) {
    .radial-progress-card .radial-chart-wrap {
        margin-right: -12px;
    }

    [dir=rtl] .radial-progress-card .radial-chart-wrap {
        margin-left: -12px;
    }
}

.radial-progress-card .radial-chart-wrap .apexcharts-canvas .apexcharts-datalabel-label {
    display: none;
}

.user-list {
    column-count: 2;
    column-rule-style: dashed;
    column-rule-color: rgba(82, 82, 108, 0.7);
    column-gap: 20px;
    column-rule-width: 1px;
}

@media (max-width: 1780px) {
    .user-list {
        column-gap: 20px;
    }
}

@media (max-width: 1660px) {
    .user-list {
        column-gap: 0px;
    }
}

@media (max-width: 360px) {
    .user-list {
        column-gap: 25px;
    }
}

.user-list li {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

@media (max-width: 1540px) {
    .user-list li {
        gap: 5px;
    }
}

.user-list li i {
    font-size: 12px;
    font-weight: 700;
}

@media (max-width: 360px) {
    .user-list li h5 {
        font-size: 16px;
    }
}

@media (max-width: 360px) {
    .user-list li span {
        font-size: 13px;
    }
}

.user-list li:hover .user-box svg {
    animation: tada 1.5s ease infinite;
}

.user-list .user-icon {
    border-radius: 100%;
    display: inline-block;
}

    .user-list .user-icon .user-box {
        margin: 3px;
        width: 47px;
        height: 47px;
        border-radius: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

@media (max-width: 1540px) {
    .user-list .user-icon .user-box {
        width: 30px;
        height: 30px;
    }

        .user-list .user-icon .user-box svg {
            width: 18px;
            height: 18px;
        }
}

.user-list .user-icon.primary {
    border: 1px solid #7366FF;
}

    .user-list .user-icon.primary .user-box {
        background: #e8e6ff;
    }

.user-list .user-icon.success {
    border: 1px solid #54BA4A;
}

    .user-list .user-icon.success .user-box {
        background: #e0f2de;
    }

.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.sites-block {
    color: #000;
    text-align: left;
}

    .sites-block:first-child {
        margin-left: 0;
    }

    .sites-block span:first-child {
        margin-left: 1rem !important;
    }

    .sites-block i:hover {
        color: #FC4438;
        cursor: pointer;
    }

/**************************************Card Flip CSS Start**************************************/
.cardFront,
.cardBack {
    box-sizing: border-box;
    border-radius: 0.25rem;
    /*height: 100%;*/
    /*padding-left: 0.5rem;
  padding-right: 0.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);*/
    width: 100%;
    /*  transition: transform 0.9s ease;*/
    transition: transform 1s;
    position: absolute;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /*  background-color: #000;*/
}

.cardBack {
    transform: perspective(1000px) rotateY(180deg);
}

    .cardBack.flipped {
        transform: perspective(1000px) rotateY(0deg);
        position: relative;
    }

.cardFront {
    transform: perspective(1000px) rotateY(0deg);
    position: relative;
}

    .cardFront.flipped {
        transform: perspective(1000px) rotateY(-180deg);
        position: absolute;
    }

/**************************************Card Flip CSS End**************************************/

/**************************************Font Weight CSS Start**************************************/
.fw-100 {
    font-weight: 100 !important;
}

.fw-200 {
    font-weight: 200 !important;
}

.fw-300 {
    font-weight: 300 !important;
}

.fw-400 {
    font-weight: 400 !important;
}

.fw-500 {
    font-weight: 500 !important;
}

.fw-600 {
    font-weight: 600 !important;
}

.fw-700 {
    font-weight: 700 !important;
}

.fw-800 {
    font-weight: 800 !important;
}

.fw-900 {
    font-weight: 900 !important;
}

/**************************************Font Weight CSS End**************************************/

@media (-webkit-device-pixel-ratio: 1.25) {
    .daily_weekly_flash {
        max-height: 59vh;
    }

    .mx-height-payroll {
        max-height: 41vh;
    }

    .custom_dashboard_reports_height {
        max-height: 55vh;
    }
}

@media (-webkit-device-pixel-ratio: 1.5) {
    .daily_weekly_flash {
        max-height: 54vh;
    }

    .full-screen-height {
        max-height: 50vh !important;
    }

    .height-60vh {
        max-height: 48vh !important;
    }

    .sticky_pi_header h4 {
        font-size: 12px;
        margin-top: 5px;
    }

    h6.d-inline.f-14 {
        font-size: 12px !important;
    }

    .mx-height-payroll {
        max-height: 27vh;
    }

    .custom_dashboard_reports_height {
        max-height: 43vh;
    }
}



/****************************************Chatbox UI Start****************************************/
.chatbox-container {
    display: flex;
    justify-content: center;
    align-items: center;
    /*height: 87vh;*/
    min-height: calc(100vh - 120px);
}

    .chatbox-container::before {
        /*content: '';
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 1;
            background-image: url(../images/Power_Insight_Chatbox.png);
            background-size: 100%;
            background-position: top;
            background-repeat: no-repeat;
            opacity: 0.5;*/ /* Set your desired opacity */
    }

    .chatbox-container .card.chat_container {
        width: 100%;
        text-align: center;
        z-index: 3;
        /*background-image: url('../images/widget-bg.png');
        background-size: cover;*/
    }

.search_column {
    position: sticky;
    width: 100%;
    bottom: 2rem;
    background-color: transparent;
}

    .search_column h5, .search_column .chatbox_suggessions {
        /*display: none;*/
    }

.chatbox-container .card.chatbox_area {
    z-index: 3;
}

.chatbox-container .card h5, .chatbox-container .card .chatbox_suggessions button {
    margin-bottom: 1rem;
}

.chatbox_suggessions {
    /*display: flex;
    align-items: center;
    text-align: center;*/
}

    .chatbox_suggessions button {
        white-space: nowrap;
    }

    .chatbox_suggessions button {
        margin: 0 10px;
    }

        .chatbox_suggessions button:first-child {
            margin-left: 0;
        }

.chatbox_fixed_btn {
    position: absolute;
    right: 25px;
    top: 20%;
    bottom: 0px;
    width: auto !important;
    height: 40px;
    border-radius: 10px;
}

.chat-box .chat_box_up .chat .chat-msg-box .message p {
    color: inherit;
    font-size: inherit;
    display: block;
}

#particles-js {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: transparent;
    background-image: url("");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    z-index: 2;
}
/* ---- stats.js ---- */




@media only screen and (max-width: 767.98px) {
    .chatbox_suggessions {
        display: block;
    }
}

@media (-webkit-device-pixel-ratio: 1.25) {
    .chatbox_fixed_btn {
        /*top: 1px;*/
    }

    .search_column {
        bottom: 2.5rem;
    }
}


canvas .connecting-dots {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

.btn-pill {
    border-radius: 60px;
}

.btn-outline-light {
    color: #2d2d2d;
    border-color: #e3e3e3;
}


.chatbox_textarea {
    display: block;
    overflow-x: hidden;
    overflow-y: scroll;
    max-height: 400px;
    resize: none; /* prevent manual resizing */
    transition: height 0.2s ease;
    padding: 1.5rem 2rem 1.5rem 1.5rem;
    font-family: Montserrat;
    letter-spacing: 1px;
    border-radius: 15px;
    border: none;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}



.user_image {
    width: 30px !important;
    height: 30px !important;
    margin-left: 0.5rem !important;
    margin-right: 0px;
    border-radius: 50% !important;
    float: right;
}

.we_ai {
    width: 30px !important;
    height: 30px !important;
    margin-right: 0.5rem !important;
    margin-left: 0px;
    border-radius: 50% !important;
    float: left;
}


.chat-box .toogle-bar {
    display: none;
}

.chat-box .chat-menu {
    max-width: 340px;
}

.chat-box .people-list .search {
    position: relative;
}

    .chat-box .people-list .search .form-control {
        background-color: #fafdff;
        border: 1px solid #f4f4f4;
    }

        .chat-box .people-list .search .form-control::placeholder {
            color: #59667a;
        }

    .chat-box .people-list .search i {
        position: absolute;
        right: 10px;
        top: 17px;
        font-size: 14px;
        color: #ecf3fa;
    }

.chat-box .people-list ul {
    padding: 0;
}

    .chat-box .people-list ul li {
        padding-bottom: 20px;
    }

        .chat-box .people-list ul li:last-child {
            padding-bottom: 0;
        }

.chat-box .user-image {
    float: left;
    width: 52px;
    height: 52px;
    margin-right: 5px;
}

.chat-box .about {
    float: left;
    margin-top: 5px;
    padding-left: 10px;
}

    .chat-box .about .name {
        color: #2c323f;
        letter-spacing: 1px;
        font-weight: 500;
    }

.chat-box .status {
    color: #59667a;
    letter-spacing: 1px;
    font-size: 12px;
    margin-top: 5px;
}

    .chat-box .status .chat-status {
        font-weight: 600;
        color: #2F2F3B;
    }

    .chat-box .status p {
        font-size: 14px;
    }

.chat-box .chat_box_up .chat .chat-header {
    padding: 15px;
    border-bottom: 1px solid #f4f4f4;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .chat-box .chat_box_up .chat .chat-header img {
        float: left;
        width: 50px;
        height: 50px;
        box-shadow: 1px 1px 4px 1px #ecf3fa;
    }

    .chat-box .chat_box_up .chat .chat-header .chat-menu-icons li {
        margin-right: 24px;
    }

        .chat-box .chat_box_up .chat .chat-header .chat-menu-icons li a i {
            color: #52526c;
            font-size: 25px;
            cursor: pointer;
        }

    .chat-box .chat_box_up .chat .chat-header .chat-menu-icons {
        margin-left: auto;
    }

[dir=rtl] .chat-box .chat_box_up .chat .chat-header .chat-menu-icons {
    margin-right: auto;
    margin-left: unset;
}

.chat-box .chat_box_up .chat .chat-msg-box {
    padding: 20px;
    overflow-y: auto;
    min-height: 72vh;
    /*margin-bottom: 80px;*/
}

    .chat-box .chat_box_up .chat .chat-msg-box .chat-user-img {
        /*margin-top: -35px;*/
        margin-right: 5px;
    }

    .chat-box .chat_box_up .chat .chat-msg-box .message-data {
        margin-bottom: 10px;
    }

    .chat-box .chat_box_up .chat .chat-msg-box .message-data-time {
        letter-spacing: 1px;
        font-size: 12px;
        color: #59667a;
    }

    .chat-box .chat_box_up .chat .chat-msg-box .message {
        color: #2c323f;
        padding: 10px;
        line-height: 1.9;
        letter-spacing: 1px;
        font-size: 12px;
        margin-bottom: 20px;
        position: relative;
        text-align: left;
    }

    .chat-box .chat_box_up .chat .chat-msg-box .my-message {
        /*border-bottom: 1px solid #ebe6e6;*/
        width: 86%;
        padding: 5px;
        padding-bottom: 10px;
        /*box-shadow: 28px 18px 55px -22px rgb(41 35 69 / 9%);*/
        /*box-shadow: 28px 1px 24px -23px rgb(41 35 69 / 6%);*/
    }

    .chat-box .chat_box_up .chat .chat-msg-box .other-message {
        background-color: #ecf6fb;
        border-radius: 10px;
        border-top-right-radius: 0;
        /*text-align: right;*/
        width: auto;
        max-width: 70%;
    }

.chat-box .chat_box_up .chat .chat-message {
    padding: 20px;
    border-top: 1px solid #fafdff;
    position: absolute;
    width: calc(100% - 15px);
    background-color: #fff;
    bottom: 0;
}

.response {
    padding: 10px;
    /*padding-top: 0;*/
    border-radius: 10px;
    border-top-left-radius: 0;
    background: #f5f5f5;
    box-shadow: 20px 0px 70px rgb(140 136 159 / 7%);
    /*display: table;*/
    /*border: 1px solid #ebe6e6;*/
}

.chat-box .chat_box_up .chat .chat-message .smiley-box {
    background: #efefef;
    padding: 10px;
    display: block;
    border-radius: 4px;
    margin-right: 0.5rem;
}

.chat-box .chat_box_up .chat .chat-message .text-box {
    position: relative;
}

    .chat-box .chat_box_up .chat .chat-message .text-box .input-txt-bx {
        height: 50px;
        border: 2px solid var(--theme-deafult);
        padding-left: 18px;
        font-size: 12px;
        letter-spacing: 1px;
    }

    .chat-box .chat_box_up .chat .chat-message .text-box i {
        position: absolute;
        right: 20px;
        top: 20px;
        font-size: 20px;
        color: #ecf3fa;
        cursor: pointer;
    }

    .chat-box .chat_box_up .chat .chat-message .text-box .btn {
        font-size: 16px;
        font-weight: 500;
        padding: 0.74rem 1.75rem;
        border-radius: 0 5px 5px 0;
    }

.chat-box .chat-menu {
    border-left: 1px solid #f4f4f4;
}

    .chat-box .chat-menu .tab-pane {
        padding: 0 15px;
    }

    .chat-box .chat-menu ul li .about .status i {
        font-size: 10px;
    }

    .chat-box .chat-menu .user-profile {
        margin-top: 30px;
    }

        .chat-box .chat-menu .user-profile .user-content h5 {
            margin: 25px 0;
        }

        .chat-box .chat-menu .user-profile .user-content hr {
            margin: 25px 0;
        }

        .chat-box .chat-menu .user-profile .user-content p {
            font-size: 16px;
        }

        .chat-box .chat-menu .user-profile .border-tab.nav-tabs .nav-item .nav-link.active, .chat-box .chat-menu .user-profile .border-tab.nav-tabs .nav-item .nav-link.show, .chat-box .chat-menu .user-profile .border-tab.nav-tabs .nav-item .nav-link:focus {
            border-bottom: 0;
        }

        .chat-box .chat-menu .user-profile .image {
            position: relative;
        }

            .chat-box .chat-menu .user-profile .image .icon-wrapper {
                position: absolute;
                bottom: 0;
                left: 55%;
                display: flex;
                justify-content: center;
                align-items: center;
                height: 35px;
                width: 35px;
                border-radius: 50%;
                background-color: #fff;
                cursor: pointer;
                overflow: hidden;
                margin: 0 auto;
                font-size: 14px;
                box-shadow: 1px 1px 3px 1px #f4f4f4;
            }

            .chat-box .chat-menu .user-profile .image .avatar img {
                border-radius: 50%;
                border: 5px solid #f4f4f4;
            }

        .chat-box .chat-menu .user-profile .border-right {
            border-right: 1px solid #dee2e6;
        }

        .chat-box .chat-menu .user-profile .follow {
            margin-top: 0;
        }

            .chat-box .chat-menu .user-profile .follow .follow-num {
                font-size: 20px;
                color: #000;
            }

            .chat-box .chat-menu .user-profile .follow span {
                color: #242934;
                font-size: 14px;
                letter-spacing: 1px;
            }

        .chat-box .chat-menu .user-profile .social-media a {
            color: #59667a;
            font-size: 15px;
            padding: 0 7px;
        }

        .chat-box .chat-menu .user-profile .chat-profile-contact p {
            font-size: 14px;
            color: #59667a;
        }

    .chat-box .chat-menu .nav {
        margin-bottom: 20px;
    }

    .chat-box .chat-menu .nav-tabs .nav-item {
        width: 33.33%;
    }

        .chat-box .chat-menu .nav-tabs .nav-item a {
            padding: 15px !important;
            color: #59667a !important;
            letter-spacing: 1px;
            font-size: 14px;
            font-weight: 500;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .chat-box .chat-menu .nav-tabs .nav-item .material-border {
            border-width: 1px;
            border-color: var(--theme-deafult);
        }

        .chat-box .chat-menu .nav-tabs .nav-item .nav-link.active {
            color: #000 !important;
        }

.chat-box .chat-history .call-content {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 300px;
}

.chat-box .chat-history .total-time h2 {
    font-size: 50px;
    color: #efefef;
    font-weight: 600;
    margin-bottom: 30px;
}

.chat-box .chat-history .receiver-img {
    margin-top: 55px;
}

    .chat-box .chat-history .receiver-img img {
        border-radius: 5px;
    }

.chat-box .chat-history .call-icons {
    margin-bottom: 35px;
}

    .chat-box .chat-history .call-icons ul li {
        width: 60px;
        height: 60px;
        border: 1px solid #f4f4f4;
        border-radius: 50%;
        padding: 12px;
        cursor: pointer;
    }

        .chat-box .chat-history .call-icons ul li + li {
            margin-left: 10px;
        }

        .chat-box .chat-history .call-icons ul li a {
            color: #999;
            font-size: 25px;
        }

.chat-left-aside > .media {
    margin-bottom: 15px;
}

.chat-left-aside .people-list {
    height: 625px;
}

.chat-left-aside ul li {
    position: relative;
}

.status-circle {
    width: 12px;
    height: 12px;
    position: absolute;
    top: 4px;
    left: 44px;
    border-radius: 50%;
    border: 2px solid #fff;
}

.away {
    background-color: #FFAA05;
}

.online {
    background-color: #54BA4A;
}

.offline {
    background-color: #FC4438;
}

.chat-container .aside-chat-left {
    width: 320px;
}

.chat-container .chat_box_up {
    width: 320px;
}

.call-chat-sidebar {
    max-width: 320px;
}

    .call-chat-sidebar .card .card-body, .chat-body .card .card-body {
        padding: 15px;
    }

/****************************************Chatbox UI End****************************************/
.b-r-l-5 {
    border-top-left-radius: 6px;
}

.brainContainer {
    width: 50vw;
    height: 50vw;
    max-height: 300px;
    max-width: 300px;
    position: absolute;
    left: 50%;
    top: 71%;
    transform: translate(-50%, -155%);
    overflow: hidden;
    /*z-index: -1;*/
}

@media (-webkit-device-pixel-ratio: 1.25) {
    .brainContainer {
        width: 40vw;
        height: 40vw;
        max-height: 260px;
        max-width: 220px;
        top: 68%;
    }
}

@media (-webkit-device-pixel-ratio: 1.5) {
    .brainContainer {
        width: 40vw;
        height: 40vw;
        max-height: 175px;
        max-width: 200px;
        top: 54%;
    }
}

.brainContainer svg {
    height: 100%;
    width: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

.brainContainer path {
    fill: transparent;
}

.brainPath {
    stroke: #05a6f0;
    stroke-width: 1;
}

.brainCircle {
    stroke: #05a6f0;
    fill: #05a6f0;
}

.brainRect {
    stroke: #05a6f0;
    fill: #05a6f0;
}

.brainEllipse {
    stroke: #05a6f0;
    fill: #05a6f0;
}

.animatePaths {
    animation: goPath 6000ms alternate infinite;
}

.animateCircles {
    animation: goCircle 6000ms alternate infinite;
}

.animateRects {
    animation: goRect 6000ms alternate infinite;
}

@keyframes goPath {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes goRect {
    to {
        opacity: 0;
    }
}

@keyframes goCircle {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}
/*************************************************************PowerInsight CSS End*************************************************************/


/*******************************ARSALAN CASHUP CSS STARTS *************************************************************
**********************************************************************************/


.user_photo {
    height: 32px;
    width: 32px;
    border-radius: 50%;
}

.txt_title_md {
    color: #1E2432 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}

    .txt_title_md.success {
        color: #1DCA5D;
    }

.temp_cont {
    display: flex;
    color: #6B7C94;
    font-weight: 400;
    font-size: 14px;
    align-items: center;
    justify-content: center;
    text-align: center;
    vertical-align: central;
}


.txt_heading_sm {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1E2432 !important;
}

.txt_info {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #475569 !important;
}

.txt_heading_md {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1E2432 !important;
}

.txt_heading_exsm {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #1E2432 !important;
}

.txt_heading_lg {
    font-weight: 700;
    font-size: 20px;
    color: #000;
}

.apexcharts-canvas {
    margin: 0 auto;
}

.apexcharts-legend-marker {
    border-radius: 4px !important;
}

.apexcharts-tooltip span {
    display: inline;
}


.cashup_dashboard_wrapper {
    min-height: 205px;
    max-height: 205px;
}

.custom_total_css .apexcharts-datalabels-group {
    text-transform: uppercase;
    font-weight: 500;
    color: #94A3B8;
}

.custom_total_css .apexcharts-datalabel-value {
    text-transform: uppercase;
    font-weight: 700;
    color: #000000;
    font-family: 'Montserrat';
    font-size: 20px;
}

.delete_user_icon {
    background-color: #F34040;
    color: #FFFFFF;
}

.user_access a {
    cursor: pointer;
}

/*.card .card-body h5 {
    font-size: 12px;
    font-weight: 700;
    color: #1E2432;
}


.card .card-header h3 {
    font-size: 14px;
    font-weight: 700;
    color: #1E2432;
}*/


.breadcrumb-item .text-gray.active {
    color: #1E2432 !important;
}


.breadcrumb_container {
    background-color: #F7F9FB;
    border-radius: 8px !important;
    padding: 8px 16px;
}

.file_container {
    display: flex;
    align-items: center;
    background-color: #F7F9FB;
    border-radius: 8px !important;
    padding: 12px 16px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.file_name {
    display: block !important;
    color: #1E2432;
    margin-left: 15px;
}

.file_size {
    display: block !important;
    color: #6B7C94;
    margin-left: 15px;
    font-size: 12px;
}



.vertical_text_container {
    background-color: #f7f9fb;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    min-width: 4.5em;
}

.vertical_text {
    -moz-transform: rotate(-90.0deg); /* FF3.5+ */
    -o-transform: rotate(-90.0deg); /* Opera 10.5 */
    -webkit-transform: rotate(-90.0deg); /* Saf3.1+, Chrome */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
    margin-left: -10em;
    margin-right: -10em;
    font-weight: 700;
}

.bg_total_petty_cash {
    background-color: #F7F9FB;
    border-radius: 8px;
    padding: 8px;
    margin-bottom: 10px;
}


.reports-table-row > td:nth-child(2) {
    padding-left: 1rem;
}


.cashup_entry_header .border-tab.nav-tabs .nav-item .nav-link.active,
.cashup_entry_header .border-tab.nav-tabs .nav-item .nav-link.show,
.cashup_entry_header .border-tab.nav-tabs .nav-item .nav-link:focus {
    color: var(--theme-default);
}


    .cashup_entry_header .border-tab.nav-tabs .nav-item .nav-link.active i {
        color: var(--theme-default);
    }

.cashup_entry_header .border-tab.nav-tabs .nav-item .nav-link.completed,
.cashup_entry_header .border-tab.nav-tabs .nav-item .nav-link.completed i {
    color: #1DCA5D !important;
}

.completed {
    color: #1DCA5D !important;
}

.cashup_entry_header span {
    font-size: 12px !important;
}

.cashup_entry_header small {
    font-size: 10px;
}

.cashup_entry_header .entry-small-text {
    font-size: 10px;
    color: #6B7C94 !important;
}

    .cashup_entry_header .entry-small-text:hover {
        color: #6B7C94 !important;
    }


.cashup_entry_header .cashup_txt {
    color: #6B7C94 !important;
}

    .cashup_entry_header .cashup_txt.active {
        color: #05A6F0 !important;
    }

    .cashup_entry_header .cashup_txt.success {
        color: #1DCA5D !important;
    }

.sticky_bottom_navigator {
    position: fixed !important;
    bottom: 1.4rem;
    width: 100%;
    z-index: 7 !important;
    left: 0;
}

.cashup_entry_header {
    position: sticky !important;
    top: 3.7rem;
    z-index: 1001 !important;
    width: 100%;
}

.cashup_entry_header_details {
    position: sticky !important;
    top: 8.5rem;
    z-index: 1001 !important;
    background-color: #fff;
    border-bottom: 1px solid #d7dbe3;
}

.badge_cashup_info {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d7dbe3;
    border-radius: 6px;
    font-size: 12px;
    padding: 9px;
    box-shadow: 0px 1px 2px 0px #12376914;
    margin-bottom: 1rem;
    color: #1e2432;
}

.border-end {
    border-right: 1px solid #d3d3d3 !important;
}

.scrollbar-wrapper.cashup_wrapper {
    max-height: 600px;
}

.current_currency {
    height: 56px;
}

.modal_infoText {
    font-size: 14px;
    color: #475569;
    text-align: center;
}

.bg-gray {
    background-color: #f7f9fb !important;
}

.rotate-90 {
    transform: rotate(90deg);
}


table .breakfast_row {
    border: 1px solid #05A6F0 !important;
    border-bottom: none !important;
    border-right: none !important;
    background-color: #f5fbfe !important;
}

    table .breakfast_row:last-child {
        border-right: 1px solid #05A6F0 !important;
    }


table .lunch_row {
    border: 1px solid #37d170 !important;
    border-bottom: none !important;
    border-right: none !important;
    background-color: #eefff4 !important;
}

    table .lunch_row:last-child {
        border-right: 1px solid #37d170 !important;
    }

table .dinner_row {
    border: 1px solid #f6bb4f !important;
    border-bottom: none !important;
    border-right: none !important;
    background-color: #ffefd1 !important;
}

    table .dinner_row:last-child {
        border-right: 1px solid #f6bb4f !important;
    }



table .others_row {
    border: 1px solid #e2e8f0 !important;
    border-right: none !important;
    background-color: #f7f9fb !important;
}


    table .others_row:last-child {
        border-right: 1px solid #e2e8f0 !important;
    }

table tfoot tr td {
    font-weight: 600 !important;
}

.txt-gray {
    color: #E5EAF1 !important;
}

.txt-dark-gray {
    color: #94A3B8 !important;
}

.txt_underline {
    text-decoration: underline;
}

.btn.alert-light-primary.btn_download {
    font-size: 12px;
    font-weight: 500;
}


.max-w-220 {
    max-width: 220px;
}

table .border-top-1 {
    border-top: 1px solid #e2e8f0 !important;
}

.txt-gbp {
    margin-left: 5px;
    font-size: 12px;
    font-weight: 400;
    color: #6B7C94;
}


.cashup_report_tab {
    font-size: 14px;
    font-weight: 500;
    color: #6B7C94;
    padding: 12px;
}

    .cashup_report_tab.active {
        border: 1px solid #05A6F0;
        border-radius: 8px;
        background-color: #EFF7FB;
        color: #05A6F0;
    }


.mx-height-longCashup {
    max-height: 78vh;
}

.table-sticky-top {
    position: sticky;
    top: 0px;
    z-index: 7;
}

.table-sticky-bottom {
    position: sticky;
    bottom: -1px;
    z-index: 7;
}


.min-w-50per {
    min-width: 50%;
}

.min-w-40 {
    min-width: 40px;
}

.m-b-90 {
    margin-bottom: 90px;
}


.cashTableHeight {
    max-height: 60vh;
}

.dataTable {
    max-height: 71vh;
}

.intergrationAdmin {
    max-height: 58vh;
}

.accCreManTable {
    max-height: 63vh;
}

.depoManTable {
    max-height: 68vh;
}

.vouManTable {
    max-height: 68vh;
}

.cashTableStickyTop {
    position: sticky;
    top: 0px;
}

.cashTableStickyBottom {
    position: sticky;
    bottom: 0px;
}

.btn .fa-pen:hover {
    color: #05A6F0;
}

.cashup-badge-lg {
    border-radius: 8px;
    padding: 7px 16px;
    min-width: 175px;
    white-space: nowrap;
    text-align: center;
}

.badge-light-outline {
    background-color: #f7f9fb;
    border: 1px solid #E2E8F0;
    color: #6B7C94;
}

.popup-height {
    max-height: 62vh;
}

.border_bottom_last_hidden {
    border-bottom: 1px solid #E2E8F0;
}

    .border_bottom_last_hidden:last-child {
        border: none;
    }
/************************************************************
 ********************CASHUP RESPONSIVE CSS STARTS ***********
*************************************************************/
@media only screen and (min-device-width: 810px) and (max-device-width: 1080px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: landscape) {
    .tableHeightRegister {
        max-height: 71vh;
    }

    .table-sticky-top {
        top: -1px;
    }

    .table-sticky-bottom {
        bottom: -1px;
    }
}


@media screen and (max-width: 1024px) {
    .bg_total_petty_cash {
        display: none;
    }

    .sticky_bottom_navigator {
        position: static !important;
    }
}

@media only screen and (min-device-width: 810px) and (max-device-width: 1080px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: portrait) {
    .table-sticky-top {
        top: -1px;
    }

    .tableHeightRegister {
        max-height: 56vh;
    }
}


@media screen and (min-width: 320px) and (max-width: 1360px) {
    .resCashupHeader .dropdown .select-label,
    .resCashupHeader .dropdown li,
    .resCashupHeader .dropdown-item,
    .resCashupHeader input::placeholder,
    .resCashupHeader .badgeContainer,
    .resCashupHeader .badgeContainerSuggestion .badge,
    .resCashupTable table thead tr th,
    .resCashupTable table tbody tr td,
    .resCashupTable table tfoot tr td,
    .resCashupTable .dropdown .select-label,
    .resCashupTable .form-check-label,
    .resCashupTable input::placeholder,
    .resSites span,
    .resInputModal .file-area,
    .resInputModal .file_container,
    .resBreadCrumbModal .breadcrumb_container,
    .resTextAreaCashup textarea::placeholder,
    .resBadgeCashup .badge_cashup_info,
    .cashup_entry_miniheader .nav .nav-item .nav-link,
    .resCashupTabs .nav .nav-item .nav-link,
    .btn,
    .resTextSpan span, .resTextSpan i {
        font-size: 12px !important;
    }

    .resCashupTable table .saveBTn {
        padding-right: 12px;
        padding-left: 12px;
    }
}

@media screen and (max-width: 1399px) {
    .cashup_entry_header {
        top: 3.7rem !important;
    }
}

@media screen and (max-width: 1399px) and (min-width: 1024px) {
    .resCashupHeader .min-w-160 {
        min-width: 145px !important;
    }

    .resCashupHeader .min-w-140 {
        min-width: 120px;
    }
}

@media screen and (max-width: 1050px) and (min-width: 1024px) {
    .voucherManagementHeader.card-header {
        padding: 15px 15px;
    }
}

@media screen and (max-width: 1001px) {
    .cashup_entry_header {
        top: 2.9rem !important;
    }
}





/********************************************************
     ARSALAN RESPONSIVE 1.25 and 1.5 CSS STARTS
*********************************************************/
@media (-webkit-device-pixel-ratio: 1.25) {
    .mx-height-longCashup {
        max-height: 73vh !important;
    }

    .dataTable {
        max-height: 63vh;
    }

    .vouManTable {
        max-height: 63vh;
    }
}



@media (-webkit-device-pixel-ratio: 1.5) {
    .mx-height-longCashup {
        max-height: 65vh;
    }

    .form-control-box {
        padding: 7px;
    }

    .dataTable {
        max-height: 54vh;
    }

    .vouManTable {
        max-height: 54vh;
    }
}

/********************************************************
       ARSALAN RESPONSIVE 1.25 and 1.5 CSS ENDS
*********************************************************/



@media only screen and (min-device-width: 1400px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: landscape) {
    mx-height-longCashup {
        max-height: 70vh;
    }

    .m-b-90 {
        margin-bottom: 85px;
    }

    .cashTableHeight {
        max-height: 55vh;
    }

    .table-sticky-bottom {
        bottom: -1px;
    }
}

@media only screen and (min-device-width: 1200px) and (max-device-width: 1400px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: landscape) {
    .mx-height-longCashup {
        max-height: 63.5vh;
    }

    .m-b-90 {
        margin-bottom: 90px;
    }

    .table-sticky-bottom {
        bottom: -2px;
    }

    .cashTableHeight {
        max-height: 47vh;
    }

    .cashTableStickyBottom {
        position: sticky;
        bottom: -1px;
    }
}


/************************************************************
 ********************CASHUP RESPONSIVE CSS ENDS ***********
*************************************************************/


/*******************************ARSALAN CASHUP CSS ENDS *************************************************************
**********************************************************************************/








/************************************ MUSA CASHUP CSS STARTS ***********************************/

.download-template {
    text-align: left;
    background-color: #F0F8FF;
    border: 1px solid #3B80F21A;
    font-size: 12px;
    font-weight: 500;
    color: var(--theme-default) !important;
}

table input, table tbody tr td ul {
    margin-bottom: 0 !important;
}

.textarea-bg {
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 6px;
}

    .textarea-bg .comment-elements span {
        margin: 3px;
    }


    .textarea-bg .comment-pen-icon {
        display: none;
        cursor: pointer;
    }

    .textarea-bg:hover {
        background-color: #F7F9FB;
    }

        .textarea-bg:hover .comment-pen-icon {
            display: inline;
        }

    .textarea-bg textarea:disabled {
        font-size: 12px;
        resize: none;
        width: 100%;
        height: auto;
        border: none !important;
        box-shadow: none !important;
        background-color: transparent !important;
    }

    .textarea-bg textarea {
        font-size: 12px;
        color: #1E2432;
    }

.m-l-6 {
    margin-left: 6px;
}

.reports-comments {
    margin-top: 10px;
    margin-bottom: 10px;
}


    .reports-comments p {
        font-size: 12px;
        font-weight: 400;
        color: #1E2432;
    }


.comments-header {
    background-color: red;
    display: flex;
    justify-content: space-around
}

.comment-title {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: #1E2432;
    margin-top: 5px;
    margin-bottom: 5px;
}

.modal-label {
    font-size: 14px;
    font-weight: 400;
    color: #475569;
}

.dashboard-pdf {
    color: #05A6F0;
    cursor: pointer;
}

    .dashboard-pdf:hover {
        text-decoration: underline;
    }

#date {
    width: 100%;
    outline: none;
    border: 1px solid #aaa;
    padding: 6px 28px;
    color: #aaa;
}

.date-column .date-text {
    position: absolute;
    top: 6px;
    left: 12px;
    color: #aaa;
}

/*My Unique Tooltip CSS*/


.bottom_container {
    background: #fff;
    padding: 20px;
    position: relative;
    bottom: 0rem;
    width: 100%;
    z-index: 6;
}

.alert-sm {
    padding: 8px 15px !important;
    border-radius: 6px;
}


.tooltip-container {
    position: relative;
    display: inline-block;
    width: 100%;
}

.big-tooltip {
    display: none;
    position: absolute;
    top: 30px;
    width: 100%;
    max-width: 600px;
    max-height: 420px;
    overflow-x: auto;
    overflow-y: auto;
    padding: 5px;
    border-radius: 10px;
    z-index: 1000;
    /*min-width: 600px;*/
}

.min-w-60 {
    min-width: 60px;
}

.show-tooltip .big-tooltip {
    display: block;
}

/* Musa's Responsiveness*/
@media screen and (max-width: 1024px) {
    .textarea-bg .empty-coloumn {
        display: none;
    }
}

@media (min-width: 1024px) {
    .big-tooltip {
        min-width: 500px;
    }
}

@media (min-width: 1124px) {
    .big-tooltip {
        min-width: 550px;
    }
}

@media (min-width: 1224px) {
    .big-tooltip {
        min-width: 600px;
    }
}

.view_default {
    color: #05A6F0;
    font-size: 11px;
    font-weight: 600;
}

.UserManagementTable {
    max-height: 62vh;
    min-height: 62vh;
}


.percent-circle {
    color: #000000 !important;
    border: 1px solid #53AE1A;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px !important;
    font-weight: 500;
    background-color: #F5FBFE;
    border-radius: 50%;
    height: 28px;
    width: 28px;
    text-align: center;
    float: right;
    cursor: pointer;
    margin-top: -5px;
}

    .percent-circle .tooltip {
        text-align: left !important;
    }


.card-quantity {
    font-size: 12px;
    font-weight: 300;
    color: #000000;
}

/*General card types badge with toggle button */
.switch-sm .switch.cashup-admin {
    width: 40px;
    height: 16px;
    margin-top: -3px;
    margin-bottom: 0px;
}

.tags-editable i, .tags-editable .media-body {
    display: none;
    color: #6B7C94;
    z-index: 10;
    margin-top: 6px;
}


    .tags-editable .media-body.switch-sm {
        display: inline-block;
        float: right !important;
        transition: 0.5s;
        max-width: 25px;
    }

.tags-editable .switch-state.cashup {
    max-width: 60%;
}



/*Area partition badges css*/
.tags-editable.cashup-area {
    background-color: #F7F9FB;
    padding: 10px;
    border-radius: 6px;
    color: #1E2432;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

    .tags-editable.cashup-area:hover {
        background-color: #E2E8F0;
        transition: 0.5s;
    }

        .tags-editable.cashup-area:hover .admin-area {
            padding-left: 10px;
        }

        .tags-editable.cashup-area:hover .admin-capacity {
            padding-right: 10px;
        }

    .tags-editable.cashup-area i {
        margin-top: 2px;
    }

    .tags-editable.cashup-area .admin-area {
        flex: 8;
        text-align: left;
        margin-right: 35px;
    }

    .tags-editable.cashup-area .admin-capacity {
        flex: 2;
        text-align: right;
        border-left: 1px solid #E2E8F0;
        /*padding-left: 10px;*/
    }

.cashup-entry-body {
    margin-bottom: 80px;
}

.cahup-modal-text {
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    margin-top: 1rem;
}

.area-save-button {
    box-sizing: border-box;
    border: 1px solid #d7dbe3;
    border-radius: 6px;
    background-color: white;
    padding: 5px 8px;
    box-shadow: 0px 1px 2px 0px #12376914;
    width: 100%;
    margin-top: 18px;
}

.max-w-45 {
    max-width: 45px;
}

.unique-dropdown-list {
    cursor: pointer;
}

.sort-icon:hover {
    color: var(--theme-default) !important;
}

@media (-webkit-device-pixel-ratio: 1.25) {
    .placeholder_pound input {
        padding-left: 1.75rem !important;
    }

    .badge_cashup_info {
        padding: 7px;
    }
}

@media (-webkit-device-pixel-ratio: 1.5) {
    .placeholder_pound input {
        padding-left: 1.75rem !important;
    }
}

ul.unique-dropdown-list li {
    color: #666D80 !important;
}

.upload_box {
    background-color: #f7f9fb;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    margin-bottom: 0.25rem;
}

    .upload_box:last-child {
        margin-bottom: 0;
    }
/************************************ MUSA CASHUP CSS ENDS ********************************** */
.min-w-180 {
    min-width: 180px;
}


.min-w-160 {
    min-width: 160px;
}


/***************************************/
/*Power Insight CSS Starts*/
/***************************************/

.max-w-40 {
    max-width: 40px;
}

.day-checkbox {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid #ccc;
    text-align: center;
    line-height: 36px;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
}

    .day-checkbox input {
        display: none;
    }

        .day-checkbox input:checked + span {
            background-color: #00b8f0;
            color: white;
            border-radius: 50%;
            display: inline-block;
            width: 100%;
            height: 100%;
            line-height: 36px;
            font-weight: 600;
            box-shadow: 0 0 5px rgba(0, 184, 240, 0.4);
        }

    .day-checkbox span {
        display: inline-block;
        width: 100%;
        height: 100%;
    }


/***************************************/
/* TimePicker CSS Start */
/***************************************/
.time-picker-wrapper {
    position: relative;
}

/*  Unique class instead of "dropdown" */
.time-box {
    display: none;
    position: absolute;
    top: 38px;
    left: 0;
    width: 100%;
    background: #fff;
    border: 1px solid #d1d9e6;
    border-radius: 5px;
    box-shadow: 0px 4px 12px rgba(0,0,0,0.1);
    padding: 10px;
    max-height: 220px;
    overflow-y: auto;
    z-index: 10;
}

/* Grid layout */
.time-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.time-option {
    padding: 0px;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: 0.2s;
    border: 1px solid #ededed;
}

    .time-option:hover {
        background: #e8f3ff;
        color: #007bff;
    }

/***************************************/
/* TimePicker CSS End */
/***************************************/

/***************************************/
/*Power Insight CSS Starts*/
/***************************************/


/***************************************/
/* APPROVAL CHAIN CSS STARTS*/
/***************************************/
.billing-container .blue-header {
    background-color: var(--theme-default) !important;
}

    .billing-container .blue-header::placeholder {
        color: #ffffff !important;
    }

.billing-container .green-header {
    background-color: #54BA4A !important;
}

    .billing-container .green-header::placeholder {
        color: #ffffff !important;
    }

.billing-container .blue-header::placeholder {
    color: #ffffff !important;
}

.billing-container .billing-box {
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #E2E8F0;
    border-radius: 5px
}

.billing-container .list-container {
    margin-top: 15px;
    margin-bottom: 15px;
}

    .billing-container .list-container h5 {
        color: #6B7C94 !important;
    }

.collapse-button {
    cursor: pointer;
}

.name-list {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.approve-name {
    font-size: 12px;
    margin: 0;
    font-weight: 600;
    color: var(--theme-default);
}

.approver_text {
    color: #888;
    font-size: 10px;
    color: #6c757d;
    display: block;
}

.approval_condition {
    font-size: 12px !important;
}

.modal-box {
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #E2E8F0;
    border-radius: 5px
}

.list_of_names {
    margin-top: 10px;
}

    .list_of_names.collapsed {
        display: none;
    }

.scrollbar-wrapper.approve {
    min-height: 700px;
}

.cashup-badge-lg.approve {
    border-radius: 8px;
    padding: 3px 10px;
    min-width: 125px;
    white-space: nowrap;
}

.mx-height-request {
    max-height: 66vh;
}

.po_details {
    color: var(--theme-default);
    font-weight: 700;
    display: block;
    word-break: break-word;
}

.po_supplier {
    font-size: 0.75rem;
    font-weight: 700;
    color: #6c757d;
    display: block;
}

.workflow_height {
    min-height: 350px;
}

.sticky_header_tabs {
    position: sticky !important;
    top: 60px;
    z-index: 1020;
    background-color: #fff;
}

.sticky_card {
    position: sticky;
    top: 100px;
    z-index: 1019;
}


.detailed_card {
    box-shadow: 0px 12px 26px rgb(238 238 238 / 95%);
    -webkit-box-shadow: 0px 6px 20px rgb(238 238 238 / 95%);
    height: 60px;
    margin-bottom: 10px;
    background: #fff;
}

    .detailed_card .card-body {
        height: 100%;
        padding: 10px;
    }

        .detailed_card .card-body:hover {
            background-image: linear-gradient(to top, #ededed, #f1f1f1, #f3f3f3, #f9f9f9, #ffffff);
            cursor: pointer;
        }

    .detailed_card.active .card-body {
        border: 1px dashed #0888c3;
        background-image: linear-gradient(to top, #ebf8ff, #f2f9ff, #f8fbff, #fcfdff, #ffffff);
        border-radius: 3px;
    }

.side_card:hover {
    border-top: 3px solid #a2d7ff !important;
    cursor: pointer;
}

.side_card.active {
    border-top: 3px solid #a2d7ff !important;
}

.approval_workflow_header {
    background-color: #fff;
    border: 1px solid var(--theme-default);
    border-radius: 3px;
    padding: 5px;
    text-align: center;
    color: var(--theme-default);
    font-weight: 700;
}

.sticky-top-row {
    position: sticky;
    top: 0px;
    z-index: 3;
    background: #fff;
    width: 100%;
}

.sticky-bottom-row {
    position: sticky;
    bottom: 0px;
    z-index: 3;
    background: #fff;
    width: 100%;
}

.p2p_left {
    max-height: 72vh;
}

.toggle-div {
    display: none;
    transition: max-height 0.5s ease-out, padding 0.5s ease-out;
}

ol {
    padding-left: 1rem;
}

    ol.list-group-ordered li.list-group-item {
        display: list-item;
    }

        ol.list-group-ordered li.list-group-item::marker {
            font-weight: 700;
        }

.order_list_icon {
    border: 1px solid black;
    border-collapse: collapse;
    cursor: all-scroll;
}

#draggable tr td i.fa-light.fa-trash-alt {
    position: relative;
    z-index: 999;
    cursor: pointer;
}

.invoice_points {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.txt-light-success {
    color: #9cf593;
}

.txt-light-grey {
    color: var(--balance-profie-bg);
}

@media screen and (max-width:1000px) {
    .sticky_header_tabs {
        z-index: 7;
    }

    .sticky_card {
        z-index: 7;
    }

    .sticky_header_tabs {
        top: 47px;
        border-radius: 0 !important;
    }
}

@media (-webkit-device-pixel-ratio: 1.25) {
    .mx-height-request {
        max-height: 57vh;
    }

    .p2p_left {
        max-height: 63vh;
    }
}

@media (-webkit-device-pixel-ratio: 1.5) {
    .mx-height-request {
        max-height: 48vh;
    }

    #cssmenu > ul > li > a {
        padding: 8px 10px;
        font-size: 10px;
    }
}

.card .card-body h5 {
    font-size: 12px;
    font-weight: 700;
    color: rgb(30, 36, 50);
}

.dropdown-menu.approve {
    min-width: 260px;
    padding: 1rem;
}

.full_screen_popup {
    max-height: 82vh;
    min-height: 82vh;
}

.approval-chain-container {
    min-height: 72vh;
}

.approval_workflow {
    min-height: 69vh;
}
/***************************************/
/* APPROVAL CHAIN CSS ENDS*/
/***************************************/

.daily_cash_reports_table {
    max-height: 48vh;
}

.reports_table {
    max-height: 64vh;
}

.account_reports_table {
    max-height: 61vh;
}

@media (-webkit-device-pixel-ratio: 1.25) {
    .reports_table {
        max-height: 55vh;
    }

    .account_reports_table {
        max-height: 50vh;
    }

    .accCreManTable {
        max-height: 57vh;
    }

    .depoManTable {
        max-height: 63vh;
    }

    .full_screen_popup {
        max-height: 77vh;
    }

    .approval-chain-container {
        min-height: 65vh;
    }

    .approval_workflow {
        min-height: 60vh;
    }
}

@media (-webkit-device-pixel-ratio: 1.5) {
    .reports_table {
        max-height: 41vh;
    }

    .account_reports_table {
        max-height: 37vh;
    }

    .depoManTable {
        max-height: 54vh;
    }

    .accCreManTable {
        max-height: 46vh;
    }

    .full_screen_popup {
        max-height: 69vh;
    }

    .approval-chain-container {
        min-height: 56vh;
    }

    .approval_workflow {
        min-height: 50vh;
    }
}

/***************************************/
/* PAYMENT LIST CSS STARTS*/
/***************************************/

.description-block {
    display: block;
    margin: 10px 0;
    text-align: center;
}

.form-check.inner-row {
    padding-left: 3rem;
}

.form-check.locked-row {
    padding-left: 2rem;
}

.widget-1 {
    background-image: url('../images/widget-bg.png');
    background-size: cover;
    margin-bottom: 25px;
}

    .widget-1 .card-body {
        align-items: flex-end;
        display: flex;
        justify-content: space-between;
        padding: 18px 25px;
    }

    .widget-1:hover {
        transform: translateY(-5px);
        transition: .5s;
    }

    .widget-1 .widget-round .bg-round:hover {
        transform: translateY(-2px);
        transition: .5s;
    }


    .widget-1 .widget-content {
        align-items: center;
        display: flex;
        gap: 18px;
    }

        .widget-1 .widget-content .moving-icon {
            transition: transform 0.9s;
        }

            .widget-1 .widget-content .moving-icon:hover {
                animation: movingRotate 0.6s ease-in-out;
                /*animation-iteration-count: 3;*/
                /*animation-fill-mode: forwards;*/
            }

    .widget-1 .widget-round.secondary {
        border-color: var(--theme-secondary);
    }

    .widget-1 .widget-round .bg-round {
        align-items: center;
        border-radius: 100%;
        box-shadow: 1px 2px 21px -2px rgba(214, 214, 227, .83);
        display: flex;
        height: 48px;
        justify-content: center;
        margin: 6px;
        position: relative;
        width: 48px;
        z-index: 1;
    }

        .widget-1 .widget-round .bg-round .half-circle {
            background: #fff;
            bottom: -8px;
            height: 52px;
            left: -9px;
            position: absolute;
            width: 35px;
            z-index: -1;
        }

.f-light {
    color: #52526c;
    opacity: .8;
    font-size: 12px;
}

.widget-content .counter {
    font-size: 16px;
}

.tall-quote {
    height: 100px;
    overflow-y: auto;
}

.mx-height-payment {
    max-height: 58vh !important;
}

.thead_fixed {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 2;
}

.show-records {
    min-width: 120px;
    max-width: 120px;
}

.payment_attachment {
    transition: all 0.3s ease;
}

    .payment_attachment:hover {
        background-color: #007bff1a !important;
        color: var(--theme-default) !important;
        box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2);
    }

    .payment_attachment:active {
        transform: scale(0.97);
        box-shadow: 0 1px 4px rgba(0, 123, 255, 0.3);
    }


.timeline-card {
    /*margin-left: 60px;*/
    padding-left: 110px;
}

.vertical-timeline {
    width: 100%;
    position: relative;
    padding: 1.5rem 0 1rem;
}

    .vertical-timeline::before {
        content: '';
        position: absolute;
        top: 0;
        left: 67px;
        height: 100%;
        width: 4px;
        background: #e9ecef;
        border-radius: .25rem;
    }

.vertical-timeline-element {
    position: relative;
    margin: 0 0 1rem;
}

.vertical-timeline--animate .vertical-timeline-element-icon.bounce-in {
    visibility: visible;
    animation: cd-bounce-1 .8s;
}

.vertical-timeline-element-icon {
    position: absolute;
    top: 0;
    left: 60px;
}

    .vertical-timeline-element-icon .badge-dot-xl {
        box-shadow: 0 0 0 5px #fff;
    }

.badge-dot-xl {
    min-width: 20px;
    height: 18px;
    position: relative;
}

.vertical-timeline-element-content .badge-light-success {
    transition: transform 0.3s ease-in-out;
}

.vertical-timeline-element-content .badge-light-warning {
    transition: transform 0.3s ease-in-out;
}

.vertical-timeline-element-icon:hover ~ .vertical-timeline-element-content
.badge-light-success {
    transform: scale(1.1);
    /*transform: rotate(10deg);*/
    /*transform: translateX(10px);*/
    /*background-color: #28a745;*/
    box-shadow: 0 0 10px #EEFFF4;
}

.vertical-timeline-element-icon:hover ~ .vertical-timeline-element-content
.badge-light-warning {
    transform: scale(1.1);
    /*transform: rotate(10deg);*/
    /*transform: translateX(10px);*/
    /*background-color: #28a745;*/
    box-shadow: 0 0 10px #FFF7DE;
}

.badge:empty {
    display: block;
}

.badge-dot-xl::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: .25rem;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -5px 0 0 -5px;
    background: #fff;
}

.vertical-timeline-element-content {
    position: relative;
    margin-left: 90px;
    font-size: .8rem;
}

    .vertical-timeline-element-content .timeline-title {
        font-size: .8rem;
        text-transform: uppercase;
        margin: 0 0 .5rem;
        padding: 8px 0 0;
        font-weight: bold;
    }

    .vertical-timeline-element-content .vertical-timeline-element-date {
        display: block;
        position: absolute;
        left: -118px;
        top: 0;
        padding-right: 10px;
        text-align: right;
        color: #adb5bd;
        font-size: .7619rem;
        white-space: nowrap;
    }

        .vertical-timeline-element-content .vertical-timeline-element-date.second {
            left: -175px;
            top: 20px;
            width: 140px;
            max-width: 140px;
            text-wrap: wrap;
        }

        .vertical-timeline-element-content .vertical-timeline-element-date.third {
            left: -86px;
            top: 40px;
        }

    .vertical-timeline-element-content:after {
        content: "";
        display: table;
        clear: both;
    }

/*TimeLine CSS Ends*/
/*Payment Invoice Css*/
.add_new_approver {
    background: transparent;
    padding: 10px 15px;
    border-radius: 0.5rem;
}

    .add_new_approver:hover {
        background-color: #05a6f0;
        padding: 10px 15px;
        border-radius: 0.5rem;
        cursor: pointer;
    }

        .add_new_approver:hover i {
            color: white !important;
        }

.remove_new_approver {
    background: transparent;
    padding: 10px 15px;
    border-radius: 0.5rem;
}

    .remove_new_approver:hover {
        background-color: #F34040 !important;
        padding: 10px 15px;
        border-radius: 0.5rem;
        cursor: pointer;
    }

        .remove_new_approver:hover i {
            color: white !important;
        }

.modal .modal-body .payment_approver_card {
    box-shadow: 0px 9px 20px rgba(46, 35, 94, 0.07) !important;
}

.approve_otp_container {
    display: flex;
    align-items: center;
    grid-gap: 6px;
}
/***************************************/
/* PAYMENT LIST CSS ENDS*/
/***************************************/
/***************************************/
/* PAYMENT LIST RESPONSIVE CSS STARTS*/
/***************************************/
@media (max-width: 1024px) {
    .schedule_payment_card .payment-amount {
        width: auto !important;
    }

    .empty-labels {
        display: none !important;
    }
}

@media (max-width: 500px) {
    .payment-plus {
        width: 100% !important;
    }
}

/***************************************/
/* PAYMENT LIST RESPONSIVE ENDS*/
/***************************************/




/***************************************/
/* API DOCUMENTATION CSS STARTS */
/***************************************/

.scrollbar-wrapper.doc-unique-container {
    max-height: 90vh;
}

/* MAIN WRAPPER */
.api_doc_wrapper {
    max-height: 88vh;
    /*height: 100vh;*/
    overflow: hidden;
    background-color: #ffffff;
}

    /* BOOTSTRAP ROW SAFETY (PREVENT EXTRA SCROLL) */
    .api_doc_wrapper .row {
        margin-left: 0;
        margin-right: 0;
    }

/* ========================= */
/* SIDE PANELS (LEFT & RIGHT) */
/* ========================= */
.api_doc_side_panel {
    position: sticky;
    top: 0;
    /*height: 90vh;*/
    max-height: 80vh;
    overflow-y: auto;
    padding: 15px;
    border-right: 1px solid #e5e7eb;
    margin-top: 20px;
    margin-bottom: 50px;
}

.doc-unique-container div.api_doc_right_content {
    border-bottom: 2px solid #e5e7eb;
    margin: 20px 0;
    padding-top: 50px;
}

/* ================= */
/* MIDDLE CONTENT */
/* ================= */
/*.api_doc_right_content {
    height: 85vh;
    max-height: 85vh;
    overflow-y: auto;
    padding: 30px;
    margin-top: 20px;
    margin-bottom: 50px;
}*/
/* SECTION */
.api_doc_section {
    margin-bottom: 15px;
}

/* SECTION HEADER */
.api_doc_section_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 10px;
    cursor: pointer;
    color: #111827;
}

    .api_doc_section_header:hover {
        background-color: #f9fafb;
    }

    /* RIGHT SIDE HEADER */
    .api_doc_section_header.right_side {
        color: #05a6f0;
    }

        .api_doc_section_header.right_side:hover {
            text-decoration: underline;
        }

/* TOGGLE ICON */
.api_doc_toggle_icon {
    transition: transform 0.25s ease;
}

/* ROTATE ICON */
.api_doc_section.collapsed .api_doc_toggle_icon {
    transform: rotate(-90deg);
}

/* MENU */
.api_doc_menu {
    list-style: none;
    padding-left: 0;
    margin: 5px 0 0 0;
    display: block;
}

    .api_doc_menu li {
        font-size: 14px;
        padding: 7px 12px;
        cursor: pointer;
        color: #374151;
        border-left: 3px solid transparent;
    }

        .api_doc_menu li:hover {
            color: #05a6f0;
        }

        .api_doc_menu li.active {
            color: #05a6f0;
            font-weight: 500;
            border-left: 3px solid #05a6f0;
            background-color: #e9f8ff;
        }

/* SINGLE SECTION ACTIVE */
.api_doc_section_single .api_doc_section_header.active {
    color: #05a6f0;
    font-weight: 500;
    border-left: 3px solid #05a6f0;
    background-color: #e9f8ff;
}

/* COLLAPSED STATE */
.api_doc_section.collapsed .api_doc_menu {
    display: none;
}

/* CONTENT TYPOGRAPHY */
.api_doc_right_content h2 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 15px;
}

.api_doc_right_content h3 {
    font-size: 20px;
    margin-top: 30px;
    margin-bottom: 10px;
}

.api_doc_right_content p {
    font-size: 15px;
    line-height: 1.6;
    color: #374151;
}

/* CODE BLOCKS */
.code-wrapper {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    overflow-x: auto;
    font-size: 14px;
}

    .code-wrapper pre {
        margin: 0;
        white-space: pre;
    }

.api_doc_code_container {
    background-color: #f2f3f4;
    border-radius: 8px;
}

/***************************************/
/* API DOCUMENTATION CSS ENDS */
/***************************************/


/**********************************
    App Suite New Start
**********************************/
.sec_heading {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1E2432;
}

.app_suite_card_view {
    display: flex;
    flex-direction: column;
}

    .app_suite_card_view .card-body {
        flex: 1;
        /*overflow: hidden;*/ /* keep scrollbar-wrapper working */
    }

.app_suite_cont {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 10px;
    position: relative;
    /*white-space:nowrap;*/
}

    .app_suite_cont:hover {
        background: #dcf2fd;
        border-radius: 8px;
        cursor: pointer;
        -webkit-transition: box-shadow 0.6s ease, z-index 0s 0.6s ease, -webkit-transform 0.6s ease;
        transition: box-shadow 0.6s ease, z-index 0s 0.6s ease, -webkit-transform 0.6s ease;
        transition: box-shadow 0.6s ease, transform 0.6s ease, z-index 0s 0.6s ease;
        transition: box-shadow 0.6s ease, transform 0.6s ease, z-index 0s 0.6s ease, -webkit-transform 0.2s ease;
        transform: scale(1.1);
        cursor: pointer;
    }

.text_avatar_app_suite {
    border-radius: 10px;
    color: #fff;
    text-transform: uppercase;
    padding: 10px 0px;
    vertical-align: middle;
    width: 60px;
    height: 60px;
    font-size: 16px;
    white-space: nowrap;
    font-weight: 700;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 9px 20px rgba(46, 35, 94, 0.07);
}

.txt_large_v2 {
    font-size: 44px;
    color: #334155;
    font-weight: 600;
    display: ruby-text;
}

.month_v2 {
    font-size: 13px;
    color: #94A3B8;
    font-weight: 500;
    display: block;
}

.day_v2 {
    font-size: 13px;
    color: #334155;
    font-weight: 500;
}

.spantxt_v2 {
    font-size: 12px;
    color: #334155;
    font-weight: 500;
    display: block;
    line-height: 21px;
}

.txt_large_v3 {
    font-size: 24px;
    color: #334155;
    font-weight: 600;
    display: ruby-text;
}

.event_container_v2 {
    background-color: #f2f9ff !important;
    border-radius: 8px;
    padding: 0px 12px;
    display: block;
    unicode-bidi: isolate;
}

.whats_new_height {
    max-height: 20vh;
}

.badge-event_v2 {
    padding: 8px 12px !important;
    width: 100%;
    color: #1E2432;
    font-size: 12px;
    font-weight: 500;
    text-align: left;
}

.badge_event_date {
    padding: 0px 0px 8px 12px !important;
    width: 100%;
    color: #9e9fa2;
    font-size: 12px;
    font-weight: 500;
    text-align: left;
}

.sec_label {
    color: #6B7C94;
    font-weight: 500;
    font-size: 12px;
    text-align: center;
    margin-top: 12px;
    text-transform: uppercase;
}


#div1 {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    padding: 10px 10px 0 10px;
    /*border: 1px solid #aaaaaa;*/
    height: 100%
}

.card_body_scroll {
    max-height: 21.5vh;
}

.worklist_scroll {
    max-height: 24.5vh;
}

.app_suite_cont .fa-xmark {
    display: none;
}

.app_suite_cont:hover .fa-xmark {
    display: block;
}

.remove_option {
    position: absolute;
    right: 3px;
    top: 3px;
    color: #000;
    padding: 3px;
}

    .remove_option:hover {
        color: #FC4438;
    }

.whats_new_height {
    max-height: 20vh;
}

.worklist_height {
    max-height: 25vh;
}

.drop-zone {
    min-height: 25vh;
    position: relative;
    transition: background-color 0.25s ease;
}


    .drop-zone.drag-over {
        border: 1.5px dashed rgba(5, 165, 239, 0.5);
        border-radius: 10px;
        background-color: rgba(5, 165, 239, 0.04);
        box-shadow: 0 0 0 4px rgba(5, 165, 239, 0.08);
        transition: all 0.25s ease;
    }

.dragged_content {
    border: 1px dashed var(--theme-default);
    border-radius: 5px;
    background-color: #f1faff;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-default);
    pointer-events: none; /* important */
    min-height: 25vh;
}

.dropped-item {
    /*transform: scale(1.10);*/
}

@media (max-width: 1024px) {
    .res_row .col-md-2, .res_row .col-md-4, .row.drop-zone .col-md-4 {
        width: auto;
        flex: 1 1 auto;
    }
}

@media (-webkit-device-pixel-ratio: 1.25) {
    .fit-window {
        zoom: 0.80;
    }
    .whats_new_height {
        max-height: 28vh;
    }
    .drop-zone, .dragged_content {
        min-height: 32vh;
    }
    .text_avatar_app_suite {
        width: 50px;
        height: 50px;
    }

        .text_avatar_app_suite img {
            max-width: 30px;
        }

        .text_avatar_app_suite i {
            font-size: 1.5rem;
        }

    .remove_option {
        right: 2px;
        top: 2px;
    }
    .worklist_height {
        max-height: 36vh;
    }
}

@media (-webkit-device-pixel-ratio: 1.5) {
    .fit-window {
        zoom: 0.80;
    }
    .txt_large_v2 {
        font-size: 40px;
    }

    .month_v2 {
        font-size: 12px;
    }

    .day_v2 {
        font-size: 13px;
    }

    .spantxt_v2 {
        font-size: 10px;
    }

    .txt_large_v3 {
        font-size: 23px;
    }

    .whats_new_height {
        max-height: 42vh;
    }

    .dragged_content {
        min-height: 47vh;
        font-size: 10px;
    }

    .sec_label {
        font-size: 10px;
    }

    .text_avatar_app_suite img {
        max-width:30px;
    }

    .text_avatar_app_suite i {
        font-size:1.5rem;
    }
    .worklist_height {
        max-height: 51vh;
    }
}

@media (-webkit-device-pixel-ratio: 2) {
    .fit-window {
        zoom: 0.80;
    }

    .drop-zone, .dragged_content {
        min-height: 27vh;
        font-size: 11px;
    }

    .whats_new_height {
        max-height: 25vh;
    }

    .month_v2 {
        font-size: 12px;
    }

    .spantxt_v2 {
        font-size: 12px;
    }

    .day_v2 {
        font-size: 13px;
    }

    .txt_large_v3 {
        font-size: 24px;
    }
}

.swal2-timer-progress-bar {
    background: linear-gradient( 90deg, #75E1FF, #6EFAA6 ) !important;
}

body.swal2-toast-shown .swal2-container {
    width: 50% !important;
}

.swal2-toast h2:where(.swal2-title) {
    font-size: 13px !important;
}

h2#swal2-title a {
    color: var(--theme-deafult) !important;
}

div:where(.swal2-icon) {
    border: .15em solid var(--theme-deafult) !important;
}

.swal2-toast .swal2-icon .swal2-icon-content {
    max-width: 60% !important;
    font-size: 1.2em !important;
    font-weight: 500 !important;
}

div:where(.swal2-container) div:where(.swal2-popup) {
    border-radius: 10px !important;
}

.app-suit-notifiaction {
    max-width: none !important;
}

.notification_border {
    margin-top: 14px;
    border-top: 1px dashed #e5e7eb;
    padding-top: 14px;
}
/**********************************
    App Suite New End
**********************************/

/**===========================
  Basic Info Start
=============================**/

.image-upload > input {
    display: none;
}

.file-upload {
    background-color: #ffffff;
    width: 600px;
    /*margin: 0 auto;*/
    padding: 0 0 20px;
}

.file-upload-btn {
    width: 100%;
    margin: 0;
    color: #fff;
    background: #1FB264;
    border: none;
    padding: 10px;
    border-radius: 4px;
    border-bottom: 4px solid #15824B;
    transition: all .2s ease;
    outline: none;
    text-transform: uppercase;
    font-weight: 700;
}

    .file-upload-btn:hover {
        background: #1AA059;
        color: #ffffff;
        transition: all .2s ease;
        cursor: pointer;
    }

    .file-upload-btn:active {
        border: 0;
        transition: all .2s ease;
    }

.file-upload-content {
    display: none;
    text-align: center;
}

.file-upload-input {
    position: absolute;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    outline: none;
    opacity: 0;
    cursor: pointer;
}

.image-upload-wrap {
    margin-top: 20px;
    padding: 20px;
    border: 1px dashed #05a6f0;
    border-radius: 5px;
    position: relative;
}

    .image-dropping,
    .image-upload-wrap:hover {
        background-color: #05a6f0;
        /* border: 1px dashed #ffffff; */
        color: #fff;
        transition: all 0.5s ease-in-out;
    }

.user-profile-img {
    border: 3px solid #05A6F0;
    padding: 3px;
    width: 130px !important;
    height: 130px !important;
    display: block;
    border-radius: 50%;
    margin-top: 1rem;
    box-shadow: 0px 9px 20px rgba(46, 35, 94, 0.07);
}

.edit-badge {
    position: absolute;
    left: 6.5rem;
    bottom: 24px;
    background: #05a6f0;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    padding: 4px;
    font-size: 10px;
    height: 30px;
    width: 30px;
    cursor: pointer;
}
/**===========================
  Basic Info End
=============================**/