@charset "UTF-8";
/* ========================================
   استایل‌های سایدبار مدرن (مشابه کد اول شما)
   ======================================== */

/* متغیرهای اصلی */
:root {
    --primary: #4f46e5;
    --primary-dark: #4338ca;
    --primary-light: #eef2ff;
    --secondary: #64748b;
    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    --info: #3b82f6;
    --dark: #1e293b;
    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;
    --sidebar-width: 280px;
    --sidebar-collapsed-width: 80px;
    --header-height: 70px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}


.modal .modal-content {
    overflow: hidden;
}

.modal .modal-header {
    position: relative;
    isolation: isolate;
    min-height: 66px;
    padding: 12px 18px;
    overflow: hidden;
    background: #b9b2ff !important;
    border: 1px solid rgba(124, 58, 237, .42) !important;
    display: flex;
    align-items: center;
}

.modal .modal-header::before,
.modal .modal-header::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
    transform-origin: center;
}

.modal .modal-header::before {
    left: 62px;
    bottom: -62px;
    width: 132px;
    height: 132px;
    background: #f3edff;
    filter: blur(1px);
}

.modal .modal-header::after {
    left: 16px;
    bottom: -70px;
    width: 126px;
    height: 126px;
    background: rgba(124, 58, 237, .281);
    filter: blur(1px);
}

.modal.show .modal-header {
    animation: modalTabHeaderReveal 420ms cubic-bezier(.2, .8, .2, 1) both;
}

.modal.show .modal-header::before {
    animation: modalTabBlobPink 700ms cubic-bezier(.2, .8, .2, 1) 70ms both;
}

.modal.show .modal-header::after {
    animation: modalTabBlobPurple 760ms cubic-bezier(.2, .8, .2, 1) 110ms both;
}

.modal .modal-header .modal-title {
    flex: 1;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    position: relative;
    z-index: 2;
}

.modal .modal-header .modal-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    color: #7c3aed;
    background: rgba(124, 58, 237, .09);
    border: 1px solid rgba(124, 58, 237, .18);
    border-radius: 11px;
}

.modal .modal-header .btn-close {
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 1 !important;
    background-color: rgba(255, 255, 255, .88) !important;
    border: 1px solid rgba(124, 58, 237, .22) !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 12px rgba(76, 29, 149, .10) !important;
    transition: .18s ease;
}

.modal .modal-header .btn-close:hover {
    transform: translateY(-2px) rotate(5deg);
}


/* =====================================
   MODAL FOOTER BUTTONS
===================================== */

.modal .modal-footer {
    display: flex;
    gap: 10px;
    width: 100%;
    flex-direction: row;
}

/* همه دکمه ها مساوی */
.modal .modal-footer .btn {
    flex: 1;
    height: 42px;
    border-radius: 12px !important;
    font-weight: 700;
}


/* ثبت / ذخیره سمت راست */
.modal .modal-footer .btn-primary,
.modal .modal-footer .btn-success {
    order: 1;
    background: #7c3aed !important;
    border-color: #7c3aed !important;
    color: #fff !important;
}


/* بستن / انصراف سمت چپ */
.modal .modal-footer .btn-danger,
.modal .modal-footer .btn-outline-secondary {
    order: 2;
    background: #fff !important;
    color: #7c3aed !important;
    border: 1px solid rgba(124, 58, 237, .35) !important;
}


@keyframes modalTabHeaderReveal {
    from {
        opacity: 0;
        transform: translateY(-10px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes modalTabBlobPink {
    from {
        opacity: 0;
        transform: translate(-18px, 22px) scale(.45)
    }

    to {
        opacity: 1;
        transform: translate(0, 0) scale(1)
    }
}

@keyframes modalTabBlobPurple {
    from {
        opacity: 0;
        transform: translate(-28px, 26px) scale(.38)
    }

    to {
        opacity: 1;
        transform: translate(0, 0) scale(1)
    }
}


/* =====================================
   GLOBAL MODAL HEADER ANIMATION
===================================== */


.modal.show .modal-header {

    animation:
        modalTabHeaderReveal 420ms cubic-bezier(.2, .8, .2, 1) both;

}


.modal.show .modal-header::before {

    animation:
        modalTabBlobPink 700ms cubic-bezier(.2, .8, .2, 1) 70ms both;

}



.modal.show .modal-header::after {

    animation:
        modalTabBlobPurple 760ms cubic-bezier(.2, .8, .2, 1) 110ms both;

}



.modal.show .modal-header .modal-header-icon {

    animation:
        modalTabIconPop 520ms cubic-bezier(.2, .9, .25, 1.2) 110ms both;

}

/* فقط مودال‌هایی که چند تب دارند */
.modal .modal-dialog:has(.nav-tabs) {
    height: calc(100dvh - 2rem);
    margin-top: 1rem;
    margin-bottom: 1rem;
}



/* خود محتوای مودال تمام ارتفاع dialog را بگیرد */
.modal .modal-content {

    max-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* هدر و فوتر ثابت بمانند */
.modal .modal-header,
.modal .modal-footer {
    flex: 0 0 auto;
}

/* فقط بدنه مودال اسکرول بخورد */
.modal .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto !important;
    overflow-x: hidden;
}

/* برای مودال‌هایی که تب دارند، مثل addBenefitModal */
.modal .modal-body:has(.modal-fixed-tab-content) {
    display: flex;
    flex-direction: column;
}

/* تب‌ها کل فضای باقی‌مانده را بگیرند */
.modal .modal-fixed-tab-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* pane های تب هم ارتفاع ثابت داشته باشند */
.modal .modal-fixed-tab-content>.tab-pane {
    flex: 1 1 auto;

}

/* فقط تب فعال flex شود */
.modal .modal-fixed-tab-content>.tab-pane.active,
.modal .modal-fixed-tab-content>.tab-pane.show.active {
    display: flex;
    flex-direction: column;
}

/* محتوای داخلی هر تب اگر زیاد شد خودش اسکرول بخورد */
.modal .modal-fixed-tab-content .custom-border {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* اگر داخل تب جدول داری، از مودال بیرون نزند */
.modal .modal-fixed-tab-content .table-responsive {
    max-height: none !important;
    min-height: 0;
    overflow: auto !important;
}

/* این قسمت جلوی فشار دادن ارتفاع توسط flex-tabale فعلی را می‌گیرد */
.modal .flex-tabale {
    height: auto !important;
    max-height: 100%;
    min-height: 0;
    overflow: hidden !important;
}

/* آیتم‌های داخلی جدول هم داخل همان فضای تب اسکرول شوند */
.modal .flex-tabale>.flex-grow-1 {
    min-height: 0;
    overflow: auto !important;
}

/* کارت‌ها، ردیف‌ها و جدول‌ها باعث بیرون‌زدگی افقی نشوند */
.modal .card,
.modal .row,
.modal .accordion,
.modal .table,
.modal .table-responsive {
    min-width: 0;
}



/* ======================== سایدبار اصلی ======================== */
.sp-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border-left: 1px solid var(--gray-200);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: 'IRANSans', 'Vazir', 'Poppins', sans-serif;
}

/* حالت بسته در موبایل */
@media (max-width: 992px) {
    .sp-sidebar {
        transform: translateX(100%);
    }

    .sp-sidebar.open {
        transform: translateX(0);
    }
}


/* ======================== ناوبری سایدبار ======================== */
.sp-sidebar-nav {
    flex: 1;
    padding: 16px 12px;
    overflow-y: auto;
    list-style: none;
    margin: 0;
}

.sp-sidebar-nav::-webkit-scrollbar {
    width: 4px;
}

.sp-sidebar-nav::-webkit-scrollbar-track {
    background: var(--gray-100);
    border-radius: 10px;
}

.sp-sidebar-nav::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: 10px;
}

.sp-nav-section-title {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--gray-400);
    padding: 12px 12px 8px;
    margin-top: 8px;
}

/* آیتم منو */
.sp-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    margin: 4px 0;
    border: none;
    background: transparent;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--gray-600);
    cursor: pointer;
    transition: var(--transition);
    text-align: right;
}



/* باز کردن دسترسی نمایش به تمام والدین */
.modal-content,
.modal-body,
.card,
.card-body,
.tab-content {
    overflow: visible !important;
}

/* تنظیم اولویت نمایش لیست کشویی */
.choices {
    overflow: visible !important;

}

.choices__list--dropdown {
    z-index: 10000 !important;
    background-color: white !important;
    border: 1px solid #dcdcdc !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

:root,
[data-bs-theme=light] {
    --ins-blue: #1c84c6;
    --ins-indigo: #6b5eae;
    --ins-pink: #ff679b;
    --ins-red: #FF477B;
    --ins-orange: #fd7e14;
    --ins-yellow: #f8ac59;
    --ins-green: #0acf97;
    --ins-teal: #1ab394;
    --ins-cyan: #23c6c8;
    --ins-black: #000;
    --ins-white: #fff;
    --ins-gray: #8a969c;
    --ins-gray-dark: #343a40;
    --ins-gray-100: #f6f7fb;
    --ins-gray-200: #eef2f7;
    --ins-gray-300: #e7e9eb;
    --ins-gray-400: #ced4da;
    --ins-gray-500: #a1a9b1;
    --ins-gray-600: #8a969c;
    --ins-gray-700: #6c757d;
    --ins-gray-800: #343a40;
    --ins-gray-900: #313a46;
    --ins-primary: #1ab394;
    --ins-secondary: #1c84c6;
    --ins-success: #09bb89;
    --ins-info: #23c6c8;
    --ins-warning: #f8ac59;
    --ins-danger: #FF477B;
    --ins-purple: #7b70ef;
    --ins-light: #eef2f7;
    --ins-dark: #313a46;
    --ins-custome: #313a46;
    --ins-primary-rgb: 26, 179, 148;
    --ins-secondary-rgb: 28, 132, 198;
    --ins-success-rgb: 10, 207, 151;
    --ins-info-rgb: 35, 198, 200;
    --ins-warning-rgb: 248, 172, 89;
    --ins-danger-rgb: 237, 85, 101;
    --ins-purple-rgb: 123, 112, 239;
    --ins-light-rgb: 238, 242, 247;
    --ins-dark-rgb: 49, 58, 70;
    --ins-primary-text-emphasis: #16987e;
    --ins-secondary-text-emphasis: #1870a8;
    --ins-success-text-emphasis: #09b080;
    --ins-info-text-emphasis: #1ea8aa;
    --ins-warning-text-emphasis: #d3924c;
    --ins-danger-text-emphasis: #c94856;
    --ins-purple-text-emphasis: #695fcb;
    --ins-light-text-emphasis: #8a969c;
    --ins-dark-text-emphasis: #343a40;
    --ins-primary-bg-subtle: #ddf4ef;
    --ins-secondary-bg-subtle: #ddedf6;
    --ins-success-bg-subtle: #daf8ef;
    --ins-info-bg-subtle: #def6f7;
    --ins-warning-bg-subtle: #fef3e6;
    --ins-danger-bg-subtle: #fce6e8;
    --ins-purple-bg-subtle: #ebeafd;
    --ins-light-bg-subtle: #fbfbfd;
    --ins-dark-bg-subtle: #ced4da;
    --ins-primary-border-subtle: #a3e1d4;
    --ins-secondary-border-subtle: #a4cee8;
    --ins-success-border-subtle: #9decd5;
    --ins-info-border-subtle: #d6eded;
    --ins-warning-border-subtle: #fcdebd;
    --ins-danger-border-subtle: #f8bbc1;
    --ins-purple-border-subtle: #cac6f9;
    --ins-light-border-subtle: #eef2f7;
    --ins-dark-border-subtle: #a1a9b1;
    --ins-white-rgb: 255, 255, 255;
    --ins-black-rgb: 0, 0, 0;
    --ins-font-sans-serif: "Open Sans", sans-serif;
    --ins-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --ins-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
    --ins-body-font-family: var(--ins-font-sans-serif);
    --ins-body-font-size: 0.813rem;
    --ins-body-font-weight: 400;
    --ins-body-line-height: 1.5;
    --ins-body-color: #4c4c5c;
    --ins-body-color-rgb: 76, 76, 92;
    --ins-body-bg: #f1f2f7;
    --ins-body-bg-rgb: 241, 242, 247;
    --ins-emphasis-color: rgba(76, 76, 92, 0.75);
    --ins-emphasis-color-rgb: 76, 76, 92;
    --ins-secondary-color: #5f6775;
    --ins-secondary-color-rgb: 155, 166, 183;
    --ins-secondary-bg: #fff;
    --ins-secondary-bg-rgb: 255, 255, 255;
    --ins-tertiary-color: rgba(76, 76, 92, 0.5);
    --ins-tertiary-color-rgb: 76, 76, 92;
    --ins-tertiary-bg: #f6f7fb;
    --ins-tertiary-bg-rgb: 246, 247, 251;
    --ins-heading-color: inherit;
    --ins-link-color: #1ab394;
    --ins-link-color-rgb: 26, 179, 148;
    --ins-link-decoration: none;
    --ins-link-hover-color: #16987e;
    --ins-link-hover-color-rgb: 22, 152, 126;
    --ins-code-color: #ff679b;
    --ins-highlight-color: #4c4c5c;
    --ins-highlight-bg: #feeede;
    --ins-border-width: 1px;
    --ins-border-style: solid;
    --ins-border-color: #e7e9eb;
    --ins-border-color-translucent: #eef2f7;
    --ins-border-radius: 0.5rem;
    --ins-border-radius-sm: 0.25rem;
    --ins-border-radius-lg: 0.4rem;
    --ins-border-radius-xl: 1rem;
    --ins-border-radius-xxl: 2rem;
    --ins-border-radius-2xl: var(--ins-border-radius-xxl);
    --ins-border-radius-pill: 50rem;
    --ins-box-shadow: 0px 1px 4px 0px rgba(130, 143, 163, 0.15);
    --ins-box-shadow-sm: 0 0.0625rem 0.125rem rgba(var(--ins-body-color-rgb), 0.15);
    --ins-box-shadow-lg: 0 0.25rem 1rem rgba(var(--ins-body-color-rgb), 0.2);
    --ins-box-shadow-inset: inset 0 1px 2px rgba(var(--ins-body-color-rgb), 0.075);
    --ins-focus-ring-width: 0;
    --ins-focus-ring-opacity: 0.25;
    --ins-focus-ring-color: rgba(26, 179, 148, 0.25);
    --ins-form-valid-color: #0acf97;
    --ins-form-valid-border-color: #0acf97;
    --ins-form-invalid-color: #FF477B;
    --ins-form-invalid-border-color: #FF477B;
    --ins-form-invalid-header-modal-bg: #105d4d1f;
    --primary-blue: #0ea5e9;
    --primary-green: #10b981;
    --primary-gradient: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-green) 100%);
    --secondary-blue: #0369a1;
    --dark-blue: #1e293b;
    --gray-800: #334155;
    --gray-600: #475569;
    --gray-400: #d3e0f3;
    --gray-200: #e2e8f0;
    --gray-100: #f1f5f9;
    --gray-50: #f8fafc;
    --white: #ffffff;
    --error: #ef4444;
    --success: #10b981;
    --border-radius: 12px;
    --box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --dark-header: #f5f7fa;
    --background-image: linear-gradient(179deg, #6d28d9 0%, #FFF 100%);
    --btn-ghaema: #1ab39433;
    --btn-text-search: #0a8068;
    --back-modal: #ffffff;
    --selecttable: #e7f0ff;
    --instr: #ffffff;
    --institle: #4d4c4c;
    --insback: ##192e37
}

[data-bs-theme=dark] {
    color-scheme: dark;
    --ins-body-color: #aab8c5;
    --ins-body-color-rgb: 170, 184, 197;
    --ins-body-bg: #17181e;
    --ins-body-bg-rgb: 23, 24, 30;
    --ins-emphasis-color: #b0bbc5;
    --ins-emphasis-color-rgb: 176, 187, 197;
    --ins-secondary-color: #8391a2;
    --ins-secondary-color-rgb: 131, 145, 162;
    --ins-secondary-bg: #192e37;
    --ins-secondary-bg-rgb: 30, 31, 39;
    --ins-tertiary-color: #aab8c5;
    --ins-tertiary-color-rgb: 170, 184, 197;
    --ins-tertiary-bg: #272832;
    --ins-tertiary-bg-rgb: 39, 40, 50;
    --ins-primary-text-emphasis: #76d1bf;
    --ins-secondary-text-emphasis: #77b5dd;
    --ins-success-text-emphasis: #6ce2c1;
    --ins-info-text-emphasis: #7bddde;
    --ins-warning-text-emphasis: #fbcd9b;
    --ins-danger-text-emphasis: #f499a3;
    --ins-purple-text-emphasis: #b0a9f5;
    --ins-light-text-emphasis: #f6f7fb;
    --ins-dark-text-emphasis: #e7e9eb;
    --ins-primary-bg-subtle: rgba(26, 179, 148, 0.2);
    --ins-secondary-bg-subtle: rgba(28, 132, 198, 0.2);
    --ins-success-bg-subtle: rgba(10, 207, 151, 0.2);
    --ins-info-bg-subtle: rgba(35, 198, 200, 0.2);
    --ins-warning-bg-subtle: rgba(248, 172, 89, 0.2);
    --ins-danger-bg-subtle: rgba(237, 85, 101, 0.2);
    --ins-purple-bg-subtle: rgba(123, 112, 239, 0.2);
    --ins-light-bg-subtle: #22232c;
    --ins-dark-bg-subtle: #1a1d20;
    --ins-primary-border-subtle: #106b59;
    --ins-secondary-border-subtle: #114f77;
    --ins-success-border-subtle: #067c5b;
    --ins-info-border-subtle: #157778;
    --ins-warning-border-subtle: #956735;
    --ins-danger-border-subtle: #8e333d;
    --ins-purple-border-subtle: #4a438f;
    --ins-light-border-subtle: #6c757d;
    --ins-dark-border-subtle: #6c757d;
    --ins-heading-color: #aab8c5;
    --ins-link-color: #76d1bf;
    --ins-link-hover-color: #8bd8c9;
    --ins-link-color-rgb: 118, 209, 191;
    --ins-link-hover-color-rgb: 139, 216, 201;
    --ins-code-color: #ffa4c3;
    --ins-highlight-color: #dee2e6;
    --ins-highlight-bg: #664d03;
    --ins-border-color: #293036;
    --ins-border-color-translucent: #8391a2;
    --ins-form-valid-color: #6ce2c1;
    --ins-form-valid-border-color: #6ce2c1;
    --ins-form-invalid-color: #f499a3;
    --ins-form-invalid-border-color: #f499a3;
    --ins-form-invalid-header-modal-bg: #105d4d1f;
    --dark-header: #192e37;
    --background-image: linear-gradient(179deg, #ffd200 0%, #f7971e 100%);
    --btn-ghaema: #2b3e47;
    --btn-text-search: #ffffff;
    --back-modal: #0f172a;
    --ins-primary: #1ab394;
    --selecttable: #30363f;
    --instr: #1f2a34;
    --institle: #dddddd;



}

*,
::after,
::before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

@media (prefers-reduced-motion:no-preference) {
    :root {
        scroll-behavior: smooth
    }
}

body {
    margin: 0;
    font-family: var(--ins-body-font-family);
    font-size: var(--ins-body-font-size);
    font-weight: var(--ins-body-font-weight);
    line-height: var(--ins-body-line-height);
    color: var(--ins-body-color);
    text-align: var(--ins-body-text-align);
    background-color: var(--ins-body-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent
}

hr {
    margin: .83375rem 0;
    color: inherit;
    border: 0;
    border-top: var(--ins-border-width) solid var(--ins-border-color);
    opacity: 1
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    margin-bottom: .5rem;
    font-weight: var(--ins-font-weight-semibold);
    line-height: 1.5;
    color: var(--ins-heading-color)
}

.h1,
h1 {
    font-size: calc(1.32825rem + .939vw)
}

@media (min-width:1200px) {

    .h1,
    h1 {
        font-size: 2.0325rem
    }
}

.h2,
h2 {
    font-size: calc(1.294104rem + .529248vw)
}

@media (min-width:1200px) {

    .h2,
    h2 {
        font-size: 1.69104rem
    }
}

.h3,
h3 {
    font-size: calc(1.2643713705rem + .172456446vw)
}

@media (min-width:1200px) {

    .h3,
    h3 {
        font-size: 1.393713705rem
    }
}

.h4,
h4 {
    font-size: 1.01625rem
}

.h5,
h5 {
    font-size: .84552rem
}

.h6,
h6 {
    font-size: .69105rem
}

p {
    margin-top: 0;
    margin-bottom: 1rem
}

abbr[title] {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
    cursor: help;
    -webkit-text-decoration-skip-ink: none;
    text-decoration-skip-ink: none
}

address {
    margin-bottom: 1rem;
    font-style: normal;
    line-height: inherit
}

ol,
ul {
    padding-right: 2rem
}

dl,
ol,
ul {
    margin-top: 0;
    margin-bottom: 1rem
}

ol ol,
ol ul,
ul ol,
ul ul {
    margin-bottom: 0
}

dt {
    font-weight: var(--ins-font-weight-semibold)
}

dd {
    margin-bottom: .5rem;
    margin-right: 0
}

blockquote {
    margin: 0 0 1rem
}

b,
strong {
    font-weight: bolder
}

.small,
small {
    font-size: .75em
}

.mark,
mark {
    padding: .1875em;
    color: var(--ins-highlight-color);
    background-color: var(--ins-highlight-bg)
}

sub,
sup {
    position: relative;
    font-size: .75em;
    line-height: 0;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

a {
    color: rgba(var(--ins-link-color-rgb), var(--ins-link-opacity, 1));
    text-decoration: none
}

a:hover {
    --ins-link-color-rgb: var(--ins-link-hover-color-rgb)
}

a:not([href]):not([class]),
a:not([href]):not([class]):hover {
    color: inherit;
    text-decoration: none
}

code,
kbd,
pre,
samp {
    font-family: var(--ins-font-monospace);
    font-size: 1em
}

pre {
    display: block;
    margin-top: 0;
    margin-bottom: 1rem;
    overflow: auto;
    font-size: .813rem
}

pre code {
    font-size: inherit;
    color: inherit;
    word-break: normal
}

code {
    font-size: .813rem;
    color: var(--ins-code-color);
    word-wrap: break-word
}

a>code {
    color: inherit
}

kbd {
    padding: .1875rem .375rem;
    font-size: .813rem;
    color: var(--ins-body-bg);
    background-color: var(--ins-body-color);
    border-radius: .25rem
}

kbd kbd {
    padding: 0;
    font-size: 1em
}

figure {
    margin: 0 0 1rem
}

img,
svg {
    vertical-align: middle
}

table {
    caption-side: bottom;
    border-collapse: collapse
}

caption {
    padding-top: .75rem;
    padding-bottom: .75rem;
    color: var(--ins-secondary-color);
    text-align: right
}

th {
    font-weight: 700;
    text-align: inherit;
    text-align: -webkit-match-parent
}

tbody,
td,
tfoot,
th,
thead,
tr {
    border-color: inherit;
    border-style: solid;
    border-width: 0;
    background: var(--instr);
    min-width: 60px;
}

label {
    display: inline-block
}

button {
    border-radius: 0
}

button:focus:not(:focus-visible) {
    outline: 0
}

button,
input,
optgroup,
select,
textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit
}

button,
select {
    text-transform: none
}

[role=button] {
    cursor: pointer
}

select {
    word-wrap: normal
}

select:disabled {
    opacity: 1
}

[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator {
    display: none !important
}

[type=button],
[type=reset],
[type=submit],
button {
    -webkit-appearance: button
}

[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled),
button:not(:disabled) {
    cursor: pointer
}

::-moz-focus-inner {
    padding: 0;
    border-style: none
}

textarea {
    resize: vertical
}

fieldset {
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0
}

legend {
    float: right;
    width: 100%;
    padding: 0;
    margin-bottom: .5rem;
    line-height: inherit;
    font-size: calc(1.275rem + .3vw)
}

@media (min-width:1200px) {
    legend {
        font-size: 1.5rem
    }
}

legend+* {
    clear: right
}

::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-minute,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-year-field {
    padding: 0
}

::-webkit-inner-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type=email],
[type=number],
[type=tel],
[type=url] {
    direction: rtl
}

::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-color-swatch-wrapper {
    padding: 0
}

::-webkit-file-upload-button {
    font: inherit;
    -webkit-appearance: button
}

::file-selector-button {
    font: inherit;
    -webkit-appearance: button
}

output {
    display: inline-block
}

iframe {
    border: 0
}

summary {
    display: list-item;
    cursor: pointer
}

progress {
    vertical-align: baseline
}

[hidden] {
    display: none !important
}

.lead {
    font-size: 1.01625rem;
    font-weight: 300
}

.display-1 {
    font-weight: 300;
    line-height: 1.5;
    font-size: calc(1.625rem + 4.5vw)
}

@media (min-width:1200px) {
    .display-1 {
        font-size: 5rem
    }
}

.display-2 {
    font-weight: 300;
    line-height: 1.5;
    font-size: calc(1.575rem + 3.9vw)
}

@media (min-width:1200px) {
    .display-2 {
        font-size: 4.5rem
    }
}

.display-3 {
    font-weight: 300;
    line-height: 1.5;
    font-size: calc(1.525rem + 3.3vw)
}

@media (min-width:1200px) {
    .display-3 {
        font-size: 4rem
    }
}

.display-4 {
    font-weight: 300;
    line-height: 1.5;
    font-size: calc(1.475rem + 2.7vw)
}

@media (min-width:1200px) {
    .display-4 {
        font-size: 3.5rem
    }
}

.display-5 {
    font-weight: 300;
    line-height: 1.5;
    font-size: calc(1.425rem + 2.1vw)
}

@media (min-width:1200px) {
    .display-5 {
        font-size: 3rem
    }
}

.display-6 {
    font-weight: 300;
    line-height: 1.5;
    font-size: calc(1.375rem + 1.5vw)
}

@media (min-width:1200px) {
    .display-6 {
        font-size: 2.5rem
    }
}

.list-unstyled {
    padding-right: 0;
    list-style: none
}

.list-inline {
    padding-right: 0;
    list-style: none
}

.list-inline-item {
    display: inline-block
}

.list-inline-item:not(:last-child) {
    margin-left: .5rem
}

.initialism {
    font-size: .75em;
    text-transform: uppercase
}

.blockquote {
    margin-bottom: 1.25rem;
    font-size: 1.01625rem
}

.blockquote>:last-child {
    margin-bottom: 0
}

.blockquote-footer {
    margin-top: -1.25rem;
    margin-bottom: 1.25rem;
    font-size: .813rem;
    color: var(--ins-secondary-color)
}

.blockquote-footer::before {
    content: "— "
}

.img-fluid {
    max-width: 100%;
    height: auto
}

.img-thumbnail {
    padding: .25rem;
    background-color: var(--ins-body-bg);
    border: var(--ins-border-width) solid var(--ins-border-color);
    border-radius: var(--ins-border-radius);
    max-width: 100%;
    height: auto
}

.figure {
    display: inline-block
}

.figure-img {
    margin-bottom: .625rem;
    line-height: 1
}

.figure-caption {
    font-size: .75em;
    color: var(--ins-secondary-color)
}

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
    --ins-gutter-x: 1.25rem;
    --ins-gutter-y: 0;
    width: 100%;
    padding-left: calc(var(--ins-gutter-x) * .5);
    padding-right: calc(var(--ins-gutter-x) * .5);
    margin-left: auto;
    margin-right: auto
}

@media (min-width:576px) {

    .container,
    .container-sm {
        max-width: 540px
    }
}

@media (min-width:768px) {

    .container,
    .container-md,
    .container-sm {
        max-width: 720px
    }
}

@media (min-width:992px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm {
        max-width: 960px
    }
}

@media (min-width:1200px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
        max-width: 1140px
    }
}

@media (min-width:1400px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 1320px
    }
}




:root {
    --ins-breakpoint-xs: 0;
    --ins-breakpoint-sm: 576px;
    --ins-breakpoint-md: 768px;
    --ins-breakpoint-lg: 992px;
    --ins-breakpoint-xl: 1200px;
    --ins-breakpoint-xxl: 1400px
}

.row {
    --ins-gutter-x: 1.25rem;
    --ins-gutter-y: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--ins-gutter-y));
    margin-left: calc(-.5 * var(--ins-gutter-x));
    margin-right: calc(-.5 * var(--ins-gutter-x))
}




/* یا اگر دقیقاً می‌خوای 1152 و 776 رو هدف بگیری */

@media (max-width: 1200px) {
    .col-md-9 {
        flex-direction: row;
        width: 100% !important;
    }
}



@media (max-width: 1200px) {
    .col-md-3 {
        flex-direction: row;
        width: 100% !important;
    }
}





.row>* {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-left: calc(var(--ins-gutter-x) * .5);
    padding-right: calc(var(--ins-gutter-x) * .5);
    margin-top: var(--ins-gutter-y)
}

.col {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 0px;
    flex: 1 0 0
}

.row-cols-auto>* {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto
}

.row-cols-1>* {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 100%
}

.row-cols-2>* {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 50%
}

.row-cols-3>* {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 33.33333333%
}

.row-cols-4>* {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 25%
}

.row-cols-5>* {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 20%
}

.row-cols-6>* {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 16.66666667%
}

.col-auto {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto
}

.col-1 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 8.33333333%
}

.col-2 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 16.66666667%
}

.col-3 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 25%
}

.col-4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 33.33333333%
}

.col-5 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 41.66666667%
}

.col-6 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 50%
}

.col-7 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 58.33333333%
}

.col-8 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 66.66666667%
}

.col-9 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 75%
}

.col-10 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 83.33333333%
}

.col-11 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 91.66666667%
}

.col-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 100%
}

.offset-1 {
    margin-right: 8.33333333%
}

.offset-2 {
    margin-right: 16.66666667%
}

.offset-3 {
    margin-right: 25%
}

.offset-4 {
    margin-right: 33.33333333%
}

.offset-5 {
    margin-right: 41.66666667%
}

.offset-6 {
    margin-right: 50%
}

.offset-7 {
    margin-right: 58.33333333%
}

.offset-8 {
    margin-right: 66.66666667%
}

.offset-9 {
    margin-right: 75%
}

.offset-10 {
    margin-right: 83.33333333%
}

.offset-11 {
    margin-right: 91.66666667%
}

.g-0,
.gx-0 {
    --ins-gutter-x: 0
}

.g-0,
.gy-0 {
    --ins-gutter-y: 0
}

.g-1,
.gx-1 {
    --ins-gutter-x: 0.3125rem
}

.g-1,
.gy-1 {
    --ins-gutter-y: 0.3125rem
}

.g-2,
.gx-2 {
    --ins-gutter-x: 0.625rem
}

.g-2,
.gy-2 {
    --ins-gutter-y: 0.625rem
}

.g-3,
.gx-3 {
    --ins-gutter-x: 1.25rem
}

.g-3,
.gy-3 {
    --ins-gutter-y: 1.25rem
}

.g-4,
.gx-4 {
    --ins-gutter-x: 1.875rem
}

.g-4,
.gy-4 {
    --ins-gutter-y: 1.875rem
}

.g-5,
.gx-5 {
    --ins-gutter-x: 3.75rem
}

.g-5,
.gy-5 {
    --ins-gutter-y: 3.75rem
}

@media (min-width:576px) {
    .col-sm {
        -webkit-box-flex: 1;
        -ms-flex: 1 0 0px;
        flex: 1 0 0
    }

    .row-cols-sm-auto>* {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto
    }

    .row-cols-sm-1>* {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 100%
    }

    .row-cols-sm-2>* {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 50%
    }

    .row-cols-sm-3>* {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 33.33333333%
    }

    .row-cols-sm-4>* {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 25%
    }

    .row-cols-sm-5>* {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 20%
    }

    .row-cols-sm-6>* {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 16.66666667%
    }

    .col-sm-auto {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto
    }

    .col-sm-1 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 8.33333333%
    }

    .col-sm-2 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 16.66666667%
    }

    .col-sm-3 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 25%
    }

    .col-sm-4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 33.33333333%
    }

    .col-sm-5 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 41.66666667%
    }

    .col-sm-6 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 50%
    }

    .col-sm-7 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 58.33333333%
    }

    .col-sm-8 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 66.66666667%
    }

    .col-sm-9 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 75%
    }

    .col-sm-10 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 83.33333333%
    }

    .col-sm-11 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 91.66666667%
    }

    .col-sm-12 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 100%
    }

    .offset-sm-0 {
        margin-right: 0
    }

    .offset-sm-1 {
        margin-right: 8.33333333%
    }

    .offset-sm-2 {
        margin-right: 16.66666667%
    }

    .offset-sm-3 {
        margin-right: 25%
    }

    .offset-sm-4 {
        margin-right: 33.33333333%
    }

    .offset-sm-5 {
        margin-right: 41.66666667%
    }

    .offset-sm-6 {
        margin-right: 50%
    }

    .offset-sm-7 {
        margin-right: 58.33333333%
    }

    .offset-sm-8 {
        margin-right: 66.66666667%
    }

    .offset-sm-9 {
        margin-right: 75%
    }

    .offset-sm-10 {
        margin-right: 83.33333333%
    }

    .offset-sm-11 {
        margin-right: 91.66666667%
    }

    .g-sm-0,
    .gx-sm-0 {
        --ins-gutter-x: 0
    }

    .g-sm-0,
    .gy-sm-0 {
        --ins-gutter-y: 0
    }

    .g-sm-1,
    .gx-sm-1 {
        --ins-gutter-x: 0.3125rem
    }

    .g-sm-1,
    .gy-sm-1 {
        --ins-gutter-y: 0.3125rem
    }

    .g-sm-2,
    .gx-sm-2 {
        --ins-gutter-x: 0.625rem
    }

    .g-sm-2,
    .gy-sm-2 {
        --ins-gutter-y: 0.625rem
    }

    .g-sm-3,
    .gx-sm-3 {
        --ins-gutter-x: 1.25rem
    }

    .g-sm-3,
    .gy-sm-3 {
        --ins-gutter-y: 1.25rem
    }

    .g-sm-4,
    .gx-sm-4 {
        --ins-gutter-x: 1.875rem
    }

    .g-sm-4,
    .gy-sm-4 {
        --ins-gutter-y: 1.875rem
    }

    .g-sm-5,
    .gx-sm-5 {
        --ins-gutter-x: 3.75rem
    }

    .g-sm-5,
    .gy-sm-5 {
        --ins-gutter-y: 3.75rem
    }
}

@media (min-width:768px) {
    .col-md {
        -webkit-box-flex: 1;
        -ms-flex: 1 0 0px;
        flex: 1 0 0
    }

    .row-cols-md-auto>* {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto
    }

    .row-cols-md-1>* {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 100%
    }

    .row-cols-md-2>* {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 50%
    }

    .row-cols-md-3>* {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 33.33333333%
    }

    .row-cols-md-4>* {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 25%
    }

    .row-cols-md-5>* {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 20%
    }

    .row-cols-md-6>* {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 16.66666667%
    }

    .col-md-auto {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto
    }

    .col-md-1 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 8.33333333%
    }

    .col-md-2 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 16.66666667%
    }

    .col-md-3 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 20%
    }

    .col-md-4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 33.33333333%
    }

    .col-md-5 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 41.66666667%
    }

    .col-md-6 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 50%
    }

    .col-md-7 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 58.33333333%
    }

    .col-md-8 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 66.66666667%
    }

    .col-md-9 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 80%
    }

    .col-md-10 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 83.33333333%
    }

    .col-md-11 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 91.66666667%
    }

    .col-md-12 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 100%;

    }

    .padding-col-md12 {
        padding-left: 50px;
        padding-right: 50px;
    }

    .offset-md-0 {
        margin-right: 0
    }

    .offset-md-1 {
        margin-right: 8.33333333%
    }

    .offset-md-2 {
        margin-right: 16.66666667%
    }

    .offset-md-3 {
        margin-right: 25%
    }

    .offset-md-4 {
        margin-right: 33.33333333%
    }

    .offset-md-5 {
        margin-right: 41.66666667%
    }

    .offset-md-6 {
        margin-right: 50%
    }

    .offset-md-7 {
        margin-right: 58.33333333%
    }

    .offset-md-8 {
        margin-right: 66.66666667%
    }

    .offset-md-9 {
        margin-right: 75%
    }

    .offset-md-10 {
        margin-right: 83.33333333%
    }

    .offset-md-11 {
        margin-right: 91.66666667%
    }

    .g-md-0,
    .gx-md-0 {
        --ins-gutter-x: 0
    }

    .g-md-0,
    .gy-md-0 {
        --ins-gutter-y: 0
    }

    .g-md-1,
    .gx-md-1 {
        --ins-gutter-x: 0.3125rem
    }

    .g-md-1,
    .gy-md-1 {
        --ins-gutter-y: 0.3125rem
    }

    .g-md-2,
    .gx-md-2 {
        --ins-gutter-x: 0.625rem
    }

    .g-md-2,
    .gy-md-2 {
        --ins-gutter-y: 0.625rem
    }

    .g-md-3,
    .gx-md-3 {
        --ins-gutter-x: 1.25rem
    }

    .g-md-3,
    .gy-md-3 {
        --ins-gutter-y: 1.25rem
    }

    .g-md-4,
    .gx-md-4 {
        --ins-gutter-x: 1.875rem
    }

    .g-md-4,
    .gy-md-4 {
        --ins-gutter-y: 1.875rem
    }

    .g-md-5,
    .gx-md-5 {
        --ins-gutter-x: 3.75rem
    }

    .g-md-5,
    .gy-md-5 {
        --ins-gutter-y: 3.75rem
    }
}



@media (min-width:992px) {
    .col-lg {
        -webkit-box-flex: 1;
        -ms-flex: 1 0 0px;
        flex: 1 0 0
    }

    .row-cols-lg-auto>* {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto
    }

    .row-cols-lg-1>* {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 100%
    }

    .row-cols-lg-2>* {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 50%
    }

    .row-cols-lg-3>* {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 33.33333333%
    }

    .row-cols-lg-4>* {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 25%
    }

    .row-cols-lg-5>* {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 20%
    }

    .row-cols-lg-6>* {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 16.66666667%
    }

    .col-lg-auto {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto
    }

    .col-lg-1 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 8.33333333%
    }

    .col-lg-2 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 16.66666667%
    }

    .col-lg-3 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 25%
    }

    .col-lg-4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 33.33333333%
    }

    .col-lg-5 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 41.66666667%
    }

    .col-lg-6 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 50%
    }

    .col-lg-7 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 58.33333333%
    }

    .col-lg-8 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 66.66666667%
    }

    .col-lg-9 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 75%
    }

    .col-lg-10 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 83.33333333%
    }

    .col-lg-11 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 91.66666667%
    }

    .col-lg-12 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 100%
    }

    .offset-lg-0 {
        margin-right: 0
    }

    .offset-lg-1 {
        margin-right: 8.33333333%
    }

    .offset-lg-2 {
        margin-right: 16.66666667%
    }

    .offset-lg-3 {
        margin-right: 25%
    }

    .offset-lg-4 {
        margin-right: 33.33333333%
    }

    .offset-lg-5 {
        margin-right: 41.66666667%
    }

    .offset-lg-6 {
        margin-right: 50%
    }

    .offset-lg-7 {
        margin-right: 58.33333333%
    }

    .offset-lg-8 {
        margin-right: 66.66666667%
    }

    .offset-lg-9 {
        margin-right: 75%
    }

    .offset-lg-10 {
        margin-right: 83.33333333%
    }

    .offset-lg-11 {
        margin-right: 91.66666667%
    }

    .g-lg-0,
    .gx-lg-0 {
        --ins-gutter-x: 0
    }

    .g-lg-0,
    .gy-lg-0 {
        --ins-gutter-y: 0
    }

    .g-lg-1,
    .gx-lg-1 {
        --ins-gutter-x: 0.3125rem
    }

    .g-lg-1,
    .gy-lg-1 {
        --ins-gutter-y: 0.3125rem
    }

    .g-lg-2,
    .gx-lg-2 {
        --ins-gutter-x: 0.625rem
    }

    .g-lg-2,
    .gy-lg-2 {
        --ins-gutter-y: 0.625rem
    }

    .g-lg-3,
    .gx-lg-3 {
        --ins-gutter-x: 1.25rem
    }

    .g-lg-3,
    .gy-lg-3 {
        --ins-gutter-y: 1.25rem
    }

    .g-lg-4,
    .gx-lg-4 {
        --ins-gutter-x: 1.875rem
    }

    .g-lg-4,
    .gy-lg-4 {
        --ins-gutter-y: 1.875rem
    }

    .g-lg-5,
    .gx-lg-5 {
        --ins-gutter-x: 3.75rem
    }

    .g-lg-5,
    .gy-lg-5 {
        --ins-gutter-y: 3.75rem
    }
}

@media (min-width:1200px) {
    .col-xl {
        -webkit-box-flex: 1;
        -ms-flex: 1 0 0px;
        flex: 1 0 0
    }

    .row-cols-xl-auto>* {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto
    }

    .row-cols-xl-1>* {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 100%
    }

    .row-cols-xl-2>* {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 50%
    }

    .row-cols-xl-3>* {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 33.33333333%
    }

    .row-cols-xl-4>* {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 25%
    }

    .row-cols-xl-5>* {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 20%
    }

    .row-cols-xl-6>* {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 16.66666667%
    }

    .col-xl-auto {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto
    }

    .col-xl-1 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 8.33333333%
    }

    .col-xl-2 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 16.66666667%
    }

    .col-xl-3 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 25%
    }

    .col-xl-4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 33.33333333%
    }

    .col-xl-5 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 41.66666667%
    }

    .col-xl-6 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 50%
    }

    .col-xl-7 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 58.33333333%
    }

    .col-xl-8 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 66.66666667%
    }

    .col-xl-9 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 75%
    }

    .col-xl-10 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 83.33333333%
    }

    .col-xl-11 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 91.66666667%
    }

    .col-xl-12 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 100%
    }

    .offset-xl-0 {
        margin-right: 0
    }

    .offset-xl-1 {
        margin-right: 8.33333333%
    }

    .offset-xl-2 {
        margin-right: 16.66666667%
    }

    .offset-xl-3 {
        margin-right: 25%
    }

    .offset-xl-4 {
        margin-right: 33.33333333%
    }

    .offset-xl-5 {
        margin-right: 41.66666667%
    }

    .offset-xl-6 {
        margin-right: 50%
    }

    .offset-xl-7 {
        margin-right: 58.33333333%
    }

    .offset-xl-8 {
        margin-right: 66.66666667%
    }

    .offset-xl-9 {
        margin-right: 75%
    }

    .offset-xl-10 {
        margin-right: 83.33333333%
    }

    .offset-xl-11 {
        margin-right: 91.66666667%
    }

    .g-xl-0,
    .gx-xl-0 {
        --ins-gutter-x: 0
    }

    .g-xl-0,
    .gy-xl-0 {
        --ins-gutter-y: 0
    }

    .g-xl-1,
    .gx-xl-1 {
        --ins-gutter-x: 0.3125rem
    }

    .g-xl-1,
    .gy-xl-1 {
        --ins-gutter-y: 0.3125rem
    }

    .g-xl-2,
    .gx-xl-2 {
        --ins-gutter-x: 0.625rem
    }

    .g-xl-2,
    .gy-xl-2 {
        --ins-gutter-y: 0.625rem
    }

    .g-xl-3,
    .gx-xl-3 {
        --ins-gutter-x: 1.25rem
    }

    .g-xl-3,
    .gy-xl-3 {
        --ins-gutter-y: 1.25rem
    }

    .g-xl-4,
    .gx-xl-4 {
        --ins-gutter-x: 1.875rem
    }

    .g-xl-4,
    .gy-xl-4 {
        --ins-gutter-y: 1.875rem
    }

    .g-xl-5,
    .gx-xl-5 {
        --ins-gutter-x: 3.75rem
    }

    .g-xl-5,
    .gy-xl-5 {
        --ins-gutter-y: 3.75rem
    }
}

@media (min-width:1400px) {
    .col-xxl {
        -webkit-box-flex: 1;
        -ms-flex: 1 0 0px;
        flex: 1 0 0
    }

    .row-cols-xxl-auto>* {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto
    }

    .row-cols-xxl-1>* {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 100%
    }

    .row-cols-xxl-2>* {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 50%
    }

    .row-cols-xxl-3>* {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 33.33333333%
    }

    .row-cols-xxl-4>* {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 25%
    }

    .row-cols-xxl-5>* {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 20%
    }

    .row-cols-xxl-6>* {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 16.66666667%
    }

    .col-xxl-auto {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto
    }

    .col-xxl-1 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 8.33333333%
    }

    .col-xxl-2 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 16.66666667%
    }

    .col-xxl-3 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 25%
    }

    .col-xxl-4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 33.33333333%
    }

    .col-xxl-5 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 41.66666667%
    }

    .col-xxl-6 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 50%
    }

    .col-xxl-7 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 58.33333333%
    }

    .col-xxl-8 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 66.66666667%
    }

    .col-xxl-9 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 75%
    }

    .col-xxl-10 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 83.33333333%
    }

    .col-xxl-11 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 91.66666667%
    }

    .col-xxl-12 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 100%
    }

    .offset-xxl-0 {
        margin-right: 0
    }

    .offset-xxl-1 {
        margin-right: 8.33333333%
    }

    .offset-xxl-2 {
        margin-right: 16.66666667%
    }

    .offset-xxl-3 {
        margin-right: 25%
    }

    .offset-xxl-4 {
        margin-right: 33.33333333%
    }

    .offset-xxl-5 {
        margin-right: 41.66666667%
    }

    .offset-xxl-6 {
        margin-right: 50%
    }

    .offset-xxl-7 {
        margin-right: 58.33333333%
    }

    .offset-xxl-8 {
        margin-right: 66.66666667%
    }

    .offset-xxl-9 {
        margin-right: 75%
    }

    .offset-xxl-10 {
        margin-right: 83.33333333%
    }

    .offset-xxl-11 {
        margin-right: 91.66666667%
    }

    .g-xxl-0,
    .gx-xxl-0 {
        --ins-gutter-x: 0
    }

    .g-xxl-0,
    .gy-xxl-0 {
        --ins-gutter-y: 0
    }

    .g-xxl-1,
    .gx-xxl-1 {
        --ins-gutter-x: 0.3125rem
    }

    .g-xxl-1,
    .gy-xxl-1 {
        --ins-gutter-y: 0.3125rem
    }

    .g-xxl-2,
    .gx-xxl-2 {
        --ins-gutter-x: 0.625rem
    }

    .g-xxl-2,
    .gy-xxl-2 {
        --ins-gutter-y: 0.625rem
    }

    .g-xxl-3,
    .gx-xxl-3 {
        --ins-gutter-x: 1.25rem
    }

    .g-xxl-3,
    .gy-xxl-3 {
        --ins-gutter-y: 1.25rem
    }

    .g-xxl-4,
    .gx-xxl-4 {
        --ins-gutter-x: 1.875rem
    }

    .g-xxl-4,
    .gy-xxl-4 {
        --ins-gutter-y: 1.875rem
    }

    .g-xxl-5,
    .gx-xxl-5 {
        --ins-gutter-x: 3.75rem
    }

    .g-xxl-5,
    .gy-xxl-5 {
        --ins-gutter-y: 3.75rem
    }
}

.table {
    --ins-table-color-type: initial;
    --ins-table-bg-type: initial;
    --ins-table-color-state: initial;
    --ins-table-bg-state: initial;
    --ins-table-color: var(--ins-body-color);
    --ins-table-bg: transparent;
    --ins-table-border-color: var(--ins-light);
    --ins-table-accent-bg: transparent;
    --ins-table-striped-color: var(--ins-body-color);
    --ins-table-striped-bg: rgba(var(--ins-light-rgb), 0.45);
    --ins-table-active-color: var(--ins-body-color);
    --ins-table-active-bg: rgba(var(--ins-light-rgb), 0.45);
    --ins-table-hover-color: var(--ins-body-color);
    --ins-table-hover-bg: rgba(var(--ins-light-rgb), 0.45);
    width: 100%;
    margin-bottom: 1.25rem;
    vertical-align: middle;
    border-color: var(--ins-table-border-color)
}

.table>:not(caption)>*>* {
    padding: 1.25em .6rem;
    color: var(--ins-table-color-state, var(--ins-table-color-type, var(--ins-table-color)));
    background-color: var(--ins-table-bg);
    border-bottom-width: var(--ins-border-width);
    -webkit-box-shadow: inset 0 0 0 9999px var(--ins-table-bg-state, var(--ins-table-bg-type, var(--ins-table-accent-bg)));
    box-shadow: inset 0 0 0 9999px var(--ins-table-bg-state, var(--ins-table-bg-type, var(--ins-table-accent-bg)))
}

.table>tbody {
    vertical-align: inherit;
    text-align: center;
}

.table>thead {
    vertical-align: bottom
}

.table-group-divider {
    border-top: calc(var(--ins-border-width) * 2) solid currentcolor
}

.caption-top {
    caption-side: top
}

.table-sm>:not(caption)>*>* {
    padding: .5rem .5rem
}



.table-bordered>:not(caption)>*>* {
    border-width: 0 var(--ins-border-width)
}

.table-borderless>:not(caption)>*>* {
    border-bottom-width: 0
}

.table-borderless>:not(:first-child) {
    border-top-width: 0
}

.table-striped>tbody>tr:nth-of-type(odd)>* {
    --ins-table-color-type: var(--ins-table-striped-color);
    --ins-table-bg-type: var(--ins-table-striped-bg)
}

.table-striped-columns>:not(caption)>tr>:nth-child(even) {
    --ins-table-color-type: var(--ins-table-striped-color);
    --ins-table-bg-type: var(--ins-table-striped-bg)
}

.table-active {
    --ins-table-color-state: var(--ins-table-active-color);
    --ins-table-bg-state: rgba(213, 236, 230, 0.22)
}

.table-hover>tbody>tr:hover>* {
    --ins-table-color-state: var(--ins-table-hover-color);
    --ins-table-bg-state: var(--ins-table-hover-bg)
}

.table-primary {
    --ins-table-color: #313a46;
    --ins-table-bg: #d1f0ea;
    --ins-table-border-color: #c1deda;
    --ins-table-striped-bg: #899ea0;
    --ins-table-striped-color: #fff;
    --ins-table-active-bg: #719791;
    --ins-table-active-color: #fff;
    --ins-table-hover-bg: #899ea0;
    --ins-table-hover-color: #fff;
    color: var(--ins-table-color);
    border-color: var(--ins-table-border-color)
}

.table-secondary {
    --ins-table-color: #313a46;
    --ins-table-bg: #d2e6f4;
    --ins-table-border-color: #c2d5e3;
    --ins-table-striped-bg: #8a99a6;
    --ins-table-striped-color: #fff;
    --ins-table-active-bg: #8a99a6;
    --ins-table-active-color: #fff;
    --ins-table-hover-bg: #8a99a6;
    --ins-table-hover-color: #fff;
    color: var(--ins-table-color);
    border-color: var(--ins-table-border-color)
}

.table-success {
    --ins-table-color: #313a46;
    --ins-table-bg: #cef5ea;
    --ins-table-border-color: #bee2da;
    --ins-table-striped-bg: #87a1a0;
    --ins-table-striped-color: #fff;
    --ins-table-active-bg: #87a1a0;
    --ins-table-active-color: #fff;
    --ins-table-hover-bg: #87a1a0;
    --ins-table-hover-color: #fff;
    color: var(--ins-table-color);
    border-color: var(--ins-table-border-color)
}

.table-info {
    --ins-table-color: #313a46;
    --ins-table-bg: #d3f4f4;
    --ins-table-border-color: #c3e1e3;
    --ins-table-striped-bg: #8aa0a6;
    --ins-table-striped-color: #fff;
    --ins-table-active-bg: #8aa0a6;
    --ins-table-active-color: #fff;
    --ins-table-hover-bg: #8aa0a6;
    --ins-table-hover-color: #fff;
    color: var(--ins-table-color);
    border-color: var(--ins-table-border-color)
}

.table-warning {
    --ins-table-color: #313a46;
    --ins-table-bg: #feeede;
    --ins-table-border-color: #eadccf;
    --ins-table-striped-bg: #a29d9a;
    --ins-table-striped-color: #fff;
    --ins-table-active-bg: #a29d9a;
    --ins-table-active-color: #fff;
    --ins-table-hover-bg: #a29d9a;
    --ins-table-hover-color: #fff;
    color: var(--ins-table-color);
    border-color: var(--ins-table-border-color)
}

.table-danger {
    --ins-table-color: #313a46;
    --ins-table-bg: #fbdde0;
    --ins-table-border-color: #e7cdd1;
    --ins-table-striped-bg: #a0949b;
    --ins-table-striped-color: #fff;
    --ins-table-active-bg: #a0949b;
    --ins-table-active-color: #fff;
    --ins-table-hover-bg: #a0949b;
    --ins-table-hover-color: #fff;
    color: var(--ins-table-color);
    border-color: var(--ins-table-border-color)
}

.table-light {
    --ins-table-color: #313a46;
    --ins-table-bg: #eef2f7;
    --ins-table-border-color: #dbe0e5;
    --ins-table-striped-bg: #999fa7;
    --ins-table-striped-color: #fff;
    --ins-table-active-bg: #999fa7;
    --ins-table-active-color: #fff;
    --ins-table-hover-bg: #999fa7;
    --ins-table-hover-color: #fff;
    color: var(--ins-table-color);
    border-color: var(--ins-table-border-color)
}

.table-dark {

    --ins-table-bg: #deefeb;
    --ins-table-border-color: #464e59;
    --ins-table-striped-bg: #8e9399;
    --ins-table-striped-color: #fff;
    --ins-table-active-bg: #8e9399;
    --ins-table-active-color: #fff;
    --ins-table-hover-bg: #8e9399;
    --ins-table-hover-color: #fff;
    color: var(--ins-table-color);
    border-color: var(--ins-table-border-color)
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width:575.98px) {
    .table-responsive-sm {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch
    }
}

@media (max-width:767.98px) {
    .table-responsive-md {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch
    }
}

@media (max-width:991.98px) {
    .table-responsive-lg {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch
    }
}

@media (max-width:1199.98px) {
    .table-responsive-xl {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch
    }
}

@media (max-width:1399.98px) {
    .table-responsive-xxl {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch
    }
}

.form-label {
    margin-bottom: .5rem;
    font-weight: var(--ins-font-weight-semibold)
}

.col-form-label {
    padding-top: calc(.4532rem + var(--ins-border-width));
    padding-bottom: calc(.4532rem + var(--ins-border-width));
    margin-bottom: 0;
    font-size: inherit;
    font-weight: var(--ins-font-weight-semibold);
    line-height: 1.5
}

.col-form-label-lg {
    padding-top: calc(.5512rem + var(--ins-border-width));
    padding-bottom: calc(.5512rem + var(--ins-border-width));
    font-size: 1.01625rem
}

.col-form-label-sm {
    padding-top: calc(.3125rem + var(--ins-border-width));
    padding-bottom: calc(.3125rem + var(--ins-border-width));
    font-size: .788rem
}

.form-text {
    margin-top: .25rem;
    font-size: .75em;
    color: var(--ins-secondary-color)
}

.form-control {
    display: block;
    width: 100%;
    padding: .4532rem .77rem;
    font-size: .813rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--ins-body-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--ins-secondary-bg);
    background-clip: padding-box;
    border: var(--ins-border-width) solid var(--ins-border-color);
    border-radius: var(--ins-border-radius);
    -webkit-transition: none;
    transition: none;
    border: 1px solid #e7e9eb;
    cursor: pointer;
}

[data-bs-theme=dark] .form-control {
    background-color: #1f2a34
}



.form-control[type=file] {
    overflow: hidden
}

.form-control[type=file]:not(:disabled):not([readonly]) {
    cursor: pointer
}

.form-control:focus {
    color: var(--ins-body-color);
    background-color: var(--ins-secondary-bg);
    border-color: var(--ins-dark-border-subtle);
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none
}

.form-control::-webkit-date-and-time-value {
    min-width: 85px;
    height: 1.5em;
    margin: 0
}

.form-control::-webkit-datetime-edit {
    display: block;
    padding: 0
}

.form-control::-webkit-input-placeholder {
    color: var(--ins-secondary-color);
    opacity: 1
}

.form-control::-moz-placeholder {
    color: var(--ins-secondary-color);
    opacity: 1
}

.form-control:-ms-input-placeholder {
    color: var(--ins-secondary-color);
    opacity: 1
}

.form-control::-ms-input-placeholder {
    color: var(--ins-secondary-color);
    opacity: 1
}

.form-control::placeholder {
    color: var(--ins-secondary-color);
    opacity: 1
}

.form-control:disabled {
    background-color: var(--ins-tertiary-bg);
    opacity: 1
}

.form-control::-webkit-file-upload-button {
    padding: .4532rem .77rem;
    margin: -.4532rem -.77rem;
    -webkit-margin-end: .77rem;
    margin-inline-end: .77rem;
    color: var(--ins-body-color);
    background-color: var(--ins-tertiary-bg);
    pointer-events: none;
    border-color: inherit;
    border-style: solid;
    border-width: 0;
    border-inline-end-width: var(--ins-border-width);
    border-radius: 0;
    -webkit-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out
}

.form-control::file-selector-button {
    padding: .4532rem .77rem;
    margin: -.4532rem -.77rem;
    -webkit-margin-end: .77rem;
    margin-inline-end: .77rem;
    color: var(--ins-body-color);
    background-color: var(--ins-tertiary-bg);
    pointer-events: none;
    border-color: inherit;
    border-style: solid;
    border-width: 0;
    border-inline-end-width: var(--ins-border-width);
    border-radius: 0;
    -webkit-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out
}

@media (prefers-reduced-motion:reduce) {
    .form-control::-webkit-file-upload-button {
        -webkit-transition: none;
        transition: none
    }

    .form-control::file-selector-button {
        -webkit-transition: none;
        transition: none
    }
}

.form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
    background-color: var(--ins-secondary-bg)
}

.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
    background-color: var(--ins-secondary-bg)
}

.form-control-plaintext {
    display: block;
    width: 100%;
    padding: .4532rem 0;
    margin-bottom: 0;
    line-height: 1.5;
    color: var(--ins-body-color);
    background-color: transparent;
    border: solid transparent;
    border-width: var(--ins-border-width) 0
}

.form-control-plaintext:focus {
    outline: 0
}

.form-control-plaintext.form-control-lg,
.form-control-plaintext.form-control-sm {
    padding-left: 0;
    padding-right: 0
}

.form-control-sm {
    min-height: calc(1.5em + .625rem + calc(var(--ins-border-width) * 2));
    padding: .3125rem .7rem;
    font-size: .788rem;
    border-radius: var(--ins-border-radius-sm)
}

.form-control-sm::-webkit-file-upload-button {
    padding: .3125rem .7rem;
    margin: -.3125rem -.7rem;
    -webkit-margin-end: .7rem;
    margin-inline-end: .7rem
}

.form-control-sm::file-selector-button {
    padding: .3125rem .7rem;
    margin: -.3125rem -.7rem;
    -webkit-margin-end: .7rem;
    margin-inline-end: .7rem
}

.form-control-lg {
    min-height: calc(1.5em + 1.1024rem + calc(var(--ins-border-width) * 2));
    padding: .5512rem 1.5rem;
    font-size: 1.01625rem;
    border-radius: var(--ins-border-radius-lg)
}

.form-control-lg::-webkit-file-upload-button {
    padding: .5512rem 1.5rem;
    margin: -.5512rem -1.5rem;
    -webkit-margin-end: 1.5rem;
    margin-inline-end: 1.5rem
}

.form-control-lg::file-selector-button {
    padding: .5512rem 1.5rem;
    margin: -.5512rem -1.5rem;
    -webkit-margin-end: 1.5rem;
    margin-inline-end: 1.5rem
}

textarea.form-control {
    min-height: calc(1.5em + .9064rem + calc(var(--ins-border-width) * 2))
}

textarea.form-control-sm {
    min-height: calc(1.5em + .625rem + calc(var(--ins-border-width) * 2))
}

textarea.form-control-lg {
    min-height: calc(1.5em + 1.1024rem + calc(var(--ins-border-width) * 2))
}

.form-control-color {
    width: 3rem;
    height: calc(1.5em + .9064rem + calc(var(--ins-border-width) * 2));
    padding: .4532rem
}

.form-control-color:not(:disabled):not([readonly]) {
    cursor: pointer
}

.form-control-color::-moz-color-swatch {
    border: 0 !important;
    border-radius: var(--ins-border-radius)
}

.form-control-color::-webkit-color-swatch {
    border: 0 !important;
    border-radius: var(--ins-border-radius)
}

.form-control-color.form-control-sm {
    height: calc(1.5em + .625rem + calc(var(--ins-border-width) * 2))
}

.form-control-color.form-control-lg {
    height: calc(1.5em + 1.1024rem + calc(var(--ins-border-width) * 2))
}

.form-select {
    --ins-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    display: block;
    width: 100%;
    padding: .4532rem .77rem .4532rem 2.31rem;
    font-size: .813rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--ins-body-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--ins-secondary-bg);
    background-image: var(--ins-form-select-bg-img), var(--ins-form-select-bg-icon, none);
    background-repeat: no-repeat;
    background-position: left .77rem center;
    background-size: 14px 10px;
    border: var(--ins-border-width) solid var(--ins-border-color);

    -webkit-transition: none;
    transition: none;

}

.form-select:focus {
    border-color: var(--ins-dark-border-subtle);
    outline: 0;
    -webkit-box-shadow: 0 0 0 0 rgba(26, 179, 148, .25);
    box-shadow: 0 0 0 0 rgba(26, 179, 148, .25)
}

.form-select[multiple],
.form-select[size]:not([size="1"]) {
    padding-left: .77rem;
    background-image: none
}

.form-select:disabled {
    background-color: var(--ins-tertiary-bg)
}

.form-select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 var(--ins-body-color)
}

.form-select-sm {
    padding-top: .3125rem;
    padding-bottom: .3125rem;
    padding-right: .7rem;
    font-size: .788rem;
    border-radius: var(--ins-border-radius-sm)
}

.form-select-lg {
    padding-top: .5512rem;
    padding-bottom: .5512rem;
    padding-right: 1.5rem;
    font-size: 1.01625rem;
    border-radius: var(--ins-border-radius-lg)
}

[data-bs-theme=dark] .form-select {
    --ins-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23aab8c5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")
}

.form-check {
    display: block;
    min-height: 1.2195rem;
    padding-right: 1.75em;
    margin-bottom: 0
}

.form-check .form-check-input {

    margin-right: -1.75em
}

.form-check-reverse {
    padding-left: 1.75em;
    padding-right: 0;
    text-align: left
}

.form-check-reverse .form-check-input {
    float: left;
    margin-left: -1.75em;
    margin-right: 0
}

.form-check-input {
    --ins-form-check-bg: var(--ins-secondary-bg);
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 1.25em;
    height: 1.25em;
    margin-top: .125em;
    vertical-align: top;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--ins-form-check-bg);
    background-image: var(--ins-form-check-bg-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: var(--ins-border-width) solid var(--ins-border-color);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact
}

.form-check-input[type=checkbox] {
    border-radius: .25em
}

.form-check-input[type=radio] {
    border-radius: 50%
}

.form-check-input:active {
    -webkit-filter: brightness(90%);
    filter: brightness(90%)
}

.form-check-input:focus {
    border-color: var(--ins-dark-border-subtle);
    outline: 0;
    -webkit-box-shadow: 0 0 0 0 rgba(26, 179, 148, .25);
    box-shadow: 0 0 0 0 rgba(26, 179, 148, .25)
}

.form-check-input:checked {
    background-color: var(--ins-primary);
    border-color: var(--ins-primary)
}

.form-check-input:checked[type=checkbox] {
    --ins-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e")
}

.form-check-input:checked[type=radio] {
    --ins-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e")
}

.form-check-input[type=checkbox]:indeterminate {
    background-color: var(--ins-primary);
    border-color: var(--ins-primary);
    --ins-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e")
}

.form-check-input:disabled {
    pointer-events: none;
    -webkit-filter: none;
    filter: none;
    opacity: .5
}

.form-check-input:disabled~.form-check-label,
.form-check-input[disabled]~.form-check-label {
    cursor: default;
    opacity: .5
}

.form-switch {
    padding-right: 2.5em
}

.form-switch .form-check-input {
    --ins-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
    width: 40px;
    margin-right: -2.5em;
    background-image: var(--ins-form-switch-bg);
    background-position: right center;
    border-radius: 2em;
    -webkit-transition: background-position .15s ease-in-out;
    transition: background-position .15s ease-in-out
}

@media (prefers-reduced-motion:reduce) {
    .form-switch .form-check-input {
        -webkit-transition: none;
        transition: none
    }
}

.form-switch .form-check-input:focus {
    --ins-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='var%28--ins-dark-border-subtle%29'/%3e%3c/svg%3e")
}

.form-switch .form-check-input:checked {
    background-position: left center;
    --ins-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e")
}

.form-switch.form-check-reverse {
    padding-left: 2.5em;
    padding-right: 0
}

.form-switch.form-check-reverse .form-check-input {
    margin-left: -2.5em;
    margin-right: 0
}

.form-check-inline {
    display: inline-block;
    margin-left: 1rem
}

.btn-check {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none
}

.btn-check:disabled+.btn,
.btn-check[disabled]+.btn {
    pointer-events: none;
    -webkit-filter: none;
    filter: none;
    opacity: .65
}

[data-bs-theme=dark] .form-switch .form-check-input:not(:checked):not(:focus) {
    --ins-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.25%29'/%3e%3c/svg%3e")
}

.form-range {
    width: 100%;
    height: 1rem;
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent
}

.form-range:focus {
    outline: 0
}

.form-range:focus::-webkit-slider-thumb {
    -webkit-box-shadow: 0 0 0 1px #f1f2f7, none;
    box-shadow: 0 0 0 1px #f1f2f7, none
}

.form-range:focus::-moz-range-thumb {
    box-shadow: 0 0 0 1px #f1f2f7, none
}

.form-range::-moz-focus-outer {
    border: 0
}

.form-range::-webkit-slider-thumb {
    width: 1rem;
    height: 1rem;
    margin-top: -.25rem;
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--ins-primary);
    border: 0;
    border-radius: 1rem;
    -webkit-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out
}

@media (prefers-reduced-motion:reduce) {
    .form-range::-webkit-slider-thumb {
        -webkit-transition: none;
        transition: none
    }
}

.form-range::-webkit-slider-thumb:active {
    background-color: var(--ins-primary)
}

.form-range::-webkit-slider-runnable-track {
    width: 100%;
    height: .5rem;
    color: transparent;
    cursor: pointer;
    background-color: var(--ins-tertiary-bg);
    border-color: transparent;
    border-radius: 1rem
}

.form-range::-moz-range-thumb {
    width: 1rem;
    height: 1rem;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--ins-primary);
    border: 0;
    border-radius: 1rem;
    -moz-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
}

@media (prefers-reduced-motion:reduce) {
    .form-range::-moz-range-thumb {
        -moz-transition: none;
        transition: none
    }
}

.form-range::-moz-range-thumb:active {
    background-color: var(--ins-primary)
}

.form-range::-moz-range-track {
    width: 100%;
    height: .5rem;
    color: transparent;
    cursor: pointer;
    background-color: var(--ins-tertiary-bg);
    border-color: transparent;
    border-radius: 1rem
}

.form-range:disabled {
    pointer-events: none
}

.form-range:disabled::-webkit-slider-thumb {
    background-color: var(--ins-secondary-color)
}

.form-range:disabled::-moz-range-thumb {
    background-color: var(--ins-secondary-color)
}

.form-floating {
    position: relative
}

.form-floating>.form-control,
.form-floating>.form-control-plaintext,
.form-floating>.form-select {
    height: calc(3.5rem + calc(var(--ins-border-width) * 2));
    min-height: calc(3.5rem + calc(var(--ins-border-width) * 2));
    line-height: 1.25
}

.form-floating>label {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    max-width: 100%;
    height: 100%;
    padding: 1rem .77rem;
    overflow: hidden;
    color: rgba(var(--ins-body-color-rgb), .65);
    text-align: start;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    border: var(--ins-border-width) solid transparent;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transition: opacity .1s ease-in-out, -webkit-transform .1s ease-in-out;
    transition: opacity .1s ease-in-out, -webkit-transform .1s ease-in-out;
    transition: opacity .1s ease-in-out, transform .1s ease-in-out;
    transition: opacity .1s ease-in-out, transform .1s ease-in-out, -webkit-transform .1s ease-in-out
}

@media (prefers-reduced-motion:reduce) {
    .form-floating>label {
        -webkit-transition: none;
        transition: none
    }
}

.form-floating>.form-control,
.form-floating>.form-control-plaintext {
    padding: 1rem .77rem
}

.form-floating>.form-control-plaintext::-webkit-input-placeholder,
.form-floating>.form-control::-webkit-input-placeholder {
    color: transparent
}

.form-floating>.form-control-plaintext::-moz-placeholder,
.form-floating>.form-control::-moz-placeholder {
    color: transparent
}

.form-floating>.form-control-plaintext:-ms-input-placeholder,
.form-floating>.form-control:-ms-input-placeholder {
    color: transparent
}

.form-floating>.form-control-plaintext::-ms-input-placeholder,
.form-floating>.form-control::-ms-input-placeholder {
    color: transparent
}

.form-floating>.form-control-plaintext::placeholder,
.form-floating>.form-control::placeholder {
    color: transparent
}

.form-floating>.form-control-plaintext:not(:-moz-placeholder),
.form-floating>.form-control:not(:-moz-placeholder) {
    padding-top: 1.625rem;
    padding-bottom: .625rem
}

.form-floating>.form-control-plaintext:not(:-ms-input-placeholder),
.form-floating>.form-control:not(:-ms-input-placeholder) {
    padding-top: 1.625rem;
    padding-bottom: .625rem
}

.form-floating>.form-control-plaintext:focus,
.form-floating>.form-control-plaintext:not(:placeholder-shown),
.form-floating>.form-control:focus,
.form-floating>.form-control:not(:placeholder-shown) {
    padding-top: 1.625rem;
    padding-bottom: .625rem
}

.form-floating>.form-control-plaintext:-webkit-autofill,
.form-floating>.form-control:-webkit-autofill {
    padding-top: 1.625rem;
    padding-bottom: .625rem
}

.form-floating>.form-select {
    padding-top: 1.625rem;
    padding-bottom: .625rem;
    padding-right: .77rem
}

.form-floating>.form-control:not(:-moz-placeholder)~label {
    transform: scale(.85) translateY(-.5rem) translateX(-.15rem)
}

.form-floating>.form-control:not(:-ms-input-placeholder)~label {
    transform: scale(.85) translateY(-.5rem) translateX(-.15rem)
}

.form-floating>.form-control-plaintext~label,
.form-floating>.form-control:focus~label,
.form-floating>.form-control:not(:placeholder-shown)~label,
.form-floating>.form-select~label {
    -webkit-transform: scale(.85) translateY(-.5rem) translateX(-.15rem);
    transform: scale(.85) translateY(-.5rem) translateX(-.15rem)
}

.form-floating>.form-control:-webkit-autofill~label {
    -webkit-transform: scale(.85) translateY(-.5rem) translateX(-.15rem);
    transform: scale(.85) translateY(-.5rem) translateX(-.15rem)
}

.form-floating>textarea:not(:-moz-placeholder)~label::after {
    position: absolute;
    inset: 1rem .385rem;
    z-index: -1;
    height: 1.875em;
    content: "";
    background-color: var(--ins-secondary-bg);
    border-radius: var(--ins-border-radius)
}

.form-floating>textarea:not(:-ms-input-placeholder)~label::after {
    position: absolute;
    inset: 1rem .385rem;
    z-index: -1;
    height: 1.875em;
    content: "";
    background-color: var(--ins-secondary-bg);
    border-radius: var(--ins-border-radius)
}

.form-floating>textarea:focus~label::after,
.form-floating>textarea:not(:placeholder-shown)~label::after {
    position: absolute;
    inset: 1rem .385rem;
    z-index: -1;
    height: 1.875em;
    content: "";
    background-color: var(--ins-secondary-bg);
    border-radius: var(--ins-border-radius)
}

.form-floating>textarea:disabled~label::after {
    background-color: var(--ins-tertiary-bg)
}

.form-floating>.form-control-plaintext~label {
    border-width: var(--ins-border-width) 0
}

.form-floating>.form-control:disabled~label,
.form-floating>:disabled~label {
    color: #8a969c
}

.input-group {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: 100%;

}



.input-group>.form-control,
.input-group>.form-floating,
.input-group>.form-select {
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0
}

.input-group>.form-control:focus,
.input-group>.form-floating:focus-within,
.input-group>.form-select:focus {
    z-index: 5
}

.input-group .btn {
    position: relative;
    z-index: 2
}

.input-group .btn:focus {
    z-index: 5
}

.input-group-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: .4532rem .77rem;
    font-size: .813rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--ins-body-color);
    text-align: center;
    white-space: nowrap;
    background-color: var(--ins-tertiary-bg);
    border: var(--ins-border-width) solid var(--ins-border-color);
    border-radius: var(--ins-border-radius)
}

.input-group-lg>.btn,
.input-group-lg>.form-control,
.input-group-lg>.form-select,
.input-group-lg>.input-group-text {
    padding: .5512rem 1.5rem;
    font-size: 1.01625rem;
    border-radius: var(--ins-border-radius-lg)
}

.input-group-sm>.btn,
.input-group-sm>.form-control,
.input-group-sm>.form-select,
.input-group-sm>.input-group-text {
    padding: .3125rem .7rem;
    font-size: .788rem;
    border-radius: var(--ins-border-radius-sm)
}

.input-group-lg>.form-select,
.input-group-sm>.form-select {
    padding-left: 3.08rem
}

.input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),
.input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control,
.input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select,
.input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}

.input-group.has-validation>.dropdown-toggle:nth-last-child(n+4),
.input-group.has-validation>.form-floating:nth-last-child(n+3)>.form-control,
.input-group.has-validation>.form-floating:nth-last-child(n+3)>.form-select,
.input-group.has-validation>:nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}

.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    margin-right: calc(-1 * var(--ins-border-width));
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.input-group>.form-floating:not(:first-child)>.form-control,
.input-group>.form-floating:not(:first-child)>.form-select {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.valid-feedback {
    display: none;
    width: 100%;
    margin-top: .25rem;
    font-size: .75em;
    color: var(--ins-form-valid-color)
}

.valid-tooltip {
    position: absolute;
    top: 100%;
    z-index: 5;
    display: none;
    max-width: 100%;
    padding: .3125rem .625rem;
    margin-top: .1rem;
    font-size: .788rem;
    color: #fff;
    background-color: var(--ins-success);
    border-radius: var(--ins-border-radius)
}

.is-valid~.valid-feedback,
.is-valid~.valid-tooltip,
.was-validated :valid~.valid-feedback,
.was-validated :valid~.valid-tooltip {
    display: block
}

.form-control.is-valid,
.was-validated .form-control:valid {
    border-color: var(--ins-form-valid-border-color);
    padding-left: calc(1.5em + .9064rem);

    background-repeat: no-repeat;
    background-position: left calc(.375em + .2266rem) center;
    background-size: calc(.75em + .4532rem) calc(.75em + .4532rem)
}

.form-control.is-valid:focus,
.was-validated .form-control:valid:focus {
    border-color: var(--ins-form-valid-border-color);
    -webkit-box-shadow: 0 0 0 0 rgba(var(--ins-success-rgb), .25);
    box-shadow: 0 0 0 0 rgba(var(--ins-success-rgb), .25)
}

.was-validated textarea.form-control:valid,
textarea.form-control.is-valid {
    padding-left: calc(1.5em + .9064rem);
    background-position: top calc(.375em + .2266rem) left calc(.375em + .2266rem)
}

.form-select.is-valid,
.was-validated .form-select:valid {
    border-color: var(--ins-form-valid-border-color)
}

.form-select.is-valid:not([multiple]):not([size]),
.form-select.is-valid:not([multiple])[size="1"],
.was-validated .form-select:valid:not([multiple]):not([size]),
.was-validated .form-select:valid:not([multiple])[size="1"] {
    --ins-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%230acf97' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    padding-left: 4.235rem;
    background-position: left .77rem center, center left 2.31rem;
    background-size: 14px 10px, calc(.75em + .4532rem) calc(.75em + .4532rem)
}

.form-select.is-valid:focus,
.was-validated .form-select:valid:focus {
    border-color: var(--ins-form-valid-border-color);
    -webkit-box-shadow: 0 0 0 0 rgba(var(--ins-success-rgb), .25);
    box-shadow: 0 0 0 0 rgba(var(--ins-success-rgb), .25)
}

.form-control-color.is-valid,
.was-validated .form-control-color:valid {
    width: calc(3rem + calc(1.5em + .9064rem))
}

.form-check-input.is-valid,
.was-validated .form-check-input:valid {
    border-color: var(--ins-form-valid-border-color)
}

.form-check-input.is-valid:checked,
.was-validated .form-check-input:valid:checked {
    background-color: var(--ins-form-valid-color)
}

.form-check-input.is-valid:focus,
.was-validated .form-check-input:valid:focus {
    -webkit-box-shadow: 0 0 0 0 rgba(var(--ins-success-rgb), .25);
    box-shadow: 0 0 0 0 rgba(var(--ins-success-rgb), .25)
}

.form-check-input.is-valid~.form-check-label,
.was-validated .form-check-input:valid~.form-check-label {
    color: var(--ins-form-valid-color)
}

.form-check-inline .form-check-input~.valid-feedback {
    margin-right: .5em
}

.input-group>.form-control:not(:focus).is-valid,
.input-group>.form-floating:not(:focus-within).is-valid,
.input-group>.form-select:not(:focus).is-valid,
.was-validated .input-group>.form-control:not(:focus):valid,
.was-validated .input-group>.form-floating:not(:focus-within):valid,
.was-validated .input-group>.form-select:not(:focus):valid {
    z-index: 3
}

.invalid-feedback {
    display: none;
    width: 100%;
    margin-top: .25rem;
    font-size: .75em;
    color: var(--ins-form-invalid-color)
}

.invalid-tooltip {
    position: absolute;
    top: 100%;
    z-index: 5;
    display: none;
    max-width: 100%;
    padding: .3125rem .625rem;
    margin-top: .1rem;
    font-size: .788rem;
    color: #fff;
    background-color: var(--ins-danger);
    border-radius: var(--ins-border-radius)
}

.is-invalid~.invalid-feedback,
.is-invalid~.invalid-tooltip,
.was-validated :invalid~.invalid-feedback,
.was-validated :invalid~.invalid-tooltip {
    display: block
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
    border-color: var(--ins-form-invalid-border-color);
    padding-left: calc(1.5em + .9064rem);

    background-repeat: no-repeat;
    background-position: left calc(.375em + .2266rem) center;
    background-size: calc(.75em + .4532rem) calc(.75em + .4532rem)
}

.form-control.is-invalid:focus,
.was-validated .form-control:invalid:focus {
    border-color: var(--ins-form-invalid-border-color);
    -webkit-box-shadow: 0 0 0 0 rgba(var(--ins-danger-rgb), .25);
    box-shadow: 0 0 0 0 rgba(var(--ins-danger-rgb), .25)
}

.was-validated textarea.form-control:invalid,
textarea.form-control.is-invalid {
    padding-left: calc(1.5em + .9064rem);
    background-position: top calc(.375em + .2266rem) left calc(.375em + .2266rem)
}

.form-select.is-invalid,
.was-validated .form-select:invalid {
    border-color: var(--ins-form-invalid-border-color)
}

.form-select.is-invalid:not([multiple]):not([size]),
.form-select.is-invalid:not([multiple])[size="1"],
.was-validated .form-select:invalid:not([multiple]):not([size]),
.was-validated .form-select:invalid:not([multiple])[size="1"] {
    --ins-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23ed5565'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ed5565' stroke='none'/%3e%3c/svg%3e");
    padding-left: 4.235rem;
    background-position: left .77rem center, center left 2.31rem;
    background-size: 14px 10px, calc(.75em + .4532rem) calc(.75em + .4532rem)
}

.form-select.is-invalid:focus,
.was-validated .form-select:invalid:focus {
    border-color: var(--ins-form-invalid-border-color);
    -webkit-box-shadow: 0 0 0 0 rgba(var(--ins-danger-rgb), .25);
    box-shadow: 0 0 0 0 rgba(var(--ins-danger-rgb), .25)
}

.form-control-color.is-invalid,
.was-validated .form-control-color:invalid {
    width: calc(3rem + calc(1.5em + .9064rem))
}

.form-check-input.is-invalid,
.was-validated .form-check-input:invalid {
    border-color: var(--ins-form-invalid-border-color)
}

.form-check-input.is-invalid:checked,
.was-validated .form-check-input:invalid:checked {
    background-color: var(--ins-form-invalid-color)
}

.form-check-input.is-invalid:focus,
.was-validated .form-check-input:invalid:focus {
    -webkit-box-shadow: 0 0 0 0 rgba(var(--ins-danger-rgb), .25);
    box-shadow: 0 0 0 0 rgba(var(--ins-danger-rgb), .25)
}

.form-check-input.is-invalid~.form-check-label,
.was-validated .form-check-input:invalid~.form-check-label {
    color: var(--ins-form-invalid-color)
}

.form-check-inline .form-check-input~.invalid-feedback {
    margin-right: .5em
}

.input-group>.form-control:not(:focus).is-invalid,
.input-group>.form-floating:not(:focus-within).is-invalid,
.input-group>.form-select:not(:focus).is-invalid,
.was-validated .input-group>.form-control:not(:focus):invalid,
.was-validated .input-group>.form-floating:not(:focus-within):invalid,
.was-validated .input-group>.form-select:not(:focus):invalid {
    z-index: 4
}

.btn {
    --ins-btn-padding-x: 1.1rem;
    --ins-btn-padding-y: 0.4532rem;
    --ins-btn-font-size: 0.813rem;
    --ins-btn-font-weight: var(--ins-font-weight-medium);
    --ins-btn-line-height: 1.5;
    --ins-btn-color: var(--ins-body-color);
    --ins-btn-bg: transparent;
    --ins-btn-border-width: var(--ins-border-width);
    --ins-btn-border-color: transparent;
    --ins-btn-border-radius: var(--ins-border-radius);
    --ins-btn-hover-border-color: transparent;
    --ins-btn-box-shadow: 0px 2px 6px 0px;
    --ins-btn-disabled-opacity: 0.65;
    --ins-btn-focus-box-shadow: 0 0 0 0 rgba(var(--ins-btn-focus-shadow-rgb), .5);
    display: inline-block;
    padding: var(--ins-btn-padding-y) var(--ins-btn-padding-x);
    font-family: var(--ins-btn-font-family);
    font-size: var(--ins-btn-font-size);
    font-weight: var(--ins-btn-font-weight);
    line-height: var(--ins-btn-line-height);
    color: var(--ins-btn-color);
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: var(--ins-btn-border-width) solid var(--ins-btn-border-color);
    border-radius: var(--ins-btn-border-radius);
    background-color: var(--ins-btn-bg);
    -webkit-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out
}

@media (prefers-reduced-motion:reduce) {
    .btn {
        -webkit-transition: none;
        transition: none
    }
}

.btn:hover {
    color: var(--ins-btn-hover-color);
    background-color: var(--ins-btn-hover-bg);
    border-color: var(--ins-btn-hover-border-color)
}

.btn-check+.btn:hover {
    color: var(--ins-btn-color);
    background-color: var(--ins-btn-bg);
    border-color: var(--ins-btn-border-color)
}

.btn:focus-visible {
    color: var(--ins-btn-hover-color);
    background-color: var(--ins-btn-hover-bg);
    border-color: var(--ins-btn-hover-border-color);
    outline: 0;
    -webkit-box-shadow: var(--ins-btn-focus-box-shadow);
    box-shadow: var(--ins-btn-focus-box-shadow)
}

.btn-check:focus-visible+.btn {
    border-color: var(--ins-btn-hover-border-color);
    outline: 0;
    -webkit-box-shadow: var(--ins-btn-focus-box-shadow);
    box-shadow: var(--ins-btn-focus-box-shadow)
}

.btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active {
    color: var(--ins-btn-active-color);
    background-color: var(--ins-btn-active-bg);
    border-color: var(--ins-btn-active-border-color)
}

.btn-check:checked+.btn:focus-visible,
.btn.active:focus-visible,
.btn.show:focus-visible,
.btn:first-child:active:focus-visible,
:not(.btn-check)+.btn:active:focus-visible {
    -webkit-box-shadow: var(--ins-btn-focus-box-shadow);
    box-shadow: var(--ins-btn-focus-box-shadow)
}

.btn-check:checked:focus-visible+.btn {
    -webkit-box-shadow: var(--ins-btn-focus-box-shadow);
    box-shadow: var(--ins-btn-focus-box-shadow)
}

.btn.disabled,
.btn:disabled,
fieldset:disabled .btn {
    color: var(--ins-btn-disabled-color);
    pointer-events: none;
    background-color: var(--ins-btn-disabled-bg);
    border-color: var(--ins-btn-disabled-border-color);
    opacity: var(--ins-btn-disabled-opacity)
}

.btn-primary {
    --ins-btn-color: #ffffff;
    --ins-btn-bg: #1ab394;
    --ins-btn-border-color: #1ab394;
    --ins-btn-hover-color: #fff;
    --ins-btn-hover-bg: #18a286;
    --ins-btn-hover-border-color: #18a689;
    --ins-btn-focus-shadow-rgb: 60, 190, 164;
    --ins-btn-active-color: #fff;
    --ins-btn-active-bg: #18a689;
    --ins-btn-active-border-color: #18a689;
    --ins-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --ins-btn-disabled-color: #fff;
    --ins-btn-disabled-bg: #1ab394;
    --ins-btn-disabled-border-color: #1ab394
}

.btn-secondary {
    --ins-btn-color: #fff;
    --ins-btn-bg: #1c84c6;
    --ins-btn-border-color: #1c84c6;
    --ins-btn-hover-color: #fff;
    --ins-btn-hover-bg: #1977b3;
    --ins-btn-hover-border-color: #1a7ab7;
    --ins-btn-focus-shadow-rgb: 62, 150, 207;
    --ins-btn-active-color: #fff;
    --ins-btn-active-bg: #1a7ab7;
    --ins-btn-active-border-color: #1a7ab7;
    --ins-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --ins-btn-disabled-color: #fff;
    --ins-btn-disabled-bg: #1c84c6;
    --ins-btn-disabled-border-color: #1c84c6
}

.btn-success {
    --ins-btn-color: #fff;
    --ins-btn-bg: #0acf97;
    --ins-btn-border-color: #0acf97;
    --ins-btn-hover-color: #fff;
    --ins-btn-hover-bg: #09bb89;
    --ins-btn-hover-border-color: #09bf8c;
    --ins-btn-focus-shadow-rgb: 47, 214, 167;
    --ins-btn-active-color: #fff;
    --ins-btn-active-bg: #09bf8c;
    --ins-btn-active-border-color: #09bf8c;
    --ins-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --ins-btn-disabled-color: #fff;
    --ins-btn-disabled-bg: #0acf97;
    --ins-btn-disabled-border-color: #0acf97
}

.btn-info {
    --ins-btn-color: #fff;
    --ins-btn-bg: #23c6c8;
    --ins-btn-border-color: #23c6c8;
    --ins-btn-hover-color: #fff;
    --ins-btn-hover-bg: #20b3b5;
    --ins-btn-hover-border-color: #20b7b9;
    --ins-btn-focus-shadow-rgb: 68, 207, 208;
    --ins-btn-active-color: #fff;
    --ins-btn-active-bg: #20b7b9;
    --ins-btn-active-border-color: #20b7b9;
    --ins-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --ins-btn-disabled-color: #fff;
    --ins-btn-disabled-bg: #23c6c8;
    --ins-btn-disabled-border-color: #23c6c8
}

.btn-warning {
    --ins-btn-color: #fff;
    --ins-btn-bg: #f8ac59;
    --ins-btn-border-color: #f8ac59;
    --ins-btn-hover-color: #fff;
    --ins-btn-hover-bg: #e09c51;
    --ins-btn-hover-border-color: #e59f52;
    --ins-btn-focus-shadow-rgb: 249, 184, 114;
    --ins-btn-active-color: #fff;
    --ins-btn-active-bg: #e59f52;
    --ins-btn-active-border-color: #e59f52;
    --ins-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --ins-btn-disabled-color: #fff;
    --ins-btn-disabled-bg: #f8ac59;
    --ins-btn-disabled-border-color: #f8ac59
}

.btn-danger {
    --ins-btn-color: #fff;
    --ins-btn-bg: #FF477B;
    --ins-btn-border-color: #FF477B;
    --ins-btn-hover-color: #fff;
    --ins-btn-hover-bg: #FF477B;
    --ins-btn-hover-border-color: #FF477B;
    --ins-btn-focus-shadow-rgb: 240, 111, 124;
    --ins-btn-active-color: #fff;
    --ins-btn-active-bg: #FF477B;
    --ins-btn-active-border-color: #FF477B;
    --ins-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --ins-btn-disabled-color: #fff;
    --ins-btn-disabled-bg: #FF477B;
    --ins-btn-disabled-border-color: #FF477B
}

.btn-purple {
    --ins-btn-color: #fff;
    --ins-btn-bg: #7b70ef;
    --ins-btn-border-color: #7b70ef;
    --ins-btn-hover-color: #fff;
    --ins-btn-hover-bg: #6f65d8;
    --ins-btn-hover-border-color: #7268dd;
    --ins-btn-focus-shadow-rgb: 143, 133, 241;
    --ins-btn-active-color: #fff;
    --ins-btn-active-bg: #7268dd;
    --ins-btn-active-border-color: #7268dd;
    --ins-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --ins-btn-disabled-color: #fff;
    --ins-btn-disabled-bg: #7b70ef;
    --ins-btn-disabled-border-color: #7b70ef
}

.btn-light {
    --ins-btn-color: #313a46;
    --ins-btn-bg: #eef2f7;
    --ins-btn-border-color: #eef2f7;
    --ins-btn-hover-color: #313a46;
    --ins-btn-hover-bg: #d7dbe0;
    --ins-btn-hover-border-color: #dce0e4;
    --ins-btn-focus-shadow-rgb: 210, 214, 220;
    --ins-btn-active-color: #313a46;
    --ins-btn-active-bg: #dce0e4;
    --ins-btn-active-border-color: #dce0e4;
    --ins-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --ins-btn-disabled-color: #313a46;
    --ins-btn-disabled-bg: #eef2f7;
    --ins-btn-disabled-border-color: #eef2f7
}

.btn-dark {
    --ins-btn-color: #fff;
    --ins-btn-bg: #313a46;
    --ins-btn-border-color: #313a46;
    --ins-btn-hover-color: #fff;
    --ins-btn-hover-bg: #505862;
    --ins-btn-hover-border-color: #404954;
    --ins-btn-focus-shadow-rgb: 80, 88, 98;
    --ins-btn-active-color: #fff;
    --ins-btn-active-bg: #505862;
    --ins-btn-active-border-color: #464e59;
    --ins-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --ins-btn-disabled-color: #fff;
    --ins-btn-disabled-bg: #313a46;
    --ins-btn-disabled-border-color: #313a46
}

.btn-outline-primary {
    --ins-btn-color: #1ab394;
    --ins-btn-border-color: #1ab394;
    --ins-btn-hover-color: #fff;
    --ins-btn-hover-bg: #1ab394;
    --ins-btn-hover-border-color: #1ab394;
    --ins-btn-focus-shadow-rgb: 26, 179, 148;
    --ins-btn-active-color: #fff;
    --ins-btn-active-bg: #1ab394;
    --ins-btn-active-border-color: #1ab394;
    --ins-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --ins-btn-disabled-color: #1ab394;
    --ins-btn-disabled-bg: transparent;
    --ins-btn-disabled-border-color: #1ab394;
    --ins-gradient: none
}

.btn-outline-secondary {
    --ins-btn-color: #1c84c6;
    --ins-btn-border-color: #1c84c6;
    --ins-btn-hover-color: #fff;
    --ins-btn-hover-bg: #1c84c6;
    --ins-btn-hover-border-color: #1c84c6;
    --ins-btn-focus-shadow-rgb: 28, 132, 198;
    --ins-btn-active-color: #fff;
    --ins-btn-active-bg: #1c84c6;
    --ins-btn-active-border-color: #1c84c6;
    --ins-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --ins-btn-disabled-color: #1c84c6;
    --ins-btn-disabled-bg: transparent;
    --ins-btn-disabled-border-color: #1c84c6;
    --ins-gradient: none
}

.btn-outline-success {
    --ins-btn-color: #0acf97;
    --ins-btn-border-color: #0acf97;
    --ins-btn-hover-color: #fff;
    --ins-btn-hover-bg: #0acf97;
    --ins-btn-hover-border-color: #0acf97;
    --ins-btn-focus-shadow-rgb: 10, 207, 151;
    --ins-btn-active-color: #fff;
    --ins-btn-active-bg: #0acf97;
    --ins-btn-active-border-color: #0acf97;
    --ins-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --ins-btn-disabled-color: #0acf97;
    --ins-btn-disabled-bg: transparent;
    --ins-btn-disabled-border-color: #0acf97;
    --ins-gradient: none
}

.btn-outline-info {
    --ins-btn-color: #23c6c8;
    --ins-btn-border-color: #23c6c8;
    --ins-btn-hover-color: #fff;
    --ins-btn-hover-bg: #23c6c8;
    --ins-btn-hover-border-color: #23c6c8;
    --ins-btn-focus-shadow-rgb: 35, 198, 200;
    --ins-btn-active-color: #fff;
    --ins-btn-active-bg: #23c6c8;
    --ins-btn-active-border-color: #23c6c8;
    --ins-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --ins-btn-disabled-color: #23c6c8;
    --ins-btn-disabled-bg: transparent;
    --ins-btn-disabled-border-color: #23c6c8;
    --ins-gradient: none
}

.btn-outline-warning {
    --ins-btn-color: #f8ac59;
    --ins-btn-border-color: #f8ac59;
    --ins-btn-hover-color: #fff;
    --ins-btn-hover-bg: #f8ac59;
    --ins-btn-hover-border-color: #f8ac59;
    --ins-btn-focus-shadow-rgb: 248, 172, 89;
    --ins-btn-active-color: #fff;
    --ins-btn-active-bg: #f8ac59;
    --ins-btn-active-border-color: #f8ac59;
    --ins-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --ins-btn-disabled-color: #f8ac59;
    --ins-btn-disabled-bg: transparent;
    --ins-btn-disabled-border-color: #f8ac59;
    --ins-gradient: none
}

.btn-outline-danger {
    --ins-btn-color: #FF477B;
    --ins-btn-border-color: #FF477B;
    --ins-btn-hover-color: #fff;
    --ins-btn-hover-bg: #FF477B;
    --ins-btn-hover-border-color: #FF477B;
    --ins-btn-focus-shadow-rgb: 237, 85, 101;
    --ins-btn-active-color: #fff;
    --ins-btn-active-bg: #FF477B;
    --ins-btn-active-border-color: #FF477B;
    --ins-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --ins-btn-disabled-color: #FF477B;
    --ins-btn-disabled-bg: transparent;
    --ins-btn-disabled-border-color: #FF477B;
    --ins-gradient: none
}

.btn-outline-purple {
    --ins-btn-color: #7b70ef;
    --ins-btn-border-color: #7b70ef;
    --ins-btn-hover-color: #fff;
    --ins-btn-hover-bg: #7b70ef;
    --ins-btn-hover-border-color: #7b70ef;
    --ins-btn-focus-shadow-rgb: 123, 112, 239;
    --ins-btn-active-color: #fff;
    --ins-btn-active-bg: #7b70ef;
    --ins-btn-active-border-color: #7b70ef;
    --ins-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --ins-btn-disabled-color: #7b70ef;
    --ins-btn-disabled-bg: transparent;
    --ins-btn-disabled-border-color: #7b70ef;
    --ins-gradient: none
}

.btn-outline-light {
    --ins-btn-color: #eef2f7;
    --ins-btn-border-color: #eef2f7;
    --ins-btn-hover-color: #313a46;
    --ins-btn-hover-bg: #eef2f7;
    --ins-btn-hover-border-color: #eef2f7;
    --ins-btn-focus-shadow-rgb: 238, 242, 247;
    --ins-btn-active-color: #313a46;
    --ins-btn-active-bg: #eef2f7;
    --ins-btn-active-border-color: #eef2f7;
    --ins-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --ins-btn-disabled-color: #eef2f7;
    --ins-btn-disabled-bg: transparent;
    --ins-btn-disabled-border-color: #eef2f7;
    --ins-gradient: none
}

.btn-outline-dark {
    --ins-btn-color: #313a46;
    --ins-btn-border-color: #313a46;
    --ins-btn-hover-color: #fff;
    --ins-btn-hover-bg: #313a46;
    --ins-btn-hover-border-color: #313a46;
    --ins-btn-focus-shadow-rgb: 49, 58, 70;
    --ins-btn-active-color: #fff;
    --ins-btn-active-bg: #313a46;
    --ins-btn-active-border-color: #313a46;
    --ins-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --ins-btn-disabled-color: #313a46;
    --ins-btn-disabled-bg: transparent;
    --ins-btn-disabled-border-color: #313a46;
    --ins-gradient: none
}

.btn-link {
    --ins-btn-font-weight: 400;
    --ins-btn-color: var(--ins-link-color);
    --ins-btn-bg: transparent;
    --ins-btn-border-color: transparent;
    --ins-btn-hover-color: var(--ins-link-hover-color);
    --ins-btn-hover-border-color: transparent;
    --ins-btn-active-color: var(--ins-link-hover-color);
    --ins-btn-active-border-color: transparent;
    --ins-btn-disabled-color: #8a969c;
    --ins-btn-disabled-border-color: transparent;
    --ins-btn-box-shadow: 0 0 0 #000;
    --ins-btn-focus-shadow-rgb: 60, 190, 164;
    text-decoration: none
}

.btn-link:focus-visible {
    color: var(--ins-btn-color)
}

.btn-link:hover {
    color: var(--ins-btn-hover-color)
}

.btn-group-lg>.btn,
.btn-lg {
    --ins-btn-padding-y: 0.5512rem;
    --ins-btn-padding-x: 1.5rem;
    --ins-btn-font-size: 1.01625rem;
    --ins-btn-border-radius: var(--ins-border-radius-lg)
}

.btn-group-sm>.btn,
.btn-sm {
    --ins-btn-padding-y: 0.3125rem;
    --ins-btn-padding-x: 0.7rem;
    --ins-btn-font-size: 0.788rem;
    --ins-btn-border-radius: var(--ins-border-radius-sm)
}

.fade {
    -webkit-transition: opacity .15s linear;
    transition: opacity .15s linear
}

@media (prefers-reduced-motion:reduce) {
    .fade {
        -webkit-transition: none;
        transition: none
    }
}

.fade:not(.show) {
    opacity: 0
}

.collapse:not(.show) {
    display: none
}

.collapsing {
    height: 0;
    overflow: hidden;
    -webkit-transition: height .35s ease;
    transition: height .35s ease
}

@media (prefers-reduced-motion:reduce) {
    .collapsing {
        -webkit-transition: none;
        transition: none
    }
}

.collapsing.collapse-horizontal {
    width: 0;
    height: auto;
    -webkit-transition: width .35s ease;
    transition: width .35s ease
}

@media (prefers-reduced-motion:reduce) {
    .collapsing.collapse-horizontal {
        -webkit-transition: none;
        transition: none
    }
}

.dropdown,
.dropdown-center,
.dropend,
.dropstart,
.dropup,
.dropup-center {
    position: relative
}

.dropdown-toggle {
    white-space: nowrap
}

.dropdown-toggle::after {
    display: inline-block;
    margin-right: .255em;
    vertical-align: .15em;
    content: "";
    border-top: .3em solid;
    border-left: .3em solid transparent;
    border-bottom: 0;
    border-right: .3em solid transparent
}

.dropdown-toggle:empty::after {
    margin-right: 0
}

.dropdown-menu {
    --ins-dropdown-zindex: 1000;
    --ins-dropdown-min-width: 11rem;
    --ins-dropdown-padding-x: 0;
    --ins-dropdown-padding-y: 0.25rem;
    --ins-dropdown-spacer: 0.125rem;
    --ins-dropdown-font-size: 0.813rem;
    --ins-dropdown-color: var(--ins-body-color);
    --ins-dropdown-bg: var(--ins-secondary-bg);
    --ins-dropdown-border-color: var(--ins-border-color);
    --ins-dropdown-border-radius: 0.3rem;
    --ins-dropdown-border-width: var(--ins-border-width);
    --ins-dropdown-inner-border-radius: calc(0.3rem - var(--ins-border-width));
    --ins-dropdown-divider-bg: var(--ins-border-color);
    --ins-dropdown-divider-margin-y: 0.625rem;
    --ins-dropdown-box-shadow: var(--ins-box-shadow);
    --ins-dropdown-link-color: var(--ins-body-color);
    --ins-dropdown-link-hover-color: var(--ins-body-color);
    --ins-dropdown-link-hover-bg: var(--ins-tertiary-bg);
    --ins-dropdown-link-active-color: var(--ins-body-color);
    --ins-dropdown-link-active-bg: var(--ins-tertiary-bg);
    --ins-dropdown-link-disabled-color: var(--ins-secondary-color);
    --ins-dropdown-item-padding-x: 0.9375rem;
    --ins-dropdown-item-padding-y: 0.4rem;
    --ins-dropdown-header-color: inherit;
    --ins-dropdown-header-padding-x: 0.703125rem;
    --ins-dropdown-header-padding-y: 0.5rem;
    position: absolute;
    z-index: var(--ins-dropdown-zindex);
    display: none;
    min-width: var(--ins-dropdown-min-width);
    padding: var(--ins-dropdown-padding-y) var(--ins-dropdown-padding-x);
    margin: 0;
    font-size: var(--ins-dropdown-font-size);
    color: var(--ins-dropdown-color);
    text-align: right;
    list-style: none;
    background-color: var(--ins-dropdown-bg);
    background-clip: padding-box;
    border: var(--ins-dropdown-border-width) solid var(--ins-dropdown-border-color);
    border-radius: var(--ins-dropdown-border-radius)
}

.dropdown-menu[data-bs-popper] {
    top: 100%;
    right: 0;
    margin-top: var(--ins-dropdown-spacer)
}

.dropdown-menu-start {
    --bs-position: start
}

.dropdown-menu-start[data-bs-popper] {
    left: auto;
    right: 0
}

.dropdown-menu-end {
    --bs-position: start
}

.dropdown-menu-end[data-bs-popper] {
    left: 0;
    right: auto
}

@media (min-width:576px) {
    .dropdown-menu-sm-start {
        --bs-position: start
    }

    .dropdown-menu-sm-start[data-bs-popper] {
        left: auto;
        right: 0
    }

    .dropdown-menu-sm-end {
        --bs-position: end
    }

    .dropdown-menu-sm-end[data-bs-popper] {
        left: 0;
        right: auto
    }
}

@media (min-width:768px) {
    .dropdown-menu-md-start {
        --bs-position: start
    }

    .dropdown-menu-md-start[data-bs-popper] {
        left: auto;
        right: 0
    }

    .dropdown-menu-md-end {
        --bs-position: end
    }

    .dropdown-menu-md-end[data-bs-popper] {
        left: 0;
        right: auto
    }
}

@media (min-width:992px) {
    .dropdown-menu-lg-start {
        --bs-position: start
    }

    .dropdown-menu-lg-start[data-bs-popper] {
        left: auto;
        right: 0
    }

    .dropdown-menu-lg-end {
        --bs-position: end
    }

    .dropdown-menu-lg-end[data-bs-popper] {
        left: 0;
        right: auto
    }
}

@media (min-width:1200px) {
    .dropdown-menu-xl-start {
        --bs-position: start
    }

    .dropdown-menu-xl-start[data-bs-popper] {
        left: auto;
        right: 0
    }

    .dropdown-menu-xl-end {
        --bs-position: end
    }

    .dropdown-menu-xl-end[data-bs-popper] {
        left: 0;
        right: auto
    }
}

@media (min-width:1400px) {
    .dropdown-menu-xxl-start {
        --bs-position: start
    }

    .dropdown-menu-xxl-start[data-bs-popper] {
        left: auto;
        right: 0
    }

    .dropdown-menu-xxl-end {
        --bs-position: end
    }

    .dropdown-menu-xxl-end[data-bs-popper] {
        left: 0;
        right: auto
    }
}

.dropup .dropdown-menu[data-bs-popper] {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: var(--ins-dropdown-spacer)
}

.dropup .dropdown-toggle::after {
    display: inline-block;
    margin-right: .255em;
    vertical-align: .15em;
    content: "";
    border-top: 0;
    border-left: .3em solid transparent;
    border-bottom: .3em solid;
    border-right: .3em solid transparent
}

.dropup .dropdown-toggle:empty::after {
    margin-right: 0
}

.dropend .dropdown-menu[data-bs-popper] {
    top: 0;
    left: auto;
    right: 100%;
    margin-top: 0;
    margin-right: var(--ins-dropdown-spacer)
}

.dropend .dropdown-toggle::after {
    display: inline-block;
    margin-right: .255em;
    vertical-align: .15em;
    content: "";
    border-top: .3em solid transparent;
    border-left: 0;
    border-bottom: .3em solid transparent;
    border-right: .3em solid
}

.dropend .dropdown-toggle:empty::after {
    margin-right: 0
}

.dropend .dropdown-toggle::after {
    vertical-align: 0
}

.dropstart .dropdown-menu[data-bs-popper] {
    top: 0;
    left: 100%;
    right: auto;
    margin-top: 0;
    margin-left: var(--ins-dropdown-spacer)
}

.dropstart .dropdown-toggle::after {
    display: inline-block;
    margin-right: .255em;
    vertical-align: .15em;
    content: ""
}

.dropstart .dropdown-toggle::after {
    display: none
}

.dropstart .dropdown-toggle::before {
    display: inline-block;
    margin-left: .255em;
    vertical-align: .15em;
    content: "";
    border-top: .3em solid transparent;
    border-left: .3em solid;
    border-bottom: .3em solid transparent
}

.dropstart .dropdown-toggle:empty::after {
    margin-right: 0
}

.dropstart .dropdown-toggle::before {
    vertical-align: 0
}

.dropdown-divider {
    height: 0;
    margin: var(--ins-dropdown-divider-margin-y) 0;
    overflow: hidden;
    border-top: 1px solid var(--ins-dropdown-divider-bg);
    opacity: 1
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: var(--ins-dropdown-item-padding-y) var(--ins-dropdown-item-padding-x);
    clear: both;
    font-weight: 400;
    color: var(--ins-dropdown-link-color);
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    border-radius: var(--ins-dropdown-item-border-radius, 0)
}

.dropdown-item:focus,
.dropdown-item:hover {
    color: var(--ins-dropdown-link-hover-color);
    background-color: var(--ins-dropdown-link-hover-bg)
}

.dropdown-item.active,
.dropdown-item:active {
    color: var(--ins-dropdown-link-active-color);
    text-decoration: none;
    background-color: var(--ins-dropdown-link-active-bg)
}

.dropdown-item.disabled,
.dropdown-item:disabled {
    color: var(--ins-dropdown-link-disabled-color);
    pointer-events: none;
    background-color: transparent
}

.dropdown-menu.show {
    display: block
}

.dropdown-header {
    display: block;
    padding: var(--ins-dropdown-header-padding-y) var(--ins-dropdown-header-padding-x);
    margin-bottom: 0;
    font-size: .788rem;
    color: var(--ins-dropdown-header-color);
    white-space: nowrap
}

.dropdown-item-text {
    display: block;
    padding: var(--ins-dropdown-item-padding-y) var(--ins-dropdown-item-padding-x);
    color: var(--ins-dropdown-link-color)
}

.dropdown-menu-dark {
    --ins-dropdown-color: #e7e9eb;
    --ins-dropdown-bg: #343a40;
    --ins-dropdown-border-color: var(--ins-border-color);
    --ins-dropdown-link-color: #e7e9eb;
    --ins-dropdown-link-hover-color: #fff;
    --ins-dropdown-divider-bg: var(--ins-border-color);
    --ins-dropdown-link-hover-bg: rgba(255, 255, 255, 0.15);
    --ins-dropdown-link-active-color: var(--ins-body-color);
    --ins-dropdown-link-active-bg: var(--ins-tertiary-bg);
    --ins-dropdown-link-disabled-color: #a1a9b1;
    --ins-dropdown-header-color: #a1a9b1
}

.btn-group,
.btn-group-vertical {
    position: relative;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    vertical-align: middle
}

.btn-group-vertical>.btn,
.btn-group>.btn {
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto
}

.btn-group-vertical>.btn-check:checked+.btn,
.btn-group-vertical>.btn-check:focus+.btn,
.btn-group-vertical>.btn.active,
.btn-group-vertical>.btn:active,
.btn-group-vertical>.btn:focus,
.btn-group-vertical>.btn:hover,
.btn-group>.btn-check:checked+.btn,
.btn-group>.btn-check:focus+.btn,
.btn-group>.btn.active,
.btn-group>.btn:active,
.btn-group>.btn:focus,
.btn-group>.btn:hover {
    z-index: 1
}

.btn-toolbar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start
}

.btn-toolbar .input-group {
    width: auto
}

.btn-group {
    border-radius: var(--ins-border-radius)
}

.btn-group>.btn-group:not(:first-child),
.btn-group>:not(.btn-check:first-child)+.btn {
    margin-right: calc(-1 * var(--ins-border-width))
}

.btn-group>.btn-group:not(:last-child)>.btn,
.btn-group>.btn.dropdown-toggle-split:first-child,
.btn-group>.btn:not(:last-child):not(.dropdown-toggle) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}

.btn-group>.btn-group:not(:first-child)>.btn,
.btn-group>.btn:nth-child(n+3),
.btn-group>:not(.btn-check)+.btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.dropdown-toggle-split {
    padding-left: .825rem;
    padding-right: .825rem
}

.dropdown-toggle-split::after,
.dropend .dropdown-toggle-split::after,
.dropup .dropdown-toggle-split::after {
    margin-right: 0
}

.dropstart .dropdown-toggle-split::before {
    margin-left: 0
}

.btn-group-sm>.btn+.dropdown-toggle-split,
.btn-sm+.dropdown-toggle-split {
    padding-left: .525rem;
    padding-right: .525rem
}

.btn-group-lg>.btn+.dropdown-toggle-split,
.btn-lg+.dropdown-toggle-split {
    padding-left: 1.125rem;
    padding-right: 1.125rem
}

.btn-group-vertical {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.btn-group-vertical>.btn,
.btn-group-vertical>.btn-group {
    width: 100%
}

.btn-group-vertical>.btn-group:not(:first-child),
.btn-group-vertical>.btn:not(:first-child) {
    margin-top: calc(-1 * var(--ins-border-width))
}

.btn-group-vertical>.btn-group:not(:last-child)>.btn,
.btn-group-vertical>.btn:not(:last-child):not(.dropdown-toggle) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

.btn-group-vertical>.btn-group:not(:first-child)>.btn,
.btn-group-vertical>.btn:nth-child(n+3),
.btn-group-vertical>:not(.btn-check)+.btn {
    border-top-right-radius: 0;
    border-top-left-radius: 0
}

.nav {
    --ins-nav-link-padding-x: 1rem;
    --ins-nav-link-padding-y: 0.5rem;
    --ins-nav-link-color: var(--ins-body-color);
    --ins-nav-link-hover-color: var(--ins-link-hover-color);
    --ins-nav-link-disabled-color: var(--ins-secondary-color);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-right: 0;
    margin-bottom: 0;
    list-style: none
}

.nav-link {
    display: block;
    padding: var(--ins-nav-link-padding-y) var(--ins-nav-link-padding-x);
    font-size: var(--ins-nav-link-font-size);
    font-weight: var(--ins-nav-link-font-weight);
    color: var(--ins-nav-link-color);
    background: 0 0;
    border: 0;
    -webkit-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out
}

@media (prefers-reduced-motion:reduce) {
    .nav-link {
        -webkit-transition: none;
        transition: none
    }
}

.nav-link:focus,
.nav-link:hover {
    color: var(--ins-nav-link-hover-color)
}

.nav-link:focus-visible {
    outline: 0;
    -webkit-box-shadow: 0 0 0 0 rgba(26, 179, 148, .25);
    box-shadow: 0 0 0 0 rgba(26, 179, 148, .25)
}

.nav-link.disabled,
.nav-link:disabled {
    color: var(--ins-nav-link-disabled-color);
    pointer-events: none;
    cursor: default
}

.nav-tabs {
    --ins-nav-tabs-border-width: var(--ins-border-width);
    --ins-nav-tabs-border-color: var(--ins-border-color);
    --ins-nav-tabs-border-radius: var(--ins-border-radius);
    --ins-nav-tabs-link-hover-border-color: var(--ins-secondary-bg) var(--ins-secondary-bg) var(--ins-border-color);
    --ins-nav-tabs-link-active-color: var(--ins-link-color);
    --ins-nav-tabs-link-active-bg: var(--ins-secondary-bg);
    --ins-nav-tabs-link-active-border-color: var(--ins-border-color) var(--ins-border-color) var(--ins-secondary-bg);
    border-bottom: var(--ins-nav-tabs-border-width) solid var(--ins-nav-tabs-border-color)
}

.nav-tabs .nav-link {
    margin-bottom: calc(-1 * var(--ins-nav-tabs-border-width));
    border: var(--ins-nav-tabs-border-width) solid transparent;
    border-top-right-radius: var(--ins-nav-tabs-border-radius);
    border-top-left-radius: var(--ins-nav-tabs-border-radius)
}

.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
    isolation: isolate;
    border-color: var(--ins-nav-tabs-link-hover-border-color)
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    color: var(--ins-nav-tabs-link-active-color);
    background-color: var(--ins-nav-tabs-link-active-bg);
    border-color: var(--ins-nav-tabs-link-active-border-color)
}

.nav-tabs .dropdown-menu {
    margin-top: calc(-1 * var(--ins-nav-tabs-border-width));
    border-top-right-radius: 0;
    border-top-left-radius: 0
}

.nav-pills {
    --ins-nav-pills-border-radius: var(--ins-border-radius);
    --ins-nav-pills-link-active-color: #fff;
    --ins-nav-pills-link-active-bg: var(--ins-primary)
}

.nav-pills .nav-link {
    border-radius: var(--ins-nav-pills-border-radius)
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: var(--ins-nav-pills-link-active-color);
    background-color: var(--ins-nav-pills-link-active-bg)
}

.nav-underline {
    --ins-nav-underline-gap: 1rem;
    --ins-nav-underline-border-width: 0.125rem;
    --ins-nav-underline-link-active-color: var(--ins-emphasis-color);
    gap: var(--ins-nav-underline-gap)
}

.nav-underline .nav-link {
    padding-left: 0;
    padding-right: 0;
    border-bottom: var(--ins-nav-underline-border-width) solid transparent
}

.nav-underline .nav-link:focus,
.nav-underline .nav-link:hover {
    border-bottom-color: currentcolor
}

.nav-underline .nav-link.active,
.nav-underline .show>.nav-link {
    font-weight: var(--ins-font-weight-bold);
    color: var(--ins-nav-underline-link-active-color);
    border-bottom-color: currentcolor
}

.nav-fill .nav-item,
.nav-fill>.nav-link {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    text-align: center
}

.nav-justified .nav-item,
.nav-justified>.nav-link {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    text-align: center
}

.nav-fill .nav-item .nav-link,
.nav-justified .nav-item .nav-link {
    width: 100%
}

.tab-content>.tab-pane {
    display: none
}

.tab-content>.active {
    display: block
}

.navbar {
    --ins-navbar-padding-x: 0;
    --ins-navbar-padding-y: 0.625rem;
    --ins-navbar-color: rgba(var(--ins-emphasis-color-rgb), 0.65);
    --ins-navbar-hover-color: rgba(var(--ins-emphasis-color-rgb), 0.8);
    --ins-navbar-disabled-color: rgba(var(--ins-emphasis-color-rgb), 0.3);
    --ins-navbar-active-color: rgba(var(--ins-emphasis-color-rgb), 1);
    --ins-navbar-brand-padding-y: 0.3475625rem;
    --ins-navbar-brand-margin-end: 1rem;
    --ins-navbar-brand-font-size: 1.01625rem;
    --ins-navbar-brand-color: rgba(var(--ins-emphasis-color-rgb), 1);
    --ins-navbar-brand-hover-color: rgba(var(--ins-emphasis-color-rgb), 1);
    --ins-navbar-nav-link-padding-x: 0.5rem;
    --ins-navbar-toggler-padding-y: 0.25rem;
    --ins-navbar-toggler-padding-x: 0.75rem;
    --ins-navbar-toggler-font-size: 1.01625rem;
    --ins-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2876, 76, 92, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    --ins-navbar-toggler-border-color: rgba(var(--ins-emphasis-color-rgb), 0.15);
    --ins-navbar-toggler-border-radius: var(--ins-border-radius);
    --ins-navbar-toggler-focus-width: 0;
    --ins-navbar-toggler-transition: box-shadow 0.15s ease-in-out;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: var(--ins-navbar-padding-y) var(--ins-navbar-padding-x)
}

.navbar>.container,
.navbar>.container-fluid,
.navbar>.container-lg,
.navbar>.container-md,
.navbar>.container-sm,
.navbar>.container-xl,
.navbar>.container-xxl {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: inherit;
    flex-wrap: inherit;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.navbar-brand {
    padding-top: var(--ins-navbar-brand-padding-y);
    padding-bottom: var(--ins-navbar-brand-padding-y);
    margin-left: var(--ins-navbar-brand-margin-end);
    font-size: var(--ins-navbar-brand-font-size);
    color: var(--ins-navbar-brand-color);
    white-space: nowrap
}

.navbar-brand:focus,
.navbar-brand:hover {
    color: var(--ins-navbar-brand-hover-color)
}

.navbar-nav {
    --ins-nav-link-padding-x: 0;
    --ins-nav-link-padding-y: 0.5rem;
    --ins-nav-link-color: var(--ins-navbar-color);
    --ins-nav-link-hover-color: var(--ins-navbar-hover-color);
    --ins-nav-link-disabled-color: var(--ins-navbar-disabled-color);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-right: 0;
    margin-bottom: 0;
    list-style: none
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
    color: var(--ins-navbar-active-color)
}

.navbar-nav .dropdown-menu {
    position: static
}

.navbar-text {
    padding-top: .5rem;
    padding-bottom: .5rem;
    color: var(--ins-navbar-color)
}

.navbar-text a,
.navbar-text a:focus,
.navbar-text a:hover {
    color: var(--ins-navbar-active-color)
}

.navbar-collapse {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.navbar-toggler {
    padding: var(--ins-navbar-toggler-padding-y) var(--ins-navbar-toggler-padding-x);
    font-size: var(--ins-navbar-toggler-font-size);
    line-height: 1;
    color: var(--ins-navbar-color);
    background-color: transparent;
    border: var(--ins-border-width) solid var(--ins-navbar-toggler-border-color);
    border-radius: var(--ins-navbar-toggler-border-radius);
    -webkit-transition: var(--ins-navbar-toggler-transition);
    transition: var(--ins-navbar-toggler-transition)
}

@media (prefers-reduced-motion:reduce) {
    .navbar-toggler {
        -webkit-transition: none;
        transition: none
    }
}

.navbar-toggler:hover {
    text-decoration: none
}

.navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
    -webkit-box-shadow: 0 0 0 var(--ins-navbar-toggler-focus-width);
    box-shadow: 0 0 0 var(--ins-navbar-toggler-focus-width)
}

.navbar-toggler-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    background-image: var(--ins-navbar-toggler-icon-bg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%
}

.navbar-nav-scroll {
    max-height: var(--ins-scroll-height, 75vh);
    overflow-y: auto
}

@media (min-width:576px) {
    .navbar-expand-sm {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start
    }

    .navbar-expand-sm .navbar-nav {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row
    }

    .navbar-expand-sm .navbar-nav .dropdown-menu {
        position: absolute
    }

    .navbar-expand-sm .navbar-nav .nav-link {
        padding-left: var(--ins-navbar-nav-link-padding-x);
        padding-right: var(--ins-navbar-nav-link-padding-x)
    }

    .navbar-expand-sm .navbar-nav-scroll {
        overflow: visible
    }

    .navbar-expand-sm .navbar-collapse {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-preferred-size: auto;
        flex-basis: auto
    }

    .navbar-expand-sm .navbar-toggler {
        display: none
    }

    .navbar-expand-sm .offcanvas {
        position: static;
        z-index: auto;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        width: auto !important;
        height: auto !important;
        visibility: visible !important;
        background-color: transparent !important;
        border: 0 !important;
        -webkit-transform: none !important;
        transform: none !important;
        -webkit-transition: none;
        transition: none
    }

    .navbar-expand-sm .offcanvas .offcanvas-header {
        display: none
    }

    .navbar-expand-sm .offcanvas .offcanvas-body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-flex: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        padding: 0;
        overflow-y: visible
    }
}

@media (min-width:768px) {
    .navbar-expand-md {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start
    }

    .navbar-expand-md .navbar-nav {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row
    }

    .navbar-expand-md .navbar-nav .dropdown-menu {
        position: absolute
    }

    .navbar-expand-md .navbar-nav .nav-link {
        padding-left: var(--ins-navbar-nav-link-padding-x);
        padding-right: var(--ins-navbar-nav-link-padding-x)
    }

    .navbar-expand-md .navbar-nav-scroll {
        overflow: visible
    }

    .navbar-expand-md .navbar-collapse {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-preferred-size: auto;
        flex-basis: auto
    }

    .navbar-expand-md .navbar-toggler {
        display: none
    }

    .navbar-expand-md .offcanvas {
        position: static;
        z-index: auto;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        width: auto !important;
        height: auto !important;
        visibility: visible !important;
        background-color: transparent !important;
        border: 0 !important;
        -webkit-transform: none !important;
        transform: none !important;
        -webkit-transition: none;
        transition: none
    }

    .navbar-expand-md .offcanvas .offcanvas-header {
        display: none
    }

    .navbar-expand-md .offcanvas .offcanvas-body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-flex: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        padding: 0;
        overflow-y: visible
    }
}

@media (min-width:992px) {
    .navbar-expand-lg {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start
    }

    .navbar-expand-lg .navbar-nav {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row
    }

    .navbar-expand-lg .navbar-nav .dropdown-menu {
        position: absolute
    }

    .navbar-expand-lg .navbar-nav .nav-link {
        padding-left: var(--ins-navbar-nav-link-padding-x);
        padding-right: var(--ins-navbar-nav-link-padding-x)
    }

    .navbar-expand-lg .navbar-nav-scroll {
        overflow: visible
    }

    .navbar-expand-lg .navbar-collapse {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-preferred-size: auto;
        flex-basis: auto
    }

    .navbar-expand-lg .navbar-toggler {
        display: none
    }

    .navbar-expand-lg .offcanvas {
        position: static;
        z-index: auto;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        width: auto !important;
        height: auto !important;
        visibility: visible !important;
        background-color: transparent !important;
        border: 0 !important;
        -webkit-transform: none !important;
        transform: none !important;
        -webkit-transition: none;
        transition: none
    }

    .navbar-expand-lg .offcanvas .offcanvas-header {
        display: none
    }

    .navbar-expand-lg .offcanvas .offcanvas-body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-flex: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        padding: 0;
        overflow-y: visible
    }
}

@media (min-width:1200px) {
    .navbar-expand-xl {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start
    }

    .navbar-expand-xl .navbar-nav {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row
    }

    .navbar-expand-xl .navbar-nav .dropdown-menu {
        position: absolute
    }

    .navbar-expand-xl .navbar-nav .nav-link {
        padding-left: var(--ins-navbar-nav-link-padding-x);
        padding-right: var(--ins-navbar-nav-link-padding-x)
    }

    .navbar-expand-xl .navbar-nav-scroll {
        overflow: visible
    }

    .navbar-expand-xl .navbar-collapse {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-preferred-size: auto;
        flex-basis: auto
    }

    .navbar-expand-xl .navbar-toggler {
        display: none
    }

    .navbar-expand-xl .offcanvas {
        position: static;
        z-index: auto;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        width: auto !important;
        height: auto !important;
        visibility: visible !important;
        background-color: transparent !important;
        border: 0 !important;
        -webkit-transform: none !important;
        transform: none !important;
        -webkit-transition: none;
        transition: none
    }

    .navbar-expand-xl .offcanvas .offcanvas-header {
        display: none
    }

    .navbar-expand-xl .offcanvas .offcanvas-body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-flex: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        padding: 0;
        overflow-y: visible
    }
}

@media (min-width:1400px) {
    .navbar-expand-xxl {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start
    }

    .navbar-expand-xxl .navbar-nav {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row
    }

    .navbar-expand-xxl .navbar-nav .dropdown-menu {
        position: absolute
    }

    .navbar-expand-xxl .navbar-nav .nav-link {
        padding-left: var(--ins-navbar-nav-link-padding-x);
        padding-right: var(--ins-navbar-nav-link-padding-x)
    }

    .navbar-expand-xxl .navbar-nav-scroll {
        overflow: visible
    }

    .navbar-expand-xxl .navbar-collapse {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-preferred-size: auto;
        flex-basis: auto
    }

    .navbar-expand-xxl .navbar-toggler {
        display: none
    }

    .navbar-expand-xxl .offcanvas {
        position: static;
        z-index: auto;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        width: auto !important;
        height: auto !important;
        visibility: visible !important;
        background-color: transparent !important;
        border: 0 !important;
        -webkit-transform: none !important;
        transform: none !important;
        -webkit-transition: none;
        transition: none
    }

    .navbar-expand-xxl .offcanvas .offcanvas-header {
        display: none
    }

    .navbar-expand-xxl .offcanvas .offcanvas-body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-flex: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        padding: 0;
        overflow-y: visible
    }
}

.navbar-expand {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start
}

.navbar-expand .navbar-nav {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row
}

.navbar-expand .navbar-nav .dropdown-menu {
    position: absolute
}

.navbar-expand .navbar-nav .nav-link {
    padding-left: var(--ins-navbar-nav-link-padding-x);
    padding-right: var(--ins-navbar-nav-link-padding-x)
}

.navbar-expand .navbar-nav-scroll {
    overflow: visible
}

.navbar-expand .navbar-collapse {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-preferred-size: auto;
    flex-basis: auto
}

.navbar-expand .navbar-toggler {
    display: none
}

.navbar-expand .offcanvas {
    position: static;
    z-index: auto;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    width: auto !important;
    height: auto !important;
    visibility: visible !important;
    background-color: transparent !important;
    border: 0 !important;
    -webkit-transform: none !important;
    transform: none !important;
    -webkit-transition: none;
    transition: none
}

.navbar-expand .offcanvas .offcanvas-header {
    display: none
}

.navbar-expand .offcanvas .offcanvas-body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible
}

.navbar-dark,
.navbar[data-bs-theme=dark] {
    --ins-navbar-color: rgba(255, 255, 255, 0.55);
    --ins-navbar-hover-color: rgba(255, 255, 255, 0.75);
    --ins-navbar-disabled-color: rgba(255, 255, 255, 0.25);
    --ins-navbar-active-color: #fff;
    --ins-navbar-brand-color: #fff;
    --ins-navbar-brand-hover-color: #fff;
    --ins-navbar-toggler-border-color: rgba(255, 255, 255, 0.1);
    --ins-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
}

[data-bs-theme=dark] .navbar-toggler-icon {
    --ins-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
}

.card {
    --ins-card-spacer-y: 1.25rem;
    --ins-card-spacer-x: 1.25rem;
    --ins-card-title-spacer-y: 0;
    --ins-card-border-width: var(--ins-theme-card-border-width);
    --ins-card-border-color: var(--ins-theme-card-border-color);
    --ins-card-border-radius: var(--ins-border-radius);
    --ins-card-box-shadow: var(--ins-theme-card-box-shadow);
    --ins-card-inner-border-radius: calc(var(--ins-border-radius) - (var(--ins-theme-card-border-width)));
    --ins-card-cap-padding-y: 0.9375rem;
    --ins-card-cap-padding-x: 1.25rem;
    --ins-card-cap-bg: transparent;
    --ins-card-bg: var(--ins-secondary-bg);
    --ins-card-img-overlay-padding: 1.25rem;
    --ins-card-group-margin: 0.625rem;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    height: var(--ins-card-height);
    color: var(--ins-body-color);
    word-wrap: break-word;
    background-color: var(--ins-card-bg);
    background-clip: border-box;
    border: var(--ins-card-border-width) solid var(--ins-card-border-color);
    border-radius: var(--ins-card-border-radius)
}

.card>hr {
    margin-left: 0;
    margin-right: 0
}

.card>.list-group {
    border-top: inherit;
    border-bottom: inherit
}

.card>.list-group:first-child {
    border-top-width: 0;
    border-top-right-radius: var(--ins-card-inner-border-radius);
    border-top-left-radius: var(--ins-card-inner-border-radius)
}

.card>.list-group:last-child {
    border-bottom-width: 0;
    border-bottom-left-radius: var(--ins-card-inner-border-radius);
    border-bottom-right-radius: var(--ins-card-inner-border-radius)
}

.card>.card-header+.list-group,
.card>.list-group+.card-footer {
    border-top: 0
}


.card-title {
    margin-bottom: var(--ins-card-title-spacer-y);
    color: var(--ins-card-title-color)
}

.card-subtitle {
    margin-top: calc(-.5 * var(--ins-card-title-spacer-y));
    margin-bottom: 0;
    color: var(--ins-card-subtitle-color)
}

.card-text:last-child {
    margin-bottom: 0
}

.card-link+.card-link {
    margin-right: var(--ins-card-spacer-x)
}

.card-header {
    padding: var(--ins-card-cap-padding-y) var(--ins-card-cap-padding-x);
    margin-bottom: 0;
    color: var(--ins-card-cap-color);
    background-color: var(--ins-card-cap-bg);
    border-bottom: var(--ins-card-border-width) solid var(--ins-card-border-color);
    padding: 10px;
}

.card-header:first-child {
    border-radius: var(--ins-card-inner-border-radius) var(--ins-card-inner-border-radius) 0 0
}

.card-footer {
    padding: var(--ins-card-cap-padding-y) var(--ins-card-cap-padding-x);
    color: var(--ins-card-cap-color);
    background-color: var(--ins-card-cap-bg);
    border-top: var(--ins-card-border-width) solid var(--ins-card-border-color)
}

.card-footer:last-child {
    border-radius: 0 0 var(--ins-card-inner-border-radius) var(--ins-card-inner-border-radius)
}

.card-header-tabs {
    margin-left: calc(-.5 * var(--ins-card-cap-padding-x));
    margin-bottom: calc(-1 * var(--ins-card-cap-padding-y));
    margin-right: calc(-.5 * var(--ins-card-cap-padding-x));
    border-bottom: 0
}

.card-header-tabs .nav-link.active {
    background-color: var(--ins-card-bg);
    border-bottom-color: var(--ins-card-bg)
}

.card-header-pills {
    margin-left: calc(-.5 * var(--ins-card-cap-padding-x));
    margin-right: calc(-.5 * var(--ins-card-cap-padding-x))
}

.card-img-overlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    padding: var(--ins-card-img-overlay-padding);
    border-radius: var(--ins-card-inner-border-radius)
}

.card-img,
.card-img-bottom,
.card-img-top {

    height: 100%;
    object-fit: contain;
    padding: 10px;
    border-radius: 8px;
}

.card-img,
.card-img-top {
    border-top-right-radius: var(--ins-card-inner-border-radius);
    border-top-left-radius: var(--ins-card-inner-border-radius)
}

.card-img,
.card-img-bottom {
    border-bottom-left-radius: var(--ins-card-inner-border-radius);
    border-bottom-right-radius: var(--ins-card-inner-border-radius)
}

.card-group>.card {
    margin-bottom: var(--ins-card-group-margin)
}

@media (min-width:576px) {
    .card-group {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap
    }

    .card-group>.card {
        -webkit-box-flex: 1;
        -ms-flex: 1 0 0px;
        flex: 1 0 0;
        margin-bottom: 0
    }

    .card-group>.card+.card {
        margin-right: 0;
        border-right: 0
    }

    .card-group>.card:not(:last-child) {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0
    }

    .card-group>.card:not(:last-child)>.card-header,
    .card-group>.card:not(:last-child)>.card-img-top {
        border-top-left-radius: 0
    }

    .card-group>.card:not(:last-child)>.card-footer,
    .card-group>.card:not(:last-child)>.card-img-bottom {
        border-bottom-left-radius: 0
    }

    .card-group>.card:not(:first-child) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0
    }

    .card-group>.card:not(:first-child)>.card-header,
    .card-group>.card:not(:first-child)>.card-img-top {
        border-top-right-radius: 0
    }

    .card-group>.card:not(:first-child)>.card-footer,
    .card-group>.card:not(:first-child)>.card-img-bottom {
        border-bottom-right-radius: 0
    }
}

.accordion {
    --ins-accordion-color: var(--ins-body-color);
    --ins-accordion-bg: var(--ins-secondary-bg);
    --ins-accordion-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;
    --ins-accordion-border-color: var(--ins-border-color);
    --ins-accordion-border-width: var(--ins-border-width);
    --ins-accordion-border-radius: var(--ins-border-radius);
    --ins-accordion-inner-border-radius: calc(var(--ins-border-radius) - (var(--ins-border-width)));
    --ins-accordion-btn-padding-x: 1.25rem;
    --ins-accordion-btn-padding-y: 1rem;
    --ins-accordion-btn-color: var(--ins-body-color);
    --ins-accordion-btn-bg: var(--ins-accordion-bg);
    --ins-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%234c4c5c' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    --ins-accordion-btn-icon-width: 0.75rem;
    --ins-accordion-btn-icon-transform: rotate(-180deg);
    --ins-accordion-btn-icon-transition: transform 0.2s ease-in-out;
    --ins-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%234c4c5c' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    --ins-accordion-btn-focus-box-shadow: none;
    --ins-accordion-body-padding-x: 1.25rem;
    --ins-accordion-body-padding-y: 1rem;
    --ins-accordion-active-color: var(--ins-body-color);
    --ins-accordion-active-bg: var(--ins-tertiary-bg)
}

.accordion-button {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    padding: var(--ins-accordion-btn-padding-y) var(--ins-accordion-btn-padding-x);
    font-size: .813rem;
    color: var(--ins-accordion-btn-color);
    text-align: right;
    background-color: var(--ins-accordion-btn-bg);
    border-radius: 0;
    overflow-anchor: none;
    -webkit-transition: var(--ins-accordion-transition);
    transition: var(--ins-accordion-transition);
    font-size: 16px;
    background-color: #f8ebc1;
    border: 1px solid #ffeaa7;
}

@media (prefers-reduced-motion:reduce) {
    .accordion-button {
        -webkit-transition: none;
        transition: none
    }
}

.accordion-button:not(.collapsed) {
    color: var(--ins-accordion-active-color);

    -webkit-box-shadow: inset 0 calc(-1 * var(--ins-accordion-border-width)) 0 var(--ins-accordion-border-color);
    box-shadow: inset 0 calc(-1 * var(--ins-accordion-border-width)) 0 var(--ins-accordion-border-color)
}

.accordion-button:not(.collapsed)::after {
    background-image: var(--ins-accordion-btn-active-icon);
    -webkit-transform: var(--ins-accordion-btn-icon-transform);
    transform: var(--ins-accordion-btn-icon-transform)
}

.accordion-button::after {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: var(--ins-accordion-btn-icon-width);
    height: var(--ins-accordion-btn-icon-width);
    margin-right: auto;
    content: "";
    background-image: var(--ins-accordion-btn-icon);
    background-repeat: no-repeat;
    background-size: var(--ins-accordion-btn-icon-width);
    -webkit-transition: var(--ins-accordion-btn-icon-transition);
    transition: var(--ins-accordion-btn-icon-transition)
}

@media (prefers-reduced-motion:reduce) {
    .accordion-button::after {
        -webkit-transition: none;
        transition: none
    }
}

.accordion-button:hover {
    z-index: 2;

}

.accordion-button:focus {
    z-index: 3;
    outline: 0;
    -webkit-box-shadow: var(--ins-accordion-btn-focus-box-shadow);
    box-shadow: var(--ins-accordion-btn-focus-box-shadow)
}

.accordion-header {
    margin-bottom: 0
}

.accordion-item {
    color: var(--ins-accordion-color);
    background-color: var(--ins-accordion-bg);
    border: var(--ins-accordion-border-width) solid var(--ins-accordion-border-color)
}

.accordion-item:first-of-type {
    border-top-right-radius: var(--ins-accordion-border-radius);
    border-top-left-radius: var(--ins-accordion-border-radius)
}

.accordion-item:first-of-type>.accordion-header .accordion-button {
    border-top-right-radius: var(--ins-accordion-inner-border-radius);
    border-top-left-radius: var(--ins-accordion-inner-border-radius)
}

.accordion-item:not(:first-of-type) {
    border-top: 0
}

.accordion-item:last-of-type {
    border-bottom-left-radius: var(--ins-accordion-border-radius);
    border-bottom-right-radius: var(--ins-accordion-border-radius)
}

.accordion-item:last-of-type>.accordion-header .accordion-button.collapsed {
    border-bottom-left-radius: var(--ins-accordion-inner-border-radius);
    border-bottom-right-radius: var(--ins-accordion-inner-border-radius)
}

.accordion-item:last-of-type>.accordion-collapse {
    border-bottom-left-radius: var(--ins-accordion-border-radius);
    border-bottom-right-radius: var(--ins-accordion-border-radius)
}

.accordion-body {
    padding: var(--ins-accordion-body-padding-y) var(--ins-accordion-body-padding-x)
}

.background-ekardon {
    background-color: #e5eaff;
}

.accordion-flush>.accordion-item {
    border-left: 0;
    border-right: 0;
    border-radius: 0
}

.accordion-flush>.accordion-item:first-child {
    border-top: 0
}

.accordion-flush>.accordion-item:last-child {
    border-bottom: 0
}

.accordion-flush>.accordion-item>.accordion-collapse,
.accordion-flush>.accordion-item>.accordion-header .accordion-button,
.accordion-flush>.accordion-item>.accordion-header .accordion-button.collapsed {
    border-radius: 0
}

[data-bs-theme=dark] .accordion-button::after {
    --ins-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2376d1bf'%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");
    --ins-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2376d1bf'%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")
}

.breadcrumb {
    --ins-breadcrumb-padding-x: 0;
    --ins-breadcrumb-padding-y: 1.25rem;
    --ins-breadcrumb-margin-bottom: 1rem;
    --ins-breadcrumb-divider-color: var(--ins-secondary-color);
    --ins-breadcrumb-item-padding-x: 0.25rem;
    --ins-breadcrumb-item-active-color: var(--ins-secondary-color);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: var(--ins-breadcrumb-padding-y) var(--ins-breadcrumb-padding-x);
    margin-bottom: var(--ins-breadcrumb-margin-bottom);
    font-size: var(--ins-breadcrumb-font-size);
    list-style: none;
    background-color: var(--ins-breadcrumb-bg);
    border-radius: var(--ins-breadcrumb-border-radius)
}

.breadcrumb-item+.breadcrumb-item {
    padding-right: var(--ins-breadcrumb-item-padding-x)
}

.breadcrumb-item+.breadcrumb-item::before {
    float: right;
    padding-left: var(--ins-breadcrumb-item-padding-x);
    color: var(--ins-breadcrumb-divider-color);
    content: var(--ins-breadcrumb-divider, "\ea61")
}

.breadcrumb-item.active {
    color: var(--ins-breadcrumb-item-active-color)
}

.pagination {
    --ins-pagination-padding-x: 0.75rem;
    --ins-pagination-padding-y: 0.375rem;
    --ins-pagination-font-size: 0.813rem;
    --ins-pagination-color: var(--ins-body-color);
    --ins-pagination-bg: var(--ins-secondary-bg);
    --ins-pagination-border-width: var(--ins-border-width);
    --ins-pagination-border-color: var(--ins-border-color);
    --ins-pagination-border-radius: var(--ins-border-radius);
    --ins-pagination-hover-color: var(--ins-link-hover-color);
    --ins-pagination-hover-bg: var(--ins-tertiary-bg);
    --ins-pagination-hover-border-color: var(--ins-border-color);
    --ins-pagination-focus-color: var(--ins-link-hover-color);
    --ins-pagination-focus-bg: var(--ins-secondary-bg);
    --ins-pagination-focus-box-shadow: none;
    --ins-pagination-active-color: #fff;
    --ins-pagination-active-bg: var(--ins-primary);
    --ins-pagination-active-border-color: var(--ins-primary);
    --ins-pagination-disabled-color: var(--ins-secondary-color);
    --ins-pagination-disabled-bg: var(--ins-secondary-bg);
    --ins-pagination-disabled-border-color: var(--ins-border-color);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-right: 0;
    list-style: none
}

.page-link {
    position: relative;
    display: block;
    padding: var(--ins-pagination-padding-y) var(--ins-pagination-padding-x);
    font-size: var(--ins-pagination-font-size);
    color: var(--ins-pagination-color);
    background-color: var(--ins-pagination-bg);
    border: var(--ins-pagination-border-width) solid var(--ins-pagination-border-color);
    -webkit-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out
}

@media (prefers-reduced-motion:reduce) {
    .page-link {
        -webkit-transition: none;
        transition: none
    }
}

.page-link:hover {
    z-index: 2;
    color: var(--ins-pagination-hover-color);
    background-color: var(--ins-pagination-hover-bg);
    border-color: var(--ins-pagination-hover-border-color)
}

.page-link:focus {
    z-index: 3;
    color: var(--ins-pagination-focus-color);
    background-color: var(--ins-pagination-focus-bg);
    outline: 0;
    -webkit-box-shadow: var(--ins-pagination-focus-box-shadow);
    box-shadow: var(--ins-pagination-focus-box-shadow)
}

.active>.page-link,
.page-link.active {
    z-index: 3;
    color: var(--ins-pagination-active-color);
    background-color: var(--ins-pagination-active-bg);
    border-color: var(--ins-pagination-active-border-color)
}

.disabled>.page-link,
.page-link.disabled {
    color: var(--ins-pagination-disabled-color);
    pointer-events: none;
    background-color: var(--ins-pagination-disabled-bg);
    border-color: var(--ins-pagination-disabled-border-color)
}

.page-item:not(:first-child) .page-link {
    margin-right: calc(-1 * var(--ins-border-width))
}

.page-item:first-child .page-link {
    border-top-right-radius: var(--ins-pagination-border-radius);
    border-bottom-right-radius: var(--ins-pagination-border-radius)
}

.page-item:last-child .page-link {
    border-top-left-radius: var(--ins-pagination-border-radius);
    border-bottom-left-radius: var(--ins-pagination-border-radius)
}

.pagination-lg {
    --ins-pagination-padding-x: 1.5rem;
    --ins-pagination-padding-y: 0.75rem;
    --ins-pagination-font-size: 1.01625rem;
    --ins-pagination-border-radius: var(--ins-border-radius-lg)
}

.pagination-sm {
    --ins-pagination-padding-x: 0.5rem;
    --ins-pagination-padding-y: 0.25rem;
    --ins-pagination-font-size: 0.788rem;
    --ins-pagination-border-radius: var(--ins-border-radius-sm)
}

.badge {
    --ins-badge-padding-x: 0.4em;
    --ins-badge-padding-y: 0.25em;
    --ins-badge-font-size: 0.75em;
    --ins-badge-font-weight: var(--ins-font-weight-bold);
    --ins-badge-color: #fff;
    --ins-badge-border-radius: var(--ins-border-radius);
    display: inline-block;
    padding: var(--ins-badge-padding-y) var(--ins-badge-padding-x);
    font-size: var(--ins-badge-font-size);
    font-weight: var(--ins-badge-font-weight);
    line-height: 1;
    color: var(--ins-badge-color);
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: var(--ins-badge-border-radius)
}

.badge:empty {
    display: none
}

.btn .badge {
    position: relative;
    top: -1px
}

.alert {
    --ins-alert-bg: transparent;
    --ins-alert-padding-x: 1rem;
    --ins-alert-padding-y: 0.8rem;
    --ins-alert-margin-bottom: 1rem;
    --ins-alert-color: inherit;
    --ins-alert-border-color: transparent;
    --ins-alert-border: 0 solid var(--ins-alert-border-color);
    --ins-alert-border-radius: 0.3rem;
    --ins-alert-link-color: inherit;
    position: relative;
    padding: var(--ins-alert-padding-y) var(--ins-alert-padding-x);
    margin-bottom: var(--ins-alert-margin-bottom);
    color: var(--ins-alert-color);
    background-color: var(--ins-alert-bg);
    border: var(--ins-alert-border);
    border-radius: var(--ins-alert-border-radius)
}

.alert-heading {
    color: inherit
}

.alert-link {
    font-weight: var(--ins-font-weight-bold);
    color: var(--ins-alert-link-color)
}

.alert-dismissible {
    padding-left: 3rem
}

.alert-dismissible .btn-close {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    padding: 1rem 1rem
}

.alert-primary {
    --ins-alert-color: var(--ins-primary-text-emphasis);
    --ins-alert-bg: var(--ins-primary-bg-subtle);
    --ins-alert-border-color: var(--ins-primary-border-subtle);
    --ins-alert-link-color: var(--ins-primary-text-emphasis)
}

.alert-secondary {
    --ins-alert-color: var(--ins-secondary-text-emphasis);
    --ins-alert-bg: var(--ins-secondary-bg-subtle);
    --ins-alert-border-color: var(--ins-secondary-border-subtle);
    --ins-alert-link-color: var(--ins-secondary-text-emphasis)
}

.alert-success {
    --ins-alert-color: var(--ins-success-text-emphasis);
    --ins-alert-bg: var(--ins-success-bg-subtle);
    --ins-alert-border-color: var(--ins-success-border-subtle);
    --ins-alert-link-color: var(--ins-success-text-emphasis)
}

.alert-info {
    --ins-alert-color: var(--ins-info-text-emphasis);
    --ins-alert-bg: var(--ins-info-bg-subtle);
    --ins-alert-border-color: var(--ins-info-border-subtle);
    --ins-alert-link-color: var(--ins-info-text-emphasis)
}

.alert-warning {
    --ins-alert-color: var(--ins-warning-text-emphasis);
    --ins-alert-bg: var(--ins-warning-bg-subtle);
    --ins-alert-border-color: var(--ins-warning-border-subtle);
    --ins-alert-link-color: var(--ins-warning-text-emphasis)
}

.alert-danger {
    --ins-alert-color: var(--ins-danger-text-emphasis);
    --ins-alert-bg: var(--ins-danger-bg-subtle);
    --ins-alert-border-color: var(--ins-danger-border-subtle);
    --ins-alert-link-color: var(--ins-danger-text-emphasis)
}

.alert-purple {
    --ins-alert-color: var(--ins-purple-text-emphasis);
    --ins-alert-bg: var(--ins-purple-bg-subtle);
    --ins-alert-border-color: var(--ins-purple-border-subtle);
    --ins-alert-link-color: var(--ins-purple-text-emphasis)
}

.alert-light {
    --ins-alert-color: var(--ins-light-text-emphasis);
    --ins-alert-bg: var(--ins-light-bg-subtle);
    --ins-alert-border-color: var(--ins-light-border-subtle);
    --ins-alert-link-color: var(--ins-light-text-emphasis)
}

.alert-dark {
    --ins-alert-color: var(--ins-dark-text-emphasis);
    --ins-alert-bg: var(--ins-dark-bg-subtle);
    --ins-alert-border-color: var(--ins-dark-border-subtle);
    --ins-alert-link-color: var(--ins-dark-text-emphasis)
}

@-webkit-keyframes progress-bar-stripes {
    0% {
        background-position-x: var(--ins-progress-height)
    }
}

@keyframes progress-bar-stripes {
    0% {
        background-position-x: var(--ins-progress-height)
    }
}

.progress,
.progress-stacked {
    --ins-progress-height: 1rem;
    --ins-progress-font-size: 0.60975rem;
    --ins-progress-bg: var(--ins-tertiary-bg);
    --ins-progress-border-radius: var(--ins-border-radius);
    --ins-progress-box-shadow: var(--ins-box-shadow-inset);
    --ins-progress-bar-color: #fff;
    --ins-progress-bar-bg: var(--ins-primary);
    --ins-progress-bar-transition: width 0.6s ease;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: var(--ins-progress-height);
    overflow: hidden;
    font-size: var(--ins-progress-font-size);
    background-color: var(--ins-progress-bg);
    border-radius: var(--ins-progress-border-radius)
}

.progress-bar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    overflow: hidden;
    color: var(--ins-progress-bar-color);
    text-align: center;
    white-space: nowrap;
    background-color: var(--ins-progress-bar-bg);
    -webkit-transition: var(--ins-progress-bar-transition);
    transition: var(--ins-progress-bar-transition)
}

@media (prefers-reduced-motion:reduce) {
    .progress-bar {
        -webkit-transition: none;
        transition: none
    }
}

.progress-bar-striped {
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-size: var(--ins-progress-height) var(--ins-progress-height)
}

.progress-stacked>.progress {
    overflow: visible
}

.progress-stacked>.progress>.progress-bar {
    width: 100%
}

.progress-bar-animated {
    -webkit-animation: 1s linear infinite progress-bar-stripes;
    animation: 1s linear infinite progress-bar-stripes
}

@media (prefers-reduced-motion:reduce) {
    .progress-bar-animated {
        -webkit-animation: none;
        animation: none
    }
}

.list-group {
    --ins-list-group-color: var(--ins-body-color);
    --ins-list-group-bg: var(--ins-secondary-bg);
    --ins-list-group-border-color: var(--ins-border-color);
    --ins-list-group-border-width: var(--ins-border-width);
    --ins-list-group-border-radius: var(--ins-border-radius);
    --ins-list-group-item-padding-x: 1rem;
    --ins-list-group-item-padding-y: 0.625rem;
    --ins-list-group-action-color: var(--ins-body-color);
    --ins-list-group-action-hover-color: var(--ins-body-color);
    --ins-list-group-action-hover-bg: var(--ins-tertiary-bg);
    --ins-list-group-action-active-color: var(--ins-body-color);
    --ins-list-group-action-active-bg: var(--ins-secondary-bg);
    --ins-list-group-disabled-color: var(--ins-secondary-color);
    --ins-list-group-disabled-bg: var(--ins-tertiary-bg);
    --ins-list-group-active-color: var(--ins-body-color);
    --ins-list-group-active-bg: var(--ins-tertiary-bg);
    --ins-list-group-active-border-color: var(--ins-border-color);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-right: 0;
    margin-bottom: 0;
    border-radius: var(--ins-list-group-border-radius)
}

.list-group-numbered {
    list-style-type: none;
    counter-reset: section
}

.list-group-numbered>.list-group-item::before {
    content: counters(section, ".") ". ";
    counter-increment: section
}

.list-group-item {
    position: relative;
    display: block;
    padding: var(--ins-list-group-item-padding-y) var(--ins-list-group-item-padding-x);
    color: var(--ins-list-group-color);
    background-color: var(--ins-list-group-bg);
    border: var(--ins-list-group-border-width) solid var(--ins-list-group-border-color)
}

[data-bs-theme=dark] .list-group-item {
    background-color: #1f2a34
}

.list-group-item:first-child {
    border-top-right-radius: inherit;
    border-top-left-radius: inherit
}

.list-group-item:last-child {
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit
}

.list-group-item.disabled,
.list-group-item:disabled {
    color: var(--ins-list-group-disabled-color);
    pointer-events: none;
    background-color: var(--ins-list-group-disabled-bg)
}

.list-group-item.active {
    z-index: 2;
    color: var(--ins-list-group-active-color);
    background-color: var(--ins-list-group-active-bg);
    border-color: var(--ins-list-group-active-border-color)
}

.list-group-item+.list-group-item {
    border-top-width: 0
}

.list-group-item+.list-group-item.active {
    margin-top: calc(-1 * var(--ins-list-group-border-width));
    border-top-width: var(--ins-list-group-border-width)
}

.list-group-item-action {
    width: 100%;
    color: var(--ins-list-group-action-color);
    text-align: inherit
}

.list-group-item-action:not(.active):focus,
.list-group-item-action:not(.active):hover {
    z-index: 1;
    color: var(--ins-list-group-action-hover-color);
    text-decoration: none;
    background-color: var(--ins-list-group-action-hover-bg)
}

.list-group-item-action:not(.active):active {
    color: var(--ins-list-group-action-active-color);
    background-color: var(--ins-list-group-action-active-bg)
}

.list-group-horizontal {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row
}

.list-group-horizontal>.list-group-item:first-child:not(:last-child) {
    border-bottom-right-radius: var(--ins-list-group-border-radius);
    border-top-left-radius: 0
}

.list-group-horizontal>.list-group-item:last-child:not(:first-child) {
    border-top-left-radius: var(--ins-list-group-border-radius);
    border-bottom-right-radius: 0
}

.list-group-horizontal>.list-group-item.active {
    margin-top: 0
}

.list-group-horizontal>.list-group-item+.list-group-item {
    border-top-width: var(--ins-list-group-border-width);
    border-right-width: 0
}

.list-group-horizontal>.list-group-item+.list-group-item.active {
    margin-right: calc(-1 * var(--ins-list-group-border-width));
    border-right-width: var(--ins-list-group-border-width)
}

@media (min-width:576px) {
    .list-group-horizontal-sm {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row
    }

    .list-group-horizontal-sm>.list-group-item:first-child:not(:last-child) {
        border-bottom-right-radius: var(--ins-list-group-border-radius);
        border-top-left-radius: 0
    }

    .list-group-horizontal-sm>.list-group-item:last-child:not(:first-child) {
        border-top-left-radius: var(--ins-list-group-border-radius);
        border-bottom-right-radius: 0
    }

    .list-group-horizontal-sm>.list-group-item.active {
        margin-top: 0
    }

    .list-group-horizontal-sm>.list-group-item+.list-group-item {
        border-top-width: var(--ins-list-group-border-width);
        border-right-width: 0
    }

    .list-group-horizontal-sm>.list-group-item+.list-group-item.active {
        margin-right: calc(-1 * var(--ins-list-group-border-width));
        border-right-width: var(--ins-list-group-border-width)
    }
}

@media (min-width:768px) {
    .list-group-horizontal-md {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row
    }

    .list-group-horizontal-md>.list-group-item:first-child:not(:last-child) {
        border-bottom-right-radius: var(--ins-list-group-border-radius);
        border-top-left-radius: 0
    }

    .list-group-horizontal-md>.list-group-item:last-child:not(:first-child) {
        border-top-left-radius: var(--ins-list-group-border-radius);
        border-bottom-right-radius: 0
    }

    .list-group-horizontal-md>.list-group-item.active {
        margin-top: 0
    }

    .list-group-horizontal-md>.list-group-item+.list-group-item {
        border-top-width: var(--ins-list-group-border-width);
        border-right-width: 0
    }

    .list-group-horizontal-md>.list-group-item+.list-group-item.active {
        margin-right: calc(-1 * var(--ins-list-group-border-width));
        border-right-width: var(--ins-list-group-border-width)
    }
}

@media (min-width:992px) {
    .list-group-horizontal-lg {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row
    }

    .list-group-horizontal-lg>.list-group-item:first-child:not(:last-child) {
        border-bottom-right-radius: var(--ins-list-group-border-radius);
        border-top-left-radius: 0
    }

    .list-group-horizontal-lg>.list-group-item:last-child:not(:first-child) {
        border-top-left-radius: var(--ins-list-group-border-radius);
        border-bottom-right-radius: 0
    }

    .list-group-horizontal-lg>.list-group-item.active {
        margin-top: 0
    }

    .list-group-horizontal-lg>.list-group-item+.list-group-item {
        border-top-width: var(--ins-list-group-border-width);
        border-right-width: 0
    }

    .list-group-horizontal-lg>.list-group-item+.list-group-item.active {
        margin-right: calc(-1 * var(--ins-list-group-border-width));
        border-right-width: var(--ins-list-group-border-width)
    }
}

@media (min-width:1200px) {
    .list-group-horizontal-xl {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row
    }

    .list-group-horizontal-xl>.list-group-item:first-child:not(:last-child) {
        border-bottom-right-radius: var(--ins-list-group-border-radius);
        border-top-left-radius: 0
    }

    .list-group-horizontal-xl>.list-group-item:last-child:not(:first-child) {
        border-top-left-radius: var(--ins-list-group-border-radius);
        border-bottom-right-radius: 0
    }

    .list-group-horizontal-xl>.list-group-item.active {
        margin-top: 0
    }

    .list-group-horizontal-xl>.list-group-item+.list-group-item {
        border-top-width: var(--ins-list-group-border-width);
        border-right-width: 0
    }

    .list-group-horizontal-xl>.list-group-item+.list-group-item.active {
        margin-right: calc(-1 * var(--ins-list-group-border-width));
        border-right-width: var(--ins-list-group-border-width)
    }
}

@media (min-width:1400px) {
    .list-group-horizontal-xxl {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row
    }

    .list-group-horizontal-xxl>.list-group-item:first-child:not(:last-child) {
        border-bottom-right-radius: var(--ins-list-group-border-radius);
        border-top-left-radius: 0
    }

    .list-group-horizontal-xxl>.list-group-item:last-child:not(:first-child) {
        border-top-left-radius: var(--ins-list-group-border-radius);
        border-bottom-right-radius: 0
    }

    .list-group-horizontal-xxl>.list-group-item.active {
        margin-top: 0
    }

    .list-group-horizontal-xxl>.list-group-item+.list-group-item {
        border-top-width: var(--ins-list-group-border-width);
        border-right-width: 0
    }

    .list-group-horizontal-xxl>.list-group-item+.list-group-item.active {
        margin-right: calc(-1 * var(--ins-list-group-border-width));
        border-right-width: var(--ins-list-group-border-width)
    }
}

.list-group-flush {
    border-radius: 0
}

.list-group-flush>.list-group-item {
    border-width: 0 0 var(--ins-list-group-border-width)
}

.list-group-flush>.list-group-item:last-child {
    border-bottom-width: 0
}

.list-group-item-primary {
    --ins-list-group-color: var(--ins-primary-text-emphasis);
    --ins-list-group-bg: var(--ins-primary-bg-subtle);
    --ins-list-group-border-color: var(--ins-primary-border-subtle);
    --ins-list-group-action-hover-color: var(--ins-emphasis-color);
    --ins-list-group-action-hover-bg: var(--ins-primary-border-subtle);
    --ins-list-group-action-active-color: var(--ins-emphasis-color);
    --ins-list-group-action-active-bg: var(--ins-primary-border-subtle);
    --ins-list-group-active-color: var(--ins-primary-bg-subtle);
    --ins-list-group-active-bg: var(--ins-primary-text-emphasis);
    --ins-list-group-active-border-color: var(--ins-primary-text-emphasis)
}

.list-group-item-secondary {
    --ins-list-group-color: var(--ins-secondary-text-emphasis);
    --ins-list-group-bg: var(--ins-secondary-bg-subtle);
    --ins-list-group-border-color: var(--ins-secondary-border-subtle);
    --ins-list-group-action-hover-color: var(--ins-emphasis-color);
    --ins-list-group-action-hover-bg: var(--ins-secondary-border-subtle);
    --ins-list-group-action-active-color: var(--ins-emphasis-color);
    --ins-list-group-action-active-bg: var(--ins-secondary-border-subtle);
    --ins-list-group-active-color: var(--ins-secondary-bg-subtle);
    --ins-list-group-active-bg: var(--ins-secondary-text-emphasis);
    --ins-list-group-active-border-color: var(--ins-secondary-text-emphasis)
}

.list-group-item-success {
    --ins-list-group-color: var(--ins-success-text-emphasis);
    --ins-list-group-bg: var(--ins-success-bg-subtle);
    --ins-list-group-border-color: var(--ins-success-border-subtle);
    --ins-list-group-action-hover-color: var(--ins-emphasis-color);
    --ins-list-group-action-hover-bg: var(--ins-success-border-subtle);
    --ins-list-group-action-active-color: var(--ins-emphasis-color);
    --ins-list-group-action-active-bg: var(--ins-success-border-subtle);
    --ins-list-group-active-color: var(--ins-success-bg-subtle);
    --ins-list-group-active-bg: var(--ins-success-text-emphasis);
    --ins-list-group-active-border-color: var(--ins-success-text-emphasis)
}

.list-group-item-info {
    --ins-list-group-color: var(--ins-info-text-emphasis);
    --ins-list-group-bg: var(--ins-info-bg-subtle);
    --ins-list-group-border-color: var(--ins-info-border-subtle);
    --ins-list-group-action-hover-color: var(--ins-emphasis-color);
    --ins-list-group-action-hover-bg: var(--ins-info-border-subtle);
    --ins-list-group-action-active-color: var(--ins-emphasis-color);
    --ins-list-group-action-active-bg: var(--ins-info-border-subtle);
    --ins-list-group-active-color: var(--ins-info-bg-subtle);
    --ins-list-group-active-bg: var(--ins-info-text-emphasis);
    --ins-list-group-active-border-color: var(--ins-info-text-emphasis)
}

.list-group-item-warning {
    --ins-list-group-color: var(--ins-warning-text-emphasis);
    --ins-list-group-bg: var(--ins-warning-bg-subtle);
    --ins-list-group-border-color: var(--ins-warning-border-subtle);
    --ins-list-group-action-hover-color: var(--ins-emphasis-color);
    --ins-list-group-action-hover-bg: var(--ins-warning-border-subtle);
    --ins-list-group-action-active-color: var(--ins-emphasis-color);
    --ins-list-group-action-active-bg: var(--ins-warning-border-subtle);
    --ins-list-group-active-color: var(--ins-warning-bg-subtle);
    --ins-list-group-active-bg: var(--ins-warning-text-emphasis);
    --ins-list-group-active-border-color: var(--ins-warning-text-emphasis)
}

[data-bs-theme=dark] .list-group-item-warning {
    --ins-list-group-color: var(--ins-warning-text-emphasis);
    --ins-list-group-bg: #1f2a34;
    --ins-list-group-border-color: #1f2a34;
    --ins-list-group-action-hover-color: var(--ins-emphasis-color);
    --ins-list-group-action-hover-bg: #192e37;
    --ins-list-group-action-active-color: var(--ins-emphasis-color);
    --ins-list-group-action-active-bg: #1f2a34;
    --ins-list-group-active-color: var(--ins-warning-bg-subtle);
    --ins-list-group-active-bg: var(--ins-warning-text-emphasis);
    --ins-list-group-active-border-color: var(--ins-warning-text-emphasis)
}

.list-group-item-danger {
    --ins-list-group-color: var(--ins-danger-text-emphasis);
    --ins-list-group-bg: var(--ins-danger-bg-subtle);
    --ins-list-group-border-color: var(--ins-danger-border-subtle);
    --ins-list-group-action-hover-color: var(--ins-emphasis-color);
    --ins-list-group-action-hover-bg: var(--ins-danger-border-subtle);
    --ins-list-group-action-active-color: var(--ins-emphasis-color);
    --ins-list-group-action-active-bg: var(--ins-danger-border-subtle);
    --ins-list-group-active-color: var(--ins-danger-bg-subtle);
    --ins-list-group-active-bg: var(--ins-danger-text-emphasis);
    --ins-list-group-active-border-color: var(--ins-danger-text-emphasis)
}

.list-group-item-purple {
    --ins-list-group-color: var(--ins-purple-text-emphasis);
    --ins-list-group-bg: var(--ins-purple-bg-subtle);
    --ins-list-group-border-color: var(--ins-purple-border-subtle);
    --ins-list-group-action-hover-color: var(--ins-emphasis-color);
    --ins-list-group-action-hover-bg: var(--ins-purple-border-subtle);
    --ins-list-group-action-active-color: var(--ins-emphasis-color);
    --ins-list-group-action-active-bg: var(--ins-purple-border-subtle);
    --ins-list-group-active-color: var(--ins-purple-bg-subtle);
    --ins-list-group-active-bg: var(--ins-purple-text-emphasis);
    --ins-list-group-active-border-color: var(--ins-purple-text-emphasis)
}

.list-group-item-light {
    --ins-list-group-color: var(--ins-light-text-emphasis);
    --ins-list-group-bg: var(--ins-light-bg-subtle);
    --ins-list-group-border-color: var(--ins-light-border-subtle);
    --ins-list-group-action-hover-color: var(--ins-emphasis-color);
    --ins-list-group-action-hover-bg: var(--ins-light-border-subtle);
    --ins-list-group-action-active-color: var(--ins-emphasis-color);
    --ins-list-group-action-active-bg: var(--ins-light-border-subtle);
    --ins-list-group-active-color: var(--ins-light-bg-subtle);
    --ins-list-group-active-bg: var(--ins-light-text-emphasis);
    --ins-list-group-active-border-color: var(--ins-light-text-emphasis)
}

.list-group-item-dark {
    --ins-list-group-color: var(--ins-dark-text-emphasis);
    --ins-list-group-bg: var(--ins-dark-bg-subtle);
    --ins-list-group-border-color: var(--ins-dark-border-subtle);
    --ins-list-group-action-hover-color: var(--ins-emphasis-color);
    --ins-list-group-action-hover-bg: var(--ins-dark-border-subtle);
    --ins-list-group-action-active-color: var(--ins-emphasis-color);
    --ins-list-group-action-active-bg: var(--ins-dark-border-subtle);
    --ins-list-group-active-color: var(--ins-dark-bg-subtle);
    --ins-list-group-active-bg: var(--ins-dark-text-emphasis);
    --ins-list-group-active-border-color: var(--ins-dark-text-emphasis)
}

.btn-close {
    --ins-btn-close-color: var(--ins-secondary-color);
    --ins-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='var%28--ins-secondary-color%29'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    --ins-btn-close-opacity: 0.5;
    --ins-btn-close-hover-opacity: 0.8;
    --ins-btn-close-focus-shadow: none;
    --ins-btn-close-focus-opacity: 1;
    --ins-btn-close-disabled-opacity: 0.25;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: .25em .25em;
    color: var(--ins-btn-close-color);
    background: transparent var(--ins-btn-close-bg) center/1em auto no-repeat;
    -webkit-filter: var(--ins-btn-close-filter);
    filter: var(--ins-btn-close-filter);
    border: 0;
    border-radius: .3rem;
    opacity: var(--ins-btn-close-opacity)
}

.btn-close:hover {
    color: var(--ins-btn-close-color);
    text-decoration: none;
    opacity: var(--ins-btn-close-hover-opacity)
}

.btn-close:focus {
    outline: 0;
    -webkit-box-shadow: var(--ins-btn-close-focus-shadow);
    box-shadow: var(--ins-btn-close-focus-shadow);
    opacity: var(--ins-btn-close-focus-opacity)
}

.btn-close.disabled,
.btn-close:disabled {
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    opacity: var(--ins-btn-close-disabled-opacity)
}

.btn-close-white {
    --ins-btn-close-filter: invert(1) grayscale(100%) brightness(200%) var(--ins-btn-active-bg)
}

[data-bs-theme=dark] {
    --ins-btn-close-filter: invert(1) grayscale(100%) brightness(200%)
}

.toast {
    --ins-toast-zindex: 1090;
    --ins-toast-padding-x: 0.75rem;
    --ins-toast-padding-y: 0.5rem;
    --ins-toast-spacing: 1.25rem;
    --ins-toast-max-width: 350px;
    --ins-toast-font-size: 0.875rem;
    --ins-toast-bg: rgba(var(--ins-body-bg-rgb), 0.85);
    --ins-toast-border-width: var(--ins-border-width);
    --ins-toast-border-color: var(--ins-border-color);
    --ins-toast-border-radius: var(--ins-border-radius);
    --ins-toast-box-shadow: var(--ins-box-shadow);
    --ins-toast-header-color: var(--ins-secondary-color);
    --ins-toast-header-bg: rgba(var(--ins-body-bg-rgb), 0.85);
    --ins-toast-header-border-color: var(--ins-border-color);
    width: var(--ins-toast-max-width);
    max-width: 100%;
    font-size: var(--ins-toast-font-size);
    color: var(--ins-toast-color);
    pointer-events: auto;
    background-color: var(--ins-toast-bg);
    background-clip: padding-box;
    border: var(--ins-toast-border-width) solid var(--ins-toast-border-color);
    -webkit-box-shadow: var(--ins-toast-box-shadow);
    box-shadow: var(--ins-toast-box-shadow);
    border-radius: var(--ins-toast-border-radius)
}

.toast.showing {
    opacity: 0
}

.toast:not(.show) {
    display: none
}

.toast-container {
    --ins-toast-zindex: 1090;
    position: absolute;
    z-index: var(--ins-toast-zindex);
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    max-width: 100%;
    pointer-events: none
}

.toast-container>:not(:last-child) {
    margin-bottom: var(--ins-toast-spacing)
}

.toast-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: var(--ins-toast-padding-y) var(--ins-toast-padding-x);
    color: var(--ins-toast-header-color);
    background-color: var(--ins-toast-header-bg);
    background-clip: padding-box;
    border-bottom: var(--ins-toast-border-width) solid var(--ins-toast-header-border-color);
    border-top-right-radius: calc(var(--ins-toast-border-radius) - var(--ins-toast-border-width));
    border-top-left-radius: calc(var(--ins-toast-border-radius) - var(--ins-toast-border-width))
}

.toast-header .btn-close {
    margin-left: calc(-.5 * var(--ins-toast-padding-x));
    margin-right: var(--ins-toast-padding-x)
}

.toast-body {
    padding: var(--ins-toast-padding-x);
    word-wrap: break-word
}

.modal {
    --ins-modal-zindex: 1055;
    --ins-modal-width: 500px;
    --ins-modal-padding: 1.25rem;
    --ins-modal-margin: 0.5rem;
    --ins-modal-color: var(--ins-body-color);
    --ins-modal-bg: var(--ins-secondary-bg);
    --ins-modal-border-color: transparent;
    --ins-modal-border-width: var(--ins-border-width);
    --ins-modal-border-radius: var(--ins-border-radius-lg);
    --ins-modal-box-shadow: var(--ins-box-shadow-sm);
    --ins-modal-inner-border-radius: calc(var(--ins-border-radius-lg) - (var(--ins-border-width)));
    --ins-modal-header-padding-x: 1.25rem;
    --ins-modal-header-padding-y: 1.25rem;
    --ins-modal-header-padding: 1rem 1rem;
    --ins-modal-header-border-color: var(--ins-border-color);
    --ins-modal-header-border-width: var(--ins-border-width);
    --ins-modal-title-line-height: 1.5;
    --ins-modal-footer-gap: 0.5rem;
    --ins-modal-footer-border-color: var(--ins-border-color);
    --ins-modal-footer-border-width: var(--ins-border-width);
    position: fixed;
    top: 0;
    right: 0;
    z-index: var(--ins-modal-zindex);
    display: none;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: var(--ins-modal-margin);
    pointer-events: none
}

.modal.fade .modal-dialog {
    -webkit-transform: translate(0, -50px);
    transform: translate(0, -50px);
    -webkit-transition: -webkit-transform .3s ease-out;
    transition: -webkit-transform .3s ease-out;
    transition: transform .3s ease-out;
    transition: transform .3s ease-out, -webkit-transform .3s ease-out
}

@media (prefers-reduced-motion:reduce) {
    .modal.fade .modal-dialog {
        -webkit-transition: none;
        transition: none
    }
}

.modal.show .modal-dialog {
    -webkit-transform: none;
    transform: none
}

.modal.modal-static .modal-dialog {
    -webkit-transform: scale(1.02);
    transform: scale(1.02)
}

.modal-dialog-scrollable {
    height: calc(100% - var(--ins-modal-margin) * 2)
}

.modal-dialog-scrollable .modal-content {
    max-height: 100%;
    overflow: hidden
}

.modal-dialog-scrollable .modal-body {
    overflow-y: auto
}

.modal-dialog-centered {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-height: calc(100% - var(--ins-modal-margin) * 2)
}

.modal-content {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    color: var(--ins-modal-color);
    pointer-events: auto;
    background-color: var(--ins-modal-bg);
    background-clip: padding-box;
    border: var(--ins-modal-border-width) solid var(--ins-modal-border-color);
    border-radius: var(--ins-modal-border-radius);
    outline: 0
}

.modal-backdrop {
    --ins-backdrop-zindex: 1050;
    --ins-backdrop-bg: var(--ins-emphasis-color);
    --ins-backdrop-opacity: 0.7;
    position: fixed;
    top: 0;
    right: 0;
    z-index: var(--ins-backdrop-zindex);
    width: 100vw;
    height: 100vh;
    background-color: var(--ins-backdrop-bg)
}

.modal-backdrop.fade {
    opacity: 0
}

.modal-backdrop.show {
    opacity: var(--ins-backdrop-opacity)
}

.modal-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: var(--ins-modal-header-padding);
    border-bottom: var(--ins-modal-header-border-width) solid var(--ins-modal-header-border-color);
    border-top-right-radius: var(--ins-modal-inner-border-radius);
    border-top-left-radius: var(--ins-modal-inner-border-radius);
    background-color: #ffbb70;

}

.modal-header .btn-close {
    padding: calc(var(--ins-modal-header-padding-y) * .5) calc(var(--ins-modal-header-padding-x) * .5);
    margin-top: calc(-.5 * var(--ins-modal-header-padding-y));
    margin-left: calc(-.5 * var(--ins-modal-header-padding-x));
    margin-bottom: calc(-.5 * var(--ins-modal-header-padding-y));
    margin-right: auto
}

.modal-title {
    margin-bottom: 0;
    line-height: var(--ins-modal-title-line-height)
}

.modal-body {
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: var(--ins-modal-padding)
}

.modal-footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-start;
    padding-top: 10px;
    /* padding: calc(var(--ins-modal-padding) - var(--ins-modal-footer-gap) * .5); */
    background-color: var(--ins-modal-footer-bg);
    border-top: var(--ins-modal-footer-border-width) solid var(--ins-modal-footer-border-color);
    border-bottom-left-radius: var(--ins-modal-inner-border-radius);
    border-bottom-right-radius: var(--ins-modal-inner-border-radius);
    padding: 10px;
}

.modal-footer>* {
    margin: calc(var(--ins-modal-footer-gap) * .5)
}

@media (min-width:576px) {
    .modal {
        --ins-modal-margin: 1.75rem;
        --ins-modal-box-shadow: var(--ins-box-shadow)
    }

    .modal-dialog {
        max-width: var(--ins-modal-width);
        margin-left: auto;
        margin-right: auto
    }

    .modal-sm {
        --ins-modal-width: 300px
    }
}

@media (min-width:992px) {

    .modal-lg,
    .modal-xl {
        --ins-modal-width: 800px
    }
}

@media (min-width:1200px) {
    .modal-xl {
        --ins-modal-width: 1140px
    }
}

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

.modal-fullscreen .modal-content {

    border: 0;
    border-radius: 0
}

.modal-fullscreen .modal-footer,
.modal-fullscreen .modal-header {
    border-radius: 0
}

.modal-fullscreen .modal-body {
    overflow-y: auto
}

@media (max-width:575.98px) {
    .modal-fullscreen-sm-down {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0
    }

    .modal-fullscreen-sm-down .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0
    }

    .modal-fullscreen-sm-down .modal-footer,
    .modal-fullscreen-sm-down .modal-header {
        border-radius: 0
    }

    .modal-fullscreen-sm-down .modal-body {
        overflow-y: auto
    }
}

@media (max-width:767.98px) {
    .modal-fullscreen-md-down {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0
    }

    .modal-fullscreen-md-down .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0
    }

    .modal-fullscreen-md-down .modal-footer,
    .modal-fullscreen-md-down .modal-header {
        border-radius: 0
    }

    .modal-fullscreen-md-down .modal-body {
        overflow-y: auto
    }
}

@media (max-width:991.98px) {
    .modal-fullscreen-lg-down {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0
    }

    .modal-fullscreen-lg-down .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0
    }

    .modal-fullscreen-lg-down .modal-footer,
    .modal-fullscreen-lg-down .modal-header {
        border-radius: 0
    }

    .modal-fullscreen-lg-down .modal-body {
        overflow-y: auto
    }
}

@media (max-width:1199.98px) {
    .modal-fullscreen-xl-down {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0
    }

    .modal-fullscreen-xl-down .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0
    }

    .modal-fullscreen-xl-down .modal-footer,
    .modal-fullscreen-xl-down .modal-header {
        border-radius: 0
    }

    .modal-fullscreen-xl-down .modal-body {
        overflow-y: auto
    }
}

@media (max-width:1399.98px) {
    .modal-fullscreen-xxl-down {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0
    }

    .modal-fullscreen-xxl-down .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0
    }

    .modal-fullscreen-xxl-down .modal-footer,
    .modal-fullscreen-xxl-down .modal-header {
        border-radius: 0
    }

    .modal-fullscreen-xxl-down .modal-body {
        overflow-y: auto
    }
}

.tooltip {
    --ins-tooltip-zindex: 1080;
    --ins-tooltip-max-width: 200px;
    --ins-tooltip-padding-x: 0.625rem;
    --ins-tooltip-padding-y: 0.3125rem;
    --ins-tooltip-font-size: 0.788rem;
    --ins-tooltip-color: var(--ins-body-bg);
    --ins-tooltip-bg: var(--ins-body-color);
    --ins-tooltip-border-radius: var(--ins-border-radius);
    --ins-tooltip-opacity: 1;
    --ins-tooltip-arrow-width: 0.8rem;
    --ins-tooltip-arrow-height: 0.4rem;
    z-index: var(--ins-tooltip-zindex);
    display: block;
    margin: var(--ins-tooltip-margin);
    font-family: var(--ins-font-sans-serif);
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    text-align: right;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    white-space: normal;
    word-spacing: normal;
    line-break: auto;
    font-size: var(--ins-tooltip-font-size);
    word-wrap: break-word;
    opacity: 0
}

.tooltip.show {
    opacity: var(--ins-tooltip-opacity)
}

.tooltip .tooltip-arrow {
    display: block;
    width: var(--ins-tooltip-arrow-width);
    height: var(--ins-tooltip-arrow-height)
}

.tooltip .tooltip-arrow::before {
    position: absolute;
    content: "";
    border-color: transparent;
    border-style: solid
}

.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow,
.bs-tooltip-top .tooltip-arrow {
    bottom: calc(-1 * var(--ins-tooltip-arrow-height))
}

.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
.bs-tooltip-top .tooltip-arrow::before {
    top: -1px;
    border-width: var(--ins-tooltip-arrow-height) calc(var(--ins-tooltip-arrow-width) * .5) 0;
    border-top-color: var(--ins-tooltip-bg)
}

.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow,
.bs-tooltip-end .tooltip-arrow {
    left: calc(-1 * var(--ins-tooltip-arrow-height));
    width: var(--ins-tooltip-arrow-height);
    height: var(--ins-tooltip-arrow-width)
}

.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before,
.bs-tooltip-end .tooltip-arrow::before {
    right: -1px;
    border-width: calc(var(--ins-tooltip-arrow-width) * .5) var(--ins-tooltip-arrow-height) calc(var(--ins-tooltip-arrow-width) * .5) 0;
    border-right-color: var(--ins-tooltip-bg)
}

.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow,
.bs-tooltip-bottom .tooltip-arrow {
    top: calc(-1 * var(--ins-tooltip-arrow-height))
}

.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before,
.bs-tooltip-bottom .tooltip-arrow::before {
    bottom: -1px;
    border-width: 0 calc(var(--ins-tooltip-arrow-width) * .5) var(--ins-tooltip-arrow-height);
    border-bottom-color: var(--ins-tooltip-bg)
}

.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow,
.bs-tooltip-start .tooltip-arrow {
    right: calc(-1 * var(--ins-tooltip-arrow-height));
    width: var(--ins-tooltip-arrow-height);
    height: var(--ins-tooltip-arrow-width)
}

.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before,
.bs-tooltip-start .tooltip-arrow::before {
    left: -1px;
    border-width: calc(var(--ins-tooltip-arrow-width) * .5) 0 calc(var(--ins-tooltip-arrow-width) * .5) var(--ins-tooltip-arrow-height);
    border-left-color: var(--ins-tooltip-bg)
}

.tooltip-inner {
    max-width: var(--ins-tooltip-max-width);
    padding: var(--ins-tooltip-padding-y) var(--ins-tooltip-padding-x);
    color: var(--ins-tooltip-color);
    text-align: center;
    background-color: var(--ins-tooltip-bg);
    border-radius: var(--ins-tooltip-border-radius)
}

.popover {
    --ins-popover-zindex: 1070;
    --ins-popover-max-width: 276px;
    --ins-popover-font-size: 0.788rem;
    --ins-popover-bg: var(--ins-secondary-bg);
    --ins-popover-border-width: var(--ins-border-width);
    --ins-popover-border-color: var(--ins-border-color);
    --ins-popover-border-radius: var(--ins-border-radius-lg);
    --ins-popover-inner-border-radius: calc(var(--ins-border-radius-lg) - var(--ins-border-width));
    --ins-popover-box-shadow: var(--ins-box-shadow);
    --ins-popover-header-padding-x: 0.8rem;
    --ins-popover-header-padding-y: 0.7rem;
    --ins-popover-header-font-size: 0.813rem;
    --ins-popover-header-color: inherit;
    --ins-popover-header-bg: var(--ins-tertiary-bg);
    --ins-popover-body-padding-x: 1.25rem;
    --ins-popover-body-padding-y: 1.25rem;
    --ins-popover-body-color: var(--ins-body-color);
    --ins-popover-arrow-width: 1rem;
    --ins-popover-arrow-height: 0.5rem;
    --ins-popover-arrow-border: var(--ins-popover-border-color);
    z-index: var(--ins-popover-zindex);
    display: block;
    max-width: var(--ins-popover-max-width);
    font-family: var(--ins-font-sans-serif);
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    text-align: right;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    white-space: normal;
    word-spacing: normal;
    line-break: auto;
    font-size: var(--ins-popover-font-size);
    word-wrap: break-word;
    background-color: var(--ins-popover-bg);
    background-clip: padding-box;
    border: var(--ins-popover-border-width) solid var(--ins-popover-border-color);
    border-radius: var(--ins-popover-border-radius)
}

.popover .popover-arrow {
    display: block;
    width: var(--ins-popover-arrow-width);
    height: var(--ins-popover-arrow-height)
}

.popover .popover-arrow::after,
.popover .popover-arrow::before {
    position: absolute;
    display: block;
    content: "";
    border-color: transparent;
    border-style: solid;
    border-width: 0
}

.bs-popover-auto[data-popper-placement^=top]>.popover-arrow,
.bs-popover-top>.popover-arrow {
    bottom: calc(-1 * (var(--ins-popover-arrow-height)) - var(--ins-popover-border-width))
}

.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::after,
.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::before,
.bs-popover-top>.popover-arrow::after,
.bs-popover-top>.popover-arrow::before {
    border-width: var(--ins-popover-arrow-height) calc(var(--ins-popover-arrow-width) * .5) 0
}

.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::before,
.bs-popover-top>.popover-arrow::before {
    bottom: 0;
    border-top-color: var(--ins-popover-arrow-border)
}

.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::after,
.bs-popover-top>.popover-arrow::after {
    bottom: var(--ins-popover-border-width);
    border-top-color: var(--ins-popover-bg)
}

.bs-popover-auto[data-popper-placement^=right]>.popover-arrow,
.bs-popover-end>.popover-arrow {
    left: calc(-1 * (var(--ins-popover-arrow-height)) - var(--ins-popover-border-width));
    width: var(--ins-popover-arrow-height);
    height: var(--ins-popover-arrow-width)
}

.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::after,
.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::before,
.bs-popover-end>.popover-arrow::after,
.bs-popover-end>.popover-arrow::before {
    border-width: calc(var(--ins-popover-arrow-width) * .5) var(--ins-popover-arrow-height) calc(var(--ins-popover-arrow-width) * .5) 0
}

.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::before,
.bs-popover-end>.popover-arrow::before {
    left: 0;
    border-right-color: var(--ins-popover-arrow-border)
}

.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::after,
.bs-popover-end>.popover-arrow::after {
    left: var(--ins-popover-border-width);
    border-right-color: var(--ins-popover-bg)
}

.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow,
.bs-popover-bottom>.popover-arrow {
    top: calc(-1 * (var(--ins-popover-arrow-height)) - var(--ins-popover-border-width))
}

.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::after,
.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::before,
.bs-popover-bottom>.popover-arrow::after,
.bs-popover-bottom>.popover-arrow::before {
    border-width: 0 calc(var(--ins-popover-arrow-width) * .5) var(--ins-popover-arrow-height)
}

.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::before,
.bs-popover-bottom>.popover-arrow::before {
    top: 0;
    border-bottom-color: var(--ins-popover-arrow-border)
}

.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::after,
.bs-popover-bottom>.popover-arrow::after {
    top: var(--ins-popover-border-width);
    border-bottom-color: var(--ins-popover-bg)
}

.bs-popover-auto[data-popper-placement^=bottom] .popover-header::before,
.bs-popover-bottom .popover-header::before {
    position: absolute;
    top: 0;
    right: 50%;
    display: block;
    width: var(--ins-popover-arrow-width);
    margin-right: calc(-.5 * var(--ins-popover-arrow-width));
    content: "";
    border-bottom: var(--ins-popover-border-width) solid var(--ins-popover-header-bg)
}

.bs-popover-auto[data-popper-placement^=left]>.popover-arrow,
.bs-popover-start>.popover-arrow {
    right: calc(-1 * (var(--ins-popover-arrow-height)) - var(--ins-popover-border-width));
    width: var(--ins-popover-arrow-height);
    height: var(--ins-popover-arrow-width)
}

.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::after,
.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::before,
.bs-popover-start>.popover-arrow::after,
.bs-popover-start>.popover-arrow::before {
    border-width: calc(var(--ins-popover-arrow-width) * .5) 0 calc(var(--ins-popover-arrow-width) * .5) var(--ins-popover-arrow-height)
}

.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::before,
.bs-popover-start>.popover-arrow::before {
    right: 0;
    border-left-color: var(--ins-popover-arrow-border)
}

.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::after,
.bs-popover-start>.popover-arrow::after {
    right: var(--ins-popover-border-width);
    border-left-color: var(--ins-popover-bg)
}

.popover-header {
    padding: var(--ins-popover-header-padding-y) var(--ins-popover-header-padding-x);
    margin-bottom: 0;
    font-size: var(--ins-popover-header-font-size);
    color: var(--ins-popover-header-color);
    background-color: var(--ins-popover-header-bg);
    border-bottom: var(--ins-popover-border-width) solid var(--ins-popover-border-color);
    border-top-right-radius: var(--ins-popover-inner-border-radius);
    border-top-left-radius: var(--ins-popover-inner-border-radius)
}

.popover-header:empty {
    display: none
}

.popover-body {
    padding: var(--ins-popover-body-padding-y) var(--ins-popover-body-padding-x);
    color: var(--ins-popover-body-color)
}

.carousel {
    position: relative
}

.carousel.pointer-event {
    -ms-touch-action: pan-y;
    touch-action: pan-y
}

.carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden
}

.carousel-inner::after {
    display: block;
    clear: both;
    content: ""
}

.carousel-item {
    position: relative;
    display: none;
    float: right;
    width: 100%;
    margin-left: -100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform .6s ease-in-out;
    transition: -webkit-transform .6s ease-in-out;
    transition: transform .6s ease-in-out;
    transition: transform .6s ease-in-out, -webkit-transform .6s ease-in-out
}

@media (prefers-reduced-motion:reduce) {
    .carousel-item {
        -webkit-transition: none;
        transition: none
    }
}

.carousel-item-next,
.carousel-item-prev,
.carousel-item.active {
    display: block
}

.active.carousel-item-end,
.carousel-item-next:not(.carousel-item-start) {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%)
}

.active.carousel-item-start,
.carousel-item-prev:not(.carousel-item-end) {
    -webkit-transform: translateX(100%);
    transform: translateX(100%)
}

.carousel-fade .carousel-item {
    opacity: 0;
    -webkit-transition-property: opacity;
    transition-property: opacity;
    -webkit-transform: none;
    transform: none
}

.carousel-fade .carousel-item-next.carousel-item-start,
.carousel-fade .carousel-item-prev.carousel-item-end,
.carousel-fade .carousel-item.active {
    z-index: 1;
    opacity: 1
}

.carousel-fade .active.carousel-item-end,
.carousel-fade .active.carousel-item-start {
    z-index: 0;
    opacity: 0;
    -webkit-transition: opacity 0s .6s;
    transition: opacity 0s .6s
}

@media (prefers-reduced-motion:reduce) {

    .carousel-fade .active.carousel-item-end,
    .carousel-fade .active.carousel-item-start {
        -webkit-transition: none;
        transition: none
    }
}

.carousel-control-next,
.carousel-control-prev {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 15%;
    padding: 0;
    color: #fff;
    text-align: center;
    background: 0 0;
    -webkit-filter: var(--ins-carousel-control-icon-filter);
    filter: var(--ins-carousel-control-icon-filter);
    border: 0;
    opacity: .5;
    -webkit-transition: opacity .15s ease;
    transition: opacity .15s ease
}

@media (prefers-reduced-motion:reduce) {

    .carousel-control-next,
    .carousel-control-prev {
        -webkit-transition: none;
        transition: none
    }
}

.carousel-control-next:focus,
.carousel-control-next:hover,
.carousel-control-prev:focus,
.carousel-control-prev:hover {
    color: #fff;
    text-decoration: none;
    outline: 0;
    opacity: .9
}

.carousel-control-prev {
    right: 0
}

.carousel-control-next {
    left: 0
}

.carousel-control-next-icon,
.carousel-control-prev-icon {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 100% 100%
}

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e")
}

.carousel-indicators {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 2;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 0;
    margin-left: 15%;
    margin-bottom: 1rem;
    margin-right: 15%
}

.carousel-indicators [data-bs-target] {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    width: 30px;
    height: 3px;
    padding: 0;
    margin-left: 3px;
    margin-right: 3px;
    text-indent: -999px;
    cursor: pointer;
    background-color: var(--ins-carousel-indicator-active-bg);
    background-clip: padding-box;
    border: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    opacity: .5;
    -webkit-transition: opacity .6s ease;
    transition: opacity .6s ease
}

@media (prefers-reduced-motion:reduce) {
    .carousel-indicators [data-bs-target] {
        -webkit-transition: none;
        transition: none
    }
}

.carousel-indicators .active {
    opacity: 1
}

.carousel-caption {
    position: absolute;
    left: 15%;
    bottom: 1.25rem;
    right: 15%;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    color: var(--ins-carousel-caption-color);
    text-align: center
}

.carousel-dark {
    --ins-carousel-indicator-active-bg: #000;
    --ins-carousel-caption-color: #000;
    --ins-carousel-control-icon-filter: invert(1) grayscale(100)
}

:root,
[data-bs-theme=light] {
    --ins-carousel-indicator-active-bg: #fff;
    --ins-carousel-caption-color: #fff
}

[data-bs-theme=dark] {
    --ins-carousel-indicator-active-bg: #000;
    --ins-carousel-caption-color: #000;
    --ins-carousel-control-icon-filter: invert(1) grayscale(100)
}

.spinner-border,
.spinner-grow {
    display: inline-block;
    width: var(--ins-spinner-width);
    height: var(--ins-spinner-height);
    vertical-align: var(--ins-spinner-vertical-align);
    border-radius: 50%;
    -webkit-animation: var(--ins-spinner-animation-speed) linear infinite var(--ins-spinner-animation-name);
    animation: var(--ins-spinner-animation-speed) linear infinite var(--ins-spinner-animation-name)
}

@-webkit-keyframes spinner-border {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes spinner-border {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

.spinner-border {
    --ins-spinner-width: 2rem;
    --ins-spinner-height: 2rem;
    --ins-spinner-vertical-align: -0.25em;
    --ins-spinner-border-width: 0.25em;
    --ins-spinner-animation-speed: 0.75s;
    --ins-spinner-animation-name: spinner-border;
    border: var(--ins-spinner-border-width) solid currentcolor;
    border-left-color: transparent
}

.spinner-border-sm {
    --ins-spinner-width: 1rem;
    --ins-spinner-height: 1rem;
    --ins-spinner-border-width: 0.2em
}

@-webkit-keyframes spinner-grow {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }

    50% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes spinner-grow {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }

    50% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.spinner-grow {
    --ins-spinner-width: 2rem;
    --ins-spinner-height: 2rem;
    --ins-spinner-vertical-align: -0.25em;
    --ins-spinner-animation-speed: 0.75s;
    --ins-spinner-animation-name: spinner-grow;
    background-color: currentcolor;
    opacity: 0
}

.spinner-grow-sm {
    --ins-spinner-width: 1rem;
    --ins-spinner-height: 1rem
}

@media (prefers-reduced-motion:reduce) {

    .spinner-border,
    .spinner-grow {
        --ins-spinner-animation-speed: 1.5s
    }
}

.offcanvas,
.offcanvas-lg,
.offcanvas-md,
.offcanvas-sm,
.offcanvas-xl,
.offcanvas-xxl {
    --ins-offcanvas-zindex: 1045;
    --ins-offcanvas-width: 400px;
    --ins-offcanvas-height: 30vh;
    --ins-offcanvas-padding-x: 1.25rem;
    --ins-offcanvas-padding-y: 1.25rem;
    --ins-offcanvas-color: var(--ins-body-color);
    --ins-offcanvas-bg: var(--ins-secondary-bg);
    --ins-offcanvas-border-width: var(--ins-border-width);
    --ins-offcanvas-border-color: transparent;
    --ins-offcanvas-box-shadow: var(--ins-box-shadow-sm);
    --ins-offcanvas-transition: transform 0.3s ease-in-out;
    --ins-offcanvas-title-line-height: 1.5
}

@media (max-width:575.98px) {
    .offcanvas-sm {
        position: fixed;
        bottom: 0;
        z-index: var(--ins-offcanvas-zindex);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        max-width: 100%;
        color: var(--ins-offcanvas-color);
        visibility: hidden;
        background-color: var(--ins-offcanvas-bg);
        background-clip: padding-box;
        outline: 0;
        -webkit-transition: var(--ins-offcanvas-transition);
        transition: var(--ins-offcanvas-transition)
    }
}

@media (max-width:575.98px) and (prefers-reduced-motion:reduce) {
    .offcanvas-sm {
        -webkit-transition: none;
        transition: none
    }
}

@media (max-width:575.98px) {
    .offcanvas-sm.offcanvas-start {
        top: 0;
        right: 0;
        width: var(--ins-offcanvas-width);
        border-left: var(--ins-offcanvas-border-width) solid var(--ins-offcanvas-border-color);
        -webkit-transform: translateX(100%);
        transform: translateX(100%)
    }

    .offcanvas-sm.offcanvas-end {
        top: 0;
        left: 0;
        width: var(--ins-offcanvas-width);
        border-right: var(--ins-offcanvas-border-width) solid var(--ins-offcanvas-border-color);
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%)
    }

    .offcanvas-sm.offcanvas-top {
        top: 0;
        left: 0;
        right: 0;
        height: var(--ins-offcanvas-height);
        max-height: 100%;
        border-bottom: var(--ins-offcanvas-border-width) solid var(--ins-offcanvas-border-color);
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%)
    }

    .offcanvas-sm.offcanvas-bottom {
        left: 0;
        right: 0;
        height: var(--ins-offcanvas-height);
        max-height: 100%;
        border-top: var(--ins-offcanvas-border-width) solid var(--ins-offcanvas-border-color);
        -webkit-transform: translateY(100%);
        transform: translateY(100%)
    }

    .offcanvas-sm.show:not(.hiding),
    .offcanvas-sm.showing {
        -webkit-transform: none;
        transform: none
    }

    .offcanvas-sm.hiding,
    .offcanvas-sm.show,
    .offcanvas-sm.showing {
        visibility: visible
    }
}

@media (min-width:576px) {
    .offcanvas-sm {
        --ins-offcanvas-height: auto;
        --ins-offcanvas-border-width: 0;
        background-color: transparent !important
    }

    .offcanvas-sm .offcanvas-header {
        display: none
    }

    .offcanvas-sm .offcanvas-body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-flex: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        padding: 0;
        overflow-y: visible;
        background-color: transparent !important
    }
}

@media (max-width:767.98px) {
    .offcanvas-md {
        position: fixed;
        bottom: 0;
        z-index: var(--ins-offcanvas-zindex);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        max-width: 100%;
        color: var(--ins-offcanvas-color);
        visibility: hidden;
        background-color: var(--ins-offcanvas-bg);
        background-clip: padding-box;
        outline: 0;
        -webkit-transition: var(--ins-offcanvas-transition);
        transition: var(--ins-offcanvas-transition)
    }
}

@media (max-width:767.98px) and (prefers-reduced-motion:reduce) {
    .offcanvas-md {
        -webkit-transition: none;
        transition: none
    }
}

@media (max-width:767.98px) {
    .offcanvas-md.offcanvas-start {
        top: 0;
        right: 0;
        width: var(--ins-offcanvas-width);
        border-left: var(--ins-offcanvas-border-width) solid var(--ins-offcanvas-border-color);
        -webkit-transform: translateX(100%);
        transform: translateX(100%)
    }

    .offcanvas-md.offcanvas-end {
        top: 0;
        left: 0;
        width: var(--ins-offcanvas-width);
        border-right: var(--ins-offcanvas-border-width) solid var(--ins-offcanvas-border-color);
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%)
    }

    .offcanvas-md.offcanvas-top {
        top: 0;
        left: 0;
        right: 0;
        height: var(--ins-offcanvas-height);
        max-height: 100%;
        border-bottom: var(--ins-offcanvas-border-width) solid var(--ins-offcanvas-border-color);
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%)
    }

    .offcanvas-md.offcanvas-bottom {
        left: 0;
        right: 0;
        height: var(--ins-offcanvas-height);
        max-height: 100%;
        border-top: var(--ins-offcanvas-border-width) solid var(--ins-offcanvas-border-color);
        -webkit-transform: translateY(100%);
        transform: translateY(100%)
    }

    .offcanvas-md.show:not(.hiding),
    .offcanvas-md.showing {
        -webkit-transform: none;
        transform: none
    }

    .offcanvas-md.hiding,
    .offcanvas-md.show,
    .offcanvas-md.showing {
        visibility: visible
    }
}

@media (min-width:768px) {
    .offcanvas-md {
        --ins-offcanvas-height: auto;
        --ins-offcanvas-border-width: 0;
        background-color: transparent !important
    }

    .offcanvas-md .offcanvas-header {
        display: none
    }

    .offcanvas-md .offcanvas-body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-flex: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        padding: 0;
        overflow-y: visible;
        background-color: transparent !important
    }
}

@media (max-width:991.98px) {
    .offcanvas-lg {
        position: fixed;
        bottom: 0;
        z-index: var(--ins-offcanvas-zindex);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        max-width: 100%;
        color: var(--ins-offcanvas-color);
        visibility: hidden;
        background-color: var(--ins-offcanvas-bg);
        background-clip: padding-box;
        outline: 0;
        -webkit-transition: var(--ins-offcanvas-transition);
        transition: var(--ins-offcanvas-transition)
    }
}

@media (max-width:991.98px) and (prefers-reduced-motion:reduce) {
    .offcanvas-lg {
        -webkit-transition: none;
        transition: none
    }
}

@media (max-width:991.98px) {
    .offcanvas-lg.offcanvas-start {
        top: 0;
        right: 0;
        width: var(--ins-offcanvas-width);
        border-left: var(--ins-offcanvas-border-width) solid var(--ins-offcanvas-border-color);
        -webkit-transform: translateX(100%);
        transform: translateX(100%)
    }

    .offcanvas-lg.offcanvas-end {
        top: 0;
        left: 0;
        width: var(--ins-offcanvas-width);
        border-right: var(--ins-offcanvas-border-width) solid var(--ins-offcanvas-border-color);
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%)
    }

    .offcanvas-lg.offcanvas-top {
        top: 0;
        left: 0;
        right: 0;
        height: var(--ins-offcanvas-height);
        max-height: 100%;
        border-bottom: var(--ins-offcanvas-border-width) solid var(--ins-offcanvas-border-color);
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%)
    }

    .offcanvas-lg.offcanvas-bottom {
        left: 0;
        right: 0;
        height: var(--ins-offcanvas-height);
        max-height: 100%;
        border-top: var(--ins-offcanvas-border-width) solid var(--ins-offcanvas-border-color);
        -webkit-transform: translateY(100%);
        transform: translateY(100%)
    }

    .offcanvas-lg.show:not(.hiding),
    .offcanvas-lg.showing {
        -webkit-transform: none;
        transform: none
    }

    .offcanvas-lg.hiding,
    .offcanvas-lg.show,
    .offcanvas-lg.showing {
        visibility: visible
    }
}

@media (min-width:992px) {
    .offcanvas-lg {
        --ins-offcanvas-height: auto;
        --ins-offcanvas-border-width: 0;
        background-color: transparent !important
    }

    .offcanvas-lg .offcanvas-header {
        display: none
    }

    .offcanvas-lg .offcanvas-body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-flex: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        padding: 0;
        overflow-y: visible;
        background-color: transparent !important
    }
}

@media (max-width:1199.98px) {
    .offcanvas-xl {
        position: fixed;
        bottom: 0;
        z-index: var(--ins-offcanvas-zindex);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        max-width: 100%;
        color: var(--ins-offcanvas-color);
        visibility: hidden;
        background-color: var(--ins-offcanvas-bg);
        background-clip: padding-box;
        outline: 0;
        -webkit-transition: var(--ins-offcanvas-transition);
        transition: var(--ins-offcanvas-transition)
    }
}

@media (max-width:1199.98px) and (prefers-reduced-motion:reduce) {
    .offcanvas-xl {
        -webkit-transition: none;
        transition: none
    }
}

@media (max-width:1199.98px) {
    .offcanvas-xl.offcanvas-start {
        top: 0;
        right: 0;
        width: var(--ins-offcanvas-width);
        border-left: var(--ins-offcanvas-border-width) solid var(--ins-offcanvas-border-color);
        -webkit-transform: translateX(100%);
        transform: translateX(100%)
    }

    .offcanvas-xl.offcanvas-end {
        top: 0;
        left: 0;
        width: var(--ins-offcanvas-width);
        border-right: var(--ins-offcanvas-border-width) solid var(--ins-offcanvas-border-color);
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%)
    }

    .offcanvas-xl.offcanvas-top {
        top: 0;
        left: 0;
        right: 0;
        height: var(--ins-offcanvas-height);
        max-height: 100%;
        border-bottom: var(--ins-offcanvas-border-width) solid var(--ins-offcanvas-border-color);
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%)
    }

    .offcanvas-xl.offcanvas-bottom {
        left: 0;
        right: 0;
        height: var(--ins-offcanvas-height);
        max-height: 100%;
        border-top: var(--ins-offcanvas-border-width) solid var(--ins-offcanvas-border-color);
        -webkit-transform: translateY(100%);
        transform: translateY(100%)
    }

    .offcanvas-xl.show:not(.hiding),
    .offcanvas-xl.showing {
        -webkit-transform: none;
        transform: none
    }

    .offcanvas-xl.hiding,
    .offcanvas-xl.show,
    .offcanvas-xl.showing {
        visibility: visible
    }
}

@media (min-width:1200px) {
    .offcanvas-xl {
        --ins-offcanvas-height: auto;
        --ins-offcanvas-border-width: 0;
        background-color: transparent !important
    }

    .offcanvas-xl .offcanvas-header {
        display: none
    }

    .offcanvas-xl .offcanvas-body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-flex: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        padding: 0;
        overflow-y: visible;
        background-color: transparent !important
    }
}

@media (max-width:1399.98px) {
    .offcanvas-xxl {
        position: fixed;
        bottom: 0;
        z-index: var(--ins-offcanvas-zindex);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        max-width: 100%;
        color: var(--ins-offcanvas-color);
        visibility: hidden;
        background-color: var(--ins-offcanvas-bg);
        background-clip: padding-box;
        outline: 0;
        -webkit-transition: var(--ins-offcanvas-transition);
        transition: var(--ins-offcanvas-transition)
    }
}

@media (max-width:1399.98px) and (prefers-reduced-motion:reduce) {
    .offcanvas-xxl {
        -webkit-transition: none;
        transition: none
    }
}

@media (max-width:1399.98px) {
    .offcanvas-xxl.offcanvas-start {
        top: 0;
        right: 0;
        width: var(--ins-offcanvas-width);
        border-left: var(--ins-offcanvas-border-width) solid var(--ins-offcanvas-border-color);
        -webkit-transform: translateX(100%);
        transform: translateX(100%)
    }

    .offcanvas-xxl.offcanvas-end {
        top: 0;
        left: 0;
        width: var(--ins-offcanvas-width);
        border-right: var(--ins-offcanvas-border-width) solid var(--ins-offcanvas-border-color);
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%)
    }

    .offcanvas-xxl.offcanvas-top {
        top: 0;
        left: 0;
        right: 0;
        height: var(--ins-offcanvas-height);
        max-height: 100%;
        border-bottom: var(--ins-offcanvas-border-width) solid var(--ins-offcanvas-border-color);
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%)
    }

    .offcanvas-xxl.offcanvas-bottom {
        left: 0;
        right: 0;
        height: var(--ins-offcanvas-height);
        max-height: 100%;
        border-top: var(--ins-offcanvas-border-width) solid var(--ins-offcanvas-border-color);
        -webkit-transform: translateY(100%);
        transform: translateY(100%)
    }

    .offcanvas-xxl.show:not(.hiding),
    .offcanvas-xxl.showing {
        -webkit-transform: none;
        transform: none
    }

    .offcanvas-xxl.hiding,
    .offcanvas-xxl.show,
    .offcanvas-xxl.showing {
        visibility: visible
    }
}

@media (min-width:1400px) {
    .offcanvas-xxl {
        --ins-offcanvas-height: auto;
        --ins-offcanvas-border-width: 0;
        background-color: transparent !important
    }

    .offcanvas-xxl .offcanvas-header {
        display: none
    }

    .offcanvas-xxl .offcanvas-body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-flex: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        padding: 0;
        overflow-y: visible;
        background-color: transparent !important
    }
}

.offcanvas {
    position: fixed;
    bottom: 0;
    z-index: var(--ins-offcanvas-zindex);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    max-width: 100%;
    color: var(--ins-offcanvas-color);
    visibility: hidden;
    background-color: var(--ins-offcanvas-bg);
    background-clip: padding-box;
    outline: 0;
    -webkit-transition: var(--ins-offcanvas-transition);
    transition: var(--ins-offcanvas-transition)
}

@media (prefers-reduced-motion:reduce) {
    .offcanvas {
        -webkit-transition: none;
        transition: none
    }
}

.offcanvas.offcanvas-start {
    top: 0;
    right: 0;
    width: var(--ins-offcanvas-width);
    border-left: var(--ins-offcanvas-border-width) solid var(--ins-offcanvas-border-color);
    -webkit-transform: translateX(100%);
    transform: translateX(100%)
}

.offcanvas.offcanvas-end {
    top: 0;
    left: 0;
    width: var(--ins-offcanvas-width);
    border-right: var(--ins-offcanvas-border-width) solid var(--ins-offcanvas-border-color);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%)
}

.offcanvas.offcanvas-top {
    top: 0;
    left: 0;
    right: 0;
    height: var(--ins-offcanvas-height);
    max-height: 100%;
    border-bottom: var(--ins-offcanvas-border-width) solid var(--ins-offcanvas-border-color);
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%)
}

.offcanvas.offcanvas-bottom {
    left: 0;
    right: 0;
    height: var(--ins-offcanvas-height);
    max-height: 100%;
    border-top: var(--ins-offcanvas-border-width) solid var(--ins-offcanvas-border-color);
    -webkit-transform: translateY(100%);
    transform: translateY(100%)
}

.offcanvas.show:not(.hiding),
.offcanvas.showing {
    -webkit-transform: none;
    transform: none
}

.offcanvas.hiding,
.offcanvas.show,
.offcanvas.showing {
    visibility: visible
}

.offcanvas-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1040;
    width: 100vw;
    height: 100vh;
    background-color: var(--ins-emphasis-color)
}

.offcanvas-backdrop.fade {
    opacity: 0
}

.offcanvas-backdrop.show {
    opacity: .7
}

.offcanvas-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: var(--ins-offcanvas-padding-y) var(--ins-offcanvas-padding-x)
}

.offcanvas-header .btn-close {
    padding: calc(var(--ins-offcanvas-padding-y) * .5) calc(var(--ins-offcanvas-padding-x) * .5);
    margin-top: calc(-.5 * var(--ins-offcanvas-padding-y));
    margin-left: calc(-.5 * var(--ins-offcanvas-padding-x));
    margin-bottom: calc(-.5 * var(--ins-offcanvas-padding-y));
    margin-right: auto
}

.offcanvas-title {
    margin-bottom: 0;
    line-height: var(--ins-offcanvas-title-line-height)
}

.offcanvas-body {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    padding: var(--ins-offcanvas-padding-y) var(--ins-offcanvas-padding-x);
    overflow-y: auto
}

.placeholder {
    display: inline-block;
    min-height: 1em;
    vertical-align: middle;
    cursor: wait;
    background-color: currentcolor;
    opacity: .5
}

.placeholder.btn::before {
    display: inline-block;
    content: ""
}

.placeholder-xs {
    min-height: .6em
}

.placeholder-sm {
    min-height: .8em
}

.placeholder-lg {
    min-height: 1.2em
}

.placeholder-glow .placeholder {
    -webkit-animation: placeholder-glow 2s ease-in-out infinite;
    animation: placeholder-glow 2s ease-in-out infinite
}

@-webkit-keyframes placeholder-glow {
    50% {
        opacity: .2
    }
}

@keyframes placeholder-glow {
    50% {
        opacity: .2
    }
}

.placeholder-wave {
    -webkit-mask-image: linear-gradient(130deg, #000 55%, rgba(0, 0, 0, .8) 75%, #000 95%);
    mask-image: linear-gradient(130deg, #000 55%, rgba(0, 0, 0, .8) 75%, #000 95%);
    -webkit-mask-size: 200% 100%;
    mask-size: 200% 100%;
    -webkit-animation: placeholder-wave 2s linear infinite;
    animation: placeholder-wave 2s linear infinite
}

@-webkit-keyframes placeholder-wave {
    100% {
        -webkit-mask-position: -200% 0;
        mask-position: -200% 0
    }
}

@keyframes placeholder-wave {
    100% {
        -webkit-mask-position: -200% 0;
        mask-position: -200% 0
    }
}

.clearfix::after {
    display: block;
    clear: both;
    content: ""
}

.text-bg-primary {
    color: #fff !important;
    background-color: RGBA(var(--ins-primary-rgb), var(--ins-bg-opacity, 1)) !important
}

.text-bg-secondary {
    color: #fff !important;
    background-color: RGBA(var(--ins-secondary-rgb), var(--ins-bg-opacity, 1)) !important
}

.text-bg-success {
    color: #fff !important;
    background-color: RGBA(var(--ins-success-rgb), var(--ins-bg-opacity, 1)) !important
}

.text-bg-info {
    color: #fff !important;
    background-color: RGBA(var(--ins-info-rgb), var(--ins-bg-opacity, 1)) !important
}

.text-bg-warning {
    color: #fff !important;
    background-color: RGBA(var(--ins-warning-rgb), var(--ins-bg-opacity, 1)) !important
}

.text-bg-danger {
    color: #fff !important;
    background-color: RGBA(var(--ins-danger-rgb), var(--ins-bg-opacity, 1)) !important
}

.text-bg-purple {
    color: #fff !important;
    background-color: RGBA(var(--ins-purple-rgb), var(--ins-bg-opacity, 1)) !important
}

.text-bg-light {
    color: #313a46 !important;
    background-color: RGBA(var(--ins-light-rgb), var(--ins-bg-opacity, 1)) !important
}

.text-bg-dark {
    color: #fff !important;
    background-color: RGBA(var(--ins-dark-rgb), var(--ins-bg-opacity, 1)) !important
}

.link-primary {
    color: RGBA(var(--ins-primary-rgb), var(--ins-link-opacity, 1)) !important;
    text-decoration-color: RGBA(var(--ins-primary-rgb), var(--ins-link-underline-opacity, 1)) !important
}

.link-primary:focus,
.link-primary:hover {
    color: RGBA(22, 152, 126, var(--ins-link-opacity, 1)) !important;
    text-decoration-color: RGBA(22, 152, 126, var(--ins-link-underline-opacity, 1)) !important
}

.link-secondary {
    color: RGBA(var(--ins-secondary-rgb), var(--ins-link-opacity, 1)) !important;
    text-decoration-color: RGBA(var(--ins-secondary-rgb), var(--ins-link-underline-opacity, 1)) !important
}

.link-secondary:focus,
.link-secondary:hover {
    color: RGBA(24, 112, 168, var(--ins-link-opacity, 1)) !important;
    text-decoration-color: RGBA(24, 112, 168, var(--ins-link-underline-opacity, 1)) !important
}

.link-success {
    color: RGBA(var(--ins-success-rgb), var(--ins-link-opacity, 1)) !important;
    text-decoration-color: RGBA(var(--ins-success-rgb), var(--ins-link-underline-opacity, 1)) !important
}

.link-success:focus,
.link-success:hover {
    color: RGBA(9, 176, 128, var(--ins-link-opacity, 1)) !important;
    text-decoration-color: RGBA(9, 176, 128, var(--ins-link-underline-opacity, 1)) !important
}

.link-info {
    color: RGBA(var(--ins-info-rgb), var(--ins-link-opacity, 1)) !important;
    text-decoration-color: RGBA(var(--ins-info-rgb), var(--ins-link-underline-opacity, 1)) !important
}

.link-info:focus,
.link-info:hover {
    color: RGBA(30, 168, 170, var(--ins-link-opacity, 1)) !important;
    text-decoration-color: RGBA(30, 168, 170, var(--ins-link-underline-opacity, 1)) !important
}

.link-warning {
    color: RGBA(var(--ins-warning-rgb), var(--ins-link-opacity, 1)) !important;
    text-decoration-color: RGBA(var(--ins-warning-rgb), var(--ins-link-underline-opacity, 1)) !important
}

.link-warning:focus,
.link-warning:hover {
    color: RGBA(211, 146, 76, var(--ins-link-opacity, 1)) !important;
    text-decoration-color: RGBA(211, 146, 76, var(--ins-link-underline-opacity, 1)) !important
}

.link-danger {
    color: RGBA(var(--ins-danger-rgb), var(--ins-link-opacity, 1)) !important;
    text-decoration-color: RGBA(var(--ins-danger-rgb), var(--ins-link-underline-opacity, 1)) !important
}

.link-danger:focus,
.link-danger:hover {
    color: RGBA(201, 72, 86, var(--ins-link-opacity, 1)) !important;
    text-decoration-color: RGBA(201, 72, 86, var(--ins-link-underline-opacity, 1)) !important
}

.link-purple {
    color: RGBA(var(--ins-purple-rgb), var(--ins-link-opacity, 1)) !important;
    text-decoration-color: RGBA(var(--ins-purple-rgb), var(--ins-link-underline-opacity, 1)) !important
}

.link-purple:focus,
.link-purple:hover {
    color: RGBA(105, 95, 203, var(--ins-link-opacity, 1)) !important;
    text-decoration-color: RGBA(105, 95, 203, var(--ins-link-underline-opacity, 1)) !important
}

.link-light {
    color: RGBA(var(--ins-light-rgb), var(--ins-link-opacity, 1)) !important;
    text-decoration-color: RGBA(var(--ins-light-rgb), var(--ins-link-underline-opacity, 1)) !important
}

.link-light:focus,
.link-light:hover {
    color: RGBA(241, 244, 248, var(--ins-link-opacity, 1)) !important;
    text-decoration-color: RGBA(241, 244, 248, var(--ins-link-underline-opacity, 1)) !important
}

.link-dark {
    color: RGBA(var(--ins-dark-rgb), var(--ins-link-opacity, 1)) !important;
    text-decoration-color: RGBA(var(--ins-dark-rgb), var(--ins-link-underline-opacity, 1)) !important
}

.link-dark:focus,
.link-dark:hover {
    color: RGBA(42, 49, 60, var(--ins-link-opacity, 1)) !important;
    text-decoration-color: RGBA(42, 49, 60, var(--ins-link-underline-opacity, 1)) !important
}

.link-body-emphasis {
    color: RGBA(var(--ins-emphasis-color-rgb), var(--ins-link-opacity, 1)) !important;
    text-decoration-color: RGBA(var(--ins-emphasis-color-rgb), var(--ins-link-underline-opacity, 1)) !important
}

.link-body-emphasis:focus,
.link-body-emphasis:hover {
    color: RGBA(var(--ins-emphasis-color-rgb), var(--ins-link-opacity, .75)) !important;
    text-decoration-color: RGBA(var(--ins-emphasis-color-rgb), var(--ins-link-underline-opacity, .75)) !important
}

.focus-ring:focus {
    outline: 0;
    -webkit-box-shadow: var(--ins-focus-ring-x, 0) var(--ins-focus-ring-y, 0) var(--ins-focus-ring-blur, 0) var(--ins-focus-ring-width) var(--ins-focus-ring-color);
    box-shadow: var(--ins-focus-ring-x, 0) var(--ins-focus-ring-y, 0) var(--ins-focus-ring-blur, 0) var(--ins-focus-ring-width) var(--ins-focus-ring-color)
}

.icon-link {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    gap: .375rem;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-decoration-color: rgba(var(--ins-link-color-rgb), var(--ins-link-opacity, .5));
    text-underline-offset: .25em;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.icon-link>.bi {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    fill: currentcolor;
    -webkit-transition: .2s ease-in-out transform;
    transition: .2s ease-in-out transform
}

@media (prefers-reduced-motion:reduce) {
    .icon-link>.bi {
        -webkit-transition: none;
        transition: none
    }
}

.icon-link-hover:focus-visible>.bi,
.icon-link-hover:hover>.bi {
    -webkit-transform: var(--ins-icon-link-transform, translate3d(-.25em, 0, 0));
    transform: var(--ins-icon-link-transform, translate3d(-.25em, 0, 0))
}

.ratio {
    position: relative;
    width: 100%
}

.ratio::before {
    display: block;
    padding-top: var(--ins-aspect-ratio);
    content: ""
}

.ratio>* {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%
}

.ratio-1x1 {
    --ins-aspect-ratio: 100%
}

.ratio-4x3 {
    --ins-aspect-ratio: 75%
}

.ratio-16x9 {
    --ins-aspect-ratio: 56.25%
}

.ratio-21x9 {
    --ins-aspect-ratio: 42.8571428571%
}

.fixed-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030
}

.fixed-bottom {
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1030
}

.sticky-top {
    position: sticky;
    top: 0;
    z-index: 1020
}

.sticky-bottom {
    position: sticky;
    bottom: 0;
    z-index: 1020
}

@media (min-width:576px) {
    .sticky-sm-top {
        position: sticky;
        top: 0;
        z-index: 1020
    }

    .sticky-sm-bottom {
        position: sticky;
        bottom: 0;
        z-index: 1020
    }
}

@media (min-width:768px) {
    .sticky-md-top {
        position: sticky;
        top: 0;
        z-index: 1020
    }

    .sticky-md-bottom {
        position: sticky;
        bottom: 0;
        z-index: 1020
    }
}

@media (min-width:992px) {
    .sticky-lg-top {
        position: sticky;
        top: 0;
        z-index: 1020
    }

    .sticky-lg-bottom {
        position: sticky;
        bottom: 0;
        z-index: 1020
    }
}

@media (min-width:1200px) {
    .sticky-xl-top {
        position: sticky;
        top: 0;
        z-index: 1020
    }

    .sticky-xl-bottom {
        position: sticky;
        bottom: 0;
        z-index: 1020
    }
}

@media (min-width:1400px) {
    .sticky-xxl-top {
        position: sticky;
        top: 0;
        z-index: 1020
    }

    .sticky-xxl-bottom {
        position: sticky;
        bottom: 0;
        z-index: 1020
    }
}

.hstack {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-item-align: stretch;
    align-self: stretch
}

.vstack {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-item-align: stretch;
    align-self: stretch
}

.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important
}

.visually-hidden-focusable:not(:focus):not(:focus-within):not(caption),
.visually-hidden:not(caption) {
    position: absolute !important
}

.visually-hidden *,
.visually-hidden-focusable:not(:focus):not(:focus-within) * {
    overflow: hidden !important
}

.stretched-link::after {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
    content: ""
}

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.vr {
    display: inline-block;
    -ms-flex-item-align: stretch;
    align-self: stretch;
    width: var(--ins-border-width);
    min-height: 1em;
    background-color: currentcolor;
    opacity: 1
}

.align-baseline {
    vertical-align: baseline !important
}

.align-top {
    vertical-align: top !important
}

.align-middle {
    vertical-align: middle !important
}

.align-bottom {
    vertical-align: bottom !important
}

.align-text-bottom {
    vertical-align: text-bottom !important
}

.align-text-top {
    vertical-align: text-top !important
}

.float-start {
    float: right !important
}

.float-end {
    float: left !important
}

.float-none {
    float: none !important
}

.object-fit-contain {
    -o-object-fit: contain !important;
    object-fit: contain !important
}

.object-fit-cover {
    -o-object-fit: cover !important;
    object-fit: cover !important
}

.object-fit-fill {
    -o-object-fit: fill !important;
    object-fit: fill !important
}

.object-fit-scale {
    -o-object-fit: scale-down !important;
    object-fit: scale-down !important
}

.object-fit-none {
    -o-object-fit: none !important;
    object-fit: none !important
}

.opacity-0 {
    opacity: 0 !important
}

.opacity-25 {
    opacity: .25 !important
}

.opacity-50 {
    opacity: .5 !important
}

.opacity-75 {
    opacity: .75 !important
}

.opacity-100 {
    opacity: 1 !important
}

.overflow-auto {
    overflow: auto !important
}

.overflow-hidden {
    overflow: hidden !important
}

.overflow-visible {
    overflow: visible !important
}

.overflow-scroll {
    overflow: scroll !important
}

.overflow-x-auto {
    overflow-x: auto !important
}

.overflow-x-hidden {
    overflow-x: hidden !important
}

.overflow-x-visible {
    overflow-x: visible !important
}

.overflow-x-scroll {
    overflow-x: scroll !important
}

.overflow-y-auto {
    overflow-y: auto !important
}

.overflow-y-hidden {
    overflow-y: hidden !important
}

.overflow-y-visible {
    overflow-y: visible !important
}

.overflow-y-scroll {
    overflow-y: scroll !important
}

.d-inline {
    display: inline !important
}

.d-inline-block {
    display: inline-block !important
}

.d-block {
    display: block !important
}

.d-grid {
    display: grid !important
}

.d-inline-grid {
    display: inline-grid !important
}

.d-table {
    display: table !important
}

.d-table-row {
    display: table-row !important
}

.d-table-cell {
    display: table-cell !important
}

.app-search .app-search-icon,
.avatar-group,
.d-flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;

}

.d-inline-flex {
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important
}

.d-none {
    display: none !important
}

.shadow {
    -webkit-box-shadow: var(--ins-box-shadow) !important;
    box-shadow: var(--ins-box-shadow) !important
}

.shadow-sm {
    -webkit-box-shadow: var(--ins-box-shadow-sm) !important;
    box-shadow: var(--ins-box-shadow-sm) !important
}

.shadow-lg {
    -webkit-box-shadow: var(--ins-box-shadow-lg) !important;
    box-shadow: var(--ins-box-shadow-lg) !important
}

.shadow-none {
    -webkit-box-shadow: none !important;
    box-shadow: none !important
}

.focus-ring-primary {
    --ins-focus-ring-color: rgba(var(--ins-primary-rgb), var(--ins-focus-ring-opacity))
}

.focus-ring-secondary {
    --ins-focus-ring-color: rgba(var(--ins-secondary-rgb), var(--ins-focus-ring-opacity))
}

.focus-ring-success {
    --ins-focus-ring-color: rgba(var(--ins-success-rgb), var(--ins-focus-ring-opacity))
}

.focus-ring-info {
    --ins-focus-ring-color: rgba(var(--ins-info-rgb), var(--ins-focus-ring-opacity))
}

.focus-ring-warning {
    --ins-focus-ring-color: rgba(var(--ins-warning-rgb), var(--ins-focus-ring-opacity))
}

.focus-ring-danger {
    --ins-focus-ring-color: rgba(var(--ins-danger-rgb), var(--ins-focus-ring-opacity))
}

.focus-ring-purple {
    --ins-focus-ring-color: rgba(var(--ins-purple-rgb), var(--ins-focus-ring-opacity))
}

.focus-ring-light {
    --ins-focus-ring-color: rgba(var(--ins-light-rgb), var(--ins-focus-ring-opacity))
}

.focus-ring-dark {
    --ins-focus-ring-color: rgba(var(--ins-dark-rgb), var(--ins-focus-ring-opacity))
}

.position-static {
    position: static !important
}

.auth-box,
.position-relative {
    position: relative !important
}

.app-search .app-search-icon,
.position-absolute {
    position: absolute !important
}

.position-fixed {
    position: fixed !important
}

.card-top-sticky,
.position-sticky {
    position: sticky !important
}

.top-0 {
    top: 0 !important
}

.app-search .app-search-icon,
.top-50 {
    top: 50% !important
}

.top-100 {
    top: 100% !important
}

.bottom-0 {
    bottom: 0 !important
}

.bottom-50 {
    bottom: 50% !important
}

.bottom-100 {
    bottom: 100% !important
}

.start-0 {
    right: 0 !important
}

.start-50 {
    right: 50% !important
}

.start-100 {
    right: 100% !important
}

.end-0 {
    left: 0 !important
}

.end-50 {
    left: 50% !important
}

.end-100 {
    left: 100% !important
}

.translate-middle {
    -webkit-transform: translate(50%, -50%) !important;
    transform: translate(50%, -50%) !important
}

.translate-middle-x {
    -webkit-transform: translateX(50%) !important;
    transform: translateX(50%) !important
}

.app-search .app-search-icon,
.translate-middle-y {
    -webkit-transform: translateY(-50%) !important;
    transform: translateY(-50%) !important
}

.border {
    border: var(--ins-border-width) var(--ins-border-style) var(--ins-border-color) !important
}

.border-0 {
    border: 0 !important
}

.border-top {
    border-top: var(--ins-border-width) var(--ins-border-style) var(--ins-border-color) !important
}

.border-top-0 {
    border-top: 0 !important
}

.border-end {
    border-left: var(--ins-border-width) var(--ins-border-style) var(--ins-border-color) !important
}

.border-end-0 {
    border-left: 0 !important
}

.border-bottom {
    border-bottom: var(--ins-border-width) var(--ins-border-style) var(--ins-border-color) !important
}

.border-bottom-0 {
    border-bottom: 0 !important
}

.border-start {
    border-right: var(--ins-border-width) var(--ins-border-style) var(--ins-border-color) !important
}

.border-start-0 {
    border-right: 0 !important
}

.border-primary {
    --ins-border-opacity: 1;
    border-color: rgba(var(--ins-primary-rgb), var(--ins-border-opacity)) !important
}

.border-secondary {
    --ins-border-opacity: 1;
    border-color: rgba(var(--ins-secondary-rgb), var(--ins-border-opacity)) !important
}

.border-success {
    --ins-border-opacity: 1;
    border-color: rgba(var(--ins-success-rgb), var(--ins-border-opacity)) !important
}

.border-info {
    --ins-border-opacity: 1;
    border-color: rgba(var(--ins-info-rgb), var(--ins-border-opacity)) !important
}

.border-warning {
    --ins-border-opacity: 1;
    border-color: rgba(var(--ins-warning-rgb), var(--ins-border-opacity)) !important
}

.border-danger {
    --ins-border-opacity: 1;
    border-color: rgba(var(--ins-danger-rgb), var(--ins-border-opacity)) !important
}

.border-purple {
    --ins-border-opacity: 1;
    border-color: rgba(var(--ins-purple-rgb), var(--ins-border-opacity)) !important
}

.border-light {
    --ins-border-opacity: 1;
    border-color: rgba(var(--ins-light-rgb), var(--ins-border-opacity)) !important
}

.border-dark {
    --ins-border-opacity: 1;
    border-color: rgba(var(--ins-dark-rgb), var(--ins-border-opacity)) !important
}

.border-black {
    --ins-border-opacity: 1;
    border-color: rgba(var(--ins-black-rgb), var(--ins-border-opacity)) !important
}

.border-white {
    --ins-border-opacity: 1;
    border-color: rgba(var(--ins-white-rgb), var(--ins-border-opacity)) !important
}

.border-primary-subtle {
    border-color: var(--ins-primary-border-subtle) !important
}

.border-secondary-subtle {
    border-color: var(--ins-secondary-border-subtle) !important
}

.border-success-subtle {
    border-color: var(--ins-success-border-subtle) !important
}

.border-info-subtle {
    border-color: var(--ins-info-border-subtle) !important
}

.border-warning-subtle {
    border-color: var(--ins-warning-border-subtle) !important
}

.border-danger-subtle {
    border-color: var(--ins-danger-border-subtle) !important
}

.border-light-subtle {
    border-color: var(--ins-light-border-subtle) !important
}

.border-dark-subtle {
    border-color: var(--ins-dark-border-subtle) !important
}

.border-1 {
    border-width: 1px !important
}

.border-2 {
    border-width: 2px !important
}

.border-3 {
    border-width: 3px !important
}

.border-4 {
    border-width: 4px !important
}

.border-5 {
    border-width: 5px !important
}

.border-opacity-10 {
    --ins-border-opacity: 0.1
}

.border-opacity-25 {
    --ins-border-opacity: 0.25
}

.border-opacity-50 {
    --ins-border-opacity: 0.5
}

.border-opacity-75 {
    --ins-border-opacity: 0.75
}

.border-opacity-100 {
    --ins-border-opacity: 1
}

.w-0 {
    width: 0 !important
}

.w-25 {
    width: 25% !important
}

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

.w-75 {
    width: 75% !important
}

.w-100 {
    width: 100% !important
}

.mw-100 {
    max-width: 100% !important
}

.vw-100 {
    width: 100vw !important
}

.min-vw-100 {
    min-width: 100vw !important
}

.h-25 {
    height: 25% !important
}

.h-50 {
    height: 50% !important
}

.h-75 {
    height: 75% !important
}

.h-100 {
    height: 100% !important
}

.h-auto {
    height: auto !important
}

.mh-100 {
    max-height: 100% !important
}

.vh-100 {
    height: 100vh !important
}

.auth-box,
.min-vh-100 {
    min-height: 100vh !important
}

.flex-fill {
    -webkit-box-flex: 1 !important;
    -ms-flex: 1 1 auto !important;
    flex: 1 1 auto !important
}

.flex-row {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: row !important;
    flex-direction: row !important
}

.flex-column {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important
}

.flex-row-reverse {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: reverse !important;
    -ms-flex-direction: row-reverse !important;
    flex-direction: row-reverse !important
}

.flex-column-reverse {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: reverse !important;
    -ms-flex-direction: column-reverse !important;
    flex-direction: column-reverse !important
}

.flex-grow-0 {
    -webkit-box-flex: 0 !important;
    -ms-flex-positive: 0 !important;
    flex-grow: 0 !important
}

.flex-grow-1 {
    -webkit-box-flex: 1 !important;
    -ms-flex-positive: 1 !important;
    flex-grow: 1 !important
}

.flex-shrink-0 {
    -ms-flex-negative: 0 !important;
    flex-shrink: 0 !important
}

.flex-shrink-1 {
    -ms-flex-negative: 1 !important;
    flex-shrink: 1 !important
}

.avatar-group,
.card-header,
.flex-wrap {
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important
}

.flex-nowrap {
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important
}

.flex-wrap-reverse {
    -ms-flex-wrap: wrap-reverse !important;
    flex-wrap: wrap-reverse !important
}

.justify-content-start {
    -webkit-box-pack: start !important;
    -ms-flex-pack: start !important;
    justify-content: flex-start !important
}

.justify-content-end {
    -webkit-box-pack: end !important;
    -ms-flex-pack: end !important;
    justify-content: flex-end !important;
    border-radius: 10px;
}

.app-search .app-search-icon,
.justify-content-center {
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important
}

.justify-content-between {
    -webkit-box-pack: justify !important;
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
    gap: 15px;
}

.justify-content-around {
    -ms-flex-pack: distribute !important;
    justify-content: space-around !important
}

.justify-content-evenly {
    -webkit-box-pack: space-evenly !important;
    -ms-flex-pack: space-evenly !important;
    justify-content: space-evenly !important
}

.align-items-start {
    -webkit-box-align: start !important;
    -ms-flex-align: start !important;
    align-items: flex-start !important
}

.align-items-end {
    -webkit-box-align: end !important;
    -ms-flex-align: end !important;
    align-items: flex-end !important
}

.align-items-center,
.avatar-group {
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important
}

.align-items-baseline {
    -webkit-box-align: baseline !important;
    -ms-flex-align: baseline !important;
    align-items: baseline !important
}

.align-items-stretch {
    -webkit-box-align: stretch !important;
    -ms-flex-align: stretch !important;
    align-items: stretch !important
}

.align-content-start {
    -ms-flex-line-pack: start !important;
    align-content: flex-start !important
}

.align-content-end {
    -ms-flex-line-pack: end !important;
    align-content: flex-end !important
}

.align-content-center {
    -ms-flex-line-pack: center !important;
    align-content: center !important
}

.align-content-between {
    -ms-flex-line-pack: justify !important;
    align-content: space-between !important
}

.align-content-around {
    -ms-flex-line-pack: distribute !important;
    align-content: space-around !important
}

.align-content-stretch {
    -ms-flex-line-pack: stretch !important;
    align-content: stretch !important
}

.align-self-auto {
    -ms-flex-item-align: auto !important;
    align-self: auto !important
}

.align-self-start {
    -ms-flex-item-align: start !important;
    align-self: flex-start !important
}

.align-self-end {
    -ms-flex-item-align: end !important;
    align-self: flex-end !important
}

.align-self-center {
    -ms-flex-item-align: center !important;
    align-self: center !important
}

.align-self-baseline {
    -ms-flex-item-align: baseline !important;
    align-self: baseline !important
}

.align-self-stretch {
    -ms-flex-item-align: stretch !important;
    align-self: stretch !important
}

.order-first {
    -webkit-box-ordinal-group: 0 !important;
    -ms-flex-order: -1 !important;
    order: -1 !important
}

.order-0 {
    -webkit-box-ordinal-group: 1 !important;
    -ms-flex-order: 0 !important;
    order: 0 !important
}

.order-1 {
    -webkit-box-ordinal-group: 2 !important;
    -ms-flex-order: 1 !important;
    order: 1 !important
}

.order-2 {
    -webkit-box-ordinal-group: 3 !important;
    -ms-flex-order: 2 !important;
    order: 2 !important
}

.order-3 {
    -webkit-box-ordinal-group: 4 !important;
    -ms-flex-order: 3 !important;
    order: 3 !important
}

.order-4 {
    -webkit-box-ordinal-group: 5 !important;
    -ms-flex-order: 4 !important;
    order: 4 !important
}

.order-5 {
    -webkit-box-ordinal-group: 6 !important;
    -ms-flex-order: 5 !important;
    order: 5 !important
}

.order-last {
    -webkit-box-ordinal-group: 7 !important;
    -ms-flex-order: 6 !important;
    order: 6 !important
}

.m-0 {
    margin: 0 !important
}

.m-1 {
    margin: .3125rem !important
}

.m-2 {
    margin: .625rem !important
}

.m-3 {
    margin: 1.25rem !important
}

.m-4 {
    margin: 1.875rem !important
}

.m-5 {
    margin: 3.75rem !important
}

.m-auto {
    margin: auto !important
}

.mx-0 {
    margin-left: 0 !important;
    margin-right: 0 !important
}

.mx-1 {
    margin-left: .3125rem !important;
    margin-right: .3125rem !important
}

.mx-2 {
    margin-left: .625rem !important;
    margin-right: .625rem !important
}

.mx-3 {
    margin-left: 1.25rem !important;
    margin-right: 1.25rem !important
}

.mx-4 {
    margin-left: 1.875rem !important;
    margin-right: 1.875rem !important
}

.mx-5 {
    margin-left: 3.75rem !important;
    margin-right: 3.75rem !important
}

.mx-auto {
    margin-left: auto !important;
    margin-right: auto !important
}

.my-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important
}

.my-1 {
    margin-top: .3125rem !important;
    margin-bottom: .3125rem !important
}

.my-2 {
    margin-top: .625rem !important;
    margin-bottom: .625rem !important
}

.my-3 {
    margin-top: 1.25rem !important;
    margin-bottom: 1.25rem !important
}

.my-4 {
    margin-top: 1.875rem !important;
    margin-bottom: 1.875rem !important
}

.my-5 {
    margin-top: 3.75rem !important;
    margin-bottom: 3.75rem !important
}

.my-auto {
    margin-top: auto !important;
    margin-bottom: auto !important
}

.mt-0 {
    margin-top: 0 !important
}

.mt-1 {
    margin-top: .3125rem !important
}

.mt-2 {
    margin-top: .625rem !important
}

.mt-3 {
    margin-top: 1.25rem !important
}

.mt-4 {
    margin-top: 1.875rem !important
}

.mt-5 {
    margin-top: 3.75rem !important
}

.mt-auto {
    margin-top: auto !important
}

.me-0 {
    margin-left: 0 !important
}

.me-1 {
    margin-left: .3125rem !important
}

.me-2 {
    margin-left: .625rem !important
}

.me-3 {
    margin-left: 1.25rem !important
}

.me-4 {
    margin-left: 1.875rem !important
}

.me-5 {
    margin-left: 3.75rem !important
}

.me-auto {
    margin-left: auto !important
}

.mb-0 {
    margin-bottom: 0 !important
}

.mb-1 {
    margin-bottom: .3125rem !important
}

.mb-2 {
    margin-bottom: .625rem !important
}

.mb-3 {
    margin-bottom: 1.25rem !important
}

.mb-4 {
    margin-bottom: 1.875rem !important
}

.mb-5 {
    margin-bottom: 3.75rem !important
}

.mb-auto {
    margin-bottom: auto !important
}

.ms-0 {
    margin-right: 0 !important
}

.ms-1 {
    margin-right: .3125rem !important
}

.ms-2 {
    margin-right: .625rem !important
}

.ms-3 {
    margin-right: 1.25rem !important
}

.ms-4 {
    margin-right: 1.875rem !important
}

.ms-5 {
    margin-right: 3.75rem !important
}

.ms-auto {
    margin-right: auto !important
}

.m-n1 {
    margin: -.3125rem !important
}

.m-n2 {
    margin: -.625rem !important
}

.m-n3 {
    margin: -1.25rem !important
}

.m-n4 {
    margin: -1.875rem !important
}

.m-n5 {
    margin: -3.75rem !important
}

.mx-n1 {
    margin-left: -.3125rem !important;
    margin-right: -.3125rem !important
}

.mx-n2 {
    margin-left: -.625rem !important;
    margin-right: -.625rem !important
}

.mx-n3 {
    margin-left: -1.25rem !important;
    margin-right: -1.25rem !important
}

.mx-n4 {
    margin-left: -1.875rem !important;
    margin-right: -1.875rem !important
}

.mx-n5 {
    margin-left: -3.75rem !important;
    margin-right: -3.75rem !important
}

.my-n1 {
    margin-top: -.3125rem !important;
    margin-bottom: -.3125rem !important
}

.my-n2 {
    margin-top: -.625rem !important;
    margin-bottom: -.625rem !important
}

.my-n3 {
    margin-top: -1.25rem !important;
    margin-bottom: -1.25rem !important
}

.my-n4 {
    margin-top: -1.875rem !important;
    margin-bottom: -1.875rem !important
}

.my-n5 {
    margin-top: -3.75rem !important;
    margin-bottom: -3.75rem !important
}

.mt-n1 {
    margin-top: -.3125rem !important
}

.mt-n2 {
    margin-top: -.625rem !important
}

.mt-n3 {
    margin-top: -1.25rem !important
}

.mt-n4 {
    margin-top: -1.875rem !important
}

.mt-n5 {
    margin-top: -3.75rem !important
}

.me-n1 {
    margin-left: -.3125rem !important
}

.me-n2 {
    margin-left: -.625rem !important
}

.me-n3 {
    margin-left: -1.25rem !important
}

.me-n4 {
    margin-left: -1.875rem !important
}

.me-n5 {
    margin-left: -3.75rem !important
}

.mb-n1 {
    margin-bottom: -.3125rem !important
}

.mb-n2 {
    margin-bottom: -.625rem !important
}

.mb-n3 {
    margin-bottom: -1.25rem !important
}

.mb-n4 {
    margin-bottom: -1.875rem !important
}

.mb-n5 {
    margin-bottom: -3.75rem !important
}

.ms-n1 {
    margin-right: -.3125rem !important
}

.ms-n2 {
    margin-right: -.625rem !important
}

.ms-n3 {
    margin-right: -1.25rem !important
}

.ms-n4 {
    margin-right: -1.875rem !important
}

.ms-n5 {
    margin-right: -3.75rem !important
}

.p-0 {
    padding: 0 !important
}

.p-1 {
    padding: .3125rem !important
}

.p-2 {
    padding: .625rem !important
}

.p-3 {
    padding: 1.25rem !important
}

.p-4 {
    padding: 1.2rem !important
}

.p-5 {
    padding: 3.75rem !important
}

.px-0 {
    padding-left: 0 !important;
    padding-right: 0 !important
}

.px-1 {
    padding-left: .3125rem !important;
    padding-right: .3125rem !important
}

.px-2 {
    padding-left: .625rem !important;
    padding-right: .625rem !important
}

.px-3 {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important
}

.px-4 {
    padding-left: 1.875rem !important;
    padding-right: 1.875rem !important
}

.px-5 {
    padding-left: 3.75rem !important;
    padding-right: 3.75rem !important
}

.py-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important
}

.py-1 {
    padding-top: .3125rem !important;
    padding-bottom: .3125rem !important
}

.py-2 {
    padding-top: .625rem !important;
    padding-bottom: .625rem !important
}

.py-3 {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important
}

.py-4 {
    padding-top: 1.875rem !important;
    padding-bottom: 1.875rem !important
}

.py-5 {
    padding-top: 3.75rem !important;
    padding-bottom: 3.75rem !important
}

.pt-0 {
    padding-top: 0 !important
}

.pt-1 {
    padding-top: .3125rem !important
}

.pt-2 {
    padding-top: .625rem !important
}

.pt-3 {
    padding-top: 1.25rem !important
}

.pt-4 {
    padding-top: 1.875rem !important
}

.pt-5 {
    padding-top: 3.75rem !important
}

.pe-0 {
    padding-left: 0 !important
}

.pe-1 {
    padding-left: .3125rem !important
}

.pe-2 {
    padding-left: .625rem !important
}

.pe-3 {
    padding-left: 1.25rem !important
}

.pe-4 {
    padding-left: 1.875rem !important
}

.pe-5 {
    padding-left: 3.75rem !important
}

.pb-0 {
    padding-bottom: 0 !important
}

.pb-1 {
    padding-bottom: .3125rem !important
}

.pb-2 {
    padding-bottom: .625rem !important
}

.pb-3 {
    padding-bottom: 1.25rem !important
}

.pb-4 {
    padding-bottom: 1.875rem !important
}

.pb-5 {
    padding-bottom: 3.75rem !important
}

.ps-0 {
    padding-right: 0 !important
}

.ps-1 {
    padding-right: .3125rem !important
}

.ps-2 {
    padding-right: .625rem !important
}

.ps-3 {
    padding-right: 1.25rem !important
}

.ps-4 {
    padding-right: 1.875rem !important
}

.ps-5 {
    padding-right: 3.75rem !important
}

.gap-0 {
    gap: 0 !important
}

.gap-1 {
    gap: .3125rem !important
}

.gap-2 {
    gap: .625rem !important
}

.card-header,
.gap-3 {
    gap: 1.25rem !important
}

.gap-4 {
    gap: 1.875rem !important
}

.gap-5 {
    gap: 3.75rem !important
}

.row-gap-0 {
    row-gap: 0 !important
}

.row-gap-1 {
    row-gap: .3125rem !important
}

.row-gap-2 {
    row-gap: .625rem !important
}

.row-gap-3 {
    row-gap: 1.25rem !important
}

.row-gap-4 {
    row-gap: 1.875rem !important
}

.row-gap-5 {
    row-gap: 3.75rem !important
}

.column-gap-0 {
    -webkit-column-gap: 0 !important;
    -moz-column-gap: 0 !important;
    column-gap: 0 !important
}

.column-gap-1 {
    -webkit-column-gap: .3125rem !important;
    -moz-column-gap: .3125rem !important;
    column-gap: .3125rem !important
}

.column-gap-2 {
    -webkit-column-gap: .625rem !important;
    -moz-column-gap: .625rem !important;
    column-gap: .625rem !important
}

.column-gap-3 {
    -webkit-column-gap: 1.25rem !important;
    -moz-column-gap: 1.25rem !important;
    column-gap: 1.25rem !important
}

.column-gap-4 {
    -webkit-column-gap: 1.875rem !important;
    -moz-column-gap: 1.875rem !important;
    column-gap: 1.875rem !important
}

.column-gap-5 {
    -webkit-column-gap: 3.75rem !important;
    -moz-column-gap: 3.75rem !important;
    column-gap: 3.75rem !important
}

.font-monospace {
    font-family: var(--ins-font-monospace) !important
}

.fs-1 {
    font-size: calc(1.32825rem + .939vw) !important
}

.fs-2 {
    font-size: calc(1.294104rem + .529248vw) !important
}

.fs-3 {
    font-size: calc(1.2643713705rem + .172456446vw) !important
}

.fs-4 {
    font-size: 1.01625rem !important
}

.fs-5 {
    font-size: .84552rem !important
}

.fs-6 {
    font-size: .69105rem !important
}

.fst-italic {
    font-style: italic !important
}

.fst-normal {
    font-style: normal !important
}

.fw-lighter {
    font-weight: lighter !important
}

.fw-light {
    font-weight: 300 !important
}

.fw-normal {
    font-weight: 400 !important
}

.fw-medium {
    font-weight: var(--ins-font-weight-medium) !important
}

.fw-semibold {
    font-weight: var(--ins-font-weight-semibold) !important
}

.fw-bold {
    font-weight: var(--ins-font-weight-bold) !important
}

.fw-bolder {
    font-weight: bolder !important
}

.lh-1 {
    line-height: 1 !important
}

.lh-sm {
    line-height: 1.25 !important
}

.lh-base {
    line-height: 1.5 !important
}

.lh-lg,
.ql-editor {
    line-height: 2 !important
}

.text-start {
    text-align: right !important
}

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

.text-center {
    text-align: center !important
}

.text-decoration-none {
    text-decoration: none !important
}

.text-decoration-underline {
    text-decoration: underline !important
}

.text-decoration-line-through {
    text-decoration: line-through !important
}

.text-lowercase {
    text-transform: lowercase !important
}


.text-capitalize {
    text-transform: capitalize !important
}

.text-wrap {
    white-space: normal !important
}

.text-nowrap {
    white-space: nowrap !important
}

.text-primary {
    --ins-text-opacity: 1;
    color: #7c3aed !important
}

.text-secondary {
    --ins-text-opacity: 1;
    color: rgba(var(--ins-secondary-rgb), var(--ins-text-opacity)) !important
}

.text-success {
    --ins-text-opacity: 1;
    color: rgba(var(--ins-success-rgb), var(--ins-text-opacity)) !important;

}

.text-info {
    --ins-text-opacity: 1;
    color: rgba(var(--ins-info-rgb), var(--ins-text-opacity)) !important
}

.text-warning {
    --ins-text-opacity: 1;
    color: rgba(var(--ins-warning-rgb), var(--ins-text-opacity)) !important
}

.text-danger {
    --ins-text-opacity: 1;
    color: rgba(var(--ins-danger-rgb), var(--ins-text-opacity)) !important
}

.text-purple {
    --ins-text-opacity: 1;
    color: rgba(var(--ins-purple-rgb), var(--ins-text-opacity)) !important
}

.text-light {
    --ins-text-opacity: 1;
    color: rgba(var(--ins-light-rgb), var(--ins-text-opacity)) !important
}

.text-dark {
    --ins-text-opacity: 1;
    color: rgba(var(--ins-dark-rgb), var(--ins-text-opacity)) !important
}

.text-black {
    --ins-text-opacity: 1;
    color: rgba(var(--ins-black-rgb), var(--ins-text-opacity)) !important
}

.text-white {
    --ins-text-opacity: 1;
    color: rgba(var(--ins-white-rgb), var(--ins-text-opacity)) !important
}

.text-body {
    --ins-text-opacity: 1;
    color: rgba(var(--ins-body-color-rgb), var(--ins-text-opacity)) !important
}

.text-muted {
    --ins-text-opacity: 1;
    color: var(--ins-secondary-color) !important
}

.text-black-50 {
    --ins-text-opacity: 1;
    color: rgba(0, 0, 0, .5) !important
}

.text-white-50 {
    --ins-text-opacity: 1;
    color: rgba(255, 255, 255, .5) !important
}

.text-body-secondary {
    --ins-text-opacity: 1;
    color: var(--ins-secondary-color) !important
}

.text-body-tertiary {
    --ins-text-opacity: 1;
    color: var(--ins-tertiary-color) !important
}

.text-body-emphasis {
    --ins-text-opacity: 1;
    color: var(--ins-emphasis-color) !important
}

.text-reset {
    --ins-text-opacity: 1;
    color: inherit !important
}

.text-opacity-25 {
    --ins-text-opacity: 0.25
}

.text-opacity-50 {
    --ins-text-opacity: 0.5
}

.text-opacity-75 {
    --ins-text-opacity: 0.75
}

.text-opacity-100 {
    --ins-text-opacity: 1
}

.text-primary-emphasis {
    color: var(--ins-primary-text-emphasis) !important
}

.text-secondary-emphasis {
    color: var(--ins-secondary-text-emphasis) !important
}

.text-success-emphasis {
    color: var(--ins-success-text-emphasis) !important
}

.text-info-emphasis {
    color: var(--ins-info-text-emphasis) !important
}

.text-warning-emphasis {
    color: var(--ins-warning-text-emphasis) !important
}

.text-danger-emphasis {
    color: var(--ins-danger-text-emphasis) !important
}

.text-light-emphasis {
    color: var(--ins-light-text-emphasis) !important
}

.text-dark-emphasis {
    color: var(--ins-dark-text-emphasis) !important
}

.link-opacity-10 {
    --ins-link-opacity: 0.1
}

.link-opacity-10-hover:hover {
    --ins-link-opacity: 0.1
}

.link-opacity-25 {
    --ins-link-opacity: 0.25
}

.link-opacity-25-hover:hover {
    --ins-link-opacity: 0.25
}

.link-opacity-50 {
    --ins-link-opacity: 0.5
}

.link-opacity-50-hover:hover {
    --ins-link-opacity: 0.5
}

.link-opacity-75 {
    --ins-link-opacity: 0.75
}

.link-opacity-75-hover:hover {
    --ins-link-opacity: 0.75
}

.link-opacity-100 {
    --ins-link-opacity: 1
}

.link-opacity-100-hover:hover {
    --ins-link-opacity: 1
}

.link-offset-1 {
    text-underline-offset: .125em !important
}

.link-offset-1-hover:hover {
    text-underline-offset: .125em !important
}

.link-offset-2 {
    text-underline-offset: .25em !important
}

.link-offset-2-hover:hover {
    text-underline-offset: .25em !important
}

.link-offset-3 {
    text-underline-offset: .375em !important
}

.link-offset-3-hover:hover {
    text-underline-offset: .375em !important
}

.link-underline-primary {
    --ins-link-underline-opacity: 1;
    text-decoration-color: rgba(var(--ins-primary-rgb), var(--ins-link-underline-opacity)) !important
}

.link-underline-secondary {
    --ins-link-underline-opacity: 1;
    text-decoration-color: rgba(var(--ins-secondary-rgb), var(--ins-link-underline-opacity)) !important
}

.link-underline-success {
    --ins-link-underline-opacity: 1;
    text-decoration-color: rgba(var(--ins-success-rgb), var(--ins-link-underline-opacity)) !important
}

.link-underline-info {
    --ins-link-underline-opacity: 1;
    text-decoration-color: rgba(var(--ins-info-rgb), var(--ins-link-underline-opacity)) !important
}

.link-underline-warning {
    --ins-link-underline-opacity: 1;
    text-decoration-color: rgba(var(--ins-warning-rgb), var(--ins-link-underline-opacity)) !important
}

.link-underline-danger {
    --ins-link-underline-opacity: 1;
    text-decoration-color: rgba(var(--ins-danger-rgb), var(--ins-link-underline-opacity)) !important
}

.link-underline-purple {
    --ins-link-underline-opacity: 1;
    text-decoration-color: rgba(var(--ins-purple-rgb), var(--ins-link-underline-opacity)) !important
}

.link-underline-light {
    --ins-link-underline-opacity: 1;
    text-decoration-color: rgba(var(--ins-light-rgb), var(--ins-link-underline-opacity)) !important
}

.link-underline-dark {
    --ins-link-underline-opacity: 1;
    text-decoration-color: rgba(var(--ins-dark-rgb), var(--ins-link-underline-opacity)) !important
}

.link-underline {
    --ins-link-underline-opacity: 1;
    text-decoration-color: rgba(var(--ins-link-color-rgb), var(--ins-link-underline-opacity, 1)) !important
}

.link-underline-opacity-0 {
    --ins-link-underline-opacity: 0
}

.link-underline-opacity-0-hover:hover {
    --ins-link-underline-opacity: 0
}

.link-underline-opacity-10 {
    --ins-link-underline-opacity: 0.1
}

.link-underline-opacity-10-hover:hover {
    --ins-link-underline-opacity: 0.1
}

.link-underline-opacity-25 {
    --ins-link-underline-opacity: 0.25
}

.link-underline-opacity-25-hover:hover {
    --ins-link-underline-opacity: 0.25
}

.link-underline-opacity-50 {
    --ins-link-underline-opacity: 0.5
}

.link-underline-opacity-50-hover:hover {
    --ins-link-underline-opacity: 0.5
}

.link-underline-opacity-75 {
    --ins-link-underline-opacity: 0.75
}

.link-underline-opacity-75-hover:hover {
    --ins-link-underline-opacity: 0.75
}

.link-underline-opacity-100 {
    --ins-link-underline-opacity: 1
}

.link-underline-opacity-100-hover:hover {
    --ins-link-underline-opacity: 1
}

.bg-primary {
    --ins-bg-opacity: 1;
    background-color: rgba(var(--ins-primary-rgb), var(--ins-bg-opacity)) !important
}

.bg-secondary {
    --ins-bg-opacity: 1;
    background-color: rgba(var(--ins-secondary-rgb), var(--ins-bg-opacity)) !important
}

.bg-success {
    --ins-bg-opacity: 1;
    background-color: rgb(248 172 89) !important
}

.bg-info {
    --ins-bg-opacity: 1;
    background-color: rgba(var(--ins-info-rgb), var(--ins-bg-opacity)) !important
}

.bg-warning {
    --ins-bg-opacity: 1;
    background-color: rgba(var(--ins-warning-rgb), var(--ins-bg-opacity)) !important
}

.bg-danger {
    --ins-bg-opacity: 1;
    background-color: rgba(var(--ins-danger-rgb), var(--ins-bg-opacity)) !important
}

.bg-purple {
    --ins-bg-opacity: 1;
    background-color: rgba(var(--ins-purple-rgb), var(--ins-bg-opacity)) !important
}

.bg-light {
    --ins-bg-opacity: 1;
    background-color: #faf9f4 !important;

}

.bg-dark {
    --ins-bg-opacity: 1;
    background-color: rgba(var(--ins-dark-rgb), var(--ins-bg-opacity)) !important
}

.bg-black {
    --ins-bg-opacity: 1;
    background-color: rgba(var(--ins-black-rgb), var(--ins-bg-opacity)) !important
}

.bg-white {
    --ins-bg-opacity: 1;
    background-color: rgba(var(--ins-white-rgb), var(--ins-bg-opacity)) !important;

}

.bg-body {
    --ins-bg-opacity: 1;
    background-color: rgba(var(--ins-body-bg-rgb), var(--ins-bg-opacity)) !important
}

.bg-transparent {
    --ins-bg-opacity: 1;
    background-color: transparent !important
}

.bg-body-secondary {
    --ins-bg-opacity: 1;
    background-color: rgba(var(--ins-secondary-bg-rgb), var(--ins-bg-opacity)) !important
}

.bg-body-tertiary {
    --ins-bg-opacity: 1;
    background-color: rgba(var(--ins-tertiary-bg-rgb), var(--ins-bg-opacity)) !important
}

.bg-opacity-10 {
    --ins-bg-opacity: 0.1
}

.bg-opacity-20 {
    --ins-bg-opacity: 0.2
}

.bg-opacity-25 {
    --ins-bg-opacity: 0.25
}

.bg-opacity-30 {
    --ins-bg-opacity: 0.3
}

.bg-opacity-40 {
    --ins-bg-opacity: 0.4
}

.bg-opacity-50 {
    --ins-bg-opacity: 0.5
}

.bg-opacity-60 {
    --ins-bg-opacity: 0.6
}

.bg-opacity-70 {
    --ins-bg-opacity: 0.7
}

.bg-opacity-75 {
    --ins-bg-opacity: 0.75
}

.bg-opacity-80 {
    --ins-bg-opacity: 0.8
}

.bg-opacity-90 {
    --ins-bg-opacity: 0.9
}

.bg-primary-subtle {
    background-color: var(--ins-primary-bg-subtle) !important
}

.bg-secondary-subtle {
    background-color: var(--ins-secondary-bg-subtle) !important
}

.bg-success-subtle {
    background-color: var(--ins-success-bg-subtle) !important
}

.bg-info-subtle {
    background-color: var(--ins-info-bg-subtle) !important
}

.bg-warning-subtle {
    background-color: var(--ins-warning-bg-subtle) !important
}

.bg-danger-subtle {
    background-color: var(--ins-danger-bg-subtle) !important
}

.bg-purple-subtle {
    background-color: var(--ins-purple-bg-subtle) !important
}

.bg-light-subtle,
.code-body pre {
    background-color: var(--ins-light-bg-subtle) !important
}

.bg-dark-subtle {
    background-color: var(--ins-dark-bg-subtle) !important
}

.bg-gradient {
    background-image: var(--ins-gradient) !important
}

.user-select-all {
    -webkit-user-select: all !important;
    -moz-user-select: all !important;
    user-select: all !important
}

.user-select-auto {
    -webkit-user-select: auto !important;
    -moz-user-select: auto !important;
    -ms-user-select: auto !important;
    user-select: auto !important
}

.user-select-none {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important
}

.pe-none {
    pointer-events: none !important
}

.pe-auto {
    pointer-events: auto !important
}

.rounded {
    border-radius: var(--ins-border-radius) !important
}

.rounded-0 {
    border-radius: 0 !important
}

.rounded-1 {
    border-radius: var(--ins-border-radius-sm) !important
}

.rounded-2 {
    border-radius: var(--ins-border-radius) !important
}

.rounded-3 {
    border-radius: var(--ins-border-radius-lg) !important
}

.rounded-4 {
    border-radius: var(--ins-border-radius-xl) !important
}

.rounded-5 {
    border-radius: var(--ins-border-radius-xxl) !important
}

.rounded-circle {
    border-radius: 50% !important
}

.rounded-pill {
    border-radius: var(--ins-border-radius-pill) !important
}

.rounded-top {
    border-top-right-radius: var(--ins-border-radius) !important;
    border-top-left-radius: var(--ins-border-radius) !important
}

.rounded-top-0 {
    border-top-right-radius: 0 !important;
    border-top-left-radius: 0 !important
}

.rounded-top-1 {
    border-top-right-radius: var(--ins-border-radius-sm) !important;
    border-top-left-radius: var(--ins-border-radius-sm) !important
}

.rounded-top-2 {
    border-top-right-radius: var(--ins-border-radius) !important;
    border-top-left-radius: var(--ins-border-radius) !important
}

.rounded-top-3 {
    border-top-right-radius: var(--ins-border-radius-lg) !important;
    border-top-left-radius: var(--ins-border-radius-lg) !important
}

.rounded-top-4 {
    border-top-right-radius: var(--ins-border-radius-xl) !important;
    border-top-left-radius: var(--ins-border-radius-xl) !important
}

.rounded-top-5 {
    border-top-right-radius: var(--ins-border-radius-xxl) !important;
    border-top-left-radius: var(--ins-border-radius-xxl) !important
}

.rounded-top-circle {
    border-top-right-radius: 50% !important;
    border-top-left-radius: 50% !important
}

.rounded-top-pill {
    border-top-right-radius: var(--ins-border-radius-pill) !important;
    border-top-left-radius: var(--ins-border-radius-pill) !important
}

.rounded-end {
    border-top-left-radius: var(--ins-border-radius) !important;
    border-bottom-left-radius: var(--ins-border-radius) !important
}

.rounded-end-0 {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important
}

.rounded-end-1 {
    border-top-left-radius: var(--ins-border-radius-sm) !important;
    border-bottom-left-radius: var(--ins-border-radius-sm) !important
}

.rounded-end-2 {
    border-top-left-radius: var(--ins-border-radius) !important;
    border-bottom-left-radius: var(--ins-border-radius) !important
}

.rounded-end-3 {
    border-top-left-radius: var(--ins-border-radius-lg) !important;
    border-bottom-left-radius: var(--ins-border-radius-lg) !important
}

.rounded-end-4 {
    border-top-left-radius: var(--ins-border-radius-xl) !important;
    border-bottom-left-radius: var(--ins-border-radius-xl) !important
}

.rounded-end-5 {
    border-top-left-radius: var(--ins-border-radius-xxl) !important;
    border-bottom-left-radius: var(--ins-border-radius-xxl) !important
}

.rounded-end-circle {
    border-top-left-radius: 50% !important;
    border-bottom-left-radius: 50% !important
}

.rounded-end-pill {
    border-top-left-radius: var(--ins-border-radius-pill) !important;
    border-bottom-left-radius: var(--ins-border-radius-pill) !important
}

.rounded-bottom {
    border-bottom-left-radius: var(--ins-border-radius) !important;
    border-bottom-right-radius: var(--ins-border-radius) !important
}

.rounded-bottom-0 {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important
}

.rounded-bottom-1 {
    border-bottom-left-radius: var(--ins-border-radius-sm) !important;
    border-bottom-right-radius: var(--ins-border-radius-sm) !important
}

.rounded-bottom-2 {
    border-bottom-left-radius: var(--ins-border-radius) !important;
    border-bottom-right-radius: var(--ins-border-radius) !important
}

.rounded-bottom-3 {
    border-bottom-left-radius: var(--ins-border-radius-lg) !important;
    border-bottom-right-radius: var(--ins-border-radius-lg) !important
}

.rounded-bottom-4 {
    border-bottom-left-radius: var(--ins-border-radius-xl) !important;
    border-bottom-right-radius: var(--ins-border-radius-xl) !important
}

.rounded-bottom-5 {
    border-bottom-left-radius: var(--ins-border-radius-xxl) !important;
    border-bottom-right-radius: var(--ins-border-radius-xxl) !important
}

.rounded-bottom-circle {
    border-bottom-left-radius: 50% !important;
    border-bottom-right-radius: 50% !important
}

.rounded-bottom-pill {
    border-bottom-left-radius: var(--ins-border-radius-pill) !important;
    border-bottom-right-radius: var(--ins-border-radius-pill) !important
}

.rounded-start {
    border-bottom-right-radius: var(--ins-border-radius) !important;
    border-top-right-radius: var(--ins-border-radius) !important
}

.rounded-start-0 {
    border-bottom-right-radius: 0 !important;
    border-top-right-radius: 0 !important
}

.rounded-start-1 {
    border-bottom-right-radius: var(--ins-border-radius-sm) !important;
    border-top-right-radius: var(--ins-border-radius-sm) !important
}

.rounded-start-2 {
    border-bottom-right-radius: var(--ins-border-radius) !important;
    border-top-right-radius: var(--ins-border-radius) !important
}

.rounded-start-3 {
    border-bottom-right-radius: var(--ins-border-radius-lg) !important;
    border-top-right-radius: var(--ins-border-radius-lg) !important
}

.rounded-start-4 {
    border-bottom-right-radius: var(--ins-border-radius-xl) !important;
    border-top-right-radius: var(--ins-border-radius-xl) !important
}

.rounded-start-5 {
    border-bottom-right-radius: var(--ins-border-radius-xxl) !important;
    border-top-right-radius: var(--ins-border-radius-xxl) !important
}

.rounded-start-circle {
    border-bottom-right-radius: 50% !important;
    border-top-right-radius: 50% !important
}

.rounded-start-pill {
    border-bottom-right-radius: var(--ins-border-radius-pill) !important;
    border-top-right-radius: var(--ins-border-radius-pill) !important
}

.visible {
    visibility: visible !important
}

.invisible {
    visibility: hidden !important
}

.z-n1 {
    z-index: -1 !important
}

.z-0 {
    z-index: 0 !important
}

.z-1 {
    z-index: 1 !important
}

.z-2 {
    z-index: 2 !important
}

.z-3 {
    z-index: 3 !important
}

.fs-xxs {
    font-size: var(--ins-font-size-xxs) !important
}

.fs-xs {
    font-size: var(--ins-font-size-xs) !important
}

.fs-base {
    font-size: var(--ins-font-size-base) !important
}

.fs-sm {
    font-size: var(--ins-font-size-sm) !important
}

.fs-md {
    font-size: var(--ins-font-size-md) !important
}

.fs-lg {
    font-size: var(--ins-font-size-lg) !important
}

.fs-xl {
    font-size: var(--ins-font-size-xl) !important
}

.fs-xxl {
    font-size: var(--ins-font-size-xxl) !important
}

.fs-10 {
    font-size: 10px !important
}

.fs-11 {
    font-size: 11px !important
}

.fs-12 {
    font-size: 12px !important
}

.fs-13 {
    font-size: 13px !important
}

.fs-14 {
    font-size: 14px !important
}

.fs-15 {
    font-size: 15px !important
}

.fs-16 {
    font-size: 16px !important
}

.fs-17 {
    font-size: 17px !important
}

.fs-18 {
    font-size: 18px !important
}

.fs-19 {
    font-size: 19px !important
}

.fs-20 {
    font-size: 20px !important
}

.fs-21 {
    font-size: 21px !important
}

.fs-22 {
    font-size: 22px !important
}

.fs-23 {
    font-size: 23px !important
}

.fs-24 {
    font-size: 24px !important
}

.fs-28 {
    font-size: 28px !important
}

.fs-32 {
    font-size: 32px !important
}

.fs-36 {
    font-size: 36px !important
}

.fs-42 {
    font-size: 42px !important
}

.fs-48 {
    font-size: 48px !important
}

.fs-60 {
    font-size: 60px !important
}

.fs-72 {
    font-size: 72px !important
}

.fs-80 {
    font-size: 80px !important
}

.fs-120 {
    font-size: 120px !important
}

@media (min-width:576px) {
    .float-sm-start {
        float: right !important
    }

    .float-sm-end {
        float: left !important
    }

    .float-sm-none {
        float: none !important
    }

    .object-fit-sm-contain {
        -o-object-fit: contain !important;
        object-fit: contain !important
    }

    .object-fit-sm-cover {
        -o-object-fit: cover !important;
        object-fit: cover !important
    }

    .object-fit-sm-fill {
        -o-object-fit: fill !important;
        object-fit: fill !important
    }

    .object-fit-sm-scale {
        -o-object-fit: scale-down !important;
        object-fit: scale-down !important
    }

    .object-fit-sm-none {
        -o-object-fit: none !important;
        object-fit: none !important
    }

    .d-sm-inline {
        display: inline !important
    }

    .d-sm-inline-block {
        display: inline-block !important
    }

    .d-sm-block {
        display: block !important
    }

    .d-sm-grid {
        display: grid !important
    }

    .d-sm-inline-grid {
        display: inline-grid !important
    }

    .d-sm-table {
        display: table !important
    }

    .d-sm-table-row {
        display: table-row !important
    }

    .d-sm-table-cell {
        display: table-cell !important
    }

    .d-sm-flex {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important
    }

    .d-sm-inline-flex {
        display: -webkit-inline-box !important;
        display: -ms-inline-flexbox !important;
        display: inline-flex !important
    }

    .d-sm-none {
        display: none !important
    }

    .position-sm-static {
        position: static !important
    }

    .position-sm-relative {
        position: relative !important
    }

    .position-sm-absolute {
        position: absolute !important
    }

    .position-sm-fixed {
        position: fixed !important
    }

    .position-sm-sticky {
        position: sticky !important
    }

    .w-sm-0 {
        width: 0 !important
    }

    .w-sm-25 {
        width: 25% !important
    }

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

    .w-sm-75 {
        width: 75% !important
    }

    .w-sm-100 {
        width: 100% !important
    }

    .flex-sm-fill {
        -webkit-box-flex: 1 !important;
        -ms-flex: 1 1 auto !important;
        flex: 1 1 auto !important
    }

    .flex-sm-row {
        -webkit-box-orient: horizontal !important;
        -webkit-box-direction: normal !important;
        -ms-flex-direction: row !important;
        flex-direction: row !important
    }

    .flex-sm-column {
        -webkit-box-orient: vertical !important;
        -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
        flex-direction: column !important
    }

    .flex-sm-row-reverse {
        -webkit-box-orient: horizontal !important;
        -webkit-box-direction: reverse !important;
        -ms-flex-direction: row-reverse !important;
        flex-direction: row-reverse !important
    }

    .flex-sm-column-reverse {
        -webkit-box-orient: vertical !important;
        -webkit-box-direction: reverse !important;
        -ms-flex-direction: column-reverse !important;
        flex-direction: column-reverse !important
    }

    .flex-sm-grow-0 {
        -webkit-box-flex: 0 !important;
        -ms-flex-positive: 0 !important;
        flex-grow: 0 !important
    }

    .flex-sm-grow-1 {
        -webkit-box-flex: 1 !important;
        -ms-flex-positive: 1 !important;
        flex-grow: 1 !important
    }

    .flex-sm-shrink-0 {
        -ms-flex-negative: 0 !important;
        flex-shrink: 0 !important
    }

    .flex-sm-shrink-1 {
        -ms-flex-negative: 1 !important;
        flex-shrink: 1 !important
    }

    .flex-sm-wrap {
        -ms-flex-wrap: wrap !important;
        flex-wrap: wrap !important
    }

    .flex-sm-nowrap {
        -ms-flex-wrap: nowrap !important;
        flex-wrap: nowrap !important
    }

    .flex-sm-wrap-reverse {
        -ms-flex-wrap: wrap-reverse !important;
        flex-wrap: wrap-reverse !important
    }

    .justify-content-sm-start {
        -webkit-box-pack: start !important;
        -ms-flex-pack: start !important;
        justify-content: flex-start !important
    }

    .justify-content-sm-end {
        -webkit-box-pack: end !important;
        -ms-flex-pack: end !important;
        justify-content: flex-end !important
    }

    .justify-content-sm-center {
        -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
        justify-content: center !important
    }

    .justify-content-sm-between {
        -webkit-box-pack: justify !important;
        -ms-flex-pack: justify !important;
        justify-content: space-between !important
    }

    .justify-content-sm-around {
        -ms-flex-pack: distribute !important;
        justify-content: space-around !important
    }

    .justify-content-sm-evenly {
        -webkit-box-pack: space-evenly !important;
        -ms-flex-pack: space-evenly !important;
        justify-content: space-evenly !important
    }

    .align-items-sm-start {
        -webkit-box-align: start !important;
        -ms-flex-align: start !important;
        align-items: flex-start !important
    }

    .align-items-sm-end {
        -webkit-box-align: end !important;
        -ms-flex-align: end !important;
        align-items: flex-end !important
    }

    .align-items-sm-center {
        -webkit-box-align: center !important;
        -ms-flex-align: center !important;
        align-items: center !important
    }

    .align-items-sm-baseline {
        -webkit-box-align: baseline !important;
        -ms-flex-align: baseline !important;
        align-items: baseline !important
    }

    .align-items-sm-stretch {
        -webkit-box-align: stretch !important;
        -ms-flex-align: stretch !important;
        align-items: stretch !important
    }

    .align-content-sm-start {
        -ms-flex-line-pack: start !important;
        align-content: flex-start !important
    }

    .align-content-sm-end {
        -ms-flex-line-pack: end !important;
        align-content: flex-end !important
    }

    .align-content-sm-center {
        -ms-flex-line-pack: center !important;
        align-content: center !important
    }

    .align-content-sm-between {
        -ms-flex-line-pack: justify !important;
        align-content: space-between !important
    }

    .align-content-sm-around {
        -ms-flex-line-pack: distribute !important;
        align-content: space-around !important
    }

    .align-content-sm-stretch {
        -ms-flex-line-pack: stretch !important;
        align-content: stretch !important
    }

    .align-self-sm-auto {
        -ms-flex-item-align: auto !important;
        align-self: auto !important
    }

    .align-self-sm-start {
        -ms-flex-item-align: start !important;
        align-self: flex-start !important
    }

    .align-self-sm-end {
        -ms-flex-item-align: end !important;
        align-self: flex-end !important
    }

    .align-self-sm-center {
        -ms-flex-item-align: center !important;
        align-self: center !important
    }

    .align-self-sm-baseline {
        -ms-flex-item-align: baseline !important;
        align-self: baseline !important
    }

    .align-self-sm-stretch {
        -ms-flex-item-align: stretch !important;
        align-self: stretch !important
    }

    .order-sm-first {
        -webkit-box-ordinal-group: 0 !important;
        -ms-flex-order: -1 !important;
        order: -1 !important
    }

    .order-sm-0 {
        -webkit-box-ordinal-group: 1 !important;
        -ms-flex-order: 0 !important;
        order: 0 !important
    }

    .order-sm-1 {
        -webkit-box-ordinal-group: 2 !important;
        -ms-flex-order: 1 !important;
        order: 1 !important
    }

    .order-sm-2 {
        -webkit-box-ordinal-group: 3 !important;
        -ms-flex-order: 2 !important;
        order: 2 !important
    }

    .order-sm-3 {
        -webkit-box-ordinal-group: 4 !important;
        -ms-flex-order: 3 !important;
        order: 3 !important
    }

    .order-sm-4 {
        -webkit-box-ordinal-group: 5 !important;
        -ms-flex-order: 4 !important;
        order: 4 !important
    }

    .order-sm-5 {
        -webkit-box-ordinal-group: 6 !important;
        -ms-flex-order: 5 !important;
        order: 5 !important
    }

    .order-sm-last {
        -webkit-box-ordinal-group: 7 !important;
        -ms-flex-order: 6 !important;
        order: 6 !important
    }

    .m-sm-0 {
        margin: 0 !important
    }

    .m-sm-1 {
        margin: .3125rem !important
    }

    .m-sm-2 {
        margin: .625rem !important
    }

    .m-sm-3 {
        margin: 1.25rem !important
    }

    .m-sm-4 {
        margin: 1.875rem !important
    }

    .m-sm-5 {
        margin: 3.75rem !important
    }

    .m-sm-auto {
        margin: auto !important
    }

    .mx-sm-0 {
        margin-left: 0 !important;
        margin-right: 0 !important
    }

    .mx-sm-1 {
        margin-left: .3125rem !important;
        margin-right: .3125rem !important
    }

    .mx-sm-2 {
        margin-left: .625rem !important;
        margin-right: .625rem !important
    }

    .mx-sm-3 {
        margin-left: 1.25rem !important;
        margin-right: 1.25rem !important
    }

    .mx-sm-4 {
        margin-left: 1.875rem !important;
        margin-right: 1.875rem !important
    }

    .mx-sm-5 {
        margin-left: 3.75rem !important;
        margin-right: 3.75rem !important
    }

    .mx-sm-auto {
        margin-left: auto !important;
        margin-right: auto !important
    }

    .my-sm-0 {
        margin-top: 0 !important;
        margin-bottom: 0 !important
    }

    .my-sm-1 {
        margin-top: .3125rem !important;
        margin-bottom: .3125rem !important
    }

    .my-sm-2 {
        margin-top: .625rem !important;
        margin-bottom: .625rem !important
    }

    .my-sm-3 {
        margin-top: 1.25rem !important;
        margin-bottom: 1.25rem !important
    }

    .my-sm-4 {
        margin-top: 1.875rem !important;
        margin-bottom: 1.875rem !important
    }

    .my-sm-5 {
        margin-top: 3.75rem !important;
        margin-bottom: 3.75rem !important
    }

    .my-sm-auto {
        margin-top: auto !important;
        margin-bottom: auto !important
    }

    .mt-sm-0 {
        margin-top: 0 !important
    }

    .mt-sm-1 {
        margin-top: .3125rem !important
    }

    .mt-sm-2 {
        margin-top: .625rem !important
    }

    .mt-sm-3 {
        margin-top: 1.25rem !important
    }

    .mt-sm-4 {
        margin-top: 1.875rem !important
    }

    .mt-sm-5 {
        margin-top: 3.75rem !important
    }

    .mt-sm-auto {
        margin-top: auto !important
    }

    .me-sm-0 {
        margin-left: 0 !important
    }

    .me-sm-1 {
        margin-left: .3125rem !important
    }

    .me-sm-2 {
        margin-left: .625rem !important
    }

    .me-sm-3 {
        margin-left: 1.25rem !important
    }

    .me-sm-4 {
        margin-left: 1.875rem !important
    }

    .me-sm-5 {
        margin-left: 3.75rem !important
    }

    .me-sm-auto {
        margin-left: auto !important
    }

    .mb-sm-0 {
        margin-bottom: 0 !important
    }

    .mb-sm-1 {
        margin-bottom: .3125rem !important
    }

    .mb-sm-2 {
        margin-bottom: .625rem !important
    }

    .mb-sm-3 {
        margin-bottom: 1.25rem !important
    }

    .mb-sm-4 {
        margin-bottom: 1.875rem !important
    }

    .mb-sm-5 {
        margin-bottom: 3.75rem !important
    }

    .mb-sm-auto {
        margin-bottom: auto !important
    }

    .ms-sm-0 {
        margin-right: 0 !important
    }

    .ms-sm-1 {
        margin-right: .3125rem !important
    }

    .ms-sm-2 {
        margin-right: .625rem !important
    }

    .ms-sm-3 {
        margin-right: 1.25rem !important
    }

    .ms-sm-4 {
        margin-right: 1.875rem !important
    }

    .ms-sm-5 {
        margin-right: 3.75rem !important
    }

    .ms-sm-auto {
        margin-right: auto !important
    }

    .m-sm-n1 {
        margin: -.3125rem !important
    }

    .m-sm-n2 {
        margin: -.625rem !important
    }

    .m-sm-n3 {
        margin: -1.25rem !important
    }

    .m-sm-n4 {
        margin: -1.875rem !important
    }

    .m-sm-n5 {
        margin: -3.75rem !important
    }

    .mx-sm-n1 {
        margin-left: -.3125rem !important;
        margin-right: -.3125rem !important
    }

    .mx-sm-n2 {
        margin-left: -.625rem !important;
        margin-right: -.625rem !important
    }

    .mx-sm-n3 {
        margin-left: -1.25rem !important;
        margin-right: -1.25rem !important
    }

    .mx-sm-n4 {
        margin-left: -1.875rem !important;
        margin-right: -1.875rem !important
    }

    .mx-sm-n5 {
        margin-left: -3.75rem !important;
        margin-right: -3.75rem !important
    }

    .my-sm-n1 {
        margin-top: -.3125rem !important;
        margin-bottom: -.3125rem !important
    }

    .my-sm-n2 {
        margin-top: -.625rem !important;
        margin-bottom: -.625rem !important
    }

    .my-sm-n3 {
        margin-top: -1.25rem !important;
        margin-bottom: -1.25rem !important
    }

    .my-sm-n4 {
        margin-top: -1.875rem !important;
        margin-bottom: -1.875rem !important
    }

    .my-sm-n5 {
        margin-top: -3.75rem !important;
        margin-bottom: -3.75rem !important
    }

    .mt-sm-n1 {
        margin-top: -.3125rem !important
    }

    .mt-sm-n2 {
        margin-top: -.625rem !important
    }

    .mt-sm-n3 {
        margin-top: -1.25rem !important
    }

    .mt-sm-n4 {
        margin-top: -1.875rem !important
    }

    .mt-sm-n5 {
        margin-top: -3.75rem !important
    }

    .me-sm-n1 {
        margin-left: -.3125rem !important
    }

    .me-sm-n2 {
        margin-left: -.625rem !important
    }

    .me-sm-n3 {
        margin-left: -1.25rem !important
    }

    .me-sm-n4 {
        margin-left: -1.875rem !important
    }

    .me-sm-n5 {
        margin-left: -3.75rem !important
    }

    .mb-sm-n1 {
        margin-bottom: -.3125rem !important
    }

    .mb-sm-n2 {
        margin-bottom: -.625rem !important
    }

    .mb-sm-n3 {
        margin-bottom: -1.25rem !important
    }

    .mb-sm-n4 {
        margin-bottom: -1.875rem !important
    }

    .mb-sm-n5 {
        margin-bottom: -3.75rem !important
    }

    .ms-sm-n1 {
        margin-right: -.3125rem !important
    }

    .ms-sm-n2 {
        margin-right: -.625rem !important
    }

    .ms-sm-n3 {
        margin-right: -1.25rem !important
    }

    .ms-sm-n4 {
        margin-right: -1.875rem !important
    }

    .ms-sm-n5 {
        margin-right: -3.75rem !important
    }

    .p-sm-0 {
        padding: 0 !important
    }

    .p-sm-1 {
        padding: .3125rem !important
    }

    .p-sm-2 {
        padding: .625rem !important
    }

    .p-sm-3 {
        padding: 1.25rem !important
    }

    .p-sm-4 {
        padding: 1.875rem !important
    }

    .p-sm-5 {
        padding: 3.75rem !important
    }

    .px-sm-0 {
        padding-left: 0 !important;
        padding-right: 0 !important
    }

    .px-sm-1 {
        padding-left: .3125rem !important;
        padding-right: .3125rem !important
    }

    .px-sm-2 {
        padding-left: .625rem !important;
        padding-right: .625rem !important
    }

    .px-sm-3 {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important
    }

    .px-sm-4 {
        padding-left: 1.875rem !important;
        padding-right: 1.875rem !important
    }

    .px-sm-5 {
        padding-left: 3.75rem !important;
        padding-right: 3.75rem !important
    }

    .py-sm-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important
    }

    .py-sm-1 {
        padding-top: .3125rem !important;
        padding-bottom: .3125rem !important
    }

    .py-sm-2 {
        padding-top: .625rem !important;
        padding-bottom: .625rem !important
    }

    .py-sm-3 {
        padding-top: 1.25rem !important;
        padding-bottom: 1.25rem !important
    }

    .py-sm-4 {
        padding-top: 1.875rem !important;
        padding-bottom: 1.875rem !important
    }

    .py-sm-5 {
        padding-top: 3.75rem !important;
        padding-bottom: 3.75rem !important
    }

    .pt-sm-0 {
        padding-top: 0 !important
    }

    .pt-sm-1 {
        padding-top: .3125rem !important
    }

    .pt-sm-2 {
        padding-top: .625rem !important
    }

    .pt-sm-3 {
        padding-top: 1.25rem !important
    }

    .pt-sm-4 {
        padding-top: 1.875rem !important
    }

    .pt-sm-5 {
        padding-top: 3.75rem !important
    }

    .pe-sm-0 {
        padding-left: 0 !important
    }

    .pe-sm-1 {
        padding-left: .3125rem !important
    }

    .pe-sm-2 {
        padding-left: .625rem !important
    }

    .pe-sm-3 {
        padding-left: 1.25rem !important
    }

    .pe-sm-4 {
        padding-left: 1.875rem !important
    }

    .pe-sm-5 {
        padding-left: 3.75rem !important
    }

    .pb-sm-0 {
        padding-bottom: 0 !important
    }

    .pb-sm-1 {
        padding-bottom: .3125rem !important
    }

    .pb-sm-2 {
        padding-bottom: .625rem !important
    }

    .pb-sm-3 {
        padding-bottom: 1.25rem !important
    }

    .pb-sm-4 {
        padding-bottom: 1.875rem !important
    }

    .pb-sm-5 {
        padding-bottom: 3.75rem !important
    }

    .ps-sm-0 {
        padding-right: 0 !important
    }

    .ps-sm-1 {
        padding-right: .3125rem !important
    }

    .ps-sm-2 {
        padding-right: .625rem !important
    }

    .ps-sm-3 {
        padding-right: 1.25rem !important
    }

    .ps-sm-4 {
        padding-right: 1.875rem !important
    }

    .ps-sm-5 {
        padding-right: 3.75rem !important
    }

    .gap-sm-0 {
        gap: 0 !important
    }

    .gap-sm-1 {
        gap: .3125rem !important
    }

    .gap-sm-2 {
        gap: .625rem !important
    }

    .gap-sm-3 {
        gap: 1.25rem !important
    }

    .gap-sm-4 {
        gap: 1.875rem !important
    }

    .gap-sm-5 {
        gap: 3.75rem !important
    }

    .row-gap-sm-0 {
        row-gap: 0 !important
    }

    .row-gap-sm-1 {
        row-gap: .3125rem !important
    }

    .row-gap-sm-2 {
        row-gap: .625rem !important
    }

    .row-gap-sm-3 {
        row-gap: 1.25rem !important
    }

    .row-gap-sm-4 {
        row-gap: 1.875rem !important
    }

    .row-gap-sm-5 {
        row-gap: 3.75rem !important
    }

    .column-gap-sm-0 {
        -webkit-column-gap: 0 !important;
        -moz-column-gap: 0 !important;
        column-gap: 0 !important
    }

    .column-gap-sm-1 {
        -webkit-column-gap: .3125rem !important;
        -moz-column-gap: .3125rem !important;
        column-gap: .3125rem !important
    }

    .column-gap-sm-2 {
        -webkit-column-gap: .625rem !important;
        -moz-column-gap: .625rem !important;
        column-gap: .625rem !important
    }

    .column-gap-sm-3 {
        -webkit-column-gap: 1.25rem !important;
        -moz-column-gap: 1.25rem !important;
        column-gap: 1.25rem !important
    }

    .column-gap-sm-4 {
        -webkit-column-gap: 1.875rem !important;
        -moz-column-gap: 1.875rem !important;
        column-gap: 1.875rem !important
    }

    .column-gap-sm-5 {
        -webkit-column-gap: 3.75rem !important;
        -moz-column-gap: 3.75rem !important;
        column-gap: 3.75rem !important
    }

    .text-sm-start {
        text-align: right !important
    }

    .text-sm-end {
        text-align: left !important
    }

    .text-sm-center {
        text-align: center !important
    }
}

@media (min-width:768px) {
    .float-md-start {
        float: right !important
    }

    .float-md-end {
        float: left !important
    }

    .float-md-none {
        float: none !important
    }

    .object-fit-md-contain {
        -o-object-fit: contain !important;
        object-fit: contain !important
    }

    .object-fit-md-cover {
        -o-object-fit: cover !important;
        object-fit: cover !important
    }

    .object-fit-md-fill {
        -o-object-fit: fill !important;
        object-fit: fill !important
    }

    .object-fit-md-scale {
        -o-object-fit: scale-down !important;
        object-fit: scale-down !important
    }

    .object-fit-md-none {
        -o-object-fit: none !important;
        object-fit: none !important
    }

    .d-md-inline {
        display: inline !important
    }

    .d-md-inline-block {
        display: inline-block !important
    }

    .d-md-block {
        display: block !important
    }

    .d-md-grid {
        display: grid !important
    }

    .d-md-inline-grid {
        display: inline-grid !important
    }

    .d-md-table {
        display: table !important
    }

    .d-md-table-row {
        display: table-row !important
    }

    .d-md-table-cell {
        display: table-cell !important
    }

    .d-md-flex {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important
    }

    .d-md-inline-flex {
        display: -webkit-inline-box !important;
        display: -ms-inline-flexbox !important;
        display: inline-flex !important
    }

    .d-md-none {
        display: none !important
    }

    .position-md-static {
        position: static !important
    }

    .position-md-relative {
        position: relative !important
    }

    .position-md-absolute {
        position: absolute !important
    }

    .position-md-fixed {
        position: fixed !important
    }

    .position-md-sticky {
        position: sticky !important
    }

    .w-md-0 {
        width: 0 !important
    }

    .w-md-25 {
        width: 25% !important
    }

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

    .w-md-75 {
        width: 75% !important
    }

    .w-md-100 {
        width: 100% !important
    }

    .flex-md-fill {
        -webkit-box-flex: 1 !important;
        -ms-flex: 1 1 auto !important;
        flex: 1 1 auto !important
    }

    .flex-md-row {
        -webkit-box-orient: horizontal !important;
        -webkit-box-direction: normal !important;
        -ms-flex-direction: row !important;
        flex-direction: row !important
    }

    .flex-md-column {
        -webkit-box-orient: vertical !important;
        -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
        flex-direction: column !important
    }

    .flex-md-row-reverse {
        -webkit-box-orient: horizontal !important;
        -webkit-box-direction: reverse !important;
        -ms-flex-direction: row-reverse !important;
        flex-direction: row-reverse !important
    }

    .flex-md-column-reverse {
        -webkit-box-orient: vertical !important;
        -webkit-box-direction: reverse !important;
        -ms-flex-direction: column-reverse !important;
        flex-direction: column-reverse !important
    }

    .flex-md-grow-0 {
        -webkit-box-flex: 0 !important;
        -ms-flex-positive: 0 !important;
        flex-grow: 0 !important
    }

    .flex-md-grow-1 {
        -webkit-box-flex: 1 !important;
        -ms-flex-positive: 1 !important;
        flex-grow: 1 !important
    }

    .flex-md-shrink-0 {
        -ms-flex-negative: 0 !important;
        flex-shrink: 0 !important
    }

    .flex-md-shrink-1 {
        -ms-flex-negative: 1 !important;
        flex-shrink: 1 !important
    }

    .flex-md-wrap {
        -ms-flex-wrap: wrap !important;
        flex-wrap: wrap !important
    }

    .flex-md-nowrap {
        -ms-flex-wrap: nowrap !important;
        flex-wrap: nowrap !important
    }

    .flex-md-wrap-reverse {
        -ms-flex-wrap: wrap-reverse !important;
        flex-wrap: wrap-reverse !important
    }

    .justify-content-md-start {
        -webkit-box-pack: start !important;
        -ms-flex-pack: start !important;
        justify-content: flex-start !important
    }

    .justify-content-md-end {
        -webkit-box-pack: end !important;
        -ms-flex-pack: end !important;
        justify-content: flex-end !important
    }

    .justify-content-md-center {
        -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
        justify-content: center !important
    }

    .justify-content-md-between {
        -webkit-box-pack: justify !important;
        -ms-flex-pack: justify !important;
        justify-content: space-between !important
    }

    .justify-content-md-around {
        -ms-flex-pack: distribute !important;
        justify-content: space-around !important
    }

    .justify-content-md-evenly {
        -webkit-box-pack: space-evenly !important;
        -ms-flex-pack: space-evenly !important;
        justify-content: space-evenly !important
    }

    .align-items-md-start {
        -webkit-box-align: start !important;
        -ms-flex-align: start !important;
        align-items: flex-start !important
    }

    .align-items-md-end {
        -webkit-box-align: end !important;
        -ms-flex-align: end !important;
        align-items: flex-end !important
    }

    .align-items-md-center {
        -webkit-box-align: center !important;
        -ms-flex-align: center !important;
        align-items: center !important
    }

    .align-items-md-baseline {
        -webkit-box-align: baseline !important;
        -ms-flex-align: baseline !important;
        align-items: baseline !important
    }

    .align-items-md-stretch {
        -webkit-box-align: stretch !important;
        -ms-flex-align: stretch !important;
        align-items: stretch !important
    }

    .align-content-md-start {
        -ms-flex-line-pack: start !important;
        align-content: flex-start !important
    }

    .align-content-md-end {
        -ms-flex-line-pack: end !important;
        align-content: flex-end !important
    }

    .align-content-md-center {
        -ms-flex-line-pack: center !important;
        align-content: center !important
    }

    .align-content-md-between {
        -ms-flex-line-pack: justify !important;
        align-content: space-between !important
    }

    .align-content-md-around {
        -ms-flex-line-pack: distribute !important;
        align-content: space-around !important
    }

    .align-content-md-stretch {
        -ms-flex-line-pack: stretch !important;
        align-content: stretch !important
    }

    .align-self-md-auto {
        -ms-flex-item-align: auto !important;
        align-self: auto !important
    }

    .align-self-md-start {
        -ms-flex-item-align: start !important;
        align-self: flex-start !important
    }

    .align-self-md-end {
        -ms-flex-item-align: end !important;
        align-self: flex-end !important
    }

    .align-self-md-center {
        -ms-flex-item-align: center !important;
        align-self: center !important
    }

    .align-self-md-baseline {
        -ms-flex-item-align: baseline !important;
        align-self: baseline !important
    }

    .align-self-md-stretch {
        -ms-flex-item-align: stretch !important;
        align-self: stretch !important
    }

    .order-md-first {
        -webkit-box-ordinal-group: 0 !important;
        -ms-flex-order: -1 !important;
        order: -1 !important
    }

    .order-md-0 {
        -webkit-box-ordinal-group: 1 !important;
        -ms-flex-order: 0 !important;
        order: 0 !important
    }

    .order-md-1 {
        -webkit-box-ordinal-group: 2 !important;
        -ms-flex-order: 1 !important;
        order: 1 !important
    }

    .order-md-2 {
        -webkit-box-ordinal-group: 3 !important;
        -ms-flex-order: 2 !important;
        order: 2 !important
    }

    .order-md-3 {
        -webkit-box-ordinal-group: 4 !important;
        -ms-flex-order: 3 !important;
        order: 3 !important
    }

    .order-md-4 {
        -webkit-box-ordinal-group: 5 !important;
        -ms-flex-order: 4 !important;
        order: 4 !important
    }

    .order-md-5 {
        -webkit-box-ordinal-group: 6 !important;
        -ms-flex-order: 5 !important;
        order: 5 !important
    }

    .order-md-last {
        -webkit-box-ordinal-group: 7 !important;
        -ms-flex-order: 6 !important;
        order: 6 !important
    }

    .m-md-0 {
        margin: 0 !important
    }

    .m-md-1 {
        margin: .3125rem !important
    }

    .m-md-2 {
        margin: .625rem !important
    }

    .m-md-3 {
        margin: 1.25rem !important
    }

    .m-md-4 {
        margin: 1.875rem !important
    }

    .m-md-5 {
        margin: 3.75rem !important
    }

    .m-md-auto {
        margin: auto !important
    }

    .mx-md-0 {
        margin-left: 0 !important;
        margin-right: 0 !important
    }

    .mx-md-1 {
        margin-left: .3125rem !important;
        margin-right: .3125rem !important
    }

    .mx-md-2 {
        margin-left: .625rem !important;
        margin-right: .625rem !important
    }

    .mx-md-3 {
        margin-left: 1.25rem !important;
        margin-right: 1.25rem !important
    }

    .mx-md-4 {
        margin-left: 1.875rem !important;
        margin-right: 1.875rem !important
    }

    .mx-md-5 {
        margin-left: 3.75rem !important;
        margin-right: 3.75rem !important
    }

    .mx-md-auto {
        margin-left: auto !important;
        margin-right: auto !important
    }

    .my-md-0 {
        margin-top: 0 !important;
        margin-bottom: 0 !important
    }

    .my-md-1 {
        margin-top: .3125rem !important;
        margin-bottom: .3125rem !important
    }

    .my-md-2 {
        margin-top: .625rem !important;
        margin-bottom: .625rem !important
    }

    .my-md-3 {
        margin-top: 1.25rem !important;
        margin-bottom: 1.25rem !important
    }

    .my-md-4 {
        margin-top: 1.875rem !important;
        margin-bottom: 1.875rem !important
    }

    .my-md-5 {
        margin-top: 3.75rem !important;
        margin-bottom: 3.75rem !important
    }

    .my-md-auto {
        margin-top: auto !important;
        margin-bottom: auto !important
    }

    .mt-md-0 {
        margin-top: 0 !important
    }

    .mt-md-1 {
        margin-top: .3125rem !important
    }

    .mt-md-2 {
        margin-top: .625rem !important
    }

    .mt-md-3 {
        margin-top: 1.25rem !important
    }

    .mt-md-4 {
        margin-top: 1.875rem !important
    }

    .mt-md-5 {
        margin-top: 3.75rem !important
    }

    .mt-md-auto {
        margin-top: auto !important
    }

    .me-md-0 {
        margin-left: 0 !important
    }

    .me-md-1 {
        margin-left: .3125rem !important
    }

    .me-md-2 {
        margin-left: .625rem !important
    }

    .me-md-3 {
        margin-left: 1.25rem !important
    }

    .me-md-4 {
        margin-left: 1.875rem !important
    }

    .me-md-5 {
        margin-left: 3.75rem !important
    }

    .me-md-auto {
        margin-left: auto !important
    }

    .mb-md-0 {
        margin-bottom: 0 !important
    }

    .mb-md-1 {
        margin-bottom: .3125rem !important
    }

    .mb-md-2 {
        margin-bottom: .625rem !important
    }

    .mb-md-3 {
        margin-bottom: 1.25rem !important
    }

    .mb-md-4 {
        margin-bottom: 1.875rem !important
    }

    .mb-md-5 {
        margin-bottom: 3.75rem !important
    }

    .mb-md-auto {
        margin-bottom: auto !important
    }

    .ms-md-0 {
        margin-right: 0 !important
    }

    .ms-md-1 {
        margin-right: .3125rem !important
    }

    .ms-md-2 {
        margin-right: .625rem !important
    }

    .ms-md-3 {
        margin-right: 1.25rem !important
    }

    .ms-md-4 {
        margin-right: 1.875rem !important
    }

    .ms-md-5 {
        margin-right: 3.75rem !important
    }

    .ms-md-auto {
        margin-right: auto !important
    }

    .m-md-n1 {
        margin: -.3125rem !important
    }

    .m-md-n2 {
        margin: -.625rem !important
    }

    .m-md-n3 {
        margin: -1.25rem !important
    }

    .m-md-n4 {
        margin: -1.875rem !important
    }

    .m-md-n5 {
        margin: -3.75rem !important
    }

    .mx-md-n1 {
        margin-left: -.3125rem !important;
        margin-right: -.3125rem !important
    }

    .mx-md-n2 {
        margin-left: -.625rem !important;
        margin-right: -.625rem !important
    }

    .mx-md-n3 {
        margin-left: -1.25rem !important;
        margin-right: -1.25rem !important
    }

    .mx-md-n4 {
        margin-left: -1.875rem !important;
        margin-right: -1.875rem !important
    }

    .mx-md-n5 {
        margin-left: -3.75rem !important;
        margin-right: -3.75rem !important
    }

    .my-md-n1 {
        margin-top: -.3125rem !important;
        margin-bottom: -.3125rem !important
    }

    .my-md-n2 {
        margin-top: -.625rem !important;
        margin-bottom: -.625rem !important
    }

    .my-md-n3 {
        margin-top: -1.25rem !important;
        margin-bottom: -1.25rem !important
    }

    .my-md-n4 {
        margin-top: -1.875rem !important;
        margin-bottom: -1.875rem !important
    }

    .my-md-n5 {
        margin-top: -3.75rem !important;
        margin-bottom: -3.75rem !important
    }

    .mt-md-n1 {
        margin-top: -.3125rem !important
    }

    .mt-md-n2 {
        margin-top: -.625rem !important
    }

    .mt-md-n3 {
        margin-top: -1.25rem !important
    }

    .mt-md-n4 {
        margin-top: -1.875rem !important
    }

    .mt-md-n5 {
        margin-top: -3.75rem !important
    }

    .me-md-n1 {
        margin-left: -.3125rem !important
    }

    .me-md-n2 {
        margin-left: -.625rem !important
    }

    .me-md-n3 {
        margin-left: -1.25rem !important
    }

    .me-md-n4 {
        margin-left: -1.875rem !important
    }

    .me-md-n5 {
        margin-left: -3.75rem !important
    }

    .mb-md-n1 {
        margin-bottom: -.3125rem !important
    }

    .mb-md-n2 {
        margin-bottom: -.625rem !important
    }

    .mb-md-n3 {
        margin-bottom: -1.25rem !important
    }

    .mb-md-n4 {
        margin-bottom: -1.875rem !important
    }

    .mb-md-n5 {
        margin-bottom: -3.75rem !important
    }

    .ms-md-n1 {
        margin-right: -.3125rem !important
    }

    .ms-md-n2 {
        margin-right: -.625rem !important
    }

    .ms-md-n3 {
        margin-right: -1.25rem !important
    }

    .ms-md-n4 {
        margin-right: -1.875rem !important
    }

    .ms-md-n5 {
        margin-right: -3.75rem !important
    }

    .p-md-0 {
        padding: 0 !important
    }

    .p-md-1 {
        padding: .3125rem !important
    }

    .p-md-2 {
        padding: .625rem !important
    }

    .p-md-3 {
        padding: 1.25rem !important
    }

    .p-md-4 {
        padding: 1.875rem !important
    }

    .p-md-5 {
        padding: 3.75rem !important
    }

    .px-md-0 {
        padding-left: 0 !important;
        padding-right: 0 !important
    }

    .px-md-1 {
        padding-left: .3125rem !important;
        padding-right: .3125rem !important
    }

    .px-md-2 {
        padding-left: .625rem !important;
        padding-right: .625rem !important
    }

    .px-md-3 {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important
    }

    .px-md-4 {
        padding-left: 1.875rem !important;
        padding-right: 1.875rem !important
    }

    .px-md-5 {
        padding-left: 3.75rem !important;
        padding-right: 3.75rem !important
    }

    .py-md-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important
    }

    .py-md-1 {
        padding-top: .3125rem !important;
        padding-bottom: .3125rem !important
    }

    .py-md-2 {
        padding-top: .625rem !important;
        padding-bottom: .625rem !important
    }

    .py-md-3 {
        padding-top: 1.25rem !important;
        padding-bottom: 1.25rem !important
    }

    .py-md-4 {
        padding-top: 1.875rem !important;
        padding-bottom: 1.875rem !important
    }

    .py-md-5 {
        padding-top: 3.75rem !important;
        padding-bottom: 3.75rem !important
    }

    .pt-md-0 {
        padding-top: 0 !important
    }

    .pt-md-1 {
        padding-top: .3125rem !important
    }

    .pt-md-2 {
        padding-top: .625rem !important
    }

    .pt-md-3 {
        padding-top: 1.25rem !important
    }

    .pt-md-4 {
        padding-top: 1.875rem !important
    }

    .pt-md-5 {
        padding-top: 3.75rem !important
    }

    .pe-md-0 {
        padding-left: 0 !important
    }

    .pe-md-1 {
        padding-left: .3125rem !important
    }

    .pe-md-2 {
        padding-left: .625rem !important
    }

    .pe-md-3 {
        padding-left: 1.25rem !important
    }

    .pe-md-4 {
        padding-left: 1.875rem !important
    }

    .pe-md-5 {
        padding-left: 3.75rem !important
    }

    .pb-md-0 {
        padding-bottom: 0 !important
    }

    .pb-md-1 {
        padding-bottom: .3125rem !important
    }

    .pb-md-2 {
        padding-bottom: .625rem !important
    }

    .pb-md-3 {
        padding-bottom: 1.25rem !important
    }

    .pb-md-4 {
        padding-bottom: 1.875rem !important
    }

    .pb-md-5 {
        padding-bottom: 3.75rem !important
    }

    .ps-md-0 {
        padding-right: 0 !important
    }

    .ps-md-1 {
        padding-right: .3125rem !important
    }

    .ps-md-2 {
        padding-right: .625rem !important
    }

    .ps-md-3 {
        padding-right: 1.25rem !important
    }

    .ps-md-4 {
        padding-right: 1.875rem !important
    }

    .ps-md-5 {
        padding-right: 3.75rem !important
    }

    .gap-md-0 {
        gap: 0 !important
    }

    .gap-md-1 {
        gap: .3125rem !important
    }

    .gap-md-2 {
        gap: .625rem !important
    }

    .gap-md-3 {
        gap: 1.25rem !important
    }

    .gap-md-4 {
        gap: 1.875rem !important
    }

    .gap-md-5 {
        gap: 3.75rem !important
    }

    .row-gap-md-0 {
        row-gap: 0 !important
    }

    .row-gap-md-1 {
        row-gap: .3125rem !important
    }

    .row-gap-md-2 {
        row-gap: .625rem !important
    }

    .row-gap-md-3 {
        row-gap: 1.25rem !important
    }

    .row-gap-md-4 {
        row-gap: 1.875rem !important
    }

    .row-gap-md-5 {
        row-gap: 3.75rem !important
    }

    .column-gap-md-0 {
        -webkit-column-gap: 0 !important;
        -moz-column-gap: 0 !important;
        column-gap: 0 !important
    }

    .column-gap-md-1 {
        -webkit-column-gap: .3125rem !important;
        -moz-column-gap: .3125rem !important;
        column-gap: .3125rem !important
    }

    .column-gap-md-2 {
        -webkit-column-gap: .625rem !important;
        -moz-column-gap: .625rem !important;
        column-gap: .625rem !important
    }

    .column-gap-md-3 {
        -webkit-column-gap: 1.25rem !important;
        -moz-column-gap: 1.25rem !important;
        column-gap: 1.25rem !important
    }

    .column-gap-md-4 {
        -webkit-column-gap: 1.875rem !important;
        -moz-column-gap: 1.875rem !important;
        column-gap: 1.875rem !important
    }

    .column-gap-md-5 {
        -webkit-column-gap: 3.75rem !important;
        -moz-column-gap: 3.75rem !important;
        column-gap: 3.75rem !important
    }

    .text-md-start {
        text-align: right !important
    }

    .text-md-end {
        text-align: left !important
    }

    .text-md-center {
        text-align: center !important
    }
}

@media (min-width:992px) {
    .float-lg-start {
        float: right !important
    }

    .float-lg-end {
        float: left !important
    }

    .float-lg-none {
        float: none !important
    }

    .object-fit-lg-contain {
        -o-object-fit: contain !important;
        object-fit: contain !important
    }

    .object-fit-lg-cover {
        -o-object-fit: cover !important;
        object-fit: cover !important
    }

    .object-fit-lg-fill {
        -o-object-fit: fill !important;
        object-fit: fill !important
    }

    .object-fit-lg-scale {
        -o-object-fit: scale-down !important;
        object-fit: scale-down !important
    }

    .object-fit-lg-none {
        -o-object-fit: none !important;
        object-fit: none !important
    }

    .d-lg-inline {
        display: inline !important
    }

    .d-lg-inline-block {
        display: inline-block !important
    }

    .d-lg-block {
        display: block !important
    }

    .d-lg-grid {
        display: grid !important
    }

    .d-lg-inline-grid {
        display: inline-grid !important
    }

    .d-lg-table {
        display: table !important
    }

    .d-lg-table-row {
        display: table-row !important
    }

    .d-lg-table-cell {
        display: table-cell !important
    }

    .d-lg-flex {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important
    }

    .d-lg-inline-flex {
        display: -webkit-inline-box !important;
        display: -ms-inline-flexbox !important;
        display: inline-flex !important
    }

    .d-lg-none {
        display: none !important
    }

    .position-lg-static {
        position: static !important
    }

    .position-lg-relative {
        position: relative !important
    }

    .position-lg-absolute {
        position: absolute !important
    }

    .position-lg-fixed {
        position: fixed !important
    }

    .position-lg-sticky {
        position: sticky !important
    }

    .w-lg-0 {
        width: 0 !important
    }

    .w-lg-25 {
        width: 25% !important
    }

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

    .w-lg-75 {
        width: 75% !important
    }

    .w-lg-100 {
        width: 100% !important
    }

    .flex-lg-fill {
        -webkit-box-flex: 1 !important;
        -ms-flex: 1 1 auto !important;
        flex: 1 1 auto !important
    }

    .flex-lg-row {
        -webkit-box-orient: horizontal !important;
        -webkit-box-direction: normal !important;
        -ms-flex-direction: row !important;
        flex-direction: row !important
    }

    .flex-lg-column {
        -webkit-box-orient: vertical !important;
        -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
        flex-direction: column !important
    }

    .flex-lg-row-reverse {
        -webkit-box-orient: horizontal !important;
        -webkit-box-direction: reverse !important;
        -ms-flex-direction: row-reverse !important;
        flex-direction: row-reverse !important
    }

    .flex-lg-column-reverse {
        -webkit-box-orient: vertical !important;
        -webkit-box-direction: reverse !important;
        -ms-flex-direction: column-reverse !important;
        flex-direction: column-reverse !important
    }

    .flex-lg-grow-0 {
        -webkit-box-flex: 0 !important;
        -ms-flex-positive: 0 !important;
        flex-grow: 0 !important
    }

    .flex-lg-grow-1 {
        -webkit-box-flex: 1 !important;
        -ms-flex-positive: 1 !important;
        flex-grow: 1 !important
    }

    .flex-lg-shrink-0 {
        -ms-flex-negative: 0 !important;
        flex-shrink: 0 !important
    }

    .flex-lg-shrink-1 {
        -ms-flex-negative: 1 !important;
        flex-shrink: 1 !important
    }

    .flex-lg-wrap {
        -ms-flex-wrap: wrap !important;
        flex-wrap: wrap !important
    }

    .flex-lg-nowrap {
        -ms-flex-wrap: nowrap !important;
        flex-wrap: nowrap !important
    }

    .flex-lg-wrap-reverse {
        -ms-flex-wrap: wrap-reverse !important;
        flex-wrap: wrap-reverse !important
    }

    .justify-content-lg-start {
        -webkit-box-pack: start !important;
        -ms-flex-pack: start !important;
        justify-content: flex-start !important
    }

    .justify-content-lg-end {
        -webkit-box-pack: end !important;
        -ms-flex-pack: end !important;
        justify-content: flex-end !important
    }

    .justify-content-lg-center {
        -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
        justify-content: center !important
    }

    .justify-content-lg-between {
        -webkit-box-pack: justify !important;
        -ms-flex-pack: justify !important;
        justify-content: space-between !important
    }

    .justify-content-lg-around {
        -ms-flex-pack: distribute !important;
        justify-content: space-around !important
    }

    .justify-content-lg-evenly {
        -webkit-box-pack: space-evenly !important;
        -ms-flex-pack: space-evenly !important;
        justify-content: space-evenly !important
    }

    .align-items-lg-start {
        -webkit-box-align: start !important;
        -ms-flex-align: start !important;
        align-items: flex-start !important
    }

    .align-items-lg-end {
        -webkit-box-align: end !important;
        -ms-flex-align: end !important;
        align-items: flex-end !important
    }

    .align-items-lg-center {
        -webkit-box-align: center !important;
        -ms-flex-align: center !important;
        align-items: center !important
    }

    .align-items-lg-baseline {
        -webkit-box-align: baseline !important;
        -ms-flex-align: baseline !important;
        align-items: baseline !important
    }

    .align-items-lg-stretch {
        -webkit-box-align: stretch !important;
        -ms-flex-align: stretch !important;
        align-items: stretch !important
    }

    .align-content-lg-start {
        -ms-flex-line-pack: start !important;
        align-content: flex-start !important
    }

    .align-content-lg-end {
        -ms-flex-line-pack: end !important;
        align-content: flex-end !important
    }

    .align-content-lg-center {
        -ms-flex-line-pack: center !important;
        align-content: center !important
    }

    .align-content-lg-between {
        -ms-flex-line-pack: justify !important;
        align-content: space-between !important
    }

    .align-content-lg-around {
        -ms-flex-line-pack: distribute !important;
        align-content: space-around !important
    }

    .align-content-lg-stretch {
        -ms-flex-line-pack: stretch !important;
        align-content: stretch !important
    }

    .align-self-lg-auto {
        -ms-flex-item-align: auto !important;
        align-self: auto !important
    }

    .align-self-lg-start {
        -ms-flex-item-align: start !important;
        align-self: flex-start !important
    }

    .align-self-lg-end {
        -ms-flex-item-align: end !important;
        align-self: flex-end !important
    }

    .align-self-lg-center {
        -ms-flex-item-align: center !important;
        align-self: center !important
    }

    .align-self-lg-baseline {
        -ms-flex-item-align: baseline !important;
        align-self: baseline !important
    }

    .align-self-lg-stretch {
        -ms-flex-item-align: stretch !important;
        align-self: stretch !important
    }

    .order-lg-first {
        -webkit-box-ordinal-group: 0 !important;
        -ms-flex-order: -1 !important;
        order: -1 !important
    }

    .order-lg-0 {
        -webkit-box-ordinal-group: 1 !important;
        -ms-flex-order: 0 !important;
        order: 0 !important
    }

    .order-lg-1 {
        -webkit-box-ordinal-group: 2 !important;
        -ms-flex-order: 1 !important;
        order: 1 !important
    }

    .order-lg-2 {
        -webkit-box-ordinal-group: 3 !important;
        -ms-flex-order: 2 !important;
        order: 2 !important
    }

    .order-lg-3 {
        -webkit-box-ordinal-group: 4 !important;
        -ms-flex-order: 3 !important;
        order: 3 !important
    }

    .order-lg-4 {
        -webkit-box-ordinal-group: 5 !important;
        -ms-flex-order: 4 !important;
        order: 4 !important
    }

    .order-lg-5 {
        -webkit-box-ordinal-group: 6 !important;
        -ms-flex-order: 5 !important;
        order: 5 !important
    }

    .order-lg-last {
        -webkit-box-ordinal-group: 7 !important;
        -ms-flex-order: 6 !important;
        order: 6 !important
    }

    .m-lg-0 {
        margin: 0 !important
    }

    .m-lg-1 {
        margin: .3125rem !important
    }

    .m-lg-2 {
        margin: .625rem !important
    }

    .m-lg-3 {
        margin: 1.25rem !important
    }

    .m-lg-4 {
        margin: 1.875rem !important
    }

    .m-lg-5 {
        margin: 3.75rem !important
    }

    .m-lg-auto {
        margin: auto !important
    }

    .mx-lg-0 {
        margin-left: 0 !important;
        margin-right: 0 !important
    }

    .mx-lg-1 {
        margin-left: .3125rem !important;
        margin-right: .3125rem !important
    }

    .mx-lg-2 {
        margin-left: .625rem !important;
        margin-right: .625rem !important
    }

    .mx-lg-3 {
        margin-left: 1.25rem !important;
        margin-right: 1.25rem !important
    }

    .mx-lg-4 {
        margin-left: 1.875rem !important;
        margin-right: 1.875rem !important
    }

    .mx-lg-5 {
        margin-left: 3.75rem !important;
        margin-right: 3.75rem !important
    }

    .mx-lg-auto {
        margin-left: auto !important;
        margin-right: auto !important
    }

    .my-lg-0 {
        margin-top: 0 !important;
        margin-bottom: 0 !important
    }

    .my-lg-1 {
        margin-top: .3125rem !important;
        margin-bottom: .3125rem !important
    }

    .my-lg-2 {
        margin-top: .625rem !important;
        margin-bottom: .625rem !important
    }

    .my-lg-3 {
        margin-top: 1.25rem !important;
        margin-bottom: 1.25rem !important
    }

    .my-lg-4 {
        margin-top: 1.875rem !important;
        margin-bottom: 1.875rem !important
    }

    .my-lg-5 {
        margin-top: 3.75rem !important;
        margin-bottom: 3.75rem !important
    }

    .my-lg-auto {
        margin-top: auto !important;
        margin-bottom: auto !important
    }

    .mt-lg-0 {
        margin-top: 0 !important
    }

    .mt-lg-1 {
        margin-top: .3125rem !important
    }

    .mt-lg-2 {
        margin-top: .625rem !important
    }

    .mt-lg-3 {
        margin-top: 1.25rem !important
    }

    .mt-lg-4 {
        margin-top: 1.875rem !important
    }

    .mt-lg-5 {
        margin-top: 3.75rem !important
    }

    .mt-lg-auto {
        margin-top: auto !important
    }

    .me-lg-0 {
        margin-left: 0 !important
    }

    .me-lg-1 {
        margin-left: .3125rem !important
    }

    .me-lg-2 {
        margin-left: .625rem !important
    }

    .me-lg-3 {
        margin-left: 1.25rem !important
    }

    .me-lg-4 {
        margin-left: 1.875rem !important
    }

    .me-lg-5 {
        margin-left: 3.75rem !important
    }

    .me-lg-auto {
        margin-left: auto !important
    }

    .mb-lg-0 {
        margin-bottom: 0 !important
    }

    .mb-lg-1 {
        margin-bottom: .3125rem !important
    }

    .mb-lg-2 {
        margin-bottom: .625rem !important
    }

    .mb-lg-3 {
        margin-bottom: 1.25rem !important
    }

    .mb-lg-4 {
        margin-bottom: 1.875rem !important
    }

    .mb-lg-5 {
        margin-bottom: 3.75rem !important
    }

    .mb-lg-auto {
        margin-bottom: auto !important
    }

    .ms-lg-0 {
        margin-right: 0 !important
    }

    .ms-lg-1 {
        margin-right: .3125rem !important
    }

    .ms-lg-2 {
        margin-right: .625rem !important
    }

    .ms-lg-3 {
        margin-right: 1.25rem !important
    }

    .ms-lg-4 {
        margin-right: 1.875rem !important
    }

    .ms-lg-5 {
        margin-right: 3.75rem !important
    }

    .ms-lg-auto {
        margin-right: auto !important
    }

    .m-lg-n1 {
        margin: -.3125rem !important
    }

    .m-lg-n2 {
        margin: -.625rem !important
    }

    .m-lg-n3 {
        margin: -1.25rem !important
    }

    .m-lg-n4 {
        margin: -1.875rem !important
    }

    .m-lg-n5 {
        margin: -3.75rem !important
    }

    .mx-lg-n1 {
        margin-left: -.3125rem !important;
        margin-right: -.3125rem !important
    }

    .mx-lg-n2 {
        margin-left: -.625rem !important;
        margin-right: -.625rem !important
    }

    .mx-lg-n3 {
        margin-left: -1.25rem !important;
        margin-right: -1.25rem !important
    }

    .mx-lg-n4 {
        margin-left: -1.875rem !important;
        margin-right: -1.875rem !important
    }

    .mx-lg-n5 {
        margin-left: -3.75rem !important;
        margin-right: -3.75rem !important
    }

    .my-lg-n1 {
        margin-top: -.3125rem !important;
        margin-bottom: -.3125rem !important
    }

    .my-lg-n2 {
        margin-top: -.625rem !important;
        margin-bottom: -.625rem !important
    }

    .my-lg-n3 {
        margin-top: -1.25rem !important;
        margin-bottom: -1.25rem !important
    }

    .my-lg-n4 {
        margin-top: -1.875rem !important;
        margin-bottom: -1.875rem !important
    }

    .my-lg-n5 {
        margin-top: -3.75rem !important;
        margin-bottom: -3.75rem !important
    }

    .mt-lg-n1 {
        margin-top: -.3125rem !important
    }

    .mt-lg-n2 {
        margin-top: -.625rem !important
    }

    .mt-lg-n3 {
        margin-top: -1.25rem !important
    }

    .mt-lg-n4 {
        margin-top: -1.875rem !important
    }

    .mt-lg-n5 {
        margin-top: -3.75rem !important
    }

    .me-lg-n1 {
        margin-left: -.3125rem !important
    }

    .me-lg-n2 {
        margin-left: -.625rem !important
    }

    .me-lg-n3 {
        margin-left: -1.25rem !important
    }

    .me-lg-n4 {
        margin-left: -1.875rem !important
    }

    .me-lg-n5 {
        margin-left: -3.75rem !important
    }

    .mb-lg-n1 {
        margin-bottom: -.3125rem !important
    }

    .mb-lg-n2 {
        margin-bottom: -.625rem !important
    }

    .mb-lg-n3 {
        margin-bottom: -1.25rem !important
    }

    .mb-lg-n4 {
        margin-bottom: -1.875rem !important
    }

    .mb-lg-n5 {
        margin-bottom: -3.75rem !important
    }

    .ms-lg-n1 {
        margin-right: -.3125rem !important
    }

    .ms-lg-n2 {
        margin-right: -.625rem !important
    }

    .ms-lg-n3 {
        margin-right: -1.25rem !important
    }

    .ms-lg-n4 {
        margin-right: -1.875rem !important
    }

    .ms-lg-n5 {
        margin-right: -3.75rem !important
    }

    .p-lg-0 {
        padding: 0 !important
    }

    .p-lg-1 {
        padding: .3125rem !important
    }

    .p-lg-2 {
        padding: .625rem !important
    }

    .p-lg-3 {
        padding: 1.25rem !important
    }

    .p-lg-4 {
        padding: 1.875rem !important
    }

    .p-lg-5 {
        padding: 3.75rem !important
    }

    .px-lg-0 {
        padding-left: 0 !important;
        padding-right: 0 !important
    }

    .px-lg-1 {
        padding-left: .3125rem !important;
        padding-right: .3125rem !important
    }

    .px-lg-2 {
        padding-left: .625rem !important;
        padding-right: .625rem !important
    }

    .px-lg-3 {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important
    }

    .px-lg-4 {
        padding-left: 1.875rem !important;
        padding-right: 1.875rem !important
    }

    .px-lg-5 {
        padding-left: 3.75rem !important;
        padding-right: 3.75rem !important
    }

    .py-lg-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important
    }

    .py-lg-1 {
        padding-top: .3125rem !important;
        padding-bottom: .3125rem !important
    }

    .py-lg-2 {
        padding-top: .625rem !important;
        padding-bottom: .625rem !important
    }

    .py-lg-3 {
        padding-top: 1.25rem !important;
        padding-bottom: 1.25rem !important
    }

    .py-lg-4 {
        padding-top: 1.875rem !important;
        padding-bottom: 1.875rem !important
    }

    .py-lg-5 {
        padding-top: 3.75rem !important;
        padding-bottom: 3.75rem !important
    }

    .pt-lg-0 {
        padding-top: 0 !important
    }

    .pt-lg-1 {
        padding-top: .3125rem !important
    }

    .pt-lg-2 {
        padding-top: .625rem !important
    }

    .pt-lg-3 {
        padding-top: 1.25rem !important
    }

    .pt-lg-4 {
        padding-top: 1.875rem !important
    }

    .pt-lg-5 {
        padding-top: 3.75rem !important
    }

    .pe-lg-0 {
        padding-left: 0 !important
    }

    .pe-lg-1 {
        padding-left: .3125rem !important
    }

    .pe-lg-2 {
        padding-left: .625rem !important
    }

    .pe-lg-3 {
        padding-left: 1.25rem !important
    }

    .pe-lg-4 {
        padding-left: 1.875rem !important
    }

    .pe-lg-5 {
        padding-left: 3.75rem !important
    }

    .pb-lg-0 {
        padding-bottom: 0 !important
    }

    .pb-lg-1 {
        padding-bottom: .3125rem !important
    }

    .pb-lg-2 {
        padding-bottom: .625rem !important
    }

    .pb-lg-3 {
        padding-bottom: 1.25rem !important
    }

    .pb-lg-4 {
        padding-bottom: 1.875rem !important
    }

    .pb-lg-5 {
        padding-bottom: 3.75rem !important
    }

    .ps-lg-0 {
        padding-right: 0 !important
    }

    .ps-lg-1 {
        padding-right: .3125rem !important
    }

    .ps-lg-2 {
        padding-right: .625rem !important
    }

    .ps-lg-3 {
        padding-right: 1.25rem !important
    }

    .ps-lg-4 {
        padding-right: 1.875rem !important
    }

    .ps-lg-5 {
        padding-right: 3.75rem !important
    }

    .gap-lg-0 {
        gap: 0 !important
    }

    .gap-lg-1 {
        gap: .3125rem !important
    }

    .gap-lg-2 {
        gap: .625rem !important
    }

    .gap-lg-3 {
        gap: 1.25rem !important
    }

    .gap-lg-4 {
        gap: 1.875rem !important
    }

    .gap-lg-5 {
        gap: 3.75rem !important
    }

    .row-gap-lg-0 {
        row-gap: 0 !important
    }

    .row-gap-lg-1 {
        row-gap: .3125rem !important
    }

    .row-gap-lg-2 {
        row-gap: .625rem !important
    }

    .row-gap-lg-3 {
        row-gap: 1.25rem !important
    }

    .row-gap-lg-4 {
        row-gap: 1.875rem !important
    }

    .row-gap-lg-5 {
        row-gap: 3.75rem !important
    }

    .column-gap-lg-0 {
        -webkit-column-gap: 0 !important;
        -moz-column-gap: 0 !important;
        column-gap: 0 !important
    }

    .column-gap-lg-1 {
        -webkit-column-gap: .3125rem !important;
        -moz-column-gap: .3125rem !important;
        column-gap: .3125rem !important
    }

    .column-gap-lg-2 {
        -webkit-column-gap: .625rem !important;
        -moz-column-gap: .625rem !important;
        column-gap: .625rem !important
    }

    .column-gap-lg-3 {
        -webkit-column-gap: 1.25rem !important;
        -moz-column-gap: 1.25rem !important;
        column-gap: 1.25rem !important
    }

    .column-gap-lg-4 {
        -webkit-column-gap: 1.875rem !important;
        -moz-column-gap: 1.875rem !important;
        column-gap: 1.875rem !important
    }

    .column-gap-lg-5 {
        -webkit-column-gap: 3.75rem !important;
        -moz-column-gap: 3.75rem !important;
        column-gap: 3.75rem !important
    }

    .text-lg-start {
        text-align: right !important
    }

    .text-lg-end {
        text-align: left !important
    }

    .text-lg-center {
        text-align: center !important
    }
}

@media (min-width:1200px) {
    .float-xl-start {
        float: right !important
    }

    .float-xl-end {
        float: left !important
    }

    .float-xl-none {
        float: none !important
    }

    .object-fit-xl-contain {
        -o-object-fit: contain !important;
        object-fit: contain !important
    }

    .object-fit-xl-cover {
        -o-object-fit: cover !important;
        object-fit: cover !important
    }

    .object-fit-xl-fill {
        -o-object-fit: fill !important;
        object-fit: fill !important
    }

    .object-fit-xl-scale {
        -o-object-fit: scale-down !important;
        object-fit: scale-down !important
    }

    .object-fit-xl-none {
        -o-object-fit: none !important;
        object-fit: none !important
    }

    .d-xl-inline {
        display: inline !important
    }

    .d-xl-inline-block {
        display: inline-block !important
    }

    .d-xl-block {
        display: block !important
    }

    .d-xl-grid {
        display: grid !important
    }

    .d-xl-inline-grid {
        display: inline-grid !important
    }

    .d-xl-table {
        display: table !important
    }

    .d-xl-table-row {
        display: table-row !important
    }

    .d-xl-table-cell {
        display: table-cell !important
    }

    .d-xl-flex {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important
    }

    .d-xl-inline-flex {
        display: -webkit-inline-box !important;
        display: -ms-inline-flexbox !important;
        display: inline-flex !important
    }

    .d-xl-none {
        display: none !important
    }

    .position-xl-static {
        position: static !important
    }

    .position-xl-relative {
        position: relative !important
    }

    .position-xl-absolute {
        position: absolute !important
    }

    .position-xl-fixed {
        position: fixed !important
    }

    .position-xl-sticky {
        position: sticky !important
    }

    .w-xl-0 {
        width: 0 !important
    }

    .w-xl-25 {
        width: 25% !important
    }

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

    .w-xl-75 {
        width: 75% !important
    }

    .w-xl-100 {
        width: 100% !important
    }

    .flex-xl-fill {
        -webkit-box-flex: 1 !important;
        -ms-flex: 1 1 auto !important;
        flex: 1 1 auto !important
    }

    .flex-xl-row {
        -webkit-box-orient: horizontal !important;
        -webkit-box-direction: normal !important;
        -ms-flex-direction: row !important;
        flex-direction: row !important
    }

    .flex-xl-column {
        -webkit-box-orient: vertical !important;
        -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
        flex-direction: column !important
    }

    .flex-xl-row-reverse {
        -webkit-box-orient: horizontal !important;
        -webkit-box-direction: reverse !important;
        -ms-flex-direction: row-reverse !important;
        flex-direction: row-reverse !important
    }

    .flex-xl-column-reverse {
        -webkit-box-orient: vertical !important;
        -webkit-box-direction: reverse !important;
        -ms-flex-direction: column-reverse !important;
        flex-direction: column-reverse !important
    }

    .flex-xl-grow-0 {
        -webkit-box-flex: 0 !important;
        -ms-flex-positive: 0 !important;
        flex-grow: 0 !important
    }

    .flex-xl-grow-1 {
        -webkit-box-flex: 1 !important;
        -ms-flex-positive: 1 !important;
        flex-grow: 1 !important
    }

    .flex-xl-shrink-0 {
        -ms-flex-negative: 0 !important;
        flex-shrink: 0 !important
    }

    .flex-xl-shrink-1 {
        -ms-flex-negative: 1 !important;
        flex-shrink: 1 !important
    }

    .flex-xl-wrap {
        -ms-flex-wrap: wrap !important;
        flex-wrap: wrap !important
    }

    .flex-xl-nowrap {
        -ms-flex-wrap: nowrap !important;
        flex-wrap: nowrap !important
    }

    .flex-xl-wrap-reverse {
        -ms-flex-wrap: wrap-reverse !important;
        flex-wrap: wrap-reverse !important
    }

    .justify-content-xl-start {
        -webkit-box-pack: start !important;
        -ms-flex-pack: start !important;
        justify-content: flex-start !important
    }

    .justify-content-xl-end {
        -webkit-box-pack: end !important;
        -ms-flex-pack: end !important;
        justify-content: flex-end !important
    }

    .justify-content-xl-center {
        -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
        justify-content: center !important
    }

    .justify-content-xl-between {
        -webkit-box-pack: justify !important;
        -ms-flex-pack: justify !important;
        justify-content: space-between !important
    }

    .justify-content-xl-around {
        -ms-flex-pack: distribute !important;
        justify-content: space-around !important
    }

    .justify-content-xl-evenly {
        -webkit-box-pack: space-evenly !important;
        -ms-flex-pack: space-evenly !important;
        justify-content: space-evenly !important
    }

    .align-items-xl-start {
        -webkit-box-align: start !important;
        -ms-flex-align: start !important;
        align-items: flex-start !important
    }

    .align-items-xl-end {
        -webkit-box-align: end !important;
        -ms-flex-align: end !important;
        align-items: flex-end !important
    }

    .align-items-xl-center {
        -webkit-box-align: center !important;
        -ms-flex-align: center !important;
        align-items: center !important
    }

    .align-items-xl-baseline {
        -webkit-box-align: baseline !important;
        -ms-flex-align: baseline !important;
        align-items: baseline !important
    }

    .align-items-xl-stretch {
        -webkit-box-align: stretch !important;
        -ms-flex-align: stretch !important;
        align-items: stretch !important
    }

    .align-content-xl-start {
        -ms-flex-line-pack: start !important;
        align-content: flex-start !important
    }

    .align-content-xl-end {
        -ms-flex-line-pack: end !important;
        align-content: flex-end !important
    }

    .align-content-xl-center {
        -ms-flex-line-pack: center !important;
        align-content: center !important
    }

    .align-content-xl-between {
        -ms-flex-line-pack: justify !important;
        align-content: space-between !important
    }

    .align-content-xl-around {
        -ms-flex-line-pack: distribute !important;
        align-content: space-around !important
    }

    .align-content-xl-stretch {
        -ms-flex-line-pack: stretch !important;
        align-content: stretch !important
    }

    .align-self-xl-auto {
        -ms-flex-item-align: auto !important;
        align-self: auto !important
    }

    .align-self-xl-start {
        -ms-flex-item-align: start !important;
        align-self: flex-start !important
    }

    .align-self-xl-end {
        -ms-flex-item-align: end !important;
        align-self: flex-end !important
    }

    .align-self-xl-center {
        -ms-flex-item-align: center !important;
        align-self: center !important
    }

    .align-self-xl-baseline {
        -ms-flex-item-align: baseline !important;
        align-self: baseline !important
    }

    .align-self-xl-stretch {
        -ms-flex-item-align: stretch !important;
        align-self: stretch !important
    }

    .order-xl-first {
        -webkit-box-ordinal-group: 0 !important;
        -ms-flex-order: -1 !important;
        order: -1 !important
    }

    .order-xl-0 {
        -webkit-box-ordinal-group: 1 !important;
        -ms-flex-order: 0 !important;
        order: 0 !important
    }

    .order-xl-1 {
        -webkit-box-ordinal-group: 2 !important;
        -ms-flex-order: 1 !important;
        order: 1 !important
    }

    .order-xl-2 {
        -webkit-box-ordinal-group: 3 !important;
        -ms-flex-order: 2 !important;
        order: 2 !important
    }

    .order-xl-3 {
        -webkit-box-ordinal-group: 4 !important;
        -ms-flex-order: 3 !important;
        order: 3 !important
    }

    .order-xl-4 {
        -webkit-box-ordinal-group: 5 !important;
        -ms-flex-order: 4 !important;
        order: 4 !important
    }

    .order-xl-5 {
        -webkit-box-ordinal-group: 6 !important;
        -ms-flex-order: 5 !important;
        order: 5 !important
    }

    .order-xl-last {
        -webkit-box-ordinal-group: 7 !important;
        -ms-flex-order: 6 !important;
        order: 6 !important
    }

    .m-xl-0 {
        margin: 0 !important
    }

    .m-xl-1 {
        margin: .3125rem !important
    }

    .m-xl-2 {
        margin: .625rem !important
    }

    .m-xl-3 {
        margin: 1.25rem !important
    }

    .m-xl-4 {
        margin: 1.875rem !important
    }

    .m-xl-5 {
        margin: 3.75rem !important
    }

    .m-xl-auto {
        margin: auto !important
    }

    .mx-xl-0 {
        margin-left: 0 !important;
        margin-right: 0 !important
    }

    .mx-xl-1 {
        margin-left: .3125rem !important;
        margin-right: .3125rem !important
    }

    .mx-xl-2 {
        margin-left: .625rem !important;
        margin-right: .625rem !important
    }

    .mx-xl-3 {
        margin-left: 1.25rem !important;
        margin-right: 1.25rem !important
    }

    .mx-xl-4 {
        margin-left: 1.875rem !important;
        margin-right: 1.875rem !important
    }

    .mx-xl-5 {
        margin-left: 3.75rem !important;
        margin-right: 3.75rem !important
    }

    .mx-xl-auto {
        margin-left: auto !important;
        margin-right: auto !important
    }

    .my-xl-0 {
        margin-top: 0 !important;
        margin-bottom: 0 !important
    }

    .my-xl-1 {
        margin-top: .3125rem !important;
        margin-bottom: .3125rem !important
    }

    .my-xl-2 {
        margin-top: .625rem !important;
        margin-bottom: .625rem !important
    }

    .my-xl-3 {
        margin-top: 1.25rem !important;
        margin-bottom: 1.25rem !important
    }

    .my-xl-4 {
        margin-top: 1.875rem !important;
        margin-bottom: 1.875rem !important
    }

    .my-xl-5 {
        margin-top: 3.75rem !important;
        margin-bottom: 3.75rem !important
    }

    .my-xl-auto {
        margin-top: auto !important;
        margin-bottom: auto !important
    }

    .mt-xl-0 {
        margin-top: 0 !important
    }

    .mt-xl-1 {
        margin-top: .3125rem !important
    }

    .mt-xl-2 {
        margin-top: .625rem !important
    }

    .mt-xl-3 {
        margin-top: 1.25rem !important
    }

    .mt-xl-4 {
        margin-top: 1.875rem !important
    }

    .mt-xl-5 {
        margin-top: 3.75rem !important
    }

    .mt-xl-auto {
        margin-top: auto !important
    }

    .me-xl-0 {
        margin-left: 0 !important
    }

    .me-xl-1 {
        margin-left: .3125rem !important
    }

    .me-xl-2 {
        margin-left: .625rem !important
    }

    .me-xl-3 {
        margin-left: 1.25rem !important
    }

    .me-xl-4 {
        margin-left: 1.875rem !important
    }

    .me-xl-5 {
        margin-left: 3.75rem !important
    }

    .me-xl-auto {
        margin-left: auto !important
    }

    .mb-xl-0 {
        margin-bottom: 0 !important
    }

    .mb-xl-1 {
        margin-bottom: .3125rem !important
    }

    .mb-xl-2 {
        margin-bottom: .625rem !important
    }

    .mb-xl-3 {
        margin-bottom: 1.25rem !important
    }

    .mb-xl-4 {
        margin-bottom: 1.875rem !important
    }

    .mb-xl-5 {
        margin-bottom: 3.75rem !important
    }

    .mb-xl-auto {
        margin-bottom: auto !important
    }

    .ms-xl-0 {
        margin-right: 0 !important
    }

    .ms-xl-1 {
        margin-right: .3125rem !important
    }

    .ms-xl-2 {
        margin-right: .625rem !important
    }

    .ms-xl-3 {
        margin-right: 1.25rem !important
    }

    .ms-xl-4 {
        margin-right: 1.875rem !important
    }

    .ms-xl-5 {
        margin-right: 3.75rem !important
    }

    .ms-xl-auto {
        margin-right: auto !important
    }

    .m-xl-n1 {
        margin: -.3125rem !important
    }

    .m-xl-n2 {
        margin: -.625rem !important
    }

    .m-xl-n3 {
        margin: -1.25rem !important
    }

    .m-xl-n4 {
        margin: -1.875rem !important
    }

    .m-xl-n5 {
        margin: -3.75rem !important
    }

    .mx-xl-n1 {
        margin-left: -.3125rem !important;
        margin-right: -.3125rem !important
    }

    .mx-xl-n2 {
        margin-left: -.625rem !important;
        margin-right: -.625rem !important
    }

    .mx-xl-n3 {
        margin-left: -1.25rem !important;
        margin-right: -1.25rem !important
    }

    .mx-xl-n4 {
        margin-left: -1.875rem !important;
        margin-right: -1.875rem !important
    }

    .mx-xl-n5 {
        margin-left: -3.75rem !important;
        margin-right: -3.75rem !important
    }

    .my-xl-n1 {
        margin-top: -.3125rem !important;
        margin-bottom: -.3125rem !important
    }

    .my-xl-n2 {
        margin-top: -.625rem !important;
        margin-bottom: -.625rem !important
    }

    .my-xl-n3 {
        margin-top: -1.25rem !important;
        margin-bottom: -1.25rem !important
    }

    .my-xl-n4 {
        margin-top: -1.875rem !important;
        margin-bottom: -1.875rem !important
    }

    .my-xl-n5 {
        margin-top: -3.75rem !important;
        margin-bottom: -3.75rem !important
    }

    .mt-xl-n1 {
        margin-top: -.3125rem !important
    }

    .mt-xl-n2 {
        margin-top: -.625rem !important
    }

    .mt-xl-n3 {
        margin-top: -1.25rem !important
    }

    .mt-xl-n4 {
        margin-top: -1.875rem !important
    }

    .mt-xl-n5 {
        margin-top: -3.75rem !important
    }

    .me-xl-n1 {
        margin-left: -.3125rem !important
    }

    .me-xl-n2 {
        margin-left: -.625rem !important
    }

    .me-xl-n3 {
        margin-left: -1.25rem !important
    }

    .me-xl-n4 {
        margin-left: -1.875rem !important
    }

    .me-xl-n5 {
        margin-left: -3.75rem !important
    }

    .mb-xl-n1 {
        margin-bottom: -.3125rem !important
    }

    .mb-xl-n2 {
        margin-bottom: -.625rem !important
    }

    .mb-xl-n3 {
        margin-bottom: -1.25rem !important
    }

    .mb-xl-n4 {
        margin-bottom: -1.875rem !important
    }

    .mb-xl-n5 {
        margin-bottom: -3.75rem !important
    }

    .ms-xl-n1 {
        margin-right: -.3125rem !important
    }

    .ms-xl-n2 {
        margin-right: -.625rem !important
    }

    .ms-xl-n3 {
        margin-right: -1.25rem !important
    }

    .ms-xl-n4 {
        margin-right: -1.875rem !important
    }

    .ms-xl-n5 {
        margin-right: -3.75rem !important
    }

    .p-xl-0 {
        padding: 0 !important
    }

    .p-xl-1 {
        padding: .3125rem !important
    }

    .p-xl-2 {
        padding: .625rem !important
    }

    .p-xl-3 {
        padding: 1.25rem !important
    }

    .p-xl-4 {
        padding: 1.875rem !important
    }

    .p-xl-5 {
        padding: 3.75rem !important
    }

    .px-xl-0 {
        padding-left: 0 !important;
        padding-right: 0 !important
    }

    .px-xl-1 {
        padding-left: .3125rem !important;
        padding-right: .3125rem !important
    }

    .px-xl-2 {
        padding-left: .625rem !important;
        padding-right: .625rem !important
    }

    .px-xl-3 {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important
    }

    .px-xl-4 {
        padding-left: 1.875rem !important;
        padding-right: 1.875rem !important
    }

    .px-xl-5 {
        padding-left: 3.75rem !important;
        padding-right: 3.75rem !important
    }

    .py-xl-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important
    }

    .py-xl-1 {
        padding-top: .3125rem !important;
        padding-bottom: .3125rem !important
    }

    .py-xl-2 {
        padding-top: .625rem !important;
        padding-bottom: .625rem !important
    }

    .py-xl-3 {
        padding-top: 1.25rem !important;
        padding-bottom: 1.25rem !important
    }

    .py-xl-4 {
        padding-top: 1.875rem !important;
        padding-bottom: 1.875rem !important
    }

    .py-xl-5 {
        padding-top: 3.75rem !important;
        padding-bottom: 3.75rem !important
    }

    .pt-xl-0 {
        padding-top: 0 !important
    }

    .pt-xl-1 {
        padding-top: .3125rem !important
    }

    .pt-xl-2 {
        padding-top: .625rem !important
    }

    .pt-xl-3 {
        padding-top: 1.25rem !important
    }

    .pt-xl-4 {
        padding-top: 1.875rem !important
    }

    .pt-xl-5 {
        padding-top: 3.75rem !important
    }

    .pe-xl-0 {
        padding-left: 0 !important
    }

    .pe-xl-1 {
        padding-left: .3125rem !important
    }

    .pe-xl-2 {
        padding-left: .625rem !important
    }

    .pe-xl-3 {
        padding-left: 1.25rem !important
    }

    .pe-xl-4 {
        padding-left: 1.875rem !important
    }

    .pe-xl-5 {
        padding-left: 3.75rem !important
    }

    .pb-xl-0 {
        padding-bottom: 0 !important
    }

    .pb-xl-1 {
        padding-bottom: .3125rem !important
    }

    .pb-xl-2 {
        padding-bottom: .625rem !important
    }

    .pb-xl-3 {
        padding-bottom: 1.25rem !important
    }

    .pb-xl-4 {
        padding-bottom: 1.875rem !important
    }

    .pb-xl-5 {
        padding-bottom: 3.75rem !important
    }

    .ps-xl-0 {
        padding-right: 0 !important
    }

    .ps-xl-1 {
        padding-right: .3125rem !important
    }

    .ps-xl-2 {
        padding-right: .625rem !important
    }

    .ps-xl-3 {
        padding-right: 1.25rem !important
    }

    .ps-xl-4 {
        padding-right: 1.875rem !important
    }

    .ps-xl-5 {
        padding-right: 3.75rem !important
    }

    .gap-xl-0 {
        gap: 0 !important
    }

    .gap-xl-1 {
        gap: .3125rem !important
    }

    .gap-xl-2 {
        gap: .625rem !important
    }

    .gap-xl-3 {
        gap: 1.25rem !important
    }

    .gap-xl-4 {
        gap: 1.875rem !important
    }

    .gap-xl-5 {
        gap: 3.75rem !important
    }

    .row-gap-xl-0 {
        row-gap: 0 !important
    }

    .row-gap-xl-1 {
        row-gap: .3125rem !important
    }

    .row-gap-xl-2 {
        row-gap: .625rem !important
    }

    .row-gap-xl-3 {
        row-gap: 1.25rem !important
    }

    .row-gap-xl-4 {
        row-gap: 1.875rem !important
    }

    .row-gap-xl-5 {
        row-gap: 3.75rem !important
    }

    .column-gap-xl-0 {
        -webkit-column-gap: 0 !important;
        -moz-column-gap: 0 !important;
        column-gap: 0 !important
    }

    .column-gap-xl-1 {
        -webkit-column-gap: .3125rem !important;
        -moz-column-gap: .3125rem !important;
        column-gap: .3125rem !important
    }

    .column-gap-xl-2 {
        -webkit-column-gap: .625rem !important;
        -moz-column-gap: .625rem !important;
        column-gap: .625rem !important
    }

    .column-gap-xl-3 {
        -webkit-column-gap: 1.25rem !important;
        -moz-column-gap: 1.25rem !important;
        column-gap: 1.25rem !important
    }

    .column-gap-xl-4 {
        -webkit-column-gap: 1.875rem !important;
        -moz-column-gap: 1.875rem !important;
        column-gap: 1.875rem !important
    }

    .column-gap-xl-5 {
        -webkit-column-gap: 3.75rem !important;
        -moz-column-gap: 3.75rem !important;
        column-gap: 3.75rem !important
    }

    .text-xl-start {
        text-align: right !important
    }

    .text-xl-end {
        text-align: left !important
    }

    .text-xl-center {
        text-align: center !important
    }
}

@media (min-width:1400px) {
    .float-xxl-start {
        float: right !important
    }

    .float-xxl-end {
        float: left !important
    }

    .float-xxl-none {
        float: none !important
    }

    .object-fit-xxl-contain {
        -o-object-fit: contain !important;
        object-fit: contain !important
    }

    .object-fit-xxl-cover {
        -o-object-fit: cover !important;
        object-fit: cover !important
    }

    .object-fit-xxl-fill {
        -o-object-fit: fill !important;
        object-fit: fill !important
    }

    .object-fit-xxl-scale {
        -o-object-fit: scale-down !important;
        object-fit: scale-down !important
    }

    .object-fit-xxl-none {
        -o-object-fit: none !important;
        object-fit: none !important
    }

    .d-xxl-inline {
        display: inline !important
    }

    .d-xxl-inline-block {
        display: inline-block !important
    }

    .d-xxl-block {
        display: block !important
    }

    .d-xxl-grid {
        display: grid !important
    }

    .d-xxl-inline-grid {
        display: inline-grid !important
    }

    .d-xxl-table {
        display: table !important
    }

    .d-xxl-table-row {
        display: table-row !important
    }

    .d-xxl-table-cell {
        display: table-cell !important
    }

    .d-xxl-flex {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important
    }

    .d-xxl-inline-flex {
        display: -webkit-inline-box !important;
        display: -ms-inline-flexbox !important;
        display: inline-flex !important
    }

    .d-xxl-none {
        display: none !important
    }

    .position-xxl-static {
        position: static !important
    }

    .position-xxl-relative {
        position: relative !important
    }

    .position-xxl-absolute {
        position: absolute !important
    }

    .position-xxl-fixed {
        position: fixed !important
    }

    .position-xxl-sticky {
        position: sticky !important
    }

    .w-xxl-0 {
        width: 0 !important
    }

    .w-xxl-25 {
        width: 25% !important
    }

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

    .w-xxl-75 {
        width: 75% !important
    }

    .w-xxl-100 {
        width: 100% !important
    }

    .flex-xxl-fill {
        -webkit-box-flex: 1 !important;
        -ms-flex: 1 1 auto !important;
        flex: 1 1 auto !important
    }

    .flex-xxl-row {
        -webkit-box-orient: horizontal !important;
        -webkit-box-direction: normal !important;
        -ms-flex-direction: row !important;
        flex-direction: row !important
    }

    .flex-xxl-column {
        -webkit-box-orient: vertical !important;
        -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
        flex-direction: column !important
    }

    .flex-xxl-row-reverse {
        -webkit-box-orient: horizontal !important;
        -webkit-box-direction: reverse !important;
        -ms-flex-direction: row-reverse !important;
        flex-direction: row-reverse !important
    }

    .flex-xxl-column-reverse {
        -webkit-box-orient: vertical !important;
        -webkit-box-direction: reverse !important;
        -ms-flex-direction: column-reverse !important;
        flex-direction: column-reverse !important
    }

    .flex-xxl-grow-0 {
        -webkit-box-flex: 0 !important;
        -ms-flex-positive: 0 !important;
        flex-grow: 0 !important
    }

    .flex-xxl-grow-1 {
        -webkit-box-flex: 1 !important;
        -ms-flex-positive: 1 !important;
        flex-grow: 1 !important
    }

    .flex-xxl-shrink-0 {
        -ms-flex-negative: 0 !important;
        flex-shrink: 0 !important
    }

    .flex-xxl-shrink-1 {
        -ms-flex-negative: 1 !important;
        flex-shrink: 1 !important
    }

    .flex-xxl-wrap {
        -ms-flex-wrap: wrap !important;
        flex-wrap: wrap !important
    }

    .flex-xxl-nowrap {
        -ms-flex-wrap: nowrap !important;
        flex-wrap: nowrap !important
    }

    .flex-xxl-wrap-reverse {
        -ms-flex-wrap: wrap-reverse !important;
        flex-wrap: wrap-reverse !important
    }

    .justify-content-xxl-start {
        -webkit-box-pack: start !important;
        -ms-flex-pack: start !important;
        justify-content: flex-start !important
    }

    .justify-content-xxl-end {
        -webkit-box-pack: end !important;
        -ms-flex-pack: end !important;
        justify-content: flex-end !important
    }

    .justify-content-xxl-center {
        -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
        justify-content: center !important
    }

    .justify-content-xxl-between {
        -webkit-box-pack: justify !important;
        -ms-flex-pack: justify !important;
        justify-content: space-between !important
    }

    .justify-content-xxl-around {
        -ms-flex-pack: distribute !important;
        justify-content: space-around !important
    }

    .justify-content-xxl-evenly {
        -webkit-box-pack: space-evenly !important;
        -ms-flex-pack: space-evenly !important;
        justify-content: space-evenly !important
    }

    .align-items-xxl-start {
        -webkit-box-align: start !important;
        -ms-flex-align: start !important;
        align-items: flex-start !important
    }

    .align-items-xxl-end {
        -webkit-box-align: end !important;
        -ms-flex-align: end !important;
        align-items: flex-end !important
    }

    .align-items-xxl-center {
        -webkit-box-align: center !important;
        -ms-flex-align: center !important;
        align-items: center !important
    }

    .align-items-xxl-baseline {
        -webkit-box-align: baseline !important;
        -ms-flex-align: baseline !important;
        align-items: baseline !important
    }

    .align-items-xxl-stretch {
        -webkit-box-align: stretch !important;
        -ms-flex-align: stretch !important;
        align-items: stretch !important
    }

    .align-content-xxl-start {
        -ms-flex-line-pack: start !important;
        align-content: flex-start !important
    }

    .align-content-xxl-end {
        -ms-flex-line-pack: end !important;
        align-content: flex-end !important
    }

    .align-content-xxl-center {
        -ms-flex-line-pack: center !important;
        align-content: center !important
    }

    .align-content-xxl-between {
        -ms-flex-line-pack: justify !important;
        align-content: space-between !important
    }

    .align-content-xxl-around {
        -ms-flex-line-pack: distribute !important;
        align-content: space-around !important
    }

    .align-content-xxl-stretch {
        -ms-flex-line-pack: stretch !important;
        align-content: stretch !important
    }

    .align-self-xxl-auto {
        -ms-flex-item-align: auto !important;
        align-self: auto !important
    }

    .align-self-xxl-start {
        -ms-flex-item-align: start !important;
        align-self: flex-start !important
    }

    .align-self-xxl-end {
        -ms-flex-item-align: end !important;
        align-self: flex-end !important
    }

    .align-self-xxl-center {
        -ms-flex-item-align: center !important;
        align-self: center !important
    }

    .align-self-xxl-baseline {
        -ms-flex-item-align: baseline !important;
        align-self: baseline !important
    }

    .align-self-xxl-stretch {
        -ms-flex-item-align: stretch !important;
        align-self: stretch !important
    }

    .order-xxl-first {
        -webkit-box-ordinal-group: 0 !important;
        -ms-flex-order: -1 !important;
        order: -1 !important
    }

    .order-xxl-0 {
        -webkit-box-ordinal-group: 1 !important;
        -ms-flex-order: 0 !important;
        order: 0 !important
    }

    .order-xxl-1 {
        -webkit-box-ordinal-group: 2 !important;
        -ms-flex-order: 1 !important;
        order: 1 !important
    }

    .order-xxl-2 {
        -webkit-box-ordinal-group: 3 !important;
        -ms-flex-order: 2 !important;
        order: 2 !important
    }

    .order-xxl-3 {
        -webkit-box-ordinal-group: 4 !important;
        -ms-flex-order: 3 !important;
        order: 3 !important
    }

    .order-xxl-4 {
        -webkit-box-ordinal-group: 5 !important;
        -ms-flex-order: 4 !important;
        order: 4 !important
    }

    .order-xxl-5 {
        -webkit-box-ordinal-group: 6 !important;
        -ms-flex-order: 5 !important;
        order: 5 !important
    }

    .order-xxl-last {
        -webkit-box-ordinal-group: 7 !important;
        -ms-flex-order: 6 !important;
        order: 6 !important
    }

    .m-xxl-0 {
        margin: 0 !important
    }

    .m-xxl-1 {
        margin: .3125rem !important
    }

    .m-xxl-2 {
        margin: .625rem !important
    }

    .m-xxl-3 {
        margin: 1.25rem !important
    }

    .m-xxl-4 {
        margin: 1.875rem !important
    }

    .m-xxl-5 {
        margin: 3.75rem !important
    }

    .m-xxl-auto {
        margin: auto !important
    }

    .mx-xxl-0 {
        margin-left: 0 !important;
        margin-right: 0 !important
    }

    .mx-xxl-1 {
        margin-left: .3125rem !important;
        margin-right: .3125rem !important
    }

    .mx-xxl-2 {
        margin-left: .625rem !important;
        margin-right: .625rem !important
    }

    .mx-xxl-3 {
        margin-left: 1.25rem !important;
        margin-right: 1.25rem !important
    }

    .mx-xxl-4 {
        margin-left: 1.875rem !important;
        margin-right: 1.875rem !important
    }

    .mx-xxl-5 {
        margin-left: 3.75rem !important;
        margin-right: 3.75rem !important
    }

    .mx-xxl-auto {
        margin-left: auto !important;
        margin-right: auto !important
    }

    .my-xxl-0 {
        margin-top: 0 !important;
        margin-bottom: 0 !important
    }

    .my-xxl-1 {
        margin-top: .3125rem !important;
        margin-bottom: .3125rem !important
    }

    .my-xxl-2 {
        margin-top: .625rem !important;
        margin-bottom: .625rem !important
    }

    .my-xxl-3 {
        margin-top: 1.25rem !important;
        margin-bottom: 1.25rem !important
    }

    .my-xxl-4 {
        margin-top: 1.875rem !important;
        margin-bottom: 1.875rem !important
    }

    .my-xxl-5 {
        margin-top: 3.75rem !important;
        margin-bottom: 3.75rem !important
    }

    .my-xxl-auto {
        margin-top: auto !important;
        margin-bottom: auto !important
    }

    .mt-xxl-0 {
        margin-top: 0 !important
    }

    .mt-xxl-1 {
        margin-top: .3125rem !important
    }

    .mt-xxl-2 {
        margin-top: .625rem !important
    }

    .mt-xxl-3 {
        margin-top: 1.25rem !important
    }

    .mt-xxl-4 {
        margin-top: 1.875rem !important
    }

    .mt-xxl-5 {
        margin-top: 3.75rem !important
    }

    .mt-xxl-auto {
        margin-top: auto !important
    }

    .me-xxl-0 {
        margin-left: 0 !important
    }

    .me-xxl-1 {
        margin-left: .3125rem !important
    }

    .me-xxl-2 {
        margin-left: .625rem !important
    }

    .me-xxl-3 {
        margin-left: 1.25rem !important
    }

    .me-xxl-4 {
        margin-left: 1.875rem !important
    }

    .me-xxl-5 {
        margin-left: 3.75rem !important
    }

    .me-xxl-auto {
        margin-left: auto !important
    }

    .mb-xxl-0 {
        margin-bottom: 0 !important
    }

    .mb-xxl-1 {
        margin-bottom: .3125rem !important
    }

    .mb-xxl-2 {
        margin-bottom: .625rem !important
    }

    .mb-xxl-3 {
        margin-bottom: 1.25rem !important
    }

    .mb-xxl-4 {
        margin-bottom: 1.875rem !important
    }

    .mb-xxl-5 {
        margin-bottom: 3.75rem !important
    }

    .mb-xxl-auto {
        margin-bottom: auto !important
    }

    .ms-xxl-0 {
        margin-right: 0 !important
    }

    .ms-xxl-1 {
        margin-right: .3125rem !important
    }

    .ms-xxl-2 {
        margin-right: .625rem !important
    }

    .ms-xxl-3 {
        margin-right: 1.25rem !important
    }

    .ms-xxl-4 {
        margin-right: 1.875rem !important
    }

    .ms-xxl-5 {
        margin-right: 3.75rem !important
    }

    .ms-xxl-auto {
        margin-right: auto !important
    }

    .m-xxl-n1 {
        margin: -.3125rem !important
    }

    .m-xxl-n2 {
        margin: -.625rem !important
    }

    .m-xxl-n3 {
        margin: -1.25rem !important
    }

    .m-xxl-n4 {
        margin: -1.875rem !important
    }

    .m-xxl-n5 {
        margin: -3.75rem !important
    }

    .mx-xxl-n1 {
        margin-left: -.3125rem !important;
        margin-right: -.3125rem !important
    }

    .mx-xxl-n2 {
        margin-left: -.625rem !important;
        margin-right: -.625rem !important
    }

    .mx-xxl-n3 {
        margin-left: -1.25rem !important;
        margin-right: -1.25rem !important
    }

    .mx-xxl-n4 {
        margin-left: -1.875rem !important;
        margin-right: -1.875rem !important
    }

    .mx-xxl-n5 {
        margin-left: -3.75rem !important;
        margin-right: -3.75rem !important
    }

    .my-xxl-n1 {
        margin-top: -.3125rem !important;
        margin-bottom: -.3125rem !important
    }

    .my-xxl-n2 {
        margin-top: -.625rem !important;
        margin-bottom: -.625rem !important
    }

    .my-xxl-n3 {
        margin-top: -1.25rem !important;
        margin-bottom: -1.25rem !important
    }

    .my-xxl-n4 {
        margin-top: -1.875rem !important;
        margin-bottom: -1.875rem !important
    }

    .my-xxl-n5 {
        margin-top: -3.75rem !important;
        margin-bottom: -3.75rem !important
    }

    .mt-xxl-n1 {
        margin-top: -.3125rem !important
    }

    .mt-xxl-n2 {
        margin-top: -.625rem !important
    }

    .mt-xxl-n3 {
        margin-top: -1.25rem !important
    }

    .mt-xxl-n4 {
        margin-top: -1.875rem !important
    }

    .mt-xxl-n5 {
        margin-top: -3.75rem !important
    }

    .me-xxl-n1 {
        margin-left: -.3125rem !important
    }

    .me-xxl-n2 {
        margin-left: -.625rem !important
    }

    .me-xxl-n3 {
        margin-left: -1.25rem !important
    }

    .me-xxl-n4 {
        margin-left: -1.875rem !important
    }

    .me-xxl-n5 {
        margin-left: -3.75rem !important
    }

    .mb-xxl-n1 {
        margin-bottom: -.3125rem !important
    }

    .mb-xxl-n2 {
        margin-bottom: -.625rem !important
    }

    .mb-xxl-n3 {
        margin-bottom: -1.25rem !important
    }

    .mb-xxl-n4 {
        margin-bottom: -1.875rem !important
    }

    .mb-xxl-n5 {
        margin-bottom: -3.75rem !important
    }

    .ms-xxl-n1 {
        margin-right: -.3125rem !important
    }

    .ms-xxl-n2 {
        margin-right: -.625rem !important
    }

    .ms-xxl-n3 {
        margin-right: -1.25rem !important
    }

    .ms-xxl-n4 {
        margin-right: -1.875rem !important
    }

    .ms-xxl-n5 {
        margin-right: -3.75rem !important
    }

    .p-xxl-0 {
        padding: 0 !important
    }

    .p-xxl-1 {
        padding: .3125rem !important
    }

    .p-xxl-2 {
        padding: .625rem !important
    }

    .p-xxl-3 {
        padding: 1.25rem !important
    }

    .p-xxl-4 {
        padding: 1.875rem !important
    }

    .p-xxl-5 {
        padding: 3.75rem !important
    }

    .px-xxl-0 {
        padding-left: 0 !important;
        padding-right: 0 !important
    }

    .px-xxl-1 {
        padding-left: .3125rem !important;
        padding-right: .3125rem !important
    }

    .px-xxl-2 {
        padding-left: .625rem !important;
        padding-right: .625rem !important
    }

    .px-xxl-3 {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important
    }

    .px-xxl-4 {
        padding-left: 1.875rem !important;
        padding-right: 1.875rem !important
    }

    .px-xxl-5 {
        padding-left: 3.75rem !important;
        padding-right: 3.75rem !important
    }

    .py-xxl-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important
    }

    .py-xxl-1 {
        padding-top: .3125rem !important;
        padding-bottom: .3125rem !important
    }

    .py-xxl-2 {
        padding-top: .625rem !important;
        padding-bottom: .625rem !important
    }

    .py-xxl-3 {
        padding-top: 1.25rem !important;
        padding-bottom: 1.25rem !important
    }

    .py-xxl-4 {
        padding-top: 1.875rem !important;
        padding-bottom: 1.875rem !important
    }

    .py-xxl-5 {
        padding-top: 3.75rem !important;
        padding-bottom: 3.75rem !important
    }

    .pt-xxl-0 {
        padding-top: 0 !important
    }

    .pt-xxl-1 {
        padding-top: .3125rem !important
    }

    .pt-xxl-2 {
        padding-top: .625rem !important
    }

    .pt-xxl-3 {
        padding-top: 1.25rem !important
    }

    .pt-xxl-4 {
        padding-top: 1.875rem !important
    }

    .pt-xxl-5 {
        padding-top: 3.75rem !important
    }

    .pe-xxl-0 {
        padding-left: 0 !important
    }

    .pe-xxl-1 {
        padding-left: .3125rem !important
    }

    .pe-xxl-2 {
        padding-left: .625rem !important
    }

    .pe-xxl-3 {
        padding-left: 1.25rem !important
    }

    .pe-xxl-4 {
        padding-left: 1.875rem !important
    }

    .pe-xxl-5 {
        padding-left: 3.75rem !important
    }

    .pb-xxl-0 {
        padding-bottom: 0 !important
    }

    .pb-xxl-1 {
        padding-bottom: .3125rem !important
    }

    .pb-xxl-2 {
        padding-bottom: .625rem !important
    }

    .pb-xxl-3 {
        padding-bottom: 1.25rem !important
    }

    .pb-xxl-4 {
        padding-bottom: 1.875rem !important
    }

    .pb-xxl-5 {
        padding-bottom: 3.75rem !important
    }

    .ps-xxl-0 {
        padding-right: 0 !important
    }

    .ps-xxl-1 {
        padding-right: .3125rem !important
    }

    .ps-xxl-2 {
        padding-right: .625rem !important
    }

    .ps-xxl-3 {
        padding-right: 1.25rem !important
    }

    .ps-xxl-4 {
        padding-right: 1.875rem !important
    }

    .ps-xxl-5 {
        padding-right: 3.75rem !important
    }

    .gap-xxl-0 {
        gap: 0 !important
    }

    .gap-xxl-1 {
        gap: .3125rem !important
    }

    .gap-xxl-2 {
        gap: .625rem !important
    }

    .gap-xxl-3 {
        gap: 1.25rem !important
    }

    .gap-xxl-4 {
        gap: 1.875rem !important
    }

    .gap-xxl-5 {
        gap: 3.75rem !important
    }

    .row-gap-xxl-0 {
        row-gap: 0 !important
    }

    .row-gap-xxl-1 {
        row-gap: .3125rem !important
    }

    .row-gap-xxl-2 {
        row-gap: .625rem !important
    }

    .row-gap-xxl-3 {
        row-gap: 1.25rem !important
    }

    .row-gap-xxl-4 {
        row-gap: 1.875rem !important
    }

    .row-gap-xxl-5 {
        row-gap: 3.75rem !important
    }

    .column-gap-xxl-0 {
        -webkit-column-gap: 0 !important;
        -moz-column-gap: 0 !important;
        column-gap: 0 !important
    }

    .column-gap-xxl-1 {
        -webkit-column-gap: .3125rem !important;
        -moz-column-gap: .3125rem !important;
        column-gap: .3125rem !important
    }

    .column-gap-xxl-2 {
        -webkit-column-gap: .625rem !important;
        -moz-column-gap: .625rem !important;
        column-gap: .625rem !important
    }

    .column-gap-xxl-3 {
        -webkit-column-gap: 1.25rem !important;
        -moz-column-gap: 1.25rem !important;
        column-gap: 1.25rem !important
    }

    .column-gap-xxl-4 {
        -webkit-column-gap: 1.875rem !important;
        -moz-column-gap: 1.875rem !important;
        column-gap: 1.875rem !important
    }

    .column-gap-xxl-5 {
        -webkit-column-gap: 3.75rem !important;
        -moz-column-gap: 3.75rem !important;
        column-gap: 3.75rem !important
    }

    .text-xxl-start {
        text-align: right !important
    }

    .text-xxl-end {
        text-align: left !important
    }

    .text-xxl-center {
        text-align: center !important
    }
}

@media (min-width:1200px) {
    .fs-1 {
        font-size: 2.0325rem !important
    }

    .fs-2 {
        font-size: 1.69104rem !important
    }

    .fs-3 {
        font-size: 1.393713705rem !important
    }
}

@media print {
    .d-print-inline {
        display: inline !important
    }

    .d-print-inline-block {
        display: inline-block !important
    }

    .d-print-block {
        display: block !important
    }

    .d-print-grid {
        display: grid !important
    }

    .d-print-inline-grid {
        display: inline-grid !important
    }

    .d-print-table {
        display: table !important
    }

    .d-print-table-row {
        display: table-row !important
    }

    .d-print-table-cell {
        display: table-cell !important
    }

    .d-print-flex {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important
    }

    .d-print-inline-flex {
        display: -webkit-inline-box !important;
        display: -ms-inline-flexbox !important;
        display: inline-flex !important
    }

    .d-print-none {
        display: none !important
    }
}

:root {
    --ins-logo-lg-height: 60px;
    --ins-logo-sm-height: 26px;
    --ins-sidenav-width: 235px;
    --ins-sidenav-width-md: 160px;
    --ins-sidenav-width-sm: 75px;
    --ins-topbar-height: 65px;
    --ins-sidenav-item-icon-size: 1.125rem;
    --ins-sidenav-item-gap: 12px;
    --ins-sidenav-item-padding-x: 10px;
    --ins-sidenav-item-padding-y: 10px;
    --ins-sidenav-item-font-size: 0.875rem;
    --ins-sidenav-item-font-weight: 500;
    --ins-sidenav-sub-item-font-size: 0.825rem;
    --ins-sidenav-sub-item-font-weight: 500;
    --ins-sidenav-sub-item-gap: 4px;
    --ins-sidenav-sub-item-padding-x: 10px;
    --ins-sidenav-sub-item-padding-y: 7px;
    --ins-theme-card-border-width: 1px;
    --ins-theme-card-box-shadow: none;
    --ins-theme-card-border-color: var(--ins-border-color);
    --ins-font-weight-medium: 500;
    --ins-font-weight-semibold: 600;
    --ins-font-weight-bold: 700;
    --ins-font-size-xxs: 11px;
    --ins-font-size-xs: 12px;
    --ins-font-size-base: 16px;
    --ins-font-size-sm: 14px;
    --ins-font-size-md: 15px;
    --ins-font-size-lg: 16px;
    --ins-font-size-xl: 18px;
    --ins-font-size-xxl: 20px
}

html[data-menu-color=light] {
    --ins-sidenav-bg: #fff;
    --ins-sidenav-border-color: #e7e9eb;
    --ins-sidenav-item-color: #ffffff;
    --ins-sidenav-item-hover-color: #1ab394;
    --ins-sidenav-item-hover-bg: #e8f7f4;
    --ins-sidenav-item-active-color: #1ab394;
    --ins-sidenav-item-active-bg: #e8f7f4
}

html[data-menu-color=dark] {
    --ins-sidenav-bg: linear-gradient(to bottom, #752c6a, #262549);
    --ins-sidenav-item-color: rgba(255, 255, 255, 0.7);
    --ins-sidenav-item-hover-color: #ffffff;
    --ins-sidenav-search-bg: rgba(255, 255, 255, 0.1);
    --ins-sidenav-search-border: rgba(255, 255, 255, 0.1)
}

html[data-menu-color=gray] {
    --ins-sidenav-bg: #f1f2f7;
    --ins-sidenav-border-color: #e7e9eb;
    --ins-sidenav-item-color: #6c757d;
    --ins-sidenav-item-hover-color: #1ab394;
    --ins-sidenav-item-hover-bg: #e8f7f4;
    --ins-sidenav-item-active-color: #212b29;
    --ins-sidenav-item-active-bg: #e8e8ed
}

html[data-menu-color=gradient] {
    --ins-sidenav-bg: linear-gradient(135deg, #1a455f, #262549);
    --ins-sidenav-border-color: null;
    --ins-sidenav-item-color: #799cb7;
    --ins-sidenav-item-hover-color: #bccee4;
    --ins-sidenav-item-hover-bg: #2f3742;
    --ins-sidenav-item-active-color: #cfdff1;
    --ins-sidenav-item-active-bg: #294461
}

html[data-menu-color=image] {
    --ins-sidenav-bg: linear-gradient(to bottom right, rgba(16, 16, 30, 0.85), #183c52), url("../images/sidenav-bg.jpg") center/cover no-repeat;
    --ins-sidenav-border-color: null;
    --ins-sidenav-item-color: #799cb7;
    --ins-sidenav-item-hover-color: #bccee4;
    --ins-sidenav-item-hover-bg: #2f3742;
    --ins-sidenav-item-active-color: #cfdff1;
    --ins-sidenav-item-active-bg: #1e3447
}

html[data-bs-theme=dark][data-menu-color=dark],
html[data-bs-theme=dark][data-menu-color=gray],
html[data-bs-theme=dark][data-menu-color=light] {
    --ins-sidenav-bg: #1e1f27;
    --ins-sidenav-border-color: #2c2d38;
    --ins-sidenav-item-color: #8495ab;
    --ins-sidenav-item-hover-color: #bccee4;
    --ins-sidenav-item-hover-bg: #2f3742;
    --ins-sidenav-item-active-color: #ced6df;
    --ins-sidenav-item-active-bg: #22232c
}

html[data-topbar-color=light] {
    --ins-topbar-bg: #ffffff;
    --ins-topbar-item-color: #6c757d;
    --ins-topbar-item-hover-color: #1ab394;
    --ins-topbar-search-bg: transparent;
    --ins-topbar-search-border: #e7e9eb
}

html[data-topbar-color=gray] {
    --ins-topbar-bg: #f1f2f7;
    --ins-topbar-item-color: #6c757d;
    --ins-topbar-item-hover-color: #1ab394;
    --ins-topbar-search-bg: #e8e9ef;
    --ins-topbar-search-border: #e8e9ef
}

html[data-topbar-color=dark] {
    --ins-topbar-bg: #252630;
    --ins-topbar-item-color: #adb5bf;
    --ins-topbar-item-hover-color: #e0eeff;
    --ins-topbar-search-bg: #2d2e3c;
    --ins-topbar-search-border: #2d2e3c
}

html[data-topbar-color=gradient] {
    --ins-topbar-bg: linear-gradient(to bottom, #1a455f, #262549);
    --ins-topbar-item-color: rgba(255, 255, 255, 0.7);
    --ins-topbar-item-hover-color: #ffffff;
    --ins-topbar-search-bg: rgba(255, 255, 255, 0.1);
    --ins-topbar-search-border: rgba(255, 255, 255, 0.1)
}

html[data-bs-theme=dark][data-topbar-color=dark],
html[data-bs-theme=dark][data-topbar-color=gray],
html[data-bs-theme=dark][data-topbar-color=light] {
    --ins-topbar-bg: #252630;
    --ins-topbar-item-color: #adb5bf;
    --ins-topbar-item-hover-color: #e0eeff;
    --ins-topbar-search-bg: #2d2e3c;
    --ins-topbar-search-border: #2d2e3c
}

[data-bs-theme=dark] {
    --ins-light: #252630;
    --ins-light-rgb: 37, 38, 48;
    --ins-dark: #4b4d5c;
    --ins-dark-rgb: 75, 77, 92;
    --ins-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3)
}

html[data-skin=saas] {
    --ins-font-sans-serif: "Inter", sans-serif;
    --ins-body-font-size: 13px;
    --ins-body-bg: #f9fbfd;
    --ins-secondary-bg: #fff;
    --ins-theme-card-border-width: 1px;
    --ins-theme-card-box-shadow: 0 0.5rem 1.5rem rgba(18, 38, 36, 0.03);
    --ins-box-shadow: 0 0.25rem 1rem rgba(18, 38, 36, 0.1);
    --ins-border-color: #edf2f9;
    --ins-font-weight-medium: 500;
    --ins-font-weight-semibold: 600;
    --ins-font-weight-bold: 600;
    --ins-font-size-xxs: 11px;
    --ins-font-size-xs: 12px;
    --ins-font-size-base: 13px;
    --ins-font-size-md: 14px;
    --ins-font-size-lg: 16px;
    --ins-font-size-xl: 18px;
    --ins-font-size-xxl: 20px;
    --ins-sidenav-item-icon-size: 1.125rem;
    --ins-sidenav-item-gap: 12px;
    --ins-sidenav-item-padding-x: 10px;
    --ins-sidenav-item-padding-y: 10px;
    --ins-sidenav-item-font-size: 0.825rem;
    --ins-sidenav-item-font-weight: 400;
    --ins-sidenav-sub-item-font-size: 0.825rem;
    --ins-sidenav-sub-item-font-weight: 400;
    --ins-sidenav-sub-item-gap: 4px;
    --ins-sidenav-sub-item-padding-x: 10px;
    --ins-sidenav-sub-item-padding-y: 7px;
    --ins-primary: #7754f6;
    --ins-secondary: #0070ff;
    --ins-success: #7dd420;
    --ins-info: #13a4ee;
    --ins-warning: #ff8600;
    --ins-danger: #f5315d;
    --ins-purple: #8768cd;
    --ins-primary-rgb: 119, 84, 246;
    --ins-secondary-rgb: 0, 112, 255;
    --ins-success-rgb: 125, 212, 32;
    --ins-info-rgb: 19, 164, 238;
    --ins-warning-rgb: 255, 134, 0;
    --ins-danger-rgb: 245, 49, 93;
    --ins-purple-rgb: 135, 104, 205;
    --ins-primary-bg-subtle: rgba(119, 84, 246, 0.15);
    --ins-secondary-bg-subtle: rgba(0, 112, 255, 0.15);
    --ins-success-bg-subtle: rgba(125, 212, 32, 0.15);
    --ins-info-bg-subtle: rgba(19, 164, 238, 0.15);
    --ins-warning-bg-subtle: rgba(255, 134, 0, 0.15);
    --ins-danger-bg-subtle: rgba(245, 49, 93, 0.15);
    --ins-purple-bg-subtle: rgba(135, 104, 205, 0.15);
    --ins-primary-border-subtle: rgba(119, 84, 246, 0.3);
    --ins-secondary-border-subtle: rgba(0, 112, 255, 0.3);
    --ins-success-border-subtle: rgba(125, 212, 32, 0.3);
    --ins-info-border-subtle: rgba(19, 164, 238, 0.3);
    --ins-warning-border-subtle: rgba(255, 134, 0, 0.3);
    --ins-danger-border-subtle: rgba(245, 49, 93, 0.3);
    --ins-purple-border-subtle: rgba(135, 104, 205, 0.3);
    --ins-primary-text-emphasis: #593fb9;
    --ins-secondary-text-emphasis: #0054bf;
    --ins-success-text-emphasis: #5e9f18;
    --ins-info-text-emphasis: #0e7bb3;
    --ins-warning-text-emphasis: #bf6500;
    --ins-danger-text-emphasis: #b82546;
    --ins-purple-text-emphasis: #654e9a
}

html[data-skin=saas][data-menu-color=light] {
    --ins-sidenav-bg: #fff;
    --ins-sidenav-border-color: #fff;
    --ins-sidenav-item-color: #6c757d;
    --ins-sidenav-item-hover-color: #7754f6;
    --ins-sidenav-item-hover-bg: #f4f0ff;
    --ins-sidenav-item-active-color: #7754f6;
    --ins-sidenav-item-active-bg: #f4f0ff
}

html[data-skin=saas][data-menu-color=gray] {
    --ins-sidenav-bg: #f1f2f7;
    --ins-sidenav-border-color: #e7e9eb;
    --ins-sidenav-item-color: #6c757d;
    --ins-sidenav-item-hover-color: #7754f6;
    --ins-sidenav-item-hover-bg: #f4f0ff;
    --ins-sidenav-item-active-color: #212b29;
    --ins-sidenav-item-active-bg: #e8e8ed
}

html[data-skin=saas][data-menu-color=dark] {
    --ins-sidenav-bg: #1b2e4a;
    --ins-sidenav-border-color: #1b2e4a;
    --ins-sidenav-item-color: #8495ab;
    --ins-sidenav-item-hover-color: #bccee4;
    --ins-sidenav-item-hover-bg: #2f3742;
    --ins-sidenav-item-active-color: #ced6df;
    --ins-sidenav-item-active-bg: #243754
}

html[data-skin=saas][data-menu-color=gradient] {
    --ins-sidenav-bg: linear-gradient(135deg, #1a455f, #262549);
    --ins-sidenav-border-color: null;
    --ins-sidenav-item-color: #799cb7;
    --ins-sidenav-item-hover-color: #bccee4;
    --ins-sidenav-item-hover-bg: #2f3742;
    --ins-sidenav-item-active-color: #cfdff1;
    --ins-sidenav-item-active-bg: #294461
}

html[data-skin=saas][data-menu-color=image] {
    --ins-sidenav-bg: linear-gradient(to bottom right, rgba(16, 16, 30, 0.85), #183c52), url("../images/sidenav-bg.jpg") center/cover no-repeat;
    --ins-sidenav-border-color: null;
    --ins-sidenav-item-color: #799cb7;
    --ins-sidenav-item-hover-color: #bccee4;
    --ins-sidenav-item-hover-bg: #2f3742;
    --ins-sidenav-item-active-color: #cfdff1;
    --ins-sidenav-item-active-bg: #1e3447
}

html[data-skin=saas][data-bs-theme=dark][data-menu-color=dark],
html[data-skin=saas][data-bs-theme=dark][data-menu-color=light] {
    --ins-sidenav-bg: #1e1f27;
    --ins-sidenav-border-color: #2c2d38;
    --ins-sidenav-item-color: #8495ab;
    --ins-sidenav-item-hover-color: #bccee4;
    --ins-sidenav-item-hover-bg: #2f3742;
    --ins-sidenav-item-active-color: #ced6df;
    --ins-sidenav-item-active-bg: #22232c
}

html[data-skin=saas][data-topbar-color=light] {
    --ins-topbar-bg: #ffffff;
    --ins-topbar-item-color: #6c757d;
    --ins-topbar-item-hover-color: #7754f6;
    --ins-topbar-search-bg: transparent;
    --ins-topbar-search-border: #e7e9eb
}

html[data-skin=saas][data-topbar-color=gray] {
    --ins-topbar-bg: #f1f2f7;
    --ins-topbar-item-color: #6c757d;
    --ins-topbar-item-hover-color: #7754f6;
    --ins-topbar-search-bg: #e8e9ef;
    --ins-topbar-search-border: #e8e9ef
}

html[data-skin=saas][data-topbar-color=dark] {
    --ins-topbar-bg: #1b2e4a;
    --ins-topbar-item-color: #adb5bf;
    --ins-topbar-item-hover-color: #e0eeff;
    --ins-topbar-search-bg: #32435c;
    --ins-topbar-search-border: #32435c
}

html[data-skin=saas][data-topbar-color=gradient] {
    --ins-topbar-bg: linear-gradient(to bottom, #1a455f, #262549);
    --ins-topbar-item-color: rgba(255, 255, 255, 0.7);
    --ins-topbar-item-hover-color: #ffffff;
    --ins-topbar-search-bg: rgba(255, 255, 255, 0.1);
    --ins-topbar-search-border: rgba(255, 255, 255, 0.1)
}

html[data-skin=saas][data-bs-theme=dark][data-topbar-color=dark],
html[data-skin=saas][data-bs-theme=dark][data-topbar-color=gray],
html[data-skin=saas][data-bs-theme=dark][data-topbar-color=light] {
    --ins-topbar-bg: #252630;
    --ins-topbar-item-color: #adb5bf;
    --ins-topbar-item-hover-color: #e0eeff;
    --ins-topbar-search-bg: #2d2e3c;
    --ins-topbar-search-border: #2d2e3c
}

[data-bs-theme=dark][data-skin=saas] {
    --ins-body-bg: #17181e;
    --ins-body-bg-rgb: 23, 24, 30;
    --ins-secondary-bg: #1b1c22;
    --ins-secondary-bg-rgb: 27, 28, 34;
    --ins-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3);
    --ins-border-color: #293036
}

html[data-skin=modern] {
    --ins-font-sans-serif: "Poppins", sans-serif;
    --ins-body-font-size: 13px;
    --ins-body-bg: #f7f6f7;
    --ins-secondary-bg: #fff;
    --ins-theme-card-border-width: 1px;
    --ins-theme-card-border-color: transparent;
    --ins-theme-card-box-shadow: 0 1px 2px rgba(57, 62, 80, 0.15);
    --ins-box-shadow: 0 2px 4px rgba(56, 65, 74, 0.2);
    --ins-border-radius: 4px;
    --ins-font-weight-medium: 500;
    --ins-font-weight-semibold: 500;
    --ins-font-weight-bold: 600;
    --ins-font-size-xxs: 11px;
    --ins-font-size-xs: 12px;
    --ins-font-size-base: 13px;
    --ins-font-size-md: 14px;
    --ins-font-size-lg: 16px;
    --ins-font-size-xl: 18px;
    --ins-font-size-xxl: 20px;
    --ins-sidenav-item-icon-size: 1.125rem;
    --ins-sidenav-item-gap: 12px;
    --ins-sidenav-item-padding-x: 10px;
    --ins-sidenav-item-padding-y: 10px;
    --ins-sidenav-item-font-size: 0.8125rem;
    --ins-sidenav-item-font-weight: 500;
    --ins-sidenav-sub-item-font-size: 0.8125rem;
    --ins-sidenav-sub-item-font-weight: 500;
    --ins-sidenav-sub-item-gap: 4px;
    --ins-sidenav-sub-item-padding-x: 10px;
    --ins-sidenav-sub-item-padding-y: 7px;
    --ins-primary: #5e6cc1;
    --ins-secondary: #1c8de3;
    --ins-success: #13ca6d;
    --ins-info: #35b9e1;
    --ins-warning: #f2c24c;
    --ins-danger: #fb5858;
    --ins-purple: #6070cc;
    --ins-primary-rgb: 94, 108, 193;
    --ins-secondary-rgb: 28, 141, 227;
    --ins-success-rgb: 19, 202, 109;
    --ins-info-rgb: 53, 185, 225;
    --ins-warning-rgb: 242, 194, 76;
    --ins-danger-rgb: 251, 88, 88;
    --ins-purple-rgb: 96, 112, 204;
    --ins-primary-bg-subtle: rgba(94, 108, 193, 0.15);
    --ins-secondary-bg-subtle: rgba(28, 141, 227, 0.15);
    --ins-success-bg-subtle: rgba(19, 202, 109, 0.15);
    --ins-info-bg-subtle: rgba(53, 185, 225, 0.15);
    --ins-warning-bg-subtle: rgba(242, 194, 76, 0.15);
    --ins-danger-bg-subtle: rgba(251, 88, 88, 0.15);
    --ins-purple-bg-subtle: rgba(96, 112, 204, 0.15);
    --ins-primary-border-subtle: rgba(94, 108, 193, 0.3);
    --ins-secondary-border-subtle: rgba(28, 141, 227, 0.3);
    --ins-success-border-subtle: rgba(19, 202, 109, 0.3);
    --ins-info-border-subtle: rgba(53, 185, 225, 0.3);
    --ins-warning-border-subtle: rgba(242, 194, 76, 0.3);
    --ins-danger-border-subtle: rgba(251, 88, 88, 0.3);
    --ins-purple-border-subtle: rgba(96, 112, 204, 0.3);
    --ins-primary-text-emphasis: #475191;
    --ins-secondary-text-emphasis: #156aaa;
    --ins-success-text-emphasis: #0e9852;
    --ins-info-text-emphasis: #288ba9;
    --ins-warning-text-emphasis: #b69239;
    --ins-danger-text-emphasis: #bc4242;
    --ins-purple-text-emphasis: #485499
}

html[data-skin=modern][data-menu-color=light] {
    --ins-sidenav-bg: #fff;
    --ins-sidenav-border-color: #fff;
    --ins-sidenav-item-color: #6c757d;
    --ins-sidenav-item-hover-color: #3c7de1;
    --ins-sidenav-item-hover-bg: #eaf2ff;
    --ins-sidenav-item-active-color: #3c7de1;
    --ins-sidenav-item-active-bg: #eaf2ff
}

html[data-skin=modern][data-menu-color=gray] {
    --ins-sidenav-bg: #f1f2f7;
    --ins-sidenav-border-color: #e7e9eb;
    --ins-sidenav-item-color: #6c757d;
    --ins-sidenav-item-hover-color: #3c7de1;
    --ins-sidenav-item-hover-bg: #e8f7f4;
    --ins-sidenav-item-active-color: #212b29;
    --ins-sidenav-item-active-bg: #e8e8ed
}

html[data-skin=modern][data-menu-color=dark] {
    --ins-sidenav-bg: #23303c;
    --ins-sidenav-border-color: #23303c;
    --ins-sidenav-item-color: #8495ab;
    --ins-sidenav-item-hover-color: #bccee4;
    --ins-sidenav-item-hover-bg: #2f3742;
    --ins-sidenav-item-active-color: #ced6df;
    --ins-sidenav-item-active-bg: #1c262f
}

html[data-skin=modern][data-menu-color=gradient] {
    --ins-sidenav-bg: linear-gradient(135deg, #1a455f, #262549);
    --ins-sidenav-border-color: null;
    --ins-sidenav-item-color: #799cb7;
    --ins-sidenav-item-hover-color: #bccee4;
    --ins-sidenav-item-hover-bg: #2f3742;
    --ins-sidenav-item-active-color: #cfdff1;
    --ins-sidenav-item-active-bg: #294461
}

html[data-skin=modern][data-menu-color=image] {
    --ins-sidenav-bg: linear-gradient(to bottom right, rgba(16, 16, 30, 0.85), #183c52), url("../images/sidenav-bg.jpg") center/cover no-repeat;
    --ins-sidenav-border-color: null;
    --ins-sidenav-item-color: #799cb7;
    --ins-sidenav-item-hover-color: #bccee4;
    --ins-sidenav-item-hover-bg: #2f3742;
    --ins-sidenav-item-active-color: #cfdff1;
    --ins-sidenav-item-active-bg: #1e3447
}

html[data-skin=modern][data-bs-theme=dark][data-menu-color=dark],
html[data-skin=modern][data-bs-theme=dark][data-menu-color=gray],
html[data-skin=modern][data-bs-theme=dark][data-menu-color=light] {
    --ins-sidenav-bg: #1e1f27;
    --ins-sidenav-border-color: #2c2d38;
    --ins-sidenav-item-color: #8495ab;
    --ins-sidenav-item-hover-color: #bccee4;
    --ins-sidenav-item-hover-bg: #2f3742;
    --ins-sidenav-item-active-color: #ced6df;
    --ins-sidenav-item-active-bg: #22232c
}

html[data-skin=modern][data-topbar-color=light] {
    --ins-topbar-bg: #ffffff;
    --ins-topbar-item-color: #6c757d;
    --ins-topbar-item-hover-color: #3c7de1;
    --ins-topbar-search-bg: transparent;
    --ins-topbar-search-border: #e7e9eb
}

html[data-skin=modern][data-topbar-color=gray] {
    --ins-topbar-bg: #f1f2f7;
    --ins-topbar-item-color: #6c757d;
    --ins-topbar-item-hover-color: #3c7de1;
    --ins-topbar-search-bg: #e8e9ef;
    --ins-topbar-search-border: #e8e9ef
}

html[data-skin=modern][data-topbar-color=dark] {
    --ins-topbar-bg: #252630;
    --ins-topbar-item-color: #adb5bf;
    --ins-topbar-item-hover-color: #e0eeff;
    --ins-topbar-search-bg: #2d2e3c;
    --ins-topbar-search-border: #2d2e3c
}

html[data-skin=modern][data-topbar-color=gradient] {
    --ins-topbar-bg: linear-gradient(to bottom, #1a455f, #262549);
    --ins-topbar-item-color: rgba(255, 255, 255, 0.7);
    --ins-topbar-item-hover-color: #ffffff;
    --ins-topbar-search-bg: rgba(255, 255, 255, 0.1);
    --ins-topbar-search-border: rgba(255, 255, 255, 0.1)
}

html[data-skin=modern][data-bs-theme=dark][data-topbar-color=dark],
html[data-skin=modern][data-bs-theme=dark][data-topbar-color=gray],
html[data-skin=modern][data-bs-theme=dark][data-topbar-color=light] {
    --ins-topbar-bg: #252630;
    --ins-topbar-item-color: #adb5bf;
    --ins-topbar-item-hover-color: #e0eeff;
    --ins-topbar-search-bg: #2d2e3c;
    --ins-topbar-search-border: #2d2e3c
}

[data-bs-theme=dark][data-skin=modern] {
    --ins-body-bg: #17181e;
    --ins-body-bg-rgb: 23, 24, 30;
    --ins-secondary-bg: #1b1c22;
    --ins-secondary-bg-rgb: 27, 28, 34;
    --ins-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3);
    --ins-theme-card-border-color: #293036
}

html[data-skin=material] {
    --ins-font-sans-serif: "Roboto", sans-serif;
    --ins-body-font-size: 14px;
    --ins-body-bg: #f3f3f4;
    --ins-secondary-bg: #fff;
    --ins-theme-card-border-width: 1px;
    --ins-theme-card-border-color: transparent;
    --ins-theme-card-box-shadow: 1px 0.1rem 0.5rem 0 rgba(48, 45, 59, 0.05);
    --ins-box-shadow: 1px 0.1rem 0.5rem 0 rgba(48, 45, 59, 0.15);
    --ins-border-radius: 4px;
    --ins-font-weight-medium: 400;
    --ins-font-weight-semibold: 500;
    --ins-font-weight-bold: 600;
    --ins-font-size-xxs: 11px;
    --ins-font-size-xs: 12px;
    --ins-font-size-base: 13px;
    --ins-font-size-md: 14px;
    --ins-font-size-lg: 16px;
    --ins-font-size-xl: 18px;
    --ins-font-size-xxl: 20px;
    --ins-sidenav-item-icon-size: 1.125rem;
    --ins-sidenav-item-gap: 12px;
    --ins-sidenav-item-padding-x: 10px;
    --ins-sidenav-item-padding-y: 10px;
    --ins-sidenav-item-font-size: 0.875rem;
    --ins-sidenav-item-font-weight: 400;
    --ins-sidenav-sub-item-font-size: 0.8425rem;
    --ins-sidenav-sub-item-font-weight: 400;
    --ins-sidenav-sub-item-gap: 4px;
    --ins-sidenav-sub-item-padding-x: 10px;
    --ins-sidenav-sub-item-padding-y: 7px;
    --ins-primary: #3c7de1;
    --ins-secondary: #926fa7;
    --ins-success: #18bb9b;
    --ins-info: #23c6c8;
    --ins-warning: #f8ac59;
    --ins-danger: #d96262;
    --ins-purple: #8768cd;
    --ins-primary-rgb: 60, 125, 225;
    --ins-secondary-rgb: 146, 111, 167;
    --ins-success-rgb: 24, 187, 155;
    --ins-info-rgb: 35, 198, 200;
    --ins-warning-rgb: 248, 172, 89;
    --ins-danger-rgb: 217, 98, 98;
    --ins-purple-rgb: 135, 104, 205;
    --ins-primary-bg-subtle: rgba(60, 125, 225, 0.15);
    --ins-secondary-bg-subtle: rgba(146, 111, 167, 0.15);
    --ins-success-bg-subtle: rgba(24, 187, 155, 0.15);
    --ins-info-bg-subtle: rgba(35, 198, 200, 0.15);
    --ins-warning-bg-subtle: rgba(248, 172, 89, 0.15);
    --ins-danger-bg-subtle: rgba(217, 98, 98, 0.15);
    --ins-purple-bg-subtle: rgba(135, 104, 205, 0.15);
    --ins-primary-border-subtle: rgba(60, 125, 225, 0.3);
    --ins-secondary-border-subtle: rgba(146, 111, 167, 0.3);
    --ins-success-border-subtle: rgba(24, 187, 155, 0.3);
    --ins-info-border-subtle: rgba(35, 198, 200, 0.3);
    --ins-warning-border-subtle: rgba(248, 172, 89, 0.3);
    --ins-danger-border-subtle: rgba(217, 98, 98, 0.3);
    --ins-purple-border-subtle: rgba(135, 104, 205, 0.3);
    --ins-primary-text-emphasis: #2d5ea9;
    --ins-secondary-text-emphasis: #6e537d;
    --ins-success-text-emphasis: #128c74;
    --ins-info-text-emphasis: #1a9596;
    --ins-warning-text-emphasis: #ba8143;
    --ins-danger-text-emphasis: #a34a4a;
    --ins-purple-text-emphasis: #654e9a
}

html[data-skin=material][data-menu-color=light] {
    --ins-sidenav-bg: #fff;
    --ins-sidenav-border-color: #fff;
    --ins-sidenav-item-color: #6c757d;
    --ins-sidenav-item-hover-color: #3c7de1;
    --ins-sidenav-item-hover-bg: #eaf2ff;
    --ins-sidenav-item-active-color: #3c7de1;
    --ins-sidenav-item-active-bg: #eaf2ff
}

html[data-skin=material][data-menu-color=gray] {
    --ins-sidenav-bg: #f1f2f7;
    --ins-sidenav-border-color: #e7e9eb;
    --ins-sidenav-item-color: #6c757d;
    --ins-sidenav-item-hover-color: #3c7de1;
    --ins-sidenav-item-hover-bg: #e8f7f4;
    --ins-sidenav-item-active-color: #212b29;
    --ins-sidenav-item-active-bg: #e8e8ed
}

html[data-skin=material][data-menu-color=dark] {
    --ins-sidenav-bg: #28293c;
    --ins-sidenav-border-color: #28293c;
    --ins-sidenav-item-color: #8495ab;
    --ins-sidenav-item-hover-color: #bccee4;
    --ins-sidenav-item-hover-bg: #2f3742;
    --ins-sidenav-item-active-color: #ced6df;
    --ins-sidenav-item-active-bg: #242534
}

html[data-skin=material][data-menu-color=gradient] {
    --ins-sidenav-bg: linear-gradient(135deg, #1a455f, #262549);
    --ins-sidenav-border-color: null;
    --ins-sidenav-item-color: #799cb7;
    --ins-sidenav-item-hover-color: #bccee4;
    --ins-sidenav-item-hover-bg: #2f3742;
    --ins-sidenav-item-active-color: #cfdff1;
    --ins-sidenav-item-active-bg: #294461
}

html[data-skin=material][data-menu-color=image] {
    --ins-sidenav-bg: linear-gradient(to bottom right, rgba(16, 16, 30, 0.85), #183c52), url("../images/sidenav-bg.jpg") center/cover no-repeat;
    --ins-sidenav-border-color: null;
    --ins-sidenav-item-color: #799cb7;
    --ins-sidenav-item-hover-color: #bccee4;
    --ins-sidenav-item-hover-bg: #2f3742;
    --ins-sidenav-item-active-color: #cfdff1;
    --ins-sidenav-item-active-bg: #1e3447
}

html[data-skin=material][data-bs-theme=dark][data-menu-color=dark],
html[data-skin=material][data-bs-theme=dark][data-menu-color=gray],
html[data-skin=material][data-bs-theme=dark][data-menu-color=light] {
    --ins-sidenav-bg: #1e1f27;
    --ins-sidenav-border-color: #2c2d38;
    --ins-sidenav-item-color: #8495ab;
    --ins-sidenav-item-hover-color: #bccee4;
    --ins-sidenav-item-hover-bg: #2f3742;
    --ins-sidenav-item-active-color: #ced6df;
    --ins-sidenav-item-active-bg: #22232c
}

html[data-skin=material][data-topbar-color=light] {
    --ins-topbar-bg: #ffffff;
    --ins-topbar-item-color: #6c757d;
    --ins-topbar-item-hover-color: #3c7de1;
    --ins-topbar-search-bg: transparent;
    --ins-topbar-search-border: #e7e9eb
}

html[data-skin=material][data-topbar-color=gray] {
    --ins-topbar-bg: #f1f2f7;
    --ins-topbar-item-color: #6c757d;
    --ins-topbar-item-hover-color: #3c7de1;
    --ins-topbar-search-bg: #e8e9ef;
    --ins-topbar-search-border: #e8e9ef
}

html[data-skin=material][data-topbar-color=dark] {
    --ins-topbar-bg: #3c7de1;
    --ins-topbar-item-color: #e9ecf1;
    --ins-topbar-item-hover-color: #e0eeff;
    --ins-topbar-search-bg: #508ae4;
    --ins-topbar-search-border: #508ae4
}

html[data-skin=material][data-topbar-color=gradient] {
    --ins-topbar-bg: linear-gradient(to bottom, #1a455f, #262549);
    --ins-topbar-item-color: rgba(255, 255, 255, 0.7);
    --ins-topbar-item-hover-color: #ffffff;
    --ins-topbar-search-bg: rgba(255, 255, 255, 0.1);
    --ins-topbar-search-border: rgba(255, 255, 255, 0.1)
}

html[data-skin=material][data-bs-theme=dark][data-topbar-color=dark],
html[data-skin=material][data-bs-theme=dark][data-topbar-color=gray],
html[data-skin=material][data-bs-theme=dark][data-topbar-color=light] {
    --ins-topbar-bg: #252630;
    --ins-topbar-item-color: #adb5bf;
    --ins-topbar-item-hover-color: #e0eeff;
    --ins-topbar-search-bg: #2d2e3c;
    --ins-topbar-search-border: #2d2e3c
}

[data-bs-theme=dark][data-skin=material] {
    --ins-body-bg: #17181e;
    --ins-body-bg-rgb: 23, 24, 30;
    --ins-secondary-bg: #1b1c22;
    --ins-secondary-bg-rgb: 27, 28, 34;
    --ins-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3);
    --ins-theme-card-border-color: #293036
}

html[data-skin=minimal] {
    --ins-font-sans-serif: "IBM Plex Sans", sans-serif;
    --ins-body-font-size: 0.875rem;
    --ins-body-bg: #ffffff;
    --ins-secondary-bg: #ffffff;
    --ins-theme-card-border-width: 1px;
    --ins-border-color: #edf2f9;
    --ins-font-weight-medium: 500;
    --ins-font-weight-semibold: 500;
    --ins-font-weight-bold: 700;
    --ins-font-size-xxs: 12px;
    --ins-font-size-xs: 13px;
    --ins-font-size-base: 0.875rem;
    --ins-font-size-md: 15px;
    --ins-font-size-lg: 16px;
    --ins-font-size-xl: 18px;
    --ins-font-size-xxl: 20px;
    --ins-sidenav-item-icon-size: 1.125rem;
    --ins-sidenav-item-gap: 12px;
    --ins-sidenav-item-padding-x: 10px;
    --ins-sidenav-item-padding-y: 10px;
    --ins-sidenav-item-font-size: 0.875rem;
    --ins-sidenav-item-font-weight: 400;
    --ins-sidenav-sub-item-font-size: 0.875rem;
    --ins-sidenav-sub-item-font-weight: 400;
    --ins-sidenav-sub-item-gap: 4px;
    --ins-sidenav-sub-item-padding-x: 10px;
    --ins-sidenav-sub-item-padding-y: 7px;
    --ins-primary: #1ab394;
    --ins-secondary: #1c84c6;
    --ins-success: #0acf97;
    --ins-info: #23c6c8;
    --ins-warning: #f8ac59;
    --ins-danger: #FF477B;
    --ins-purple: #7b70ef;
    --ins-primary-rgb: 26, 179, 148;
    --ins-secondary-rgb: 28, 132, 198;
    --ins-success-rgb: 10, 207, 151;
    --ins-info-rgb: 35, 198, 200;
    --ins-warning-rgb: 248, 172, 89;
    --ins-danger-rgb: 237, 85, 101;
    --ins-purple-rgb: 123, 112, 239;
    --ins-primary-bg-subtle: rgba(26, 179, 148, 0.15);
    --ins-secondary-bg-subtle: rgba(28, 132, 198, 0.15);
    --ins-success-bg-subtle: rgba(10, 207, 151, 0.15);
    --ins-info-bg-subtle: rgba(35, 198, 200, 0.15);
    --ins-warning-bg-subtle: rgba(248, 172, 89, 0.15);
    --ins-danger-bg-subtle: rgba(237, 85, 101, 0.15);
    --ins-purple-bg-subtle: rgba(123, 112, 239, 0.15);
    --ins-primary-border-subtle: rgba(26, 179, 148, 0.3);
    --ins-secondary-border-subtle: rgba(28, 132, 198, 0.3);
    --ins-success-border-subtle: rgba(10, 207, 151, 0.3);
    --ins-info-border-subtle: rgba(35, 198, 200, 0.3);
    --ins-warning-border-subtle: rgba(248, 172, 89, 0.3);
    --ins-danger-border-subtle: rgba(237, 85, 101, 0.3);
    --ins-purple-border-subtle: rgba(123, 112, 239, 0.3);
    --ins-primary-text-emphasis: #14866f;
    --ins-secondary-text-emphasis: #156395;
    --ins-success-text-emphasis: #089b71;
    --ins-info-text-emphasis: #1a9596;
    --ins-warning-text-emphasis: #ba8143;
    --ins-danger-text-emphasis: #b2404c;
    --ins-purple-text-emphasis: #5c54b3
}

html[data-skin=minimal][data-menu-color=light] {
    --ins-sidenav-bg: #fff;
    --ins-sidenav-border-color: #edf2f9;
    --ins-sidenav-item-color: #6c757d;
    --ins-sidenav-item-hover-color: #1ab394;
    --ins-sidenav-item-hover-bg: #f7f7fb;
    --ins-sidenav-item-active-color: #1ab394;
    --ins-sidenav-item-active-bg: #f7f7fb
}

html[data-skin=minimal][data-menu-color=gray] {
    --ins-sidenav-bg: #f6f8fb;
    --ins-sidenav-border-color: #e7e9eb;
    --ins-sidenav-item-color: #6c757d;
    --ins-sidenav-item-hover-color: #1ab394;
    --ins-sidenav-item-hover-bg: #f1f0f5;
    --ins-sidenav-item-active-color: #212b29;
    --ins-sidenav-item-active-bg: #f1f0f5
}

html[data-skin=minimal][data-menu-color=dark] {
    --ins-sidenav-bg: #1b2e4a;
    --ins-sidenav-border-color: #1b2e4a;
    --ins-sidenav-item-color: #8495ab;
    --ins-sidenav-item-hover-color: #bccee4;
    --ins-sidenav-item-hover-bg: #2f3742;
    --ins-sidenav-item-active-color: #ced6df;
    --ins-sidenav-item-active-bg: #243754
}

html[data-skin=minimal][data-menu-color=gradient] {
    --ins-sidenav-bg: linear-gradient(135deg, #1a455f, #262549);
    --ins-sidenav-border-color: null;
    --ins-sidenav-item-color: #799cb7;
    --ins-sidenav-item-hover-color: #bccee4;
    --ins-sidenav-item-hover-bg: #2f3742;
    --ins-sidenav-item-active-color: #cfdff1;
    --ins-sidenav-item-active-bg: #294461
}

html[data-skin=minimal][data-menu-color=image] {
    --ins-sidenav-bg: linear-gradient(to bottom right, rgba(16, 16, 30, 0.85), #183c52), url("../images/sidenav-bg.jpg") center/cover no-repeat;
    --ins-sidenav-border-color: null;
    --ins-sidenav-item-color: #799cb7;
    --ins-sidenav-item-hover-color: #bccee4;
    --ins-sidenav-item-hover-bg: #2f3742;
    --ins-sidenav-item-active-color: #cfdff1;
    --ins-sidenav-item-active-bg: #1e3447
}

html[data-skin=minimal][data-bs-theme=dark][data-menu-color=dark],
html[data-skin=minimal][data-bs-theme=dark][data-menu-color=gray],
html[data-skin=minimal][data-bs-theme=dark][data-menu-color=light] {
    --ins-sidenav-bg: #1e1f27;
    --ins-sidenav-border-color: #2c2d38;
    --ins-sidenav-item-color: #8495ab;
    --ins-sidenav-item-hover-color: #bccee4;
    --ins-sidenav-item-hover-bg: #2f3742;
    --ins-sidenav-item-active-color: #ced6df;
    --ins-sidenav-item-active-bg: #22232c
}

html[data-skin=minimal][data-topbar-color=light] {
    --ins-topbar-bg: #ffffff;
    --ins-topbar-item-color: #6c757d;
    --ins-topbar-item-hover-color: #1ab394;
    --ins-topbar-search-bg: transparent;
    --ins-topbar-search-border: #e7e9eb
}

html[data-skin=minimal][data-topbar-color=gray] {
    --ins-topbar-bg: #f1f2f7;
    --ins-topbar-item-color: #6c757d;
    --ins-topbar-item-hover-color: #1ab394;
    --ins-topbar-search-bg: #e8e9ef;
    --ins-topbar-search-border: #e8e9ef
}

html[data-skin=minimal][data-topbar-color=dark] {
    --ins-topbar-bg: #1b2e4a;
    --ins-topbar-item-color: #adb5bf;
    --ins-topbar-item-hover-color: #e0eeff;
    --ins-topbar-search-bg: #32435c;
    --ins-topbar-search-border: #32435c
}

html[data-skin=minimal][data-topbar-color=gradient] {
    --ins-topbar-bg: linear-gradient(to bottom, #1a455f, #262549);
    --ins-topbar-item-color: rgba(255, 255, 255, 0.7);
    --ins-topbar-item-hover-color: #ffffff;
    --ins-topbar-search-bg: rgba(255, 255, 255, 0.1);
    --ins-topbar-search-border: rgba(255, 255, 255, 0.1)
}

html[data-skin=minimal][data-bs-theme=dark][data-topbar-color=dark],
html[data-skin=minimal][data-bs-theme=dark][data-topbar-color=gray],
html[data-skin=minimal][data-bs-theme=dark][data-topbar-color=light] {
    --ins-topbar-bg: #252630;
    --ins-topbar-item-color: #adb5bf;
    --ins-topbar-item-hover-color: #e0eeff;
    --ins-topbar-search-bg: #2d2e3c;
    --ins-topbar-search-border: #2d2e3c
}

html[data-skin=minimal] .sidenav-menu {
    -webkit-box-shadow: none;
    box-shadow: none
}

[data-bs-theme=dark][data-skin=minimal] {
    --ins-body-bg: #17181e;
    --ins-body-bg-rgb: 23, 24, 30;
    --ins-secondary-bg: #1b1c22;
    --ins-secondary-bg-rgb: 27, 28, 34;
    --ins-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3);
    --ins-border-color: #293036
}

html[data-skin=flat] {
    --ins-font-sans-serif: "Nunito", sans-serif;
    --ins-body-font-size: 0.875rem;
    --ins-body-bg: #ffffff;
    --ins-secondary-bg: #fbfbfd;
    --ins-theme-card-border-width: 1px;
    --ins-border-color: #edf2f9;
    --ins-font-weight-medium: 500;
    --ins-font-weight-semibold: 700;
    --ins-font-weight-bold: 700;
    --ins-font-size-xxs: 12px;
    --ins-font-size-xs: 13px;
    --ins-font-size-base: 0.875rem;
    --ins-font-size-md: 15px;
    --ins-font-size-lg: 16px;
    --ins-font-size-xl: 18px;
    --ins-font-size-xxl: 20px;
    --ins-sidenav-item-icon-size: 1.125rem;
    --ins-sidenav-item-gap: 12px;
    --ins-sidenav-item-padding-x: 10px;
    --ins-sidenav-item-padding-y: 10px;
    --ins-sidenav-item-font-size: 0.875rem;
    --ins-sidenav-item-font-weight: 500;
    --ins-sidenav-sub-item-font-size: 0.875rem;
    --ins-sidenav-sub-item-font-weight: 500;
    --ins-sidenav-sub-item-gap: 4px;
    --ins-sidenav-sub-item-padding-x: 10px;
    --ins-sidenav-sub-item-padding-y: 7px;
    --ins-primary: #1ab394;
    --ins-secondary: #1c84c6;
    --ins-success: #0acf97;
    --ins-info: #23c6c8;
    --ins-warning: #f8ac59;
    --ins-danger: #FF477B;
    --ins-purple: #7b70ef;
    --ins-primary-rgb: 26, 179, 148;
    --ins-secondary-rgb: 28, 132, 198;
    --ins-success-rgb: 10, 207, 151;
    --ins-info-rgb: 35, 198, 200;
    --ins-warning-rgb: 248, 172, 89;
    --ins-danger-rgb: 237, 85, 101;
    --ins-purple-rgb: 123, 112, 239;
    --ins-primary-bg-subtle: rgba(26, 179, 148, 0.15);
    --ins-secondary-bg-subtle: rgba(28, 132, 198, 0.15);
    --ins-success-bg-subtle: rgba(10, 207, 151, 0.15);
    --ins-info-bg-subtle: rgba(35, 198, 200, 0.15);
    --ins-warning-bg-subtle: rgba(248, 172, 89, 0.15);
    --ins-danger-bg-subtle: rgba(237, 85, 101, 0.15);
    --ins-purple-bg-subtle: rgba(123, 112, 239, 0.15);
    --ins-primary-border-subtle: rgba(26, 179, 148, 0.3);
    --ins-secondary-border-subtle: rgba(28, 132, 198, 0.3);
    --ins-success-border-subtle: rgba(10, 207, 151, 0.3);
    --ins-info-border-subtle: rgba(35, 198, 200, 0.3);
    --ins-warning-border-subtle: rgba(248, 172, 89, 0.3);
    --ins-danger-border-subtle: rgba(237, 85, 101, 0.3);
    --ins-purple-border-subtle: rgba(123, 112, 239, 0.3);
    --ins-primary-text-emphasis: #14866f;
    --ins-secondary-text-emphasis: #156395;
    --ins-success-text-emphasis: #089b71;
    --ins-info-text-emphasis: #1a9596;
    --ins-warning-text-emphasis: #ba8143;
    --ins-danger-text-emphasis: #b2404c;
    --ins-purple-text-emphasis: #5c54b3
}

html[data-skin=flat][data-menu-color=light] {
    --ins-sidenav-bg: #fff;
    --ins-sidenav-border-color: #edf2f9;
    --ins-sidenav-item-color: #6c757d;
    --ins-sidenav-item-hover-color: #1ab394;
    --ins-sidenav-item-hover-bg: #f7f7fb;
    --ins-sidenav-item-active-color: #1ab394;
    --ins-sidenav-item-active-bg: #f7f7fb
}

html[data-skin=flat][data-menu-color=gray] {
    --ins-sidenav-bg: #f1f2f7;
    --ins-sidenav-border-color: #e7e9eb;
    --ins-sidenav-item-color: #6c757d;
    --ins-sidenav-item-hover-color: #1ab394;
    --ins-sidenav-item-hover-bg: #f4f0ff;
    --ins-sidenav-item-active-color: #212b29;
    --ins-sidenav-item-active-bg: #e8e8ed
}

html[data-skin=flat][data-menu-color=dark] {
    --ins-sidenav-bg: #1b2e4a;
    --ins-sidenav-border-color: #1b2e4a;
    --ins-sidenav-item-color: #8495ab;
    --ins-sidenav-item-hover-color: #bccee4;
    --ins-sidenav-item-hover-bg: #2f3742;
    --ins-sidenav-item-active-color: #ced6df;
    --ins-sidenav-item-active-bg: #243754
}

html[data-skin=flat][data-menu-color=gradient] {
    --ins-sidenav-bg: linear-gradient(135deg, #1a455f, #262549);
    --ins-sidenav-border-color: null;
    --ins-sidenav-item-color: #799cb7;
    --ins-sidenav-item-hover-color: #bccee4;
    --ins-sidenav-item-hover-bg: #2f3742;
    --ins-sidenav-item-active-color: #cfdff1;
    --ins-sidenav-item-active-bg: #294461
}

html[data-skin=flat][data-menu-color=image] {
    --ins-sidenav-bg: linear-gradient(to bottom right, rgba(16, 16, 30, 0.85), #183c52), url("../images/sidenav-bg.jpg") center/cover no-repeat;
    --ins-sidenav-border-color: null;
    --ins-sidenav-item-color: #799cb7;
    --ins-sidenav-item-hover-color: #bccee4;
    --ins-sidenav-item-hover-bg: #2f3742;
    --ins-sidenav-item-active-color: #cfdff1;
    --ins-sidenav-item-active-bg: #1e3447
}

html[data-skin=flat][data-bs-theme=dark][data-menu-color=dark],
html[data-skin=flat][data-bs-theme=dark][data-menu-color=light] {
    --ins-sidenav-bg: #1e1f27;
    --ins-sidenav-border-color: #2c2d38;
    --ins-sidenav-item-color: #8495ab;
    --ins-sidenav-item-hover-color: #bccee4;
    --ins-sidenav-item-hover-bg: #2f3742;
    --ins-sidenav-item-active-color: #ced6df;
    --ins-sidenav-item-active-bg: #22232c
}

html[data-skin=flat][data-topbar-color=light] {
    --ins-topbar-bg: #ffffff;
    --ins-topbar-item-color: #6c757d;
    --ins-topbar-item-hover-color: #1ab394;
    --ins-topbar-search-bg: transparent;
    --ins-topbar-search-border: #e7e9eb
}

html[data-skin=flat][data-topbar-color=gray] {
    --ins-topbar-bg: #f1f2f7;
    --ins-topbar-item-color: #6c757d;
    --ins-topbar-item-hover-color: #1ab394;
    --ins-topbar-search-bg: #e8e9ef;
    --ins-topbar-search-border: #e8e9ef
}

html[data-skin=flat][data-topbar-color=dark] {
    --ins-topbar-bg: #1b2e4a;
    --ins-topbar-item-color: #adb5bf;
    --ins-topbar-item-hover-color: #e0eeff;
    --ins-topbar-search-bg: #32435c;
    --ins-topbar-search-border: #32435c
}

html[data-skin=flat][data-topbar-color=gradient] {
    --ins-topbar-bg: linear-gradient(to bottom, #1a455f, #262549);
    --ins-topbar-item-color: rgba(255, 255, 255, 0.7);
    --ins-topbar-item-hover-color: #ffffff;
    --ins-topbar-search-bg: rgba(255, 255, 255, 0.1);
    --ins-topbar-search-border: rgba(255, 255, 255, 0.1)
}

html[data-skin=flat][data-bs-theme=dark][data-topbar-color=dark],
html[data-skin=flat][data-bs-theme=dark][data-topbar-color=gray],
html[data-skin=flat][data-bs-theme=dark][data-topbar-color=light] {
    --ins-topbar-bg: #252630;
    --ins-topbar-item-color: #adb5bf;
    --ins-topbar-item-hover-color: #e0eeff;
    --ins-topbar-search-bg: #2d2e3c;
    --ins-topbar-search-border: #2d2e3c
}

[data-bs-theme=dark][data-skin=flat] {
    --ins-body-bg: #17181e;
    --ins-body-bg-rgb: 23, 24, 30;
    --ins-secondary-bg: #1b1c22;
    --ins-secondary-bg-rgb: 27, 28, 34;
    --ins-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3);
    --ins-border-color: #293036
}

html[data-theme=galaxy] {
    --ins-font-sans-serif: "Nunito", sans-serif;
    --ins-body-bg: #fff;
    --ins-secondary-bg: #fff;
    --ins-box-shadow: none;
    --ins-font-weight-medium: 400;
    --ins-font-weight-semibold: 500;
    --ins-font-weight-bold: 600;
    --ins-font-size-xxs: 11px;
    --ins-font-size-xs: 12px;
    --ins-font-size-base: 13px;
    --ins-font-size-md: 14px;
    --ins-font-size-lg: 16px;
    --ins-font-size-xl: 18px;
    --ins-font-size-xxl: 20px;
    --ins-primary: #387ce4;
    --ins-secondary: #1c84c6;
    --ins-success: #0acf97;
    --ins-info: #23c6c8;
    --ins-warning: #f8ac59;
    --ins-danger: #FF477B;
    --ins-purple: #7b70ef;
    --ins-primary-rgb: 56, 124, 228;
    --ins-secondary-rgb: 28, 132, 198;
    --ins-success-rgb: 10, 207, 151;
    --ins-info-rgb: 35, 198, 200;
    --ins-warning-rgb: 248, 172, 89;
    --ins-danger-rgb: 237, 85, 101;
    --ins-purple-rgb: 123, 112, 239;
    --ins-primary-bg-subtle: rgba(56, 124, 228, 0.15);
    --ins-secondary-bg-subtle: rgba(28, 132, 198, 0.15);
    --ins-success-bg-subtle: rgba(10, 207, 151, 0.15);
    --ins-info-bg-subtle: rgba(35, 198, 200, 0.15);
    --ins-warning-bg-subtle: rgba(248, 172, 89, 0.15);
    --ins-danger-bg-subtle: rgba(237, 85, 101, 0.15);
    --ins-purple-bg-subtle: rgba(123, 112, 239, 0.15);
    --ins-primary-border-subtle: rgba(56, 124, 228, 0.3);
    --ins-secondary-border-subtle: rgba(28, 132, 198, 0.3);
    --ins-success-border-subtle: rgba(10, 207, 151, 0.3);
    --ins-info-border-subtle: rgba(35, 198, 200, 0.3);
    --ins-warning-border-subtle: rgba(248, 172, 89, 0.3);
    --ins-danger-border-subtle: rgba(237, 85, 101, 0.3);
    --ins-purple-border-subtle: rgba(123, 112, 239, 0.3);
    --ins-primary-text-emphasis: #2a5dab;
    --ins-secondary-text-emphasis: #156395;
    --ins-success-text-emphasis: #089b71;
    --ins-info-text-emphasis: #1a9596;
    --ins-warning-text-emphasis: #ba8143;
    --ins-danger-text-emphasis: #b2404c;
    --ins-purple-text-emphasis: #5c54b3
}

html[data-theme=galaxy][data-menu-color=light] {
    --ins-sidenav-bg: #fff;
    --ins-sidenav-border-color: #e7e9eb;
    --ins-sidenav-item-color: #6c757d;
    --ins-sidenav-item-hover-color: #1ab394;
    --ins-sidenav-item-hover-bg: #e8f7f4;
    --ins-sidenav-item-active-color: #1ab394;
    --ins-sidenav-item-active-bg: #e8f7f4
}

html[data-theme=galaxy][data-menu-color=dark] {
    --ins-sidenav-bg: #23303c;
    --ins-sidenav-border-color: #23303c;
    --ins-sidenav-item-color: #8495ab;
    --ins-sidenav-item-hover-color: #bccee4;
    --ins-sidenav-item-hover-bg: #2f3742;
    --ins-sidenav-item-active-color: #ced6df;
    --ins-sidenav-item-active-bg: #1c262f
}

html[data-theme=galaxy][data-menu-color=gradient] {
    --ins-sidenav-bg: linear-gradient(135deg, #1a455f, #262549);
    --ins-sidenav-border-color: null;
    --ins-sidenav-item-color: #799cb7;
    --ins-sidenav-item-hover-color: #bccee4;
    --ins-sidenav-item-hover-bg: #2f3742;
    --ins-sidenav-item-active-color: #cfdff1;
    --ins-sidenav-item-active-bg: #ffffff0d
}

html[data-theme=galaxy][data-menu-color=image] {
    --ins-sidenav-bg: linear-gradient(to bottom right, rgba(16, 16, 30, 0.85), #183c52), url("../images/sidenav-bg.jpg") center/cover no-repeat;
    --ins-sidenav-border-color: null;
    --ins-sidenav-item-color: #799cb7;
    --ins-sidenav-item-hover-color: #bccee4;
    --ins-sidenav-item-hover-bg: #2f3742;
    --ins-sidenav-item-active-color: #cfdff1;
    --ins-sidenav-item-active-bg: #ffffff0d
}

html[data-theme=galaxy][data-bs-theme=dark][data-menu-color=dark],
html[data-theme=galaxy][data-bs-theme=dark][data-menu-color=light] {
    --ins-sidenav-bg: #1e1f27;
    --ins-sidenav-border-color: #2c2d38;
    --ins-sidenav-item-color: #8495ab;
    --ins-sidenav-item-hover-color: #bccee4;
    --ins-sidenav-item-hover-bg: #2f3742;
    --ins-sidenav-item-active-color: #ced6df;
    --ins-sidenav-item-active-bg: #22232c
}

html[data-theme=galaxy][data-topbar-color=light] {
    --ins-topbar-bg: #ffffff;
    --ins-topbar-item-color: #6c757d;
    --ins-topbar-item-hover-color: #1ab394;
    --ins-topbar-search-bg: transparent;
    --ins-topbar-search-border: #e7e9eb
}

html[data-theme=galaxy][data-topbar-color=gray] {
    --ins-topbar-bg: #f1f2f7;
    --ins-topbar-item-color: #6c757d;
    --ins-topbar-item-hover-color: #1ab394;
    --ins-topbar-search-bg: #e8e9ef;
    --ins-topbar-search-border: #e8e9ef
}

html[data-theme=galaxy][data-bs-theme=dark][data-topbar-color=gray],
html[data-theme=galaxy][data-bs-theme=dark][data-topbar-color=light],
html[data-theme=galaxy][data-topbar-color=dark] {
    --ins-topbar-bg: #252630;
    --ins-topbar-item-color: #adb5bf;
    --ins-topbar-item-hover-color: #e0eeff;
    --ins-topbar-search-bg: #2d2e3c;
    --ins-topbar-search-border: #2d2e3c
}

html[data-theme=galaxy][data-topbar-color=gradient] {
    --ins-topbar-bg: linear-gradient(to bottom, #1a455f, #262549);
    --ins-topbar-item-color: rgba(255, 255, 255, 0.7);
    --ins-topbar-item-hover-color: #ffffff;
    --ins-topbar-search-bg: rgba(255, 255, 255, 0.1);
    --ins-topbar-search-border: rgba(255, 255, 255, 0.1)
}

[data-bs-theme=dark][data-theme=galaxy] {
    --ins-body-bg: #17181e;
    --ins-body-bg-rgb: 23, 24, 30;
    --ins-secondary-bg: #1b1c22;
    --ins-secondary-bg-rgb: 27, 28, 34;
    --ins-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3)
}

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 1001;
    background: var(--ins-topbar-bg);
    -webkit-box-shadow: var(--ins-theme-card-box-shadow);
    box-shadow: var(--ins-theme-card-box-shadow);
    height: var(--ins-topbar-height);
    margin-right: var(--ins-sidenav-width);
    -webkit-transition: margin-right .25s ease-in-out;
    transition: margin-right .25s ease-in-out;

}

.app-topbar .topbar-menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    position: relative;
    border-bottom: var(--ins-theme-card-border-width) solid var(--ins-theme-card-border-color);
    padding-right: 1.25rem;
    padding-left: 1.25rem;




}

.app-topbar .topbar-menu .topbar-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: var(--ins-topbar-height)
}

.app-topbar .topbar-menu .topbar-item .topbar-link {
    z-index: 1;
    border: none;
    background-color: transparent;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    cursor: pointer;
    color: var(--ins-topbar-item-color);
    position: relative
}

.app-topbar .topbar-menu .topbar-item .topbar-link:active,
.app-topbar .topbar-menu .topbar-item .topbar-link:focus,
.app-topbar .topbar-menu .topbar-item .topbar-link:hover {
    color: var(--ins-topbar-item-hover-color)
}

.app-topbar .topbar-menu .topbar-item .topbar-badge {
    position: absolute;
    top: -10px;
    left: -1px
}

.app-topbar ul {
    list-style-type: none;
    margin-bottom: 0
}

.logo-topbar {
    float: right;
    display: none;
    line-height: var(--ins-topbar-height);
    padding: 0 .625rem
}

.logo-topbar .logo-sm {
    display: none
}

.logo-topbar .logo-light {
    display: none
}

.logo-topbar .logo-dark {
    display: block
}

html[data-bs-theme=dark] .logo-topbar .logo-light,
html[data-topbar-color=dark] .logo-topbar .logo-light {
    display: block
}

html[data-bs-theme=dark] .logo-topbar .logo-dark,
html[data-topbar-color=dark] .logo-topbar .logo-dark {
    display: none
}

html[data-topbar-color=dark] .app-topbar .btn-primary,
html[data-topbar-color=gradient] .app-topbar .btn-primary {
    background-color: rgba(var(--ins-white-rgb), .1);
    border-color: transparent !important
}

html[data-topbar-color=dark]:not([data-bs-theme=dark]) .app-topbar .app-search .app-search-icon,
html[data-topbar-color=gradient]:not([data-bs-theme=dark]) .app-topbar .app-search .app-search-icon {
    color: rgba(var(--ins-white-rgb), .5) !important
}

html[data-topbar-color=dark]:not([data-bs-theme=dark]) .app-topbar .app-search input::-webkit-input-placeholder,
html[data-topbar-color=gradient]:not([data-bs-theme=dark]) .app-topbar .app-search input::-webkit-input-placeholder {
    color: rgba(var(--ins-white-rgb), .5) !important
}

html[data-topbar-color=dark]:not([data-bs-theme=dark]) .app-topbar .app-search input::-moz-placeholder,
html[data-topbar-color=gradient]:not([data-bs-theme=dark]) .app-topbar .app-search input::-moz-placeholder {
    color: rgba(var(--ins-white-rgb), .5) !important
}

html[data-topbar-color=dark]:not([data-bs-theme=dark]) .app-topbar .app-search input:-ms-input-placeholder,
html[data-topbar-color=gradient]:not([data-bs-theme=dark]) .app-topbar .app-search input:-ms-input-placeholder {
    color: rgba(var(--ins-white-rgb), .5) !important
}

html[data-topbar-color=dark]:not([data-bs-theme=dark]) .app-topbar .app-search input::-ms-input-placeholder,
html[data-topbar-color=gradient]:not([data-bs-theme=dark]) .app-topbar .app-search input::-ms-input-placeholder {
    color: rgba(var(--ins-white-rgb), .5) !important
}

html[data-topbar-color=dark]:not([data-bs-theme=dark]) .app-topbar .app-search input::placeholder,
html[data-topbar-color=gradient]:not([data-bs-theme=dark]) .app-topbar .app-search input::placeholder {
    color: rgba(var(--ins-white-rgb), .5) !important
}

#light-dark-mode .mode-light-sun {
    display: none
}

html[data-bs-theme=dark] #light-dark-mode .mode-light-sun {
    display: block
}

html[data-bs-theme=dark] #light-dark-mode .mode-light-moon {
    display: none
}

.nav-user {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 10px;
    min-height: var(--ins-topbar-height);
    -webkit-transition: none;
    transition: none
}

.nav-user::before {
    content: "";
    height: 18px;
    opacity: .35;
    width: 1px;
    border-right: 1px solid var(--ins-topbar-item-color)
}

@media (max-width:375px) {
    .logo-topbar {
        display: none !important
    }
}

@media (max-width:575.98px) {
    .app-topbar .topbar-menu {
        position: initial
    }

    .app-topbar .topbar-menu .topbar-badge {
        top: 10px
    }

    .app-topbar .dropdown {
        position: static
    }

    .app-topbar .dropdown .dropdown-menu {}
}

@media (max-width:767.98px) {
    .logo-topbar {
        display: block
    }

    .logo-topbar span.logo-lg {
        display: none
    }

    .logo-topbar span.logo-sm {
        display: block
    }
}

.topbar-search {
    width: 230px;
    padding: .4532rem .77rem;
    background-color: var(--ins-topbar-search-bg) !important;
    color: var(--ins-topbar-item-color) !important;
    border-color: var(--ins-topbar-search-border) !important;
    line-height: 1.5;
    border-radius: var(--ins-border-radius)
}

.notification-item {
    position: relative;
    cursor: pointer
}

.notification-item .notification-badge {
    height: 22px;
    width: 22px;
    text-align: center;
    color: #fff;
    top: -12px;
    left: -8px;
    border: 2px solid var(--ins-secondary-bg);
    line-height: 18px;
    font-size: 11px
}

html[data-menu-color=light][data-topbar-color=dark] .sidenav-menu .logo,
html[data-menu-color=light][data-topbar-color=gradient] .sidenav-menu .logo {
    background: var(--ins-topbar-bg);
    width: calc(100% + 1px)
}

html[data-menu-color=light][data-topbar-color=dark] .sidenav-menu .sidenav-user,
html[data-menu-color=light][data-topbar-color=gradient] .sidenav-menu .sidenav-user {
    margin-top: 10px
}

.sidenav-menu {
    z-index: 1005;
    position: fixed;
    bottom: 0;
    top: 0;
    width: var(--ins-sidenav-width);
    background: var(--ins-sidenav-bg);
    -webkit-box-shadow: var(--ins-box-shadow);
    box-shadow: var(--ins-box-shadow);
    border-left: var(--ins-theme-card-border-width) solid var(--ins-sidenav-border-color);
    -webkit-transition: width .25s ease-in-out;
    transition: width .25s ease-in-out
}

.sidenav-menu [data-simplebar] {
    height: calc(100% - var(--ins-topbar-height))
}

.side-nav {
    padding-right: 0;
    list-style-type: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 5px;
    padding-bottom: 50px
}

.side-nav .side-nav-item .side-nav-link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: var(--ins-sidenav-item-gap);
    position: relative;
    white-space: nowrap;
    color: var(--ins-sidenav-item-color);
    -webkit-transition: color .25s ease-in-out;
    transition: color .25s ease-in-out;
    line-height: calc(var(--ins-sidenav-item-font-size) * 1.25);
    font-size: var(--ins-sidenav-item-font-size);
    font-weight: var(--ins-sidenav-item-font-weight);
    padding: var(--ins-sidenav-item-padding-y) var(--ins-sidenav-item-padding-x);
    border-radius: 5px
}

.side-nav .side-nav-item .side-nav-link:active,
.side-nav .side-nav-item .side-nav-link:focus,
.side-nav .side-nav-item .side-nav-link:hover {
    color: var(--ins-sidenav-item-hover-color)
}

.side-nav .side-nav-item .side-nav-link .menu-icon {
    font-size: var(--ins-sidenav-item-icon-size);
    line-height: var(--ins-sidenav-item-icon-size)
}

.side-nav .side-nav-item .side-nav-link .menu-icon i {
    font-size: var(--ins-sidenav-item-icon-size);
    line-height: var(--ins-sidenav-item-icon-size);
    color: white;
}

.side-nav .side-nav-item .side-nav-link .menu-icon svg {
    height: var(--ins-sidenav-item-icon-size);
    width: var(--ins-sidenav-item-icon-size)
}

.side-nav .side-nav-item .side-nav-link .menu-text {
    text-overflow: ellipsis;
    overflow: hidden;
    color: white;

}

.side-nav .side-nav-item .side-nav-link .badge {
    margin-right: auto
}

.side-nav .side-nav-item .side-nav-link.disabled {
    pointer-events: none;
    cursor: default;
    opacity: .5
}

.side-nav .side-nav-item .side-nav-link.special-menu {
    background-color: var(--ins-primary) !important;
    color: #fff !important
}

.side-nav>.side-nav-item {
    padding: 0 10px
}

.side-nav .sub-menu {
    list-style-type: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: var(--ins-sidenav-sub-item-gap);
    padding-right: 0
}

.side-nav .sub-menu .side-nav-item .side-nav-link {
    font-size: var(--ins-sidenav-sub-item-font-size);
    padding: var(--ins-sidenav-sub-item-padding-y) calc(var(--ins-sidenav-item-icon-size) + var(--ins-sidenav-item-padding-x) + var(--ins-sidenav-item-gap)) var(--ins-sidenav-sub-item-padding-y) var(--ins-sidenav-sub-item-padding-x)
}

/* .side-nav .sub-menu .sub-menu {
    padding-right: 15px
} */

.side-nav .side-nav-title {
    letter-spacing: .1em;
    pointer-events: none;
    cursor: default;
    white-space: nowrap;
    text-transform: uppercase;
    color: var(--ins-sidenav-item-color);
    font-weight: var(--ins-font-weight-bold);
    font-size: calc(var(--ins-sidenav-item-font-size) * .7);
    padding: var(--ins-sidenav-item-padding-y) calc(var(--ins-sidenav-item-padding-x) * 2)
}

.side-nav>.side-nav-item.active>a {
    color: var(--ins-sidenav-item-active-color);

}

.side-nav>.side-nav-item.active>a .menu-arrow {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    color: white;
}

.side-nav>.side-nav-item.active .side-nav-item.active>a {
    color: var(--ins-sidenav-item-active-color)
}

.side-nav>.side-nav-item.active .side-nav-item.active>a .menu-arrow {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.menu-arrow {
    margin-right: auto;
    -webkit-transition: -webkit-transform .1s ease-in-out;
    transition: -webkit-transform .1s ease-in-out;
    transition: transform .1s ease-in-out;
    transition: transform .1s ease-in-out, -webkit-transform .1s ease-in-out
}

.menu-arrow:before {
    content: "\ea5f";
    font-family: tabler-icons
}

[aria-expanded=true] .menu-arrow {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.sidenav-user {
    padding: 15px;
    display: none;
    color: var(--ins-sidenav-item-color);
    background: url(../images/user-bg-pattern.svg);
    background-size: cover !important;
    margin: 0 10px 5px;
    border-radius: 5px
}

.sidenav-user .sidenav-user-name {
    white-space: nowrap;
    display: block;
    color: var(--ins-sidenav-item-active-color)
}

html[data-menu-color=dark] .sidenav-user {
    background: url(../images/user-bg-pattern.png)
}

html[data-sidenav-user=true] .sidenav-user {
    display: block
}

html[data-sidenav-size=condensed] .app-topbar {
    z-index: 1005;
    margin-right: var(--ins-sidenav-width-sm)
}

html[data-sidenav-size=condensed] .content-page {
    margin-right: var(--ins-sidenav-width-sm);
    min-height: 100%
}

html[data-sidenav-size=condensed] .sidenav-menu {
    position: absolute;
    width: var(--ins-sidenav-width-sm)
}

html[data-sidenav-size=condensed] .sidenav-menu .simplebar-content-wrapper,
html[data-sidenav-size=condensed] .sidenav-menu .simplebar-mask {
    overflow: visible !important
}

html[data-sidenav-size=condensed] .sidenav-menu .simplebar-scrollbar {
    display: none !important
}

html[data-sidenav-size=condensed] .sidenav-menu .simplebar-offset {
    bottom: 0 !important
}

html[data-sidenav-size=condensed] .sidenav-menu .logo {
    z-index: 1;
    background: var(--ins-sidenav-bg);
    text-align: center;
    padding: 0
}

html[data-sidenav-size=condensed] .sidenav-menu .logo span.logo-lg {
    display: none
}

html[data-sidenav-size=condensed] .sidenav-menu .logo span.logo-sm {
    display: block
}

html[data-sidenav-size=condensed] .sidenav-menu .side-nav {
    gap: 0
}

html[data-sidenav-size=condensed] .sidenav-menu .side-nav>.side-nav-item {
    padding: 0
}

html[data-sidenav-size=condensed] .sidenav-menu .side-nav .menu-icon i {
    font-size: calc(var(--ins-sidenav-item-icon-size) * 1.15)
}

html[data-sidenav-size=condensed] .sidenav-menu .side-nav .side-nav-item {
    position: relative
}

html[data-sidenav-size=condensed] .sidenav-menu .side-nav .side-nav-item .side-nav-link {
    -webkit-transition: none;
    transition: none;
    border-radius: 0;
    padding: calc(var(--ins-sidenav-item-padding-y) * 1.75) var(--ins-sidenav-item-padding-x)
}

html[data-sidenav-size=condensed] .sidenav-menu .side-nav .side-nav-item .side-nav-link .badge,
html[data-sidenav-size=condensed] .sidenav-menu .side-nav .side-nav-item .side-nav-link .menu-arrow,
html[data-sidenav-size=condensed] .sidenav-menu .side-nav .side-nav-item .side-nav-link .menu-text {
    display: none
}

html[data-sidenav-size=condensed] .sidenav-menu .side-nav .side-nav-item .side-nav-link .menu-icon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-width: calc(var(--ins-sidenav-width-sm) - var(--ins-sidenav-item-padding-y) * 2)
}

html[data-sidenav-size=condensed] .sidenav-menu .side-nav .side-nav-item .collapse,
html[data-sidenav-size=condensed] .sidenav-menu .side-nav .side-nav-item .collapsing {
    display: none;
    height: inherit !important;
    -webkit-transition: none !important;
    transition: none !important
}

html[data-sidenav-size=condensed] .sidenav-menu .side-nav .side-nav-item .collapse .sub-menu,
html[data-sidenav-size=condensed] .sidenav-menu .side-nav .side-nav-item .collapsing .sub-menu {
    display: none;
    padding: 5px 0;
    margin-top: 0;
    position: absolute;
    right: var(--ins-sidenav-width-sm);
    -webkit-box-shadow: var(--ins-box-shadow);
    box-shadow: var(--ins-box-shadow);
    border: var(--ins-theme-card-border-width) solid var(--ins-sidenav-border-color);
    border-top: 0;
    background: var(--ins-sidenav-bg);
    border-radius: 0 0 4px 4px
}

html[data-sidenav-size=condensed] .sidenav-menu .side-nav .side-nav-item .collapse .sub-menu .sub-menu,
html[data-sidenav-size=condensed] .sidenav-menu .side-nav .side-nav-item .collapsing .sub-menu .sub-menu {
    border-radius: 4px
}

html[data-sidenav-size=condensed] .sidenav-menu .side-nav .side-nav-item:hover .side-nav-link {
    position: relative
}

html[data-sidenav-size=condensed] .sidenav-menu .side-nav .side-nav-item:hover .side-nav-link .badge,
html[data-sidenav-size=condensed] .sidenav-menu .side-nav .side-nav-item:hover .side-nav-link .menu-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

html[data-sidenav-size=condensed] .sidenav-menu .side-nav .side-nav-item:hover .side-nav-link .side-nav-link::before {
    display: none
}

html[data-sidenav-size=condensed] .sidenav-menu .side-nav .side-nav-item:hover>.collapse,
html[data-sidenav-size=condensed] .sidenav-menu .side-nav .side-nav-item:hover>.collapsing {
    display: block !important;
    -webkit-transition: none !important;
    transition: none !important
}

html[data-sidenav-size=condensed] .sidenav-menu .side-nav .side-nav-item:hover>.collapse>.sub-menu,
html[data-sidenav-size=condensed] .sidenav-menu .side-nav .side-nav-item:hover>.collapsing>.sub-menu {
    display: block;
    right: var(--ins-sidenav-width-sm);
    width: calc(var(--ins-sidenav-width) - var(--ins-sidenav-width-sm) * .65)
}

html[data-sidenav-size=condensed] .sidenav-menu .side-nav .side-nav-item:hover>.collapse>.sub-menu .side-nav-item:hover>.collapse>.sub-menu,
html[data-sidenav-size=condensed] .sidenav-menu .side-nav .side-nav-item:hover>.collapse>.sub-menu .side-nav-item:hover>.collapsing>.sub-menu,
html[data-sidenav-size=condensed] .sidenav-menu .side-nav .side-nav-item:hover>.collapsing>.sub-menu .side-nav-item:hover>.collapse>.sub-menu,
html[data-sidenav-size=condensed] .sidenav-menu .side-nav .side-nav-item:hover>.collapsing>.sub-menu .side-nav-item:hover>.collapsing>.sub-menu {
    top: 0;
    right: calc(var(--ins-sidenav-width) - var(--ins-sidenav-width-sm) * .65);
    width: calc(var(--ins-sidenav-width) - var(--ins-sidenav-width-sm) * .65)
}

html[data-sidenav-size=condensed] .sidenav-menu .side-nav .side-nav-item:hover>.collapse>.sub-menu .menu-arrow,
html[data-sidenav-size=condensed] .sidenav-menu .side-nav .side-nav-item:hover>.collapsing>.sub-menu .menu-arrow {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

html[data-sidenav-size=condensed] .sidenav-menu .side-nav .side-nav-item .sub-menu .side-nav-item .side-nav-link {
    -webkit-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
    padding: calc(var(--ins-sidenav-sub-item-padding-y) * 1.5) calc(var(--ins-sidenav-sub-item-padding-x) * 1.5);
    white-space: inherit
}

html[data-sidenav-size=condensed] .sidenav-menu .side-nav>.side-nav-item:hover>.side-nav-link {
    color: var(--ins-sidenav-item-active-color);
    background-color: var(--ins-sidenav-item-active-bg);
    width: calc(var(--ins-sidenav-width) + var(--ins-sidenav-width-sm) * .35);
    border-radius: 4px
}

html[data-sidenav-size=condensed] .sidenav-menu .side-nav>.side-nav-item:hover>.side-nav-link[data-bs-toggle=collapse] {
    border-end-end-radius: 0
}

html[data-sidenav-size=condensed] .side-nav-link::before,
html[data-sidenav-size=condensed] .side-nav-title,
html[data-sidenav-size=condensed] .sidenav-user {
    display: none
}

html[data-sidenav-size=compact] .sidenav-menu {
    width: var(--ins-sidenav-width-md)
}

html[data-sidenav-size=compact] .sidenav-menu .sidenav-user .sidenav-user-set-icon {
    display: none
}

html[data-sidenav-size=compact] .sidenav-menu .side-nav .side-nav-title {
    text-align: center
}

html[data-sidenav-size=compact] .sidenav-menu .side-nav .side-nav-link {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

html[data-sidenav-size=compact] .sidenav-menu .side-nav .side-nav-link .badge,
html[data-sidenav-size=compact] .sidenav-menu .side-nav .side-nav-link .side-nav-link::before {
    display: none
}

html[data-sidenav-size=compact] .sidenav-menu .side-nav .sub-menu {
    padding: 0
}

html[data-sidenav-size=compact] .sidenav-menu .side-nav .sub-menu .side-nav-link {
    padding: var(--ins-sidenav-sub-item-padding-y) 0
}

html[data-sidenav-size=compact] .sidenav-menu .side-nav .sub-menu .side-nav-link .menu-arrow {
    margin: 0;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex
}

html[data-sidenav-size=compact] .app-topbar,
html[data-sidenav-size=compact] .content-page {
    margin-right: var(--ins-sidenav-width-md)
}

html[data-sidenav-size=compact] .menu-arrow {
    display: none
}

html[data-sidenav-size=on-hover] .app-topbar,
html[data-sidenav-size=on-hover] .content-page {
    margin-right: var(--ins-sidenav-width-sm)
}

html[data-sidenav-size=on-hover] .sidenav-toggle-button {
    display: none
}

html[data-sidenav-size=on-hover] .sidenav-menu:not(:hover) {
    width: var(--ins-sidenav-width-sm)
}

html[data-sidenav-size=on-hover] .sidenav-menu:not(:hover) .simplebar-scrollbar:before {
    background: 0 0
}

html[data-sidenav-size=on-hover] .sidenav-menu:not(:hover) .logo .logo-sm {
    display: block
}

html[data-sidenav-size=on-hover] .sidenav-menu:not(:hover) .logo .logo-lg {
    display: none
}

html[data-sidenav-size=on-hover] .sidenav-menu:not(:hover) .side-nav-item .side-nav-link {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

html[data-sidenav-size=on-hover] .sidenav-menu:not(:hover) .side-nav-item .side-nav-link .badge,
html[data-sidenav-size=on-hover] .sidenav-menu:not(:hover) .side-nav-item .side-nav-link .menu-arrow,
html[data-sidenav-size=on-hover] .sidenav-menu:not(:hover) .side-nav-item .side-nav-link .menu-text {
    display: none
}

html[data-sidenav-size=on-hover] .sidenav-menu:not(:hover) .side-nav-title {
    display: none
}

html[data-sidenav-size=on-hover] .sidenav-menu:not(:hover) .button-on-hover,
html[data-sidenav-size=on-hover] .sidenav-menu:not(:hover) .menu-text,
html[data-sidenav-size=on-hover] .sidenav-menu:not(:hover) .sidenav-user {
    display: none
}

html[data-sidenav-size=on-hover] .sidenav-menu:not(:hover) .sub-menu {
    height: 0;
    opacity: 0
}

html[data-sidenav-size=on-hover] .sidenav-menu .simplebar-horizontal .simplebar-scrollbar:before {
    background: 0 0
}

html[data-sidenav-size=on-hover] .sidenav-menu .logo {
    text-align: right
}

html[data-sidenav-size=on-hover] .sidenav-menu:hover {
    z-index: 1045
}

html[data-sidenav-size=on-hover] .sidenav-menu .button-on-hover {
    display: block
}

.button-on-hover {
    cursor: pointer;
    display: none;
    left: calc(var(--ins-sidenav-width-sm) * .5 - var(--ins-logo-sm-height) * .7);
    top: 0;
    position: absolute;
    font-size: var(--ins-sidenav-item-icon-size);
    line-height: var(--ins-topbar-height);
    background: 0 0;
    border: none;
    z-index: 1;
    color: var(--ins-sidenav-item-color)
}

.button-on-hover:active,
.button-on-hover:focus,
.button-on-hover:hover {
    color: var(--ins-sidenav-item-hover-color)
}

html[data-sidenav-size=on-hover-active] .sidenav-toggle-button {
    display: none
}

html[data-sidenav-size=on-hover-active] .sidenav-menu .logo {
    text-align: right
}

html[data-sidenav-size=on-hover-active] .sidenav-menu .button-on-hover {
    display: block;
    color: var(--ins-primary)
}

.button-close-offcanvas {
    display: none;
    z-index: 1;
    position: absolute;
    background: 0 0;
    border: none;
    top: 0;
    left: calc(var(--ins-sidenav-width-sm) * .5 - var(--ins-logo-sm-height) * .7);
    cursor: pointer;
    color: var(--ins-sidenav-item-color);
    line-height: var(--ins-topbar-height);
    font-size: var(--ins-sidenav-item-icon-size)
}

.button-close-offcanvas:active,
.button-close-offcanvas:focus,
.button-close-offcanvas:hover {
    color: var(--ins-sidenav-item-hover-color)
}

html[data-sidenav-size=offcanvas] .logo-topbar {
    display: inline-block
}

@media (min-width:1200px) {
    html[data-sidenav-size=offcanvas] .logo-topbar {
        min-width: 200px
    }
}

html[data-sidenav-size=offcanvas] .app-topbar,
html[data-sidenav-size=offcanvas] .content-page {
    margin-right: 0
}

html[data-sidenav-size=offcanvas] .button-close-offcanvas {
    display: block
}

html[data-sidenav-size=offcanvas] .sidenav-menu {
    margin-right: calc(var(--ins-sidenav-width) * -1);
    opacity: 0;
    -webkit-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out
}

html[data-sidenav-size=offcanvas] .sidenav-menu .logo {
    text-align: right
}

html[data-sidenav-size=offcanvas].sidebar-enable .sidenav-menu {
    opacity: 1;
    z-index: 1055;
    margin-right: 0
}

html[data-layout=topnav] .app-topbar {
    margin: 0;
    z-index: 1005;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-bottom: 0
}

html[data-layout=topnav] .app-topbar .logo-topbar {
    display: block;
    float: none
}

html[data-layout=topnav] .app-topbar .sidenav-toggle-button {
    display: none
}

html[data-layout=topnav] .app-topbar .topbar-menu {
    padding-left: calc(var(--ins-gutter-x) * .5);
    padding-right: calc(var(--ins-gutter-x) * .5)
}

html[data-layout=topnav] .content-page {
    margin-right: 0;
    min-height: calc(100vh - var(--ins-topbar-height) - 43px)
}

html[data-layout=topnav] .topnav {
    width: 100%;
    z-index: 1000;
    position: sticky;
    top: var(--ins-topbar-height);
    background: var(--ins-sidenav-bg);
    padding-right: .625rem;
    padding-left: .625rem;
    -webkit-box-shadow: var(--ins-box-shadow);
    box-shadow: var(--ins-box-shadow)
}

html[data-layout=topnav] .topnav .navbar {
    margin: 0;
    padding: 0
}

@media (min-width:992px) {
    html[data-layout=topnav] .topnav .navbar-nav .nav-item:first-of-type .nav-link {
        padding-right: 0
    }
}

html[data-layout=topnav] .topnav .navbar-nav .nav-link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    line-height: var(--ins-sidenav-item-font-size);
    font-size: var(--ins-sidenav-item-font-size);
    font-weight: var(--ins-sidenav-item-font-weight);
    padding: calc(var(--ins-sidenav-item-padding-y) * 1.25) calc(var(--ins-sidenav-item-padding-x) * 1.5)
}

html[data-layout=topnav] .topnav .navbar-nav .nav-link .menu-icon {
    margin-left: calc(var(--ins-sidenav-item-icon-size) * .5)
}

html[data-layout=topnav] .topnav .navbar-nav .nav-link .menu-icon i {
    font-size: var(--ins-sidenav-item-icon-size)
}

html[data-layout=topnav] .topnav .navbar-nav .nav-link .menu-icon svg {
    height: var(--ins-sidenav-item-icon-size);
    width: var(--ins-sidenav-item-icon-size)
}

html[data-layout=topnav] .topnav .navbar-nav .nav-link .menu-arrow {
    margin-right: calc(var(--ins-sidenav-item-icon-size) * .5)
}

html[data-layout=topnav] .topnav .navbar-nav .dropdown .dropdown-menu {
    font-size: var(--ins-sidenav-sub-item-font-size)
}

html[data-layout=topnav] .topnav .navbar-nav .dropdown .dropdown-menu .dropdown-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 8px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: calc(var(--ins-sidenav-item-padding-y) * .75) calc(var(--ins-sidenav-item-padding-x) * 1.5)
}

html[data-layout=topnav] .topnav .navbar-nav .dropdown .dropdown-menu .dropdown-item i {
    font-size: calc(var(--ins-sidenav-sub-item-font-size) * 1.25)
}

html[data-layout=topnav] .topnav .navbar-nav .dropdown .dropdown-menu .menu-arrow {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}

html[data-layout=topnav] .topnav .nav-item .nav-link,
html[data-layout=topnav] .topnav .nav-item>a {
    color: var(--ins-sidenav-item-color)
}

html[data-layout=topnav] .topnav .nav-item .nav-link:hover,
html[data-layout=topnav] .topnav .nav-item>a:hover {
    color: var(--ins-sidenav-item-hover-color)
}

html[data-layout=topnav] .topnav .nav-item.active>a {
    color: var(--ins-sidenav-item-hover-color)
}

html[data-layout=topnav] .page-title-head {
    background-color: transparent;
    border: 0;
    min-height: 60px;
    margin-bottom: 40px;
    justify-content: space-between;

}

@media (min-width:992px) {
    .topnav .dropdown .dropdown-menu {
        margin-top: 0
    }

    .topnav .dropdown .dropdown-menu .dropdown .dropdown-menu {
        position: absolute;
        top: 0;
        right: 100%;
        display: none
    }

    .topnav .dropdown:hover .nav-link {
        color: var(--ins-sidenav-item-hover-color) !important
    }

    .topnav .dropdown:hover>.dropdown-menu {
        display: block
    }

    .topnav .dropdown:hover>.dropdown-menu>.dropdown:hover>.dropdown-item {
        color: var(--ins-sidenav-item-hover-color) !important
    }

    .topnav .dropdown:hover>.dropdown-menu>.dropdown:hover>.dropdown-menu {
        display: block
    }

    .topnav .dropdown.active>a.dropdown-item {
        color: var(--ins-body-color);
        background-color: var(--ins-tertiary-bg)
    }
}

@media (max-width:991.98px) {
    html[data-layout=topnav] .topnav {
        max-height: 360px;
        overflow-y: auto
    }

    html[data-layout=topnav] .topnav .navbar-nav .nav-link {
        padding: calc(var(--ins-sidenav-item-padding-y) * .8) calc(var(--ins-sidenav-item-padding-x) * 2)
    }

    html[data-layout=topnav] .topnav .dropdown .dropdown-menu {
        background-color: transparent;
        border: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        padding-right: calc(var(--ins-sidenav-item-padding-x) * 3);
        margin-top: calc(var(--ins-sidenav-item-padding-y) * -.75)
    }

    html[data-layout=topnav] .topnav .dropdown .dropdown-menu .dropdown-menu {
        margin-top: calc(var(--ins-sidenav-item-padding-y) * -.5);
        padding-right: calc(var(--ins-sidenav-item-padding-x) * 1.5)
    }

    html[data-layout=topnav] .topnav .dropdown .dropdown-item {
        position: relative;
        background-color: transparent
    }

    html[data-layout=topnav] .topnav .dropdown .dropdown-item {
        color: var(--ins-sidenav-item-color)
    }

    html[data-layout=topnav] .topnav .dropdown .dropdown-item.hover {
        color: var(--ins-sidenav-item-hover-color)
    }

    html[data-layout=topnav] .topnav .dropdown .dropdown-item.active,
    html[data-layout=topnav] .topnav .dropdown .dropdown-item:active {
        color: var(--ins-sidenav-item-active-color)
    }

    html[data-layout=topnav] .topnav .dropdown.active>a.dropdown-item {
        color: var(--ins-sidenav-item-active-color)
    }

    html[data-layout=topnav] .topnav-toggle-button {
        display: block
    }
}

.topnav-toggle-button {
    display: none;
    position: relative;
    cursor: pointer;
    float: right;
    padding: 0;
    background-color: transparent;
    border: none;
    color: var(--ins-topbar-item-color)
}

@media (min-width:1400px) {

    html[data-layout=topnav] .container-fluid,
    html[data-layout=topnav] .container-lg,
    html[data-layout=topnav] .container-md,
    html[data-layout=topnav] .container-sm,
    html[data-layout=topnav] .container-xl,
    html[data-layout=topnav] .container-xxl {
        max-width: 85%
    }
}

.wrapper {
    height: 100%;
    width: 100%
}

.content-page {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
    margin-right: var(--ins-sidenav-width);
    min-height: calc(100vh - calc(var(--ins-topbar-height) + 1px));
    -webkit-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;

}

[data-bs-theme=dark] .content-page {

    background-color: #192e37;

}

.page-title-head {
    min-height: 40px;
    background-color: var(--ins-light-bg-subtle);

    padding: 0 1.25rem;
    border-bottom: 1px solid var(--ins-border-color)
}


@media (max-width:900px) {

    .page-title-head {
        min-height: 40px;
        background-color: var(--ins-light-bg-subtle);
        margin-bottom: 20px;
        padding: 0 1.25rem;
        border-bottom: 1px solid var(--ins-border-color)
    }

}

.logo-lg img {
    height: var(--ins-logo-lg-height)
}

.logo-sm img {
    height: var(--ins-logo-sm-height)
}

.logo {
    display: block;
    top: 0;
    position: sticky;
    line-height: var(--ins-topbar-height);
    padding: 0 12px
}

.logo span.logo-lg {
    display: block
}

.logo span.logo-sm {
    display: none
}

.logo.logo-light {
    display: none
}

.logo.logo-dark {
    display: block
}

html[data-bs-theme=dark] .logo.logo-light,
html[data-menu-color=dark] .logo.logo-light,
html[data-menu-color=gradient] .logo.logo-light,
html[data-menu-color=image] .logo.logo-light,
html[data-menu-color=light][data-topbar-color=dark] .logo.logo-light,
html[data-menu-color=light][data-topbar-color=gradient] .logo.logo-light {
    display: block
}

html[data-bs-theme=dark] .logo.logo-dark,
html[data-menu-color=dark] .logo.logo-dark,
html[data-menu-color=gradient] .logo.logo-dark,
html[data-menu-color=image] .logo.logo-dark,
html[data-menu-color=light][data-topbar-color=dark] .logo.logo-dark,
html[data-menu-color=light][data-topbar-color=gradient] .logo.logo-dark {
    display: none
}

html.sidebar-no-icons .sidenav-menu .menu-icon {
    display: none
}

html.sidebar-with-line .sub-menu {
    position: relative
}

html.sidebar-with-line .sub-menu::before {
    content: "";
    width: 1px;
    top: 5px;
    bottom: calc(var(--ins-sidenav-item-padding-x) + 4px);
    position: absolute;
    right: calc(var(--ins-sidenav-item-icon-size) - 1px);
    border-right: 1px dashed var(--ins-sidenav-item-color);
    opacity: .5
}

html.sidebar-with-line .sub-menu .sub-menu::before {
    right: calc(var(--ins-sidenav-item-icon-size) - 1px + 14px)
}

html.sidebar-with-line .sub-menu .side-nav-link::before {
    content: "";
    width: var(--ins-sidenav-item-padding-x);
    height: 1px;
    position: absolute;
    right: calc(var(--ins-sidenav-item-icon-size));
    border-top: 1px dashed var(--ins-sidenav-item-color);
    opacity: .5
}

html.sidebar-with-line .sub-menu .side-nav-link::after {
    content: "";
    height: 4px;
    width: 4px;
    background-color: var(--ins-sidenav-item-color);
    position: absolute;
    right: calc(var(--ins-sidenav-item-icon-size) + var(--ins-sidenav-item-padding-x));
    border-radius: 50%;
    opacity: .5
}

.asidebar {
    position: fixed;
    top: var(--ins-topbar-height);
    bottom: 0;
    left: 0;
    width: 250px !important;
    overflow: hidden;
    background-color: var(--ins-secondary-bg) !important
}

.asidebar-button {
    position: fixed;
    top: 20%;
    left: 0
}

@media (min-width:1200px) {
    .wrapper:has(.asidebar) .content-page {
        margin-left: 250px
    }
}

@media (min-width:1400px) {
    html[data-layout-width=boxed] body {
        background-color: var(--ins-tertiary-bg)
    }

    html[data-layout-width=boxed] .wrapper {
        margin: 0 auto;
        -webkit-box-shadow: var(--ins-box-shadow);
        box-shadow: var(--ins-box-shadow);
        max-width: 1340px;
        background-color: var(--ins-body-bg)
    }

    html[data-layout-width=boxed] .app-topbar {
        z-index: 100;
        margin-left: -1px
    }
}

@media (min-width:992px) {
    html[data-layout-position=scrollable] .content-page {
        position: relative;
        min-height: -webkit-max-content;
        min-height: -moz-max-content;
        min-height: max-content
    }

    html[data-layout-position=scrollable] .sidenav-menu {
        position: absolute
    }

    html[data-layout-position=scrollable] .app-topbar,
    html[data-layout-position=scrollable] .logo {
        position: static
    }
}

.footer {
    margin-top: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: .625rem;
    color: var(--ins-emphasis-color);
    -webkit-transition: margin-right .25s ease-in-out;
    transition: margin-right .25s ease-in-out;
    background-color: var(--ins-secondary-bg);
    border-top: 1px solid var(--ins-theme-card-border-color);
    margin: auto -.625rem 0
}

.footer-alt {
    border: none;
    text-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.fill-primary {
    fill: rgba(var(--ins-primary-rgb), .15)
}

.fill-secondary {
    fill: rgba(var(--ins-secondary-rgb), .15)
}

.fill-success {
    fill: rgba(var(--ins-success-rgb), .15)
}

.fill-info {
    fill: rgba(var(--ins-info-rgb), .15)
}

.fill-warning {
    fill: rgba(var(--ins-warning-rgb), .15)
}

.fill-danger {
    fill: rgba(var(--ins-danger-rgb), .15)
}

.fill-purple {
    fill: rgba(var(--ins-purple-rgb), .15)
}

.fill-light {
    fill: rgba(var(--ins-light-rgb), .15)
}

.fill-dark {
    fill: rgba(var(--ins-dark-rgb), .15)
}

.accordion-button {
    font-weight: var(--ins-font-weight-semibold)
}

.accordion-bordered .accordion-item {
    border-top: var(--ins-border-width) solid var(--ins-border-color);
    border-radius: var(--ins-border-radius)
}

.accordion-bordered .accordion-item:not(:first-of-type) {
    margin-top: .5rem
}

.accordion-bordered .accordion-item .accordion-button {
    border-radius: var(--ins-border-radius)
}

.accordion-bordered .accordion-item .accordion-button:not(.collapsed) {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0
}

.accordion-arrow-none .accordion-button::after {
    background-image: none
}

.accordion-custom-icon .accordion-icon {
    position: absolute;
    left: 1.25rem;
    font-size: 18px
}

.accordion-custom-icon .accordion-icon-off {
    display: none
}

.accordion-custom-icon [aria-expanded=true] .accordion-icon-off {
    display: block
}

.accordion-custom-icon [aria-expanded=true] .accordion-icon-on {
    display: none
}

.alert-bordered.border-start {
    border-right-width: 3px !important
}

.alert-bordered.border-bottom {
    border-bottom-width: 2px !important
}

.avatar-xxs {
    height: 1rem;
    width: 1rem
}

.avatar-xs {
    height: 1.5rem;
    width: 1.5rem
}

.avatar-sm {
    height: 2rem;
    width: 2rem
}

.avatar-md {
    height: 2.25rem;
    width: 2.25rem
}

.avatar-lg {
    height: 2.75rem;
    width: 2.75rem
}

.avatar-xl {
    height: 3rem;
    width: 3rem
}

.avatar-xxl {
    height: 5rem;
    width: 5rem
}

.avatar-title {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%
}

.avatar-group {
    padding-right: .75rem;
    line-height: 1
}

.avatar-group .avatar {
    margin-right: -.75rem;
    -webkit-transition: all .2s;
    transition: all .2s;
    line-height: 1
}

.avatar-group .avatar:hover {
    position: relative;
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
    z-index: 1
}

.avatar-group.avatar-group-sm {
    padding-right: .5rem
}

.avatar-group.avatar-group-sm .avatar {
    margin-right: -.5rem
}

.avatar-group.avatar-group-xs {
    padding-right: .35rem
}

.avatar-group.avatar-group-xs .avatar {
    margin-right: -.35rem
}

.avatar-img-size {
    height: 1em;
    width: 1em
}

.breadcrumb-item a {
    color: var(--ins-body-color)
}

.breadcrumb-item a:hover {
    color: var(--ins-primary)
}

.breadcrumb-item+.breadcrumb-item::before {
    font-family: tabler-icons
}

.btn {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.btn-icon {
    position: relative;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: calc(.9064rem + 1.5em + 2px);
    width: calc(.9064rem + 1.5em + 2px);
    padding: 0
}

.btn-icon :is(i, svg, img) {
    vertical-align: middle
}

.btn-group-sm>.btn-icon.btn,
.btn-icon.btn-sm {
    height: calc(.625rem + 1.5em + 2px);
    width: calc(.625rem + 1.5em + 2px)
}

.btn-group-lg>.btn-icon.btn,
.btn-icon.btn-lg {
    height: calc(1.1024rem + 1.5em + 2px);
    width: calc(1.1024rem + 1.5em + 2px)
}

.btn-group-sm>.btn,
.btn.btn-sm {
    line-height: normal
}

.btn-primary {
    --ins-btn-bg: var(--ins-primary);
    --ins-btn-border-color: var(--ins-primary);
    --ins-btn-hover-bg: var(--ins-primary-text-emphasis);
    --ins-btn-hover-border-color: var(--ins-primary-text-emphasis);
    --ins-btn-focus-shadow-rgb: var(--ins-primary-rgb);
    --ins-btn-active-bg: var(--ins-primary-text-emphasis);
    --ins-btn-active-border-color: var(--ins-primary-text-emphasis);
    --ins-btn-disabled-bg: var(--ins-primary);
    --ins-btn-disabled-border-color: var(--ins-primary)
}

.btn-outline-primary {
    --ins-btn-color: var(--ins-primary);
    --ins-btn-bg: transparent;
    --ins-btn-border-color: var(--ins-primary);
    --ins-btn-hover-bg: var(--ins-primary);
    --ins-btn-hover-border-color: var(--ins-primary);
    --ins-btn-focus-shadow-rgb: var(--ins-primary-rgb);
    --ins-btn-active-bg: var(--ins-primary);
    --ins-btn-active-border-color: var(--ins-primary)
}

.btn-soft-primary {
    --ins-btn-color: var(--ins-primary);
    --ins-btn-bg: var(--ins-primary-bg-subtle);
    --ins-btn-border-color: transparent;
    --ins-btn-hover-color: #fff;
    --ins-btn-hover-bg: var(--ins-primary);
    --ins-btn-hover-border-color: var(--ins-primary);
    --ins-btn-active-color: #fff;
    --ins-btn-active-bg: var(--ins-primary);
    --ins-btn-active-border-color: var(--ins-primary);
    --ins-btn-disabled-color: var(--ins-primary);
    --ins-btn-disabled-bg: var(--ins-primary);
    --ins-btn-disabled-border-color: var(--ins-primary);
    --ins-btn-focus-shadow-rgb: 0 0 0 0 rgba(var(--ins-primary)-rgb, 0.5)
}

.btn-ghost-primary {
    --ins-btn-color: var(--ins-primary);
    --ins-btn-bg: transparent;
    --ins-btn-border-color: transparent;
    --ins-btn-hover-color: #fff;
    --ins-btn-hover-bg: var(--ins-primary);
    --ins-btn-hover-border-color: var(--ins-primary);
    --ins-btn-active-color: var(--ins-primary);
    --ins-btn-active-bg: var(--ins-primary-bg-subtle);
    --ins-btn-active-border-color: var(--ins-primary-bg-subtle);
    --ins-btn-disabled-color: var(--ins-primary-bg-subtle);
    --ins-btn-disabled-bg: var(--ins-primary-bg-subtle);
    --ins-btn-disabled-border-color: var(--ins-primary-bg-subtle);
    --ins-btn-focus-shadow-rgb: 0 0 0 0 rgba(var(--ins-primary)-rgb, 0.5)
}

.btn-secondary {
    --ins-btn-bg: var(--ins-secondary);
    --ins-btn-border-color: var(--ins-secondary);
    --ins-btn-hover-bg: var(--ins-secondary-text-emphasis);
    --ins-btn-hover-border-color: var(--ins-secondary-text-emphasis);
    --ins-btn-focus-shadow-rgb: var(--ins-secondary-rgb);
    --ins-btn-active-bg: var(--ins-secondary-text-emphasis);
    --ins-btn-active-border-color: var(--ins-secondary-text-emphasis);
    --ins-btn-disabled-bg: var(--ins-secondary);
    --ins-btn-disabled-border-color: var(--ins-secondary)
}

.btn-outline-secondary {
    --ins-btn-color: var(--ins-secondary);
    --ins-btn-bg: transparent;
    --ins-btn-border-color: var(--ins-secondary);
    --ins-btn-hover-bg: var(--ins-secondary);
    --ins-btn-hover-border-color: var(--ins-secondary);
    --ins-btn-focus-shadow-rgb: var(--ins-secondary-rgb);
    --ins-btn-active-bg: var(--ins-secondary);
    --ins-btn-active-border-color: var(--ins-secondary)
}

.btn-soft-secondary {
    --ins-btn-color: var(--ins-secondary);
    --ins-btn-bg: var(--ins-secondary-bg-subtle);
    --ins-btn-border-color: transparent;
    --ins-btn-hover-color: #fff;
    --ins-btn-hover-bg: var(--ins-secondary);
    --ins-btn-hover-border-color: var(--ins-secondary);
    --ins-btn-active-color: #fff;
    --ins-btn-active-bg: var(--ins-secondary);
    --ins-btn-active-border-color: var(--ins-secondary);
    --ins-btn-disabled-color: var(--ins-secondary);
    --ins-btn-disabled-bg: var(--ins-secondary);
    --ins-btn-disabled-border-color: var(--ins-secondary);
    --ins-btn-focus-shadow-rgb: 0 0 0 0 rgba(var(--ins-secondary)-rgb, 0.5)
}

.btn-ghost-secondary {
    --ins-btn-color: var(--ins-secondary);
    --ins-btn-bg: transparent;
    --ins-btn-border-color: transparent;
    --ins-btn-hover-color: #fff;
    --ins-btn-hover-bg: var(--ins-secondary);
    --ins-btn-hover-border-color: var(--ins-secondary);
    --ins-btn-active-color: var(--ins-secondary);
    --ins-btn-active-bg: var(--ins-secondary-bg-subtle);
    --ins-btn-active-border-color: var(--ins-secondary-bg-subtle);
    --ins-btn-disabled-color: var(--ins-secondary-bg-subtle);
    --ins-btn-disabled-bg: var(--ins-secondary-bg-subtle);
    --ins-btn-disabled-border-color: var(--ins-secondary-bg-subtle);
    --ins-btn-focus-shadow-rgb: 0 0 0 0 rgba(var(--ins-secondary)-rgb, 0.5)
}

.btn-success {
    --ins-btn-bg: var(--ins-success);
    --ins-btn-border-color: var(--ins-success);
    --ins-btn-hover-bg: var(--ins-success-text-emphasis);
    --ins-btn-hover-border-color: var(--ins-success-text-emphasis);
    --ins-btn-focus-shadow-rgb: var(--ins-success-rgb);
    --ins-btn-active-bg: var(--ins-success-text-emphasis);
    --ins-btn-active-border-color: var(--ins-success-text-emphasis);
    --ins-btn-disabled-bg: var(--ins-success);
    --ins-btn-disabled-border-color: var(--ins-success)
}

.btn-outline-success {
    --ins-btn-color: var(--ins-success);
    --ins-btn-bg: transparent;
    --ins-btn-border-color: var(--ins-success);
    --ins-btn-hover-bg: var(--ins-success);
    --ins-btn-hover-border-color: var(--ins-success);
    --ins-btn-focus-shadow-rgb: var(--ins-success-rgb);
    --ins-btn-active-bg: var(--ins-success);
    --ins-btn-active-border-color: var(--ins-success)
}

.btn-soft-success {
    --ins-btn-color: var(--ins-success);
    --ins-btn-bg: var(--ins-success-bg-subtle);
    --ins-btn-border-color: transparent;
    --ins-btn-hover-color: #fff;
    --ins-btn-hover-bg: var(--ins-success);
    --ins-btn-hover-border-color: var(--ins-success);
    --ins-btn-active-color: #fff;
    --ins-btn-active-bg: var(--ins-success);
    --ins-btn-active-border-color: var(--ins-success);
    --ins-btn-disabled-color: var(--ins-success);
    --ins-btn-disabled-bg: var(--ins-success);
    --ins-btn-disabled-border-color: var(--ins-success);
    --ins-btn-focus-shadow-rgb: 0 0 0 0 rgba(var(--ins-success)-rgb, 0.5)
}

.btn-ghost-success {
    --ins-btn-color: var(--ins-success);
    --ins-btn-bg: transparent;
    --ins-btn-border-color: transparent;
    --ins-btn-hover-color: #fff;
    --ins-btn-hover-bg: var(--ins-success);
    --ins-btn-hover-border-color: var(--ins-success);
    --ins-btn-active-color: var(--ins-success);
    --ins-btn-active-bg: var(--ins-success-bg-subtle);
    --ins-btn-active-border-color: var(--ins-success-bg-subtle);
    --ins-btn-disabled-color: var(--ins-success-bg-subtle);
    --ins-btn-disabled-bg: var(--ins-success-bg-subtle);
    --ins-btn-disabled-border-color: var(--ins-success-bg-subtle);
    --ins-btn-focus-shadow-rgb: 0 0 0 0 rgba(var(--ins-success)-rgb, 0.5)
}

.btn-info {
    --ins-btn-bg: var(--ins-info);
    --ins-btn-border-color: var(--ins-info);
    --ins-btn-hover-bg: var(--ins-info-text-emphasis);
    --ins-btn-hover-border-color: var(--ins-info-text-emphasis);
    --ins-btn-focus-shadow-rgb: var(--ins-info-rgb);
    --ins-btn-active-bg: var(--ins-info-text-emphasis);
    --ins-btn-active-border-color: var(--ins-info-text-emphasis);
    --ins-btn-disabled-bg: var(--ins-info);
    --ins-btn-disabled-border-color: var(--ins-info)
}

.btn-outline-info {
    --ins-btn-color: var(--ins-info);
    --ins-btn-bg: transparent;
    --ins-btn-border-color: var(--ins-info);
    --ins-btn-hover-bg: var(--ins-info);
    --ins-btn-hover-border-color: var(--ins-info);
    --ins-btn-focus-shadow-rgb: var(--ins-info-rgb);
    --ins-btn-active-bg: var(--ins-info);
    --ins-btn-active-border-color: var(--ins-info)
}

.btn-soft-info {
    --ins-btn-color: var(--ins-info);
    --ins-btn-bg: var(--ins-info-bg-subtle);
    --ins-btn-border-color: transparent;
    --ins-btn-hover-color: #fff;
    --ins-btn-hover-bg: var(--ins-info);
    --ins-btn-hover-border-color: var(--ins-info);
    --ins-btn-active-color: #fff;
    --ins-btn-active-bg: var(--ins-info);
    --ins-btn-active-border-color: var(--ins-info);
    --ins-btn-disabled-color: var(--ins-info);
    --ins-btn-disabled-bg: var(--ins-info);
    --ins-btn-disabled-border-color: var(--ins-info);
    --ins-btn-focus-shadow-rgb: 0 0 0 0 rgba(var(--ins-info)-rgb, 0.5)
}

.btn-ghost-info {
    --ins-btn-color: var(--ins-info);
    --ins-btn-bg: transparent;
    --ins-btn-border-color: transparent;
    --ins-btn-hover-color: #fff;
    --ins-btn-hover-bg: var(--ins-info);
    --ins-btn-hover-border-color: var(--ins-info);
    --ins-btn-active-color: var(--ins-info);
    --ins-btn-active-bg: var(--ins-info-bg-subtle);
    --ins-btn-active-border-color: var(--ins-info-bg-subtle);
    --ins-btn-disabled-color: var(--ins-info-bg-subtle);
    --ins-btn-disabled-bg: var(--ins-info-bg-subtle);
    --ins-btn-disabled-border-color: var(--ins-info-bg-subtle);
    --ins-btn-focus-shadow-rgb: 0 0 0 0 rgba(var(--ins-info)-rgb, 0.5)
}

.btn-warning {
    --ins-btn-bg: var(--ins-warning);
    --ins-btn-border-color: var(--ins-warning);
    --ins-btn-hover-bg: var(--ins-warning-text-emphasis);
    --ins-btn-hover-border-color: var(--ins-warning-text-emphasis);
    --ins-btn-focus-shadow-rgb: var(--ins-warning-rgb);
    --ins-btn-active-bg: var(--ins-warning-text-emphasis);
    --ins-btn-active-border-color: var(--ins-warning-text-emphasis);
    --ins-btn-disabled-bg: var(--ins-warning);
    --ins-btn-disabled-border-color: var(--ins-warning)
}

.btn-outline-warning {
    --ins-btn-color: var(--ins-warning);
    --ins-btn-bg: transparent;
    --ins-btn-border-color: var(--ins-warning);
    --ins-btn-hover-bg: var(--ins-warning);
    --ins-btn-hover-border-color: var(--ins-warning);
    --ins-btn-focus-shadow-rgb: var(--ins-warning-rgb);
    --ins-btn-active-bg: var(--ins-warning);
    --ins-btn-active-border-color: var(--ins-warning)
}

.btn-soft-warning {
    --ins-btn-color: var(--ins-warning);
    --ins-btn-bg: var(--ins-warning-bg-subtle);
    --ins-btn-border-color: transparent;
    --ins-btn-hover-color: #fff;
    --ins-btn-hover-bg: var(--ins-warning);
    --ins-btn-hover-border-color: var(--ins-warning);
    --ins-btn-active-color: #fff;
    --ins-btn-active-bg: var(--ins-warning);
    --ins-btn-active-border-color: var(--ins-warning);
    --ins-btn-disabled-color: var(--ins-warning);
    --ins-btn-disabled-bg: var(--ins-warning);
    --ins-btn-disabled-border-color: var(--ins-warning);
    --ins-btn-focus-shadow-rgb: 0 0 0 0 rgba(var(--ins-warning)-rgb, 0.5)
}

.btn-ghost-warning {
    --ins-btn-color: var(--ins-warning);
    --ins-btn-bg: transparent;
    --ins-btn-border-color: transparent;
    --ins-btn-hover-color: #fff;
    --ins-btn-hover-bg: var(--ins-warning);
    --ins-btn-hover-border-color: var(--ins-warning);
    --ins-btn-active-color: var(--ins-warning);
    --ins-btn-active-bg: var(--ins-warning-bg-subtle);
    --ins-btn-active-border-color: var(--ins-warning-bg-subtle);
    --ins-btn-disabled-color: var(--ins-warning-bg-subtle);
    --ins-btn-disabled-bg: var(--ins-warning-bg-subtle);
    --ins-btn-disabled-border-color: var(--ins-warning-bg-subtle);
    --ins-btn-focus-shadow-rgb: 0 0 0 0 rgba(var(--ins-warning)-rgb, 0.5)
}

.btn-danger {
    --ins-btn-bg: var(--ins-danger);
    --ins-btn-border-color: var(--ins-danger);
    --ins-btn-hover-bg: var(--ins-danger-text-emphasis);
    --ins-btn-hover-border-color: var(--ins-danger-text-emphasis);
    --ins-btn-focus-shadow-rgb: var(--ins-danger-rgb);
    --ins-btn-active-bg: var(--ins-danger-text-emphasis);
    --ins-btn-active-border-color: var(--ins-danger-text-emphasis);
    --ins-btn-disabled-bg: var(--ins-danger);
    --ins-btn-disabled-border-color: var(--ins-danger)
}

.btn-outline-danger {
    --ins-btn-color: var(--ins-danger);
    --ins-btn-bg: transparent;
    --ins-btn-border-color: var(--ins-danger);
    --ins-btn-hover-bg: var(--ins-danger);
    --ins-btn-hover-border-color: var(--ins-danger);
    --ins-btn-focus-shadow-rgb: var(--ins-danger-rgb);
    --ins-btn-active-bg: var(--ins-danger);
    --ins-btn-active-border-color: var(--ins-danger)
}

.btn-soft-danger {
    --ins-btn-color: var(--ins-danger);
    --ins-btn-bg: var(--ins-danger-bg-subtle);
    --ins-btn-border-color: transparent;
    --ins-btn-hover-color: #fff;
    --ins-btn-hover-bg: var(--ins-danger);
    --ins-btn-hover-border-color: var(--ins-danger);
    --ins-btn-active-color: #fff;
    --ins-btn-active-bg: var(--ins-danger);
    --ins-btn-active-border-color: var(--ins-danger);
    --ins-btn-disabled-color: var(--ins-danger);
    --ins-btn-disabled-bg: var(--ins-danger);
    --ins-btn-disabled-border-color: var(--ins-danger);
    --ins-btn-focus-shadow-rgb: 0 0 0 0 rgba(var(--ins-danger)-rgb, 0.5)
}

.btn-ghost-danger {
    --ins-btn-color: var(--ins-danger);
    --ins-btn-bg: transparent;
    --ins-btn-border-color: transparent;
    --ins-btn-hover-color: #fff;
    --ins-btn-hover-bg: var(--ins-danger);
    --ins-btn-hover-border-color: var(--ins-danger);
    --ins-btn-active-color: var(--ins-danger);
    --ins-btn-active-bg: var(--ins-danger-bg-subtle);
    --ins-btn-active-border-color: var(--ins-danger-bg-subtle);
    --ins-btn-disabled-color: var(--ins-danger-bg-subtle);
    --ins-btn-disabled-bg: var(--ins-danger-bg-subtle);
    --ins-btn-disabled-border-color: var(--ins-danger-bg-subtle);
    --ins-btn-focus-shadow-rgb: 0 0 0 0 rgba(var(--ins-danger)-rgb, 0.5)
}

.btn-purple {
    --ins-btn-bg: var(--ins-purple);
    --ins-btn-border-color: var(--ins-purple);
    --ins-btn-hover-bg: var(--ins-purple-text-emphasis);
    --ins-btn-hover-border-color: var(--ins-purple-text-emphasis);
    --ins-btn-focus-shadow-rgb: var(--ins-purple-rgb);
    --ins-btn-active-bg: var(--ins-purple-text-emphasis);
    --ins-btn-active-border-color: var(--ins-purple-text-emphasis);
    --ins-btn-disabled-bg: var(--ins-purple);
    --ins-btn-disabled-border-color: var(--ins-purple)
}

.btn-outline-purple {
    --ins-btn-color: var(--ins-purple);
    --ins-btn-bg: transparent;
    --ins-btn-border-color: var(--ins-purple);
    --ins-btn-hover-bg: var(--ins-purple);
    --ins-btn-hover-border-color: var(--ins-purple);
    --ins-btn-focus-shadow-rgb: var(--ins-purple-rgb);
    --ins-btn-active-bg: var(--ins-purple);
    --ins-btn-active-border-color: var(--ins-purple)
}

.btn-soft-purple {
    --ins-btn-color: var(--ins-purple);
    --ins-btn-bg: var(--ins-purple-bg-subtle);
    --ins-btn-border-color: transparent;
    --ins-btn-hover-color: #fff;
    --ins-btn-hover-bg: var(--ins-purple);
    --ins-btn-hover-border-color: var(--ins-purple);
    --ins-btn-active-color: #fff;
    --ins-btn-active-bg: var(--ins-purple);
    --ins-btn-active-border-color: var(--ins-purple);
    --ins-btn-disabled-color: var(--ins-purple);
    --ins-btn-disabled-bg: var(--ins-purple);
    --ins-btn-disabled-border-color: var(--ins-purple);
    --ins-btn-focus-shadow-rgb: 0 0 0 0 rgba(var(--ins-purple)-rgb, 0.5)
}

.btn-ghost-purple {
    --ins-btn-color: var(--ins-purple);
    --ins-btn-bg: transparent;
    --ins-btn-border-color: transparent;
    --ins-btn-hover-color: #fff;
    --ins-btn-hover-bg: var(--ins-purple);
    --ins-btn-hover-border-color: var(--ins-purple);
    --ins-btn-active-color: var(--ins-purple);
    --ins-btn-active-bg: var(--ins-purple-bg-subtle);
    --ins-btn-active-border-color: var(--ins-purple-bg-subtle);
    --ins-btn-disabled-color: var(--ins-purple-bg-subtle);
    --ins-btn-disabled-bg: var(--ins-purple-bg-subtle);
    --ins-btn-disabled-border-color: var(--ins-purple-bg-subtle);
    --ins-btn-focus-shadow-rgb: 0 0 0 0 rgba(var(--ins-purple)-rgb, 0.5)
}

.btn-light {
    --ins-btn-bg: var(--ins-light);
    --ins-btn-border-color: var(--ins-light);
    --ins-btn-hover-bg: var(--ins-light-text-emphasis);
    --ins-btn-hover-border-color: var(--ins-light-text-emphasis);
    --ins-btn-focus-shadow-rgb: var(--ins-light-rgb);
    --ins-btn-active-bg: var(--ins-light-text-emphasis);
    --ins-btn-active-border-color: var(--ins-light-text-emphasis);
    --ins-btn-disabled-bg: var(--ins-light);
    --ins-btn-disabled-border-color: var(--ins-light)
}

.btn-outline-light {
    --ins-btn-color: var(--ins-light);
    --ins-btn-bg: transparent;
    --ins-btn-border-color: var(--ins-light);
    --ins-btn-hover-bg: var(--ins-light);
    --ins-btn-hover-border-color: var(--ins-light);
    --ins-btn-focus-shadow-rgb: var(--ins-light-rgb);
    --ins-btn-active-bg: var(--ins-light);
    --ins-btn-active-border-color: var(--ins-light)
}

.btn-soft-light {
    --ins-btn-color: var(--ins-light);
    --ins-btn-bg: var(--ins-light-bg-subtle);
    --ins-btn-border-color: transparent;
    --ins-btn-hover-color: #fff;
    --ins-btn-hover-bg: var(--ins-light);
    --ins-btn-hover-border-color: var(--ins-light);
    --ins-btn-active-color: #fff;
    --ins-btn-active-bg: var(--ins-light);
    --ins-btn-active-border-color: var(--ins-light);
    --ins-btn-disabled-color: var(--ins-light);
    --ins-btn-disabled-bg: var(--ins-light);
    --ins-btn-disabled-border-color: var(--ins-light);
    --ins-btn-focus-shadow-rgb: 0 0 0 0 rgba(var(--ins-light)-rgb, 0.5)
}

.btn-ghost-light {
    --ins-btn-color: var(--ins-light);
    --ins-btn-bg: transparent;
    --ins-btn-border-color: transparent;
    --ins-btn-hover-color: #fff;
    --ins-btn-hover-bg: var(--ins-light);
    --ins-btn-hover-border-color: var(--ins-light);
    --ins-btn-active-color: var(--ins-light);
    --ins-btn-active-bg: var(--ins-light-bg-subtle);
    --ins-btn-active-border-color: var(--ins-light-bg-subtle);
    --ins-btn-disabled-color: var(--ins-light-bg-subtle);
    --ins-btn-disabled-bg: var(--ins-light-bg-subtle);
    --ins-btn-disabled-border-color: var(--ins-light-bg-subtle);
    --ins-btn-focus-shadow-rgb: 0 0 0 0 rgba(var(--ins-light)-rgb, 0.5)
}

.btn-dark {
    --ins-btn-bg: var(--ins-dark);
    --ins-btn-border-color: var(--ins-dark);
    --ins-btn-hover-bg: var(--ins-dark-text-emphasis);
    --ins-btn-hover-border-color: var(--ins-dark-text-emphasis);
    --ins-btn-focus-shadow-rgb: var(--ins-dark-rgb);
    --ins-btn-active-bg: var(--ins-dark-text-emphasis);
    --ins-btn-active-border-color: var(--ins-dark-text-emphasis);
    --ins-btn-disabled-bg: var(--ins-dark);
    --ins-btn-disabled-border-color: var(--ins-dark)
}

.btn-outline-dark {
    --ins-btn-color: var(--ins-dark);
    --ins-btn-bg: transparent;
    --ins-btn-border-color: var(--ins-dark);
    --ins-btn-hover-bg: var(--ins-dark);
    --ins-btn-hover-border-color: var(--ins-dark);
    --ins-btn-focus-shadow-rgb: var(--ins-dark-rgb);
    --ins-btn-active-bg: var(--ins-dark);
    --ins-btn-active-border-color: var(--ins-dark)
}

.btn-soft-dark {
    --ins-btn-color: var(--ins-dark);
    --ins-btn-bg: var(--ins-dark-bg-subtle);
    --ins-btn-border-color: transparent;
    --ins-btn-hover-color: #fff;
    --ins-btn-hover-bg: var(--ins-dark);
    --ins-btn-hover-border-color: var(--ins-dark);
    --ins-btn-active-color: #fff;
    --ins-btn-active-bg: var(--ins-dark);
    --ins-btn-active-border-color: var(--ins-dark);
    --ins-btn-disabled-color: var(--ins-dark);
    --ins-btn-disabled-bg: var(--ins-dark);
    --ins-btn-disabled-border-color: var(--ins-dark);
    --ins-btn-focus-shadow-rgb: 0 0 0 0 rgba(var(--ins-dark)-rgb, 0.5)
}

.btn-ghost-dark {
    --ins-btn-color: var(--ins-dark);
    --ins-btn-bg: transparent;
    --ins-btn-border-color: transparent;
    --ins-btn-hover-color: #fff;
    --ins-btn-hover-bg: var(--ins-dark);
    --ins-btn-hover-border-color: var(--ins-dark);
    --ins-btn-active-color: var(--ins-dark);
    --ins-btn-active-bg: var(--ins-dark-bg-subtle);
    --ins-btn-active-border-color: var(--ins-dark-bg-subtle);
    --ins-btn-disabled-color: var(--ins-dark-bg-subtle);
    --ins-btn-disabled-bg: var(--ins-dark-bg-subtle);
    --ins-btn-disabled-border-color: var(--ins-dark-bg-subtle);
    --ins-btn-focus-shadow-rgb: 0 0 0 0 rgba(var(--ins-dark)-rgb, 0.5)
}

.btn-default {
    --ins-btn-color: var(--ins-dark);
    --ins-btn-bg: transparent;
    --ins-btn-border-color: rgba(var(--ins-dark-rgb), 0.1);
    --ins-btn-hover-color: var(--ins-dark);
    --ins-btn-hover-bg: rgba(var(--ins-dark-rgb), 0.02);
    --ins-btn-hover-border-color: rgba(var(--ins-dark-rgb), 0.3);
    --ins-btn-active-bg: var(--ins-tertiary-bg);
    --ins-btn-active-color: var(--ins-dark);
    --ins-btn-active-border-color: rgba(var(--ins-dark-rgb), 0.15);
    --ins-btn-focus-shadow-rgb: 0 0 0 0 rgba(var(--ins-light-rgb), 0.5)
}

.btn-light {
    --ins-btn-color: var(--ins-dark);
    --ins-btn-bg: var(--ins-light);
    --ins-btn-border-color: transparent;
    --ins-btn-hover-color: var(--ins-primary);
    --ins-btn-hover-bg: var(--ins-light);
    --ins-btn-hover-border-color: transparent;
    --ins-btn-active-bg: var(--ins-tertiary-bg);
    --ins-btn-active-color: var(--ins-tertiary-color);
    --ins-btn-active-border-color: var(--ins-tertiary-bg);
    --ins-btn-focus-shadow-rgb: 0 0 0 0 rgba(var(--ins-light-rgb), 0.5)
}

.btn-outline-light {
    --ins-btn-color: var(--ins-dark);
    --ins-btn-bg: transparent;
    --ins-btn-border-color: var(--ins-light);
    --ins-btn-hover-color: var(--ins-dark);
    --ins-btn-hover-bg: var(--ins-tertiary-bg);
    --ins-btn-hover-border-color: var(--ins-light);
    --ins-btn-active-bg: var(--ins-tertiary-bg);
    --ins-btn-active-color: var(--ins-dark);
    --ins-btn-active-border-color: var(--ins-light);
    --ins-btn-focus-shadow-rgb: 0 0 0 0 rgba(var(--ins-light-rgb), 0.5)
}

.btn-outline-dark {
    --ins-btn-color: var(--ins-dark);
    --ins-btn-bg: transparent;
    --ins-btn-border-color: var(--ins-dark);
    --ins-btn-hover-color: var(--ins-light);
    --ins-btn-hover-bg: var(--ins-dark);
    --ins-btn-hover-border-color: var(--ins-dark);
    --ins-btn-active-bg: var(--ins-dark);
    --ins-btn-active-color: var(--ins-light);
    --ins-btn-active-border-color: var(--ins-dark);
    --ins-btn-focus-shadow-rgb: 0 0 0 0 rgba(var(--ins-dark-rgb), 0.5)
}

.btn-soft-dark {
    --ins-btn-hover-color: var(--ins-light);
    --ins-btn-active-color: var(--ins-light)
}

html[data-bs-theme=dark] .btn-default {
    --ins-btn-color: var(--ins-body-color);
    --ins-btn-bg: transparent;
    --ins-btn-border-color: rgba(var(--ins-dark-rgb), 1);
    --ins-btn-hover-color: var(--ins-primary);
    --ins-btn-hover-bg: rgba(var(--ins-dark-rgb), 0.02);
    --ins-btn-hover-border-color: rgba(var(--ins-primary-rgb), 0.75);
    --ins-btn-active-bg: var(--ins-tertiary-bg);
    --ins-btn-active-color: var(--ins-dark);
    --ins-btn-active-border-color: rgba(var(--ins-primary-rgb), 0.75);
    --ins-btn-focus-shadow-rgb: 0 0 0 0 rgba(var(--ins-light-rgb), 0.5)
}

html[data-bs-theme=dark] .btn-light {
    --ins-btn-bg: rgba(var(--ins-white-rgb), 0.1);
    --ins-btn-color: var(--ins-body-color);
    --ins-btn-hover-bg: rgba(var(--ins-white-rgb), 0.1);
    --ins-btn-hover-border-color: transparent;
    --ins-btn-active-bg: rgba(var(--ins-white-rgb), 0.1);
    --ins-btn-active-border-color: transparent
}

html[data-bs-theme=dark] .btn-dark {
    --ins-btn-bg: var(--ins-border-color);
    --ins-btn-border-color: var(--ins-border-color);
    --ins-btn-color: var(--ins-body-color);
    --ins-btn-hover-color: var(--ins-white);
    --ins-btn-hover-bg: rgba(var(--ins-white-rgb), 0.1);
    --ins-btn-hover-border-color: transparent;
    --ins-btn-active-color: var(--ins-white);
    --ins-btn-active-bg: rgba(var(--ins-white-rgb), 0.1);
    --ins-btn-active-border-color: transparent
}

html[data-bs-theme=dark] .btn-outline-light {
    --ins-btn-color: var(--ins-white);
    --ins-btn-bg: transparent;
    --ins-btn-border-color: rgba(var(--ins-white-rgb), 0.1);
    --ins-btn-hover-bg: rgba(var(--ins-white-rgb), 0.1);
    --ins-btn-hover-border-color: rgba(var(--ins-white-rgb), 0.1);
    --ins-btn-active-bg: rgba(var(--ins-white-rgb), 0.1);
    --ins-btn-active-border-color: transparent
}

html[data-bs-theme=dark] .btn-outline-dark {
    --ins-btn-color: var(--ins-white);
    --ins-btn-bg: transparent;
    --ins-btn-border-color: var(--ins-border-color);
    --ins-btn-hover-color: var(--ins-white);
    --ins-btn-hover-bg: rgba(var(--ins-white-rgb), 0.1);
    --ins-btn-hover-border-color: transparent;
    --ins-btn-active-color: var(--ins-white);
    --ins-btn-active-bg: rgba(var(--ins-white-rgb), 0.1);
    --ins-btn-active-border-color: transparent
}

html[data-bs-theme=dark] .btn-ghost-dark,
html[data-bs-theme=dark] .btn-soft-dark {
    --ins-btn-hover-color: var(--ins-white);
    --ins-btn-hover-bg: rgba(var(--ins-white-rgb), 0.1);
    --ins-btn-hover-border-color: transparent;
    --ins-btn-active-color: var(--ins-white);
    --ins-btn-active-bg: rgba(var(--ins-white-rgb), 0.1);
    --ins-btn-active-border-color: transparent
}

.badge {
    vertical-align: middle
}

.badge-soft-primary {
    --ins-badge-color: var(--ins-primary);
    background-color: var(--ins-primary-bg-subtle)
}

.badge-soft-primary[href] {
    color: var(--ins-primary);
    text-decoration: none;
    background-color: var(--ins-primary-bg-subtle)
}

.badge-soft-primary[href]:is(:hover, :focus) {
    color: var(--ins-primary);
    text-decoration: none;
    background-color: var(--ins-primary-bg-subtle)
}

.badge-soft-secondary {
    --ins-badge-color: var(--ins-secondary);
    background-color: var(--ins-secondary-bg-subtle)
}

.badge-soft-secondary[href] {
    color: var(--ins-secondary);
    text-decoration: none;
    background-color: var(--ins-secondary-bg-subtle)
}

.badge-soft-secondary[href]:is(:hover, :focus) {
    color: var(--ins-secondary);
    text-decoration: none;
    background-color: var(--ins-secondary-bg-subtle)
}

.badge-soft-success {
    --ins-badge-color: var(--ins-success);
    background-color: var(--ins-success-bg-subtle)
}

.badge-soft-success[href] {
    color: var(--ins-success);
    text-decoration: none;
    background-color: var(--ins-success-bg-subtle)
}

.badge-soft-success[href]:is(:hover, :focus) {
    color: var(--ins-success);
    text-decoration: none;
    background-color: var(--ins-success-bg-subtle)
}

.badge-soft-info {
    --ins-badge-color: var(--ins-info);
    background-color: var(--ins-info-bg-subtle)
}

.badge-soft-info[href] {
    color: var(--ins-info);
    text-decoration: none;
    background-color: var(--ins-info-bg-subtle)
}

.badge-soft-info[href]:is(:hover, :focus) {
    color: var(--ins-info);
    text-decoration: none;
    background-color: var(--ins-info-bg-subtle)
}

.badge-soft-warning {
    --ins-badge-color: var(--ins-warning);
    background-color: var(--ins-warning-bg-subtle)
}

.badge-soft-warning[href] {
    color: var(--ins-warning);
    text-decoration: none;
    background-color: var(--ins-warning-bg-subtle)
}

.badge-soft-warning[href]:is(:hover, :focus) {
    color: var(--ins-warning);
    text-decoration: none;
    background-color: var(--ins-warning-bg-subtle)
}

.badge-soft-danger {
    --ins-badge-color: var(--ins-danger);
    background-color: var(--ins-danger-bg-subtle)
}

.badge-soft-danger[href] {
    color: var(--ins-danger);
    text-decoration: none;
    background-color: var(--ins-danger-bg-subtle)
}

.badge-soft-danger[href]:is(:hover, :focus) {
    color: var(--ins-danger);
    text-decoration: none;
    background-color: var(--ins-danger-bg-subtle)
}

.badge-soft-purple {
    --ins-badge-color: var(--ins-purple);
    background-color: var(--ins-purple-bg-subtle)
}

.badge-soft-purple[href] {
    color: var(--ins-purple);
    text-decoration: none;
    background-color: var(--ins-purple-bg-subtle)
}

.badge-soft-purple[href]:is(:hover, :focus) {
    color: var(--ins-purple);
    text-decoration: none;
    background-color: var(--ins-purple-bg-subtle)
}

.badge-soft-light {
    --ins-badge-color: var(--ins-light);
    background-color: var(--ins-light-bg-subtle)
}

.badge-soft-light[href] {
    color: var(--ins-light);
    text-decoration: none;
    background-color: var(--ins-light-bg-subtle)
}

.badge-soft-light[href]:is(:hover, :focus) {
    color: var(--ins-light);
    text-decoration: none;
    background-color: var(--ins-light-bg-subtle)
}

.badge-soft-dark {
    --ins-badge-color: var(--ins-dark);
    background-color: var(--ins-dark-bg-subtle)
}

.badge-soft-dark[href] {
    color: var(--ins-dark);
    text-decoration: none;
    background-color: var(--ins-dark-bg-subtle)
}

.badge-soft-dark[href]:is(:hover, :focus) {
    color: var(--ins-dark);
    text-decoration: none;
    background-color: var(--ins-dark-bg-subtle)
}

.badge-outline-primary {
    --ins-badge-color: var(--ins-primary);
    border: 1px solid var(--ins-primary);
    background-color: transparent
}

.badge-outline-primary[href] {
    color: var(--ins-primary);
    text-decoration: none;
    background-color: var(--ins-primary-bg-subtle)
}

.badge-outline-primary[href]:is(:hover, :focus) {
    color: var(--ins-primary);
    text-decoration: none;
    background-color: var(--ins-primary-bg-subtle)
}

.badge-outline-secondary {
    --ins-badge-color: var(--ins-secondary);
    border: 1px solid var(--ins-secondary);
    background-color: transparent
}

.badge-outline-secondary[href] {
    color: var(--ins-secondary);
    text-decoration: none;
    background-color: var(--ins-secondary-bg-subtle)
}

.badge-outline-secondary[href]:is(:hover, :focus) {
    color: var(--ins-secondary);
    text-decoration: none;
    background-color: var(--ins-secondary-bg-subtle)
}

.badge-outline-success {
    --ins-badge-color: var(--ins-success);
    border: 1px solid var(--ins-success);
    background-color: transparent
}

.badge-outline-success[href] {
    color: var(--ins-success);
    text-decoration: none;
    background-color: var(--ins-success-bg-subtle)
}

.badge-outline-success[href]:is(:hover, :focus) {
    color: var(--ins-success);
    text-decoration: none;
    background-color: var(--ins-success-bg-subtle)
}

.badge-outline-info {
    --ins-badge-color: var(--ins-info);
    border: 1px solid var(--ins-info);
    background-color: transparent
}

.badge-outline-info[href] {
    color: var(--ins-info);
    text-decoration: none;
    background-color: var(--ins-info-bg-subtle)
}

.badge-outline-info[href]:is(:hover, :focus) {
    color: var(--ins-info);
    text-decoration: none;
    background-color: var(--ins-info-bg-subtle)
}

.badge-outline-warning {
    --ins-badge-color: var(--ins-warning);
    border: 1px solid var(--ins-warning);
    background-color: transparent
}

.badge-outline-warning[href] {
    color: var(--ins-warning);
    text-decoration: none;
    background-color: var(--ins-warning-bg-subtle)
}

.badge-outline-warning[href]:is(:hover, :focus) {
    color: var(--ins-warning);
    text-decoration: none;
    background-color: var(--ins-warning-bg-subtle)
}

.badge-outline-danger {
    --ins-badge-color: var(--ins-danger);
    border: 1px solid var(--ins-danger);
    background-color: transparent
}

.badge-outline-danger[href] {
    color: var(--ins-danger);
    text-decoration: none;
    background-color: var(--ins-danger-bg-subtle)
}

.badge-outline-danger[href]:is(:hover, :focus) {
    color: var(--ins-danger);
    text-decoration: none;
    background-color: var(--ins-danger-bg-subtle)
}

.badge-outline-purple {
    --ins-badge-color: var(--ins-purple);
    border: 1px solid var(--ins-purple);
    background-color: transparent
}

.badge-outline-purple[href] {
    color: var(--ins-purple);
    text-decoration: none;
    background-color: var(--ins-purple-bg-subtle)
}

.badge-outline-purple[href]:is(:hover, :focus) {
    color: var(--ins-purple);
    text-decoration: none;
    background-color: var(--ins-purple-bg-subtle)
}

.badge-outline-light {
    --ins-badge-color: var(--ins-light);
    border: 1px solid var(--ins-light);
    background-color: transparent
}

.badge-outline-light[href] {
    color: var(--ins-light);
    text-decoration: none;
    background-color: var(--ins-light-bg-subtle)
}

.badge-outline-light[href]:is(:hover, :focus) {
    color: var(--ins-light);
    text-decoration: none;
    background-color: var(--ins-light-bg-subtle)
}

.badge-outline-dark {
    --ins-badge-color: var(--ins-dark);
    border: 1px solid var(--ins-dark);
    background-color: transparent
}

.badge-outline-dark[href] {
    color: var(--ins-dark);
    text-decoration: none;
    background-color: var(--ins-dark-bg-subtle)
}

.badge-outline-dark[href]:is(:hover, :focus) {
    color: var(--ins-dark);
    text-decoration: none;
    background-color: var(--ins-dark-bg-subtle)
}

.badge-default {
    --ins-badge-color: var(--ins-body-color);
    border: 1px solid rgba(var(--ins-dark-rgb), .2)
}

.badge-label {
    border-radius: 0;
    padding: calc(var(--ins-badge-padding-y) * 1.5) calc(var(--ins-badge-padding-x) * 2)
}

.badge-circle,
.badge-square {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 1rem;
    min-width: 1rem;
    padding: 0 .1rem;
    line-height: 0
}

.badge.badge-circle {
    border-radius: 50%;
    padding: 0;
    min-width: unset;
    width: 1rem
}

.card {
    -webkit-box-shadow: var(--ins-theme-card-box-shadow);
    box-shadow: var(--ins-theme-card-box-shadow);
    margin-bottom: 1.25rem;
    padding: 10px;
}

.card.card-collapse .card-header {
    border-bottom: 0
}

.card[class*=text] .card-action-item {
    background-color: rgba(var(--ins-white-rgb), .2) !important;
    color: #fff !important
}

.card .card-title {
    font-size: 15px;
    text-transform: none
}

.card.card-bordered {
    border: none;
    border-right: 3px solid
}

.card-bg {
    background-color: var(--ins-secondary-bg)
}

.card-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-bottom: 1px dashed #1870a8;
}

.card-header.border-dashed {
    border-bottom-style: dashed !important
}

.card-out-of-container {
    margin-right: calc((1.25rem + var(--ins-theme-card-border-width)) * -1);
    margin-left: calc((1.25rem + var(--ins-theme-card-border-width)) * -1);
    border-radius: 0;
    border-top: 0
}

html[data-layout=topnav] .card-out-of-container {
    margin-right: 0;
    margin-top: 1.25rem;
    margin-left: 0;
    border-radius: var(--ins-border-radius)
}

.card-action {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: .25rem;
    margin-right: auto
}

.card-action .card-action-item {
    display: inline-block;
    font-size: 16px;
    height: 24px;
    width: 24px;
    line-height: 22px;
    text-align: center;
    border-radius: 50%;
    background-color: rgba(var(--ins-light-rgb), .75);
    color: #6c757d;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out
}

.card-action .card-action-item i {
    vertical-align: middle
}

.card-action .card-action-item:hover {
    background-color: rgba(var(--ins-primary-rgb), .2);
    color: var(--ins-primary)
}

.card-overlay {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(var(--ins-primary-rgb), .15);
    backdrop-filter: blur(2px);
    display: none;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    z-index: 10;
    border-radius: .3rem
}

.card-h-100 {
    height: calc(100% - 1.25rem)
}

.code-body {
    display: none
}

.code-body pre {
    max-height: 300px;
    scrollbar-width: thin
}

.card-top-sticky {
    top: calc(var(--ins-topbar-height) + 1.25rem)
}

.card-tabs {
    border-bottom: 1px solid var(--ins-border-color) !important
}

.card-tabs .card-header-tabs {
    margin-top: calc(var(--ins-card-cap-padding-y) * -1);
    border-bottom: 0 !important
}

.card-tabs .nav-link {
    --ins-nav-link-padding-y: calc(var(--ins-card-cap-padding-y) + 2px)
}

.dropdown-menu {
    -webkit-box-shadow: var(--ins-dropdown-box-shadow);
    box-shadow: var(--ins-dropdown-box-shadow);
    -webkit-animation-name: DropDownSlideUp;
    animation-name: DropDownSlideUp;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    will-change: transform;
    position: absolute;
    z-index: 1000
}

.dropdown-menu[data-popper-placement=top-start],
.dropdown-menu[data-popper-placement=top] {
    -webkit-animation-name: DropDownSlideDown;
    animation-name: DropDownSlideDown
}

@-webkit-keyframes DropDownSlideUp {
    100% {
        margin-top: 0
    }

    0% {
        margin-top: 3px
    }
}

@keyframes DropDownSlideUp {
    100% {
        margin-top: 0
    }

    0% {
        margin-top: 3px
    }
}

@-webkit-keyframes DropDownSlideDown {
    100% {
        margin-bottom: 0
    }

    0% {
        margin-bottom: 2px
    }
}

@keyframes DropDownSlideDown {
    100% {
        margin-bottom: 0
    }

    0% {
        margin-bottom: 2px
    }
}

@media (min-width:768px) {
    .dropdown-menu-xxl {
        width: 740px
    }

    .dropdown-menu-xl {
        width: 600px
    }
}

@media (min-width:576px) {
    .dropdown-menu-lg {
        width: 320px
    }

    .dropdown-menu-md {
        width: 250px
    }

    .dropdown-menu-full {
        width: auto;
        position: fixed !important;
        right: 10px !important;
        left: 10px !important
    }
}

.drop-arrow-none:after {
    display: none
}

.dropdown-toggle-split:before {
    content: "";
    position: absolute;
    background-color: rgba(255, 255, 255, .12);
    top: calc(var(--ins-border-width) * -1);
    bottom: calc(var(--ins-border-width) * -1);
    left: calc(var(--ins-border-width) * -1);
    right: 0;
    border-radius: var(--ins-border-radius) 0 0 var(--ins-border-radius)
}

.dropstart .dropdown-toggle-split::before {
    inset: auto;
    border-radius: 0;
    position: relative;
    z-index: 1
}

.dropstart .dropdown-toggle-split::after {
    content: "";
    display: inline-block;
    position: absolute;
    background-color: rgba(49, 58, 70, .1);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 0 var(--ins-border-radius) var(--ins-border-radius) 0;
    border: none;
    margin-right: 0
}

.form-control:hover,
.form-select:hover {
    border-color: var(--ins-dark-border-subtle)
}

.form-control-sm {
    line-height: normal
}

input.form-control[type=color],
input.form-control[type=range] {
    min-height: calc(1.5em + .9064rem + calc(var(--ins-border-width) * 2))
}

input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.form-check-primary .form-check-input:checked {
    background-color: var(--ins-primary);
    border-color: var(--ins-primary)
}

.form-check-secondary .form-check-input:checked {
    background-color: var(--ins-secondary);
    border-color: var(--ins-secondary)
}

.form-check-success .form-check-input:checked {
    background-color: var(--ins-success);
    border-color: var(--ins-success)
}

.form-check-info .form-check-input:checked {
    background-color: var(--ins-info);
    border-color: var(--ins-info)
}

.form-check-warning .form-check-input:checked {
    background-color: var(--ins-warning);
    border-color: var(--ins-warning)
}

.form-check-danger .form-check-input:checked {
    background-color: var(--ins-danger);
    border-color: var(--ins-danger)
}

.form-check-purple .form-check-input:checked {
    background-color: var(--ins-purple);
    border-color: var(--ins-purple)
}

.form-check-light .form-check-input:checked {
    background-color: var(--ins-light);
    border-color: var(--ins-light)
}

.form-check-dark .form-check-input:checked {
    background-color: var(--ins-dark);
    border-color: var(--ins-dark)
}

.card-radio {
    padding: 0
}

.card-radio .form-check-label {
    background-color: var(--ins-secondary-bg);
    border: 1px solid var(--ins-border-color);
    border-radius: .3rem;
    padding: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    position: relative;
    padding-left: 32px
}

.card-radio .form-check-label:hover {
    cursor: pointer
}

.card-radio .form-check-input {
    display: none
}

.card-radio .form-check-input:checked+.form-check-label:before {
    content: "\f746";
    font-family: tabler-icons;
    position: absolute;
    bottom: 2px;
    left: 6px;
    font-size: 28px;
    color: var(--ins-danger)
}

.form-check-input-light {
    background-color: rgba(var(--ins-light-rgb), .9);
    border-color: rgba(var(--ins-light-rgb), .9);
    -webkit-box-shadow: inset 0 1px 2px rgba(var(--ins-dark-rgb), .05);
    box-shadow: inset 0 1px 2px rgba(var(--ins-dark-rgb), .05)
}

.modal-title {
    color: inherit
}

.modal-full-width {
    width: 95%;
    max-width: none
}

.modal-top {
    margin: 0 auto
}

.modal-bottom {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -ms-flex-pack: end;
    -webkit-box-pack: end;
    justify-content: flex-end;
    height: 100%;
    margin: 0 auto;
    -ms-flex-line-pack: center;
    align-content: center
}

.modal-backdrop {
    backdrop-filter: blur(6px)
}

.modal .modal-dialog {
    -webkit-transition: none;
    transition: none;
    -webkit-transform: scale(.85);
    transform: scale(.85);
    opacity: 0
}

.modal.show .modal-dialog {
    -webkit-animation: zoomInModal .1s ease-out forwards;
    animation: zoomInModal .1s ease-out forwards
}

@-webkit-keyframes zoomInModal {
    from {
        -webkit-transform: scale(.85);
        transform: scale(.85);
        opacity: 0
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}

@keyframes zoomInModal {
    from {
        -webkit-transform: scale(.85);
        transform: scale(.85);
        opacity: 0
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}

.nav-pills>li>a,
.nav-tabs>li>a {
    font-weight: var(--ins-font-weight-semibold)
}

.nav-pills-primary {
    --ins-nav-pills-link-active-bg: #1ab394;
    --ins-nav-link-hover-color: #1ab394
}

.nav-pills-secondary {
    --ins-nav-pills-link-active-bg: #1c84c6;
    --ins-nav-link-hover-color: #1c84c6
}

.nav-pills-success {
    --ins-nav-pills-link-active-bg: #0acf97;
    --ins-nav-link-hover-color: #0acf97
}

.nav-pills-info {
    --ins-nav-pills-link-active-bg: #23c6c8;
    --ins-nav-link-hover-color: #23c6c8
}

.nav-pills-warning {
    --ins-nav-pills-link-active-bg: #f8ac59;
    --ins-nav-link-hover-color: #f8ac59
}

.nav-pills-danger {
    --ins-nav-pills-link-active-bg: #FF477B;
    --ins-nav-link-hover-color: #FF477B
}

.nav-pills-purple {
    --ins-nav-pills-link-active-bg: #7b70ef;
    --ins-nav-link-hover-color: #7b70ef
}

.nav-pills-light {
    --ins-nav-pills-link-active-bg: #eef2f7;
    --ins-nav-link-hover-color: #eef2f7
}

.nav-pills-dark {
    --ins-nav-pills-link-active-bg: #313a46;
    --ins-nav-link-hover-color: #313a46
}

.nav-tabs.nav-bordered {
    border-bottom: 1px solid var(--ins-border-color);
    padding: 10px;
}

.nav-tabs.nav-bordered .nav-item .nav-link {
    border: 0
}

.nav-tabs.nav-bordered .nav-item .nav-link.active {
    border-bottom: 1px solid var(--ins-primary);
    background-color: #e2ebe9;
    height: 40px;
}

.nav-tabs.nav-bordered-primary .nav-item .nav-link:focus,
.nav-tabs.nav-bordered-primary .nav-item .nav-link:hover {
    color: #1ab394
}

.nav-tabs.nav-bordered-primary .nav-item .nav-link.active {
    border-bottom: 1px solid #1ab394;
    color: #1ab394
}

.nav-tabs.nav-bordered-secondary .nav-item .nav-link:focus,
.nav-tabs.nav-bordered-secondary .nav-item .nav-link:hover {
    color: #1c84c6
}

.nav-tabs.nav-bordered-secondary .nav-item .nav-link.active {
    border-bottom: 1px solid #1c84c6;
    color: #1c84c6
}

.nav-tabs.nav-bordered-success .nav-item .nav-link:focus,
.nav-tabs.nav-bordered-success .nav-item .nav-link:hover {
    color: #0acf97
}

.nav-tabs.nav-bordered-success .nav-item .nav-link.active {
    border-bottom: 1px solid #0acf97;
    color: #0acf97
}

.nav-tabs.nav-bordered-info .nav-item .nav-link:focus,
.nav-tabs.nav-bordered-info .nav-item .nav-link:hover {
    color: #23c6c8
}

.nav-tabs.nav-bordered-info .nav-item .nav-link.active {
    border-bottom: 1px solid #23c6c8;
    color: #23c6c8
}

.nav-tabs.nav-bordered-warning .nav-item .nav-link:focus,
.nav-tabs.nav-bordered-warning .nav-item .nav-link:hover {
    color: #f8ac59
}

.nav-tabs.nav-bordered-warning .nav-item .nav-link.active {
    border-bottom: 1px solid #f8ac59;
    color: #f8ac59
}

.nav-tabs.nav-bordered-danger .nav-item .nav-link:focus,
.nav-tabs.nav-bordered-danger .nav-item .nav-link:hover {
    color: #FF477B
}

.nav-tabs.nav-bordered-danger .nav-item .nav-link.active {
    border-bottom: 1px solid #FF477B;
    color: #FF477B
}

.nav-tabs.nav-bordered-purple .nav-item .nav-link:focus,
.nav-tabs.nav-bordered-purple .nav-item .nav-link:hover {
    color: #7b70ef
}

.nav-tabs.nav-bordered-purple .nav-item .nav-link.active {
    border-bottom: 1px solid #7b70ef;
    color: #7b70ef
}

.nav-tabs.nav-bordered-light .nav-item .nav-link:focus,
.nav-tabs.nav-bordered-light .nav-item .nav-link:hover {
    color: #eef2f7
}

.nav-tabs.nav-bordered-light .nav-item .nav-link.active {
    border-bottom: 1px solid #eef2f7;
    color: #eef2f7
}

.nav-tabs.nav-bordered-dark .nav-item .nav-link:focus,
.nav-tabs.nav-bordered-dark .nav-item .nav-link:hover {
    color: #313a46
}

.nav-tabs.nav-bordered-dark .nav-item .nav-link.active {
    border-bottom: 1px solid #313a46;
    color: #313a46
}

.pagination .page-link svg {
    height: 14px
}

.dt-paging .pagination .page-link,
.pagination-boxed .page-link {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-right: .35rem !important;
    border-radius: var(--ins-border-radius) !important;
    height: calc(.75rem + 1.5em + 2px);
    min-width: calc(.75rem + 1.5em + 2px);
    padding: .1rem
}

.dt-paging .pagination.pagination-sm .page-link,
.pagination-boxed.pagination-sm .page-link {
    height: calc(.5rem + 1.5em + 2px);
    min-width: calc(.5rem + 1.5em + 2px)
}

.dt-paging .pagination.pagination-lg .page-link,
.pagination-boxed.pagination-lg .page-link {
    height: calc(1.5rem + 1.5em + 2px);
    min-width: calc(1.5rem + 1.5em + 2px)
}

.pagination-rounded .page-link {
    border-radius: 50% !important
}

.pagination-primary {
    --ins-pagination-hover-color: var(--ins-primary);
    --ins-pagination-active-bg: var(--ins-primary);
    --ins-pagination-active-border-color: var(--ins-primary)
}

.pagination-secondary {
    --ins-pagination-hover-color: var(--ins-secondary);
    --ins-pagination-active-bg: var(--ins-secondary);
    --ins-pagination-active-border-color: var(--ins-secondary)
}

.pagination-success {
    --ins-pagination-hover-color: var(--ins-success);
    --ins-pagination-active-bg: var(--ins-success);
    --ins-pagination-active-border-color: var(--ins-success)
}

.pagination-info {
    --ins-pagination-hover-color: var(--ins-info);
    --ins-pagination-active-bg: var(--ins-info);
    --ins-pagination-active-border-color: var(--ins-info)
}

.pagination-warning {
    --ins-pagination-hover-color: var(--ins-warning);
    --ins-pagination-active-bg: var(--ins-warning);
    --ins-pagination-active-border-color: var(--ins-warning)
}

.pagination-danger {
    --ins-pagination-hover-color: var(--ins-danger);
    --ins-pagination-active-bg: var(--ins-danger);
    --ins-pagination-active-border-color: var(--ins-danger)
}

.pagination-purple {
    --ins-pagination-hover-color: var(--ins-purple);
    --ins-pagination-active-bg: var(--ins-purple);
    --ins-pagination-active-border-color: var(--ins-purple)
}

.pagination-light {
    --ins-pagination-hover-color: var(--ins-light);
    --ins-pagination-active-bg: var(--ins-light);
    --ins-pagination-active-border-color: var(--ins-light)
}

.pagination-dark {
    --ins-pagination-hover-color: var(--ins-dark);
    --ins-pagination-active-bg: var(--ins-dark);
    --ins-pagination-active-border-color: var(--ins-dark)
}

.pagination-soft-primary {
    --ins-pagination-hover-color: var(--ins-primary);
    --ins-pagination-active-color: var(--ins-primary);
    --ins-pagination-active-bg: var(--ins-primary-bg-subtle);
    --ins-pagination-active-border-color: transparent
}

.pagination-soft-secondary {
    --ins-pagination-hover-color: var(--ins-secondary);
    --ins-pagination-active-color: var(--ins-secondary);
    --ins-pagination-active-bg: var(--ins-secondary-bg-subtle);
    --ins-pagination-active-border-color: transparent
}

.pagination-soft-success {
    --ins-pagination-hover-color: var(--ins-success);
    --ins-pagination-active-color: var(--ins-success);
    --ins-pagination-active-bg: var(--ins-success-bg-subtle);
    --ins-pagination-active-border-color: transparent
}

.pagination-soft-info {
    --ins-pagination-hover-color: var(--ins-info);
    --ins-pagination-active-color: var(--ins-info);
    --ins-pagination-active-bg: var(--ins-info-bg-subtle);
    --ins-pagination-active-border-color: transparent
}

.pagination-soft-warning {
    --ins-pagination-hover-color: var(--ins-warning);
    --ins-pagination-active-color: var(--ins-warning);
    --ins-pagination-active-bg: var(--ins-warning-bg-subtle);
    --ins-pagination-active-border-color: transparent
}

.pagination-soft-danger {
    --ins-pagination-hover-color: var(--ins-danger);
    --ins-pagination-active-color: var(--ins-danger);
    --ins-pagination-active-bg: var(--ins-danger-bg-subtle);
    --ins-pagination-active-border-color: transparent
}

.pagination-soft-purple {
    --ins-pagination-hover-color: var(--ins-purple);
    --ins-pagination-active-color: var(--ins-purple);
    --ins-pagination-active-bg: var(--ins-purple-bg-subtle);
    --ins-pagination-active-border-color: transparent
}

.pagination-soft-light {
    --ins-pagination-hover-color: var(--ins-light);
    --ins-pagination-active-color: var(--ins-light);
    --ins-pagination-active-bg: var(--ins-light-bg-subtle);
    --ins-pagination-active-border-color: transparent
}

.pagination-soft-dark {
    --ins-pagination-hover-color: var(--ins-dark);
    --ins-pagination-active-color: var(--ins-dark);
    --ins-pagination-active-bg: var(--ins-dark-bg-subtle);
    --ins-pagination-active-border-color: transparent
}

.popover-primary {
    --ins-popover-max-width: 200px !important;
    --ins-popover-border-color: transparent;
    --ins-popover-header-bg: rgba(255, 255, 255, .1) !important;
    --ins-popover-header-color: var(--ins-white) !important;
    --ins-popover-bg: var(--ins-primary);
    --ins-popover-body-color: var(--ins-white) !important;
    --ins-popover-body-padding-x: 1rem !important;
    --ins-popover-body-padding-y: .5rem !important
}

.popover-secondary {
    --ins-popover-max-width: 200px !important;
    --ins-popover-border-color: transparent;
    --ins-popover-header-bg: rgba(255, 255, 255, .1) !important;
    --ins-popover-header-color: var(--ins-white) !important;
    --ins-popover-bg: var(--ins-secondary);
    --ins-popover-body-color: var(--ins-white) !important;
    --ins-popover-body-padding-x: 1rem !important;
    --ins-popover-body-padding-y: .5rem !important
}

.popover-success {
    --ins-popover-max-width: 200px !important;
    --ins-popover-border-color: transparent;
    --ins-popover-header-bg: rgba(255, 255, 255, .1) !important;
    --ins-popover-header-color: var(--ins-white) !important;
    --ins-popover-bg: var(--ins-success);
    --ins-popover-body-color: var(--ins-white) !important;
    --ins-popover-body-padding-x: 1rem !important;
    --ins-popover-body-padding-y: .5rem !important
}

.popover-info {
    --ins-popover-max-width: 200px !important;
    --ins-popover-border-color: transparent;
    --ins-popover-header-bg: rgba(255, 255, 255, .1) !important;
    --ins-popover-header-color: var(--ins-white) !important;
    --ins-popover-bg: var(--ins-info);
    --ins-popover-body-color: var(--ins-white) !important;
    --ins-popover-body-padding-x: 1rem !important;
    --ins-popover-body-padding-y: .5rem !important
}

.popover-warning {
    --ins-popover-max-width: 200px !important;
    --ins-popover-border-color: transparent;
    --ins-popover-header-bg: rgba(255, 255, 255, .1) !important;
    --ins-popover-header-color: var(--ins-white) !important;
    --ins-popover-bg: var(--ins-warning);
    --ins-popover-body-color: var(--ins-white) !important;
    --ins-popover-body-padding-x: 1rem !important;
    --ins-popover-body-padding-y: .5rem !important
}

.popover-danger {
    --ins-popover-max-width: 200px !important;
    --ins-popover-border-color: transparent;
    --ins-popover-header-bg: rgba(255, 255, 255, .1) !important;
    --ins-popover-header-color: var(--ins-white) !important;
    --ins-popover-bg: var(--ins-danger);
    --ins-popover-body-color: var(--ins-white) !important;
    --ins-popover-body-padding-x: 1rem !important;
    --ins-popover-body-padding-y: .5rem !important
}

.popover-purple {
    --ins-popover-max-width: 200px !important;
    --ins-popover-border-color: transparent;
    --ins-popover-header-bg: rgba(255, 255, 255, .1) !important;
    --ins-popover-header-color: var(--ins-white) !important;
    --ins-popover-bg: var(--ins-purple);
    --ins-popover-body-color: var(--ins-white) !important;
    --ins-popover-body-padding-x: 1rem !important;
    --ins-popover-body-padding-y: .5rem !important
}

.popover-light {
    --ins-popover-max-width: 200px !important;
    --ins-popover-border-color: transparent;
    --ins-popover-header-bg: rgba(255, 255, 255, .1) !important;
    --ins-popover-header-color: var(--ins-white) !important;
    --ins-popover-bg: var(--ins-light);
    --ins-popover-body-color: var(--ins-white) !important;
    --ins-popover-body-padding-x: 1rem !important;
    --ins-popover-body-padding-y: .5rem !important
}

.popover-dark {
    --ins-popover-max-width: 200px !important;
    --ins-popover-border-color: transparent;
    --ins-popover-header-bg: rgba(255, 255, 255, .1) !important;
    --ins-popover-header-color: var(--ins-white) !important;
    --ins-popover-bg: var(--ins-dark);
    --ins-popover-body-color: var(--ins-white) !important;
    --ins-popover-body-padding-x: 1rem !important;
    --ins-popover-body-padding-y: .5rem !important
}

@media print {

    .app-topbar,
    .footer,
    .page-title-head,
    .sidenav-menu {
        display: none !important
    }

    .card-body,
    .content-page,
    body {
        padding: 0 !important;
        margin: 0
    }

    .card {
        -webkit-box-shadow: none;
        box-shadow: none;
        border: none;
        padding: 0
    }
}

.progress-sm {
    height: 5px
}

.progress-md {
    height: 8px
}

.progress-lg {
    height: 12px
}

.progress-xl {
    height: 15px
}

html {
    position: relative;
    min-height: 100%
}

body {
    overflow-x: hidden
}

a,
button {
    outline: 0 !important
}

b,
strong {
    font-weight: var(--ins-font-weight-semibold)
}

.border-dashed {
    --ins-border-style: dashed
}

.border-transparent {
    --ins-border-color: transparent
}

.link-reset {
    color: inherit;
    -webkit-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out
}

.link-reset:hover {
    color: var(--ins-primary)
}

svg.lucide {
    width: 1em;
    height: 1em
}

:root {
    --sk-size: 30px;
    --sk-color: var(--ins-primary)
}

.sk-wave {
    inline-size: 40px;
    white-space: nowrap
}

.shadow-inner {
    -webkit-box-shadow: inset 0 2px 8px rgba(0, 0, 0, .1);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, .1)
}

hr.border-dashed {
    border-top-style: dashed
}

html[data-bs-theme=dark] .text-bg-light {
    color: var(--ins-body-color) !important
}

.thead-sm>*>* {
    padding: .5rem .5rem !important
}

.table-custom tfoot>tr>th:first-child,
.table-custom thead>tr>th:first-child,
.table-custom tr td:first-child,
.table-custom tr th:first-child {
    padding-right: 1.125rem !important
}

.table-custom tfoot>tr>th:last-child,
.table-custom thead>tr>th:last-child,
.table-custom tr td:last-child,
.table-custom tr th:last-child {
    padding-left: 1.125rem !important
}

.table-nowrap td,
.table-nowrap th {
    white-space: nowrap
}

/* .table-select:has(.form-check-input:checked) tr:has(.form-check-input:checked) {
    background-color: rgba(var(--ins-warning-rgb), .1)
} */

.table tr>td .dropdown {
    position: static
}

.tooltip-primary {
    --ins-tooltip-bg: var(--ins-primary)
}

.tooltip-secondary {
    --ins-tooltip-bg: var(--ins-secondary)
}

.tooltip-success {
    --ins-tooltip-bg: var(--ins-success)
}

.tooltip-info {
    --ins-tooltip-bg: var(--ins-info)
}

.tooltip-warning {
    --ins-tooltip-bg: var(--ins-warning)
}

.tooltip-danger {
    --ins-tooltip-bg: var(--ins-danger)
}

.tooltip-purple {
    --ins-tooltip-bg: var(--ins-purple)
}

.tooltip-light {
    --ins-tooltip-bg: var(--ins-light)
}

.tooltip-dark {
    --ins-tooltip-bg: var(--ins-dark)
}

#preloader {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: var(--ins-body-bg);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    z-index: 9999
}

.app-search {
    position: relative
}

.app-search .form-control {
    padding-right: 40px
}


.app-search .app-search-icon {
    width: 40px;
    z-index: 5
}

.app-search svg {
    height: 18px
}

.app-search.app-search-sm .form-control {
    padding-right: 30px
}

.app-search.app-search-sm .app-search-icon {
    width: 30px
}

.app-search.app-search-sm svg {
    height: 16px
}

.app-search.app-search-lg .form-control {
    padding-right: 50px
}

.app-search.app-search-lg .app-search-icon {
    width: 50px
}

.app-search.app-search-lg svg {
    height: 24px
}

.app-search.app-search-pill .form-control {
    border-top-right-radius: 50rem;
    border-bottom-right-radius: 50rem
}

.app-search.app-search-pill .btn {
    border-top-left-radius: 50rem;
    border-bottom-left-radius: 50rem
}

.list-custom .list-group-item {
    border: 0;
    border-radius: .3rem;
    font-weight: var(--ins-font-weight-medium);
    padding: calc(var(--ins-list-group-item-padding-y) * .75) calc(var(--ins-list-group-item-padding-x) * .75)
}

.list-group.border-0 {
    --ins-list-group-border-width: 0
}

.list-group.border-dashed .list-group-item {
    border-style: dashed
}

.auth-box {
    padding: 50px
}

.auth-box .card-body {
    padding: 50px
}

.auth-brand {
    margin-bottom: 2rem
}

.auth-brand .logo-dark {
    display: block
}

.auth-brand .logo-light {
    display: none
}

.card-side-img {
    background-image: url(../images/auth.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.auth-overlay {
    background: -webkit-gradient(linear, right bottom, right top, from(#313a46), color-stop(rgba(49, 58, 70, .8)), to(rgba(49, 58, 70, .5)));
    background: linear-gradient(to top, #313a46, rgba(49, 58, 70, .8), rgba(49, 58, 70, .5))
}

html[data-bs-theme=dark] .auth-brand .logo-light {
    display: block
}

html[data-bs-theme=dark] .auth-brand .logo-dark {
    display: none
}

@media (min-width:768px) {
    .auth-box-form {
        max-width: 405px
    }

    .auth-sub-text {
        max-width: 300px
    }
}

.chat-list .list-group-item {
    padding: 12px 15px !important;
    border: none;
    border-radius: .3rem;
    margin-top: 0 !important
}

.chat-item .chat-message {
    max-width: 400px;
    font-weight: var(--ins-font-weight-medium)
}

.email-app .mark-as-read {
    opacity: .75
}

.email-editor .ql-container.ql-snow,
.email-editor .ql-toolbar.ql-snow {
    border-width: 0 0 1px 0;
    border-radius: 0
}

.error-glitch {
    position: relative;
    font-size: 120px;
    letter-spacing: 5px;
    font-weight: var(--ins-font-weight-bold);
    -webkit-animation: flicker 2s infinite;
    animation: flicker 2s infinite
}

.error-glitch::after,
.error-glitch::before {
    content: attr(data-text);
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    overflow: hidden
}

.error-glitch::before {
    color: #1ab394;
    z-index: -1;
    -webkit-animation: glitchTop 2s infinite;
    animation: glitchTop 2s infinite
}

.error-glitch::after {
    color: #FF477B;
    z-index: -1;
    -webkit-animation: glitchBottom 2s infinite;
    animation: glitchBottom 2s infinite
}

@-webkit-keyframes glitchTop {
    0% {
        clip-path: inset(0 0 80% 0);
        -webkit-transform: translate(3px, -3px);
        transform: translate(3px, -3px)
    }

    20% {
        clip-path: inset(0 0 20% 0);
        -webkit-transform: translate(-3px, -2px);
        transform: translate(-3px, -2px)
    }

    40% {
        clip-path: inset(0 0 60% 0);
        -webkit-transform: translate(1px, 2px);
        transform: translate(1px, 2px)
    }

    60% {
        clip-path: inset(0 0 40% 0);
        -webkit-transform: translate(-2px, -1px);
        transform: translate(-2px, -1px)
    }

    80% {
        clip-path: inset(0 0 70% 0);
        -webkit-transform: translate(3px, 3px);
        transform: translate(3px, 3px)
    }

    100% {
        clip-path: inset(0 0 90% 0);
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}

@keyframes glitchTop {
    0% {
        clip-path: inset(0 0 80% 0);
        -webkit-transform: translate(3px, -3px);
        transform: translate(3px, -3px)
    }

    20% {
        clip-path: inset(0 0 20% 0);
        -webkit-transform: translate(-3px, -2px);
        transform: translate(-3px, -2px)
    }

    40% {
        clip-path: inset(0 0 60% 0);
        -webkit-transform: translate(1px, 2px);
        transform: translate(1px, 2px)
    }

    60% {
        clip-path: inset(0 0 40% 0);
        -webkit-transform: translate(-2px, -1px);
        transform: translate(-2px, -1px)
    }

    80% {
        clip-path: inset(0 0 70% 0);
        -webkit-transform: translate(3px, 3px);
        transform: translate(3px, 3px)
    }

    100% {
        clip-path: inset(0 0 90% 0);
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}

@-webkit-keyframes glitchBottom {
    0% {
        clip-path: inset(80% 0 0 0);
        -webkit-transform: translate(-3px, 2px);
        transform: translate(-3px, 2px)
    }

    20% {
        clip-path: inset(20% 0 0 0);
        -webkit-transform: translate(2px, -1px);
        transform: translate(2px, -1px)
    }

    40% {
        clip-path: inset(60% 0 0 0);
        -webkit-transform: translate(-1px, 2px);
        transform: translate(-1px, 2px)
    }

    60% {
        clip-path: inset(40% 0 0 0);
        -webkit-transform: translate(2px, 1px);
        transform: translate(2px, 1px)
    }

    80% {
        clip-path: inset(70% 0 0 0);
        -webkit-transform: translate(-3px, -3px);
        transform: translate(-3px, -3px)
    }

    100% {
        clip-path: inset(90% 0 0 0);
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}

@keyframes glitchBottom {
    0% {
        clip-path: inset(80% 0 0 0);
        -webkit-transform: translate(-3px, 2px);
        transform: translate(-3px, 2px)
    }

    20% {
        clip-path: inset(20% 0 0 0);
        -webkit-transform: translate(2px, -1px);
        transform: translate(2px, -1px)
    }

    40% {
        clip-path: inset(60% 0 0 0);
        -webkit-transform: translate(-1px, 2px);
        transform: translate(-1px, 2px)
    }

    60% {
        clip-path: inset(40% 0 0 0);
        -webkit-transform: translate(2px, 1px);
        transform: translate(2px, 1px)
    }

    80% {
        clip-path: inset(70% 0 0 0);
        -webkit-transform: translate(-3px, -3px);
        transform: translate(-3px, -3px)
    }

    100% {
        clip-path: inset(90% 0 0 0);
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}

@-webkit-keyframes flicker {

    0%,
    100%,
    19%,
    21%,
    23%,
    25%,
    54%,
    56% {
        opacity: 1
    }

    20%,
    24%,
    55% {
        opacity: .6
    }
}

@keyframes flicker {

    0%,
    100%,
    19%,
    21%,
    23%,
    25%,
    54%,
    56% {
        opacity: 1
    }

    20%,
    24%,
    55% {
        opacity: .6
    }
}

.error-wave-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 120px;
    font-weight: 900
}

.error-wave-char {
    display: inline-block;
    -webkit-animation: wave 2s infinite ease-in-out;
    animation: wave 2s infinite ease-in-out;
    background: -webkit-gradient(linear, right top, left top, from(#1ab394), to(#7b70ef));
    background: linear-gradient(-90deg, #1ab394, #7b70ef);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}

.error-wave-char:nth-child(1) {
    -webkit-animation-delay: 0s;
    animation-delay: 0s
}

.error-wave-char:nth-child(2) {
    -webkit-animation-delay: .2s;
    animation-delay: .2s
}

.error-wave-char:nth-child(3) {
    -webkit-animation-delay: .4s;
    animation-delay: .4s
}

@-webkit-keyframes wave {

    0%,
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    50% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px)
    }
}

@keyframes wave {

    0%,
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    50% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px)
    }
}

.error-text-alt .error-wave-char {
    background: radial-gradient(circle, #f8ac59 0, #FF477B 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}

.kanban-app .kanban-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    overflow-x: auto
}

.kanban-app .kanban-content .kanban-board {
    min-width: 340px !important;
    width: 320px !important;
    border-left: 1px dashed var(--ins-border-color)
}

.kanban-app .kanban-content .kanban-board-group {
    height: calc(100vh - 320px);
    overflow-x: hidden
}

.kanban-app .kanban-content .kanban-board-group ul {
    list-style: none;
    padding: 0
}

.kanban-app .kanban-content .kanban-item .card:hover {
    -webkit-box-shadow: 0 .25rem 1rem rgba(var(--ins-body-color-rgb), .2) !important;
    box-shadow: 0 .25rem 1rem rgba(var(--ins-body-color-rgb), .2) !important
}

.sortable-fallback {
    opacity: 1 !important
}

.sortable-fallback .card {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
    opacity: 1 !important
}

.sortable-item-ghost .card {
    background-color: rgba(var(--ins-warning-rgb), .1) !important
}

.section-custom {
    padding: 3rem 1rem
}

@media (min-width:992px) {
    .section-custom {
        padding: 6.5rem 0
    }
}

.top-alert {
    background-color: #1e1f27;
    color: #fff
}

#landing-navbar {
    position: relative;
    width: 100%;
    -webkit-transition: -webkit-transform .3s ease;
    transition: -webkit-transform .3s ease;
    transition: transform .3s ease;
    transition: transform .3s ease, -webkit-transform .3s ease;
    background-color: var(--ins-secondary-bg)
}

#landing-navbar.top-fixed {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1000
}

#landing-navbar.top-fixed.top-hide {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%)
}

#landing-navbar.top-fixed.top-scroll-up {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-box-shadow: 0 .0625rem .125rem rgba(var(--ins-body-color-rgb), .15);
    box-shadow: 0 .0625rem .125rem rgba(var(--ins-body-color-rgb), .15)
}

.section-cta {
    min-height: 350px
}

.section-footer {
    background-color: #1e1f27;
    color: #858f9b
}

.section-footer .nav-link {
    color: inherit;
    font-size: 14px;
    font-weight: var(--ins-font-weight-medium)
}

.section-footer .nav-link:hover {
    color: #1ab394
}

html[data-bs-theme=dark] .top-alert {
    background-color: var(--ins-primary)
}

.outlook-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: calc(100vh - var(--ins-topbar-height) - 40px - 42px - 2.5rem)
}

.outlook-box.outlook-box-full {
    margin: -1.25rem;
    height: 100dvh
}

.outlook-box.outlook-box-full .outlook-left-menu {
    border-left: 1px solid var(--ins-border-color) !important
}

.outlook-box .outlook-list .nav-link.active {
    background-color: rgba(var(--ins-light-rgb), .45)
}

html[data-layout=topnav] .outlook-box {
    margin-bottom: 30px
}

html[data-layout=topnav] .outlook-box.outlook-box-full {
    margin: 0 0 30px 0
}

.outlook-left-menu {
    width: 280px
}

.outlook-left-menu.outlook-left-menu-sm {
    width: 225px
}

.outlook-left-menu.outlook-left-menu-md {
    width: 250px
}

.outlook-left-menu.outlook-left-menu-lg {
    width: 320px
}

@media (max-width:991.98px) {
    .outlook-box {
        position: relative;
        overflow: hidden
    }

    .outlook-box .offcanvas-lg {
        position: absolute
    }

    .outlook-box .offcanvas-backdrop {
        position: absolute
    }

    .outlook-left-menu {
        max-width: 280px
    }

    .outlook-left-menu.outlook-left-menu-sm {
        max-width: 225px
    }

    .outlook-left-menu.outlook-left-menu-md {
        max-width: 250px
    }

    .outlook-left-menu.outlook-left-menu-lg {
        max-width: 320px
    }
}

.pin-board {
    gap: 40px;
    padding: 30px
}

.pin-board .pin-board-item {
    display: block;
    height: 210px;
    width: 210px;
    padding: 1em;
    -webkit-box-shadow: -4px 3px 7px rgba(49, 58, 70, .25);
    box-shadow: -4px 3px 7px rgba(49, 58, 70, .25);
    -webkit-transition: -webkit-transform .15s linear;
    transition: -webkit-transform .15s linear;
    transition: transform .15s linear;
    transition: transform .15s linear, -webkit-transform .15s linear;
    -webkit-transform: rotate(6deg);
    transform: rotate(6deg)
}

.pin-board .pin-board-item:nth-of-type(even) {
    -webkit-transform: rotate(-4deg);
    transform: rotate(-4deg)
}

.pin-board .pin-board-item:hover {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    position: relative;
    z-index: 5
}

.pin-board a.pin-board-delete {
    position: absolute;
    left: 10px;
    bottom: 10px;
    color: inherit
}

.timeline-item {
    position: relative;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
}

.timeline-item:not(:last-of-type) .timeline-content::before {
    content: "";
    position: absolute;
    top: 5px;
    bottom: 0;
    right: -7px;
    width: 1px;
    border-right: 1px dashed var(--ins-border-color)
}

.timeline-dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    position: relative;
    z-index: 1
}

.timeline-time {
    width: 27%;
    text-align: right;
}


.timeline-content {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    position: relative
}

.timeline-icon-based .timeline-dot,
.timeline-icon-bordered .timeline-dot,
.timeline-users .timeline-dot {
    width: 30px;
    height: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.timeline-icon-based .timeline-item:not(:last-of-type) .timeline-content::before,
.timeline-icon-bordered .timeline-item:not(:last-of-type) .timeline-content::before,
.timeline-users .timeline-item:not(:last-of-type) .timeline-content::before {
    right: -16px;
    border-right: 2px dashed var(--ins-border-color)
}

.timeline-icon-bordered .timeline-dot {
    width: 31px;
    height: 31px;
    background-color: var(--ins-secondary-bg);
    border: 1px dashed var(--ins-border-color)
}

.timeline-icon-bordered .timeline-item:not(:last-of-type) .timeline-content::before {
    right: -16px;
    border-right: 1px dashed var(--ins-border-color)
}

.apex-charts {
    min-height: 10px !important
}

.apex-charts .apexcharts-canvas {
    margin: 0 auto
}

.apex-charts text,
.apexcharts-datalabels text,
.apexcharts-legend-text,
.apexcharts-subtitle-text,
.apexcharts-title-text,
.apexcharts-tooltip *,
.apexcharts-tooltip-text,
.apexcharts-tooltip-title,
.apexcharts-xaxis text,
.apexcharts-xaxistooltip-text,
.apexcharts-yaxis text {
    font-family: var(--ins-font-sans-serif) !important
}

.apexcharts-tooltip {
    border: 1px solid var(--ins-border-color) !important;
    background-color: var(--ins-secondary-bg) !important;
    -webkit-box-shadow: var(--ins-box-shadow) !important;
    box-shadow: var(--ins-box-shadow) !important
}

.apexcharts-tooltip .apexcharts-tooltip-title {
    background-color: rgba(var(--ins-light-rgb), .75) !important;
    border-bottom: 1px solid var(--ins-border-color) !important
}

.apexcharts-legend-series,
.apexcharts-legend-text {
    font-weight: var(--ins-font-weight-semibold)
}

.apexcharts-gridline {
    pointer-events: none;
    stroke-dasharray: 3
}

.apexcharts-grid-borders .apexcharts-gridline+line,
.apexcharts-gridline,
.apexcharts-pie circle,
.apexcharts-pie line,
.apexcharts-radar-series line,
.apexcharts-radar-series polygon,
.apexcharts-xaxis-tick {
    stroke: var(--ins-border-color)
}

.apexcharts-legend-text {
    color: var(--ins-tertiary-color) !important;
    font-size: 13px !important;
    vertical-align: middle
}

.apexcharts-legend-marker {
    vertical-align: middle;
    margin-left: 5px !important;
    top: 1px !important
}

.apexcharts-pie-label {
    fill: #fff !important
}

.apexcharts-subtitle-text,
.apexcharts-title-text,
.apexcharts-xaxis text,
.apexcharts-yaxis text {
    fill: var(--ins-secondary-color)
}

.apexcharts-yaxis-title {
    font-weight: var(--ins-font-weight-medium)
}

.apexcharts-annotation-rect {
    fill: var(--ins-tertiary-bg) !important
}

.apexcharts-xaxis-annotations rect,
.apexcharts-yaxis-annotations rect {
    stroke: none
}

.apex-toolbar .btn-light.active {
    background-color: var(--ins-primary);
    border-color: var(--ins-primary);
    color: #fff
}

.apexcharts-xaxistooltip,
.apexcharts-yaxistooltip {
    background-color: var(--ins-secondary-bg) !important;
    border: var(--ins-border-width) solid var(--ins-border-color) !important;
    -webkit-box-shadow: var(--ins-box-shadow) !important;
    box-shadow: var(--ins-box-shadow) !important;
    color: var(--ins-body-color) !important
}

.apexcharts-xaxistooltip-bottom::before {
    border-bottom-color: var(--ins-border-color) !important
}

.apexcharts-xaxistooltip-bottom::after {
    border-bottom-color: var(--ins-secondary-bg) !important
}

.apexcharts-xaxistooltip-top::before {
    border-top-color: var(--ins-border-color) !important
}

.apexcharts-xaxistooltip-top::after {
    border-top-color: var(--ins-secondary-bg) !important
}

.apexcharts-yaxistooltip-left::before {
    border-right-color: var(--ins-border-color) !important
}

.apexcharts-yaxistooltip-left::after {
    border-right-color: var(--ins-secondary-bg) !important
}

.apexcharts-datalabel-label,
.apexcharts-datalabel-value {
    fill: var(--ins-body-color) !important
}

.apexcharts-menu {
    background: var(--ins-secondary-bg) !important;
    padding: .25rem 0 !important;
    -webkit-box-shadow: var(--ins-box-shadow) !important;
    box-shadow: var(--ins-box-shadow) !important;
    border: var(--ins-border-width) solid var(--ins-border-color) !important;
    text-align: center !important
}

.apexcharts-menu .apexcharts-menu-item:hover {
    color: var(--ins-body-color) !important;
    background-color: var(--ins-tertiary-bg) !important
}

.apexcharts-track path {
    stroke: var(--ins-tertiary-bg)
}

.apexcharts-marker {
    stroke: var(--ins-body-bg)
}

.apexcharts-grid rect {
    fill: none
}

.apex-charts .apexcharts-bar-series path,
.apex-charts .apexcharts-heatmap-series rect,
.apex-charts .apexcharts-pie-series path,
.apex-charts .apexcharts-treemap rect {
    stroke: var(--ins-secondary-bg)
}

.apexcharts-data-labels {
    padding-right: 10px !important
}

:root {
    --fc-border-color: var(--ins-border-color);
    --fc-page-bg-color: var(--ins-secondary-bg);
    --fc-neutral-bg-color: var(--ins-light)
}

.fc td,
.fc th {
    border: var(--ins-border-width) solid var(--ins-light)
}

.fc .fc-toolbar .h2,
.fc .fc-toolbar h2 {
    font-size: 16px;
    line-height: 30px;
    text-transform: uppercase
}

@media (max-width:767.98px) {

    .fc .fc-toolbar .fc-center,
    .fc .fc-toolbar .fc-left,
    .fc .fc-toolbar .fc-right {
        float: none;
        display: block;
        text-align: center;
        clear: both;
        margin: 10px 0
    }

    .fc .fc-toolbar>*>* {
        float: none
    }

    .fc .fc-toolbar .fc-today-button {
        display: none
    }
}

.fc .fc-toolbar .btn {
    text-transform: capitalize
}

.fc .fc-col-header-cell {
    background-color: var(--ins-light)
}

.fc .fc-col-header-cell-cushion {
    display: block;
    padding: 8px 4px;
    color: var(--ins-body-color)
}

.fc .fc-daygrid-day-number {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 12px;
    font-weight: var(--ins-font-weight-medium);
    margin: 2px;
    color: var(--ins-body-color)
}

.fc .fc-daygrid-day.fc-day-today {
    background-color: rgba(26, 179, 148, .1)
}

.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
    background-color: var(--ins-primary);
    color: #fff
}

.fc .fc-timegrid-col.fc-day-today {
    background-color: rgba(26, 179, 148, .1)
}

.fc .fc-list-event:hover td {
    background: 0 0
}

.fc .fc-list-event-title a {
    color: #fff !important
}

.fc .fc-col-header,
.fc .fc-daygrid-body,
.fc .fc-scrollgrid-sync-table {
    width: 100% !important
}

.fc .fc-scrollgrid-section>* {
    border-right: var(--ins-border-width) solid var(--ins-light);
    border-top: var(--ins-border-width) solid var(--ins-light)
}

.fc .fc-scrollgrid {
    border: 0
}

.fc .fc-scrollgrid-section-liquid>td {
    border-top: 0
}

.fc .fc-multimonth {
    border-color: var(--ins-border-color)
}

.fc-theme-bootstrap a:not([href]) {
    color: var(--ins-body-color)
}

.fc-event {
    color: #fff
}

.fc th.fc-widget-header {
    background: var(--ins-gray-300);
    line-height: 20px;
    padding: 10px 0;
    text-transform: uppercase;
    font-weight: var(--ins-font-weight-bold)
}

.fc-unthemed .fc-content,
.fc-unthemed .fc-divider,
.fc-unthemed .fc-list-heading td,
.fc-unthemed .fc-list-view,
.fc-unthemed .fc-popover,
.fc-unthemed .fc-row,
.fc-unthemed tbody,
.fc-unthemed td,
.fc-unthemed th,
.fc-unthemed thead {
    border-color: #e7e9eb
}

.fc-unthemed td.fc-today {
    background: #f5f7fa
}

.fc-button {
    background: var(--ins-secondary-bg);
    border-color: var(--ins-border-color);
    color: #6c757d;
    text-transform: capitalize;
    -webkit-box-shadow: none;
    box-shadow: none;
    padding: 6px 12px !important;
    height: auto !important
}

.fc .fc-multimonth-multicol .fc-daygrid-more-link {
    border: 1px solid var(--ins-primary);
    display: block;
    float: none;
    padding: 1px;
    font-weight: var(--ins-font-weight-medium)
}

.fc-state-active,
.fc-state-disabled,
.fc-state-down {
    background-color: var(--ins-primary);
    color: #fff;
    text-shadow: none
}

.fc-event {
    border-radius: 2px;
    border: none;
    cursor: move;
    font-size: .8125rem;
    margin: 5px 7px;
    padding: 5px 5px;
    text-align: center
}

.fc-theme-standard .fc-popover .fc-popover-header {
    padding: 8px 14px
}

.fc-daygrid-dot-event.fc-event-mirror,
.fc-daygrid-dot-event:hover,
.fc-event,
.fc-event-dot {
    background-color: var(--ins-primary)
}

.fc-event-title,
.fc-sticky {
    font-weight: var(--ins-font-weight-semibold) !important;
    text-overflow: ellipsis;
    white-space: nowrap
}

.fc-daygrid-event-dot {
    border-color: #fff !important;
    display: none
}

.fc-event-time {
    display: none
}

.fc-event .fc-content {
    color: #fff
}

#external-events .external-event {
    text-align: right;
    padding: 8px 16px;
    margin: 6px 0
}

.fc-day-grid-event.fc-h-event.fc-event.fc-start.fc-end.bg-dark .fc-content {
    color: #eef2f7
}

.fc-next-button,
.fc-prev-button {
    position: relative;
    padding: 6px 8px !important
}

.fc-toolbar-chunk .fc-button-group .fc-button {
    color: var(--ins-secondary);
    background-color: rgba(28, 132, 198, .15);
    border: none;
    -webkit-box-shadow: none !important;
    box-shadow: none !important
}

.fc-toolbar-chunk .fc-button-group .fc-button.active,
.fc-toolbar-chunk .fc-button-group .fc-button:hover {
    color: #fff;
    background-color: var(--ins-secondary)
}

.fc-toolbar-chunk .fc-today-button {
    background-color: var(--ins-secondary) !important;
    border: var(--ins-secondary);
    -webkit-box-shadow: none !important;
    box-shadow: none !important
}

.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
    background-color: var(--ins-secondary) !important;
    border-color: var(--ins-secondary) !important;
    color: #fff !important
}

.fc .fc-button-primary {
    text-transform: capitalize
}

@media (max-width:575.98px) {
    .fc-toolbar {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16px
    }
}

#event-modal .event-details {
    display: none
}

#event-modal .view-event .event-form {
    display: none
}

#event-modal .view-event #event-category-tag {
    display: none
}

#event-modal .view-event .event-details {
    display: block
}

.fc-daygrid-event-harness .fc-daygrid-event {
    backdrop-filter: blur(4px)
}

.fc-timegrid-event-harness .fc-timegrid-event {
    backdrop-filter: blur(4px)
}

.fc-timegrid-slots table tr {
    border-color: var(--ins-border-color) !important
}

.fc-list-table {
    border-color: var(--ins-border-color)
}

.fc-daygrid-event-harness .fc-daygrid-event.bg-primary-subtle .fc-event-main,
.fc-daygrid-event-harness .fc-daygrid-event.bg-primary-subtle .fc-event-title {
    color: #1ab394 !important
}

.fc-timegrid-event-harness .fc-timegrid-event.bg-primary-subtle .fc-event-title {
    color: #1ab394 !important
}

.fc-list-table .fc-list-event.bg-primary-subtle {
    color: #1ab394 !important
}

.fc-list-table .fc-list-event.bg-primary-subtle .fc-list-event-title>a {
    color: #1ab394 !important
}

.fc-list-table .fc-list-event.bg-primary-subtle .fc-list-event-dot {
    border-color: #1ab394
}

.fc-daygrid-event-harness .fc-daygrid-event.bg-secondary-subtle .fc-event-main,
.fc-daygrid-event-harness .fc-daygrid-event.bg-secondary-subtle .fc-event-title {
    color: #1c84c6 !important
}

.fc-timegrid-event-harness .fc-timegrid-event.bg-secondary-subtle .fc-event-title {
    color: #1c84c6 !important
}

.fc-list-table .fc-list-event.bg-secondary-subtle {
    color: #1c84c6 !important
}

.fc-list-table .fc-list-event.bg-secondary-subtle .fc-list-event-title>a {
    color: #1c84c6 !important
}

.fc-list-table .fc-list-event.bg-secondary-subtle .fc-list-event-dot {
    border-color: #1c84c6
}

.fc-daygrid-event-harness .fc-daygrid-event.bg-success-subtle .fc-event-main,
.fc-daygrid-event-harness .fc-daygrid-event.bg-success-subtle .fc-event-title {
    color: #0acf97 !important
}

.fc-timegrid-event-harness .fc-timegrid-event.bg-success-subtle .fc-event-title {
    color: #0acf97 !important
}

.fc-list-table .fc-list-event.bg-success-subtle {
    color: #0acf97 !important
}

.fc-list-table .fc-list-event.bg-success-subtle .fc-list-event-title>a {
    color: #0acf97 !important
}

.fc-list-table .fc-list-event.bg-success-subtle .fc-list-event-dot {
    border-color: #0acf97
}

.fc-daygrid-event-harness .fc-daygrid-event.bg-info-subtle .fc-event-main,
.fc-daygrid-event-harness .fc-daygrid-event.bg-info-subtle .fc-event-title {
    color: #23c6c8 !important
}

.fc-timegrid-event-harness .fc-timegrid-event.bg-info-subtle .fc-event-title {
    color: #23c6c8 !important
}

.fc-list-table .fc-list-event.bg-info-subtle {
    color: #23c6c8 !important
}

.fc-list-table .fc-list-event.bg-info-subtle .fc-list-event-title>a {
    color: #23c6c8 !important
}

.fc-list-table .fc-list-event.bg-info-subtle .fc-list-event-dot {
    border-color: #23c6c8
}

.fc-daygrid-event-harness .fc-daygrid-event.bg-warning-subtle .fc-event-main,
.fc-daygrid-event-harness .fc-daygrid-event.bg-warning-subtle .fc-event-title {
    color: #f8ac59 !important
}

.fc-timegrid-event-harness .fc-timegrid-event.bg-warning-subtle .fc-event-title {
    color: #f8ac59 !important
}

.fc-list-table .fc-list-event.bg-warning-subtle {
    color: #f8ac59 !important
}

.fc-list-table .fc-list-event.bg-warning-subtle .fc-list-event-title>a {
    color: #f8ac59 !important
}

.fc-list-table .fc-list-event.bg-warning-subtle .fc-list-event-dot {
    border-color: #f8ac59
}

.fc-daygrid-event-harness .fc-daygrid-event.bg-danger-subtle .fc-event-main,
.fc-daygrid-event-harness .fc-daygrid-event.bg-danger-subtle .fc-event-title {
    color: #FF477B !important
}

.fc-timegrid-event-harness .fc-timegrid-event.bg-danger-subtle .fc-event-title {
    color: #FF477B !important
}

.fc-list-table .fc-list-event.bg-danger-subtle {
    color: #FF477B !important
}

.fc-list-table .fc-list-event.bg-danger-subtle .fc-list-event-title>a {
    color: #FF477B !important
}

.fc-list-table .fc-list-event.bg-danger-subtle .fc-list-event-dot {
    border-color: #FF477B
}

.fc-daygrid-event-harness .fc-daygrid-event.bg-purple-subtle .fc-event-main,
.fc-daygrid-event-harness .fc-daygrid-event.bg-purple-subtle .fc-event-title {
    color: #7b70ef !important
}

.fc-timegrid-event-harness .fc-timegrid-event.bg-purple-subtle .fc-event-title {
    color: #7b70ef !important
}

.fc-list-table .fc-list-event.bg-purple-subtle {
    color: #7b70ef !important
}

.fc-list-table .fc-list-event.bg-purple-subtle .fc-list-event-title>a {
    color: #7b70ef !important
}

.fc-list-table .fc-list-event.bg-purple-subtle .fc-list-event-dot {
    border-color: #7b70ef
}

.code-body .fc-daygrid-event-harness pre.fc-daygrid-event .fc-event-main,
.code-body .fc-daygrid-event-harness pre.fc-daygrid-event .fc-event-title,
.fc-daygrid-event-harness .code-body pre.fc-daygrid-event .fc-event-main,
.fc-daygrid-event-harness .code-body pre.fc-daygrid-event .fc-event-title,
.fc-daygrid-event-harness .fc-daygrid-event.bg-light-subtle .fc-event-main,
.fc-daygrid-event-harness .fc-daygrid-event.bg-light-subtle .fc-event-title {
    color: #eef2f7 !important
}

.code-body .fc-timegrid-event-harness pre.fc-timegrid-event .fc-event-title,
.fc-timegrid-event-harness .code-body pre.fc-timegrid-event .fc-event-title,
.fc-timegrid-event-harness .fc-timegrid-event.bg-light-subtle .fc-event-title {
    color: #eef2f7 !important
}

.code-body .fc-list-table pre.fc-list-event,
.fc-list-table .code-body pre.fc-list-event,
.fc-list-table .fc-list-event.bg-light-subtle {
    color: #eef2f7 !important
}

.code-body .fc-list-table pre.fc-list-event .fc-list-event-title>a,
.fc-list-table .code-body pre.fc-list-event .fc-list-event-title>a,
.fc-list-table .fc-list-event.bg-light-subtle .fc-list-event-title>a {
    color: #eef2f7 !important
}

.code-body .fc-list-table pre.fc-list-event .fc-list-event-dot,
.fc-list-table .code-body pre.fc-list-event .fc-list-event-dot,
.fc-list-table .fc-list-event.bg-light-subtle .fc-list-event-dot {
    border-color: #eef2f7
}

.fc-daygrid-event-harness .fc-daygrid-event.bg-dark-subtle .fc-event-main,
.fc-daygrid-event-harness .fc-daygrid-event.bg-dark-subtle .fc-event-title {
    color: #313a46 !important
}

.fc-timegrid-event-harness .fc-timegrid-event.bg-dark-subtle .fc-event-title {
    color: #313a46 !important
}

.fc-list-table .fc-list-event.bg-dark-subtle {
    color: #313a46 !important
}

.fc-list-table .fc-list-event.bg-dark-subtle .fc-list-event-title>a {
    color: #313a46 !important
}

.fc-list-table .fc-list-event.bg-dark-subtle .fc-list-event-dot {
    border-color: #313a46
}

.fc-daygrid-event-harness .fc-daygrid-event.bg-dark-subtle .fc-event-main,
.fc-daygrid-event-harness .fc-daygrid-event.bg-dark-subtle .fc-event-title {
    color: var(--ins-dark-text-emphasis) !important
}

.fc-direction-ltr {
    direction: rtl
}

.fc-direction-ltr .fc-toolbar>*>:not(:first-child) {
    margin-right: .75em
}

.choices[data-type*=select-one] {
    cursor: pointer
}

.choices[data-type*=select-one] .choices__input {
    padding: .4532rem .77rem !important;
    background-color: var(--ins-secondary-bg);
    border: 1px solid var(--ins-border-color);
    font-size: .813rem;
    border-radius: var(--ins-border-radius);
    color: var(--ins-body-color);
    margin-bottom: 10px
}

.choices[data-type*=select-one] .choices__input:hover {
    border-color: var(--ins-dark-border-subtle)
}

.choices[data-type*=select-one]:after {
    content: "";
    color: var(--ins-light);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%239ba6b7'  xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 16a1 1 0 0 1-.64-.23l-6-5a1 1 0 1 1 1.28-1.54L12 13.71l5.36-4.32a1 1 0 0 1 1.41.15a1 1 0 0 1-.14 1.46l-6 4.83A1 1 0 0 1 12 16'/%3E%3C/svg%3E");
    position: absolute;
    border: 0;
    top: 18px;
    left: 12px;
    right: auto;
    font-size: 20px;
    height: 20px;
    width: 20px;
    margin-top: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: -webkit-transform .2s ease-in-out;
    transition: -webkit-transform .2s ease-in-out;
    transition: transform .2s ease-in-out;
    transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out;
    pointer-events: none
}

.choices[data-type*=select-one].is-open:after {
    margin-top: 0;
    -webkit-transform: translateY(-50%) rotate(180deg);
    transform: translateY(-50%) rotate(180deg)
}

.choices[data-type*=select-one] .choices__button {
    left: 20px
}

.choices[data-type*=select-multiple] .choices__inner,
.choices[data-type*=text] .choices__inner {
    cursor: text;
    padding: .2266rem .385rem !important
}

.choices[data-type*=select-multiple] .choices__button,
.choices[data-type*=text] .choices__button {

    border-left: 0
}

.choices[data-type*=select-multiple] .choices__list--dropdown,
.choices[data-type*=text] .choices__list--dropdown {
    padding-bottom: 10px
}

.choices[data-type*=select-multiple] .choices__list--dropdown .choices__list,
.choices[data-type*=text] .choices__list--dropdown .choices__list {
    margin-bottom: 0
}

.choices[data-type*=select-multiple] .choices__input {
    padding-top: 3px
}

.input-light .choices__inner {
    background-color: var(--ins-light);
    border: none
}

.choices__inner {
    padding: .4532rem .77rem !important;
    vertical-align: middle;
    background-color: var(--ins-secondary-bg);
    border: var(--ins-border-width) solid var(--ins-border-color);
    border-radius: var(--ins-border-radius) !important;
    font-size: .813rem;
    min-height: auto
}

.choices__inner:hover {
    border-color: var(--ins-dark-border-subtle)
}

.choices__inner .choices__list--single {
    padding: 0 !important
}

.is-focused .choices__inner,
.is-open .choices__inner {
    border-color: var(--ins-dark-border-subtle)
}

.choices__list--multiple .choices__item {
    vertical-align: initial;
    border-radius: 7px;
    padding: 2px 7px;
    font-size: 11px;
    font-weight: 400;
    margin: 2px 0 2px 5px;
    background-color: var(--ins-primary);
    border: 1px solid var(--ins-primary);
    color: #fff;
    -webkit-box-shadow: 0 .0625rem .125rem rgba(var(--ins-body-color-rgb), .15);
    box-shadow: 0 .0625rem .125rem rgba(var(--ins-body-color-rgb), .15)
}

.choices__list--multiple .choices__item.is-highlighted {
    background-color: var(--ins-primary);
    border: 1px solid var(--ins-primary)
}

.is-disabled .choices__list--multiple .choices__item {
    background-color: var(--ins-secondary);
    border: 1px solid var(--ins-secondary)
}

.choices__list--dropdown {
    padding: 10px 10px 20px 10px;
    background-color: var(--ins-secondary-bg) !important;
    border: 1px solid var(--ins-border-color) !important;
    -webkit-box-shadow: var(--ins-box-shadow);
    box-shadow: var(--ins-box-shadow);
    border-radius: .3rem;
    -webkit-animation-name: DropDownSlideUp;
    animation-name: DropDownSlideUp;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    will-change: transform;
    width: 200px;

}

.choices__list--dropdown.is-active {
    -webkit-animation-name: DropDownSlideUp;
    animation-name: DropDownSlideUp
}

.choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: var(--ins-tertiary-bg) !important
}

.choices__list--dropdown .choices__list {
    margin: 0 -10px -16px
}

.choices__list--dropdown .choices__list::-webkit-scrollbar {
    -webkit-appearance: none
}

.choices__list--dropdown .choices__list::-webkit-scrollbar:vertical {
    width: 12px;
    margin-left: 15px
}

.choices__list--dropdown .choices__list::-webkit-scrollbar:horizontal {
    height: 12px
}

.choices__list--dropdown .choices__list::-webkit-scrollbar-thumb {
    background-color: rgba(var(--ins-dark-rgb), .1);
    border-radius: 10px;
    border: 2px solid var(--ins-secondary-bg)
}

.choices__list--dropdown .choices__list::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: var(--ins-secondary-bg)
}

.choices__list--dropdown .has-no-results {
    font-style: italic;
    font-weight: var(--ins-font-weight-medium)
}

.choices__list--dropdown .choices__item--selectable:after {
    display: none
}

.choices__list--dropdown .choices__list {
    max-height: 300px
}

.choices__list--dropdown .choices__item {
    font-size: .813rem !important;
    padding: .4rem 16px .4rem .9375rem !important
}

.choices__heading {
    font-weight: var(--ins-font-weight-semibold);
    padding: 10px 16px;
    border-bottom: 1px solid var(--ins-border-color);
    color: var(--ins-secondary-color)
}

.choices__input {
    background-color: var(--ins-secondary-bg);
    color: var(--ins-body-color);
    font-size: .813rem;
    margin-bottom: 0;
    padding: 2px 2px 2px 0
}

.choices__input::-webkit-input-placeholder {
    color: var(--ins-secondary-color)
}

.choices__input::-moz-placeholder {
    color: var(--ins-secondary-color)
}

.choices__input:-ms-input-placeholder {
    color: var(--ins-secondary-color)
}

.choices__input::-ms-input-placeholder {
    color: var(--ins-secondary-color)
}

.choices__input::placeholder {
    color: var(--ins-secondary-color)
}

.choices__placeholder {
    color: var(--ins-secondary-color);
    opacity: 1
}

.choices.is-disabled .choices__inner,
.choices.is-disabled .choices__input {
    background-color: var(--ins-tertiary-bg)
}

[data-bs-theme=dark] .choices[data-type*=select-one] .choices__button {
    -webkit-filter: invert(1) grayscale(100%) brightness(200%);
    filter: invert(1) grayscale(100%) brightness(200%)
}

[data-bs-theme=dark] .choices[data-type*=select-one]:after {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%238391a2'  xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 16a1 1 0 0 1-.64-.23l-6-5a1 1 0 1 1 1.28-1.54L12 13.71l5.36-4.32a1 1 0 0 1 1.41.15a1 1 0 0 1-.14 1.46l-6 4.83A1 1 0 0 1 12 16'/%3E%3C/svg%3E")
}

.pcr-app {
    background: var(--ins-secondary-bg);
    -webkit-box-shadow: var(--ins-box-shadow);
    box-shadow: var(--ins-box-shadow);
    border-radius: 4px;
    border: 1px solid var(--ins-border-color)
}

.pcr-app .pcr-interaction .pcr-type.active {
    background: var(--ins-primary)
}

.pcr-app .pcr-interaction .pcr-result {
    background-color: var(--ins-secondary-bg);
    color: var(--ins-body-color);
    border: 1px solid var(--ins-border-color);
    border-radius: .25rem
}

.pcr-app .pcr-interaction input {
    background-color: var(--ins-light);
    border-radius: .25rem !important
}

.pcr-app .pcr-interaction input:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: var(--ins-secondary-bg);
    border-color: var(--ins-primary-border-subtle)
}

.pcr-app .pcr-interaction .pcr-save {
    background: var(--ins-success) !important
}

.pcr-app .pcr-interaction .pcr-cancel,
.pcr-app .pcr-interaction .pcr-clear {
    background: var(--ins-danger) !important
}

.pickr .pcr-button {
    height: 36px;
    width: 150px;
    border-radius: .25rem
}

.pickr .pcr-button::after,
.pickr .pcr-button::before {
    border-radius: .25rem
}

.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview {
    margin-left: .75em;
    margin-right: 0
}

.pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser,
.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity {
    margin-right: .75em;
    margin-left: 0
}

.pcr-app[data-theme=monolith] .pcr-result {
    min-width: 100%
}

div.dt-container {
    margin-top: -.625rem
}

div.dt-container div.dt-length select {
    width: auto;
    display: inline-block;
    margin-left: .5em
}

div.dt-container div.dt-search {
    text-align: left
}

div.dt-container div.dt-search input {
    margin-right: .5em;
    display: inline-block;
    width: auto
}

div.dt-container div.dt-layout-table>div {
    display: block !important
}

div.dt-container div.dt-layout-full {
    width: 100%
}

.dt-paging .pagination {
    margin-bottom: 0;
    padding-top: calc(var(--ins-card-spacer-y) - .625rem)
}

.dt-info {
    padding-top: calc(var(--ins-card-spacer-y) - .625rem)
}

table.dataTable>tbody>tr .child span.dtr-title {
    font-weight: var(--ins-font-weight-semibold)
}

table.dataTable thead th {
    position: relative;
    cursor: pointer
}

table.dataTable thead th:after {
    content: "\eaa5";
    position: absolute;
    left: .6rem;
    bottom: 5px;
    color: var(--ins-secondary-color);
    font-size: 16px;
    font-weight: 400;
    font-family: tabler-icons !important;
    display: none
}

table.dataTable thead th[aria-sort=ascending]:after {
    content: "\eb26"
}

table.dataTable thead th[aria-sort=descending]:after {
    content: "\eb27"
}

table.dataTable thead th.dt-ordering-asc::after,
table.dataTable thead th.dt-ordering-desc::after,
table.dataTable thead th:hover::after {
    display: block
}

table.dataTable thead th.dt-orderable-none {
    cursor: default
}

table.dataTable thead th.dt-orderable-none::after {
    display: none
}

table.dataTable tbody>tr.selected,
table.dataTable tbody>tr>.selected {
    background-color: rgba(var(--ins-warning-rgb), .1);
    color: inherit
}

table.dataTable tbody>tr.selected td,
table.dataTable tbody>tr>.selected td {
    background-color: rgba(var(--ins-warning-rgb), .1);
    color: inherit
}

.select-info {
    background-color: var(--ins-warning-bg-subtle);
    padding: 3px 6px;
    border-radius: 3px;
    font-weight: var(--ins-font-weight-semibold)
}

.select-info .select-item {
    margin: 0 !important
}

div.dt-button-info {
    background-color: var(--ins-primary);
    border: none;
    color: #fff;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 3px;
    text-align: center;
    z-index: 21
}

div.dt-button-info .h2,
div.dt-button-info h2 {
    border-bottom: none;
    background-color: rgba(255, 255, 255, .2);
    color: #fff
}

div.dt-scroll-body tfoot tr,
div.dt-scroll-body thead tr {
    height: 0 !important;
    display: none !important
}

.dt-column-header {
    padding-left: 30px
}

.dt-column-title {
    padding-left: 30px
}

.dt-child-rows-btn {
    width: 1% !important;
    cursor: pointer
}

.dt-child-rows-btn .dt-column-header {
    padding-left: 0
}

.dt-hasChild .dt-child-rows-btn .ti-square-rounded-plus-filled::before {
    content: "נּ"
}

.column-search-input-bar th {
    cursor: default !important
}

.column-search-input-bar th::after {
    content: none !important
}

.column-search-input-bar th .dt-column-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    padding-left: 0 !important
}

.column-search-input-bar th .dt-column-title {
    padding-left: 0 !important
}

.checkbox-select-datatable .dt-column-header,
.checkbox-select-datatable .dt-column-title {
    padding-left: 0
}

table.dataTable.fixedHeader-floating,
table.dataTable.fixedHeader-locked {
    background-color: var(--ins-body-bg)
}

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

    div.dt-container div.dt-info,
    div.dt-container div.dt-length,
    div.dt-container div.dt-paging,
    div.dt-container div.dt-search {
        text-align: center
    }

    .dt-paging .pagination {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }

    .dt-length {
        margin-bottom: 10px
    }
}

.daterangepicker {
    font-family: var(--ins-font-sans-serif);
    border: var(--ins-border-width) solid var(--ins-border-color);
    -webkit-box-shadow: var(--ins-box-shadow);
    box-shadow: var(--ins-box-shadow);
    background-color: var(--ins-secondary-bg)
}

.daterangepicker .calendar-table {
    border: 1px solid var(--ins-secondary-bg);
    background-color: var(--ins-secondary-bg)
}

.daterangepicker .calendar-table td,
.daterangepicker .calendar-table th {
    color: var(--ins-body-color);
    text-transform: uppercase
}

.daterangepicker .calendar-table .next span,
.daterangepicker .calendar-table .prev span {
    border-color: var(--ins-body-color)
}

.daterangepicker .ranges li:hover {
    background-color: var(--ins-tertiary-bg)
}

.daterangepicker .ranges li.active {
    background-color: var(--ins-primary)
}

.daterangepicker td.in-range {
    background: var(--ins-tertiary-bg);
    color: var(--ins-tertiary-color)
}

.daterangepicker td.off,
.daterangepicker td.off.end-date,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date {
    background-color: var(--ins-secondary-bg);
    color: var(--ins-body-color);
    opacity: .5
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: var(--ins-primary);
    color: #fff
}

.daterangepicker td.active,
.daterangepicker td.active:hover,
.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
    background-color: var(--ins-primary);
    color: #fff
}

.daterangepicker td.active span,
.daterangepicker td.active:hover span,
.daterangepicker td.available:hover span,
.daterangepicker th.available:hover span {
    border-color: #fff
}

.daterangepicker:after {
    border-bottom: 6px solid var(--ins-secondary-bg)
}

.daterangepicker:before {
    border-bottom: 7px solid var(--ins-border-color)
}

.daterangepicker .drp-buttons {
    border-top: 1px solid var(--ins-border-color)
}

.daterangepicker .drp-buttons .btn {
    font-weight: var(--ins-btn-font-weight)
}

.daterangepicker select.ampmselect,
.daterangepicker select.hourselect,
.daterangepicker select.minuteselect,
.daterangepicker select.secondselect {
    background: var(--ins-tertiary-bg);
    border: 1px solid var(--ins-border-color);
    color: var(--ins-body-color);
    padding: 3px 10px;
    width: auto;
    border-radius: 4px
}

.daterangepicker.show-ranges .drp-calendar.left {
    border-right: 1px solid var(--ins-border-color) !important
}

.diff-output ins {
    background-color: rgba(var(--ins-success-rgb), .1);
    text-decoration: none;
    color: var(--ins-success)
}

.diff-output del {
    background-color: rgba(var(--ins-danger-rgb), .1);
    color: var(--ins-danger)
}

.dropzone {
    border: 2px dashed var(--ins-border-color);
    background: var(--ins-secondary-bg);
    border-radius: 8px;
    cursor: pointer;
    min-height: 150px;
    padding: 20px
}

.dropzone .dz-message {
    text-align: center;
    margin: 2rem 0
}

.dropzone.dz-started .dz-message {
    display: none
}

.filepond--root {
    margin-bottom: 0
}

.filepond--panel-root {
    border-bottom: 2px dashed var(--ins-border-color);
    background: var(--ins-secondary-bg)
}

.filepond--drop-label {
    color: var(--ins-body-color)
}

.filepond--drop-label .filepond--label-action {
    font-weight: var(--ins-font-weight-medium)
}

.filepond--credits {
    display: none
}

.filepond--item-panel {
    background-color: var(--ins-primary) !important
}

.filepond-uploader.two-grid .filepond--item {
    width: calc(50% - .5em)
}

.filepond-uploader.three-grid .filepond--item {
    width: calc(33.3% - .5em)
}

.filepond--root {
    border: 2px dashed var(--ins-border-color);
    border-bottom: 0;
    border-radius: .5em;
    min-height: 70px
}

.flatpickr-calendar {
    background: var(--ins-secondary-bg);
    -webkit-box-shadow: var(--ins-box-shadow);
    box-shadow: var(--ins-box-shadow);
    border: 1px solid var(--ins-border-color);
    font-size: .813rem
}

.flatpickr-calendar.arrowTop:before {
    border-bottom-color: var(--ins-secondary-bg)
}

.flatpickr-calendar.arrowTop:after {
    border-bottom-color: var(--ins-secondary-bg)
}

.flatpickr-calendar.arrowBottom:after,
.flatpickr-calendar.arrowBottom:before {
    border-top-color: var(--ins-secondary-bg)
}

.flatpickr-calendar.open {
    z-index: 100000 !important
}

.flatpickr-current-month {
    font-size: 100%
}

.flatpickr-day.endRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.endRange.nextMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.endRange:focus,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected,
.flatpickr-day.selected.inRange,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.selected:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.startRange:focus,
.flatpickr-day.startRange:hover {
    background: var(--ins-primary);
    border-color: var(--ins-primary)
}

.flatpickr-day.endRange.startRange+.endRange:not(:nth-child(7n+1)),
.flatpickr-day.selected.startRange+.endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange+.endRange:not(:nth-child(7n+1)) {
    -webkit-box-shadow: 10px 0 0 var(--ins-primary);
    box-shadow: 10px 0 0 var(--ins-primary)
}

.flatpickr-time .flatpickr-am-pm:focus,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:focus,
.flatpickr-time input:hover {
    background: var(--ins-secondary-bg);
    color: var(--ins-body-color)
}

.flatpickr-months .flatpickr-month {
    height: 40px
}

.flatpickr-months .flatpickr-month,
.flatpickr-months .flatpickr-next-month,
.flatpickr-months .flatpickr-prev-month {
    color: var(--ins-body-color);
    fill: var(--ins-gray-500);
    line-height: 16px
}

.flatpickr-weekdays {
    background-color: var(--ins-tertiary-bg)
}

.flatpickr-current-month input.cur-year[disabled],
.flatpickr-current-month input.cur-year[disabled]:hover,
.flatpickr-day,
.flatpickr-time .flatpickr-am-pm,
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time input,
span.flatpickr-weekday {
    color: var(--ins-body-color);
    fill: var(--ins-body-color);
    font-weight: var(--ins-font-weight-semibold)
}

.flatpickr-current-month input.cur-year {
    font-weight: var(--ins-font-weight-semibold)
}

.flatpickr-day.disabled,
.flatpickr-day.disabled:hover,
.flatpickr-day.nextMonthDay,
.flatpickr-day.notAllowed,
.flatpickr-day.notAllowed.nextMonthDay,
.flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-day.prevMonthDay {
    color: var(--ins-secondary-color)
}

.flatpickr-day.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.nextMonthDay.today.inRange,
.flatpickr-day.nextMonthDay:focus,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.today.inRange,
.flatpickr-day:focus,
.flatpickr-day:hover {
    background: var(--ins-tertiary-bg);
    border-color: var(--ins-tertiary-bg)
}

.flatpickr-calendar.showTimeInput.hasTime .flatpickr-time {
    border-top: 1px solid var(--ins-secondary-bg)
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover,
.numInputWrapper:hover {
    background-color: transparent;
    color: var(--ins-body-color)
}

.flatpickr-current-month .numInputWrapper {
    width: 8ch;
    display: inline-block;
    margin-right: 10px
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month .numInputWrapper {
    border: 1px solid var(--ins-border-color);
    border-radius: 4px;
    padding: 2px 8px;
    font-weight: 400
}

.flatpickr-day.inRange {
    -webkit-box-shadow: 5px 0 0 var(--ins-tertiary-bg), -5px 0 0 var(--ins-tertiary-bg);
    box-shadow: 5px 0 0 var(--ins-tertiary-bg), -5px 0 0 var(--ins-tertiary-bg)
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color: var(--ins-secondary-color);
    text-decoration: line-through;
    opacity: .5
}

.flatpickr-calendar.hasTime .flatpickr-time {
    border-top: var(--ins-border-color)
}

.flatpickr-weekwrapper .flatpickr-weeks {
    -webkit-box-shadow: none;
    box-shadow: none
}

.flatpickr-weekwrapper span.flatpickr-day,
.flatpickr-weekwrapper span.flatpickr-day:hover {
    color: var(--ins-secondary-color)
}

[data-inline-date=true],
[data-time-inline] {
    display: none
}

.jvm-tooltip {
    font-family: var(--ins-font-sans-serif);
    background-color: #223058;
    font-size: .813rem;
    padding: 4px 10px
}

.jvm-container text.jvm-marker {
    fill: var(--ins-body-color);
    font-family: var(--ins-font-sans-serif)
}

.jvm-zoom-btn {
    background-color: #2b2c34;
    height: 20px;
    width: 20px;
    text-align: center;
    line-height: 14px
}

.jvm-zoom-btn.jvm-zoomin {
    top: 6px
}

.ladda-button[data-style=contract] {
    width: auto
}

.noUi-target {
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: var(--ins-light);
    border: none
}

.noUi-handle {
    background: var(--ins-secondary-bg);
    -webkit-box-shadow: var(--ins-box-shadow-inset);
    box-shadow: var(--ins-box-shadow-inset);
    border: 1px solid var(--ins-border-color)
}

.noUi-connect {
    background: var(--ins-primary)
}

.noUi-horizontal {
    height: 8px
}

.noUi-horizontal .noUi-handle {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    left: -10px !important;
    top: -7px
}

.noUi-horizontal .noUi-handle::after,
.noUi-horizontal .noUi-handle::before {
    display: none
}

.noUi-horizontal .noUi-handle:focus {
    outline: 0
}

[data-bs-theme=dark] .noUi-horizontal .noUi-handle {
    background: var(--ins-primary)
}

[data-slider-style=line].noUi-horizontal .noUi-handle {
    width: 8px;
    border-radius: 4px;
    left: -8px !important;
    background: var(--ins-primary);
    -webkit-box-shadow: none;
    box-shadow: none
}

.noUi-vertical {
    width: 8px
}

.noUi-vertical .noUi-handle {
    height: 20px;
    width: 20px;
    left: -6px;
    top: -6px;
    right: auto;
    border-radius: 50%
}

.noUi-vertical .noUi-handle::after,
.noUi-vertical .noUi-handle::before {
    display: none
}

.noUi-vertical .noUi-handle:focus {
    outline: 0
}

.noUi-vertical .noUi-origin {
    top: 0
}

[data-bs-theme=dark] .noUi-vertical .noUi-handle {
    background: var(--ins-primary)
}

.noUi-tooltip {
    padding: .3125rem .625rem;
    border-color: var(--ins-border-color);
    border-radius: var(--ins-border-radius);
    font-weight: var(--ins-font-weight-semibold);
    background-color: var(--ins-secondary-bg);
    color: var(--ins-body-color)
}

.noUi-marker {
    background: var(--ins-light)
}

.noUi-value-horizontal {
    padding-top: 4px;
    color: var(--ins-secondary-color)
}

[data-slider-size=sm].noUi-horizontal {
    height: 4px
}

[data-slider-size=sm].noUi-horizontal .noUi-handle {
    width: 16px;
    height: 16px
}

[data-slider-size=sm][data-slider-style=line].noUi-horizontal .noUi-handle {
    width: 6px;
    border-radius: 4px;
    top: -6px !important;
    left: -6px !important
}

[data-slider-size=lg].noUi-horizontal {
    height: 12px
}

[data-slider-size=lg].noUi-horizontal .noUi-handle {
    width: 24px;
    height: 24px
}

[data-slider-size=lg][data-slider-style=line].noUi-horizontal .noUi-handle {
    width: 10px;
    border-radius: 4px;
    left: -10px !important
}

[data-slider-color=primary] .noUi-connect {
    background: #1ab394
}

[data-bs-theme=dark] [data-slider-color=primary] .noUi-handle {
    background: #1ab394
}

[data-slider-color=primary][data-slider-style=line].noUi-horizontal .noUi-handle {
    background: #1ab394
}

[data-slider-color=secondary] .noUi-connect {
    background: #1c84c6
}

[data-bs-theme=dark] [data-slider-color=secondary] .noUi-handle {
    background: #1c84c6
}

[data-slider-color=secondary][data-slider-style=line].noUi-horizontal .noUi-handle {
    background: #1c84c6
}

[data-slider-color=success] .noUi-connect {
    background: #0acf97
}

[data-bs-theme=dark] [data-slider-color=success] .noUi-handle {
    background: #0acf97
}

[data-slider-color=success][data-slider-style=line].noUi-horizontal .noUi-handle {
    background: #0acf97
}

[data-slider-color=info] .noUi-connect {
    background: #23c6c8
}

[data-bs-theme=dark] [data-slider-color=info] .noUi-handle {
    background: #23c6c8
}

[data-slider-color=info][data-slider-style=line].noUi-horizontal .noUi-handle {
    background: #23c6c8
}

[data-slider-color=warning] .noUi-connect {
    background: #f8ac59
}

[data-bs-theme=dark] [data-slider-color=warning] .noUi-handle {
    background: #f8ac59
}

[data-slider-color=warning][data-slider-style=line].noUi-horizontal .noUi-handle {
    background: #f8ac59
}

[data-slider-color=danger] .noUi-connect {
    background: #FF477B
}

[data-bs-theme=dark] [data-slider-color=danger] .noUi-handle {
    background: #FF477B
}

[data-slider-color=danger][data-slider-style=line].noUi-horizontal .noUi-handle {
    background: #FF477B
}

[data-slider-color=purple] .noUi-connect {
    background: #7b70ef
}

[data-bs-theme=dark] [data-slider-color=purple] .noUi-handle {
    background: #7b70ef
}

[data-slider-color=purple][data-slider-style=line].noUi-horizontal .noUi-handle {
    background: #7b70ef
}

[data-slider-color=light] .noUi-connect {
    background: #eef2f7
}

[data-bs-theme=dark] [data-slider-color=light] .noUi-handle {
    background: #eef2f7
}

[data-slider-color=light][data-slider-style=line].noUi-horizontal .noUi-handle {
    background: #eef2f7
}

[data-slider-color=dark] .noUi-connect {
    background: #313a46
}

[data-bs-theme=dark] [data-slider-color=dark] .noUi-handle {
    background: #313a46
}

[data-slider-color=dark][data-slider-style=line].noUi-horizontal .noUi-handle {
    background: #313a46
}

.password-bar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 12px
}

.password-bar .strong-bar {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 6px;
    border-radius: 10px;
    background: var(--ins-light);
    -webkit-transition: background .3s;
    transition: background .3s
}

.password-bar .strong-bar.bar-active-1 {
    background-color: #FF477B
}

.password-bar .strong-bar.bar-active-2 {
    background-color: #f8ac59
}

.password-bar .strong-bar.bar-active-3 {
    background-color: #1ab394
}

.password-bar .strong-bar.bar-active-4 {
    background-color: #0acf97
}

.password-box p {
    padding-right: 12px
}

.password-box p.valid {
    color: #0acf97
}

.password-box p.valid::before {
    position: relative;
    right: -8px;
    content: "✔️"
}

.password-box p.invalid {
    color: #FF477B
}

.password-box p.invalid::before {
    position: relative;
    right: -8px;
    content: "✖"
}

:not(pre)>code[class*=language-],
pre[class*=language-] {
    background: 0 0;
    scrollbar-width: thin;
    overflow: hidden !important
}

:not(pre)>code[class*=language-]:hover,
pre[class*=language-]:hover {
    overflow: auto !important
}

code[class*=language-],
pre[class*=language-] {
    color: #000;
    background: 0 0;
    text-shadow: 0 1px #fff;
    font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
    font-size: 13px;
    text-align: right;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    display: block;
    line-height: 1.5;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    -ms-hyphens: none;
    hyphens: none
}

code[class*=language-] ::-moz-selection,
code[class*=language-]::-moz-selection,
pre[class*=language-] ::-moz-selection,
pre[class*=language-]::-moz-selection {
    text-shadow: none;
    background: #b3d4fc
}

code[class*=language-] ::selection,
code[class*=language-]::selection,
pre[class*=language-] ::selection,
pre[class*=language-]::selection {
    text-shadow: none;
    background: #b3d4fc
}

@media print {

    code[class*=language-],
    pre[class*=language-] {
        text-shadow: none
    }
}

pre[class*=language-] {
    padding: 1em;
    margin: 0;
    overflow: auto
}

:not(pre)>code[class*=language-] {
    padding: .1em;
    border-radius: .3em;
    white-space: normal
}

.token.cdata,
.token.comment,
.token.doctype,
.token.prolog {
    color: #708090
}

.token.punctuation {
    color: var(--ins-primary)
}

.token.namespace {
    opacity: .7
}

.token.boolean,
.token.constant,
.token.deleted,
.token.number,
.token.property,
.token.symbol,
.token.tag {
    color: var(--ins-primary)
}

.token.attr-name,
.token.builtin,
.token.char,
.token.inserted,
.token.selector,
.token.string {
    color: var(--ins-success)
}

.language-css .token.string,
.style .token.string,
.token.entity,
.token.operator,
.token.url {
    color: #9a6e3a;
    background: 0 0
}

.token.atrule,
.token.attr-value,
.token.keyword {
    color: #FF477B
}

.token.class-name,
.token.function {
    color: #dd4a68
}

.token.important,
.token.regex,
.token.variable {
    color: #e90
}

.token.bold,
.token.important {
    font-weight: var(--ins-font-weight-bold)
}

.token.italic {
    font-style: italic
}

.token.entity {
    cursor: help
}

code[class*=language-],
pre[class*=language-] {
    color: var(--ins-gray-600);
    text-shadow: none
}

code[class*=language-] code:not(:last-of-type),
pre[class*=language-] code:not(:last-of-type) {
    margin-bottom: 1rem
}

.ql-editor {
    text-align: right
}

.ql-editor ol,
.ql-editor ul {
    padding-right: 1.5em;
    padding-left: 0
}

.ql-editor li:not(.ql-direction-rtl)::before {
    margin-right: -1.5em;
    margin-left: .3em;
    text-align: left
}

.ql-container {
    font-family: var(--ins-font-sans-serif)
}

.ql-container.ql-snow {
    border-color: var(--ins-border-color);
    border-radius: 0 0 var(--ins-border-radius) var(--ins-border-radius);
    min-block-size: 12rem
}

.ql-toolbar {
    font-family: var(--ins-font-sans-serif) !important
}

.ql-toolbar span {
    outline: 0 !important;
    color: var(--ins-body-color)
}

.ql-toolbar span:hover {
    color: #1ab394 !important
}

.ql-toolbar.ql-snow {
    border-radius: var(--ins-border-radius) var(--ins-border-radius) 0 0;
    border-color: var(--ins-border-color);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    row-gap: 8px
}

.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
    border-color: transparent
}

.ql-toolbar.ql-snow .ql-picker-options {
    -webkit-box-shadow: var(--ins-box-shadow);
    box-shadow: var(--ins-box-shadow);
    border-radius: .3rem
}

.ql-toolbar.ql-snow .ql-formats {
    border: 1px solid var(--ins-border-color);
    margin-left: 10px;
    border-radius: 3px
}

.ql-toolbar.ql-snow .ql-formats button i,
.ql-toolbar.ql-snow .ql-formats span i {
    line-height: 18px;
    color: var(--ins-body-color)
}

.ql-toolbar.ql-snow .ql-formats button:hover i,
.ql-toolbar.ql-snow .ql-formats span:hover i {
    color: var(--ins-primary)
}

.ql-toolbar .ql-picker-label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.ql-toolbar .ql-picker-label svg {
    height: 16px;
    width: 16px
}

.ql-snow a {
    color: #1ab394
}

.ql-snow .ql-picker {
    font-size: .813rem
}

.ql-snow .ql-picker.ql-expanded .ql-picker-label {
    color: var(--ins-body-color) !important
}

.ql-snow .ql-picker-options {
    background-color: var(--ins-secondary-bg);
    border-color: var(--ins-border-color) !important
}

.ql-snow .ql-tooltip {
    background-color: var(--ins-secondary-bg);
    border-color: var(--ins-border-color);
    -webkit-box-shadow: var(--ins-box-shadow);
    box-shadow: var(--ins-box-shadow);
    color: var(--ins-body-color);
    padding: 8px 16px
}

.ql-snow .ql-tooltip input[type=text] {
    border: var(--ins-border-width) solid var(--ins-border-color) !important;
    border-radius: var(--ins-border-radius)
}

.ql-snow .ql-tooltip input[type=text]:focus,
.ql-snow .ql-tooltip input[type=text]:focus-visible {
    border: var(--ins-border-width) solid var(--ins-border-color) !important
}

.ql-bubble {
    border: var(--ins-border-width) solid var(--ins-border-color);
    border-radius: var(--ins-border-radius)
}

.ql-bubble .ql-tooltip-editor input::-webkit-input-placeholder {
    color: var(--ins-secondary-color)
}

.ql-bubble .ql-tooltip-editor input::-moz-placeholder {
    color: var(--ins-secondary-color)
}

.ql-bubble .ql-tooltip-editor input:-ms-input-placeholder {
    color: var(--ins-secondary-color)
}

.ql-bubble .ql-tooltip-editor input::-ms-input-placeholder {
    color: var(--ins-secondary-color)
}

.ql-bubble .ql-tooltip-editor input::placeholder {
    color: var(--ins-secondary-color)
}

.ql-tooltip .ql-toolbar button {
    color: #fff !important
}

.ql-tooltip .ql-toolbar button:hover {
    color: var(--ins-primary) !important
}

.select2-container {
    width: 100% !important
}

.select2-container .select2-selection--single {
    border: var(--ins-border-width) solid var(--ins-border-color);
    height: calc(1.5em + .9064rem + calc(var(--ins-border-width) * 2));
    background-color: var(--ins-secondary-bg);
    outline: 0
}

.select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 36px;
    padding-right: 12px;
    color: var(--ins-body-color)
}

.select2-container .select2-selection--single .select2-selection__arrow {
    height: 34px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 34px;
    left: 3px
}

.select2-container .select2-selection--single .select2-selection__arrow b {
    -webkit-transition: -webkit-transform .2s ease-in-out;
    transition: -webkit-transform .2s ease-in-out;
    transition: transform .2s ease-in-out;
    transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%239ba6b7'  xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 16a1 1 0 0 1-.64-.23l-6-5a1 1 0 1 1 1.28-1.54L12 13.71l5.36-4.32a1 1 0 0 1 1.41.15a1 1 0 0 1-.14 1.46l-6 4.83A1 1 0 0 1 12 16'/%3E%3C/svg%3E");
    border: 0;
    margin: -10px;
    height: 20px;
    width: 20px
}

.select2-container--open .select2-selection--single .select2-selection__arrow b {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.select2-results__option {
    padding: 6px 12px
}

.select2-dropdown {
    border: var(--ins-border-width) solid var(--ins-border-color);
    -webkit-box-shadow: var(--ins-box-shadow);
    box-shadow: var(--ins-box-shadow);
    background-color: var(--ins-secondary-bg);
    z-index: 1056
}

.select2-results__options::-webkit-scrollbar {
    -webkit-appearance: none
}

.select2-results__options::-webkit-scrollbar:vertical {
    width: 5px;
    margin-left: 5px
}

.select2-results__options::-webkit-scrollbar:horizontal {
    height: 5px
}

.select2-results__options::-webkit-scrollbar-thumb {
    background-color: rgba(var(--ins-dark-rgb), .2);
    border-radius: 10px;
    margin-left: 5px;
    border: none
}

.select2-results__options::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: transparent
}

.select2-results__options::-webkit-scrollbar-corner {
    background-color: transparent
}

.select2-container--default .select2-results__option--selected {
    background-color: var(--ins-tertiary-bg)
}

.select2-container--default .select2-search--dropdown {
    padding: 10px;
    background-color: var(--ins-secondary-bg)
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    outline: 0;
    border: 1px solid var(--ins-border-color);
    background-color: var(--ins-secondary-bg);
    color: var(--ins-body-color);
    border-radius: var(--ins-border-radius)
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--ins-primary)
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--ins-secondary-bg);
    color: var(--ins-body-color)
}

.select2-container--default .select2-results__option[aria-selected=true]:hover {
    background-color: var(--ins-primary);
    color: #fff
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    padding-right: 36px;
    padding-left: 5px
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    left: 1px;
    right: auto
}

.select2-container .select2-selection--multiple {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-height: calc(1.5em + .9064rem + calc(var(--ins-border-width) * 2));
    border: var(--ins-border-width) solid var(--ins-border-color) !important;
    background-color: var(--ins-secondary-bg)
}

.select2-container .select2-selection--multiple .select2-selection__rendered {
    padding: 1px 4px;
    margin-bottom: 0
}

.select2-container .select2-selection--multiple .select2-search__field {
    border: 0;
    color: var(--ins-body-color)
}

.select2-container .select2-selection--multiple .select2-selection__choice {
    background-color: var(--ins-primary);
    border: none;
    color: #fff;
    border-radius: 3px;
    padding: 0 0 0 7px;
    margin-top: 6px
}

.select2-container .select2-selection--multiple .select2-selection__choice__remove {
    color: #fff;
    margin-left: 7px;
    border-color: #31bb9f;
    padding: 0 8px
}

.select2-container .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #fff;
    background-color: var(--ins-primary)
}

.select2-container .select2-search--inline .select2-search__field {
    margin-top: 7px;
    font-family: var(--ins-font-sans-serif)
}

.select2-container .select2-search textarea::-webkit-input-placeholder {
    color: var(--ins-secondary-color)
}

.select2-container .select2-search textarea::-moz-placeholder {
    color: var(--ins-secondary-color)
}

.select2-container .select2-search textarea:-ms-input-placeholder {
    color: var(--ins-secondary-color)
}

.select2-container .select2-search textarea::-ms-input-placeholder {
    color: var(--ins-secondary-color)
}

.select2-container .select2-search textarea::placeholder {
    color: var(--ins-secondary-color)
}

[dir=rtl] .select2-container--open .select2-dropdown {
    right: auto;
    left: 0
}

[data-bs-theme=dark] .select2-container .select2-selection--single .select2-selection__arrow b {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%238391a2'  xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 16a1 1 0 0 1-.64-.23l-6-5a1 1 0 1 1 1.28-1.54L12 13.71l5.36-4.32a1 1 0 0 1 1.41.15a1 1 0 0 1-.14 1.46l-6 4.83A1 1 0 0 1 12 16'/%3E%3C/svg%3E")
}

[data-simplebar] {
    position: relative;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
}

.simplebar-wrapper {
    overflow: hidden;
    width: inherit;
    height: inherit;
    max-width: inherit;
    max-height: inherit
}

.simplebar-mask {
    direction: inherit;
    position: absolute;
    overflow: hidden;
    padding: 0;
    margin: 0;
    right: 0;
    top: 0;
    bottom: 0;
    left: 0;
    width: auto !important;
    height: auto !important;
    z-index: 0
}

.simplebar-offset {
    direction: inherit !important;
    -webkit-box-sizing: inherit !important;
    box-sizing: inherit !important;
    resize: none !important;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0;
    margin: 0;
    -webkit-overflow-scrolling: touch
}

.simplebar-content-wrapper {
    direction: inherit;
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;
    position: relative;
    display: block;
    height: 100%;
    width: auto;
    overflow: auto;
    max-width: 100%;
    max-height: 100%;
    scrollbar-width: none
}

.simplebar-content-wrapper::-webkit-scrollbar,
.simplebar-hide-scrollbar::-webkit-scrollbar {
    display: none
}

.simplebar-content:after,
.simplebar-content:before {
    content: " ";
    display: table
}

.simplebar-placeholder {
    max-height: 100%;
    max-width: 100%;
    width: 100%;
    pointer-events: none
}

.simplebar-height-auto-observer-wrapper {
    -webkit-box-sizing: inherit !important;
    box-sizing: inherit !important;
    height: 100%;
    width: 100%;
    max-width: 1px;
    position: relative;
    float: right;
    max-height: 1px;
    overflow: hidden;
    z-index: -1;
    padding: 0;
    margin: 0;
    pointer-events: none;
    -webkit-box-flex: inherit;
    -ms-flex-positive: inherit;
    flex-grow: inherit;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -ms-flex-preferred-size: 0;
    flex-basis: 0
}

.simplebar-height-auto-observer {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
    display: block;
    opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
    height: 1000%;
    width: 1000%;
    min-height: 1px;
    min-width: 1px;
    overflow: hidden;
    pointer-events: none;
    z-index: -1
}

.simplebar-track {
    z-index: 1;
    position: absolute;
    left: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden
}

[data-simplebar].simplebar-dragging .simplebar-content {
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

[data-simplebar].simplebar-dragging .simplebar-track {
    pointer-events: all
}

.simplebar-scrollbar {
    position: absolute;
    left: 2px;
    width: 6px;
    min-height: 10px
}

.simplebar-scrollbar:before {
    position: absolute;
    content: "";
    background: #a2adb7;
    border-radius: 7px;
    right: 0;
    left: 0;
    opacity: 0;
    -webkit-transition: opacity .2s linear;
    transition: opacity .2s linear
}

.simplebar-scrollbar.simplebar-visible:before {
    opacity: .5;
    -webkit-transition: opacity 0s linear;
    transition: opacity 0s linear
}

.simplebar-track.simplebar-vertical {
    top: 0;
    width: 11px
}

.simplebar-track.simplebar-vertical .simplebar-scrollbar:before {
    top: 2px;
    bottom: 2px
}

.simplebar-track.simplebar-horizontal {
    right: 0;
    height: 11px
}

.simplebar-track.simplebar-horizontal .simplebar-scrollbar {
    left: auto;
    right: 0;
    top: 2px;
    height: 7px;
    min-height: 0;
    min-width: 10px;
    width: auto
}

.simplebar-track.simplebar-horizontal .simplebar-scrollbar:before {
    height: 100%;
    right: 2px;
    left: 2px
}

[data-simplebar-direction=rtl] .simplebar-track.simplebar-vertical {
    left: auto;
    right: 0
}

.hs-dummy-scrollbar-size {
    direction: rtl;
    position: fixed;
    opacity: 0;
    visibility: hidden;
    height: 500px;
    width: 500px;
    overflow-y: hidden;
    overflow-x: scroll
}

.simplebar-hide-scrollbar {
    position: fixed;
    right: 0;
    visibility: hidden;
    overflow-y: scroll;
    scrollbar-width: none
}

[data-simplebar-md] .simplebar-scrollbar {
    left: 1px;
    width: 8px
}

[data-simplebar-lg] .simplebar-scrollbar {
    left: 1px;
    width: 10px
}

[data-simplebar-primary] .simplebar-scrollbar:before {
    background: var(--ins-primary)
}

.nested-sortable .nested-sortable {
    margin-top: 10px
}

.nested-sortable-handle .nested-sortable-handle {
    margin-top: 10px
}

.sort-handle {
    padding-left: 10px;
    font-size: 16px;
    cursor: move
}

.sort-handle:hover {
    color: var(--ins-primary)
}

.sortable-item-ghost {
    background-color: var(--ins-light-bg-subtle)
}

.note-toolbar {
    gap: 5px !important
}

.note-editor {
    margin-bottom: 0
}

.note-editor.note-airframe,
.note-editor.note-frame {
    border-color: var(--ins-border-color)
}

.note-editor.note-airframe .note-statusbar,
.note-editor.note-frame .note-statusbar {
    background: var(--ins-light);
    border-top-color: var(--ins-border-color)
}

.note-btn-group .note-btn {
    border: 0;
    padding: .28rem .5rem
}

.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-holder-custom .note-color-btn,
.note-popover .popover-content .note-color .note-dropdown-menu .note-palette .note-holder-custom .note-color-btn {
    border-color: var(--ins-border-color)
}

.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-palette-title,
.note-popover .popover-content .note-color .note-dropdown-menu .note-palette .note-palette-title {
    border-bottom: 0
}

.note-editor .note-toolbar .note-para .note-dropdown-menu,
.note-popover .popover-content .note-para .note-dropdown-menu {
    min-width: 235px
}

.note-modal .modal-dialog {
    -webkit-box-shadow: none;
    box-shadow: none
}

.note-modal .modal-body {
    overflow-x: hidden !important
}

.help-list-item {
    margin: 12px 0
}

.note-form-group {
    margin-bottom: 10px
}

.note-form-group .note-form-label {
    margin-bottom: 5px;
    font-weight: var(--ins-font-weight-medium)
}

.swal2-container .swal2-title {
    font-size: 20px;
    font-weight: var(--ins-font-weight-medium);
    color: var(--ins-heading-color)
}

.swal2-popup {
    width: 28em;
    padding: 2rem;
    border-radius: var(--ins-border-radius-lg);
    background-color: var(--ins-secondary-bg);
    color: var(--ins-body-color)
}

.swal2-popup .swal2-html-container {
    font-size: 16px !important;
    color: var(--ins-body-color)
}

.swal2-footer {
    border-top: 1px solid var(--ins-border-color);
    color: var(--ins-body-color)
}

.swal2-icon.swal2-question {
    border-color: var(--ins-info);
    color: var(--ins-info)
}

.swal2-icon.swal2-success [class^=swal2-success-line] {
    background-color: var(--ins-success)
}

.swal2-icon.swal2-success .swal2-success-ring {
    border-color: var(--ins-success)
}

.swal2-icon.swal2-warning {
    border-color: var(--ins-warning);
    color: var(--ins-warning)
}

div:where(.swal2-icon) {
    width: 4em;
    height: 4em;
    margin: .5rem auto
}

div:where(.swal2-icon) .swal2-icon-content {
    font-size: 3em
}

div:where(.swal2-icon).swal2-info {
    border-color: var(--ins-info);
    color: var(--ins-info)
}

.swal2-styled:focus {
    -webkit-box-shadow: none;
    box-shadow: none
}

.swal2-loader {
    border-color: var(--ins-primary) transparent var(--ins-primary) transparent
}

.swal2-timer-progress-bar {
    background-color: rgba(10, 207, 151, .4)
}

.swal2-progress-steps .swal2-progress-step {
    background: var(--ins-primary)
}

.swal2-progress-steps .swal2-progress-step.swal2-active-progress-step {
    background: var(--ins-primary)
}

.swal2-progress-steps .swal2-progress-step.swal2-active-progress-step~.swal2-progress-step,
.swal2-progress-steps .swal2-progress-step.swal2-active-progress-step~.swal2-progress-step-line {
    background: rgba(26, 179, 148, .3)
}

.swal2-progress-steps .swal2-progress-step-line {
    background: var(--ins-primary)
}

.swal2-actions.swal2-loading .swal2-styled.swal2-confirm {
    border-right-color: var(--ins-primary) !important;
    border-left-color: var(--ins-primary) !important
}

.swal2-file,
.swal2-input,
.swal2-textarea {
    border: 1px solid var(--ins-border-color)
}

.swal2-file:focus,
.swal2-input:focus,
.swal2-textarea:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
    border-color: var(--ins-dark-border-subtle)
}

.swal2-input {
    height: auto;
    display: block;
    padding: .4532rem .77rem;
    font-size: .813rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--ins-body-color);
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border-radius: 5px !important;
    background-color: var(--ins-secondary-bg);
    background-clip: padding-box;
    border: var(--ins-border-width) solid var(--ins-border-color) !important
}

.swal2-close {
    font-family: var(--ins-font-sans-serif);
    font-size: 42px;
    width: 1em;
    height: 1em;
    position: absolute;
    top: 5px;
    left: 5px
}

.swal2-close:focus {
    -webkit-box-shadow: none;
    box-shadow: none
}

.swal2-close:hover {
    color: #FF477B
}

.swal2-validation-message {
    background-color: transparent
}

div:where(.swal2-icon).swal2-error [class^=swal2-x-mark-line] {
    width: 1.9375em;
    top: 1.95em
}

div:where(.swal2-icon).swal2-success [class^=swal2-success-line][class$=tip] {
    top: 2.4em;
    width: 1em
}

.swal2-icon.swal2-success [class^=swal2-success-line][class$=long] {
    top: 1.85em;
    left: .5em;
    width: 2.25em
}

.swal2-backdrop-show {
    backdrop-filter: blur(2px);
    background: var(--ins-emphasis-color)
}

:root {
    --tagify-dd-color-primary: var(--ins-primary)
}

.tagify {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 5px;
    --placeholder-color: var(--ins-secondary-color);
    --placeholder-color-focus: var(--ins-secondary-color)
}

.tagify__tag {
    margin: 0;
    background-color: var(--ins-light)
}

.tagify__tag>div {
    padding: 1px 5px;
    color: var(--ins-body-color);
    line-height: 17px
}

.tagify__tag>div::before,
.tagify__tag>div:hover+div::before {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    background-image: none !important
}

.tagify__tag[readonly]>div::before {
    -webkit-animation: none !important;
    animation: none !important
}

.tagify__input {
    margin: 0;
    padding: 0
}

.tagify__input::before {
    color: var(--ins-secondary-color)
}

.tagify__tag__removeBtn {
    color: var(--ins-body-color)
}

.tagify__tag__removeBtn:hover {
    background: var(--ins-danger)
}

.tagify__tag__removeBtn:hover:hover+div::before {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    color: var(--ins-danger)
}

.tagify__tag__removeBtn::after {
    content: none
}

.tagify__tag__removeBtn::before {
    content: "\eb55";
    font-family: tabler-icons !important;
    font-size: 12px
}

.tagify__dropdown__wrapper {
    border: 1px solid var(--ins-border-color) !important;
    -webkit-box-shadow: var(--ins-box-shadow);
    box-shadow: var(--ins-box-shadow);
    background: var(--ins-secondary-bg) !important;
    border-radius: .3rem;
    color: var(--ins-body-color)
}

.tagify__dropdown {
    position: absolute;
    z-index: 1;
    -webkit-box-shadow: var(--ins-box-shadow);
    box-shadow: var(--ins-box-shadow);
    border-top: 0;
    overflow: hidden
}

.tagify-user-tag-name {
    line-height: 24px
}

.tagify[disabled]:not(.tagify--mix):not(.tagify--select):not(.tagify--empty) .tagify__tag>div,
.tagify[readonly]:not(.tagify--mix):not(.tagify--select):not(.tagify--empty) .tagify__tag>div {
    padding: 1px 5px
}

[data-touchspin] {
    overflow: hidden;
    height: calc(2.1259rem + 2px);
    border: 1px solid var(--ins-border-color);
    border-radius: var(--ins-border-radius)
}

[data-touchspin] .form-control {
    text-align: center
}

[data-touchspin] .form-control:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: 0;
    z-index: 0
}

[data-touchspin] .btn-group-vertical .btn {
    border-radius: 0;
    height: calc((2.1259rem + 2px) * .5);
    padding: 2px 6px
}

[data-touchspin] .btn {
    border-radius: var(--ins-border-radius);
    padding: 6px
}

[data-touchspin] .floating {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 4px 6px;
    margin: 4px !important;
    border-radius: var(--ins-border-radius) !important
}

[data-touchspin] .floating.rounded-circle {
    border-radius: 50% !important
}

[data-touchspin].input-group-sm {
    height: calc(1.807rem + 2px)
}

[data-touchspin].input-group-sm .btn {
    padding: 4px
}

[data-touchspin].input-group-sm .floating {
    padding: 2px 3px;
    margin: 4px;
    border-radius: var(--ins-border-radius-sm) !important
}

[data-touchspin].input-group-sm .btn-group-vertical .btn {
    height: calc((1.807rem + 2px) * .5)
}

[data-touchspin].input-group-lg {
    height: calc(2.626775rem + 2px)
}

[data-touchspin].input-group-lg .floating {
    padding: 4px 6px;
    margin: 4px;
    border-radius: var(--ins-border-radius-lg) !important
}

[data-touchspin].input-group-lg .btn-group-vertical .btn {
    height: calc((2.626775rem + 2px) * .5)
}

.tg-backdrop {
    z-index: 1001
}

.tg-dialog {
    background: var(--ins-secondary-bg) !important;
    color: var(--ins-body-color)
}

.tg-dialog .tg-arrow {
    background: var(--ins-secondary-bg) !important
}

.tg-dialog-btn {
    background-color: var(--ins-primary) !important;
    color: #fff !important;
    border-color: var(--ins-primary) !important
}

.tg-dialog-close-btn {
    height: 20px !important;
    width: 20px !important;
    background-color: rgba(var(--ins-warning-rgb), .75);
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.jstree-default {
    padding: 2px 6px;
    height: auto
}

.jstree-default .jstree-clicked,
.jstree-default .jstree-hovered {
    background: var(--ins-tertiary-bg);
    -webkit-box-shadow: none;
    box-shadow: none
}

.jstree-default .jstree-clicked {
    background-color: rgba(var(--ins-primary-rgb), .1);
    color: var(--ins-primary)
}

.jstree-default .jstree-anchor,
.jstree-default .jstree-icon,
.jstree-default .jstree-icon:empty {
    line-height: 22px;
    height: 22px;
    border-radius: 4px
}

.jstree-default .jstree-icon,
.jstree-default .jstree-node {
    background-image: url(../images/treeview.png)
}

.jstree-default .jstree-last {
    background: 0 0
}

.jstree-default .jstree-themeicon-custom {
    background-color: transparent;
    background-image: none;
    background-position: 100% 0
}

.jstree-default .jstree-disabled {
    color: var(--ins-secondary-color)
}

.jstree-wholerow.jstree-wholerow-clicked,
.jstree-wholerow.jstree-wholerow-hovered {
    background: var(--ins-tertiary-bg)
}

.vakata-context,
.vakata-context ul {
    background-color: var(--ins-secondary-bg);
    border: var(--ins-border-width) solid var(--ins-border-color);
    -webkit-box-shadow: var(--ins-box-shadow);
    box-shadow: var(--ins-box-shadow);
    border-radius: .3rem
}

.vakata-context .vakata-context-hover>a,
.vakata-context ul .vakata-context-hover>a {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    background-color: var(--ins-tertiary-bg)
}

.vakata-context .vakata-context-separator,
.vakata-context .vakata-contextmenu-sep,
.vakata-context li>a>i:empty,
.vakata-context ul .vakata-context-separator,
.vakata-context ul .vakata-contextmenu-sep,
.vakata-context ul li>a>i:empty {
    display: none !important
}

.vakata-context li>a,
.vakata-context ul li>a {
    text-shadow: none;
    color: var(--ins-body-color)
}

.vakata-context li>a:hover,
.vakata-context ul li>a:hover {
    background-color: var(--ins-tertiary-bg);
    color: var(--ins-body-color)
}

.vakata-context ul,
.vakata-context ul ul {
    margin-right: 0
}

.twitter-typeahead {
    display: inherit !important
}

.tt-hint,
.tt-query {
    outline: 0
}

.tt-query {
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075)
}

.tt-hint {
    color: var(--ins-body-color);
    background: var(--ins-secondary-bg) !important
}

.tt-menu {
    width: 100%;
    padding: 8px 0;
    max-height: 200px;
    overflow-y: auto;
    background-color: var(--ins-secondary-bg);
    -webkit-box-shadow: var(--ins-box-shadow);
    box-shadow: var(--ins-box-shadow);
    border: 1px solid var(--ins-border-color)
}

.tt-suggestion {
    padding: 3px 20px;
    line-height: 24px
}

.tt-suggestion.tt-cursor,
.tt-suggestion:hover {
    cursor: pointer;
    color: #fff;
    background-color: var(--ins-primary)
}

.tt-suggestion p {
    margin: 0
}

.tt-highlight {
    font-family: var(--ins-font-sans-serif)
}

.typeahead-empty-message {
    padding: 5px 10px;
    color: #FF477B
}

.league-name {
    padding: 3px 20px
}

.wizard-tabs {
    border: 0;
    gap: 8px
}


.wizard-tabs .nav-link {
    border: 0.5px solid #d4b5cf !important;
    border-radius: 5px !important;
    color: var(--ins-secondary-color)
}

.wizard-tabs .nav-link.active {
    /* background-color: rgba(241 242 247);
    color: var(--ins-secondary-color) */

    color: var(--ins-secondary-color);
    background-color: #e3d7f8;
    border-right: 3px solid #09bb89 !important;


}

.wizard-tabs .nav-link.active i {
    color: var(--ins-body-color)
}

.wizard-tabs .nav-link.wizard-item-done {
    background-color: rgba(var(--ins-success-rgb), .1);
    border-color: rgba(var(--ins-success-rgb), .9) !important;
    color: var(--ins-success)
}

.wizard-tabs .nav-link.wizard-item-done .text-body,
.wizard-tabs .nav-link.wizard-item-done i {
    color: var(--ins-success) !important
}

.wizard-tabs.wizard-bordered .nav-link {
    border: 1 !important;
    border-right: 3px solid #7c3aed !important
}

.wizard-tabs.wizard-bordered .nav-link.wizard-item-done {
    border-color: var(--ins-success) !important
}

[data-wizard-animation] .tab-pane {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
    -webkit-transition: opacity .3s ease, -webkit-transform .3s ease;
    transition: opacity .3s ease, -webkit-transform .3s ease;
    transition: opacity .3s ease, transform .3s ease;
    transition: opacity .3s ease, transform .3s ease, -webkit-transform .3s ease
}

[data-wizard-animation] .tab-pane.active.show {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

#selected-language-image {
    width: auto !important
}

/*# sourceMappingURL=app-rtl.min.css.map */

/* .bg-colors {
    --bg-F4F7FE-input: #E7E7E7;
    --bg-E0D4FE-input: #E0D4FE;

} */


/* .bg-input
{
    background-color:#067c5b;
} */

.custom-border {
    border: 1px solid #742768;
    /* ضخامت 3px، نوع dashed و رنگ سبز */
    border-radius: 8px;
    /* گرد کردن گوشه‌ها اختیاری */
    padding: 3px;
    /* فاصله داخلی اختیاری */
}

@font-face {
    font-family: 'Ramis Arabic';
    src: url('./fonts/Ramis\ Arabic.otf ') format('truetype');
    font-weight: normal;
    font-style: normal;
}



* {
    font-family: 'Ramis Arabic';
}

.text-size {
    font-size: 12px;
    font-style: normal
}


.text-size-titr {
    font-size: 20px;
}


/* رفع تداخل لبه‌های قرمز در فوکوس */
.choices.is-invalid-custom.is-focused .choices__inner {
    box-shadow: 0 0 0 0.25rem rgba(5, 205, 153, 1) !important;
}

/* ===== دکمه ===== */
.btn-oil {

    border-color: #05CD99;
    color: #ffffff;
    font-weight: 500;
}

.btn-oil:hover {

    border-color: #05CD99;
    color: #ffffff;
}

.btn-oil:focus,
.btn-oil:active {

    border-color: #05CD99;
    box-shadow: 0 0 0 0.2rem rgba(5, 205, 153, 1);
}

/* 
/* تنظیمات کلی مودال برای شباهت به تصویر */
.custom-notification-modal .modal-content {
    border-radius: 10px;
    /* لبه‌های گرد */
    background-color: #f5f5f5;
    /* رنگ پس‌زمینه خاکستری روشن */
    position: relative;
    overflow: visible;
    /* برای نمایش آیکون زنگ که بیرون زده است */
}

/* استایل آیکون زنگ */
.modal-bell-icon {
    position: absolute;
    top: -25px;
    right: 30px;
    background-color: #f34242;
    /* رنگ بنفش زنگ */
    color: white;

    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(15deg);
    /* چرخش ملایم آیکون */
    box-shadow: 0 4px 15px rgba(93, 68, 255, 0.3);
    z-index: 1060;
}

.modal-bell-icon svg {
    width: 40px;
    height: 40px;
}

/* استایل دکمه‌های پایین مودال */
.custom-modal-btn {
    flex: 1;
    margin: 0 !important;
    border-radius: 0;
    padding: 15px;
    font-size: 0.9rem;
    color: #666;
    border-top: 1px solid #e0e0e0 !important;
}

.custom-modal-btn:hover {
    background-color: #eeeeee;
}

/* حذف حاشیه اضافه دکمه آخر */
.modal-footer> :not(:last-child) {
    margin-right: 0;
}

/* استایل متن تیتر */
#staticBackdropLabel {
    color: #222;
    font-size: 1.4rem;
}

/* --- استایل‌های اختصاصی مودال (Notification) --- */
.custom-notification-modal .modal-content {
    border-radius: 14px;
    background-color: #f5f5f5;
    position: relative;
    overflow: visible;
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.modal-bell-icon {
    position: absolute;
    top: -25px;
    right: 30px;
    background-color: #5d44ff;
    /* بنفش */
    color: white;
    width: 70px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(15deg);
    z-index: 1060;
}

.custom-modal-btn {
    flex: 1;
    margin: 0 !important;
    border-radius: 0;
    padding: 15px;
    color: #666;
    border-top: 1px solid #e0e0e0 !important;
    background: none;
}


.custom-modal-btn:hover {
    background-color: #ececec;
}

.pading-input {
    padding-top: 15px;
    padding-bottom: 15px;
}

.popover {
    border: 1px solid #09bb89;
    /* رنگ بردر */
    background-color: #d7e8e2cf;
    font-size: 10px;
    justify-content: center;
    align-items: center;
    display: flex;
    height: 40px;
    padding: 10px;

}

.popover-header {
    background-color: #daf8ef;
    color: black;
    border-bottom: 1px solid #09bb89;

}

.popover-body {
    color: black;
}


/* آیکون دایره‌ای بالای مودال */
.modal-bell-icon {
    width: 70px;
    height: 70px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    color: #FF477B;
}

.modal-bell-icon svg {
    width: 35px;
}

/* استایل دکمه‌های فوتر مودال */
.custom-modal-btn {

    border-radius: 0;
    font-weight: bold;
    transition: all 0.3s;
}


/* 
.outline-button {
            padding: 8px 10px;
            font-size: 13px;
            gap: 10px;
/* 
            cursor: pointer;
            
         
            background-color: transparent;
            color: #1c84c6; 
            border: 1px solid #1c84c6;
            border-radius: 8px;
            

            transition: all 0.4s ease;
            outline: none; */
/*  
            transform: scale(1.1);
            


        }

        .outline-button:active {
            transform: scale(0.98);
        }
        */
*/
/* 
        .outline-button:hover 

            background-color: #1c84c617;
            color: #1c84c6;
            
            */



.form-select-soft {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    /* رنگ آبی ملایم پس‌زمینه */
    color: #0d6efd;
    /* رنگ متن اصلی */
    border: 1px solid rgba(var(--bs-primary-rgb), 0.2);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.form-select-soft:focus {
    background-color: rgba(var(--bs-primary-rgb), 0.15);
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.25 margin rgba(13, 110, 253, 0.25);
    outline: 0;
}

/* برای حالت راست‌چین (RTL) */
[dir="rtl"] .form-select-soft {
    background-position: left 0.75rem center;
}



/* استایل دکمه اصلی شما */
.outline-button {
    background-color: #daf8ef;
    color: #7c3aed;
    border: 1px solid #1ab394;
    position: relative;

    display: inline-flex;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: calc(.9064rem + 1.75em + 2px);
    width: calc(.9064rem + 2.5em + 2px);
    padding: 0;
    border-radius: 8px;
    padding: 2px;

}

/* ظرف اصلی منو مطابق عکس */
.shortcut-container {
    width: 350px;
    background-color: #e4f5f1;
    border: 1px solid #1ab394;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    position: fixed;
    top: 0;
    left: -300px;
    transition: left 0.3s ease-in-out;
    z-index: 1050;
}

.shortcut-container.show {
    left: 0;
    /* وقتی فعال شد، از چپ بیاد داخل */
}

/* فقط کدهای لازم برای باز شدن از سمت چپ (هیچ تغییری در استایل اصلی نداده) */


.shortcut-header {
    display: flex;
    align-items: center;
    color: #8a99af;
    font-size: 14px;
    margin-bottom: 20px;
}

/* استایل کارت‌های سفید */
.card-item {
    background: #ffffff;
    border-radius: 15px;
    height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    border: none;
    transition: all 0.2s;
    text-decoration: none;
}

.card-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* دایره آیکون */
.icon-circle {
    width: 30px;
    height: 30px;
    background-color: #f5f7ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.icon-circle i {
    font-size: 28px;
    color: #6f42c1;
    /* بنفش مشابه تصویر */
}

.card-text {
    color: #6c757d;
    font-size: 10px;
    font-weight: 600;
    margin: 0;
}

/* دکمه ضربدر ریز */
.btn-close-mini {
    position: absolute;
    top: 12px;
    left: 12px;
    color: #6f42c1;
    font-size: 12px;
    background: none;
    border: none;
    padding: 0;
}

/* کارت افزودن (Dashed) */
.card-add {
    background: #ffffff;
    border: 2px dashed #e0e6ed;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-add i {
    font-size: 40px;
    color: #6f42c1;
}

/* حذف فلش پیش‌فرض دراپ‌داون
        .dropdown-toggle::after { display: none; } */


.border-input {
    border: 1px solid #16987e;
}





/* بردر کلی برای کل مجموعه */
.search-container {

    border: 1px solid #16987e4d;
    /* بردر رنگی شما */
    border-radius: 5px;
    /* گرد کردن لبه‌ها */
    overflow: hidden;
    /* برای اینکه محتوا از لبه‌های گرد بیرون نزند */
    display: flex;
    align-items: center;
    width: 50%;
    margin-bottom: 0px;
    padding: 5px;
}

.search-container .btn-no-border {
    border: none !important;
    background: transparent !important;
    color: #16987e !important;
    padding: 0 10px !important;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* حذف سایه آبی هنگام کلیک */
.search-container .form-control:focus,
.search-container .btn:focus {
    box-shadow: none !important;
}

.search-container .form-control {
    border: none !important;
    /* حذف بردر خود اینپوت */
    height: 25px !important;
    font-size: 10px !important;
    padding-right: 2px !important;
    width: 100px;
}


/* کلاس سفارشی wrapper */
.gender-custom-wrapper .select2-selection {
    border-radius: 8px !important;
    padding: 8px;
    background-color: #f8f9fa;

}

/* باکس جستجو همیشه زیبا */
.gender-custom-dropdown .select2-search__field {
    padding: 8px 12px !important;
    border: 1px solid #ced4da !important;
    border-radius: 8px !important;
}

/* placeholder فارسی */
.select2-selection__placeholder {
    color: #6c757d !important;
}

.select2-search__field {
    font-size: 10px;
    border: 1px solid #09bb89;
}




.header-btn {

    height: 38px;
    padding-left: 20px;
    padding-right: 10px;
    border-radius: 8px;
    border: 1px solid #e8f7f4;
    background: #fff;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;

}

/* dropdown اصلی */
.main-dropdown {
    border-radius: 12px;
    padding: 8px 0;
    border: none;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);

}

.font-span {

    font-size: 14px;
    align-items: center;
    justify-content: center;

}

.stayle-ti {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* زیرمنو */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    right: 100%;
    margin-top: -6px;
    display: none;
    border-radius: 8px;
    border: none;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

/* Hover باز شدن زیرمنو */
.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}

/* آیتم‌ها */
.dropdown-item {
    font-weight: 500;
    padding: 8px 20px;
}

.dropdown-item:hover {
    background-color: #f1f5f9;
}




.select-header {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 30%;
    gap: 2px;

}


/* sssfffffffffffffffffffffffsssssssss */
/* استایل دکمه اصلی Dropdown (جایگزین form-select-new) */
#selectButton {
    border: 1px solid #16987e4d;
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 30px;
    /* ارتفاع استاندارد‌تر از 25px */
    background-color: white;
    color: #16987e;
    padding: 0 12px;
    font-size: 14px;
    /* فونت خواناتر */
    transition: all 0.2s ease;
}

#selectButton:hover {
    border-color: #7aaeff;
    box-shadow: 0 0 8px rgba(122, 174, 255, 0.3);
}

#selectButton:focus {
    outline: none;
    border-color: #7aaeff;
    box-shadow: 0 0 8px rgba(122, 174, 255, 0.4);
}

/* متن placeholder داخل دکمه */
.color-chois {
    color: #B4B4B8;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90%;
}

.text-chois {
    font-size: 10px;
}

/* آیکون فلش پایین (اگه داری، اضافه کن) */
/* #selectButton::after {
      content: "▾"; 
    /* content: "▾";     این خیلی بهتر از ▼ هست */
/* یا اینا رو تست کن:
    content: "▼";  → معمولی
    content: "▾";  → کمی پرتر و شیک‌تر
    content: "⯆";  → مدرن‌تر
    content: "⌄";  → تیز و مینیمال
    */


/* استایل منوی Dropdown */
#selectDropdown {
    border-radius: 4px;
    border: 1px solid #ced4da;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    max-height: 300px;
    overflow-y: auto;
    padding: 0.75rem;
    margin-top: 4px;
    width: 100%;
    padding-top: 4px;

}

/* استایل input جستجو */
#searchInput {
    border-radius: 4px;
    border: 1px solid #ced4da;
    padding: 0.5rem 0.75rem;
    font-size: 12px;
    transition: all 0.2s ease;
    height: 30px;
}

#searchInput:focus {
    outline: none;
    border-color: #7aaeff;
    box-shadow: 0 0 8px rgba(122, 174, 255, 0.3);
}

/* استایل آیتم‌های قابل انتخاب */
.selectable-item {
    display: block;
    border-radius: 4px;
    padding: 0.6rem 0.75rem;
    transition: all 0.2s ease;
    cursor: pointer;
    font-size: 14px;
    color: #333;
}

[data-bs-theme=dark] .selectable-item {
    color: #e5e5e5;
}


.selectable-item:hover {
    background-color: var(--selecttable);
    color: #0d6efd;
}




/* جداکننده */
.dropdown-divider {
    margin: 0.5rem 0;
    border-top: 1px solid #dee2e6;
}

/* اسکرولبار زیبا برای منو */
#selectDropdown::-webkit-scrollbar {
    width: 8px;
}

#selectDropdown::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 4px;
}

#selectDropdown::-webkit-scrollbar-thumb {
    background-color: rgba(122, 174, 255, 0.4);
    border-radius: 4px;
}

#selectDropdown::-webkit-scrollbar-thumb:hover {
    background-color: rgba(122, 174, 255, 0.6);
}

/* وقتی منو بازه، کمی سایه بیشتر به دکمه بده */
.dropdown.show #selectButton {
    border-color: #7aaeff;
    box-shadow: 0 0 10px rgba(122, 174, 255, 0.4);
}



/* سررررررررررررررچ */

.insp-search-box {
    position: relative;
    width: 100%;
    max-width: 300px;

}

.insp-search-box input {
    width: 100%;
    padding: 6px 10px 6px 32px;
    font-size: 12px;
    border: 0px solid #e5e6e7;
    border-radius: 5px;

    background-color: transparent;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.text-student-search {
    color: var(--btn-text-search);
}

.insp-search-box input:focus {
    border-color: #1ab394;

    outline: none;
}

.insp-search-icon {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    font-size: 12px;
    color: #aaa;
}

.insp-search-list {
    margin-top: 8px;
    padding: 0;
    list-style: none;
    border: 1px solid #e5e6e7;
    border-radius: 3px;
    max-height: 180px;
    overflow-y: auto;
}

.insp-search-list li {
    padding: 6px 10px;
    font-size: 12px;
    cursor: pointer;
}

.insp-search-list li:hover {
    background-color: #f3f3f4;
}

.insp-search-box {
    display: flex;
    align-items: center;
    /* تراز عمودی */
    /* فاصله آیکن و اینپوت */
    padding: 10px;
}

.text-student-search {
    border: none;
    outline: none;
    width: 100%;
}

.btn-add {
    background-color: #e6faf4;
    color: black;
    width: 50%;
    height: 35px !important;
    border-right: #067c5b;

    transition: all 0.3s ease;
    /* انیمیشن نرم */
    position: relative;
    overflow: hidden;
    height: 25px;
    /* border-radius: 4px; */
    border: 1px dashed #1ab394 !important;
    width: 100%;
    border-radius: 4px;

}




.btn-add:hover {
    background-color: #1ab394 !important;
    /* آبی پررنگ‌تر (primary بوت‌استرپ) */
    color: white !important;
    transform: translateY(-3px);
    /* کمی بالا بیاد */
    /* box-shadow: 0 5px 10px #ffb4c9; سایه آبی ملایم */
}

/* 
 is valid    */

.search-container.no-valid-style .form-control:is(.is-valid, :valid),
.was-validated .search-container.no-valid-style .form-control:valid,
.search-container.no-valid-style .form-control.is-valid {
    border-color: #ced4da !important;
    background-image: none !important;

    box-shadow: none !important;
}


.text-form {

    border-bottom-width: 1px;
    padding-bottom: 15px;
    padding-top: 15px;
    /* border: 1px solid #105d4d1f; */
    background-color: #105d4d1f;
    border-radius: 8px;
    margin-bottom: 20px;
}


/* دکمه بازکننده مخصوص موبایل */
.mobile-filter-btn {
    width: 100%;
    height: 38px;
    color: white;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    border: 1px solid #1ab394;
    color: black;
    align-items: center;
    justify-content: center;

}

/* محفظه آبشاری */
.custom-dropdown-content {
    visibility: hidden;
    /* به جای display none برای لود شدن استایل چویز */
    opacity: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    z-index: 99999;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    transform: translateY(-10px);
}

/* وقتی منو باز می‌شود */
.custom-dropdown-content.show {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

/* استایل زیر هم قرار گرفتن دقیقا برای کلاس شما */
.select-header {
    display: flex;
    flex-direction: row !important;
    /* زیر هم کردن سلکت‌ها */
    gap: 10px !important;
}


.class-mb {
    margin-bottom: 10px;
}


/* حذف پس‌زمینه کلی و بردرهای آیتم‌ها */
.side-nav,
.side-nav-item {
    background-color: transparent !important;
    border: none !important;
}

/* حذف پس‌زمینه و سایه دکمه‌ها در حالت عادی و باز شده */
.side-nav .accordion-button {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    /* حذف هاله آبی هنگام کلیک */
    color: inherit;
    /* حفظ رنگ متن اصلی */
}

/* حذف پس‌زمینه بخش داخلی (منوی باز شونده) */
.side-nav .accordion-body {
    background-color: transparent !important;
    border: none !important;
}

/* اگر می‌خواهید وقتی دکمه باز است رنگ متن تغییر نکند */
.side-nav .accordion-button:not(.collapsed) {
    color: #fff;
    /* یا هر رنگی که برای حالت فعال دوست دارید */
}



.modal {
    z-index: 1060 !important;
}

.modal-backdrop {
    z-index: 1050 !important;
}

.modal-dialog {
    z-index: 1061 !important;
}



.scroll-box {

    overflow-y: auto;
    /* فقط اسکرول عمودی */
    overflow-x: hidden;
    /* بدون اسکرول افقی */
}


/* taaaaaaaghvim */




:root {
    --inspinia-primary: #1ab394;
    --inspinia-success: #1c84c6;
    --inspinia-danger: #ed5565;
    --inspinia-bg: #f5f7fa;
    --inspinia-card: #ffffff;
}

body {
    background-color: var(--inspinia-bg);

    color: #333;
}

[data-bs-theme=dark] {
    body {
        background-color: var(--inspinia-bg);


        color: #fff;
    }
}

.main-header {
    text-align: center;
    margin-bottom: 32px;
}

.main-header h2 {
    font-weight: 700;
    letter-spacing: -0.5px;
    color: #2d3e50;
}

.btn-show-calendar {
    display: block;
    margin: 0 auto 32px;
    padding: 12px 32px;
    font-size: 1.15rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--inspinia-primary), #0da883);
    color: white;
    border: none;
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(26, 179, 148, 0.35);
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn-show-calendar:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(26, 179, 148, 0.45);
}

.btn-show-calendar:active {
    transform: translateY(-1px);
}

#calendarSection {
    display: none;
}

.calendar-controls {
    background-color: #fff;
    border: 1px solid #e6e9f0;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 28px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.calendar-controls .form-label {
    font-size: 0.88rem;
    color: #5a6b82;
    font-weight: 600;
    margin-bottom: 6px;
}

.calendar-controls .form-select {
    border: 1px solid #dce2ec;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 0.98rem;
    transition: all 0.25s ease;
    background-color: #fafbfd;
}

.calendar-controls .form-select:focus {
    border-color: var(--inspinia-primary);
    box-shadow: 0 0 0 3px rgba(26, 179, 148, 0.18);
    background-color: white;
}

.month-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 28px;
}

.month-card {
    background: white;
    border-radius: 12px;

    overflow: hidden;
    transition: transform 0.25s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.25s ease;
}

.month-card:hover {
    transform: translateY(-3px);
    box-shadow: inset -1px 0px 15px 4px #1ab3942b;
}

.month-header {
    background: linear-gradient(120deg, var(--inspinia-primary), #0da883);
    color: white;
    padding: 14px 0;
    text-align: center;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -0.3px;
}

.week-days,
.days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    padding: 10px;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
}

.week-days {
    background: #fafafa;
    border-bottom: 1px solid #eee;
}

.week-days>div {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.84rem;
    font-weight: 700;
    color: #5a6b82;
    white-space: nowrap;
    letter-spacing: 0.3px;
    padding: 4px 0;
    margin: 0;
}

.days-grid {
    background-color: #e9ecef;
}

.day-cell {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.02rem;
    font-weight: 500;
    color: #333;
    transition: all 0.18s ease;
    position: relative;
    overflow: hidden;
    margin: 0;
}

.day-cell:hover {
    background-color: #f0fcf9;
    transform: scale(1.04);
    z-index: 2;
    box-shadow: 0 2px 6px rgba(26, 179, 148, 0.2);
}

.day-cell.empty {
    background-color: transparent;
    cursor: default;
}

.day-cell.filled {
    background-color: rgba(26, 179, 148, 0.12);
    color: var(--inspinia-primary);
    font-weight: 600;
    border: 1px solid rgba(26, 179, 148, 0.2);
}

.day-cell.iraq-holiday {
    border: 2px solid var(--inspinia-danger);
    border-radius: 8px;
    background-color: transparent;
    color: #333;
    font-weight: 500;
}

.day-cell.today {
    background: linear-gradient(135deg, #1ab394, #0da883);
    color: white;
    font-weight: 700;
    box-shadow: 0 2px 5px rgba(26, 179, 148, 0.3);
}

.detail-modal .modal-header {
    background: linear-gradient(135deg, var(--inspinia-primary), #0da883);
    color: white;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.nav-tabs .nav-link {
    color: #5a6b82;
    font-weight: 600;
    padding: 8px 16px;
}

.nav-tabs .nav-link.active {
    color: var(--inspinia-primary);
    border-bottom: 3px solid var(--inspinia-primary);
}

.modal-content {
    border-radius: 12px;
    border: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

/* رنگ‌دهی اولویت‌ها */
.day-cell.priority-high {
    border: 2px solid #dc3545 !important;
    border-radius: 8px;
}

.day-cell.priority-medium {
    border: 2px solid #ffc107 !important;
    border-radius: 8px;
}

.day-cell.priority-low {
    border: 2px solid #0d6efd !important;
    border-radius: 8px;
}

/* استایل جدول مناسبت‌ها */
.table-custom {
    font-size: 0.875rem;
}

.table-custom thead.bg-light th {
    font-weight: 600;
    color: var(--institle);
    font-size: 11px;
}

.table-custom tbody td {
    vertical-align: middle;
}

.btn-icon {
    width: 43px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 
    .search-container {
      position: relative;
      width: 100%;
    }

    .search-container .form-control {
      padding-right: 30px;
      font-size: 0.85rem;
    }

    .search-container .btn {
      position: absolute;
      right: 2px;
      top: 2px;
      z-index: 3;
      padding: 0;

      height: 20px;
    } */

.fs-xxs {
    font-size: 0.75rem !important;
}

.fs-xs {
    font-size: 0.8125rem !important;
}

/* 

.header .form-select   {
      padding-bottom: 7.5px ;
      background: #e8f7f4 !important ;
      border-color:#1ab394 !important ;
} */

.lesson-title {

    padding-right: 20px;
    padding-left: 20px;


    position: absolute;
    top: -19px;
    height: 40px;
    z-index: -10;
    margin-top: 0px;
    border: 1px solid #e8f7f4;
    background-image: var(--background-image);
    transition: all 0.3s ease;
    color: #000;
    border-radius: 8px;
    justify-content: center;
    display: flex;
    font-size: 14px;
    z-index: 20;
    align-items: center;
    justify-content: center;
    align-content: center;

    box-shadow: 2px 1px 2px 0px #ffffff
}




@media (max-width:1400px) {

    .lesson-title {

        width: 110px;
        padding-top: 30px;
        position: absolute;
        top: -19px;
        height: 27px;
        z-index: -10;
        margin-top: 0px;
        border: 1px solid #e8f7f4;
        background-image: var(--background-image);
        padding: 10px;

        transition: all 0.3s ease;
        color: #000;
        border-radius: 8px;
        justify-content: center;
        display: flex;
        font-size: 8px;
        z-index: 20;
        align-items: center;
        justify-content: center;
        align-content: center;

        box-shadow: 2px 1px 2px 0px #ffffff
    }

}



.card-box {
    border: 2px solid #1c84c6
}




@media (min-width:1400px) {
    .margin-box {
        padding-left: 15px;

        padding-right: 15px;
        margin-top: 20px
    }
}





@media (min-width:1400px) {

    .card-body {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        padding-top: 20px;
        padding-bottom: 20px;

        color: var(--ins-card-color)
    }
}



@media (max-width:900px) {

    .size-text {
        font-size: 10px;
    }
}

.size-text {
    font-size: 14px;
}

.page-one {
    font-size: 12px;
    display: flex;
    flex-direction: row;
    width: 80%;
    align-items: center;
    gap: 4px;

}


.border_input {
    margin-right: 4px;
    border-radius: 8px;
    border-color: #0acf97;
    width: 20px;
    padding-left: 10px;
    padding-right: 10px;

}

.border_input:hover {
    border: 1px solid #fff;
}





.page-mobile {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-left: 10px;
    padding-right: 10px;
}


/* taghvimmmmmmmmmmmm */

.container-body {

    background: white;
    min-height: 100vh;
    color: #fff;
    padding: 20px;
    padding-bottom: 30px;
    padding-top: 30px;
    justify-content: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
    min-height: calc(100vh - calc(var(--ins-topbar-height) + 1px));
    -webkit-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;

}

[data-bs-theme=dark] .container-body {




    min-height: 100vh;
    color: #fff;
    padding: 20px;
    padding-bottom: 30px;
    padding-top: 30px;
    justify-content: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
    min-height: calc(100vh - calc(var(--ins-topbar-height) + 1px));
    -webkit-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
    background: #192e37;

}


.calendar-container {
    max-width: 1200px;
    margin: auto;
    padding: 40px 15px;


}


.month-card {

    color: #000000a6;
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: inset -1px 4px 20px 6px #1ab39433;

}

.month-title {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: 10px;
    transition:
        transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        /* حرکت نرم با افکت کشسان */
        background-color 0.3s ease,
        border-bottom-color 0.3s ease;
    transform-origin: center;
    /* نقطه شروع اسکیل را مرکز قرار می‌دهد */
    will-change: transform, background-color, border-bottom-color;
    /* بهینه‌سازی عملکرد */
    background: linear-gradient(145deg, #c1ebe5, transparent);
    border-radius: 10px;
}

.month-title:hover {
    transform: scale(1.03);
    background-color: #c1ebe5;
    border-bottom-color: rgba(255, 255, 255, 0.7);
    /* شفافیت کمتر برای دید بهتر */
    cursor: pointer;

}

.weekdays {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    text-align: center;
    font-weight: 600;
    font-size: 13px;
    opacity: 0.85;
    margin-bottom: 10px;
    gap: 10px;
}

.days {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 8px;
}


.day {

    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    background-color: #ffeaa7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.3s ease, background 0.3s ease;
}


.day-week {

    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 14px;

    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.3s ease, background 0.3s ease;
    flex-direction: column;
}

.day-week::after {
    content: "";
    position: absolute;
    inset: 0;

}

.day::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid #d8f7f1;
    border-radius: 14px;
}

.day:hover {
    transform: translateY(-6px) scale(1.05);
    background: rgba(255, 255, 255, 0.25);
}

.day-week:hover {
    transform: translateY(-6px) scale(1.05);
    background: rgba(255, 255, 255, 0.25);
}

/* Motion Animation */
.day span {
    animation: popIn 0.6s ease forwards;
}

@keyframes popIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    70% {
        transform: scale(1.2);
        opacity: 1;
    }

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





.today {
    background: linear-gradient(135deg, #66aeae, #cdf9f0);
    color: #000;
}

.today-monasebat {
    border: 2px solid #2d8d8d;
    color: #000;
}


.empty {
    background: transparent;
    pointer-events: none;
}

footer {
    text-align: center;
    margin-top: 40px;
    font-size: 0.85rem;
    opacity: 0.7;
}






@media (max-width:500px) {

    .container-body {


        min-height: 100vh;
        color: #fff;
        padding: 0px;
    }
}

[data-bs-theme=dark] .month-card {
    background: rgba(255, 255, 255, 0.08);
    color: #000000a6;
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    color: var(--inspinia-bg);
}

[data-bs-theme=dark] .choices__inner {
    .choices__inner {
        padding: .4532rem .77rem !important;
        vertical-align: middle;
        background-color: var(--ins-secondary-bg);
        border: var(--ins-border-width) solid var(--ins-border-color);
        border-radius: var(--ins-border-radius) !important;
        font-size: .813rem;
        min-height: auto;
        color: var(--inspinia-card);
    }
}

[data-bs-theme=dark] .choices__list--dropdown {
    padding: 10px 10px 20px 10px;
    background-color: var(--inspinia-card);
    border: 1px solid var(--ins-border-color) !important;
    -webkit-box-shadow: var(--ins-box-shadow);
    box-shadow: var(--ins-box-shadow);
    border-radius: .3rem;
    -webkit-animation-name: DropDownSlideUp;
    animation-name: DropDownSlideUp;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    will-change: transform;
    width: 200px;
}

[data-bs-theme=dark] .day {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    background-color: #1ab39405;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.3s ease, background 0.3s ease;
}

[data-bs-theme=dark] .today {
    background: linear-gradient(135deg, #f7971e, #ffd200);
    color: #000;
}

@media (max-width:500px) {

    .days {
        gap: 3px;
    }
}


@media (max-width:500px) {

    .paddinf-body {
        padding: 0px;
    }
}



/* oclockkkkkkkkkkkkkkkkkkkkkkkk */





.body-clock {
    min-height: 100vh;
    background: linear-gradient(135deg, #0f172a, #1e293b);
    font-family: system-ui, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #e2e8f0;
    padding: 20px;
}

.container-taghvim {

    border-radius: 20px;
    gap: 5px;
    width: 100%;
    display: flex;
    align-items: start;
    flex-direction: row;
}

@media (max-width:995px) {
    .container-taghvim {

        border-radius: 20px;
        gap: 5px;
        width: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
    }

}

@media (max-width:500px) {
    .time-input {

        padding: 18px;
        font-size: 15px;
        text-align: center;
        letter-spacing: 10px;
        border: 2px solid #aaaaaa42;
        border-radius: 8px;
        color: #000000;
        font-family: monospace;
        cursor: pointer;
        height: 36px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}


@media (max-width:900px) {

    .form-label {
        font-size: 0.88rem;
        color: #5a6b82;
        font-weight: 600;

    }

}

.modal-box {
    display: flex;
    flex-direction: row;

}

@media (max-width:900px) {

    .modal-box {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

}

h1 {
    text-align: center;
    margin-bottom: 35px;
    font-size: 1.8rem;
    color: #cbd5e1;
}

.time-input {

    padding: 18px;
    font-size: 15px;
    text-align: center;
    letter-spacing: 10px;
    /* background: #1ab3941f; */
    border: 1px solid #aaaaaa42;
    border-radius: 8px;
    color: #000000;
    font-family: monospace;
    cursor: pointer;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}


.time-input:focus {
    outline: none;
    border-color: #60a5fa;
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.3);
}

/* Picker */
#picker {
    display: none;
    position: fixed;
    inset: 0;

    z-index: 999;
    justify-content: center;
    align-items: center;
}

#picker.active {
    display: flex;
}

.picker-box {
    background: #fff;
    border-radius: 10px;
    padding: 0;
    padding-bottom: 0px;
    width: 320px;
    padding-bottom: 10px;
    max-width: 92%;
    box-shadow: -1px 1px 7px 0px rgb(26, 179, 148);
}

.step-title {
    text-align: center;
    font-size: 1rem;
    color: #94a3b8;
}

.clock {
    position: relative;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: #f1f5f9;
    margin: 0 auto 20px;
    margin-bottom: 20px;
    border: 3px solid #e2e8f0;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.05);
}

.number {
    position: absolute;
    width: 30px;
    height: 30px;
    left: 50%;
    top: 50%;
    margin-left: -15px;
    margin-top: -15px;
    text-align: center;
    line-height: 30px;
    font-size: 1rem;
    font-weight: 500;
    color: #334155;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.1s;
}

.number2 {

    position: absolute;
    bottom: 100px !important;
    left: 50%;

}

.number:hover,
.number.selected {
    background: #ff477b;
    color: white;
    border-radius: 50%;
    transform: scale(1.15);
}

.hand {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -100%);
    transform-origin: center bottom;
    border-radius: 4px 4px 0 0;
    box-shadow: -1px 1px 5px 1px rgb(0 0 0 / 29%);
}

.hour-hand {
    width: 6px;
    height: 60px;
    background: #2d8d8d;
    transform: translateX(-50%) rotate(0deg);
}

.minute-hand {
    width: 4px;
    height: 75px;
    background: #475569;
    transform: translateX(-50%) rotate(0deg);
}

.center-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    background: #2d8d8d;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.actions {
    display: flex;
    gap: 15px;
    margin-top: 20px;

    font-size: 5px;
}

.btn {

    padding: 12px;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    cursor: pointer;
    height: 45px;
}



.btn.next,
.btn.confirm {
    background: #1ab394;
    color: #ffffff;
    width: 100%;
    height: 40px;
    border-radius: 50px;
    padding: 10px;
    font-size: 14px;
}



[data-bs-theme=dark] .btn.next {
    background: #0b5a4a;
    color: #ffffff;
    width: 100%;
    height: 40px;
    border-radius: 5px;
    padding: 10px;
    font-size: 14px;
}

[data-bs-theme=dark] .btn.confirm {
    background: #0b5a4a;
    color: #ffffff;
    width: 100%;
    height: 40px;
    border-radius: 5px;
    padding: 10px;
    font-size: 14px;
}

[data-bs-theme=dark] .btn.cancel {
    background: #475569;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.btn.cancel {

    color: gray;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;


}


.modal-size {

    display: flex;
    justify-content: center;
    align-items: center;

}



.pading-card {
    padding: 20px;
    border: 1px dashed#7c3aed;
}



@media (max-width:900px) {

    .pading-card {
        padding: 0px;
        border: 1px dashed#7c3aed;
    }



}



/* 
dark-clock */





h1 {
    text-align: center;
    margin-bottom: 35px;
    font-size: 1.8rem;
    color: #cbd5e1;
}

[data-bs-theme=dark] .time-input {

    background: #0f172a;

    color: #60a5fa;

}

.time-input:focus {
    outline: none;
    border-color: #60a5fa;
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.3);
}


#picker.active {
    display: flex;
}

[data-bs-theme=dark] .picker-box {
    background: #1e293b;

}

[data-bs-theme=dark] .step-title {

    color: #94a3b8;
}


[data-bs-theme=dark][data-bs-theme=dark] .ampm-btn.am {
    background: #334155;
    color: #e2e8f0;
}

[data-bs-theme=dark] .ampm-btn.pm {
    background: #334155;
    color: #e2e8f0;
}

[data-bs-theme=dark] .ampm-btn.active {
    background: #3b82f6;
    color: white;
}

[data-bs-theme=dark] .clock {

    background: #0f172a;
    border: 10px solid #334155;
    box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.7);
}

[data-bs-theme=dark] .number {

    color: #cbd5e1;

}

[data-bs-theme=dark] .number:hover,
.number.selected {
    background: #ff477b;
    color: white;
    justify-content: center;
    align-items: flex-end;

}

[data-bs-theme=dark] .hand {

    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.6);
}

[data-bs-theme=dark] .hour-hand {
    background: #60a5fa;
}

[data-bs-theme=dark] .minute-hand {
    background: #94a3b8;
}

[data-bs-theme=dark] .center-dot {

    background: #60a5fa;


}

[data-bs-theme=dark] .btn.cancel {
    background: #475569;
    color: white;
}



#minuteNumbers {
    display: grid;
    /* یا flex */
    place-items: center;
    /* مرکزیت */
}

.active-oclock {
    border-radius: 50px;
    height: 40px;
    width: 50%;
    box-shadow: inset 1px 1px 5px 2px #4d4d4d33;
    border: 1px dashed #0b5a4a;
    background-color: #1ab3944d;
    padding: 10px;
    align-items: center;
    justify-content: center;
    display: grid
}

.not-activ-oclock {
    border-radius: 50px;
    height: 40px;
    width: 50%;
    box-shadow: -2px 0px 3px 0px #3a3f3e9e;
    border: 0px;
    padding: 10px;
    align-items: center;
    justify-content: center;
    display: grid;
    background: #f1f5f9;
}


.not-activ-oclock:hover {
    animation: alternate;
}




@media (max-width:900px) {

    .auth-box {
        padding: 10px
    }

}

.form-input {
    height: 3.25rem;
    width: 100%;
    border-radius: .75rem;
    border-width: 1px;
    border-color: #0000;
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity));
    padding-left: .875rem;
    padding-right: .875rem;
    font-size: .875rem;
    line-height: 1.5rem;
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity));
    transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
}



.style-body {
    /* background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); */
    background-image: url(../images/gallery/gg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* دکوراسیون پس‌زمینه */
.background-decoration {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}

.circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
}

.circle:nth-child(1) {
    width: 400px;
    height: 400px;
    top: -150px;
    left: -100px;
}

.circle:nth-child(2) {
    width: 300px;
    height: 300px;
    bottom: -100px;
    right: -50px;
}

.circle:nth-child(3) {
    width: 200px;
    height: 200px;
    top: 50%;
    left: 30%;
}

/* کانتینر لاگین */
.login-container {
    width: 100%;
    max-width: 440px;
    padding: 50px 40px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 10;
    animation: fadeIn 0.6s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-header {
    text-align: center;
    margin-bottom: 40px;
}

.login-header h1 {
    color: white;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 10px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    letter-spacing: 1px;
}

.login-header p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    margin-top: 8px;
}

/* فرم لاگین */
.login-form .form-group {
    margin-bottom: 25px;
    position: relative;
}

.login-form label {
    color: white;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
    align-items: center;
    justify-content: right;
    display: flex;

    padding-top: 10px;
}

.login-form input {
    width: 100%;

    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    color: white;
    font-size: 14px;
    transition: all 0.3s ease;
    outline: none;
}

.login-form input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.login-form input:focus {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

.login-form input:focus+label {
    color: #fff;
}

/* دکمه ورود */
.login-form .chalk-btn {
    width: 100%;
    padding: 16px;
    background: #193c49;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    color: #f5f5f5;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 10px;
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.4);
    background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px), radial-gradient(rgba(0, 0, 0, 0.15) 1px, #f2f2f200 1px);
    background-size: 6px 6px, 4px 4px;
    box-shadow: 0px 1px 20px 0px rgba(255, 255, 255, 0.05), 0 0 12px rgb(255 255 255 / 62%);
    transition: transform 0.35s cubic-bezier(.25, .8, .25, 1), box-shadow 0.35s cubic-bezier(0.25, 0.1, 0, 1.08), background-position 0.6s ease;

}


.login-form .chalk-btn:hover {
    background-position: 12px 12px, -8px -8px;
}


.login-form .chalk-btn:active {
    transform: translateY(0) scale(0.98);
    box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.35);
}


/* لینک فراموشی رمز عبور */
.forgot-password {
    text-align: center;
    margin-top: 10px;
}

.forgot-password a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 12px;
    transition: color 0.3s ease;
}

.forgot-password a:hover {
    color: white;
    text-decoration: underline;
}

/* فوتر */
.login-footer {
    text-align: center;
    margin-top: 30px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
}

.login-footer a {
    color: white;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.login-footer a:hover {
    color: #fff;
}

/* واکنش‌گرا */
@media (max-width: 480px) {
    .login-container {
        padding: 35px 25px;
        margin: 15px;
    }

    .login-header h1 {
        font-size: 26px;
    }

    .circle {
        display: none;
    }
}

.input-icon {
    position: absolute;
    right: 320px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    font-size: 20px;

}

@media (max-width: 390px) {
    .input-icon {
        position: absolute;
        right: 270px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--gray-400);
        font-size: 20px;
    }
}

.form-input:focus+.input-icon {
    color: var(--primary-blue);
}

.input-with-icon {
    position: relative;
}

.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

@media (max-width: 480px) {
    .form-options {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
}

/* کانتینر اصلی همونه */
.remember-option {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: #3a3a3a;
    font-weight: 500;
}

/* مخفی کردن checkbox پیش‌فرض */
.remember-option input {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 6px;
    border: 2px solid #b5e3dc;
    background: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
}

/* حالت hover */
.remember-option input:hover {
    border-color: #3dd5c8;
}

/* حالت checked با گرادیانت */
.remember-option input:checked {
    background: linear-gradient(135deg, #1dd3b0, #2ec4f1);
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(46, 196, 241, 0.45);
}

/* تیک داخل checkbox */
.remember-option input:checked::after {
    content: "✓";
    position: absolute;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -52%);
}

.password-wrapper {
    position: relative;
}

.password-toggle {
    position: absolute;
    left: 12px;
    /* RTL */
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--gray-400);
    font-size: 18px;
    transition: color 0.2s ease;
}

.password-toggle:hover {
    color: #2ec4f1;
}


.login-options {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 10px;

}

.a-text {
    color: #a9cfff;
}

.back-color-black {
    background-color: var(--dark-header);
}

.back-color-header {
    background-color: var(--ins-light-bg-subtle);
}


.btn-ghaema {
    background-color: var(--btn-ghaema);
}


.back-color-modal {
    background-color: var(--back-modal);
}




@media (max-width:575.98px) {

    .padding-null {
        padding: 0px;
    }


}






.sticky-footer {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 -1rem;
    padding: 1rem;
    margin-top: 50px;
}


.btn-sabt {
    width: 48%;
    height: 40px;
}

.modalbtn {

    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

.btn-file {
    height: 36px;
}



/* کانتینر اصلی برای هر ماه */
.month-wrapper {
    display: flex;
    flex-direction: row-reverse;
    /* برای راست به چپ */
    align-items: flex-start;
    gap: 12px;
    position: relative;
}

/* ستون برچسب هفته‌ها */
.week-labels {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
    flex-shrink: 0;
}

/* هر برچسب هفته */
.week-label {
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    flex-shrink: 0;
    HEIGHT: 100px;
    /* position: absolute; */
    /* left: 490px; */
    display: flex;

}

.week-label:hover {
    transform: translateX(5px);
}

/* تقویم اصلی */
.month-card {
    flex: 1;
    min-width: 0;
}

/* 
selectbooooooooooox */




/* استایل نوار فیلتر مینیمال */
.minimal-filter-bar {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    padding: 0.5rem;
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
}

.minimal-filter-bar:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}



.search-container input {
    border: none;

    border-radius: 8px;
    padding-right: 2.5rem;
    padding-left: 1rem;
    height: 36px;
    font-size: 0.875rem;
    transition: all 0.3s ease;
    width: 100%;
    border: 1px solid #e9ecef;
}

.search-container input:focus {
    background: white;
    box-shadow: 0 0 0 2px rgba(67, 97, 238, 0.15);
    outline: none;
    border-color: #4361ee;
}

.search-container i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #a0a0c0;
    font-size: 0.9rem;
}

.filter-btn {
    background: transparent;
    border: none;
    color: #6c757d;
    padding: 0.45rem 0.9rem;
    border-radius: 8px;

    font-weight: 500;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
    min-width: 95px;
    cursor: pointer;
}

.filter-btn:hover {
    background: #f8f9fc;
    color: #4361ee;
}

.filter-btn.active {
    background: rgba(67, 97, 238, 0.12);
    color: #4361ee;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(67, 97, 238, 0.15);
}

.filter-btn i {
    font-size: 0.9rem;
    margin-left: 4px;
}

.badge {
    padding: 0.35em 0.55em;
    font-weight: 500;
    border-radius: 6px;
    font-size: 0.75rem;
    margin-right: 2px;
}

.badge-secondary {
    background-color: #e9ecef;
    color: #495057;
}

.badge-success {
    background-color: rgba(76, 201, 240, 0.15);
    color: #0a7d8c;
}

.select-all-container {
    margin-right: auto;
    padding: 0 0.75rem;
}

.form-check-label {
    font-weight: 500;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.form-check-input {
    margin-left: 0.4rem !important;
    cursor: pointer;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1.5px solid #ced4da;
    transition: all 0.3s ease;
}

.form-check-input:checked {
    background-color: #4361ee;
    border-color: #4361ee;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}

.form-check-input:focus {
    box-shadow: 0 0 0 2px rgba(67, 97, 238, 0.25);
    border-color: #4361ee;
}

.divider {
    width: 1px;
    height: 24px;
    background: #e9ecef;
    margin: 0 0.75rem;
}

/* استایل آیتم‌های درس */
.lesson-item {
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 8px;
    user-select: none;
}

.lesson-item:hover {
    background-color: #f8f9fa;
}

.lesson-item .form-check-label {
    transition: all 0.2s;
    border: 1px solid #e9ecef;
}




/* استایل اسکرول شخصی‌سازی شده */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f3f5;
    border-radius: 10px;
    margin: 4px 2px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
    border: 2px solid #f1f3f5;
    transition: all 0.3s ease;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
}

.custom-scrollbar::-webkit-scrollbar-thumb:active {
    background: #4361ee;
}

/* استایل اسکرول برای فایرفاکس */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f3f5;
}

/* ظاهر آیتم‌های انتخاب شده */
.lesson-item .form-check-label.bg-primary.bg-opacity-10 {
    background-color: rgba(67, 97, 238, 0.1) !important;
    border-color: #4361ee !important;
}

.lesson-item .form-check-label.bg-primary.bg-opacity-10 i.bi-check-circle-fill {
    color: #4361ee;
}




/* ریسپانسیو برای موبایل */
@media (max-width: 768px) {
    .minimal-filter-bar {
        flex-wrap: wrap;
        padding: 0.75rem;
    }

    .search-container {
        order: 3;
        max-width: 100%;
        margin-top: 0.75rem;
        margin-left: 0;
        width: 100%;
    }

    .select-all-container {
        order: 2;
        margin-right: 0;
        margin-top: 0.5rem;
        width: 100%;
        text-align: center;
    }

    .divider {
        display: none;
    }

    .filter-btn {
        margin-bottom: 0.5rem;
    }
}

/* stikyyyyyyyyyyyyyy */
.new-style-one {
    overflow: hidden;
    height: 65dvh;
}


.new-style-two {
    height: 100%;
    max-height: 700px;
    overflow: auto;
}

.new-style-three {
    position: relative;
    max-height: 65dvh;

}

.new-style-for {
    min-width: 100%;
}

.new-style-five {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: white !important;
}




/* تنظیمات کلی برای نرمی حرکات */
[data-bs-toggle="collapse"],
.hover-bg-white,
.form-check-input,
.bi-chevron-down {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* منحنی حرکت حرفه‌ای */
}

/* 1. هاور روی هدر اصلی (حس کلیک و بلند شدن) */
[data-bs-toggle="collapse"] {
    border-radius: 8px;
    /* گوشه‌های گرد برای زیبایی بیشتر */
}

[data-bs-toggle="collapse"]:hover {
    background-color: #ffeaa752 !important;
    border-color: 1px solid #ffeaa752 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(204, 210, 209, 0.39);
}

/* 2. چرخش آیکون (چرخش فنری و نرم) */
.bi-chevron-down {
    display: inline-block;
    /* برای اعمال ترنسفورم ضروری است */
}

[aria-expanded="true"] .bi-chevron-down {
    transform: rotate(180deg);
    color: #ff477bcc !important;
    /* چرخش با افکت کشسانی (Bouncy) */
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease;
}

/* 3. هاور روی ردیف‌های داخلی (حرکت به چپ و بزرگ‌نمایی) */
.hover-bg-white {
    border-radius: 6px;
    position: relative;
    /* برای مدیریت لایه‌بندی */
    z-index: 1;
}

.hover-bg-white:hover {
    background-color: #ffffff !important;
    /* سایه عمیق‌تر برای حس شناور شدن */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    /* حرکت به چپ بیشتر + کمی بزرگ شدن */
    transform: translateX(-8px) scale(1.02);
    z-index: 2;
    /* بیاید روی بقیه المان‌ها */
    border-left: 4px solid #fd0a4fcc;
    /* یک نوار رنگی کنار آن ظاهر شود */
}

/* 4. استایل سوییچ‌ها (افکت نئونی و پالس) */
.form-check-input {
    cursor: pointer;
    border-color: #dee2e6;
    box-shadow: none;
}

.form-check-input:checked {
    background-color: #68a6b9;
    border-color: #76aba0;
    box-shadow: 0 0 7px 6px #0acf971a;
    transform: scale(1.1);

}

.flatpickr-wrapper {
    width: 100% !important;
}


.modalbtn .btn {
    /* این خط باعث می‌شود دکمه‌ها تا حد ممکن رشد کنند و فضا را پر کنند */
    flex: 1;
}

/* اگر می‌خواهی فقط زمانی که دکمه ثبت نیست، دکمه بستن بزرگ شود */
.btn-sabt[style*="display: none"]+.btn-close {
    width: 100%;
}



/* ویجتتتتتتتتتتتتت */

.widget-dropdown {
    min-width: 330px;
    padding: 20px;
    border-radius: 20px;
    border: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    margin-top: 10px !important;
}

.widget-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.widget-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px;
    border-radius: 15px;
    background: #fff;
    cursor: grab;
    transition: all 0.2s;
    position: relative;
    border: 1px solid #eee;
}

[data-bs-theme=dark] .widget-item {
    background-color: #000000;
}

.widget-item i {
    font-size: 2rem;
    color: #444;
    margin-bottom: 8px;
}

[data-bs-theme=dark] .widget-item i {

    color: #f6f4f4;

}


.btn-remove {
    position: absolute;
    top: 5px;
    right: 8px;
    color: #ff4d4d;
    cursor: pointer;
    display: none;
}

.widget-item:hover .btn-remove {
    display: block;
}

.add-btn {
    border: 2px dashed #ccc;
    color: #aaa !important;
    cursor: pointer;
}

.selectable-item {
    display: flex;
    align-items: center;
    padding: 12px;
    border: 2px solid #f0f0f0;
    border-radius: 12px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: 0.2s;
}

.selectable-item.active-choice {
    border-color: #0d6efd;
    background-color: #f0f7ff;
}

[data-bs-theme=dark] .selectable-item.active-choice {
    border-color: #4a86e0;
    background-color: #2b3139;
}

.selectable-item i {
    font-size: 1.5rem;
    margin: 0 12px;
    color: #555;
}

[data-bs-theme=dark] .selectable-item i {
    color: #f6e5e5;
}


.form-check-input {
    cursor: pointer;
    width: 1.3em;
    height: 1.3em;
}

.sortable-ghost {
    opacity: 0.3;
    background: #e9ecef;
    border: 2px dashed #007bff;
}


.add-btn-sticky {
    position: sticky;

    left: 0;
    right: 0;
    background: #fff;
    border: 2px dashed #0d6efd;
    border-radius: 15px;
    padding: 12px;
    text-align: center;
    color: #0d6efd;
    cursor: pointer;
    z-index: 100;
    margin-top: 10px;
    box-shadow: 0 -5px 15px rgba(255, 255, 255, 0.8);
}


.btnFile {
    display: flex;
    flex-direction: row;
    gap: 4px;
}


/* حالت پیش‌فرض و قابل کلیک */
.widget-item {
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;

}

/* وقتی قابل جابه‌جایی است (مثلاً کلاس sortable یا draggable دارد) */
.widget-item.grab,
.widget-item[draggable="true"],
.sortable .widget-item {
    cursor: grab;
}

/* موقع کشیدن / درگ فعال */
.widget-item.dragging,
.widget-item:active,
.sortable .widget-item.sortable-chosen,
.sortable .widget-item.sortable-drag {
    cursor: grabbing !important;
}

/* اختیاری - ظاهر بهتر موقع درگ */
.widget-item.dragging {
    opacity: 0.85;
    transform: scale(1.03);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
}


.widget-item:hover {

    border: 2px solid #0d6efd;
    background-color: #1170fd21;
}

/* فایل منیجر */

.hover-scale:hover {
    transform: scale(1.03);
    transition: transform 0.18s ease;
}

.hover-lift:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.22s ease;
}

.bg-gradient-white {
    background: linear-gradient(175deg, #ffffff 0%, #f8fcff 100%);
}


/* سایدبار */

.sidebar-left {
    width: 100%;
    background: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    border: 1px solid #0db586;
}

.bg-white-file {
    background-color: white;
    width: 50%;
    border-radius: 10px;
}

.btn-creat-yellow {
    background-color: #f7fae6 !important;
    border: 1px dashed #dea669 !important;

}

.btn-creat-yellow:hover {
    background-color: #ffc88a !important;
    color: #000 !important;
}






/* استاااااااااااااایل دکمه‌های هدر */
.modern-btn {
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 10px 14px;
    color: #6c757d;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
    display: flex;
    align-items: center;
    cursor: pointer;
    border: 1px solid #722b69;
}

[data-bs-theme=dark] .modern-btn {
    background: #22232c;
    color: #c6cdd4;
}

.modern-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    color: #4f46e5;
}

.btn-menu-trigger {
    background-color: transparent;
    border: none;
    color: #343a40;
    font-weight: 500;
    border: 1px solid #894e82;
}

[data-bs-theme=dark] .btn-menu-trigger {
    color: #cde6ff;
}

/* منوی اصلی */
.custom-dropdown-menu {
    border: none;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    padding: 12px;
    margin-top: 12px !important;
    min-width: 240px;
}

.dropdown-item {
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 4px;
    color: #495057;
    font-weight: 500;
}

[data-bs-theme=dark] .dropdown-item {
    color: #b3c3d2;
}


.dropdown-item:hover {
    background-color: #f3f4f6;
    color: #4f46e5;
    padding-right: 20px;
}

@media (max-width: 768px) {
    .dropdown-submenu>.dropdown-menu {
        position: static;
        box-shadow: none;
        background-color: #f8f9fa;
        border: none;
        width: 100%;
        padding-right: 15px;
        border-right: 2px solid #dee2e6;
    }

    .custom-dropdown-menu {
        width: 280px;
        right: 0 !important;
    }
}


/* سسسسسسسسسسسسسسسسسلکت */
/* نمایش فقط در موبایل */
@media (min-width: 1200px) {
    .mobile-filter-section {
        display: none !important;
    }
}

.mobile-filter-section {
    padding: 15px;
}

/* دکمه بازکننده */
.btn-open-filter {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 15px;
    border-radius: 12px;
    width: 100%;
    font-weight: bold;
    font-size: 16px;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

/* 📱 منوی تمام صفحه */
.full-screen-filter {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    z-index: 99999;
    /* بالاتر از همه لایه‌ها */
    display: none;
    /* در حالت عادی مخفی */
    flex-direction: column;
    overflow-y: auto;
    animation: slideUp 0.3s ease-out;
}

.full-screen-filter.active {
    display: flex;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

/* هدر منوی تمام صفحه */
.filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    background: white;
    z-index: 10;
}

.filter-header h5 {
    margin: 0;
    font-weight: 900;
    color: #333;
}

.btn-close-filter {
    background: #f1f5f9;
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    font-weight: bold;
}

/* محتوای فیلترها */
.filter-body {
    padding: 20px;
    flex-grow: 1;
}

.custom-select-wrapper {
    position: relative;

}

.select-label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #475569;
    font-size: 14px;
}

.custom-select-box {
    width: 100%;
    padding: 16px;
    background-color: var(--ins-secondary-bg);
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    height: 39.5px;
}

.custom-select-box.active {
    border-color: #764ba2;
    background-color: var(--ins-secondary-bg);
}

/* لیست گزینه‌ها داخل تمام صفحه */
.custom-options-list {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    z-index: 100;
    margin-top: 5px;
    max-height: 200px;
    overflow-y: auto;
}

.custom-select-wrapper.open .custom-options-list {
    display: block;
}

.custom-select-wrapper.open {
    z-index: 101;
}

.custom-option {
    padding: 15px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 14px;
    cursor: pointer;
}

.custom-option:last-child {
    border: none;
}

.custom-option.selected {
    background-color: var(--ins-info-border-subtle);
    color: var(--ins-body-color);
    font-weight: bold;
}

/* فوتر ثابت برای دکمه اعمال */
.filter-footer {
    padding: 20px;
    border-top: 1px solid #eee;
    position: sticky;
    bottom: 0;
    background: white;
}

.btn-apply {
    background: #1e293b;
    color: white;
    border: none;
    padding: 16px;
    border-radius: 12px;
    width: 100%;
    font-weight: bold;
    font-size: 16px;
}



/* index */

:root {
    --primary-green: #8BC34A;
    --dark-green: #689F38;
    --light-green: #DCEDC8;
    --primary-orange: #FF9800;
    --light-orange: #ffe0b2;
    --primary-yellow: #FFEB3B;
    --text-dark: #424242;
    --text-light: #757575;
    --white: #ffffff;
    --cream: #FFF8E1;
    --section-green: #dcedc8;
    --gray: #676a6c;
    --light: #f9f9f9;
    --white: #ffffff;
    --border: #f7d2f4;
    /* Effects */
    /* Effects */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.15);
    --shadow-hover: 0 12px 35px rgba(26, 179, 148, 0.25);
    --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --transition-sm: all 0.25s ease;
    --radius: 16px;
    --radius-lg: 24px;
}

/* Mountains Section */
.mountains-section {
    position: relative;
    margin-top: 60px;
    height: 200px;
    overflow: hidden;
}

.mountain {
    position: absolute;
    bottom: 0;
}

.mountain-left {
    left: 5%;
    width: 200px;
}

.mountain-right {
    right: 5%;
    width: 150px;
    /* animation: bounceOut 5s ease-in-out infinite; */
}

.mountain svg {
    width: 100%;
    height: auto;
}



/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #bad6d0;
}

::-webkit-scrollbar-thumb {
    background: #1ab394;
    border-radius: 5px;
}


/* ===== FLOATING PANELS ===== */
.floating-panels {
    position: fixed;
    left: 25px;
    bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 1000;
}

.panel-btn {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background: var(--white);
    color: var(--dark);
    padding: 12px 20px;
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    transition: var(--transition);
    border: 2px solid #8cc298;
    min-width: 240px;
    position: relative;
    overflow: hidden;
}

.panel-btn::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 100%;
    background: var(--primary);
    transition: var(--transition);
}

.panel-btn:hover {
    transform: translateX(-6px);
    border: 2px solid #94c9a0;
    background-color: #bee9c7e1;

    box-shadow: var(--shadow-hover);
}

.panel-btn:hover::before {
    width: 6px;
}

.panel-btn i {
    width: 26px;
    text-align: center;
    color: var(--primary);
    font-size: 1.1rem;
    transition: var(--transition-sm);
}

.panel-btn:hover i {
    transform: scale(1.1);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
    .hero-title {
        font-size: 2.4rem;
    }

    .hero-subtitle {
        font-size: 1.15rem;
    }
}

@media (max-width: 768px) {
    .floating-panels {
        left: 50%;
        transform: translateX(-50%);
        bottom: 15px;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    .panel-btn {
        min-width: auto;
        padding: 10px 14px;
        font-size: 0.85rem;
    }

    .panel-btn span {
        display: none;
    }

    .panel-btn i {
        width: auto;
    }

    .hero-section {
        padding: 110px 0 60px;
        text-align: center;
    }

    .hero-content {
        margin: 0 auto;
    }

    .hero-subtitle {
        margin: 0 auto 2rem;
    }

    .hero-buttons {
        justify-content: center;
    }

    .hero-title {
        font-size: 2rem;
    }

    .tabs-nav {
        justify-content: center;
    }

    .tab-btn {
        min-width: 100px;
        padding: 10px 14px;
        font-size: 0.9rem;
    }

    .level-selector {
        flex-direction: column;
        align-items: center;
    }

    .level-btn {
        width: 100%;
        max-width: 300px;
    }
}

/* Activity List */
.activity-list {

    border-radius: 15px;
    padding: 20px;

    border: 1px solid #f8ac59;
}

.activity-item {
    background: #fff4e7;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 15px;
    border-right: 4px solid #ffb300;

}

.activity-item:hover {

    animation: shakeY 5s linear infinite;
}

.activity-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ffe082;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.activity-content {
    flex: 1;
}

.activity-title {
    color: #2e7d32;
    font-weight: 600;
    font-size: 14px;
}

.activity-desc {
    color: #90a4ae;
    font-size: 12px;
}

/* ===== TABS SECTION ===== */
.tabs-section {

    background-color: #1c84c608;


}

.tabs-nav {
    display: flex;
    gap: 0.5rem;
    background: #bcddf1;
    padding: 6px;
    border-radius: 16px;
    margin-bottom: 2rem;
    overflow-x: auto;

    justify-content: center;
}

@media (max-width:576px) {
    .tabs-nav {
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
        background: #cae2f1;
        padding: 6px;
        border-radius: 16px;
        margin-bottom: 2rem;
        overflow: auto;
        justify-content: space-evenly;
    }
}

/* .tabs-nav::-webkit-scrollbar {
            display: none;
        } */

.tab-btn {
    flex-direction: row;
    min-width: 120px;
    padding: 12px 20px;
    border: none;
    background: transparent;
    border-radius: 12px;
    font-weight: 600;
    color: var(--gray);
    cursor: pointer;
    transition: var(--transition-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.95rem;
}

.tab-btn.active,
.tab-btn:hover {
    background: #fff;
    color: var(--primary);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
    border: 1px solid #1c84c6;
}

.tab-btn i {
    font-size: 1.1rem;
}

.tab-content-index {
    display: none;
    animation: fadeInUp 0.5s ease;
}

.tab-content-index.active {
    display: block;
}

.tab-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.content-card {
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    border: 2px solid #ff6000;
    transition: var(--transition);
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px azure;
    border-right: 3px solid #bacad4;
}

.content-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border: 2px dashed var(--border);
}

.content-media {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 3.5rem;
    position: relative;
    overflow: hidden;
    border-radius: 16px 16px 0 0;
}

.content-media::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, rgba(0, 0, 0, 0.1), transparent 60%);
    z-index: 1;
}

.content-media::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg,
            transparent 30%,
            rgba(255, 255, 255, 0.3) 50%,
            transparent 70%);
    transform: rotate(45deg) translateX(-100%);
    transition: transform 0.6s ease;
    z-index: 2;
}

.content-card:hover .content-media::after {
    transform: rotate(45deg) translateX(100%);
}

.content-media i {
    position: relative;
    z-index: 1;
}

.content-body {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.content-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: linear-gradient(135deg, rgba(26, 179, 148, 0.15), rgba(248, 172, 89, 0.1));
    color: var(--primary);
    padding: 6px 18px;
    border-radius: 24px;
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 1rem;
    width: fit-content;
    border: 1px solid rgba(26, 179, 148, 0.2);
    transition: all 0.3s ease;
}

.content-card:hover .content-tag {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: rgb(46, 46, 46);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(26, 179, 148, 0.3);
}

.content-title {
    font-weight: 700;
    margin-bottom: 0.8rem;
    color: var(--dark);
    font-size: 1.2rem;
}

.content-desc {
    color: var(--gray);
    font-size: 0.95rem;
    margin-bottom: 1.2rem;
    line-height: 1.8;
    flex-grow: 1;
}

.content-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    margin-top: auto;
}

.content-date {
    font-size: 0.85rem;
    color: var(--gray);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.content-action {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: var(--transition-sm);
}

.content-action:hover {
    gap: 0.8rem;
}

/* Navigation - Custom to avoid Inspinia conflict */
.kinder-navbar {
    background: var(--white);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.kinder-navbar .navbar-brand {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dark-green);
}

.kinder-navbar .nav-link {
    color: var(--text-dark);
    font-weight: 500;
    margin: 0 10px;
    transition: all 0.3s;
    position: relative;
}

.kinder-navbar .nav-link:hover {
    color: var(--primary-green);
}

.kinder-navbar .nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    right: 0;
    width: 0;
    height: 2px;
    background: var(--primary-green);
    transition: width 0.3s;
}

.kinder-navbar .nav-link:hover::after {
    width: 100%;
}

.kinder-btn {
    background: var(--primary-green);
    color: var(--white);
    border: none;
    padding: 10px 25px;
    border-radius: 25px;
    font-weight: 600;
    transition: all 0.3s;

}

.kinder-btn:hover {
    background: var(--dark-green);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(139, 195, 74, 0.4);
    animation: jello 1s ease-in-out infinite;

}

.kinder-btn-outline {
    background: transparent;
    border: 2px solid #8bc34a;
    color: #8bc34a;
}


.kinder-btn-outline:hover {
    background: #f1fffb;
    color: var(--white);
}

.kinder-btn-orange {
    background: var(--primary-orange);
}

.kinder-btn-orange:hover {
    background: #F57C00;
    box-shadow: 0 5px 15px rgba(255, 152, 0, 0.4);
}

.btn-custom-green {
    background: var(--primary-green);
    color: #fff;
    border-radius: 50px;
    padding: 8px 25px;
    border: none;
    transition: 0.3s;
}

.btn-custom-green:hover {
    background: var(--dark-green);
    color: #fff;
}

.btn-custom-orange {
    background: var(--primary-orange);
    color: #fff;
    border-radius: 50px;
    padding: 12px 30px;
    border: none;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(255, 152, 0, 0.3);
    animation: shakeY 5s linear infinite;
}

/* --- Testimonials (Speech Bubbles) --- */
.testimonials-section {
    background: #f5f7fa;
    padding: 80px 0;
}

.testimonial-bubble {
    background: #ff9800;
    color: #fff;
    padding: 30px;
    position: relative;

    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    border-radius: 14px;
    /* border-radius: 75% 25% 43% 57% / 46% 29% 71% 54%; */


}



.testimonial-bubble:hover {


    animation: headShake 3s ease-in-out infinite;
    cursor: pointer;
    border: 1px dashed #FFEB3B;
    box-shadow: 0 10px 10px #FFF;


}

.text-success-index-totr {
    border: 1px solid #1ab394;
    padding: 10px;
    border-radius: 10px;
}

.text-success-index-totr:hover {
    transform: translateX(-6px);
}



.text-success-index {
    transition: var(--transition);
    cursor: pointer;
    animation: headShake 10s linear infinite;
}

.text-success-index:hover {
    transform: translateX(-6px);

}


.testimonial-bubble::after {
    content: '';
    position: absolute;
    bottom: -17px;
    left: 50px;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid var(--primary-orange);
}

.testimonial-bubble.green {
    background: var(--primary-green);
}

.testimonial-bubble.green::after {
    border-top-color: var(--primary-green);
}

.testimonial-bubble.dark-green {
    background: var(--dark-green);
}

.testimonial-bubble.dark-green::after {
    border-top-color: var(--dark-green);
}

/* Hero Section */
.kinder-hero {
    background: linear-gradient(135deg, #e9ffc6 0%, #ffd54f26 100%);
    padding: 80px 0;
    position: relative;
    overflow: hidden;

}

.kinder-hero::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    background: var(--primary-yellow);
    border-radius: 50%;
    opacity: 0.3;
}

.kinder-hero::after {
    content: '';
    position: absolute;
    bottom: 9px;
    left: -30px;
    width: 150px;
    height: 150px;
    background: var(--primary-orange);
    border-radius: 50%;
    opacity: 0.2;
}

.kinder-hero-title {
    font-size: 3rem;
    font-weight: 800;
    color: var(--dark-green);
    margin-bottom: 50px;
    text-align: start;
    animation: headShake 5s ease-in-out infinite;

}


.kinder-hero-text {
    font-size: 1.1rem;
    color: var(--text-light);
    line-height: 2;
    margin-bottom: 30px;
}

.kinder-hero-image {
    position: relative;
    z-index: 1;

}


.kinder-hero-image img {
    max-width: 100%;
    border-radius: 20px;
    /* box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); */
}

/* .kinder-hero-image img {

    right: 0;
    top: 25px;

    background-size: 465px 310px;
    width: 465px;
    height: 310px;
    content: '';
        } */

.toy-car {
    position: absolute;
    bottom: -30px;
    left: -30px;
    width: 120px;
    animation: moveCar 3s ease-in-out infinite;
}

@keyframes moveCar {

    0%,
    100% {
        transform: translateX(0) rotate(0deg);
    }

    50% {
        transform: translateX(20px) rotate(5deg);
    }
}

/* Section Titles */
.kinder-section-title {
    text-align: center;
    margin-bottom: 50px;

}

.section-title {
    margin-top: 10px;
}

.kinder-section-title h2 {
    font-size: 2.5rem;
    color: var(--dark-green);
    font-weight: 800;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}

.kinder-section-title h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    right: 50%;
    transform: translateX(50%);
    width: 80px;
    height: 4px;
    background: var(--primary-orange);
    border-radius: 2px;
}

.kinder-section-title p {
    color: var(--text-light);
    font-size: 1.1rem;
}

/* News Section */
/* --- News Section (Circular) --- */
.news-section {
    background: #d3e9ba;
    padding: 80px 0;
    position: relative;
}

.news-card {
    background: #fff;
    border-radius: 20px;
    padding: 25px;
    text-align: center;
    transition: 0.3s;
    height: 100%;
    box-shadow: 7px 3px 20px 1px #b2b5aeba;
}

.news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    border: 2px dashed #04954e;
}

/* .news-card.active {
            border-color: var(--primary-orange);
            background: #fff8e1;
            transform: scale(1.05);
             border: 2px dashed #f7b733 ;
            z-index: 10;
        } */

.news-img-wrapper {
    width: 180px;
    height: 180px;
    margin: 0 auto 15px;
    border-radius: 50%;
    overflow: hidden;
    border: 5px solid #d3e9ba;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    position: relative;
}

.news-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-date {
    background: #04954e;
    color: #fff;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    display: inline-block;
    margin-top: 10px;
}

/* Registration Section */
/* --- Registration Section --- */
.register-section {
    background: #d2e8b9;

    position: relative;
}

.register-box {
    background: #f1f8e9;
    border-radius: 30px;
    padding: 40px;
    border: 2px dashed var(--primary-green);
}

.form-control-custom {
    border-radius: 15px;
    border: 1px solid #ddd;
    padding: 12px 20px;
    background: #fff;
}

/* --- Teachers Section --- */
/* --- Teachers Section --- */
.teachers-section {
    background: #ffffff;
    padding-bottom: 50px;
    padding-top: 20px;

}

.teacher-card {
    background: linear-gradient(278deg, #d2e8b9, #1ab39438);
    border-radius: 20px;
    padding: 20px;
    text-align: center;
    /* box-shadow: inset 0px 2px 20px 6px #ffe0b2; */
    transition: 0.3s;
    border: 1px dashed #00896d;
}

.teacher-card:hover {
    transform: translateY(-10px);
}

.teacher-img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    margin-bottom: 15px;
    border: 4px solid #68ad82;
    border-radius: 75% 25% 43% 57% / 46% 29% 71% 54%;
}

/* Goals Section - Road Design */
.kinder-goals {
    padding: 80px 0;
    background: var(--light-green);
    position: relative;
    overflow: hidden;
}

.road-container {
    position: relative;
    padding: 50px 0;
}

.road-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 8px;
    background: var(--text-dark);
    border-radius: 4px;
    z-index: 1;
}

.road-line::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--white);
    border-top: 4px dashed var(--primary-yellow);
    transform: translateY(-50%);
}

.goal-item {
    position: relative;
    z-index: 2;
    margin: 40px 0;
}

.goal-card {
    background: var(--white);
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    max-width: 300px;
    position: relative;
}

.goal-card::before {
    content: '';
    position: absolute;
    top: 50%;
    width: 30px;
    height: 30px;
    background: var(--primary-green);
    border-radius: 50%;
    border: 4px solid var(--white);
    box-shadow: 0 0 0 3px var(--primary-green);
}

.goal-item:nth-child(odd) .goal-card::before {
    left: -45px;
    transform: translateY(-50%);
}

.goal-item:nth-child(even) .goal-card::before {
    right: -45px;
    transform: translateY(-50%);
}

.goal-number {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: var(--primary-orange);
    color: var(--white);
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    font-weight: 700;
    margin-bottom: 15px;
}

.goal-title {
    font-weight: 700;
    color: var(--dark-green);
    margin-bottom: 10px;
}

.goal-text {
    color: var(--text-light);
    font-size: 0.9rem;
    line-height: 1.8;
}

/* --- Achievements --- */
.achievements-section {
    background: #fff;
    padding-bottom: 80px;
    padding-top: 50px;
}

.ach-item {
    text-align: center;
    padding: 20px;
    border-radius: 20px;
    transition: 0.3s;
    cursor: pointer;
    border: 1px solid #c570ef;
}

.ach-item:hover,
.ach-item.active {
    background: #dcd9ff;
    transform: scale(1.05);
}

.ach-img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
    border: 3px solid #c570ef;

}

/* Testimonials */
.kinder-testimonials {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--cream) 0%, var(--light-green) 100%);
}

.testimonial-card {
    background: var(--white);
    border-radius: 20px;
    padding: 40px;
    margin: 20px;
    box-shadow: 1px 5px 30px 1px rgba(0, 0, 0, 0.1);
    position: relative;
    border: 2px dashed #ff477b
}


.testimonial-card::before {
    content: '"';
    position: absolute;
    top: 0px;
    right: 30px;
    font-size: 80px;
    color: #ff477b;
    opacity: 0.3;
}

.testimonial-text {
    color: var(--text-dark);
    line-height: 2;
    margin-bottom: 20px;
    font-size: 1.05rem;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 15px;
}

.testimonial-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #94bb73;
}

.testimonial-name {
    font-weight: 700;
    color: var(--dark-green);
}

.testimonial-role {
    color: var(--text-light);
    font-size: 0.9rem;
}

/* Gallery Section */
.kinder-gallery {
    padding: 80px 0;
    background: var(--white);
}

.gallery-filter {
    text-align: center;
    margin-bottom: 40px;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: row;
    overflow: auto;
}

.gallery-btn {
    background: var(--light-green);
    border: none;
    padding: 10px 10px;
    margin: 5px;
    border-radius: 25px;
    font-weight: 600;
    transition: all 0.3s;

}

.gallery-btn.active,
.gallery-btn:hover {
    background: var(--primary-green);
    color: var(--white);
}

.gallery-item {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 30px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.gallery-item img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    transition: all 0.3s;
}

.gallery-item:hover img {
    transform: scale(1.1);
}



/* Footer */
.kinder-footer {
    background: #d2ef8c;
    color: rgba(0, 0, 0, 0.829);
    padding: 20px;
    margin: 0px;
    opacity: 1;
}

.footer-section h4 {
    font-weight: 700;
    margin-bottom: 25px;
    color: #ff8a0a;

}

.footer-section {
    display: flex;
    align-items: start;
    flex-direction: column;
    align-items: center;
}

.footer-links {
    list-style: none;
    padding: 0;
    text-align: start;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: rgba(0, 0, 0, 0.829);
    text-decoration: none;
    transition: all 0.3s;
}

.footer-links a:hover {
    color: var(--primary-yellow);
    padding-right: 5px;
}

.footer-social {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.footer-social a {
    width: 45px;
    height: 45px;
    background: #ff8a0a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    transition: all 0.3s;
}

.footer-social a:hover {
    background: var(--primary-orange);
    transform: translateY(-5px);
}

.footer-contact p {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 40px;
    padding-top: 20px;
    text-align: center;
}

/* Decorative Elements */
.cloud {
    position: absolute;
    background: #d0f0ea;
    border-radius: 100px;
    opacity: 0.8;
}

.cloud::before {
    content: '';
    position: absolute;
    background: #d0f0ea;
    border-radius: 100px;
}

.cloud-1 {
    width: 100px;
    height: 40px;
    top: 100px;
    right: 10%;
    animation: swing 3s ease-in-out infinite;
}

.cloud-1::before {
    width: 50px;
    height: 50px;
    top: -29px;
    left: 25px;
}


.cloud-2 {
    width: 80px;
    height: 35px;
    top: 150px;
    left: 15%;
    animation: swing 3s ease-in-out infinite;
}

.cloud-2::before {
    width: 40px;
    height: 40px;
    top: -19px;
    right: 20px;
}

.tree {
    position: absolute;
    bottom: 0;
    font-size: 60px;
    opacity: 0.6;
}

/* Responsive */
@media (max-width: 768px) {
    .kinder-hero-title {
        font-size: 2rem;
    }

    .kinder-section-title h2 {
        font-size: 1.8rem;
    }

    .road-line {
        display: none;
    }

    .goal-card::before {
        display: none;
    }
}

/* Custom Animations */
.fade-in-up {
    animation: fadeInUp 0.8s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Carousel Customization */
.kinder-carousel .carousel-indicators button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin: 0 5px;
    background: #8bc844;
    border: none;
}

.kinder-carousel .carousel-indicators button.active {
    background: var(--primary-green);
}

/* Loading Animation */
.loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s;
    padding-top: 50px;
}

.loader.hidden {
    opacity: 0;
    pointer-events: none;
}

.loader-circle {
    width: 60px;
    height: 60px;
    border: 5px solid var(--light-green);
    border-top-color: var(--primary-green);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Positioning for Desktop */
.gp-1 {
    top: 10%;
    left: 10%;
}

.gc-1 {
    top: 5%;
    left: 15%;
}

.gc-1::before {
    bottom: -7px;
    right: -7px;
}

.gp-2 {
    top: 25%;
    right: 15%;
}

.gc-2 {
    top: 20%;
    right: 20%;
    text-align: left;
}

.gc-2::before {
    bottom: -7px;
    left: -7px;
}

.gp-3 {
    top: 40%;
    left: 20%;
}

.gc-3 {
    top: 35%;
    left: 25%;
}

.gc-3::before {
    bottom: -7px;
    right: -7px;
}

.gp-4 {
    top: 55%;
    right: 20%;
}

.gc-4 {
    top: 50%;
    right: 25%;
    text-align: left;
}

.gc-4::before {
    bottom: -7px;
    left: -7px;
}

.gp-5 {
    top: 70%;
    left: 15%;
}

.gc-5 {
    top: 65%;
    left: 20%;
}

.gc-5::before {
    bottom: -7px;
    right: -7px;
}

.gp-6 {
    top: 85%;
    right: 10%;
}

.gc-6 {
    top: 80%;
    right: 15%;
    text-align: left;
}

.gc-6::before {
    bottom: -7px;
    left: -7px;
}


/* ===== BULLETIN BOARD - MODERN TIMELINE ===== */
.bulletin-section {

    background: linear-gradient(119deg, #ffffff, #ddeff5);
}

.bulletin-card {
    background: linear-gradient(135deg, rgb(255 255 255 / 90%), #7cd7f945);
    backdrop-filter: blur(20px);
    border-radius: 28px;
    padding: 2.5rem;
    border: 1px solid rgba(26, 179, 148, 0.15);
    position: relative;
    overflow: visible;
}

.bulletin-card::before {
    content: '';
    position: absolute;
    top: -1px;
    right: -1px;
    left: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    animation: scanLine 3s linear infinite;
}

@keyframes scanLine {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: translateY(500%);
        opacity: 0;
    }
}

.bulletin-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid #c0daf9;
}

.bulletin-icon {
    width: 50px;
    height: 50px;
    background: #6bc3f9;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: 1.4rem;
}

.bulletin-title {
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--dark);
}

.bulletin-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.bulletin-item {
    padding: 1.2rem 0;
    border-bottom: 1px dashed #95d6d7;
    display: flex;
    gap: 1.2rem;
    transition: all 0.3s ease;
    position: relative;
}

.bulletin-item::before {
    content: '';
    position: absolute;
    right: -2.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border);
    border: 2px solid var(--white);
    transition: all 0.3s ease;
}

.bulletin-item:hover::before {
    background: var(--primary);
    box-shadow: 0 0 0 4px rgba(26, 179, 148, 0.2);
    transform: translateY(-50%) scale(1.3);
}

.bulletin-item:last-child {
    border-bottom: none;
}

.bulletin-item:hover {
    padding-right: 0.8rem;
    background: linear-gradient(90deg, rgba(26, 179, 148, 0.06), transparent);
    border-radius: 14px;
    transform: translateX(4px);
}

.bulletin-date {
    min-width: 85px;
    background: linear-gradient(135deg, rgba(26, 179, 148, 0.12), rgb(91 188 250));
    color: var(--primary-dark);
    padding: 6px 14px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 700;
    text-align: center;
    height: fit-content;
    border: 1px solid rgba(26, 179, 148, 0.2);
    position: relative;
    overflow: hidden;
}

.bulletin-date::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.4) 50%, transparent 60%);
    transform: translateX(-100%);
    transition: transform 0.5s ease;
}

.bulletin-item:hover .bulletin-date::after {
    transform: translateX(100%);
}

.bulletin-text {
    flex: 1;
    color: var(--gray);
    font-size: 0.95rem;
    line-height: 1.7;
}

.bulletin-text strong {
    color: var(--dark);
    font-weight: 600;
}

.bulletin-badge {
    background: var(--danger);
    color: rgb(255, 0, 0);
    padding: 2px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-right: 0.5rem;
}

.section-header {
    padding-bottom: 30px;
}

.section-badge {
    background: #9acf7b;
    border-radius: 50px;
    padding: 5px;
}

.partial-circle {
    width: 200px;
    height: 200px;
    background: conic-gradient(#fcd5b4 0deg 300deg,
            /* قسمت دایره */
            transparent 300deg 360deg
            /* فضای خالی (مُنُه) */
        );
    clip-path: circle(20% at 20% 50%);
    /* در صورت نیاز به دایره کامل */
    margin: 50px auto;
    box-shadow: 0 0 5px rgba(0, 0, 0, .3);
}


.navbar-brand {
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--primary) !important;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    transition: var(--transition-sm);
}

.navbar-brand:hover {
    transform: scale(1.03);
}

.navbar-brand i {
    font-size: 1.8rem;
    animation: float 4s ease-in-out infinite;
    color: #8bc34a;
}


/* ===== ANIMATIONS ===== */
@keyframes float {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-15px) rotate(2deg);
    }
}

@keyframes pulse-glow {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(26, 179, 148, 0.4);
    }

    50% {
        box-shadow: 0 0 0 12px rgba(26, 179, 148, 0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ticker {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

@keyframes gradientShift {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

@keyframes pulseRing {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

.animate-pulse-glow {
    animation: pulse-glow 2s infinite;
}

.animate-slideIn {
    animation: slideInRight 0.6s ease forwards;
}

.animate-fadeUp {
    animation: fadeInUp 0.7s ease forwards;
}

.delay-1 {
    animation-delay: 0.1s;
}

.delay-2 {
    animation-delay: 0.2s;
}

.delay-3 {
    animation-delay: 0.3s;
}

.delay-4 {
    animation-delay: 0.4s;
}



@media (max-width:576px) {
    .tab-hiiden {
        display: none;
    }
}






@media (max-width:769px) {
    .pasohesh {
        gap: 20px;
    }
}





@media (max-width:769px) {
    .footer-section {
        align-items: start;
    }
}

.text-muted-x {
    --ins-text-opacity: 1;
    color: var(--ins-secondary-color) !important;
    display: flex;
    overflow: hidden;
    height: 80px;
}


.style-border {
    border: 1px solid #3ebfa5;
    border-radius: 10px;

}

.dt-column-title_new {
    padding-left: 50px
}


.accordion-button-b {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    padding: var(--ins-accordion-btn-padding-y) var(--ins-accordion-btn-padding-x);
    font-size: .813rem;
    color: var(--ins-accordion-btn-color);
    text-align: right;
    background-color: var(--ins-accordion-btn-bg);
    border: 0;
    border-radius: 0;
    overflow-anchor: none;
    -webkit-transition: var(--ins-accordion-transition);
    transition: var(--ins-accordion-transition)
}

@media (prefers-reduced-motion:reduce) {
    .accordion-button-b {
        -webkit-transition: none;
        transition: none
    }
}

.accordion-button-b:not(.collapsed) {
    color: var(--ins-accordion-active-color);
    background-color: var(--ins-accordion-active-bg);
    -webkit-box-shadow: inset 0 calc(-1 * var(--ins-accordion-border-width)) 0 var(--ins-accordion-border-color);
    box-shadow: inset 0 calc(-1 * var(--ins-accordion-border-width)) 0 var(--ins-accordion-border-color)
}




.pading-card-2 {
    padding: 40px;

}



@media (max-width:900px) {

    .pading-card-2 {
        padding: 0px;
    }



}




.pading-card-20 {
    padding: 20px;

}



@media (max-width:900px) {

    .pading-card-20 {
        padding: 0px;
    }



}




.with100 {
    width: 80%;

}



@media (max-width:900px) {

    .with100 {
        width: 100%;
    }



}



.withflex {
    display: flex;
    flex-direction: row;

}



@media (max-width:1160px) {

    .withflex {
        display: flex;
        flex-direction: column;
        justify-content: end;
        width: 100%;

    }



}



.wittext {
    width: 100%;
    align-items: center;
    justify-content: end;
    display: flex;
}


@media (max-width:1160px) {

    .wittext {

        width: 40px;

    }

}

/* --- کانتینر اصلی فیلتر --- */
.uf-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
}

/* --- دکمه اصلی باز/بسته کردن --- */
.uf-main-btn {
    width: 100%;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--uf-primary), #818cf8);
    color: white;
    border: none;
    border-radius: var(--uf-radius);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-shadow: 0 10px 20px -5px rgba(79, 70, 229, 0.35);
    transition: var(--uf-transition);
    position: relative;
    z-index: 30;
}

.uf-main-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px -5px rgba(79, 70, 229, 0.45);
    background: linear-gradient(135deg, var(--uf-primary-hover), #6366f1);
}

.uf-main-btn svg {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.uf-main-btn.active svg {
    transform: rotate(180deg);
}

/* --- پنل باکس فیلترها --- */
.uf-panel {
    display: none;
    background: var(--uf-bg-white);
    border-radius: var(--uf-radius);
    padding: 25px;
    margin-top: 16px;
    box-shadow: var(--uf-shadow-lg);
    border: 1px solid rgba(0, 0, 0, 0.05);
    animation: uf-slideDown 0.35s ease-out;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
}

.uf-panel.uf-visible {
    display: block;
}

@keyframes uf-slideDown {
    from {
        opacity: 0;
        transform: translateY(-15px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* --- گرید بندی --- */
.uf-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
}

@media (min-width: 600px) {
    .uf-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 900px) {
    .uf-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* =========================================
           استایل‌های اختصاصی سلکت باکس (Custom Select)
           ========================================= */
:root {
    --uf-primary: #4f46e5;
    --uf-primary-hover: #4338ca;
    --uf-bg-white: #ffffff;
    --uf-bg-gray: #f9fafb;
    --uf-text-main: #1f2937;
    --uf-text-muted: #6b7280;
    --uf-border: #e5e7eb;
    --uf-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --uf-shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.15);
    --uf-radius: 12px;
    --uf-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.uf-select-box {
    position: relative;
    width: 100%;
    user-select: none;
}

/* سلکت اصلی اصلی که مخفی می‌شود */
.uf-select-native {
    display: none !important;
}

/* بدنه اصلی سلکت سفارشی */
.uf-select-custom {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* تریگر یا همان دکمه نمایش */
.uf-select-trigger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    font-size: 0.95rem;
    color: var(--uf-text-main);
    height: 52px;
    background: var(--uf-bg-gray);
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: var(--uf-radius);
    transition: var(--uf-transition);
}

.uf-select-trigger:hover {
    background: #fff;
    border-color: #d1d5db;
}

/* حالت فعال (وقتی منو باز است) */
.uf-select-custom.uf-open .uf-select-trigger {
    background: #fff;
    border-color: var(--uf-primary);
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12);
    color: var(--uf-primary);
}

/* متن داخل تریگر */
.uf-select-trigger span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 85%;
}

/* آیکون فلش متحرک */
.uf-arrow {
    width: 10px;
    height: 6px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.uf-arrow::before,
.uf-arrow::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 100%;
    background-color: var(--uf-text-muted);
    transition: var(--uf-transition);
}

.uf-arrow::before {
    transform: rotate(-45deg) translate(-2px, 2px);
}

.uf-arrow::after {
    transform: rotate(45deg) translate(2px, 2px);
}

.uf-select-custom.uf-open .uf-arrow::before {
    transform: rotate(45deg) translate(2px, -2px);
    background-color: var(--uf-primary);
}

.uf-select-custom.uf-open .uf-arrow::after {
    transform: rotate(-45deg) translate(-2px, -2px);
    background-color: var(--uf-primary);
}

/* لیست آپشن‌ها (Dropdown) */
.uf-options-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 2px solid var(--uf-border);
    border-top: none;
    border-radius: 0 0 var(--uf-radius) var(--uf-radius);
    max-height: 220px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: var(--uf-transition);
    z-index: 50;
    box-shadow: var(--uf-shadow-lg);
}

.uf-select-custom.uf-open .uf-options-list {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* آیتم‌های داخل لیست */
.uf-option-item {
    padding: 12px 18px;
    font-size: 0.9rem;
    color: var(--uf-text-main);
    cursor: pointer;
    border-bottom: 1px solid #f3f4f6;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.uf-option-item:last-child {
    border-bottom: none;
}

.uf-option-item:hover {
    background-color: #f9fafb;
    color: var(--uf-primary);
    padding-right: 24px;
    /* افکت حرکت متن به چپ */
    padding-left: 12px;
}

.uf-option-item.uf-selected {
    background-color: rgba(79, 70, 229, 0.08);
    color: var(--uf-primary);
    font-weight: 600;
}

/* اسکرول‌بار سفارشی و زیبا */
.uf-options-list::-webkit-scrollbar {
    width: 5px;
}

.uf-options-list::-webkit-scrollbar-track {
    background: transparent;
}

.uf-options-list::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 10px;
}

.uf-options-list::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* --- مدیا کوئری برای موبایل --- */
@media (max-width: 768px) {
    .uf-panel {
        position: relative;
        margin-top: 12px;
        box-shadow: none;
        border: 1px solid var(--uf-border);
        border-radius: 0 0 var(--uf-radius) var(--uf-radius);
        padding: 20px 15px;
    }

    .uf-main-btn {
        border-radius: var(--uf-radius) var(--uf-radius) 0 0;
    }
}



.w-m {
    width: 70%;
    margin-top: 70px;

}


@media (max-width:1160px) {

    .w-m {

        width: 100%;
        margin-top: 70px;
        padding: 20px;

    }

}




.w-btn {
    width: 60%;

}


@media (max-width:1160px) {

    .w-btn {

        width: 100%;


    }

}


.w-margin {
    margin-top: 70px;
    padding: 50px;
}


.btn-sabt-access {
    background: #f0f8ff;
    color: black;
    border: 1px solid #68a6b9;
}

.btn-sabt-access:hover {
    background-color: #5cc9b3;
    color: black;
    box-shadow: 0 4px 5px 1px rgba(104, 166, 185, 0.37);
}


/*  چسباندن به پایین ظرف والد */
.sticky-bottom-wrapper {
    position: sticky;
    /* یا position:fixed اگر می‌خواهید نسبت به پنجرهٔ مرورگر باشد */
    bottom: 0;
    /* قرارگیری در انتهای ظرف */
    left: 0;
    right: 0;
    z-index: 999;
    /* جلوتر از محتواهای دیگر */
    background: var(--instr);
    /* زمینهٔ سفید (اختیاری) */
    padding: 0 10px;
    /* در صورت نیاز فاصله داخلی */
}




.w-m-config {
    width: 80%;
    /* margin-top: 50px; */

}


@media (max-width:1160px) {

    .w-m-config {

        width: 100%;
        margin-top: 70px;
        padding: 20px;

    }

}



.custom-select-box-all {
    width: 100%;
    padding: 16px;
    background-color: var(--ins-secondary-bg);
    border: 1px solid #e7e9eb;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    height: 39.5px;
}

.custom-select-box-aa.active {
    border-color: #764ba2;
    background: #fff;
}

/* لیست گزینه‌ها داخل تمام صفحه */
.custom-options-list {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    background-color: var(--ins-secondary-bg);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    z-index: 100;
    margin-top: 5px;
    max-height: 200px;
    overflow-y: auto;
}

.file-box {
    border: 1px solid #e7e9eb !important;
}




.mar-gin {

    margin-top: 20px;

}


@media (max-width:1395px) {

    .mar-gin {


        margin-top: 40px;


    }

}

.font-lesson {
    color: #585858;
    font-size: 10px;
}

.filed-array {
    min-width: 170px;
    cursor: pointer;
}

.filed-array-box2 {
    min-width: 130px;
    cursor: pointer;
}

/* ردیف‌های فرد (1‑based) */
.table tbody tr:nth-child(odd) {
    background: var(--ins-add);
}

/* مثال: سبز کم‌رنگ */

/* اگر می‌خواهید ردیف‌های زوج رنگ دیگری داشته باشند می‌توانید اضافه کنید */
.table tbody tr:nth-child(even) {
    background: var(--ins-even);
}


[data-bs-theme=light] {
    --ins-even: #fff;
    --ins-add: #e8f7f48a
}

[data-bs-theme=dark] {
    --ins-even: #1f2a34;
    --ins-add: #193b40;

}



[data-bs-theme=dark] .bg-white {
    --ins-bg-opacity: 1;
    background-color: rgb(25 46 55) !important;
}




[data-bs-theme=dark] .btn-add {
    --ins-bg-opacity: 1;
    background-color: #1d4b4a !important;
    color: white;
}




[data-bs-theme=dark] .form-control {
    --ins-bg-opacity: 1;
    background-color: #1f2a34 !important;
    color: white;
}




.custom-select-search {
    background-color: #f8f9fa;
    padding: 8px 10px;
}

.custom-select-search .input-group {
    border-radius: 4px;
}

.custom-select-search .input-group-text {
    background-color: #f8f9fa;
    border: none;
    padding: 0.375rem 0.5rem;
    color: #6c757d;
}

.custom-select-search .form-control {
    border: none;
    box-shadow: none;
    min-height: auto;
    padding: 0.375rem 0.5rem;
    font-size: 0.9rem;
}

.custom-select-search .form-control:focus {
    border: none;
    box-shadow: none;
    background-color: #fff;
}

.no-options {
    padding: 15px;
    text-align: center;
    color: #6c757d;
    font-style: italic;
    font-size: 0.9rem;
}

.form-label {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.custom-select-container {
    position: relative;
    width: 100%;
}

.custom-select-header {
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 6px;
    padding: 12px 16px;
    cursor: pointer;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.custom-select-header:hover {
    border-color: #86b7fe;
}

.custom-select-header:focus-within {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.custom-select-header::after {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 1.5px solid #6c757d;
    border-bottom: 1.5px solid #6c757d;
    transform: rotate(45deg);
    margin-right: 8px;
    align-items: center;
}


.custom-select-options {
    position: absolute;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 8px;
    width: 100%;
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: none;
    margin-top: 5px;
    padding: 10px;
}

.custom-select-option {
    padding: 10px 12px;
    cursor: pointer;
    border-radius: 6px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
}

.custom-select-option:hover {
    background-color: #f8f9fa;
}

.custom-select-option input[type="checkbox"] {
    margin-left: 10px;
    cursor: pointer;
    width: 18px;
    height: 18px;
}

.placeholder-text {
    color: #6c757d;
}

.selected-count {
    background-color: #e9ecef;
    padding: 3px 10px;
    border-radius: 15px;
    font-size: 0.9em;
    margin-left: 10px;
    min-width: 80px;
    text-align: center;
}

.no-options {
    padding: 15px;
    text-align: center;
    color: #6c757d;
    font-style: italic;
}


.border-style {
    padding: .4532rem .77rem !important;
    vertical-align: middle;
    background-color: var(--ins-secondary-bg);
    border: var(--ins-border-width) solid var(--ins-border-color);
    border-radius: var(--ins-border-radius) !important;
    font-size: .813rem;
    min-height: auto;
}

.backtolist {
    animation: headShake 5s ease-in-out infinite;
    margin-right: 10px;
    height: 64px;
    border-radius: 5px;
    border: 1px dashed #ff477b;
}





@media (max-width:768px) {
    .sidebar-left {
        min-width: 100% !important;
    }
}

@media (max-width:768px) {
    .flex-tabale {
        height: auto !important;
        flex-direction: column;
    }
}





.new-style-three table thead {
    position: sticky;
    top: 0;
    z-index: 10;
    /* برای قرار گرفتن روی محتوای دیگر */
    background-color: #deefeb;
    /* رنگ پس‌زمینه هدر (همان table-dark) */
    height: 60px;
    text-align: center;

}

.v-class {
    display: flex;
    flex-direction: row;
    gap: 6px;
    justify-content: center;
    align-items: center;
}

/* 
.second-list-container tr td  {

    text-align: center;
} */


.info-chip {
    width: 100%;
    max-width: 280px;
    transition: all .2s ease-in-out;
    padding: 20px;
    background-color: white;
    border: 1px solid #afb6d3 !important;
}

.info-chip:hover {
    background-color: #e7f7f3;
    border-color: #7c3aed;
}

/* تنظیمات کلی جدول */
#add-rows-data {
    border-collapse: separate;
    /* border-spacing: 0 8px; فاصله عمودی بین ردیف‌ها */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    border-radius: 12px;
}

#add-rows-data thead th {
    background-color: #f8f9fa;
    color: #495057;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e9ecef;
    padding: 16px 12px;
    white-space: nowrap;
}

#add-rows-data tbody tr {
    background-color: #fff;
    transition: all 0.3s ease;
    border-radius: 8px;
    margin-bottom: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
}

#add-rows-data tbody tr:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    background-color: #fcfcfc;
}

#add-rows-data tbody td {
    padding: 10px 12px;
    vertical-align: middle;
    border-top: 1px solid #f1f3f5;
    border-bottom: 1px solid #f1f3f5;
    color: #6c757d;
}

/* استایل چک‌باکس‌ها */
.form-check-input.lesson-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #0d6efd;
    border-radius: 4px;
}

/* استایل ورودی‌ها */
#add-rows-data input[type="search"] {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.9rem;
    transition: all 0.2s;
    width: 100% !important;
    /* حذف عرض ثابت */
    max-width: 100%;
    box-sizing: border-box;
}

#add-rows-data input[type="search"]:focus {
    background-color: #fff;
    border-color: #0d6efd;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
    outline: none;
}

/* ریسپانسیو بهتر */
@media (max-width: 768px) {



    #add-rows-data td::before {
        content: attr(data-label);
        /* نیاز به افزودن data-label در HTML دارد یا با JS مدیریت شود */
        position: absolute;
        left: 15px;
        font-weight: bold;
        color: #adb5bd;
    }
}


.text-success-icon {
    --ins-text-opacity: 1;
    color: #a170ef;

}

/* 1. حذف رنگ‌بندی پیش‌فرض جدول (اگر از table-striped استفاده می‌کنی یا بوت‌استرپ اعمال کرده) */
.table-responsive .table tbody tr,
.table-responsive .table tbody tr:nth-child(odd) {
    background-color: #ffffff !important;
    /* اطمینان از سفید بودن ردیف‌های فرد */
}

/* 2. اعمال رنگ فقط به ردیف‌های زوج */
.table-responsive .table tbody tr:nth-child(even) {
    background-color: #eef2f7a3 !important;
    /* رنگ خاکستری روشن برای ردیف‌های زوج */
    /* اگر رنگ خاصی مد نظرت هست، کد رنگ بالا را عوض کن. مثلاً: #e3f2fd برای آبی خیلی کمرنگ */
}

/* اختیاری: هاور (وقتی موس روی سطر می‌رود) فقط برای ردیف‌های زوج */
.table-responsive .table tbody tr:nth-child(even):hover {
    background-color: #e9ecef !important;
}

/* استایل سرچ باکس مینی و زیبا */
.search-box-wrapper {
    margin-bottom: 10px;
    display: flex;
    justify-content: flex-end;
    /* قرارگیری در سمت راست */
}

.mini-search {
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-radius: 20px;
    /* گوشه‌های گرد برای ظاهر مدرن */
    width: 250px;
    font-size: 13px;
    outline: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.mini-search:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}

.mini-search::placeholder {
    color: #aaa;
    font-size: 12px;
}

/* استایل فرم */
.apd-form-wrapper {
    width: 100%;
    background: #fafafa;
    border: 1px dashed #cbd5e1;
    padding: 12px;
    border-radius: 8px;
    animation: apd-fade-in 0.3s ease;
    margin-top: 10px;
}

@keyframes apd-fade-in {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.apd-input-box {
    margin-bottom: 10px;
    text-align: right;
}

.apd-label {
    display: block;
    font-size: 11px;
    color: #64748b;
    margin-bottom: 4px;
    font-weight: bold;
}

.apd-select,
.apd-textarea {
    width: 100%;
    padding: 6px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    font-size: 12px;
    box-sizing: border-box;
    font-family: inherit;
}

.apd-select:focus,
.apd-textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.apd-textarea {
    resize: vertical;
    min-height: 50px;
}

.apd-btn-submit {
    width: 100%;
    background-color: #1ab394;
    color: white;
    padding: 8px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    border: none;
}

.apd-btn-submit:hover {
    background-color: #08d6ac;
}

/* --- استایل جدید: کارت وضعیت حرفه‌ای --- */
.apd-status-card {
    width: 100%;

    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.15);
    border: 1px solid #fecaca;
    animation: apd-slide-up 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes apd-slide-up {
    from {
        opacity: 0;
        transform: translateY(15px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* هدر کارت */
.status-header {
    background-color: #fee2e2;
    /* قرمز روشن */
    padding: 10px 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #fecaca;
}

.status-icon {
    font-size: 18px;
    line-height: 1;
}

.status-title-fixed {
    font-size: 13px;
    font-weight: 800;
    color: #991b1b;
    /* قرمز تیره */
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

/* بدنه کارت */
.status-body {
    padding: 12px 15px;
    background-color: #fff;
}

.detail-row {
    display: flex;
    align-items: baseline;
    margin-bottom: 8px;
    font-size: 12px;
    line-height: 1.5;
}

.detail-row:last-child {
    margin-bottom: 0;
}

.detail-label {
    color: #7f1d1d;
    /* قهوه‌ای مایل به قرمز */
    font-weight: 700;
    margin-left: 5px;
    font-size: 11px;
}

.detail-value {
    color: #333;
    font-weight: 500;
    word-break: break-word;
}

.desc-row .detail-value {
    color: #57534e;
    /* خاکستری تیره برای توضیحات */
    font-weight: 400;
    font-size: 11px;
    opacity: 0.9;
}

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


.back-tab:hover {

    background-color: #f2eeef;
}

.focused-row {
    outline: 2px solid #9161df;
    /* حاشیه آبی */
    background-color: #f0f8ff;
    /* پس‌زمینه روشن */
}


.top-bar-wrapper {
    position: sticky;
    /* حالا sticky فقط نسبت به content خودش عمل می‌کند */
    top: 0;
    /* فاصله از بالای تب */
    z-index: 1050;
    background-color: #f8f9fa;
    width: 100%;
    padding-bottom: 10px;
}

.top-bar {
    width: 100%;
    /* اندازه با content هماهنگ باشد */
    display: flex;
    justify-content: space-between;
    padding: 10px 15px;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* دکمه ثابت در بالای صفحه */
.stiky-btn {
    padding-top: 10px;
    position: fixed;
    z-index: 1000;
    width: 100%;
    border-radius: 0;
    margin-top: 10px;
    background-color: #f8f9fa;
    height: 72px;
}

/* دکمه داخل فرم */
.stiky-btn-send {
    width: 50%;
}

/* وقتی صفحه بین 1000px تا 1400px هست */
@media (max-width: 1400px) and (min-width: 1000px) {
    .stiky-btn {
        margin-top: 30px;
    }
}

/* وقتی صفحه کوچکتر از 1000px هست */
@media (max-width: 1000px) {
    .stiky-btn {
        margin-top: 20px;
    }
}



@media (max-width: 1000px) {
    .w-btn-send {
        width: 100% !important;
    }
}


/* تنظیمات کلی لایه رویی */
.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(51, 55, 47, 0.50);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    opacity: 0;
    transition: all 0.4s ease-in-out;
    pointer-events: none;
    /* تا وقتی مخفیه کلیک نشه */

}

/* نمایش لایه هنگام هاور */
.gallery-item:hover .gallery-overlay {
    opacity: 1;
    transform: translateY(0);
}

/* استایل عنوان */
.gallery-overlay h3 {
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: 10px;
    transform: translateY(20px);
    transition: transform 0.4s ease 0.1s;
    font-weight: bold;
}

/* استایل توضیحات */
.gallery-overlay p {
    color: #e0e0e0;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 15px;
    max-width: 90%;
    transform: translateY(20px);
    transition: transform 0.4s ease 0.2s;
}


/* انیمیشن نهایی هنگام هاور */
.gallery-item:hover .gallery-overlay h3,
.gallery-item:hover .gallery-overlay p {
    transform: translateY(0);
}

.gallery-item:hover .gallery-overlay i {
    transform: scale(1);
}


.select-all {
    background-color: #fff;
    border: 1px solid #68a6b9;
    margin-right: 10px;
    color: #000;
}


.filter-btn2 {
    background: transparent;
    border: none;
    color: #6c757d;
    padding: 0.45rem 0.9rem;
    border-radius: 8px;

    font-weight: 500;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
    min-width: 95px;
    cursor: pointer;
}

.filter-btn2:hover {
    background: #f8f9fc;
    color: #4361ee;
}

.filter-btn2.active {
    background: rgb(231, 250, 245);
    color: #68a6b9;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(67, 97, 238, 0.15);
}


/* رنگ ردیف انتخاب‌شده */
tr.row-selected {
    background-color: #e7f1ff;
    /* آبی ملایم – دلخواه تغییر بده */
}

/* نشانگر کلیک‌پذیری */
#add-rows-data tbody tr {
    cursor: pointer;
}







/* css-new-akhbar */


.content-akbar {
    border: 1px dashed #4361ee;
    padding: 20px;
    border-radius: 10px;
}


.nav-pills1.flex-column {
    gap: 0.5rem;
    background: #f8fafd;
    padding: 0.25rem 0;
}

/* هر آیتم تب */
.nav-pills1 .nav-link {
    font-weight: 550;
    font-size: 1rem;
    padding: 0.85rem 1.35rem;
    border-radius: 8px;
    background: transparent;
    color: #2c3e50;
    transition: all 0.25s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    margin: 0;
    position: relative;
    letter-spacing: -0.2px;
    backdrop-filter: blur(0px);
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-pills1 .nav-link::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 1.1rem;
    width: 1.6rem;
    display: inline-block;
    text-align: center;
    color: #5b6e8c;
    transition: all 0.2s;
}





.nav-pills1 .nav-link:hover {
    background: #f1f5fe;
    color: #1f2b47;
    border-color: rgba(79, 110, 240, 0.12);
    transform: translateX(4px);
}


.nav-pills1 .nav-link.active,
.nav-pills1 .nav-link.active.show {
    background: linear-gradient(105deg, #ffffff 0%, #f8fbff 100%);
    color: #1f3a8a;
    font-weight: 600;
    border: 1px solid rgba(79, 110, 240, 0.25);
    box-shadow: 0 6px 14px -8px rgba(55, 95, 225, 0.25);
    border-right: 4px solid #4361ee;
}


.nav-pills1 .nav-link.active::before {
    color: #4361ee;
    transform: scale(1.05);
}

/* فوکوس و کلیک */
.nav-pills1 .nav-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.3);
    border-radius: 1.2rem;
}



@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}




#snow-editor:focus {
    border-color: #b9cefc;
    outline: none;
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(79, 110, 240, 0.1);
}


@media (max-width: 767px) {
    .nav-pills1 .nav-link {
        padding: 0.7rem 1rem;
        font-size: 0.9rem;
    }

    .nav-pills1 .nav-link::before {
        font-size: 1rem;
        width: 1.4rem;
    }

    .col-sm-3,
    .col-sm-9 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .col-sm-3 {
        margin-bottom: 1.5rem;
    }

    .nav-pills1.flex-column {
        flex-direction: row !important;
        flex-wrap: wrap;
        gap: 0.6rem;
        justify-content: center;
    }

    .nav-pills1 .nav-link {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .nav-pills1 .nav-link.active {
        border-right: none;
        border-bottom: 3px solid #4361ee;
        border-radius: 1rem;
    }
}


/* بهبود spacing */
.row>.col-sm-9 {
    padding-right: 1.2rem;
}

@media (max-width: 767px) {
    .row>.col-sm-9 {
        padding-right: 0.75rem;
        padding-left: 0.75rem;
    }
}

.back-nav {
    background: #1c84c617;
    padding: 20px;
    border-radius: 8px;
}


@media (max-width: 1100px) {



    .class-mobile {
        flex-direction: column-reverse;
    }

}


.btnsabt-list-stu {
    justify-content: center;
    display: flex;
    align-items: center;
    height: 91px;


}


.cover-photo {
    border: 1px solid #2ab898;
    border-radius: 10px;
    padding: 10px;
}













/* داشبوررررررررد */
:root {
    --primary: #9e00b9;
    --primary-dark: #9e00b9;
    --primary-light: #bf8afc77;
    --secondary: #64748b;
    --success: #22c55e;
    --danger: #ef4444;
    --warning: #f59e0b;
    --purple: #8b5cf6;
    --pink: #ec4899;
    --cyan: #7706d4;
    --bg-light: #f4f0ff;
    --card-bg: #ffffff;
    --text-dark: #1e293b;
    --text-muted: #64748b;
    --text-light: #ab94b8;
    --border: #e2e8f0;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12);
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --sidebar-width: 280px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body {

    background-image: repeating-linear-gradient(transparent, transparent 39px, #00000012 39px, #e8d5d578 40px)
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: linear-gradient(135deg, #eddbff30 0%, #ffffff29 100%);

}

/* Course Column */
.course-info-card {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 12px;
    border: 1px solid #bfdbfe;
}

.course-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.course-header-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: var(--shadow-sm);
}

.course-header-text {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dark);
}

.course-lesson {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 10px;
    border-radius: 8px;
    margin-bottom: 3px;
    background: rgba(255, 255, 255, 0.6);
}

.course-lesson:hover {
    background: rgba(255, 255, 255, 0.9);
}

.course-lesson-name {
    font-size: 12px;
    color: var(--text-dark);
    font-weight: 500;
}

.course-lesson-check {
    color: var(--success);
    font-size: 13px;
}

.course-bottom-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin-top: 12px;
    box-shadow: var(--shadow-sm);
}

.course-bottom-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.course-bottom-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #d1fae5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #16a34a;
    font-size: 12px;
}

.course-bottom-text {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

/* ===== COURSES ROW ===== */
.courses-section {
    padding: 0 28px;
    margin-bottom: 24px;
}

.courses-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.courses-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-dark);
}

.courses-link {
    font-size: 12px;
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}

.courses-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}

.course-card {
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: var(--transition);
    min-height: 140px;
    padding: 20px;
    border-radius: 20px;
}

.course-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.course-card-inner {
    padding: 18px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

.course-card-1 {
    background: linear-gradient(135deg, #fefce8, #fef3c7);
}

.course-card-2 {
    background: linear-gradient(135deg, #1e293b, #334155);
    color: white;
}

.course-card-3 {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
}

.course-card-4 {
    background: linear-gradient(135deg, #4c1d95, #7c3aed);
    color: white;
}

.course-card-5 {
    background: linear-gradient(135deg, #fef9c3, #fde047);
}

.course-card-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
}

.card-1-badge {
    background: rgba(255, 255, 255, 0.8);
    color: #b45309;
}

.card-2-badge {
    background: rgba(255, 255, 255, 0.15);
    color: #e2e8f0;
}

.card-3-badge {
    background: rgba(255, 255, 255, 0.8);
    color: #92400e;
}

.card-4-badge {
    background: rgba(255, 255, 255, 0.15);
    color: #ddd6fe;
}

.card-5-badge {
    background: rgba(255, 255, 255, 0.8);
    color: #a16207;
}

.course-card-title {
    font-size: 14px;
    font-weight: 700;
    margin-top: 10px;
    line-height: 1.5;
}

.course-card-subtitle {
    font-size: 11px;
    opacity: 0.7;
    margin-top: 4px;
}

.course-card-emoji {
    position: absolute;
    bottom: 12px;
    left: 12px;
    font-size: 32px;
    opacity: 0.8;
}

.three-col-section {
    display: grid;
    grid-template-columns: 1fr 1.3fr 1fr;
    gap: 16px;
    padding: 0 28px;
    margin-bottom: 24px;
}

.sp-card {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    padding: 20px;
    transition: var(--transition);

    overflow-y: auto;
    overflow-x: hidden;

}


.sp-card:hover {
    box-shadow: var(--shadow-md);
}

.sp-card-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sp-card-title i {
    color: var(--primary);
}

.welcome-banner {
    margin-bottom: 20px;
    background: linear-gradient(135deg, #eee7fb, #ffffff);
    border-radius: var(--radius-lg);
    padding: 22px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 2px solid #000000;
    position: relative;
    overflow: hidden;
}

.bottom-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 10px;
}

@media (max-width: 780px) {
    .bottom-section {

        display: flex;
        flex-direction: column;
    }
}

.bottom-card {
    background: var(--card-bg);
    border-radius: var(--radius-lg);

    padding: 20px;
    transition: var(--transition);
    box-shadow: 2px 2px 3px 0px #043a3861
}

.bottom-card:hover {
    box-shadow: var(--shadow-md);
}

.bottom-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.bottom-card-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-dark);
}

.see-all-link {
    font-size: 12px;
    color: black;
    text-decoration: none;
    font-weight: 600;
}

.news-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #cdcdcd;
    transition: var(--transition);
}

.news-item:last-child {
    border-bottom: none;
}

.news-item:hover {
    padding-right: 6px;
}

.news-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.news-icon.blue {
    background: #dbeafe;
    color: #2563eb;
}

.news-icon.green {
    background: #d1fae5;
    color: #16a34a;
}

.news-icon.orange {
    background: #fef3c7;
    color: #d97706;
}

.news-icon.pink {
    background: #fce7f3;
    color: #db2777;
}

.news-content {
    flex: 1;
}

.news-title {
    font-size: 12px;
    color: var(--text-dark);
    font-weight: 500;
    line-height: 1.8;
}

.news-date {
    font-size: 11px;
    color: #000000c0;
    direction: ltr;
    display: inline-block;
    margin-top: 4px;
    background-color: #ffffff;
}

.news-link {
    font-size: 11px;
    color: #000000;
    text-decoration: none;
    font-weight: 600;
}

/* Contact Card */
.contact-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.contact-avatar {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, #c7d2fe, #a5b4fc);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
}

.contact-details h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.contact-label {
    font-size: 11px;
    color: var(--text-light);
    margin-bottom: 2px;
}

.contact-phone {
    font-size: 13px;
    color: var(--text-dark);
    direction: ltr;
    display: inline-block;
    font-weight: 600;
    margin-bottom: 10px;
}

.contact-actions {
    display: flex;
    gap: 8px;
}

.contact-action-btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    border: none;
    transition: var(--transition);
}

.contact-action-btn:hover {
    transform: translateY(-2px);
}

.contact-action-btn.call {
    background: #ffffff;
    color: #16a34a;
    border: 1px dashed #000;
}

.contact-action-btn.msg {
    background: #ffffff;
    color: #2563eb;
    border: 1px dashed #000;
}

.contact-action-btn.whatsapp {
    background: #ffffff;
    color: #22c55e;
    border: 1px dashed #000;
}

.contact-action-btn.telegram {
    background: #ffffff;
    color: #0284c7;
    border: 1px dashed #000;
}


.sp-class-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sp-class-item {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, #ffffff 0%, #fafcff 100%);
    padding: 12px 16px;
    border-radius: 20px;
    transition: all 0.25s ease;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.sp-class-item:hover {
    transform: translateX(-4px);
    border-color: var(--primary-light);
    box-shadow: 0 12px 20px -12px rgba(37, 99, 235, 0.2);
    background: white;
}

.sp-class-time {
    background: var(--primary-light);
    color: black;
    font-weight: 800;
    font-size: 0.85rem;
    padding: 6px 14px;
    border-radius: 40px;
    min-width: 80px;
    text-align: center;
    letter-spacing: 0.3px;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.sp-class-name {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.sp-class-teacher {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.sp-class-teacher::before {
    content: "👨‍🏫";
    font-size: 0.7rem;
    opacity: 0.7;
}

@media (max-width: 780px) {
    .sp-class-item {
        flex-wrap: wrap;

        gap: 8px;
    }

    .sp-class-time {
        min-width: 70px;
        font-size: 0.75rem;
        padding: 4px 10px;
    }

    .sp-class-name {
        font-size: 0.9rem;
    }
}

.sp-header {
    position: fixed;
    top: 0;
    right: var(--sidebar-width);
    /* 270px */
    left: 0;
    height: 70px;
    background: white;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    z-index: 500;
    box-shadow: var(--shadow-sm);
}

.sp-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    /* جلوگیری از رفتن به خط بعد */
}

.sp-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}


@media (max-width: 992px) {
    .sp-header {
        right: 0;
        left: 0;
        padding-right: 60px;
    }
}

.sp-header-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: #f4f1f9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
    position: relative;
}

.sp-header-icon:hover {
    background: var(--primary-light);
    color: var(--primary);
}

.sp-header-icon .sp-badge-dot {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 10px;
    height: 10px;
    background: var(--danger);
    border-radius: 50%;
    border: 2px solid white;
}

.sp-header-divider {
    width: 1px;
    height: 32px;
    background: var(--border);
    margin: 0 12px;
}



.sp-header-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 2px 12px rgba(245, 158, 11, 0.2);
}

.sp-header-user-info {
    text-align: right;
}

.sp-header-user-info h4 {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-dark);
}

.sp-header-user-info p {
    font-size: 12px;
    color: var(--text-muted);
}

.sp-main-wrapper {
    margin-right: var(--sidebar-width);
    margin-top: 70px;
    padding: 30px 28px;
    padding-right: 100px;
    padding-left: 100px;
    gap: 15px;
    display: flex;
    flex-direction: column;

}

@media (max-width: 1300px) {
    .sp-main-wrapper {
        margin-right: var(--sidebar-width);
        margin-top: 70px;
        padding: 50px 50px;


    }
}


@media (max-width: 700px) {
    .sp-main-wrapper {
        margin-right: var(--sidebar-width);
        margin-top: 70px;
        padding: 5px 5px;


    }
}

.sp-page {
    display: none;
    animation: fadeIn 0.35s ease;
    flex-direction: column;
    gap: 15px;

}

.sp-page.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* کارت‌ها و المان‌های اصلی */
.sp-row {
    display: grid;
    gap: 15px;
    margin-bottom: 10px;
}

@media (max-width: 1200px) {
    .sp-row {
        display: flex;
        flex-direction: column;
    }
}

.sp-row.r4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1500px) {
    .sp-row.r4 {
        grid-template-columns: repeat(2, 1fr);
    }
}


.sp-row.r3 {
    grid-template-columns: repeat(3, 1fr);
}


@media (max-width: 1500px) {
    .sp-row.r3 {
        grid-template-columns: repeat(2, 1fr);
    }
}




.sp-row.r2 {
    grid-template-columns: repeat(2, 1fr);
}


.sp-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: 20px;

    transition: var(--transition);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;

    box-shadow: 3px 2px 6px 0px #e2e2e5
}

.sp-card2 {
    background: #ffffff40;
    border-radius: var(--radius-lg);
    padding: 20px;
    border: 1px solid var(--border);
    transition: var(--transition);
    box-shadow: 28px 28px 50px rgba(13, 39, 80, 0.16), -28px -28px 50px rgba(255, 255, 255, 1);
    display: flex;
    flex-direction: column;
    border: 2px solid #ffffff;

}

.sp-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.sp-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid #000000;
}

.sp-card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 8px;
}

.sp-tag {
    padding: 4px 12px;
    border-radius: 30px;
    font-size: 11px;
    font-weight: 600;
}

.sp-tag-success {
    background: #d1fae5;
    color: #16a34a;
}

.sp-tag-warning {
    background: #fef3c7;
    color: #d97706;
}

.sp-tag-danger {
    background: #ffff;
    color: #1ab394;
}

.sp-tag-info {
    background: #dbeafe;
    color: #2563eb;
}

.sp-table-wrap {
    overflow-x: auto;
}

.sp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.sp-table th {
    background: var(--primary-light);
    color: var(--primary);
    padding: 12px;
    font-weight: 700;
    text-align: center;
}

.sp-table td {
    padding: 12px;
    text-align: center;
    border-bottom: 1px solid var(--border);
}

.sp-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.sp-stat-box {
    text-align: center;
    padding: 18px;
    background: #f2e3c4;
    border-radius: var(--radius-md);
    /* border: 2px solid #000000; */
    box-shadow: inset -5px -6px #db8d8d;
}

.sp-stat-box .value {
    font-size: 30px;
    font-weight: 800;
}

.sp-exam-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    background: #F0FEEC;
    border-radius: var(--radius-sm);
    margin-bottom: 10px;

}

.sp-course-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}


.sp-course-top {
    padding: 20px;
    background: #7d5999;
    color: white;
}

.sp-finance-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 24px;
}

.sp-finance-card {
    background: white;
    border-radius: var(--radius-md);
    padding: 20px;
    border: 1px solid var(--border);
    text-align: center;
}

.sp-payment-list {
    background: white;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}

.sp-payment-item {
    display: flex;
    gap: 16px;
    padding: 14px 20px;
    border-bottom: 1px solid #f1f5f9;
    align-items: center;
}

.sp-settings-section {
    background: white;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    margin-bottom: 20px;
    padding: 22px;
}

.sp-settings-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f1f5f9;
}

.sp-toggle {
    width: 48px;
    height: 26px;
    background: #e2e8f0;
    border-radius: 13px;
    position: relative;
    cursor: pointer;
    transition: all 0.2s;
}

.sp-toggle.on {
    background: var(--success);
}

.sp-toggle::after {
    content: '';
    width: 22px;
    height: 22px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    right: 2px;
    transition: 0.2s;
}

.sp-toggle.on::after {
    right: 24px;
}

.sp-filter {
    padding: 6px 18px;
    border-radius: 30px;
    border: 1px solid var(--border);
    background: white;
    font-size: 12px;
    cursor: pointer;
    transition: 0.2s;
    font-family: 'Vazirmatn';
}

.sp-filter.active,
.sp-filter:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.sp-chart-box {
    height: 220px;
    width: 100%;
}

.sp-hw-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #fff3c5;
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
    border-right: 4px solid var(--warning);

}

@media (max-width: 1200px) {
    .sp-row.r4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .sp-course-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sp-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .sp-header {
        left: 0;
        padding-right: 100px;
    }

    .sp-main-wrapper {
        margin-right: 0;
    }
}

@media (max-width: 768px) {

    .sp-row.r3,
    .sp-row.r2 {
        grid-template-columns: 1fr;
    }

    .sp-course-grid {
        grid-template-columns: 1fr;
    }
}

/* ========== استایل سایدبار مدرن + زیر مجموعه‌ها (منو کشویی) ========== */
.sp-sidebar {
    position: fixed;
    right: 0;
    top: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border-left: 1px solid var(--border);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    box-shadow: -6px 0 24px rgba(0, 0, 0, 0.05);
    transition: var(--transition);
    overflow-y: auto;
}

.sp-sidebar-header {
    padding: 3px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
}

.sp-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sp-brand-icon {
    width: 48px;
    height: 48px;
    border-radius: 18px;
    background: linear-gradient(135deg, #22c55e, #15803d);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 22px;
    box-shadow: 0 6px 14px rgba(34, 197, 94, 0.25);
}

.sp-brand-text h3 {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-dark);
    line-height: 1.3;
}

.sp-brand-text span {
    font-size: 11px;
    color: var(--text-light);
}

.sp-sidebar-close {
    display: none;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--text-muted);
}

.sp-sidebar-user {
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, #e5d8fb, #efe9fb);
    margin: 14px 16px;
    border-radius: var(--radius-md);
}

.sp-sidebar-user-avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.2);
}

.sp-sidebar-user-info h4 {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-dark);
}

.sp-sidebar-user-info p {
    font-size: 11px;
    color: var(--text-muted);
}

.sp-sidebar-user-badge {
    margin-right: auto;
    background: var(--success);
    color: white;
    padding: 3px 10px;
    border-radius: 50px;
    font-size: 10px;
    font-weight: 700;
}

.sp-sidebar-nav {
    list-style: none;
    padding: 8px 14px;
    margin: 0;
    flex: 1;
}

.sp-sidebar-nav .sp-nav-section-title {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-light);
    padding: 16px 10px 6px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.sp-sidebar-nav li {
    margin-bottom: 4px;
    list-style: none;
}

/* آیتم اصلی منو */
.sp-sidebar-nav .sp-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    transition: var(--transition);
    cursor: pointer;
    width: 100%;
    background: none;
    border: none;
    font-family: inherit;
    text-align: right;
}

.sp-sidebar-nav .sp-nav-item:hover {
    background: #f0f4ff;
    color: var(--primary);
    transform: translateX(-3px);
}

.sp-sidebar-nav .sp-nav-item.active {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.sp-sidebar-nav .sp-nav-item i {
    width: 22px;
    text-align: center;
    font-size: 16px;
}

.sp-nav-badge {
    margin-right: auto;
    background: var(--danger);
    color: white;
    padding: 2px 9px;
    border-radius: 40px;
    font-size: 10px;
    font-weight: 800;
}

.sp-chevron {
    margin-right: auto;
    transition: transform 0.3s;
    font-size: 12px;
}

.sp-nav-submenu {
    list-style: none;
    padding-right: 32px;
    margin: 0;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease;
}

.sp-nav-submenu.show {
    max-height: 300px;
}

.sp-nav-submenu li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--text-muted);
    font-size: 12px;
    transition: var(--transition);
}

.sp-nav-submenu li a:hover {
    background: #f0f4ff;
    color: var(--primary);
    padding-right: 18px;
}

.sp-nav-submenu li a i {
    width: 18px;
    font-size: 12px;
}

.sp-nav-divider {
    height: 1px;
    background: var(--border);
    margin: 12px 10px;
}

.sp-sidebar-promo {
    margin: 16px 16px 12px;
    background: linear-gradient(135deg, #1e3a8a, #3b82f6);
    border-radius: var(--radius-lg);
    padding: 20px 14px;
    text-align: center;
    color: white;
    position: relative;
    overflow: hidden;
}

.sp-sidebar-promo-icon {
    font-size: 32px;
    margin-bottom: 8px;
}

.sp-sidebar-promo h4 {
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 6px;
}

.sp-sidebar-promo p {
    font-size: 11px;
    opacity: 0.9;
    margin-bottom: 12px;
    line-height: 1.7;
}

.sp-sidebar-promo-btn {
    background: white;
    color: var(--primary);
    border: none;
    padding: 8px 22px;
    border-radius: 40px;
    font-family: 'Vazirmatn';
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s;
}

.sp-sidebar-footer {
    padding: 14px 18px;
    border-top: 1px solid var(--border);
    text-align: center;
    font-size: 10px;
    color: var(--text-light);
}

.sp-hamburger {
    display: none;
    position: fixed;
    top: 14px;
    right: 18px;
    z-index: 1100;
    background: white;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-dark);
    width: 42px;
    height: 42px;
    border-radius: 30px;
    box-shadow: var(--shadow-sm);
    background: white;
    align-items: center;
    justify-content: center;
}

.sp-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 990;
    backdrop-filter: blur(3px);
}

.sp-overlay.show {
    display: block;
}

@media (max-width: 992px) {
    .sp-sidebar {
        transform: translateX(100%);
        box-shadow: none;
    }

    .sp-sidebar.open {
        transform: translateX(0);
        box-shadow: -6px 0 28px rgba(0, 0, 0, 0.2);
    }

    .sp-sidebar-close {
        display: block;
    }

    .sp-hamburger {
        display: flex;
    }

    .sp-main-wrapper {
        margin-right: 0;
    }

    .sp-header {
        left: 0;
    }
}

.sp-sidebar::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 8px;
}

.sp-nav-item.has-submenu.active .sp-chevron {
    transform: rotate(180deg);
}


.card1 {

    background: #a389ee;

}

.card2 {
    background: #ffc942;
}

.card3 {
    background: #8abeb2;
}

.card4 {
    background: #f7a374;
}

.card5 {
    background: #feb2f0;
}

.card6 {
    background: #87ceea;
}

.card8 {
    background: #d6eae9;
}

.card9 {
    background: #d6eae9;
}

/* استایل سفارشی برای دکمه */
.custom-button {
    background-color: #ff006a;
    /* رنگ آبی اصلی */
    color: white;
    /* رنگ متن */
    font-size: 16px;
    /* اندازه متن بزرگ‌تر */
    padding: 12px 20px;
    /* فاصله داخلی بیشتر */
    border: none;
    /* حذف حاشیه پیش‌فرض */
    border-radius: 25px;
    /* حاشیه گردتر */
    transition: all 0.3s ease;
    /* انیمیشن نرم برای تغییرات */
}

.attention-btn {
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background-color 0.3s ease;
}

.attention-btn:hover {
    transform: scale(1.01);
    background-color: #7c3aed;
    color: #000 !important;
    box-shadow: inset -1px 7px 20px 0px rgb(255 255 255 / 33%), inset -1px 0px 20px 20px #ffeaf4
}


.stats-badge {
    background: #324877;
    backdrop-filter: blur(8px);
    padding: 8px 20px;
    border-radius: 12px;
    color: #ffffff;
    font-weight: 500;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: -4px 6px 6px 0px rgba(0, 0, 0, 0.1);
    height: 55px;
}

.stats-badge i {
    font-size: 1.1rem;
}

/* گرید پیشرفته با پاسخگویی عالی */
.sp-course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
    gap: 18px;
    margin-top: 20px;
}

/* کارت درسی لوکس با افکت‌های مدرن */
.sp-course-card {
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(0px);
    border-radius: 19px;
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    box-shadow: 0 20px 30px -12px rgba(0, 0, 0, 0.1);
    border: 3px solid #ffff;
    position: relative;
    display: flex;
    flex-direction: column;
}

.sp-course-card:hover {
    transform: translateY(-10px) scale(1.01);
    box-shadow: 0 28px 38px -14px rgba(0, 0, 0, 0.25);


}

/* بخش بالایی کارت با گرادیان داینامیک و اطلاعات کامل */
.sp-course-top {
    padding: 1.5rem 1.5rem 1.2rem 1.5rem;
    color: white;
    position: relative;
    background-size: cover;
    transition: all 0.2s;
    border-bottom: 1px dashed #1a99cb;
}

/* هر استایل گرادیان به صورت inline می‌آید، اما برای حالت پیش‌فرض خواناتر */
.course-header-flex {
    display: flex;
    align-items: center;
    gap: 15px;

    flex-wrap: wrap;
}

.sp-course-top-icon {

    backdrop-filter: blur(4px);
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 28px;
    font-size: 2rem;
    font-weight: 500;
    box-shadow: 0 8px 14px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.course-title-wrapper {
    flex: 1;
}

.course-title-main {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.3px;
    line-height: 1.3;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    color: white;
}

.teacher-name {
    font-size: 0.85rem;
    opacity: 0.9;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-weight: 500;
    color: black;
}

.teacher-name i {
    font-size: 0.7rem;
}

/* بدنه کارت با اطلاعات دقیق دانش‌آموز (نمره، تکالیف، پیشرفت، کلاس) */
.sp-course-body {
    padding: 1.2rem 1.5rem 1.5rem 1.5rem;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* بخش آمار کلیدی */
.sp-course-stats {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    background: #f8fafd;

    border-radius: 24px;
    margin-bottom: 5px;
}

.score-area {
    display: flex;
    align-items: baseline;
    gap: 5px;
    font-weight: 700;
    font-size: 1.2rem;
}

.num {
    font-size: 1.9rem;
    font-weight: 800;
    margin-left: 4px;
    line-height: 1;
}

.homework-badge {
    background: #eef2ff;
    padding: 6px 14px;
    border-radius: 40px;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* اطلاعات کلاسی (Lesson Name & Class Name) */
.lesson-class-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    padding-top: 12px;
    margin-top: 4px;
}

.info-pill {
    background: #f1f5f9;
    border-radius: 40px;
    padding: 6px 16px;
    font-size: 0.8rem;
    font-weight: 500;
    color: #1e2f3f;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: 0.1s;
}

.info-pill i {
    font-size: 0.85rem;
    color: #f7b32b;
}

.class-name {
    background: linear-gradient(110deg, #e9eef4, #ffffff);
    border-right: 3px solid #f7b32b;
    font-weight: 600;
    width: 100%;
}

.lesson-name {
    background: #ffffff;
    border: 1px dashed #dce3ec;
    letter-spacing: 0.3px;
    border-radius: 10px;
    padding: 5px;
}

.additional-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 5px;
}

.progress-bar-bg {
    background: #e2e8f0;
    border-radius: 20px;
    height: 8px;
    flex: 1;
    overflow: hidden;
}

.progress-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #2b9348, #55a630);
    border-radius: 20px;
}

.progress-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: #2c5f2d;
}

.grid-barname {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 15px;
}

/* ریسپانسیو */
@media (max-width: 700px) {

    .course-title-main {
        font-size: 1.3rem;
    }

    .sp-course-top-icon {
        width: 45px;
        height: 45px;
        font-size: 1.5rem;
    }

    .grid-barname {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin-bottom: 15px;
    }
}

@media (max-width: 480px) {
    .sp-course-grid {
        grid-template-columns: 1fr;
    }

    .lesson-class-wrapper {
        flex-direction: column;
        gap: 6px;
    }
}

/* افکت shimmer برای کارت‌ها */
.sp-course-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 2rem;
    pointer-events: none;
    background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.4), transparent 80%);
    opacity: 0;
    transition: opacity 0.2s;
}

.sp-course-card:hover::after {
    opacity: 0.5;
}




/* Cards Grid */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 60px;
}

@media (max-width: 800px) {
    .cards-grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
        margin-bottom: 60px;
    }
}


@media (max-width: 1500px) {
    .cards-grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
        margin-bottom: 60px;
    }
}



.card-ds {
    border-radius: 20px;
    padding: 25px;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s;
}

.card-ds:hover {
    transform: translateY(-5px);
}

.card-ds-red {
    background: linear-gradient(135deg, #f5a5a5 0%, #f08080 100%);
}

.card-ds-green {
    background: linear-gradient(135deg, #b8d99f 0%, #9bc97f 100%);
}

.card-ds-blue {
    background: linear-gradient(135deg, #a8c8e8 0%, #7eb3e0 100%);
}

.card-ds-purple {
    background: linear-gradient(135deg, #c8b8e8 0%, #b0a0d8 100%);
}

.card-ds-mint {
    background: linear-gradient(135deg, #b8e8d8 0%, #98d8c8 100%);
}

.card-ds-yellow {
    background: linear-gradient(135deg, #f5e8a8 0%, #f0d878 100%);
}

.card-icon {
    background: white;
    width: 60px;
    height: 60px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.card-icon img {
    width: 35px;
    height: 35px;
}

.card-title {
    font-size: 18px;
    font-weight: 600;
    color: #000;
    margin-bottom: 10px;
}

.card-description {
    font-size: 12px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 15px;
    flex-grow: 1;
}

.learn-more {
    color: #2563eb;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: color 0.3s;
}

.learn-more:hover {
    color: #1d4ed8;
}

.hero-banner-admin {
    background: #752f6b;
    border-radius: 20px;
    padding: 15px;
    position: relative;
    overflow: hidden;
}

/* Hero Banner */
.hero-banner {
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border-radius: 20px;
    padding: 15px;
    position: relative;
    overflow: hidden;
}

.hero-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}

.hero-icon-left {
    width: 120px;
    height: 120px;
    object-fit: contain;
}

.hero-text {
    text-align: center;
    color: white;
    flex: 1;
}

.hero-text h1 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 12px;
}

.hero-text p {
    font-size: 15px;
    opacity: 0.9;
    margin-bottom: 24px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.learn-more-btn {
    padding: 12px 32px;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    backdrop-filter: blur(10px);
}

.learn-more-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.hero-icon-right {
    width: 140px;
    height: 140px;
    object-fit: contain;
}



/* Progress Section */
.lang-progress-section {
    margin-bottom: 40px;
}



.lang-progress-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.lang-progress-card {
    border-radius: 16px;
    padding: 24px;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.lang-progress-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.lang-progress-card-purple {
    background: linear-gradient(135deg, #d4c5f9 0%, #b8a4e8 100%);
}

.lang-progress-card-orange {
    background: linear-gradient(135deg, #ffd4a3 0%, #ffb366 100%);
}

.lang-progress-card-pink {
    background: linear-gradient(135deg, #f5a3d0 0%, #e066b8 100%);
}

.lang-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.lang-card-icon {
    width: 48px;
    height: 48px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.lang-card-menu {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #666;
    padding: 4px;
}

.lang-card-title {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 16px;
    min-height: 40px;
}

.lang-progress-bar-container {
    margin-bottom: 8px;
}

.lang-progress-bar-bg {
    width: 100%;
    height: 6px;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
    overflow: hidden;
}

.lang-progress-bar-fill {
    height: 100%;
    background-color: #2d1b4e;
    border-radius: 3px;
    transition: width 0.5s ease;
}

.lang-progress-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.lang-progress-label {
    font-size: 14px;
    color: #4a4a4a;
    font-weight: 500;
}

.lang-progress-percentage {
    font-size: 14px;
    color: #2d1b4e;
    font-weight: 600;
}


/* ازمون ها */

.lang-exam-meta {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin: 6px 0 10px;
    opacity: .9;
}

.lang-exam-status {
    padding: 3px 8px;
    border-radius: 8px;
    font-size: 12px;
}

.status-live {
    background: #e8f7ff;
    color: #0a7bdc;
}

.status-done {
    background: #e9f9ef;
    color: #1a9c4b;
}

.status-wait {
    background: #fff4e5;
    color: #d97706;
}

.banner-card {
    border-radius: 16px;
    padding: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
    height: 58px;
    border: 1px dashed #9e00b9;
    background: #f0f9f8;
    border-left: 8px solid #9e00b9;
}


.banner-card.blue-light {
    background: linear-gradient(135deg, #e1daf4 0%, #fff 100%)
}

.banner-card.blue-light::before {
    background: #9e00b9;
}


.banner-content {
    flex: 1;
}

.assignment-card {
    position: relative;
}

.assignment-table-image {
    position: relative;
    top: 20%;
}

.assignment-table-image img {

    max-width: 20vw;
    opacity: 0.9;
}

/* مخفی در موبایل */
@media (max-width: 768px) {
    .assignment-table-image {
        display: none;
    }


    .hero-icon-left {
        display: none;
    }

    .hero-text h1 {
        font-size: 18px
    }

    .hero-text p {
        font-size: 12px;
    }

    .hero-icon-right {
        width: 100px;
        height: 100px;
    }
}

/* 

حصور غیاب
 */

.attendance-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.overview-card {
    background: white;
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
}

.overview-number {
    font-size: 36px;
    font-weight: 700;
    margin: 8px 0;
}

.present {
    border-left: 5px solid #22c55e;
}

.late {
    border-left: 5px solid #f59e0b;
}

.absent {
    border-left: 5px solid #ef4444;
}

.warning {
    border-left: 5px solid #6366f1;
}


.mix {
    width: 100%;
    height: 67px;
    border-radius: 14px;
    background: #E8EAEC;
    box-shadow: 28px 28px 50px rgba(13, 39, 80, 0.16), -28px -28px 50px rgba(255, 255, 255, 1), inset -31px -31px 43px rgba(255, 255, 255, 0.64), inset 26px 26px 48px rgba(13, 39, 80, 0.16);
    justify-content: start;
    align-items: center;
    display: flex;
    margin-bottom: 25px;
    border: 3px solid #f5f5f5;
}

/* برنامه هفتگی */


.schedule-wrapper {
    overflow-x: auto;
    margin-bottom: 40px;
    -webkit-overflow-scrolling: touch;
}

.schedule-table {
    display: grid;
    grid-template-columns: 150px repeat(7, 1fr);
    gap: 10px;
    min-width: 900px;
}

.day-header {
    background: linear-gradient(135deg, #a87ba8 0%, #8b6b8b 100%);
    color: white;
    padding: 15px;
    border-radius: 15px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
    justify-content: center;
    align-items: center;
    display: flex;
}


.period-label {
    background: linear-gradient(135deg, #a87ba8 0%, #8b6b8b 100%);
    color: white;
    padding: 15px;
    border-radius: 15px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

.cell {
    background: white;
    padding: 20px;
    border-radius: 15px;
    min-height: 70px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
}

.cell:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}

/* Tablet */
@media (max-width: 1024px) {
    .header h1 {
        font-size: 28px;
        padding: 12px 50px;
    }

    .header h1::before,
    .header h1::after {
        width: 60px;
        height: 50px;
    }

    .header h1::before {
        right: -55px;
    }

    .header h1::after {
        left: -55px;
    }

    .schedule-table {
        grid-template-columns: 120px repeat(7, 1fr);
        min-width: 800px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    body {
        padding: 5px;
    }

    .header {
        margin-bottom: 15px;
    }

    .header h1 {
        font-size: 20px;
        padding: 10px 30px;
    }

    .header h1::before,
    .header h1::after {
        display: none;
    }

    .schedule-wrapper {
        margin-bottom: 20px;
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .schedule-table {
        grid-template-columns: 80px repeat(7, minmax(70px, 1fr));
        gap: 5px;
        min-width: 650px;
        padding: 5px;
    }

    .day-header {
        font-size: 14px;
        padding: 8px 4px;
        border-radius: 10px;
    }

    .period-label {
        font-size: 14px;
        padding: 8px 4px;
        border-radius: 10px;
    }

    .cell {
        padding: 10px 5px;
        min-height: 50px;
        border-radius: 10px;
    }

    .footer {
        margin-top: 20px;
        padding: 15px 0 80px 0;
    }

    .footer-text {
        font-size: 16px;
        padding: 10px 20px;
    }

    .flowers {
        height: 70px;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .header h1 {
        font-size: 18px;
        padding: 8px 20px;
    }

    .schedule-table {
        grid-template-columns: 70px repeat(7, minmax(60px, 1fr));
        gap: 4px;
        min-width: 550px;
    }

    .day-header,
    .period-label {
        font-size: 12px;
        padding: 6px 2px;
    }

    .cell {
        padding: 8px 3px;
        min-height: 45px;
    }

    .footer-text {
        font-size: 14px;
        padding: 8px 15px;
    }
}

/* Scrollbar styling */
.schedule-wrapper::-webkit-scrollbar {
    height: 8px;
}

.schedule-wrapper::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
}

.schedule-wrapper::-webkit-scrollbar-thumb {
    background: rgba(168, 123, 168, 0.5);
    border-radius: 10px;
}

.schedule-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(168, 123, 168, 0.7);
}


/* .glass-banner{
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);

    background: rgba(255, 255, 255, 0.35);

    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.55);

    box-shadow:
        inset 0 0 25px rgba(255,255,255,0.35),
        0 8px 25px rgba(0,0,0,0.10);

    padding: 10px 20px;
    display: flex;
    align-items: center;
}
*/

.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 30px;
}

.summary-card {
    background: white;
    border-radius: 20px;
    padding: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 3px solid white;
}

.summary-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
}

.card-content {
    border-radius: 16px;
    padding: 28px 24px;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.card-blue .card-content {
    background: linear-gradient(135deg, #d4e7f7 0%, #b8d9f0 100%);
}

.card-peach .card-content {
    background: linear-gradient(135deg, #fde4d8 0%, #fcd4c1 100%);
}

.card-purple .card-content {
    background: linear-gradient(135deg, #e8d9f0 0%, #d9c5e8 100%);
}

.card-mint .card-content {
    background: linear-gradient(135deg, #d4f0e8 0%, #bfe8dc 100%);
}

.summary-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
}

.summary-icon svg {
    color: #2d3748;
}

.card-title {
    font-size: 24px;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 8px;
}

.card-description {
    font-size: 14px;
    color: #4a5568;
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1;
}

.card-number {
    font-size: 48px;
    font-weight: 800;
    color: #1a202c;
    margin-top: auto;
}




@media (max-width: 768px) {
    .summary-grid {
        grid-template-columns: 1fr;
    }
}


/* افتخارات */

#page-activities {
    max-width: 900px;
    margin: 10px auto;
    padding: 20px 25px;
    background: rgba(255 255 255 / 0.25);
    border-radius: 20px;
    backdrop-filter: blur(15px);
    box-shadow: 0 10px 30px rgb(0 0 0 / 0.1);
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: #1a1a1a;
}

#page-activities h2 {
    font-size: 1.8rem;
    margin-bottom: 25px;
    font-weight: 700;
    text-align: center;
    color: #222;
}

.sp-medals {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* موبایل */
@media (max-width: 768px) {
    .sp-medals {
        grid-template-columns: repeat(1, 1fr);
    }
}


.sp-medal {
    background: linear-gradient(145deg, #f0f5ff 0%, #dedede 40%, #4e7bc6 100%);
    border-radius: 20px;
    padding: 18px 22px;
    box-shadow:
        0 15px 25px rgba(69, 123, 204, 0.15),
        inset 0 0 10px rgb(255 255 255 / 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.sp-medal:hover {
    transform: translateY(-8px);
    box-shadow:
        0 25px 35px rgba(69, 123, 204, 0.3),
        inset 0 0 15px rgb(255 255 255 / 0.9);
}

.sp-medal-icon {
    font-size: 3rem;
    background: white;
    padding: 16px;
    border-radius: 50%;
    box-shadow: 0 6px 15px rgb(0 0 0 / 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 0 3px rgba(69, 123, 204, 0.5));
    transition: filter 0.3s ease;
}

.sp-medal:hover .sp-medal-icon {
    filter: drop-shadow(0 0 12px rgba(69, 123, 204, 0.7));
}

.sp-medal-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0d47a1;
    text-align: center;
}

.sp-medal-description {
    font-size: 0.95rem;
    color: #555;
    text-align: center;
    line-height: 1.3;
    min-height: 50px;
    padding: 0 5px;
}

.sp-medal-button {
    color: black;
    border: none;
    border-radius: 25px;
    padding: 6px 18px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    font-size: 0.8rem;
    box-shadow: 0 3px 8px rgb(13 71 161 / 0.5);
    cursor: pointer;
    transition: background-color 0.3s ease;
    user-select: none;
}

.sp-medal-button:hover {
    background-color: #7b70ef82;
}



.titr-ds {
    padding: 15px;
    /* border: 2px solid; */
    width: 15%;
    border-radius: 13px;
    font-size: 18px;
    margin-bottom: 10px;
    background-color: #e7dbfb;
    margin-top: 35px;
}



.btnsabtrecord {
    background: linear-gradient(135deg, rgb(106 51 232 / 92%), #ffcb00) !important;

}





/* تب‌ها ارتفاع ثابت + اسکرول داخلی */
.tab-scroll-area {
    height: calc(100vh - 400px);
    overflow-y: auto !important;

    border: 1px solid #09bb89;

    border-radius: 8px;

    padding: 3px;

    margin-top: 10px;


}

.tab-scroll-index {
    height: calc(100vh - 280px);
    overflow-y: auto !important;
}

.input-group-box .card {
    transition: all 0.2s ease;
}

.input-group-sm>.form-control,
.input-group-sm>.input-group-text,
.input-group-sm>.btn {
    border-radius: 10px !important;
}

.edu-card {
    width: 264px;
    padding: 6px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.edu-input-wrap {
    display: flex;
    align-items: center;
    background: #f8f9fb;
    border-radius: 10px;
    padding: 3px 6px;
    transition: all .2s ease;
    border: 1px dashed #799cb7;
}

.edu-input-wrap:focus-within {
    background: #fff;
    box-shadow: 0 0 0 2px rgba(25, 135, 84, 0.15);
}

.edu-icon {
    font-size: 15px;
    color: #6c757d;
    margin: 0 4px;
}

.edu-input {
    border: none;
    background: transparent;
    outline: none;
    flex: 1;
    font-size: 13px;
    padding: 4px;
}

.edu-actions {
    display: flex;
    gap: 4px;
}

.edu-btn {
    border: none;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    transition: all .15s ease;
}

.edu-btn.success {
    background: #22c55e;
    color: white;
}

.edu-btn.success:hover {
    background: #16a34a;
}

.edu-btn.cancel {
    background: #ff477b;
    color: #ffffff;
}

.edu-btn.cancel:hover {
    background: #e5e7eb;
}


/* tabbbbbbbbbbb */


.registration-wrapper {
    width: 100%;
    max-width: 70%;

}

.page-title {
    text-align: center;
    margin-bottom: 28px;
}

.page-title h2 {
    font-size: 1.6rem;
    font-weight: 700;
    color: #2c7a7b;
}

.page-title p {
    color: #888;
    font-size: 0.9rem;
}

/* ── TAB NAV ── */
.custom-tabs {
    display: flex;
    gap: 6px;
    padding: 0 0 0 0;
    margin-bottom: 0;
    list-style: none;
    position: relative;
    z-index: 1;
}

.custom-tabs li {
    flex: 1;
}

.custom-tabs li button {
    width: 100%;
    padding: 13px 8px;
    border: 1.5px dashed #8cc34a;
    border-bottom: none;
    border-radius: 20px 20px 0 0;
    background: #f5f5f5;
    color: #aaa;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all 0.25s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    outline: none;
}

.custom-tabs li button .tab-icon {
    font-size: 1.4rem;
}

.custom-tabs li button:hover {
    background: #f2efaa;
    color: #000000;
    border-color: #ffd54f;
}

.custom-tabs li button.active {
    background: #8bc34a;
    color: #fff;
    border-color: #ffffff;
    box-shadow: inset 0px -2px 12px 2px rgb(208 207 189);
}

/* ── TAB CONTENT PANEL ── */
.tab-panel-wrapper {

    border-top: 1.5px dashed #8bc34a;
    border-radius: 0 0 28px 28px;
    background: #ffffffc2;
    padding: 36px 32px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
    border-left: 1px solid #8bc34a;
    border-right: 1px solid #8bc34a;
    border-bottom: 1px solid #8bc34a;
}

.tab-pane-custom {
    display: none;
}

.tab-pane-custom.active {
    display: flex;
    gap: 28px;
    align-items: flex-start;
    flex-direction: column;
}

/* illustration box */
.tab-illustration {
    flex-shrink: 0;
    width: 140px;
    height: 110px;
    background: #f0f0f0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    border: 1.5px dashed #ccc;
}

.tab-content-text h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #2c7a7b;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}

.tab-content-text p {
    color: #777;
    font-size: 0.88rem;
    line-height: 1.8;
    margin-bottom: 18px;
}

/* form fields inside tabs */
.tab-content-text .form-label {
    font-size: 0.82rem;
    color: #555;
    font-weight: 600;
}

.tab-content-text .form-control,
.tab-content-text .form-select {
    border-radius: 8px;
    border: 1.5px solid #d0d0d0;
    font-size: 0.85rem;
    padding: 8px 12px;
    transition: border-color 0.2s;
}

.tab-content-text .form-control:focus,
.tab-content-text .form-select:focus {
    border-color: #5bbcbd;
    box-shadow: 0 0 0 3px rgba(91, 188, 189, 0.15);
}

/* nav buttons */
.tab-nav-btns {
    display: flex;
    justify-content: space-between;
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px dashed #e0e0e0;
    width: 46%;
    position: absolute;
    bottom: 13%;
    padding: 20px;
}

.btn-next {
    background: #8bc34a !important;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 9px 26px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-next:hover {
    background: #3fa5a6;
}

.btn-prev {
    background: #f8ac593b !important;
    color: #888;
    border: none;
    border-radius: 8px;
    padding: 9px 26px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-prev:hover {
    background: #ffe8cf;
}

.btn-submit {
    background: #ff7f50;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 9px 26px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-submit:hover {
    background: #ff477b;
}

/* step badge */
.step-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    padding: 1px 8px;
    font-size: 0.65rem;
    margin-top: 2px;
}

/* ---------- tablet ---------- */
@media (max-width: 992px) {

    .registration-wrapper {
        max-width: 90%;
    }

    .tab-pane-custom.active {
        flex-direction: column;
    }

    .tab-nav-btns {
        width: 100%;
        position: relative;
        bottom: auto;
        margin-top: 25px;
    }

}

/* ---------- mobile ---------- */
@media (max-width:576px) {

    .custom-tabs {
        flex-wrap: wrap;
        margin-bottom: -2px;
        /* جلوگیری از فاصله */
    }

    .custom-tabs li {
        flex: 1 1 50%;
    }

    .custom-tabs li button {
        border-radius: 12px 12px 0 0;
    }

    .tab-panel-wrapper {
        border-top: 1.5px dashed #8bc34a;
        margin-top: 0;
    }

}



/* تیبل های پیش ثبت نام */


.section-title {
    font-weight: 800;
    color: #2f5f1f;
    margin-bottom: 24px;
}


.btn-register {
    background: #f39c12;
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 8px 18px;
    transition: 0.3s;
    font-weight: 700;
}

.btn-register:hover {
    background: #d88400;
    color: #fff;
}



.register-box {
    background: #ffffff;
    border-radius: 30px;
    padding: 35px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

.text-success-index-index {
    color: #377513;
}

.form-control-custom {
    border-radius: 14px;
    min-height: 50px;
    border: 1px solid #d8e1d3;
    padding: 10px 14px;
    box-shadow: none;
}

.form-control-custom:focus {
    border-color: #377513;
    box-shadow: 0 0 0 0.15rem rgba(55, 117, 19, 0.15);
}

.btn-custom-orange {
    background: #f39c12;
    color: #fff;
    border: none;
    border-radius: 14px;
    padding: 13px 20px;
    font-weight: 700;
    transition: 0.3s;
}

.btn-custom-orange:hover {
    background: #d88400;
    color: #fff;
}

.cloud {
    position: absolute;
    background: rgba(55, 117, 19, 0.05);
    border-radius: 50px;
    z-index: 0;
}

.cloud-1 {
    width: 120px;
    height: 50px;
    top: 20px;
    left: 20px;
}

.cloud-2 {
    width: 80px;
    height: 35px;
    bottom: 30px;
    right: 30px;
}

.register-box form,
.register-box h3 {
    position: relative;
    z-index: 2;
}

.course-info-badge {
    background: #eef7e8;
    color: #2f5f1f;
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 20px;
    font-weight: 600;
}

.modal-content {
    border-radius: 20px;
}

.btn-green {
    background: #377513;
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 10px 18px;
}

.btn-green:hover {
    background: #2f5f1f;
    color: #fff;
}


/* دزوس من  */

/* کانتینر اصلی کارت‌ها */
.assignments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    padding-top: 20px;
    padding-bottom: 20px;
    direction: rtl;
    /* راست‌چین برای فارسی */
}

/* استایل اصلی کارت شیشه‌ای */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid var(--glass-border);
    border-radius: 28px;
    padding: 24px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.glass-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    border-color: rgba(255, 255, 255, 0.8);
}

/* رنگ‌بندی‌های تم بر اساس تصویر ارسالی */
.theme-green {
    background: linear-gradient(135deg, rgb(207 255 219), rgb(255 255 255));
    border: 2px solid #28c76f;
}

.theme-blue {
    background: linear-gradient(135deg, rgb(204 229 246), rgb(249 246 246));
    border: 2px solid #0084ff;
}

.theme-purple {
    background: linear-gradient(135deg, rgb(222 206 238), rgb(246 242 242));
    border: 2px solid #8e44ad;
}

/* بخش هدر کارت */
.card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.icon-wrapper {
    width: 48px;
    height: 48px;
    background: #ffffff;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.status-pill {
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.status-done {
    background: rgba(40, 199, 111, 0.12);
    color: #1db45a;
}

.status-pending {
    background: rgba(255, 159, 67, 0.12);
    color: #ff8c00;
}

/* طراحی حرفه‌ای بخش اسم درس */
.lesson-section {
    margin-bottom: 15px;
}

.lesson-pre-title {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 6px;
    margin-right: 14px;
    opacity: 0.7;
}

.lesson-title-box {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.accent-line {
    width: 5px;
    height: 28px;
    border-radius: 10px;
    transition: 0.3s;
}

/* رنگ خط عمودی بر اساس تم */
.theme-green .accent-line {
    background: #28c76f;
    box-shadow: 0 0 10px rgba(40, 199, 111, 0.3);
}

.theme-blue .accent-line {
    background: #0084ff;
    box-shadow: 0 0 10px rgba(0, 132, 255, 0.3);
}

.theme-purple .accent-line {
    background: #8e44ad;
    box-shadow: 0 0 10px rgba(142, 68, 173, 0.3);
}

.lesson-name {
    font-size: 22px;
    font-weight: 900;
    color: var(--text-main);
    margin: 0;
}

.assignment-desc {
    font-size: 14px;
    color: #4a5568;
    margin: 10px 18px 0 0;
    line-height: 1.6;
}

/* فوتر کارت و دکمه‌ها */
.card-footer {
    margin-top: 30px;
    padding-top: 15px;
    border-top: 1px dashed rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.meta-data {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.meta-item {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.meta-item i {
    font-size: 14px;
    opacity: 0.8;
}


/* ریسپانسیو موبایل */
@media (max-width: 576px) {
    .assignments-grid {
        grid-template-columns: 1fr;
        padding: 5px;
    }

    .lesson-name {
        font-size: 19px;
    }
}



.status-toggle-group {
    display: flex;
    gap: 10px;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.status-btn {
    padding: 10px 16px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
    transition: 0.25s;
    color: #444;
    width: 100%;

}

.f-status {
    font-size: 12px;
}

/* وقتی انتخاب می‌شود */
.status-btn.active {
    background: #ff477b;
    color: white;
    box-shadow: 0 6px 16px rgba(78, 140, 255, 0.35);
}

/* کوچک‌تر شدن در موبایل */
@media(max-width: 1400px) {
    .status-toggle-group {
        flex-direction: row;
    }

    .status-btn {
        width: 100%;
        text-align: center;
    }
}



.course-card.yellow {
    background: #b9d7e4;
}

.course-card.green {
    background: #bfeee0;
}

.course-card.pink {
    background: #e8b6c8;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.row-id {
    display: inline-block;
    font-size: 12px;
    margin-bottom: 6px;
    opacity: 0.8;
}

.card-header h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
}

.card-header p {
    margin: 6px 0 0;
    font-size: 14px;
}

.score-circle {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    border: 6px solid #111;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    font-weight: bold;
}

.card-body-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 18px;
}

.score-box {
    background: rgba(255, 255, 255, 0.55);
    padding: 10px;
    border-radius: 14px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
}

.card-footer {
    margin-top: 16px;
}

.status {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    background: #111;
    color: #fff;
    font-size: 12px;
    margin-bottom: 8px;
}

.status.passed {
    background: #1f7a4d;
}




.cards {
    display: grid;
    gap: 16px;
    max-width: 520px;
}

.att-card {
    border-radius: 26px;
    padding: 18px 18px 16px;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}

.att-card::after {
    content: "";
    position: absolute;
    inset: -40% -20% auto auto;
    width: 220px;
    height: 220px;
    background: rgba(255, 255, 255, .18);
    transform: rotate(25deg);
    border-radius: 40px;
}

.att-card.green {
    background: #bfeee0;
}

.att-card.yellow {
    background: #f6c65b;
}

.att-card.pink {
    background: #e8b6c8;
}

.att-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.att-title {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.att-row {
    font-size: 12px;
    font-weight: 600;
    opacity: .85;
    background: rgba(255, 255, 255, .45);
    padding: 6px 10px;
    border-radius: 999px;
    width: fit-content;
}

.att-date {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.att-date-main {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .2px;
}

.att-day {
    font-size: 14px;
    font-weight: 600;
    opacity: .85;
}

.att-badge {
    position: relative;
    z-index: 1;
    font-size: 12px;
    font-weight: 800;
    padding: 8px 12px;
    border-radius: 999px;
    color: #fff;
    white-space: nowrap;
}

.att-badge.present {
    background: #1f7a4d;
}

.att-badge.late {
    background: #9a5b00;
}

.att-badge.absent {
    background: #a11a3a;
}

.att-bottom {
    position: relative;
    z-index: 1;
    margin-top: 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.att-item {
    background: rgba(255, 255, 255, .55);
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 16px;
    padding: 12px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.att-item .k {
    font-size: 12px;
    font-weight: 700;
    opacity: .75;
}

.att-item .v {
    font-size: 16px;
    font-weight: 800;
}


/* محدود کردن استایل به کانتینر اختصاصی */
.unique-custom-accordion .accordion-item {

    border-radius: 6px;
    overflow: hidden;
}

/* کاهش ارتفاع دکمه و مدیریت آیکون */
.unique-custom-accordion .accordion-button {
    padding: 10px 15px !important;
    /* کاهش پدینگ برای کاهش ارتفاع */
    font-size: 14px;
    background-color: #f8f9fa;
    color: #333;
    border-radius: 6px !important;
}

/* افزودن فلش سفارشی (جایگزین فلش پیش‌فرض) */
.unique-custom-accordion .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333'%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-size: 1rem;
    width: 1rem;
    height: 1rem;
}

/* استایل بدنه برای جمع‌وجورتر شدن */
.unique-custom-accordion .accordion-body {
    padding: 12px 15px;
    /* کاهش فاصله داخلی بدنه */
    font-size: 13px;
    color: #666;
}

/* تنظیم برای حالت باز */
.unique-custom-accordion .accordion-button:not(.collapsed) {
    background-color: #ffeaa752 !important;
    color: #000;
}



/* table */

.eltk-wrap {
    font-family: 'Vazirmatn', sans-serif;
    background: #f3f6fb;
    padding: 40px;
    color: #222;
}

.eltk-container {
    max-width: 1200px;
    margin: auto;
    background: #fff;
    border-radius: 18px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.eltk-header {
    text-align: right;
    margin-bottom: 30px;
}

.eltk-header2 {
    text-align: end;
    margin-bottom: 30px;
}

.eltk-header h1 {
    color: #16324f;
    font-size: 25px;
    margin-bottom: 10px;
    text-align: start;
}

.eltk-header h2 {
    color: #555;
    font-size: 20px;
    font-weight: 500;
}

.eltk-header h3 {
    margin-top: 8px;
    color: #777;
    font-size: 17px;
    font-weight: 400;
}

/* TABLE */
.eltk-table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 14px;
    overflow: hidden;
}



.eltk-table th {
    padding: 16px;
    font-size: 15px;
    border: 1px solid #d9e2ec;
    color: white;
    background: linear-gradient(135deg, #16324f, #1f4e79);

}


.eltk-table {
    border-collapse: collapse;
    width: 100%;
}

.eltk-table td,
.eltk-table th {
    padding: 14px;
    text-align: center;
    border: 1px solid #d9e2ec;
}

.eltk-table tbody tr:nth-child(even) {
    background: #f8fbff;
}


.eltk-table tbody tr:hover {
    background: #edf5ff;
    transition: 0.3s;
}


.eltk-subject {
    font-weight: bold;
    color: #16324f;
    background: #f1f7ff;
}


.eltk-total {
    background: #dbeafe !important;
    font-weight: bold;
}


.eltk-note {
    margin-top: 25px;
    background: #fff8e6;
    border-right: 6px solid #f5b301;
    padding: 16px;
    border-radius: 10px;
    line-height: 2;
    color: #444;
}


.eltk-footer {
    margin-top: 20px;
    text-align: center;
    color: #777;
    font-size: 14px;
}

@media print {
    .eltk-wrap {
        background: white;
        padding: 0;
    }

    .eltk-container {
        box-shadow: none;
        border-radius: 0;
        width: 100%;
    }
}



@media print {
    thead {
        background-color: #777 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    thead tr {
        background-color: #777 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    thead th {
        background-color: #777 !important;
        color: white;
        /* برای خوانایی بهتر */
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}



.img-wrapper {

    overflow: visible;
    position: relative;
}

.img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}




.eltk-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;

    padding: 20px 24px;

    border-radius: 20px;

    background: #ffffff;

    border: 1px solid #e5e7eb;

    box-shadow:
        0 8px 24px rgba(15, 23, 42, .06);
}



.eltk-header-main {
    display: flex;
    align-items: center;
    gap: 18px;
}


.img-wrapper {
    flex-shrink: 0;
}

.img-wrapper img {
    width: 68px;
    height: 68px;

    object-fit: cover;

    border-radius: 18px;

    padding: 6px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;
}



.eltk-header-title {
    display: flex;
    flex-direction: column;
    gap: 4px;

    text-align: right;
}

.eltk-header-title h1 {
    margin: 0;

    font-size: 28px;
    font-weight: 800;

    color: #0f172a;
}

.eltk-header-title h2 {
    margin: 0;

    font-size: 15px;
    font-weight: 500;

    color: #475569;
}

.eltk-header-title h3 {
    margin: 0;

    font-size: 13px;
    font-weight: 400;

    color: #94a3b8;
}



.eltk-header-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.eltk-info-item {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 10px 14px;

    border-radius: 12px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    font-size: 13px;

    transition: .2s ease;
}

.eltk-info-item:hover {
    transform: translateY(-2px);

    background: #f1f5f9;
}

.eltk-info-item .label {
    font-weight: 700;

    color: #2563eb;
}

.eltk-info-item .value {
    color: #0f172a;

    font-weight: 500;
}



@media(max-width:768px) {

    .eltk-header {
        align-items: flex-start;
        padding: 18px;
    }

    .eltk-header-main {
        width: 100%;
    }

    .eltk-header-info {
        width: 100%;
    }

    .img-wrapper img {
        width: 58px;
        height: 58px;
    }

    .eltk-header-title h1 {
        font-size: 22px;
    }
}



.mobile-bottom-nav {
    display: none;
}

@media (max-width: 768px) {
    .desktop-menu-only {
        display: none !important;
    }

    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        right: 0;
        left: 0;
        z-index: 9999;
        background: #fff;
        border-top: 1px solid #ddd;
        box-shadow: 0 -3px 15px rgba(0, 0, 0, 0.08);
        padding: 8px 4px;
        justify-content: space-around;
        align-items: center;
    }

    .mobile-nav-item {
        flex: 1;
        text-align: center;
        text-decoration: none;
        color: #666;
        font-size: 11px;
        padding: 6px 2px;
    }

    .mobile-nav-item i {
        display: block;
        font-size: 22px;
        margin-bottom: 4px;
        color: #7c3aed;
    }

    .mobile-nav-item.active {
        color: #7c3aed;
        font-weight: 700;
    }

    body {
        padding-bottom: 80px;
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --sp-sidebar-bg: #1e2a4a;
    --sp-sidebar-width: 280px;
    --sp-primary: #4f46e5;
    --sp-primary-light: #eef2ff;
    --sp-header-h: 60px;
    --sp-text: #1f2937;
    --sp-muted: #6b7280;
    --sp-border: #e5e7eb;
    --sp-bg: #f3f4f6;
    --sp-card-bg: #ffffff;
    --sp-success: #10b981;
    --sp-warning: #f59e0b;
    --sp-danger: #ef4444;
}



/* ====== SIDEBAR ====== */

/* SUBMENU */

.sp-nav-submenu.show {
    max-height: 500px;
}

.sp-nav-submenu li a {
    display: block;
    padding: 7px 12px 7px 12px;
    margin: 1px 0 1px 8px;
    border-radius: 8px;
    font-size: 12px;
    color: #64748b;
    text-decoration: none;
    border: 1px solid rgb(79 70 229 / 46%);
    transition: all 0.2s;
}

.sp-nav-submenu li a:hover,
.sp-nav-submenu li a.active-sub {
    color: #000000;
    background: rgba(79, 70, 229, 0.1);
    border-right-color: var(--sp-primary);
}

/* SIDEBAR FOOTER */
.sp-sidebar-footer {
    padding: 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    font-size: 10px;
    color: #475569;
    text-align: center;
}

/* ====== OVERLAY ====== */
.sp-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 999;
}

.sp-overlay.show {
    display: block;
}

/* ====== HAMBURGER ====== */
.sp-hamburger {
    display: none;
    position: fixed;
    top: 12px;
    right: 14px;
    z-index: 998;
    background: var(--sp-primary);
    color: #fff;
    border: none;
    border-radius: 10px;
    width: 40px;
    height: 40px;
    font-size: 16px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.4);
    transition: background 0.2s;
}

.sp-hamburger:hover {
    background: #4338ca;
}

/* ====== HEADER ====== */
.sp-header {
    position: fixed;
    top: 0;
    left: 0;
    right: var(--sp-sidebar-width);
    height: var(--sp-header-h);
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--sp-border);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 20px;
    z-index: 100;
    gap: 4px;
}

.sp-header-icon {
    position: relative;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: var(--sp-muted);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 16px;
}

.sp-header-icon:hover {
    background: var(--sp-bg);
    color: var(--sp-primary);
}

.sp-badge-dot {
    position: absolute;
    top: 7px;
    left: 8px;
    width: 8px;
    height: 8px;
    background: #ef4444;
    border-radius: 50%;
    border: 2px solid #fff;
}

.sp-header-divider {
    width: 1px;
    height: 24px;
    background: var(--sp-border);
    margin: 0 6px;
}

/* ====== MAIN WRAPPER ====== */
.sp-main-wrapper {
    margin-right: var(--sp-sidebar-width);

    min-height: 100vh;
}

.sp-page {
    display: none;
    padding: 24px 24px 40px;
    animation: sp-fadein 0.25s ease;
}

.sp-page.active {
    display: block;
}

@keyframes sp-fadein {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ====== BANNER ====== */
.sp-banner {
    background: linear-gradient(135deg, var(--sp-primary-light) 0%, #e0e7ff 100%);
    border: 1px solid #c7d2fe;
    border-radius: 16px;
    padding: 18px 22px;
    margin-bottom: 22px;
    font-size: 16px;
    font-weight: 600;
    color: #3730a3;
    display: flex;
    align-items: center;
    gap: 10px;
}



/* STAT CARDS */
.sp-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.sp-stat-card {
    background: var(--sp-card-bg);
    border: 1px solid var(--sp-border);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.2s;
}

.sp-stat-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.sp-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.sp-stat-icon.blue {
    background: #eff6ff;
    color: #3b82f6;
}

.sp-stat-icon.green {
    background: #ecfdf5;
    color: #10b981;
}

.sp-stat-icon.orange {
    background: #fff7ed;
    color: #f59e0b;
}

.sp-stat-icon.purple {
    background: #f5f3ff;
    color: #8b5cf6;
}

.sp-stat-icon.red {
    background: #fef2f2;
    color: #ef4444;
}

.sp-stat-icon.indigo {
    background: #eef2ff;
    color: #6366f1;
}

.sp-stat-val {
    font-size: 22px;
    font-weight: 800;
    color: var(--sp-text);
    line-height: 1;
}

.sp-stat-label {
    font-size: 11px;
    color: var(--sp-muted);
    margin-top: 3px;
}

/* GRID */
.sp-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.sp-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

/* BOX ITEMS */
.sp-box-item {
    background: #f9fafb;
    border: 1px solid var(--sp-border);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.sp-box-item:hover {
    border-color: #c7d2fe;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.08);
}

.sp-box-item-icon {
    font-size: 20px;
    margin-top: 2px;
    flex-shrink: 0;
}

.sp-box-item-title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 3px;
}

.sp-box-item-sub {
    font-size: 11px;
    color: var(--sp-muted);
    line-height: 1.5;
}

/* BADGES */
.sp-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

.sp-badge-green {
    background: #ecfdf5;
    color: #059669;
}

.sp-badge-blue {
    background: #eff6ff;
    color: #2563eb;
}

.sp-badge-orange {
    background: #fff7ed;
    color: #d97706;
}

.sp-badge-red {
    background: #fef2f2;
    color: #dc2626;
}

.sp-badge-gray {
    background: #f3f4f6;
    color: #6b7280;
}

.sp-badge-indigo {
    background: #eef2ff;
    color: #4f46e5;
}

/* TABLE */
.sp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.sp-table th {
    background: #f8fafc;
    padding: 10px 14px;
    font-weight: 600;
    font-size: 12px;
    color: var(--sp-muted);
    border-bottom: 2px solid var(--sp-border);
    text-align: right;
}

.sp-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--sp-border);
    color: var(--sp-text);
}

.sp-table tr:hover td {
    background: #f9fafb;
}

.sp-table tr:last-child td {
    border-bottom: none;
}

/* FORM CONTROLS */
.sp-form-group {
    margin-bottom: 16px;
}

.sp-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 6px;
    color: var(--sp-text);
}

.sp-input,
.sp-select,
.sp-textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--sp-border);
    border-radius: 10px;
    font-size: 13px;
    font-family: 'Vazirmatn', sans-serif;
    color: var(--sp-text);
    background: #f9fafb;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.sp-input:focus,
.sp-select:focus,
.sp-textarea:focus {
    border-color: var(--sp-primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
    background: #fff;
}

.sp-textarea {
    resize: vertical;
    min-height: 90px;
}

/* BUTTONS */
.sp-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 20px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Vazirmatn', sans-serif;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
}

.sp-btn-primary {
    background: var(--sp-primary);
    color: #fff;
}

.sp-btn-primary:hover {
    background: #4338ca;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35);
}

.sp-btn-success {
    background: var(--sp-success);
    color: #fff;
}

.sp-btn-success:hover {
    background: #059669;
}

.sp-btn-outline {
    background: transparent;
    border: 1px solid var(--sp-border);
    color: var(--sp-muted);
}

.sp-btn-outline:hover {
    border-color: var(--sp-primary);
    color: var(--sp-primary);
    background: var(--sp-primary-light);
}

/* INFO LIST */
.sp-info-list {
    list-style: none;
    padding: 0;
}

.sp-info-list li {
    padding: 9px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--sp-text);
}

.sp-info-list li:last-child {
    border-bottom: none;
}

/* CHAT */
.sp-chat-wrap {
    display: flex;
    height: 520px;
    overflow: hidden;
    border-radius: 0 0 16px 16px;
}

.sp-chat-list {
    width: 280px;
    flex-shrink: 0;
    border-left: 1px solid var(--sp-border);
    overflow-y: auto;
    background: #f9fafb;
}

.sp-chat-search {
    padding: 12px;
}

.sp-contact-item {
    padding: 12px 14px;
    border-bottom: 1px solid var(--sp-border);
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: background 0.15s;
}

.sp-contact-item:hover,
.sp-contact-item.active {
    background: var(--sp-primary-light);
}

.sp-contact-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #c7d2fe;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    color: #4f46e5;
    flex-shrink: 0;
}

.sp-contact-name {
    font-size: 13px;
    font-weight: 600;
}

.sp-contact-role {
    font-size: 11px;
    color: var(--sp-muted);
}

.sp-chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sp-chat-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--sp-border);
    font-weight: 600;
    font-size: 14px;
    background: #fff;
}

.sp-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 18px;
    background: #fefce8;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sp-msg {
    max-width: 70%;
}

.sp-msg.out {
    align-self: flex-start;
}

.sp-msg.in {
    align-self: flex-end;
}

.sp-msg-bubble {
    padding: 9px 14px;
    border-radius: 16px;
    font-size: 13px;
    line-height: 1.6;
}

.sp-msg.out .sp-msg-bubble {
    background: #e5e7eb;
    color: #111;
    border-bottom-right-radius: 4px;
}

.sp-msg.in .sp-msg-bubble {
    background: var(--sp-primary);
    color: #fff;
    border-bottom-left-radius: 4px;
}

.sp-msg-time {
    font-size: 10px;
    color: var(--sp-muted);
    margin-top: 3px;
    text-align: left;
}

.sp-chat-input {
    padding: 12px 16px;
    border-top: 1px solid var(--sp-border);
    display: flex;
    gap: 10px;
    background: #fff;
}

/* WEEKLY SCHEDULE GRID */
.sp-week-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.sp-day-col {}

.sp-day-header {
    background: var(--sp-primary);
    color: #fff;
    text-align: center;
    padding: 8px;
    border-radius: 10px 10px 0 0;
    font-size: 13px;
    font-weight: 600;
}

.sp-day-body {
    background: #fff;
    border: 1px solid var(--sp-border);
    border-top: none;
    border-radius: 0 0 10px 10px;
    padding: 10px;
    min-height: 180px;
}

.sp-class-pill {
    border-radius: 8px;
    padding: 8px;
    margin-bottom: 6px;
    font-size: 11px;
}

.sp-class-pill h5 {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 3px;
}

/* PROGRESS */
.sp-progress {
    height: 8px;
    background: #e5e7eb;
    border-radius: 99px;
    overflow: hidden;
    margin: 8px 0;
}

.sp-progress-bar {
    height: 100%;
    border-radius: 99px;
    background: var(--sp-primary);
    transition: width 0.6s;
}

/* TIMELINE */
.sp-timeline {
    position: relative;
    padding-right: 24px;
}

.sp-timeline::before {
    content: '';
    position: absolute;
    right: 9px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--sp-border);
}

.sp-timeline-item {
    position: relative;
    padding-bottom: 18px;
}

.sp-timeline-item::before {
    content: '';
    position: absolute;
    right: -24px;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--sp-border);
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px var(--sp-border);
}

.sp-timeline-item.done::before {
    background: var(--sp-success);
    box-shadow: 0 0 0 2px #a7f3d0;
}

.sp-timeline-item.active::before {
    background: var(--sp-primary);
    box-shadow: 0 0 0 2px #c7d2fe;
}

/* UPLOAD ZONE */
.sp-upload-zone {
    border: 2px dashed var(--sp-border);
    border-radius: 14px;
    padding: 36px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.sp-upload-zone:hover {
    border-color: var(--sp-primary);
    background: var(--sp-primary-light);
}

.sp-upload-zone i {
    font-size: 36px;
    color: #a5b4fc;
    margin-bottom: 10px;
}

.sp-upload-zone p {
    font-size: 13px;
    color: var(--sp-muted);
}

/* OTP INPUT */
.sp-otp-wrap {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 20px 0;
}

.sp-otp-input {
    width: 56px;
    height: 56px;
    border: 2px solid var(--sp-border);
    border-radius: 12px;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    font-family: 'Vazirmatn', sans-serif;
    outline: none;
    transition: border-color 0.2s;
}

.sp-otp-input:focus {
    border-color: var(--sp-primary);
    background: #eef2ff;
}

/* ALERT */
.sp-alert {
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.sp-alert-info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
}

.sp-alert-success {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
}

.sp-alert-warning {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
}

/* CARD HEADER */
.sp-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--sp-border);
    margin-bottom: 16px;
}

.sp-card-header h3 {
    margin-bottom: 0;
}

/* TABS */
.sp-tabs {
    display: flex;
    gap: 4px;
    background: #f3f4f6;
    padding: 4px;
    border-radius: 12px;
    margin-bottom: 18px;
    width: fit-content;
}

.sp-tab {
    padding: 7px 18px;
    border-radius: 9px;
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 500;
    font-family: 'Vazirmatn', sans-serif;
    cursor: pointer;
    color: var(--sp-muted);
    transition: all 0.2s;
}

.sp-tab.active {
    background: #fff;
    color: var(--sp-primary);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    font-weight: 600;
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .sp-sidebar {
        transform: translateX(100%);
    }

    .sp-sidebar.open {
        transform: translateX(0);
    }

    .sp-sidebar-close {
        display: flex;
    }

    .sp-hamburger {
        display: flex;
    }

    .sp-header {
        right: 0;
        padding-right: 60px;
    }

    .sp-main-wrapper {
        margin-right: 0;
    }

    .sp-grid-2 {
        grid-template-columns: 1fr;
    }

    .sp-grid-3 {
        grid-template-columns: 1fr;
    }

    .sp-week-grid {
        grid-template-columns: 1fr 1fr;
    }

    .sp-chat-list {
        width: 220px;
    }
}

@media (max-width: 600px) {
    .sp-week-grid {
        grid-template-columns: 1fr;
    }

    .sp-page {
        padding: 14px 12px 30px;
    }

    .sp-stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .sp-chat-list {
        display: none;
    }
}


/* ظرفیت کلی باکس‌ها */
.courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    padding: 15px 0;
}

/* استایل هر باکس درس */
.course-box {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e1e8ed;
    padding: 18px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
}

.course-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
    border-color: #3498db;
}

/* هدر باکس (نام درس و وضعیت) */
.course-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 2px solid #f8f9fa;
    padding-bottom: 10px;
}

.course-name {
    font-size: 1.1rem;
    font-weight: bold;
    color: #2c3e50;
}

/* استایل جزئیات داخل باکس */
.course-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* نمایش دو ستونه در هر باکس */
    gap: 12px;
}

.detail-item {
    font-size: 0.85rem;
    color: #7f8c8d;
    display: flex;
    align-items: center;
}

.detail-item i {
    width: 20px;
    color: #3498db;
    margin-left: 8px;
}

.detail-item span {
    color: #333;
    font-weight: 500;
    margin-left: 4px;
}

/* تمام عرض کردن برخی آیتم‌ها مثل ساعت */
.detail-item:nth-child(3) {
    grid-column: span 2;
}

/* نشان‌ها */
.sp-badge {
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: bold;
}

.sp-badge-green {
    background: #e8f5e9;
    color: #2e7d32;
}

.sp-badge-red {
    background: #ffebee;
    color: #c62828;
}

/* تیتر اصلی */
.card-title {
    margin-bottom: 20px;
    color: #2c3e50;
    border-right: 4px solid #3498db;
    padding-right: 15px;
}



.card1-admin {

    background: #FE8CE4;

}

.card2-admin {
    background: #ffc942;
}

.card3-admin {
    background: #FFB264;
}

.card4-admin {
    background: #C2BFF8;
}

.card5-admin {
    background: #feb2f0;
}

.card6-admin {
    background: #87ceea;
}

.card8-admin {
    background: #d6eae9;
}

.card9-admin {
    background: #d6eae9;
}


.sp-hw-item-admin {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #f1f1f1eb;
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
    border-right: 4px solid #442856;

}

.dashboard-admin {
    direction: rtl;
    padding: 20px;
}

/* کارت اصلی */

.sp-card-new {
    border: 2px solid #000;
    border-radius: 28px;
    padding: 18px;
    box-shadow: 6px 6px 0 #000;
    height: 100%;
    transition: 0.2s;
}

.sp-card-new:hover {
    transform: translate(-3px, -3px);
    box-shadow: 9px 9px 0 #000;
}

/* رنگ کارت ها */

.card1-admin {
    background: #FE8CE4;
}

.card2-admin {
    background: #ffc942;
}

.card3-admin {
    background: #FFB264;
}

.card4-admin {
    background: #C2BFF8;
}

.card5-admin {
    background: #feb2f0;
}

.card6-admin {
    background: #87ceea;
}

.card8-admin {
    background: #d6eae9;
}

.card9-admin {
    background: #d6eae9;
}

/* هدر کارت */

.sp-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.sp-card-title {
    font-weight: 800;
    font-size: 15px;
    display: flex;
    gap: 8px;
    align-items: center;
}

.sp-tag {
    background: #fff;
    border: 2px solid #000;
    border-radius: 20px;
    padding: 3px 12px;
    font-size: 12px;
    font-weight: bold;
}

.sp-tag-success {
    background: #fff;
}

/* آیتم لیست */

.sp-list-item-white {
    display: flex;
    align-items: center;
    background: #fff;
    border: 2px solid #000;
    border-radius: 18px;
    padding: 10px 12px;
    margin-bottom: 10px;
    box-shadow: 3px 3px 0 #000;
}

.sp-icon-circle-new {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    flex-shrink: 0;
}

.sp-item-info-new strong {
    display: block;
    font-size: 14px;
}

.sp-item-info-new span {
    font-size: 12px;
    color: #555;
}

/* گرید کارت ها */

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 25px;
}

/* آمار */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
}

.sp-stat-box-neo {
    border: 2px solid #000;
    border-radius: 20px;
    padding: 18px;
    text-align: center;
    box-shadow: 5px 5px 0 #000;
}

.stat-value {
    font-size: 28px;
    font-weight: 900;
}

.stat-label {
    font-size: 13px;
    font-weight: bold;
}

:root {
    --neo-bg: #FDF9F0;
    --neo-border: 2px solid #1A1A1A;
    --neo-shadow: 6px 6px 0px #1A1A1A;
    --neo-shadow-sm: 4px 4px 0px #1A1A1A;
    --neo-yellow: #FFD966;
    --neo-orange: #FF8A5B;
    --neo-green: #B2D8B4;
    --neo-pink: #FFB3D9;
    --neo-purple: #C3B1E1;
    --neo-blue: #A2D2FF;
    --neo-mint: #B2E2D2;
}

.adm-neo-container {
    padding: 20px;
    background-color: var(--neo-bg);
    direction: rtl;
    font-family: 'Tahoma', sans-serif;
}

/* بخش ویجت‌های دایره‌ای/مربعی بالایی */
.adm-neo-widgets-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}

.adm-neo-widget-box {
    flex: 1;
    min-width: 300px;
    max-width: 200px;
    background: #fff;
    border: var(--neo-border);
    box-shadow: var(--neo-shadow-sm);
    border-radius: 22px;
    padding: 20px;
    text-align: center;
    text-decoration: none;
    color: #1A1A1A;
    transition: 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.adm-neo-widget-box:hover {
    transform: translateY(-5px);
    box-shadow: 7px 7px 0px #1A1A1A;
}

.adm-neo-widget-box i {
    font-size: 28px;
}

.adm-neo-widget-box span {
    font-weight: 800;
    font-size: 13px;
    line-height: 1.4;
}

/* گرید کارت‌های اصلی */
.adm-neo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px;
    margin-bottom: 30px;
}

.adm-neo-card {
    background: #fff;
    border: var(--neo-border);
    box-shadow: 3px 3px 0px #1A1A1A;
    border-radius: 28px;
    padding: 20px;
}

.adm-neo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.adm-neo-title {
    font-weight: 900;
    font-size: 17px;
    display: flex;
    gap: 8px;
    align-items: center;
}

.adm-neo-badge {
    background: #1A1A1A;
    color: #fff;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 11px;
}

/* آیتم‌های لیست داخل کارت */
.adm-neo-item {
    background: rgba(255, 255, 255, 0.7);
    border: 1.5px solid #1A1A1A;
    border-radius: 18px;
    padding: 12px 15px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.adm-neo-info strong {
    display: block;
    font-size: 14px;
    margin-bottom: 2px;
}

.adm-neo-info span {
    font-size: 12px;
    color: #555;
}

.adm-neo-status {
    background: #fff;
    border: 1.5px solid #1A1A1A;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: bold;
}

/* بخش آمار پایین */
.adm-neo-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
}

.adm-neo-stat-box {
    border: var(--neo-border);
    box-shadow: var(--neo-shadow-sm);
    border-radius: 20px;
    padding: 15px;
    text-align: center;
}

.adm-neo-stat-box .val {
    font-size: 28px;
    font-weight: 900;
    display: block;
}

.adm-neo-stat-box .lbl {
    font-size: 13px;
    font-weight: bold;
}

/* رنگ‌های کمکی */
.w-purple {
    background-color: var(--neo-purple);
}

.w-yellow {
    background-color: var(--neo-yellow);
}

.w-green {
    background-color: var(--neo-green);
}

.w-pink {
    background-color: var(--neo-pink);
}

.w-blue {
    background-color: var(--neo-blue);
}

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

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

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

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

/* 
    --neo-yellow: #FFD966;
    --neo-orange: #FF8A5B;
    --neo-green: #B2D8B4;
    --neo-pink: #FFB3D9;
    --neo-purple: #C3B1E1;
    --neo-blue: #A2D2FF;
    --neo-mint: #B2E2D2; */


* {
    box-sizing: border-box;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-bottom: 30px;
}

.chart-card {
    background: #f8f4d8;
    position: relative;
    overflow: hidden;
    padding: 16px;
    border-radius: 20px;
    min-width: 0;
}

.chart-box {
    width: 100%;
    height: 380px;
}

.chart-top-info {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin: 10px 0 15px;
}

.mini-stat {
    background: #f8f8f8;
    border: 2px solid #111;
    border-radius: 14px;
    padding: 10px 14px;
    min-width: 140px;
    flex: 1 1 140px;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.08);
}

.mini-stat .label {
    display: block;
    font-size: 12px;
    font-weight: bold;
    color: #666;
    margin-bottom: 4px;
}

.mini-stat .value {
    display: block;
    font-size: 22px;
    font-weight: 900;
    color: #000;
}

@media (max-width: 992px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .chart-card {
        padding: 12px;
    }

    .chart-box {
        height: 320px;
    }

    .chart-top-info {
        gap: 8px;
    }

    .mini-stat {
        min-width: 100%;
    }
}

@media (max-width: 480px) {
    .chart-box {
        height: 280px;
    }
}


/* ارتفاع ثابت برای tab-content در مودال‌ها */
#tamrin .tab-content,
#sarfasldarsi .tab-content {
    min-height: 70dvh;
}

.courses-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* لپ‌تاپ: ۲ ستونه */
@media (max-width: 1600px) {
    .courses-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* موبایل: تک‌ستونه (زیر هم) */
@media (max-width: 1200px) {
    .courses-grid {
        grid-template-columns: 1fr;
    }
}


.sp-course-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
    overflow: hidden;
}

.sp-course-top {
    padding: 16px;
    border-bottom: 1px solid #eee;
}

.course-header-flex {
    display: flex;
    align-items: center;
    gap: 12px;
}

.course-header-flex img {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    object-fit: cover;
}

.teacher-name {
    font-size: .8rem;
    color: white;
}

.sp-course-body {
    padding: 16px;
}

.sp-course-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.score-area .num {
    font-size: 1.4rem;
    font-weight: 700;
    color: #4e8cff;
}

.homework-badge {
    background: #ccc7ff;
    color: #000000;
    font-size: .75rem;
    padding: 4px 10px;
    border-radius: 20px;
}

.scores-breakdown {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 10px;
    margin-bottom: 12px;
}

.score-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .82rem;
    padding: 6px 10px;
    background: #f9f9fc;
    border-radius: 8px;
}

.score-title {
    color: #777;
}

.score-value {
    font-weight: 700;
    color: #333;
}

.score-average {
    grid-column: 1 / -1;
    background: #fff4e8;
    border: 1px solid #ffd9b3;
}

.score-average .score-value {
    color: #e8932e;
}

.term-summary {
    border-top: 1px solid #eee;
    padding-top: 12px;
}

.lesson-class-wrapper {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.info-pill {
    background: #f0f4ff;
    color: #4e8cff;
    font-size: .75rem;
    padding: 4px 10px;
    border-radius: 20px;
}

.progress-bar-bg {
    background: #eee;
    border-radius: 20px;
    height: 8px;
    overflow: hidden;
}

.progress-fill {
    background: #4e8cff;
    height: 100%;
}

.progress-label {
    font-size: .75rem;
    color: #999;
    margin-top: 6px;
}


.compact-approval-card {
    margin-top: 12px;
    border-radius: 10px;
    background: #fff;
}

.compact-approval-card .card-body {
    padding: 0;
}

.approval-mini-row {
    padding: 10px;
    border: 1px dashed #d9dde3;
    border-radius: 8px;
    background: #fbfcfe;
    transition: all 0.2s ease;
}

.approval-mini-row:hover {
    border-color: #7c3aed;
    background: #fff;
}

.approval-row.dragging {
    opacity: 0.55;
    border-color: #7c3aed;
    background: #f8eef6;
}

.approval-step-control {
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.drag-handle {
    width: 30px;
    height: 30px;
    border: 1px solid #d9dde3;
    border-radius: 50%;
    background: #fff;
    color: #6c757d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    flex-shrink: 0;
}

.drag-handle:hover {
    color: #7c3aed;
    border-color: #7c3aed;
}

.drag-handle:active {
    cursor: grabbing;
}

.approval-step-input {

    min-width: 50px;
    height: 34px;
    text-align: center;
    font-weight: 700;
    border-radius: 7px;
    padding: 4px 6px;
    background: #fff;
}

.approval-step-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.approval-step-actions .btn-icon {
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.approval-step-actions .btn-icon i {
    font-size: 14px;
    line-height: 1;
}

.approval-route-box {
    padding: 10px 12px;
    border-radius: 8px;
    background: #f8f9fb;
    border: 1px dashed #d9dde3;
    font-size: 13px;
    color: #555;
}

@media (max-width: 767.98px) {
    .approval-step-control {
        flex-wrap: wrap;
    }

    .approval-step-input {
        flex: 1;
    }

    .approval-step-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

.approval-step-control {
    width: 100%;
}

.approval-step-input {
    text-align: right;
}

.approval-step-actions {
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    white-space: nowrap;
}

.drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: move;
    color: #6c757d;
    font-size: 18px;
}



.salary-slip-card {
    direction: rtl;
    font-family: Tahoma, Arial, sans-serif;
}

.detail-box {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px;
    height: 100%;
    background: #fff;
}

.summary-card {
    border: 1px solid #dbeafe;
    border-radius: 8px;
    padding: 18px;
}

.print-slip {
    display: none;
    direction: rtl;
    font-family: Tahoma, Arial, sans-serif;
    color: #000;
    background: #fff;
}

.print-sheet {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 14px;
    border: 1px solid #000;
    background: #fff;
}

.print-title {
    text-align: center;
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 14px;
}

.print-header-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    margin-bottom: 18px;
}

.print-cell {
    min-height: 36px;
    padding: 7px 10px;
    border-left: 1px solid #000;
    border-bottom: 1px solid #000;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.print-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 13px;
}

.print-table th,
.print-table td {
    border: 1px solid #000;
    padding: 8px 6px;
    height: 34px;
    text-align: center;
    vertical-align: middle;
}

.print-table th {
    font-weight: 700;
    background: #f3f4f6;
}

.print-table .text-start {
    text-align: right !important;
}

.print-total-row td {
    font-weight: 700;
    background: #f8fafc;
}

.print-net-box {
    margin-top: 16px;
    border: 2px solid #000;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    font-size: 15px;
}

.print-signatures {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 45px;
    font-size: 13px;
}

.print-signature {
    border-top: 1px solid #000;
    padding-top: 8px;
    text-align: center;
}

@media print {
    body * {
        visibility: hidden !important;
    }

    #salaryPrintArea,
    #salaryPrintArea * {
        visibility: visible !important;
    }

    #salaryPrintArea {
        display: block !important;
        position: absolute;
        inset: 0;
        width: 100%;
        margin: 0;
        padding: 0;
        background: #fff;
    }

    .print-sheet {
        border: none;
        max-width: none;
        width: 100%;
        padding: 8mm;
    }

    @page {
        size: A4 landscape;
        margin: 8mm;
    }
}

.btn {
    transition: all 0.2s ease-in-out;
}

.btn:hover {
    transform: translateY(-2px);
    /* دکمه موقع هاور کمی بالا می‌آید */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* افکت انیمیشن برای دکمه‌ها */
.btn-animated {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    /* سرعت نرم انیمیشن */
    border: 1px solid transparent;
}

.btn-animated:hover {
    transform: translateY(-4px);
    /* کمی بالا رفتن دکمه */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    /* ایجاد سایه هنگام هاور */
    filter: brightness(95%);
    /* کمی تیره شدن رنگ دکمه برای حس بهتر */
}

/* برای اینکه در موبایل ظاهر دکمه‌ها به هم نریزد */
@media (max-width: 768px) {
    .btn-animated {
        width: 100% !important;
        /* در موبایل دکمه‌ها تمام‌عرض شوند */
    }
}




/* Attendance front-only mockup; all values map to the existing INSPINIA tokens. */
.att-shell {
    padding: 0 0 28px;
}

.att-shell,
.att-shell * {
    box-sizing: border-box;
}

.att-view-switch {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    padding: 10px;
    margin-bottom: 18px;
    border: 1px solid var(--ins-border-color);
    background: var(--ins-secondary-bg);
    border-radius: var(--ins-border-radius-lg);
    box-shadow: var(--ins-box-shadow);
    /* @token --ins-box-shadow */
}

.att-view-switch .btn {
    min-height: 44px;
}

.att-view-switch .btn.is-active {
    color: #fff;
    background: var(--ins-primary);
    border-color: var(--ins-primary);
}

.att-demo-badge {
    margin-inline-start: auto;
}

.att-page[hidden] {
    display: none !important;
}

.att-page-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.att-page-head h2 {
    margin: 0 0 4px;
    font-size: 1.2rem;
}

.att-page-head p {
    margin: 0;
    color: var(--ins-secondary-color);
}

.att-server-clock {
    min-width: 190px;
    text-align: center;
    padding: 10px 14px;
    border: 1px solid var(--ins-primary-border-subtle);
    background: var(--ins-primary-bg-subtle);
    border-radius: var(--ins-border-radius);
}

.att-server-clock small {
    display: block;
    color: var(--ins-secondary-color);
}

.att-server-clock strong {
    display: block;
    margin-top: 2px;
    font-size: 1.1rem;
    color: var(--ins-primary-text-emphasis);
}

.att-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.att-stat-card {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--ins-secondary-bg);
    border: 1px solid var(--ins-border-color);
    border-radius: var(--ins-border-radius-lg);
    box-shadow: var(--ins-box-shadow);
}

.att-stat-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 12px;
    background: var(--ins-primary-bg-subtle);
    color: var(--ins-primary);
}

.att-stat-icon svg {
    width: 23px;
    height: 23px;
}

.att-stat-card small {
    display: block;
    color: var(--ins-secondary-color);
    margin-bottom: 4px;
}

.att-stat-card strong {
    font-size: 1.18rem;
    color: var(--ins-heading-color);
}

.att-card {
    background: var(--ins-secondary-bg);
    border: 1px solid var(--ins-border-color);
    border-radius: var(--ins-border-radius-lg);
    box-shadow: var(--ins-box-shadow);
    overflow: visible;
    margin-bottom: 18px;
}

.att-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--ins-border-color);
}

.att-card-header h3 {
    margin: 0;
    font-size: 1rem;
}

.att-card-body {
    padding: 18px;
}

.att-search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: end;
}

.att-search-row .form-control {
    min-height: 48px;
    font-size: 1rem;
}

.att-search-row .btn {
    min-height: 48px;
}

.att-field-help {
    margin-top: 8px;
    color: var(--ins-secondary-color);
    font-size: .78rem;
}

.att-inline-error {
    min-height: 20px;
    margin-top: 6px;
    color: var(--ins-danger);
    font-size: .78rem;
}

.att-person-grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 18px;
}

.att-profile-main {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.att-avatar {
    width: 96px;
    height: 96px;
    flex: 0 0 96px;
    border-radius: 18px;
    overflow: hidden;
    background: var(--ins-tertiary-bg);
    border: 1px solid var(--ins-border-color);
    display: grid;
    place-items: center;
}

.att-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.att-avatar-fallback {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--ins-primary);
}

.att-person-name {
    margin: 0 0 7px;
    font-size: 1.25rem;
}

.att-person-meta {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.att-details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
}

.att-detail {
    min-width: 0;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--ins-border-color);
}

.att-detail small {
    display: block;
    color: var(--ins-secondary-color);
    margin-bottom: 3px;
}

.att-detail strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.att-status-panel {
    height: 100%;
    padding: 18px;
    border-radius: var(--ins-border-radius-lg);
    border: 1px solid var(--ins-border-color);
    background: var(--ins-tertiary-bg);
}

.att-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 6px 12px;
    border-radius: 999px;
    font-weight: 700;
}

.att-status-badge.inside {
    color: var(--ins-success-text-emphasis);
    background: var(--ins-success-bg-subtle);
}

.att-status-badge.outside {
    color: var(--ins-secondary-text-emphasis);
    background: var(--ins-secondary-bg-subtle);
}

.att-status-badge.unknown {
    color: var(--ins-warning-text-emphasis);
    background: var(--ins-warning-bg-subtle);
}

.att-status-badge.incomplete {
    color: var(--ins-danger-text-emphasis);
    background: var(--ins-danger-bg-subtle);
}

.att-last-times {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 16px 0;
}

.att-time-box {
    padding: 12px;
    background: var(--ins-secondary-bg);
    border: 1px solid var(--ins-border-color);
    border-radius: var(--ins-border-radius);
}

.att-time-box small {
    display: block;
    color: var(--ins-secondary-color);
}

.att-time-box strong {
    display: block;
    margin-top: 4px;
}

.att-action-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.att-action-row .btn {
    min-height: 50px;
    font-size: .92rem;
}

.att-action-row .btn[disabled] {
    opacity: .45;
}

.att-empty-state {
    padding: 38px 18px;
    text-align: center;
    color: var(--ins-secondary-color);
}

.att-empty-state svg {
    width: 54px;
    height: 54px;
    margin-bottom: 10px;
    color: var(--ins-primary);
}

.att-empty-state h3 {
    color: var(--ins-heading-color);
}

.att-alert {
    display: none;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: var(--ins-border-radius);
    border: 1px solid transparent;
}

.att-alert.show {
    display: flex;
}

.att-alert.success {
    color: var(--ins-success-text-emphasis);
    background: var(--ins-success-bg-subtle);
    border-color: var(--ins-success-border-subtle);
}

.att-alert.warning {
    color: var(--ins-warning-text-emphasis);
    background: var(--ins-warning-bg-subtle);
    border-color: var(--ins-warning-border-subtle);
}

.att-alert.danger {
    color: var(--ins-danger-text-emphasis);
    background: var(--ins-danger-bg-subtle);
    border-color: var(--ins-danger-border-subtle);
}

.att-alert.info {
    color: var(--ins-info-text-emphasis);
    background: var(--ins-info-bg-subtle);
    border-color: var(--ins-info-border-subtle);
}

.att-alert svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    margin-top: 1px;
}

.att-table-wrap {
    overflow: auto;
}

.att-table {
    min-width: 940px;
    margin-bottom: 0;
}

.att-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    white-space: nowrap;
    background: var(--ins-tertiary-bg);
}

.att-table td,
.att-table th {
    vertical-align: middle;
    text-align: center;
}

.att-name-cell {
    display: flex;
    align-items: center;
    gap: 9px;
    text-align: right;
}

.att-mini-avatar {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    object-fit: cover;
    background: var(--ins-tertiary-bg);
}

.att-filter-grid {
    display: grid;
    grid-template-columns: 1.3fr repeat(4, minmax(140px, .75fr));
    gap: 12px;
    align-items: end;
}

.att-filter-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.att-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-top: 1px solid var(--ins-border-color);
}

.att-pagination-buttons {
    display: flex;
    gap: 6px;
}

.att-pagination .btn {
    min-width: 38px;
}

.att-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1090;
    display: none;
    place-items: center;
    padding: 18px;
    background: rgba(15, 23, 42, .48);
    backdrop-filter: blur(2px);
}

.att-modal-backdrop.show {
    display: grid;
}

.att-modal {
    width: min(650px, 100%);
    max-height: calc(100vh - 36px);
    overflow: auto;
    background: var(--ins-secondary-bg);
    border: 1px solid var(--ins-border-color);
    border-radius: var(--ins-border-radius-xl);
    box-shadow: var(--ins-box-shadow-lg);
}

.att-modal-header,
.att-modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
}

.att-modal-header {
    border-bottom: 1px solid var(--ins-border-color);
}

.att-modal-footer {
    border-top: 1px solid var(--ins-border-color);
    justify-content: flex-end;
}

.att-modal-body {
    padding: 18px;
}

.att-timeline {
    position: relative;
    padding-right: 24px;
}

.att-timeline::before {
    content: '';
    position: absolute;
    right: 7px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: var(--ins-border-color);
}

.att-timeline-item {
    position: relative;
    padding: 0 0 16px;
}

.att-timeline-item::before {
    content: '';
    position: absolute;
    right: -22px;
    top: 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--ins-primary);
    box-shadow: 0 0 0 4px var(--ins-primary-bg-subtle);
}

.att-toast-stack {
    position: fixed;
    left: 18px;
    bottom: 18px;
    z-index: 1200;
    display: grid;
    gap: 8px;
}

.att-toast {
    min-width: 270px;
    max-width: 380px;
    padding: 12px 14px;
    color: #fff;
    background: var(--ins-dark);
    border-radius: var(--ins-border-radius);
    box-shadow: var(--ins-box-shadow-lg);
    animation: attToastIn .2s ease;
}

@keyframes attToastIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}

.att-loading {
    position: relative;
    pointer-events: none;
}

.att-loading::after {
    content: '';
    width: 17px;
    height: 17px;
    border: 2px solid currentColor;
    border-left-color: transparent;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
    vertical-align: -4px;
    animation: attSpin .7s linear infinite;
}

@keyframes attSpin {
    to {
        transform: rotate(360deg);
    }
}

.att-role-note {
    padding: 10px 12px;
    border-radius: var(--ins-border-radius);
    background: var(--ins-info-bg-subtle);
    color: var(--ins-info-text-emphasis);
}

@media (max-width: 1199.98px) {
    .att-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .att-person-grid {
        grid-template-columns: 1fr;
    }

    .att-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .att-page-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .att-server-clock {
        width: 100%;
    }

    .att-stat-grid {
        grid-template-columns: 1fr;
    }

    .att-search-row {
        grid-template-columns: 1fr;
    }

    .att-profile-main {
        flex-direction: column;
    }

    .att-details-grid,
    .att-last-times,
    .att-action-row,
    .att-filter-grid {
        grid-template-columns: 1fr;
    }

    .att-demo-badge {
        width: 100%;
        margin-inline-start: 0;
    }

    .att-pagination {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ======================================================================
   Attendance module - LIGHT sidebar for INSPINIA RTL
   همه قوانین با attendance-shell محدود شده اند تا با صفحات دیگر تداخل نکنند.
   این بلوک را می توانید در انتهای app-rtl.min.css قرار دهید.
   ====================================================================== */

.attendance-shell {
    --attendance-brand: #1ab394;
    --attendance-brand-dark: #12866f;
    --attendance-brand-deep: #0e6f5d;
    --attendance-brand-soft: #e8f8f3;
    --attendance-sidebar-bg: #ffffff;
    --attendance-sidebar-panel: #f7faf9;
    --attendance-sidebar-hover: #effaf7;
    --attendance-sidebar-active: #e4f6f1;
    --attendance-sidebar-text: #34454f;
    --attendance-sidebar-muted: #7d8b93;
    --attendance-sidebar-border: #e3ebe8;
    --attendance-success: #1ab394;
    --attendance-warning: #f7b84b;
    --attendance-danger: #f06548;
    --attendance-info: #5b8def;
    --attendance-text: #27364b;
    --attendance-muted: #718096;
    --attendance-border: #e8ebf1;
    --attendance-surface: #ffffff;
    --attendance-radius: 12px;
}

/* سایدبار لایت؛ حتی اگر تنظیم عمومی قالب Dark باشد، این صفحه لایت می ماند. */
.attendance-shell .attendance-sidenav,
[data-bs-theme="dark"] .attendance-shell .attendance-sidenav {
    color-scheme: light;
    background: var(--attendance-sidebar-bg) !important;
    border-left: 1px solid var(--attendance-sidebar-border) !important;
    box-shadow: -8px 0 26px rgba(42, 65, 75, .08) !important;
}

.attendance-shell .attendance-sidenav .logo,
[data-bs-theme="dark"] .attendance-shell .attendance-sidenav .logo {
    min-height: var(--ins-topbar-height);
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--attendance-sidebar-border);
    background: #ffffff !important;
}

.attendance-shell .attendance-sidenav .logo img {
    max-width: 142px;
    max-height: 42px;
    object-fit: contain;
}

.attendance-shell .attendance-sidenav .scrollbar {
    padding-top: 8px;
    background: #ffffff;
}

.attendance-shell .attendance-sidenav .sidenav-user,
[data-bs-theme="dark"] .attendance-shell .attendance-sidenav .sidenav-user {
    margin: 4px 10px 10px;
    padding: 11px 12px;
    border: 1px solid var(--attendance-sidebar-border);
    border-radius: 12px;
    background: var(--attendance-sidebar-panel) !important;
    background-image: none !important;
    box-shadow: none;
}

.attendance-shell .attendance-sidenav .sidenav-user-name,
.attendance-shell .attendance-sidenav .sidenav-user .link-reset,
.attendance-shell .attendance-sidenav .sidenav-user .fs-12 {
    color: var(--attendance-sidebar-text) !important;
}

.attendance-shell .attendance-sidenav .sidenav-user .fs-12 {
    color: var(--attendance-sidebar-muted) !important;
}

.attendance-shell .attendance-sidenav .sidenav-user-set-icon {
    color: var(--attendance-sidebar-muted) !important;
}

.attendance-shell .attendance-sidenav .side-nav {
    gap: 2px;
    margin: 0;
    padding: 4px 8px 56px;
    background: #ffffff !important;
}

.attendance-shell .attendance-sidenav .side-nav>.side-nav-item {
    padding: 0;
}

.attendance-shell .attendance-sidenav .side-nav-title {
    padding: 12px 12px 7px;
    color: #98a4aa !important;
    font-size: .67rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.attendance-shell .attendance-sidenav .side-nav-link {
    min-height: 42px;
    gap: 9px;
    padding: 7px 8px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--attendance-sidebar-text) !important;
    background: transparent;
    font-weight: 500;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.attendance-shell .attendance-sidenav .side-nav-link .menu-text,
.attendance-shell .attendance-sidenav .side-nav-link .menu-icon i,
.attendance-shell .attendance-sidenav .side-nav-link .menu-arrow {
    color: inherit !important;
}

.attendance-shell .attendance-sidenav .side-nav-link .menu-icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    border-radius: 9px;
    color: #168a73 !important;
    background: #eef7f4 !important;
    transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.attendance-shell .attendance-sidenav .side-nav-link .menu-icon i {
    font-size: 1.08rem;
}

.attendance-shell .attendance-sidenav .side-nav-link:hover,
.attendance-shell .attendance-sidenav .side-nav-link:focus-visible {
    color: #0d725f !important;
    border-color: #d8eee8;
    background: var(--attendance-sidebar-hover) !important;
}

.attendance-shell .attendance-sidenav .side-nav-link:hover .menu-icon,
.attendance-shell .attendance-sidenav .side-nav-link:focus-visible .menu-icon {
    color: #ffffff !important;
    background: var(--attendance-brand) !important;
    transform: translateY(-1px);
}

.attendance-shell .attendance-sidenav .side-nav-link:focus-visible,
.attendance-shell .attendance-sidenav .button-on-hover:focus-visible,
.attendance-shell .attendance-sidenav .button-close-offcanvas:focus-visible {
    outline: 2px solid rgba(26, 179, 148, .38);
    outline-offset: 2px;
}

.attendance-shell .attendance-sidenav .side-nav>.side-nav-item>.side-nav-link.active,
.attendance-shell .attendance-sidenav .side-nav>.side-nav-item.active>.side-nav-link,
.attendance-shell .attendance-sidenav .attendance-main-nav>.side-nav-link.active {
    color: #0b715e !important;
    border-color: #cce9e1;
    background: var(--attendance-sidebar-active) !important;
    box-shadow: inset -3px 0 0 var(--attendance-brand);
}

.attendance-shell .attendance-sidenav .side-nav>.side-nav-item>.side-nav-link.active .menu-icon,
.attendance-shell .attendance-sidenav .side-nav>.side-nav-item.active>.side-nav-link .menu-icon,
.attendance-shell .attendance-sidenav .attendance-main-nav>.side-nav-link.active .menu-icon {
    color: #ffffff !important;
    background: var(--attendance-brand) !important;
    box-shadow: 0 6px 14px rgba(26, 179, 148, .18);
}

.attendance-shell .attendance-sidenav .side-nav-link .badge {
    min-width: 22px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: auto;
    padding: 0 6px;
    border-radius: 999px;
    font-size: .68rem;
    font-variant-numeric: tabular-nums;
}

.attendance-shell .attendance-sidenav .menu-arrow {
    margin-right: 2px;
    opacity: .65;
}

.attendance-shell .attendance-sidenav .sub-menu {
    position: relative;
    gap: 1px;
    margin: 4px 27px 6px 0;
    padding: 2px 12px 2px 0;
    border-right: 1px solid #dbe8e4;
}

.attendance-shell .attendance-sidenav .sub-menu .side-nav-item .side-nav-link {
    min-height: 34px;
    padding: 6px 10px;
    border-radius: 8px;
    color: var(--attendance-sidebar-muted) !important;
    font-size: .79rem;
    font-weight: 500;
}

.attendance-shell .attendance-sidenav .sub-menu .side-nav-item .side-nav-link::before {
    content: "";
    width: 5px;
    height: 5px;
    flex: 0 0 5px;
    border-radius: 50%;
    background: #b9c7c3;
    transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.attendance-shell .attendance-sidenav .sub-menu .side-nav-item .side-nav-link:hover,
.attendance-shell .attendance-sidenav .sub-menu .side-nav-item .side-nav-link:focus-visible {
    color: #0d725f !important;
    border-color: transparent;
    background: #f1faf7 !important;
}

.attendance-shell .attendance-sidenav .sub-menu .side-nav-item .side-nav-link.active {
    color: #08725d !important;
    font-weight: 700;
    background: #e8f7f3 !important;
}

.attendance-shell .attendance-sidenav .sub-menu .side-nav-item .side-nav-link.active::before {
    background: var(--attendance-brand);
    box-shadow: 0 0 0 4px rgba(26, 179, 148, .11);
    transform: scale(1.05);
}

.attendance-shell .attendance-sidenav .button-on-hover,
.attendance-shell .attendance-sidenav .button-close-offcanvas {
    color: #40515a !important;
    background: #ffffff !important;
}

.attendance-shell .attendance-sidenav .simplebar-scrollbar::before {
    background: #b9c8c3 !important;
}

.attendance-shell .attendance-sidenav .dropdown-menu {
    color-scheme: light;
    color: #34454f;
    background: #ffffff;
    border-color: var(--attendance-sidebar-border);
}

/* حالت جمع شده و on-hover قالب حفظ می شود. */
html[data-sidenav-size="condensed"] .attendance-shell .attendance-sidenav .side-nav-link,
html[data-sidenav-size="on-hover"] .attendance-shell .attendance-sidenav:not(:hover) .side-nav-link {
    justify-content: center;
}

html[data-sidenav-size="condensed"] .attendance-shell .attendance-sidenav .side-nav-link .menu-icon,
html[data-sidenav-size="on-hover"] .attendance-shell .attendance-sidenav:not(:hover) .side-nav-link .menu-icon {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
}

html[data-sidenav-size="condensed"] .attendance-shell .attendance-sidenav .side-nav>.side-nav-item>.side-nav-link.active,
html[data-sidenav-size="on-hover"] .attendance-shell .attendance-sidenav:not(:hover) .side-nav>.side-nav-item>.side-nav-link.active {
    box-shadow: inset -2px 0 0 var(--attendance-brand);
}

/* ----------------------------------------------------------------------
   Attendance page components
   ---------------------------------------------------------------------- */
.attendance-shell .attendance-page {
    padding-bottom: 32px;
}

.attendance-shell .attendance-module-view {
    display: none;
    animation: attendanceFade .18s ease;
}

.attendance-shell .attendance-module-view.active {
    display: block;
}

@keyframes attendanceFade {
    from {
        opacity: .35;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.attendance-shell .attendance-page .card {
    border-color: var(--attendance-border);
}

.attendance-shell .attendance-filter-card,
.attendance-shell .attendance-panel,
.attendance-shell .attendance-stat-card {
    border-color: var(--attendance-border);
    box-shadow: 0 7px 22px rgba(39, 54, 75, .05);
}

.attendance-shell .attendance-hero {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(26, 179, 148, .18);
    background: linear-gradient(135deg, #ffffff 0%, #f5fbf9 58%, #eaf7f3 100%);
}

.attendance-shell .attendance-hero::after {
    content: "";
    position: absolute;
    inset-inline-end: -70px;
    top: -90px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: rgba(26, 179, 148, .08);
}

.attendance-shell .attendance-hero .card-body {
    position: relative;
    z-index: 1;
}

.attendance-shell .attendance-hero-icon,
.attendance-shell .attendance-page .module-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--attendance-brand-dark);
    background: rgba(26, 179, 148, .12);
}

.attendance-shell .attendance-hero-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    color: #ffffff;
    background: var(--attendance-brand);
    box-shadow: 0 10px 24px rgba(26, 179, 148, .22);
}

.attendance-shell .attendance-page .module-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
}

.attendance-shell .attendance-live-dot,
.attendance-shell .attendance-page .status-dot {
    width: 9px;
    height: 9px;
    display: inline-block;
    border-radius: 50%;
    background: var(--attendance-success);
    box-shadow: 0 0 0 5px rgba(26, 179, 148, .13);
}

.attendance-shell .attendance-stat-card,
.attendance-shell .attendance-page .metric-card {
    transition: transform .2s ease, box-shadow .2s ease;
}

.attendance-shell .attendance-stat-card:hover,
.attendance-shell .attendance-page .metric-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(39, 54, 75, .09);
}

.attendance-shell .attendance-stat-icon {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-size: 22px;
}

.attendance-shell .attendance-stat-number {
    color: var(--attendance-text);
    font-size: 28px;
    line-height: 1;
}

.attendance-shell .attendance-stat-caption,
.attendance-shell .attendance-page .metric-label,
.attendance-shell .attendance-page .module-subtitle,
.attendance-shell .attendance-page .form-section-help {
    color: var(--attendance-muted);
}

.attendance-shell .attendance-page .metric-card {
    min-height: 112px;
}

.attendance-shell .attendance-page .metric-value {
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.2;
}

.attendance-shell .attendance-page .module-title {
    color: #263238;
    font-weight: 800;
}

.attendance-shell .attendance-page .module-subtitle {
    font-size: .88rem;
}

.attendance-shell .attendance-page .soft-panel {
    border: 1px solid rgba(26, 179, 148, .18);
    background: linear-gradient(135deg, rgba(26, 179, 148, .08), rgba(26, 179, 148, .025));
}

.attendance-shell .attendance-soft-primary {
    background: rgba(26, 179, 148, .10);
    color: var(--attendance-brand-dark);
}

.attendance-shell .attendance-soft-success {
    background: rgba(26, 179, 148, .12);
    color: #11876f;
}

.attendance-shell .attendance-soft-warning {
    background: rgba(247, 184, 75, .16);
    color: #b97608;
}

.attendance-shell .attendance-soft-danger {
    background: rgba(240, 101, 72, .13);
    color: #c9472b;
}

.attendance-shell .attendance-soft-info {
    background: rgba(91, 141, 239, .13);
    color: #386bc8;
}

.attendance-shell .attendance-soft-secondary {
    background: rgba(113, 128, 150, .12);
    color: #596579;
}

.attendance-shell .attendance-section-title {
    color: var(--attendance-text);
    font-size: 16px;
    font-weight: 700;
}

.attendance-shell .attendance-chart,
.attendance-shell .attendance-page .attendance-chart {
    min-height: 320px;
}

.attendance-shell .attendance-presence-list {
    max-height: 320px;
    overflow: auto;
}

.attendance-shell .attendance-presence-item {
    padding: 12px 0;
    border-bottom: 1px dashed var(--attendance-border);
}

.attendance-shell .attendance-presence-item:last-child {
    border-bottom: 0;
}

.attendance-shell .attendance-avatar,
.attendance-shell .attendance-page .person-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 50%;
    color: var(--attendance-brand-dark);
    background: var(--attendance-brand-soft);
    font-weight: 800;
}

.attendance-shell .attendance-avatar {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
}

.attendance-shell .attendance-page .person-avatar {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
}

.attendance-shell .attendance-status,
.attendance-shell .attendance-page .attendance-status {
    min-width: 76px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 700;
    white-space: nowrap;
}

.attendance-shell .attendance-status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.attendance-shell .attendance-status.present {
    color: #11876f;
    background: rgba(26, 179, 148, .12);
}

.attendance-shell .attendance-status.late {
    color: #ae7107;
    background: rgba(247, 184, 75, .16);
}

.attendance-shell .attendance-status.absent {
    color: #c9472b;
    background: rgba(240, 101, 72, .13);
}

.attendance-shell .attendance-status.leave {
    color: #386bc8;
    background: rgba(91, 141, 239, .13);
}

.attendance-shell .attendance-status.mission {
    color: #6d4ac7;
    background: rgba(125, 92, 205, .13);
}

.attendance-shell .attendance-method {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #596579;
    font-size: 12px;
}

.attendance-shell .attendance-table thead th,
.attendance-shell .attendance-table tbody td,
.attendance-shell .attendance-page .table thead th {
    vertical-align: middle;
    white-space: nowrap;
}

.attendance-shell .attendance-tabs .nav-link {
    padding: 14px 16px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: #6c7585;
    font-weight: 600;
}

.attendance-shell .attendance-tabs .nav-link.active {
    color: var(--attendance-brand-dark);
    border-bottom-color: var(--attendance-brand);
    background: transparent;
}

.attendance-shell .attendance-shift-card,
.attendance-shell .attendance-page .shift-day,
.attendance-shell .attendance-page .request-type-card,
.attendance-shell .attendance-page .rule-card,
.attendance-shell .attendance-page .device-card {
    height: 100%;
    padding: 16px;
    border: 1px solid var(--attendance-border);
    border-radius: 14px;
    background: var(--attendance-surface);
}

.attendance-shell .attendance-shift-time {
    color: var(--attendance-brand-dark);
    font-size: 20px;
    font-weight: 800;
}

.attendance-shell .attendance-progress {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: #edf0f4;
}

.attendance-shell .attendance-progress>span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--attendance-brand);
}

.attendance-shell .attendance-map-card {
    min-height: 148px;
    border: 1px dashed rgba(26, 179, 148, .35);
    background: linear-gradient(135deg, #ffffff, #f3fbf8);
}

.attendance-shell .attendance-empty,
.attendance-shell .attendance-page .empty-state {
    padding: 32px 12px;
    text-align: center;
    color: var(--attendance-muted);
}

.attendance-shell .attendance-mobile-actions {
    display: none;
}

.attendance-shell .attendance-toolbar .form-control,
.attendance-shell .attendance-toolbar .form-select {
    min-height: 42px;
}

.attendance-shell .attendance-clock,
.attendance-shell .attendance-page .ltr-value {
    font-variant-numeric: tabular-nums;
}

.attendance-shell .attendance-quick-btn {
    min-height: 42px;
}

.attendance-shell .attendance-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.attendance-shell .attendance-detail-item {
    padding: 12px;
    border: 1px solid var(--attendance-border);
    border-radius: 12px;
    background: #fbfcfd;
}

.attendance-shell .attendance-detail-item small {
    display: block;
    margin-bottom: 5px;
    color: var(--attendance-muted);
}

.attendance-shell .attendance-page .punch-panel {
    position: relative;
    overflow: hidden;
    color: #ffffff;
    background: linear-gradient(135deg, var(--attendance-brand-deep), var(--attendance-brand));
}

.attendance-shell .attendance-page .punch-panel::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    inset-inline-end: -80px;
    top: -110px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
}

.attendance-shell .attendance-page .punch-clock {
    direction: ltr;
    text-align: right;
    font-size: 2.2rem;
    font-weight: 900;
    letter-spacing: 1px;
}

.attendance-shell .attendance-page .punch-btn {
    min-width: 135px;
    height: 44px;
}

.attendance-shell .attendance-page .detail-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px dashed #e7e9ec;
}

.attendance-shell .attendance-page .detail-row:last-child {
    border-bottom: 0;
}

.attendance-shell .attendance-page .timeline-mini {
    position: relative;
    padding-inline-start: 24px;
}

.attendance-shell .attendance-page .timeline-mini::before {
    content: "";
    position: absolute;
    inset-inline-start: 7px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: #e8ebef;
}

.attendance-shell .attendance-page .timeline-item {
    position: relative;
    padding-bottom: 16px;
}

.attendance-shell .attendance-page .timeline-item::before {
    content: "";
    position: absolute;
    inset-inline-start: -21px;
    top: 5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--attendance-brand);
    box-shadow: 0 0 0 4px var(--attendance-brand-soft);
}

.attendance-shell .attendance-page .shift-day {
    min-width: 150px;
    padding: 14px;
    border-radius: 12px;
}

.attendance-shell .attendance-page .shift-day.today {
    border-color: var(--attendance-brand);
    box-shadow: 0 0 0 3px rgba(26, 179, 148, .08);
}

.attendance-shell .attendance-page .shift-day.off {
    color: #8b939d;
    background: #f8f9fa;
}

.attendance-shell .attendance-page .request-type-card {
    position: relative;
    cursor: pointer;
    padding: 14px;
    border-radius: 12px;
    transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}

.attendance-shell .attendance-page .request-type-card:hover,
.attendance-shell .attendance-page .request-type-card.active {
    border-color: var(--attendance-brand);
    background: #f3fcf9;
    transform: translateY(-1px);
}

.attendance-shell .attendance-page .request-type-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.attendance-shell .attendance-page .request-type-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: var(--attendance-brand-dark);
    background: #eef8f5;
}

.attendance-shell .attendance-page .rule-card,
.attendance-shell .attendance-page .device-card {
    border-radius: 12px;
}

.attendance-shell .attendance-page .sticky-action {
    position: sticky;
    bottom: 12px;
    z-index: 5;
}

.attendance-shell .attendance-page .form-section-title {
    margin-bottom: 4px;
    font-size: .95rem;
    font-weight: 800;
}

.attendance-shell .attendance-page .form-section-help {
    font-size: .8rem;
}

.attendance-shell .attendance-page .ltr-value {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
}

.attendance-shell #attendanceToastContainer {
    position: fixed;
    inset-inline-start: 20px;
    bottom: 20px;
    z-index: 1090;
}

/* Responsive */
@media (max-width: 991.98px) {
    .attendance-shell .attendance-hero-actions {
        margin-top: 18px;
    }

    .attendance-shell .attendance-chart {
        min-height: 280px;
    }
}

@media (max-width: 767.98px) {
    .attendance-shell .attendance-page {
        padding-top: 8px;
    }

    .attendance-shell .attendance-stat-number {
        font-size: 24px;
    }

    .attendance-shell .attendance-filter-actions .btn {
        flex: 1 1 auto;
    }

    .attendance-shell .attendance-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .attendance-shell .attendance-tabs .nav-link {
        white-space: nowrap;
    }

    .attendance-shell .attendance-detail-grid {
        grid-template-columns: 1fr;
    }

    .attendance-shell .attendance-mobile-actions {
        display: flex;
    }

    .attendance-shell .attendance-page .punch-clock {
        text-align: center;
        font-size: 1.75rem;
    }

    .attendance-shell .attendance-page .punch-actions {
        justify-content: center;
    }

    .attendance-shell .attendance-page .shift-days-wrap {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        padding-bottom: 6px;
    }

    .attendance-shell .attendance-page .page-title-head {
        align-items: flex-start !important;
    }
}

@media (prefers-reduced-motion: reduce) {

    .attendance-shell .attendance-module-view,
    .attendance-shell .attendance-sidenav .side-nav-link,
    .attendance-shell .attendance-stat-card,
    .attendance-shell .attendance-page .metric-card,
    .attendance-shell .attendance-page .request-type-card {
        animation: none;
        transition: none;
    }
}

/* ======================================================================
   Attendance module - clean section layout v2
   Scoped to .attendance-shell to avoid cross-page conflicts.
   ====================================================================== */
.attendance-shell .attendance-topbar-menu {
    gap: 8px;
}

.attendance-shell .attendance-page {
    padding-bottom: 28px;
}

.attendance-shell .attendance-page>.container-fluid {
    max-width: 1680px;
}

.attendance-shell .attendance-page-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid var(--ins-border-color);
    border-radius: 14px;
    background: var(--ins-secondary-bg);
    box-shadow: 0 4px 16px rgba(49, 58, 70, .045);
}

.attendance-shell .attendance-page-heading__main,
.attendance-shell .attendance-page-heading__actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.attendance-shell .attendance-page-heading__main {
    min-width: 0;
}

.attendance-shell .attendance-page-heading__actions {
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.attendance-shell .attendance-page-heading .module-title {
    font-size: 1.05rem;
}

.attendance-shell .attendance-module-view {
    display: none;
    min-width: 0;
}

.attendance-shell .attendance-module-view.active {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.attendance-shell .attendance-section-stack>*,
.attendance-shell .attendance-section-stack>form>* {
    min-width: 0;
}

.attendance-shell .attendance-section-stack>.card,
.attendance-shell .attendance-section-stack>.row,
.attendance-shell .attendance-section-stack>form>.card,
.attendance-shell .attendance-section-stack>form>.row {
    margin-bottom: 0 !important;
}

.attendance-shell .attendance-section-stack>form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.attendance-shell .attendance-surface,
.attendance-shell .attendance-section-stack>.card,
.attendance-shell .attendance-section-stack>form>.card {
    border: 1px solid var(--ins-border-color);
    border-radius: 14px;
    background: var(--ins-secondary-bg);
    box-shadow: 0 4px 18px rgba(49, 58, 70, .045);
    overflow: visible;
}

.attendance-shell .attendance-card-header {
    min-height: 66px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--ins-border-color);
    background: transparent;
}

.attendance-shell .attendance-card-header h2 {
    color: var(--ins-heading-color);
}

.attendance-shell .attendance-worklog-overview {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(290px, 1fr);
    gap: 16px;
    align-items: stretch;
}

.attendance-shell .attendance-worklog-overview>* {
    min-width: 0;
}

.attendance-shell .attendance-punch-card {
    background:
        radial-gradient(circle at 8% 15%, rgba(26, 179, 148, .13), transparent 36%),
        var(--ins-secondary-bg);
}

.attendance-shell .attendance-punch-card .card-body {
    display: flex;
    align-items: center;
    padding: 22px;
}

.attendance-shell .attendance-punch-layout {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.attendance-shell .attendance-punch-copy {
    min-width: 0;
}

.attendance-shell .attendance-current-state,
.attendance-shell .attendance-punch-actions,
.attendance-shell .attendance-table-note,
.attendance-shell .attendance-table-footer__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.attendance-shell .attendance-current-state {
    color: var(--attendance-brand-dark);
}

.attendance-shell .attendance-punch-control {
    flex: 0 0 auto;
    text-align: end;
}

.attendance-shell .attendance-punch-actions {
    justify-content: flex-end;
    flex-wrap: wrap;
}

.attendance-shell .attendance-punch-actions .btn {
    min-width: 116px;
}

.attendance-shell .attendance-page .punch-clock {
    font-size: clamp(2rem, 4vw, 3.1rem);
    line-height: 1;
    letter-spacing: .02em;
}

.attendance-shell .attendance-summary-card .card-body {
    padding: 8px 16px 14px;
}

.attendance-shell .attendance-summary-list {
    display: flex;
    flex-direction: column;
}

.attendance-shell .attendance-summary-item {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-block: 9px;
    border-bottom: 1px dashed var(--ins-border-color);
}

.attendance-shell .attendance-summary-item:last-child {
    border-bottom: 0;
}

.attendance-shell .attendance-summary-item dt {
    color: var(--ins-secondary-color);
    font-weight: 500;
}

.attendance-shell .attendance-summary-item dd {
    margin: 0;
    color: var(--ins-heading-color);
    font-weight: 700;
}

.attendance-shell .attendance-filter-card .card-body {
    padding: 16px;
}

.attendance-shell .attendance-filter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    align-items: end;
}

.attendance-shell .attendance-field {
    min-width: 0;
}

.attendance-shell .attendance-field .form-label {
    margin-bottom: 7px;
    font-size: .82rem;
    font-weight: 600;
}

.attendance-shell .attendance-data-card {
    overflow: hidden;
}

.attendance-shell .attendance-table-heading {
    flex-wrap: wrap;
}

.attendance-shell .attendance-add-button {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    white-space: nowrap;
}

.attendance-shell .attendance-table-scroll {
    max-height: 62dvh;
    overflow: auto;
    background: var(--ins-secondary-bg);
}

.attendance-shell .attendance-worklog-table {
    min-width: 1000px;
}

.attendance-shell .attendance-worklog-table thead {
    position: sticky;
    top: 0;
    z-index: 5;
}

.attendance-shell .attendance-worklog-table thead th {
    padding: 13px 10px;
    border-bottom: 1px solid #cfe2dc;
    color: #35504a;
    background: #e8f5f2 !important;
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
    text-align: center;
}

.attendance-shell .attendance-worklog-table tbody td {
    padding: 12px 10px;
    vertical-align: middle;
    text-align: center;
    white-space: nowrap;
}

.attendance-shell .attendance-worklog-table tbody tr:nth-child(even)>* {
    background: rgba(26, 179, 148, .025);
}

.attendance-shell .attendance-worklog-table tbody tr:hover>* {
    background: rgba(26, 179, 148, .075) !important;
}

.attendance-shell .attendance-row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.attendance-shell .attendance-row-btn {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 8px;
}

.attendance-shell .attendance-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 16px;
    border-top: 1px solid var(--ins-border-color);
    background: rgba(26, 179, 148, .025);
}

.attendance-shell .attendance-table-note {
    min-width: 0;
    color: var(--ins-secondary-color);
    font-size: .8rem;
}

.attendance-shell .attendance-table-note i {
    flex: 0 0 auto;
    color: var(--attendance-brand);
}

.attendance-shell .attendance-table-footer__actions {
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.attendance-shell .attendance-select-compact {
    width: 180px;
}

.attendance-shell .attendance-select-chart {
    width: 145px;
}

/* Choices.js */
.attendance-shell .choices {
    width: 100%;
    margin-bottom: 0;
    overflow: visible;
}

.attendance-shell .choices__inner {
    min-height: 42px;
    display: flex;
    align-items: center;
    padding: .42rem .75rem !important;
    color: var(--ins-body-color);
    border: 1px solid var(--ins-border-color) !important;
    border-radius: var(--ins-border-radius) !important;
    background: var(--ins-secondary-bg) !important;
}

.attendance-shell .choices.is-focused .choices__inner,
.attendance-shell .choices.is-open .choices__inner {
    border-color: var(--attendance-brand) !important;
    box-shadow: 0 0 0 3px rgba(26, 179, 148, .1);
}

.attendance-shell .choices__list--single {
    width: 100%;
    padding: 0 0 0 20px !important;
    text-align: right;
}

.attendance-shell .choices[data-type*=select-one]::after {
    right: auto;
    left: 14px;
}

.attendance-shell .choices__list--dropdown,
.attendance-shell .choices__list[aria-expanded] {
    z-index: 1085 !important;
    color: var(--ins-body-color);
    border: 1px solid var(--ins-border-color) !important;
    border-radius: 9px !important;
    background: var(--ins-secondary-bg) !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .14);
}

.attendance-shell .choices__list--dropdown .choices__item--selectable.is-highlighted,
.attendance-shell .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    color: #08725d;
    background: #e8f7f3;
}

.attendance-shell .modal .choices__list--dropdown,
.attendance-shell .modal .choices__list[aria-expanded] {
    z-index: 1095 !important;
}

/* Clean modal treatment */
.attendance-shell .attendance-morelesson-modal .modal-content {
    max-height: calc(100dvh - 2rem);
    overflow: hidden;
    border: 1px solid var(--ins-border-color);
    border-radius: 14px;
    box-shadow: 0 20px 54px rgba(15, 23, 42, .18);
}

.attendance-shell .attendance-morelesson-modal .modal-header {
    border-bottom: 1px solid rgba(26, 179, 148, .18);
    background: rgba(26, 179, 148, .07);
}

.attendance-shell .attendance-morelesson-modal .modal-body {
    overflow-y: auto;
}

.attendance-shell .attendance-morelesson-modal .modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid var(--ins-border-color);
}

.attendance-shell .attendance-delete-icon {
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #d84343;
    background: rgba(216, 67, 67, .1);
    font-size: 28px;
}

@media (max-width: 1199.98px) {
    .attendance-shell .attendance-worklog-overview {
        grid-template-columns: 1fr;
    }

    .attendance-shell .attendance-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .attendance-shell .attendance-page-heading {
        align-items: flex-start;
        flex-direction: column;
        padding: 13px;
    }

    .attendance-shell .attendance-page-heading__actions,
    .attendance-shell .attendance-page-heading__actions .btn {
        width: 100%;
    }

    .attendance-shell .attendance-page-heading__actions .btn {
        flex: 1 1 140px;
    }

    .attendance-shell .attendance-punch-card .card-body {
        padding: 16px;
    }

    .attendance-shell .attendance-punch-layout {
        align-items: stretch;
        flex-direction: column;
        gap: 18px;
    }

    .attendance-shell .attendance-punch-control {
        text-align: start;
    }

    .attendance-shell .attendance-punch-actions {
        justify-content: flex-start;
    }

    .attendance-shell .attendance-punch-actions .btn {
        flex: 1 1 130px;
    }

    .attendance-shell .attendance-filter-grid {
        grid-template-columns: 1fr;
    }

    .attendance-shell .attendance-card-header,
    .attendance-shell .attendance-table-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .attendance-shell .attendance-card-header>.btn,
    .attendance-shell .attendance-table-footer__actions,
    .attendance-shell .attendance-table-footer__actions .btn {
        width: 100%;
    }

    .attendance-shell .attendance-table-footer__actions .btn {
        flex: 1 1 140px;
    }

    .attendance-shell .attendance-table-scroll {
        max-height: 58dvh;
    }

    .attendance-shell .attendance-select-compact,
    .attendance-shell .attendance-select-chart {
        width: 100%;
    }

    .attendance-shell .attendance-morelesson-modal .modal-content {
        max-height: 100dvh;
        border-radius: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .attendance-shell .attendance-module-view.active {
        animation: none !important;
    }
}

/* ======================================================================
   ATTENDANCE UX V3
   فایل به دو بخش واضح تقسیم شده است:
   1) SIDEBAR: منوی کناری بنفش
   2) FRONTEND: محتوای اصلی، کارت‌ها، فرم‌ها، جدول و مودال
   تمام قوانین فقط داخل attendance-shell اعمال می‌شوند.
   ====================================================================== */

.attendance-shell.attendance-ux-v3 {
    --attendance-ui-primary: #6d28d9;
    --attendance-ui-primary-strong: #5b21b6;
    --attendance-ui-primary-soft: #f1eafe;
    --attendance-ui-primary-faint: #faf7ff;
    --attendance-ui-ring: rgba(109, 40, 217, .18);
    --attendance-ui-border: #e8e3f1;
    --attendance-ui-text: #231f2d;
    --attendance-ui-muted: #746f7f;
    --attendance-ui-surface: #ffffff;
    --attendance-ui-canvas: #f6f5f9;
    --attendance-ui-shadow: 0 10px 30px rgba(46, 34, 66, .07);
    --attendance-ui-shadow-hover: 0 16px 38px rgba(46, 34, 66, .11);
    --attendance-sidebar-purple: #241043;
    --attendance-sidebar-purple-2: #32155d;
    --attendance-sidebar-purple-3: #45227a;
    --attendance-sidebar-accent: #a78bfa;
    --attendance-sidebar-text: #f7f3ff;
    --attendance-sidebar-muted: #c8b9e8;
    --attendance-sidebar-line: rgba(255, 255, 255, .1);
    background: var(--attendance-ui-canvas);
}

/* ========================= SIDEBAR START ============================== */
.attendance-shell.attendance-ux-v3 .attendance-sidenav,
[data-bs-theme="dark"] .attendance-shell.attendance-ux-v3 .attendance-sidenav {
    color-scheme: dark;
    overflow: hidden;
    color: var(--attendance-sidebar-text) !important;
    border-left: 1px solid rgba(167, 139, 250, .18) !important;
    background:
        radial-gradient(circle at 20% 0%, rgba(167, 139, 250, .22), transparent 30%),
        linear-gradient(180deg, var(--attendance-sidebar-purple-2) 0%, var(--attendance-sidebar-purple) 68%, #1c0c35 100%) !important;
    box-shadow: -12px 0 34px rgba(36, 16, 67, .22) !important;
}

.attendance-shell.attendance-ux-v3 .attendance-sidenav::after {
    content: "";
    position: absolute;
    inset: auto -90px -110px auto;
    width: 260px;
    height: 260px;
    pointer-events: none;
    border-radius: 50%;
    background: rgba(167, 139, 250, .08);
}

.attendance-shell.attendance-ux-v3 .attendance-sidenav .logo,
[data-bs-theme="dark"] .attendance-shell.attendance-ux-v3 .attendance-sidenav .logo {
    min-height: var(--ins-topbar-height);
    border-bottom: 1px solid var(--attendance-sidebar-line);
    background: rgba(20, 7, 42, .28) !important;
    backdrop-filter: blur(12px);
}

.attendance-shell.attendance-ux-v3 .attendance-sidenav .logo img {
    max-width: 138px;
    max-height: 40px;
    padding: 4px 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 8px 22px rgba(7, 2, 17, .18);
}

.attendance-shell.attendance-ux-v3 .attendance-sidenav .scrollbar,
.attendance-shell.attendance-ux-v3 .attendance-sidenav .side-nav {
    background: transparent !important;
}

.attendance-shell.attendance-ux-v3 .attendance-sidenav .scrollbar {
    padding-top: 10px;
}

.attendance-shell.attendance-ux-v3 .attendance-sidenav .sidenav-user,
[data-bs-theme="dark"] .attendance-shell.attendance-ux-v3 .attendance-sidenav .sidenav-user {
    margin: 4px 12px 10px;
    padding: 12px;
    border: 1px solid var(--attendance-sidebar-line);
    border-radius: 16px;
    color: var(--attendance-sidebar-text) !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .045)) !important;
    background-image: none !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 12px 24px rgba(12, 4, 25, .14);
}

.attendance-shell.attendance-ux-v3 .attendance-sidenav .sidenav-user img {
    border: 2px solid rgba(255, 255, 255, .85);
    box-shadow: 0 5px 14px rgba(10, 3, 24, .22);
}

.attendance-shell.attendance-ux-v3 .attendance-sidenav .sidenav-user-name,
.attendance-shell.attendance-ux-v3 .attendance-sidenav .sidenav-user .link-reset,
.attendance-shell.attendance-ux-v3 .attendance-sidenav .sidenav-user .fs-12 {
    color: var(--attendance-sidebar-text) !important;
}

.attendance-shell.attendance-ux-v3 .attendance-sidenav .sidenav-user .fs-12,
.attendance-shell.attendance-ux-v3 .attendance-sidenav .sidenav-user-set-icon {
    color: var(--attendance-sidebar-muted) !important;
}

.attendance-shell.attendance-ux-v3 .attendance-sidebar-module-card {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 10px;
    align-items: center;
    gap: 10px;
    margin: 0 12px 10px;
    padding: 10px;
    border: 1px solid rgba(167, 139, 250, .24);
    border-radius: 14px;
    background: rgba(167, 139, 250, .11);
}

.attendance-shell.attendance-ux-v3 .attendance-sidebar-module-card__icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #2b1251;
    background: linear-gradient(135deg, #ddd1ff, #a78bfa);
    font-size: 20px;
    box-shadow: 0 7px 18px rgba(7, 2, 17, .18);
}

.attendance-shell.attendance-ux-v3 .attendance-sidebar-module-card__copy {
    min-width: 0;
}

.attendance-shell.attendance-ux-v3 .attendance-sidebar-module-card__copy small,
.attendance-shell.attendance-ux-v3 .attendance-sidebar-module-card__copy strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attendance-shell.attendance-ux-v3 .attendance-sidebar-module-card__copy small {
    margin-bottom: 2px;
    color: var(--attendance-sidebar-muted);
    font-size: .66rem;
}

.attendance-shell.attendance-ux-v3 .attendance-sidebar-module-card__copy strong {
    color: #fff;
    font-size: .78rem;
}

.attendance-shell.attendance-ux-v3 .attendance-sidebar-module-card__status {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 4px rgba(74, 222, 128, .13);
}

.attendance-shell.attendance-ux-v3 .attendance-sidenav .side-nav {
    gap: 3px;
    padding: 2px 10px 64px;
}

.attendance-shell.attendance-ux-v3 .attendance-sidenav .side-nav-title {
    padding: 14px 11px 8px;
    color: #a993d1 !important;
    font-size: .66rem;
    font-weight: 700;
}

.attendance-shell.attendance-ux-v3 .attendance-sidenav .side-nav-link {
    min-height: 44px;
    gap: 10px;
    padding: 7px 9px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: var(--attendance-sidebar-muted) !important;
    background: transparent !important;
    font-weight: 500;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease;
}

.attendance-shell.attendance-ux-v3 .attendance-sidenav .side-nav-link .menu-text,
.attendance-shell.attendance-ux-v3 .attendance-sidenav .side-nav-link .menu-icon i,
.attendance-shell.attendance-ux-v3 .attendance-sidenav .side-nav-link .menu-arrow {
    color: inherit !important;
}

.attendance-shell.attendance-ux-v3 .attendance-sidenav .side-nav-link .menu-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    border-radius: 10px;
    color: #dacdff !important;
    background: rgba(255, 255, 255, .07) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
}

.attendance-shell.attendance-ux-v3 .attendance-sidenav .side-nav-link:hover,
.attendance-shell.attendance-ux-v3 .attendance-sidenav .side-nav-link:focus-visible {
    color: #ffffff !important;
    border-color: rgba(167, 139, 250, .18);
    background: rgba(255, 255, 255, .075) !important;
    transform: translateX(-2px);
}

.attendance-shell.attendance-ux-v3 .attendance-sidenav .side-nav-link:hover .menu-icon,
.attendance-shell.attendance-ux-v3 .attendance-sidenav .side-nav-link:focus-visible .menu-icon {
    color: #fff !important;
    background: rgba(167, 139, 250, .22) !important;
}

.attendance-shell.attendance-ux-v3 .attendance-sidenav .side-nav>.side-nav-item>.side-nav-link.active,
.attendance-shell.attendance-ux-v3 .attendance-sidenav .side-nav>.side-nav-item.active>.side-nav-link,
.attendance-shell.attendance-ux-v3 .attendance-sidenav .attendance-main-nav>.side-nav-link.active {
    color: #fff !important;

    background: linear-gradient(135deg, rgb(106 51 232 / 92%), #ffcb00) !important;
    box-shadow: 0 10px 24px rgba(10, 3, 24, .23), inset 0 1px 0 rgba(255, 255, 255, .15);
}

.attendance-shell.attendance-ux-v3 .attendance-sidenav .side-nav>.side-nav-item>.side-nav-link.active .menu-icon,
.attendance-shell.attendance-ux-v3 .attendance-sidenav .side-nav>.side-nav-item.active>.side-nav-link .menu-icon,
.attendance-shell.attendance-ux-v3 .attendance-sidenav .attendance-main-nav>.side-nav-link.active .menu-icon {
    color: #5420a5 !important;
    background: rgba(255, 255, 255, .9) !important;
    box-shadow: 0 7px 16px rgba(20, 7, 42, .18);
}

.attendance-shell.attendance-ux-v3 .attendance-sidenav .side-nav-link .badge {
    margin-right: auto;
    color: #2b1251 !important;
    background: #ede7ff !important;
    border: 1px solid rgba(255, 255, 255, .28);
}

.attendance-shell.attendance-ux-v3 .attendance-sidenav .sub-menu {
    margin: 5px 29px 7px 0;
    padding: 3px 12px 3px 0;
    border-right: 1px solid rgba(196, 181, 253, .22);
}

.attendance-shell.attendance-ux-v3 .attendance-sidenav .sub-menu .side-nav-item .side-nav-link {
    min-height: 35px;
    padding: 6px 10px;
    color: #bba9dc !important;
    font-size: .78rem;
}

.attendance-shell.attendance-ux-v3 .attendance-sidenav .sub-menu .side-nav-item .side-nav-link::before {
    background: #8067a8;
}

.attendance-shell.attendance-ux-v3 .attendance-sidenav .sub-menu .side-nav-item .side-nav-link:hover,
.attendance-shell.attendance-ux-v3 .attendance-sidenav .sub-menu .side-nav-item .side-nav-link:focus-visible {
    color: #fff !important;
    background: rgba(255, 255, 255, .065) !important;
}

.attendance-shell.attendance-ux-v3 .attendance-sidenav .sub-menu .side-nav-item .side-nav-link.active {
    color: #fff !important;
    background: rgba(167, 139, 250, .17) !important;
}

.attendance-shell.attendance-ux-v3 .attendance-sidenav .sub-menu .side-nav-item .side-nav-link.active::before {
    background: #c4b5fd;
    box-shadow: 0 0 0 4px rgba(196, 181, 253, .12);
}

.attendance-shell.attendance-ux-v3 .attendance-sidenav .button-on-hover,
.attendance-shell.attendance-ux-v3 .attendance-sidenav .button-close-offcanvas {
    color: #fff !important;
    background: rgba(255, 255, 255, .08) !important;
}

.attendance-shell.attendance-ux-v3 .attendance-sidenav .side-nav-link:focus-visible,
.attendance-shell.attendance-ux-v3 .attendance-sidenav .button-on-hover:focus-visible,
.attendance-shell.attendance-ux-v3 .attendance-sidenav .button-close-offcanvas:focus-visible {
    outline: 2px solid #c4b5fd;
    outline-offset: 2px;
}

.attendance-shell.attendance-ux-v3 .attendance-sidenav .simplebar-scrollbar::before {
    background: rgba(196, 181, 253, .46) !important;
}

.attendance-shell.attendance-ux-v3 .attendance-sidenav .dropdown-menu {
    color-scheme: light;
    color: #30283f;
    border: 1px solid #e6def2;
    background: #fff;
    box-shadow: 0 16px 34px rgba(25, 11, 48, .18);
}

html[data-sidenav-size="condensed"] .attendance-shell.attendance-ux-v3 .attendance-sidebar-module-card,
html[data-sidenav-size="on-hover"] .attendance-shell.attendance-ux-v3 .attendance-sidenav:not(:hover) .attendance-sidebar-module-card {
    display: none;
}

/* ========================== SIDEBAR END =============================== */

/* ========================= FRONTEND START ============================= */
.attendance-shell.attendance-ux-v3 .app-topbar {
    border-bottom: 1px solid rgba(109, 40, 217, .08);
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 3px 16px rgba(46, 34, 66, .045);
    backdrop-filter: blur(14px);
}

.attendance-shell.attendance-ux-v3 .attendance-topbar-menu {
    gap: 10px;
}

.attendance-shell.attendance-ux-v3 .attendance-topbar-dropdown {
    padding-block: 10px;
}

.attendance-shell.attendance-ux-v3 .attendance-widget-dropdown {
    height: 400px;
    overflow-y: auto;
}

.attendance-shell.attendance-ux-v3 .attendance-topbar-title-row {
    margin-bottom: 18px;
}

.attendance-shell.attendance-ux-v3 .sidenav-toggle-button,
.attendance-shell.attendance-ux-v3 .attendance-topbar-menu .btn-primary,
.attendance-shell.attendance-ux-v3 .attendance-page .btn-primary {
    border-color: var(--attendance-ui-primary) !important;
    background: linear-gradient(135deg, #7c3aed, var(--attendance-ui-primary)) !important;
    box-shadow: 0 7px 18px rgba(109, 40, 217, .18);
}

.attendance-shell.attendance-ux-v3 .attendance-page {
    padding-top: 70px;
    padding-bottom: 34px;
    background:
        radial-gradient(circle at 12% 6%, rgba(109, 40, 217, .055), transparent 20%),
        var(--attendance-ui-canvas);
}

.attendance-shell.attendance-ux-v3 .attendance-page>.container-fluid {
    max-width: 1680px;
    padding-inline: clamp(14px, 2vw, 28px);
}

.attendance-shell.attendance-ux-v3 .attendance-page-heading {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    overflow: hidden;
    margin-bottom: 12px;
    padding: 20px 22px;
    border: 1px solid rgba(109, 40, 217, .13);
    border-radius: 18px;
    background:
        radial-gradient(circle at 0% 0%, rgba(167, 139, 250, .18), transparent 34%),
        linear-gradient(135deg, #ffffff 0%, #fbf9ff 100%);
    box-shadow: var(--attendance-ui-shadow);
}

.attendance-shell.attendance-ux-v3 .attendance-page-heading::after {
    content: "";
    position: absolute;
    inset: -80px auto auto -60px;
    width: 180px;
    height: 180px;
    pointer-events: none;
    border-radius: 50%;
    background: rgba(109, 40, 217, .04);
}

.attendance-shell.attendance-ux-v3 .attendance-page-heading__main,
.attendance-shell.attendance-ux-v3 .attendance-page-heading__actions {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 11px;
}

.attendance-shell.attendance-ux-v3 .attendance-page-heading__main {
    min-width: 0;
}

.attendance-shell.attendance-ux-v3 .attendance-page-heading__actions {
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.attendance-shell.attendance-ux-v3 .attendance-page .module-icon {
    width: 54px;
    height: 54px;
    border: 1px solid rgba(109, 40, 217, .14);
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    box-shadow: 0 10px 23px rgba(109, 40, 217, .22);
}

.attendance-shell.attendance-ux-v3 .attendance-page-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 5px;
    color: var(--attendance-ui-primary);
    font-size: .72rem;
    font-weight: 700;
}

.attendance-shell.attendance-ux-v3 .attendance-page-heading .module-title {
    color: var(--attendance-ui-text);
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    font-weight: 850;
}

.attendance-shell.attendance-ux-v3 .attendance-page-heading .module-subtitle {
    color: var(--attendance-ui-muted);
    font-size: .86rem;
}

.attendance-shell.attendance-ux-v3 .attendance-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 7px 11px;
    border: 1px solid #d9eee6;
    border-radius: 10px;
    color: #17775e;
    background: #effaf6;
    font-size: .76rem;
    font-weight: 700;
}

.attendance-shell.attendance-ux-v3 .attendance-live-badge__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, .12);
}

.attendance-shell.attendance-ux-v3 .attendance-context-bar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.attendance-shell.attendance-ux-v3 .attendance-context-item {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    border: 1px solid var(--attendance-ui-border);
    border-radius: 13px;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 5px 18px rgba(46, 34, 66, .035);
}

.attendance-shell.attendance-ux-v3 .attendance-context-item--help {
    border-color: rgba(109, 40, 217, .14);
    background: var(--attendance-ui-primary-faint);
}

.attendance-shell.attendance-ux-v3 .attendance-context-icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    border-radius: 11px;
    color: var(--attendance-ui-primary);
    background: var(--attendance-ui-primary-soft);
    font-size: 17px;
}

.attendance-shell.attendance-ux-v3 .attendance-context-item small,
.attendance-shell.attendance-ux-v3 .attendance-context-item strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attendance-shell.attendance-ux-v3 .attendance-context-item small {
    margin-bottom: 2px;
    color: var(--attendance-ui-muted);
    font-size: .68rem;
}

.attendance-shell.attendance-ux-v3 .attendance-context-item strong {
    color: var(--attendance-ui-text);
    font-size: .79rem;
}

.attendance-shell.attendance-ux-v3 .attendance-module-view.active {
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: attendanceUxFade .24s ease both;
}

@keyframes attendanceUxFade {
    from {
        opacity: .35;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.attendance-shell.attendance-ux-v3 .attendance-section-stack>*,
.attendance-shell.attendance-ux-v3 .attendance-section-stack>form>* {
    min-width: 0;
}

.attendance-shell.attendance-ux-v3 .attendance-section-stack>.card,
.attendance-shell.attendance-ux-v3 .attendance-section-stack>.row,
.attendance-shell.attendance-ux-v3 .attendance-section-stack>form>.card,
.attendance-shell.attendance-ux-v3 .attendance-section-stack>form>.row {
    margin-bottom: 0 !important;
}

.attendance-shell.attendance-ux-v3 .attendance-section-stack>form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.attendance-shell.attendance-ux-v3 .attendance-surface,
.attendance-shell.attendance-ux-v3 .attendance-section-stack>.card,
.attendance-shell.attendance-ux-v3 .attendance-section-stack>form>.card {
    border: 1px solid var(--attendance-ui-border);
    border-radius: 16px;
    background: var(--attendance-ui-surface);
    box-shadow: var(--attendance-ui-shadow);
    overflow: visible;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.attendance-shell.attendance-ux-v3 .attendance-surface:hover {
    border-color: rgba(109, 40, 217, .16);
    box-shadow: var(--attendance-ui-shadow-hover);
}

.attendance-shell.attendance-ux-v3 .attendance-card-header {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 17px;
    border-bottom: 1px solid #eeeaf4;
    background: linear-gradient(180deg, #fff, #fdfcff);
}

.attendance-shell.attendance-ux-v3 .attendance-heading-group {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.attendance-shell.attendance-ux-v3 .attendance-step-number {
    min-width: 34px;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 5px 9px;
    border: 1px solid rgba(109, 40, 217, .1);
    border-radius: 10px;
    color: var(--attendance-ui-primary);
    background: var(--attendance-ui-primary-soft);
    font-size: .72rem;
    font-weight: 800;
}

.attendance-shell.attendance-ux-v3 .attendance-panel-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.attendance-shell.attendance-ux-v3 .attendance-panel-kicker>span {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    box-shadow: 0 7px 16px rgba(109, 40, 217, .18);
    font-weight: 800;
}

.attendance-shell.attendance-ux-v3 .attendance-panel-kicker strong,
.attendance-shell.attendance-ux-v3 .attendance-panel-kicker small {
    display: block;
}

.attendance-shell.attendance-ux-v3 .attendance-panel-kicker strong {
    margin-bottom: 2px;
    color: var(--attendance-ui-text);
    font-size: .86rem;
}

.attendance-shell.attendance-ux-v3 .attendance-panel-kicker small {
    color: var(--attendance-ui-muted);
    font-size: .72rem;
}

.attendance-shell.attendance-ux-v3 .attendance-worklog-overview {
    display: grid;
    grid-template-columns: minmax(0, 1.85fr) minmax(300px, .85fr);
    gap: 16px;
    align-items: stretch;
}

.attendance-shell.attendance-ux-v3 .attendance-punch-card {
    overflow: hidden;
    background:
        radial-gradient(circle at 8% 10%, rgba(109, 40, 217, .12), transparent 34%),
        linear-gradient(135deg, #ffffff, #fbf9ff);
}

.attendance-shell.attendance-ux-v3 .attendance-punch-card::before {
    content: "";
    display: block;
    height: 4px;
    background: linear-gradient(90deg, #8b5cf6, #6d28d9, #c4b5fd);
}

.attendance-shell.attendance-ux-v3 .attendance-punch-card .card-body {
    padding: 20px 22px 22px;
}

.attendance-shell.attendance-ux-v3 .attendance-punch-layout {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.attendance-shell.attendance-ux-v3 .attendance-current-state {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid #d9eee6;
    border-radius: 999px;
    color: #17775e;
    background: #effaf6;
    font-size: .76rem;
}

.attendance-shell.attendance-ux-v3 .attendance-page .punch-clock {
    color: #2c183e !important;
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: .035em;
    text-shadow: 0 8px 22px rgba(109, 40, 217, .09);
}

.attendance-shell.attendance-ux-v3 .attendance-punch-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 9px;
}

.attendance-shell.attendance-ux-v3 .attendance-punch-actions .btn {
    min-width: 124px;
    min-height: 44px;
    border-radius: 11px;
}

.attendance-shell.attendance-ux-v3 .attendance-summary-card {
    overflow: hidden;
}

.attendance-shell.attendance-ux-v3 .attendance-summary-card .card-body {
    padding: 8px 17px 14px;
}

.attendance-shell.attendance-ux-v3 .attendance-summary-item {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-block: 10px;
    border-bottom: 1px dashed #e9e4f0;
}

.attendance-shell.attendance-ux-v3 .attendance-summary-item dt {
    color: var(--attendance-ui-muted);
    font-weight: 500;
}

.attendance-shell.attendance-ux-v3 .attendance-summary-item dd {
    margin: 0;
    color: var(--attendance-ui-text);
    font-weight: 800;
}

.attendance-shell.attendance-ux-v3 .attendance-filter-card.is-interacting {
    border-color: rgba(109, 40, 217, .28);
    box-shadow: 0 0 0 4px rgba(109, 40, 217, .055), var(--attendance-ui-shadow-hover);
}

.attendance-shell.attendance-ux-v3 .attendance-filter-card .card-body {
    padding: 17px;
}

.attendance-shell.attendance-ux-v3 .attendance-filter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    align-items: end;
}

.attendance-shell.attendance-ux-v3 .attendance-field .form-label {
    margin-bottom: 7px;
    color: #514a5c;
    font-size: .79rem;
    font-weight: 700;
}

.attendance-shell.attendance-ux-v3 .form-control,
.attendance-shell.attendance-ux-v3 .form-select,
.attendance-shell.attendance-ux-v3 .input-group-text {
    border-color: #ddd7e7;
}

.attendance-shell.attendance-ux-v3 .form-control:focus,
.attendance-shell.attendance-ux-v3 .form-select:focus {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px var(--attendance-ui-ring);
}

.attendance-shell.attendance-ux-v3 .attendance-data-card {
    overflow: hidden;
}

.attendance-shell.attendance-ux-v3 .attendance-add-button {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding-inline: 14px;
    border: 1px solid rgba(109, 40, 217, .25);
    border-radius: 10px;
    color: var(--attendance-ui-primary);
    background: var(--attendance-ui-primary-soft);
}

.attendance-shell.attendance-ux-v3 .attendance-add-button:hover,
.attendance-shell.attendance-ux-v3 .attendance-add-button:focus-visible {
    color: #fff;
    border-color: var(--attendance-ui-primary);
    background: var(--attendance-ui-primary);
}

.attendance-shell.attendance-ux-v3 .attendance-table-scroll {
    max-height: 62dvh;
    overflow: auto;
    background: #fff;
    scrollbar-color: #c5b7da #f4f1f7;
    scrollbar-width: thin;
}

.attendance-shell.attendance-ux-v3 .attendance-worklog-table {
    min-width: 1000px;
}

.attendance-shell.attendance-ux-v3 .attendance-worklog-table thead {
    position: sticky;
    top: 0;
    z-index: 5;
}

.attendance-shell.attendance-ux-v3 .attendance-worklog-table thead th {
    padding: 13px 10px;
    border-bottom: 1px solid #ddd3ed;
    color: #514264;
    background: #f3eefb !important;
    font-size: .76rem;
    font-weight: 800;
    white-space: nowrap;
    text-align: center;
}

.attendance-shell.attendance-ux-v3 .attendance-worklog-table tbody td {
    padding: 12px 10px;
    border-color: #f0edf4;
    vertical-align: middle;
    text-align: center;
    white-space: nowrap;
}

.attendance-shell.attendance-ux-v3 .attendance-worklog-table tbody tr:nth-child(even)>* {
    background: #fcfbfe;
}

.attendance-shell.attendance-ux-v3 .attendance-worklog-table tbody tr:hover>* {
    background: #f7f3fd !important;
}

.attendance-shell.attendance-ux-v3 .attendance-row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    opacity: .82;
    transition: opacity .18s ease;
}

.attendance-shell.attendance-ux-v3 .attendance-worklog-table tbody tr:hover .attendance-row-actions,
.attendance-shell.attendance-ux-v3 .attendance-row-actions:focus-within {
    opacity: 1;
}

.attendance-shell.attendance-ux-v3 .attendance-row-btn {
    width: 35px;
    height: 35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 9px;
}

.attendance-shell.attendance-ux-v3 .attendance-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 17px;
    border-top: 1px solid #eeeaf4;
    background: #fdfcff;
}

.attendance-shell.attendance-ux-v3 .attendance-table-note,
.attendance-shell.attendance-ux-v3 .attendance-table-footer__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.attendance-shell.attendance-ux-v3 .attendance-table-note {
    min-width: 0;
    color: var(--attendance-ui-muted);
    font-size: .78rem;
}

.attendance-shell.attendance-ux-v3 .attendance-table-note i {
    color: var(--attendance-ui-primary);
}

.attendance-shell.attendance-ux-v3 .attendance-table-footer__actions {
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Choices.js */
.attendance-shell.attendance-ux-v3 .choices {
    width: 100%;
    margin-bottom: 0;
    overflow: visible;
}

.attendance-shell.attendance-ux-v3 .choices__inner {
    min-height: 42px;
    display: flex;
    align-items: center;
    padding: .42rem .75rem !important;
    color: var(--attendance-ui-text);
    border: 1px solid #ddd7e7 !important;
    border-radius: 10px !important;
    background: #fff !important;
}

.attendance-shell.attendance-ux-v3 .choices.is-focused .choices__inner,
.attendance-shell.attendance-ux-v3 .choices.is-open .choices__inner {
    border-color: #8b5cf6 !important;
    box-shadow: 0 0 0 3px var(--attendance-ui-ring);
}

.attendance-shell.attendance-ux-v3 .choices__list--single {
    width: 100%;
    padding: 0 0 0 20px !important;
    text-align: right;
}

.attendance-shell.attendance-ux-v3 .choices[data-type*=select-one]::after {
    right: auto;
    left: 14px;
}

.attendance-shell.attendance-ux-v3 .choices__list--dropdown,
.attendance-shell.attendance-ux-v3 .choices__list[aria-expanded] {
    z-index: 1085 !important;
    color: var(--attendance-ui-text);
    border: 1px solid #ddd7e7 !important;
    border-radius: 11px !important;
    background: #fff !important;
    box-shadow: 0 16px 38px rgba(46, 34, 66, .15);
}

.attendance-shell.attendance-ux-v3 .choices__list--dropdown .choices__item--selectable.is-highlighted,
.attendance-shell.attendance-ux-v3 .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    color: var(--attendance-ui-primary-strong);
    background: var(--attendance-ui-primary-soft);
}

.attendance-shell.attendance-ux-v3 .modal .choices__list--dropdown,
.attendance-shell.attendance-ux-v3 .modal .choices__list[aria-expanded] {
    z-index: 1095 !important;
}

/* Modals */
.attendance-shell.attendance-ux-v3 .attendance-morelesson-modal .modal-content {
    max-height: calc(100dvh - 2rem);
    overflow: hidden;
    border: 1px solid #e4ddef;
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(36, 16, 67, .2);
}

.attendance-shell.attendance-ux-v3 .attendance-morelesson-modal .modal-header {
    border-bottom: 1px solid #e8e1f2;
    background: linear-gradient(135deg, #fbf9ff, #f4edff);
}

.attendance-shell.attendance-ux-v3 .attendance-morelesson-modal .modal-title {
    color: #342143;
    font-weight: 800;
}

.attendance-shell.attendance-ux-v3 .attendance-morelesson-modal .modal-body {
    overflow-y: auto;
}

.attendance-shell.attendance-ux-v3 .attendance-morelesson-modal .modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid #eeeaf4;
    background: #fdfcff;
}

/* Shared focus ring */
.attendance-shell.attendance-ux-v3 button:focus-visible,
.attendance-shell.attendance-ux-v3 a:focus-visible,
.attendance-shell.attendance-ux-v3 [tabindex]:focus-visible {
    outline: 2px solid rgba(109, 40, 217, .52);
    outline-offset: 2px;
}

@media (max-width: 1199.98px) {
    .attendance-shell.attendance-ux-v3 .attendance-context-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .attendance-shell.attendance-ux-v3 .attendance-worklog-overview {
        grid-template-columns: 1fr;
    }

    .attendance-shell.attendance-ux-v3 .attendance-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .attendance-shell.attendance-ux-v3 .attendance-page>.container-fluid {
        padding-inline: 12px;
    }

    .attendance-shell.attendance-ux-v3 .attendance-page-heading {
        align-items: stretch;
        flex-direction: column;
        padding: 16px;
        border-radius: 15px;
    }

    .attendance-shell.attendance-ux-v3 .attendance-page-heading__actions {
        width: 100%;
        justify-content: stretch;
    }

    .attendance-shell.attendance-ux-v3 .attendance-page-heading__actions .btn,
    .attendance-shell.attendance-ux-v3 .attendance-live-badge {
        flex: 1 1 140px;
        justify-content: center;
    }

    .attendance-shell.attendance-ux-v3 .attendance-context-bar,
    .attendance-shell.attendance-ux-v3 .attendance-filter-grid {
        grid-template-columns: 1fr;
    }

    .attendance-shell.attendance-ux-v3 .attendance-punch-card .card-body {
        padding: 16px;
    }

    .attendance-shell.attendance-ux-v3 .attendance-punch-layout {
        align-items: stretch;
        flex-direction: column;
        gap: 18px;
    }

    .attendance-shell.attendance-ux-v3 .attendance-punch-control {
        text-align: start;
    }

    .attendance-shell.attendance-ux-v3 .attendance-punch-actions {
        justify-content: stretch;
    }

    .attendance-shell.attendance-ux-v3 .attendance-punch-actions .btn {
        flex: 1 1 130px;
    }

    .attendance-shell.attendance-ux-v3 .attendance-card-header,
    .attendance-shell.attendance-ux-v3 .attendance-table-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .attendance-shell.attendance-ux-v3 .attendance-card-header>.btn,
    .attendance-shell.attendance-ux-v3 .attendance-table-footer__actions,
    .attendance-shell.attendance-ux-v3 .attendance-table-footer__actions .btn {
        width: 100%;
    }

    .attendance-shell.attendance-ux-v3 .attendance-table-footer__actions .btn {
        flex: 1 1 140px;
    }

    .attendance-shell.attendance-ux-v3 .attendance-table-scroll {
        max-height: 58dvh;
    }

    .attendance-shell.attendance-ux-v3 .attendance-morelesson-modal .modal-content {
        max-height: 100dvh;
        border-radius: 0;
    }
}

@media (prefers-reduced-motion: reduce) {

    .attendance-shell.attendance-ux-v3 .attendance-module-view.active,
    .attendance-shell.attendance-ux-v3 .attendance-sidenav .side-nav-link,
    .attendance-shell.attendance-ux-v3 .attendance-surface {
        animation: none !important;
        transition: none !important;
    }
}

/* ========================== FRONTEND END ============================== */

/* ======================================================================
   SIDEBAR THEME OVERRIDE START | Base color: #7e1975
   این بخش فقط سایدبار را تغییر می‌دهد و به فرانت اصلی صفحه دست نمی‌زند.
   کلاس فعال‌کننده در HTML:
   attendance-sidebar-theme-7e1975
   ====================================================================== */

.attendance-shell.attendance-ux-v3.attendance-sidebar-theme-7e1975 {
    --attendance-sidebar-purple: #7e1975;
    --attendance-sidebar-purple-2: #922487;
    --attendance-sidebar-purple-3: #68145f;
    --attendance-sidebar-deep: #4b0d45;
    --attendance-sidebar-accent: #efb2e9;
    --attendance-sidebar-accent-strong: #d978cf;
    --attendance-sidebar-soft: #f9dcf5;
    --attendance-sidebar-text: #fff8fe;
    --attendance-sidebar-muted: #ebcfe7;
    --attendance-sidebar-line: rgba(255, 255, 255, .14);
}

.attendance-shell.attendance-ux-v3.attendance-sidebar-theme-7e1975 .attendance-sidenav,
[data-bs-theme="dark"] .attendance-shell.attendance-ux-v3.attendance-sidebar-theme-7e1975 .attendance-sidenav {
    border-left-color: rgba(239, 178, 233, .22) !important;
    background:
        radial-gradient(circle at 18% 0%, rgba(255, 255, 255, .15), transparent 31%),
        radial-gradient(circle at 88% 32%, rgba(239, 178, 233, .12), transparent 24%),
        linear-gradient(180deg, var(--attendance-sidebar-purple-2) 0%, var(--attendance-sidebar-purple) 56%, var(--attendance-sidebar-deep) 100%) !important;
    box-shadow: -12px 0 34px rgba(78, 12, 71, .26) !important;
}

.attendance-shell.attendance-ux-v3.attendance-sidebar-theme-7e1975 .attendance-sidenav::after {
    background: rgba(239, 178, 233, .1);
}

.attendance-shell.attendance-ux-v3.attendance-sidebar-theme-7e1975 .attendance-sidenav .logo,
[data-bs-theme="dark"] .attendance-shell.attendance-ux-v3.attendance-sidebar-theme-7e1975 .attendance-sidenav .logo {
    background: rgba(75, 13, 69, .3) !important;
}

.attendance-shell.attendance-ux-v3.attendance-sidebar-theme-7e1975 .attendance-sidenav .sidenav-user,
[data-bs-theme="dark"] .attendance-shell.attendance-ux-v3.attendance-sidebar-theme-7e1975 .attendance-sidenav .sidenav-user {
    border-color: rgba(255, 255, 255, .16);
    background: linear-gradient(135deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .055)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 12px 24px rgba(60, 8, 55, .2);
}

.attendance-shell.attendance-ux-v3.attendance-sidebar-theme-7e1975 .attendance-sidebar-module-card {
    border-color: rgba(239, 178, 233, .3);
    background: rgba(239, 178, 233, .13);
}

.attendance-shell.attendance-ux-v3.attendance-sidebar-theme-7e1975 .attendance-sidebar-module-card__icon {
    color: #5d1256;
    background: linear-gradient(135deg, #fde8fa, #e79ade);
    box-shadow: 0 7px 18px rgba(63, 8, 57, .22);
}

.attendance-shell.attendance-ux-v3.attendance-sidebar-theme-7e1975 .attendance-sidenav .side-nav-title {
    color: #e6bee1 !important;
}

.attendance-shell.attendance-ux-v3.attendance-sidebar-theme-7e1975 .attendance-sidenav .side-nav-link .menu-icon {
    color: #f5d8f1 !important;
    background: rgba(255, 255, 255, .085) !important;
}

.attendance-shell.attendance-ux-v3.attendance-sidebar-theme-7e1975 .attendance-sidenav .side-nav-link:hover,
.attendance-shell.attendance-ux-v3.attendance-sidebar-theme-7e1975 .attendance-sidenav .side-nav-link:focus-visible {
    border-color: rgba(239, 178, 233, .24);
    background: rgba(255, 255, 255, .095) !important;
}

.attendance-shell.attendance-ux-v3.attendance-sidebar-theme-7e1975 .attendance-sidenav .side-nav-link:hover .menu-icon,
.attendance-shell.attendance-ux-v3.attendance-sidebar-theme-7e1975 .attendance-sidenav .side-nav-link:focus-visible .menu-icon {
    background: rgba(239, 178, 233, .22) !important;
}

.attendance-shell.attendance-ux-v3.attendance-sidebar-theme-7e1975 .attendance-sidenav .side-nav>.side-nav-item>.side-nav-link.active,
.attendance-shell.attendance-ux-v3.attendance-sidebar-theme-7e1975 .attendance-sidenav .side-nav>.side-nav-item.active>.side-nav-link,
.attendance-shell.attendance-ux-v3.attendance-sidebar-theme-7e1975 .attendance-sidenav .attendance-main-nav>.side-nav-link.active {
    border-color: rgba(255, 224, 251, .36);
    background: linear-gradient(135deg, #a82d9b 0%, #7e1975 58%, #68145f 100%) !important;
    box-shadow: 0 12px 26px rgba(56, 7, 51, .3), inset 0 1px 0 rgba(255, 255, 255, .18);
}

.attendance-shell.attendance-ux-v3.attendance-sidebar-theme-7e1975 .attendance-sidenav .side-nav>.side-nav-item>.side-nav-link.active .menu-icon,
.attendance-shell.attendance-ux-v3.attendance-sidebar-theme-7e1975 .attendance-sidenav .side-nav>.side-nav-item.active>.side-nav-link .menu-icon,
.attendance-shell.attendance-ux-v3.attendance-sidebar-theme-7e1975 .attendance-sidenav .attendance-main-nav>.side-nav-link.active .menu-icon {
    color: #7e1975 !important;
    background: #fff4fd !important;
    box-shadow: 0 7px 16px rgba(59, 7, 54, .2);
}

.attendance-shell.attendance-ux-v3.attendance-sidebar-theme-7e1975 .attendance-sidenav .side-nav-link .badge {
    color: #66145f !important;
    background: #fbe4f8 !important;
    border-color: rgba(255, 255, 255, .36);
}

.attendance-shell.attendance-ux-v3.attendance-sidebar-theme-7e1975 .attendance-sidenav .sub-menu {
    border-right-color: rgba(239, 178, 233, .28);
}

.attendance-shell.attendance-ux-v3.attendance-sidebar-theme-7e1975 .attendance-sidenav .sub-menu .side-nav-item .side-nav-link {
    color: #dfbfda !important;
}

.attendance-shell.attendance-ux-v3.attendance-sidebar-theme-7e1975 .attendance-sidenav .sub-menu .side-nav-item .side-nav-link::before {
    background: #c56cbb;
}

.attendance-shell.attendance-ux-v3.attendance-sidebar-theme-7e1975 .attendance-sidenav .sub-menu .side-nav-item .side-nav-link.active {
    background: rgba(239, 178, 233, .18) !important;
}

.attendance-shell.attendance-ux-v3.attendance-sidebar-theme-7e1975 .attendance-sidenav .sub-menu .side-nav-item .side-nav-link.active::before {
    background: #ffd7fa;
    box-shadow: 0 0 0 4px rgba(255, 215, 250, .14);
}

.attendance-shell.attendance-ux-v3.attendance-sidebar-theme-7e1975 .attendance-sidenav .side-nav-link:focus-visible,
.attendance-shell.attendance-ux-v3.attendance-sidebar-theme-7e1975 .attendance-sidenav .button-on-hover:focus-visible,
.attendance-shell.attendance-ux-v3.attendance-sidebar-theme-7e1975 .attendance-sidenav .button-close-offcanvas:focus-visible {
    outline-color: #ffd7fa;
}

.attendance-shell.attendance-ux-v3.attendance-sidebar-theme-7e1975 .attendance-sidenav .simplebar-scrollbar::before {
    background: rgba(247, 190, 240, .54) !important;
}

.attendance-shell.attendance-ux-v3.attendance-sidebar-theme-7e1975 .attendance-sidenav .dropdown-menu {
    border-color: #efd9ec;
    box-shadow: 0 16px 34px rgba(84, 16, 77, .2);
}

/* ================= SIDEBAR THEME OVERRIDE END ================= */

#advancedAccessAccordion,
#advancedAccessAccordion .accordion-item,
#advancedAccessCollapse,
#advancedAccessCollapse .accordion-body {
    overflow: visible !important;
}

#advancedAccessCollapse .choices.is-open {
    z-index: 9999;
}


/* safheasli */

:root {
    --modules-primary: #1686d9;
    --modules-primary-dark: #0f6fb8;
    --modules-bg: #e9f2f5;
    --modules-card: #ffffff;
    --modules-border: #dbe3e8;
    --modules-text: #4b5563;
    --modules-muted: #8a96a3;
    --modules-danger: #ef5b62;
}

.school-modules-page {
    min-height: calc(100vh - 120px);
    padding: 18px 16px 36px;
    background:
        radial-gradient(circle at 10% 10%, rgba(22, 134, 217, .08), transparent 24%), linear-gradient(180deg, #c6b3fc14 0%, var(--modules-bg) 100%)
}

.school-modules-shell {
    width: 100%;
    max-width: 1700px;
    margin: 0 auto;
}

.school-modules-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    direction: rtl;
}

.school-modules-search {
    position: relative;
    flex: 1 1 auto;
    max-width: 560px;
    margin: 0 auto;
}

.school-modules-search input {
    width: 100%;
    height: 42px;
    padding: 0 44px 0 16px;
    border: 1px solid #d7e1e6;
    border-radius: 7px;
    background: rgba(255, 255, 255, .96);
    color: #334155;
    box-shadow: 0 3px 12px rgba(30, 70, 90, .08);
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.school-modules-search input:focus {
    border-color: var(--modules-primary);
    box-shadow: 0 0 0 3px rgba(22, 134, 217, .14);
}

.school-modules-search i {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #547081;
    font-size: 18px;
    pointer-events: none;
}

.school-modules-toolbar-btn {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #c9d8df;
    border-radius: 7px;
    background: #fff;
    color: #536b79;
    box-shadow: 0 3px 10px rgba(30, 70, 90, .07);
    transition: .2s ease;
}

.school-modules-toolbar-btn:hover {
    color: #fff;
    border-color: var(--modules-primary);
    background: var(--modules-primary);
}

.school-modules-result {
    min-width: 118px;
    color: #60717c;
    font-size: 12px;
    text-align: left;
    white-space: nowrap;
}

.school-modules-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
    direction: ltr;
}

.school-modules-column {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    direction: rtl;
    border-radius: 8px;
}

.school-module-card {
    overflow: hidden;
    border: 1px solid rgba(205, 216, 222, .92);
    border-radius: 6px;
    background: var(--modules-card);
    box-shadow: 0 5px 13px rgba(41, 72, 88, .16);
    transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.school-module-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(41, 72, 88, .19);
}

.school-module-card.is-dragging {
    opacity: .42;
    transform: scale(.985);
}

.school-modules-column.is-drag-over {
    outline: 2px dashed rgba(22, 134, 217, .55);
    outline-offset: 4px;
    background: rgba(22, 134, 217, .04);
}

.school-module-card[hidden] {
    display: none !important;
}

.school-module-header {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    background: linear-gradient(180deg, #ffffff, #fbfcfd);
    border-bottom: 1px solid var(--modules-border);
}

.school-module-heading {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #3f4852;
    font-size: 13px;
    font-weight: 800;
}

.school-module-heading>i {
    color: #138cf0;
    font-size: 17px;
}

.school-module-heading span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.school-module-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    direction: ltr;
}

.school-module-icon-btn {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #606b74;
    cursor: pointer;
    transition: .18s ease;
}

.school-module-icon-btn:hover {
    background: #eef4f7;
    color: #1f2d38;
}

.school-module-icon-btn.module-close:hover {
    background: #fff0f1;
    color: var(--modules-danger);
}

.school-module-drag {
    cursor: grab;
}

.school-module-drag:active {
    cursor: grabbing;
}

.school-module-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.school-module-list li+li {
    border-top: 1px solid #e8edf0;
}

.school-module-link {
    min-height: 39px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    color: var(--modules-text);
    background: #fff;
    font-size: 13px;
    text-decoration: none;
    transition: color .18s ease, background .18s ease, padding .18s ease;
}

.school-module-link:hover,
.school-module-link:focus {
    color: var(--modules-primary-dark);
    background: #f3f9fd;
    padding-right: 16px;
}

.school-module-link .module-arrow {
    color: #85919a;
    font-size: 15px;
    transition: transform .18s ease, color .18s ease;
}

.school-module-link:hover .module-arrow {
    color: var(--modules-primary);
    transform: translateX(-2px);
}

.school-module-link.is-selected {
    color: #0d6fb6;
    background: #eaf6fe;
}

/* زیرمنوی داخلی هر گزینه ماژول */
.school-module-item.has-submenu>.school-module-link {
    cursor: pointer;
}

.school-module-item.has-submenu>.school-module-link .module-arrow {
    flex: 0 0 auto;
}

.school-module-item.has-submenu.is-open>.school-module-link {
    color: var(--modules-primary-dark);
    background: #eef8fe;
    font-weight: 700;
}

.school-module-submenu {
    display: none;
    margin: 0;
    padding: 6px 12px 9px;
    list-style: none;
    background: #f8fbfd;
    border-top: 1px solid #dce8ee;
    box-shadow: inset 0 5px 10px rgba(39, 75, 96, .035);
}

.school-module-item.has-submenu.is-open>.school-module-submenu {
    display: block;
    animation: schoolSubmenuOpen .18s ease-out;
}

.school-module-submenu li+li {
    border-top: 1px dashed #dce6eb;
}

.school-module-sublink {
    min-height: 34px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 6px;
    color: #52616b;
    font-size: 12px;
    text-decoration: none;
    border-radius: 6px;
    transition: color .18s ease, background .18s ease, padding .18s ease;
}

.school-module-sublink::before {
    content: '';
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: #8db9d4;
    box-shadow: 0 0 0 3px rgba(141, 185, 212, .16);
}

.school-module-sublink:hover,
.school-module-sublink:focus,
.school-module-sublink.is-selected {
    color: #0d6fb6;
    background: #e7f4fc;
    padding-right: 10px;
}

.school-module-sublink.is-selected::before {
    background: #0d6fb6;
}

@keyframes schoolSubmenuOpen {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.school-module-empty {
    display: none;
    padding: 54px 20px;
    border: 1px dashed #bdccd4;
    border-radius: 8px;
    color: #71808a;
    background: rgba(255, 255, 255, .72);
    text-align: center;
}

.school-module-empty i {
    display: block;
    margin-bottom: 10px;
    font-size: 34px;
    color: #9badb8;
}

.school-modules-toast {
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 1095;
    max-width: min(360px, calc(100vw - 32px));
    padding: 11px 15px;
    border-radius: 8px;
    background: #253744;
    color: #fff;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .2);
    font-size: 13px;
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: .22s ease;
}

.school-modules-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.school-modules-shell:fullscreen {
    overflow: auto;
    padding: 18px;
    background: var(--modules-bg);
}


/* Collapsible module cards */
.school-module-header {
    cursor: pointer;
    user-select: none;
}

.school-module-header:focus-visible {
    outline: 3px solid rgba(22, 134, 217, .22);
    outline-offset: -3px;
}

.school-module-card.is-collapsed .school-module-header {
    border-bottom-color: transparent;
}

.school-module-card.is-collapsed .school-module-list {
    display: none;
}

.school-module-icon-btn.module-toggle i {
    transition: transform .2s ease;
}

.school-module-card.is-collapsed .school-module-icon-btn.module-toggle i {
    transform: rotate(180deg);
}

.school-module-card.is-search-expanded .school-module-list {
    display: block;
}

.school-module-card.is-search-expanded .school-module-header {
    border-bottom-color: var(--modules-border);
}

/* Analytics charts */
.school-analytics-section {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(158, 178, 189, .5);
}

.school-analytics-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.school-analytics-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    color: #334155;
    font-size: 17px;
    font-weight: 900;
}

.school-analytics-title i {
    color: var(--modules-primary);
    font-size: 20px;
}

.school-analytics-subtitle {
    color: #7a8994;
    font-size: 12px;
}

.school-analytics-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.school-chart-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(205, 216, 222, .96);
    border-radius: 10px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 6px 18px rgba(41, 72, 88, .12);
}

.school-chart-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 15px 8px;
}

.school-chart-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #3f4852;
    font-size: 14px;
    font-weight: 900;
}

.school-chart-card-title i {
    color: var(--modules-primary);
    font-size: 17px;
}

.school-chart-card-badge {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 3px 9px;
    border-radius: 999px;
    background: #e8f5fd;
    color: #1173b8;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.school-chart-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 15px 4px;
}

.school-chart-summary-item {
    min-width: 112px;
    padding: 8px 10px;
    border: 1px solid #e6edf1;
    border-radius: 8px;
    background: #f8fbfc;
}

.school-chart-summary-item span {
    display: block;
    color: #84919a;
    font-size: 10px;
}

.school-chart-summary-item strong {
    display: block;
    margin-top: 2px;
    color: #334155;
    font-size: 16px;
    font-weight: 900;
}

.school-chart {
    width: 100%;
    height: 330px;
}

.school-chart-card-wide {
    grid-column: 1 / -1;
}

.school-chart-card-wide .school-chart {
    height: 350px;
}

@media (max-width: 992px) {
    .school-analytics-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .school-analytics-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .school-chart {
        height: 300px;
    }

    .school-chart-card-wide .school-chart {
        height: 320px;
    }

    .school-chart-summary-item {
        flex: 1 1 120px;
    }
}

@media (max-width: 1300px) {
    .school-modules-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 992px) {
    .school-modules-page {
        padding-inline: 12px;
    }

    .school-modules-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .school-modules-result {
        display: none;
    }
}

@media (max-width: 640px) {
    .school-modules-page {
        padding: 12px 8px 26px;
    }

    .school-modules-toolbar {
        gap: 7px;
    }

    .school-modules-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .school-modules-search input {
        height: 40px;
    }

    .school-modules-toolbar-btn {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }
}



.attendance-content-v4 {
    --att-primary: #7c3aed;
    --att-primary-strong: #6d28d9;
    --att-primary-soft: #f4efff;
    --att-content-bg: var(--bs-body-bg, #f6f7fb);
    --att-surface: #fff;
    --att-surface-muted: #fafafe;
    --att-text: var(--bs-body-color, #202130);
    --att-muted: var(--bs-secondary-color, #73758a);
    --att-border: var(--bs-border-color, #e7e8f0);
    --att-success: var(--bs-success, #15966a);
    --att-warning: var(--bs-warning, #c47b12);
    --att-danger: var(--bs-danger, #d34d5c);
    --att-radius-sm: 6px;
    --att-radius: 8px;
    --att-radius-lg: 8px;
    --att-shadow: 0 .125rem .25rem rgba(0, 0, 0, .055);
}

.attendance-content-v4 .attendance-page {
    background: var(--att-content-bg);
}

.attendance-content-v4 .attendance-page>.container-fluid {
    width: min(100%, 1400px);
    margin-inline: auto;
    padding: 28px 24px 56px;
}

.attendance-content-v4 .attendance-page-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.attendance-content-v4 .attendance-page-heading__main {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}

.attendance-content-v4 .attendance-page-heading .module-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border: 1px solid rgba(102, 87, 199, .14);
    border-radius: 13px;
    background: var(--att-primary-soft);
    color: var(--att-primary);
}

.attendance-content-v4 .attendance-page-eyebrow {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
    color: var(--att-primary);
    font-size: 12px;
    font-weight: 700;
}

.attendance-content-v4 .attendance-page-heading .module-title {
    color: var(--att-text);
    font-size: clamp(22px, 2.2vw, 30px);
    line-height: 1.4;
}

.attendance-content-v4 .attendance-page-heading .module-subtitle {
    color: var(--att-muted);
}

.attendance-content-v4 .attendance-page-heading__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.attendance-content-v4 .attendance-page-heading__actions .btn {
    min-height: 44px;
    border-radius: var(--att-radius-sm);
    font-weight: 700;
}

.attendance-content-v4 .attendance-live-badge {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 11px;
    border: 1px solid rgba(21, 150, 106, .18);
    border-radius: 999px;
    background: #eaf8f2;
    color: var(--att-success);
    font-size: 12px;
    font-weight: 700;
}

.attendance-content-v4 .attendance-context-bar {
    display: none;
}

.attendance-content-v4 .attendance-module-view.active {
    animation: attendanceContentFade .18s ease both;
}

@keyframes attendanceContentFade {
    from {
        opacity: .35;
        transform: translateY(4px);
    }
}

.attendance-content-v4 .attendance-section-stack {
    gap: 16px;
}

.attendance-content-v4 .attendance-module-view .card {
    border: 1px solid var(--att-border);
    border-radius: var(--att-radius);
    background: var(--att-surface);
    box-shadow: var(--att-shadow);
    overflow: hidden;
}

.attendance-content-v4 .attendance-module-view .card-header {
    min-height: 68px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--att-border);
    background: var(--att-surface);
}

.attendance-content-v4 .attendance-module-view .card-body {
    padding: 20px;
}

.attendance-content-v4 .attendance-module-view .card-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--att-border);
    background: var(--att-surface-muted);
}

.attendance-content-v4 .attendance-worklog-overview {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(310px, .75fr);
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--att-border);
    border-radius: var(--att-radius-lg);
    background: var(--att-surface);
    box-shadow: var(--att-shadow);
}

.attendance-content-v4 .attendance-worklog-overview>.card {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.attendance-content-v4 .attendance-punch-card {
    background: linear-gradient(145deg, #312a61, #6657c7) !important;
    color: #fff;
}

.attendance-content-v4 .attendance-punch-card .card-body {
    padding: 28px;
}

.attendance-content-v4 .attendance-punch-card .attendance-panel-kicker,
.attendance-content-v4 .attendance-punch-card .text-muted,
.attendance-content-v4 .attendance-punch-card .text-body {
    color: rgba(255, 255, 255, .78) !important;
}

.attendance-content-v4 .attendance-punch-card .attendance-panel-kicker>span {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.attendance-content-v4 .attendance-punch-layout {
    align-items: end;
    gap: 24px;
}

.attendance-content-v4 .attendance-current-state {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
}

.attendance-content-v4 .punch-clock {
    direction: ltr;
    text-align: right;
    font-size: clamp(34px, 4vw, 52px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 1px;
}

.attendance-content-v4 .attendance-punch-actions {
    display: flex;
    gap: 8px;
}

.attendance-content-v4 .attendance-punch-card .punch-btn {
    min-height: 44px;
    flex: 1;
    border-radius: var(--att-radius-sm);
}

.attendance-content-v4 .attendance-punch-card .btn-primary {
    border-color: #fff;
    background: #fff;
    color: var(--att-primary-strong);
}

.attendance-content-v4 .attendance-punch-card .btn-outline-danger {
    border-color: rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.attendance-content-v4 .attendance-summary-card {
    border-inline-start: 1px solid var(--att-border) !important;
}

.attendance-content-v4 .attendance-summary-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.attendance-content-v4 .attendance-summary-item {
    min-height: 78px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    padding: 12px;
    border: 1px solid var(--att-border);
    border-radius: var(--att-radius-sm);
    background: var(--att-surface-muted);
}

.attendance-content-v4 .attendance-summary-item dt {
    color: var(--att-muted);
    font-size: 12px;
    font-weight: 600;
}

.attendance-content-v4 .attendance-summary-item dd {
    margin: 0;
    color: var(--att-text);
    font-size: 17px;
    font-weight: 800;
}

.attendance-content-v4 .attendance-filter-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 0;
    padding: 16px;
}

.attendance-content-v4 .attendance-filter-card .card-body {
    order: 1;
    padding: 0;
}

.attendance-content-v4 .attendance-filter-card .card-header {
    order: 2;
    min-height: auto;
    padding: 0 12px 0 0;
    border: 0;
}

.attendance-content-v4 .attendance-filter-card .attendance-heading-group {
    display: none;
}

.attendance-content-v4 .attendance-filter-grid {
    gap: 12px;
}

.attendance-content-v4 .attendance-field .form-label,
.attendance-content-v4 .attendance-module-view .form-label {
    margin-bottom: 6px;
    color: var(--att-muted);
    font-size: 12px;
    font-weight: 700;
}

.attendance-content-v4 .attendance-module-view .form-control,
.attendance-content-v4 .attendance-module-view .form-select,
.attendance-content-v4 .attendance-module-view .choices__inner {
    min-height: 44px;
    border-color: var(--att-border);
    border-radius: var(--att-radius-sm);
    background-color: #fff;
}

.attendance-content-v4 .attendance-module-view .form-control:focus,
.attendance-content-v4 .attendance-module-view .form-select:focus {
    border-color: var(--att-primary);
    box-shadow: 0 0 0 3px rgba(102, 87, 199, .14);
}

.attendance-content-v4 .attendance-data-card .card-header,
.attendance-content-v4 .attendance-table-heading {
    padding: 16px 20px;
}

.attendance-content-v4 .attendance-step-number {
    border-radius: 999px;
    background: var(--att-primary-soft);
    color: var(--att-primary-strong);
}

.attendance-content-v4 .request-type-card {
    min-height: 108px;
    padding: 14px;
    border: 1px solid var(--att-border);
    border-radius: var(--att-radius-sm);
    background: var(--att-surface);
    box-shadow: none;
}

.attendance-content-v4 .request-type-card.active {
    border-color: var(--att-primary);
    background: var(--att-primary-soft);
    color: var(--att-primary-strong);
}

.attendance-content-v4 .soft-panel {
    border-color: rgba(102, 87, 199, .16) !important;
    background: linear-gradient(135deg, var(--att-primary-soft), #fff) !important;
}

.attendance-content-v4 .shift-days-wrap {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(130px, 1fr));
    overflow-x: auto;
    padding-bottom: 4px;
}

.attendance-content-v4 .shift-day {
    min-width: 0;
    min-height: 164px;
    padding: 16px;
    border: 1px solid var(--att-border);
    border-radius: var(--att-radius);
    background: #fff;
    box-shadow: none;
}

.attendance-content-v4 .shift-day.today {
    border-color: var(--att-primary);
    box-shadow: inset 0 3px 0 var(--att-primary);
}

.attendance-content-v4 .metric-card {
    min-height: 126px;
}

.attendance-content-v4 .metric-card .card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.attendance-content-v4 .metric-card h3,
.attendance-content-v4 .metric-card h4 {
    color: var(--att-text);
    font-size: 25px;
}

/* Supplied table structure and visual language, scoped to module content. */
.attendance-content-v4 .attendance-page .new-style-one {
    overflow: auto;
    max-height: 65dvh;
    border: 1px solid #eee;
    border-radius: 8px;
    background: #fff;
    scrollbar-width: thin;
}

.attendance-content-v4 .attendance-page .new-style-three {
    min-width: 100%;
}

.attendance-content-v4 .attendance-page .add-rows-data-h {
    min-width: 850px;
    margin: 0 !important;
    border: 0;
    color: var(--att-text);
    font-size: 13px;
}

.attendance-content-v4 .attendance-page .add-rows-data-h> :not(caption)>*>* {
    padding: 13px 14px;
    border-color: #ececf2;
    vertical-align: middle;
}

.attendance-content-v4 .attendance-page .add-rows-data-h .thead-sm th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding-block: 12px;
    background: #f8f8fc;
    color: #6f7082;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
    white-space: nowrap;
    text-transform: none !important;
}

.attendance-content-v4 .attendance-page .add-rows-data-h tbody tr {
    transition: background-color .16s ease;
}

.attendance-content-v4 .attendance-page .add-rows-data-h tbody tr:hover {
    background: #fcfcff;
}

.attendance-content-v4 .attendance-page .add-rows-data-h tbody tr:last-child td {
    border-bottom: 0;
}

.attendance-content-v4 .attendance-page .attendance-row-actions,
.attendance-content-v4 .attendance-page .v-class {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
}

.attendance-content-v4 .attendance-page .attendance-row-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--att-border);
    border-radius: 9px;
    background: #fff;
    color: var(--att-muted);
}

.attendance-content-v4 .attendance-status,
.attendance-content-v4 .attendance-module-view .badge {
    border-radius: 999px;
    font-weight: 700;
}

.attendance-content-v4 .timeline-mini {
    padding-top: 4px;
}

.attendance-content-v4 .timeline-item {
    padding-bottom: 20px;
}

.attendance-content-v4 .settings-layout .list-group-item,
.attendance-content-v4 .settings-layout .nav-link {
    min-height: 44px;
    border-radius: var(--att-radius-sm);
}

.attendance-content-v4 .attendance-module-view .btn {
    border-radius: var(--att-radius-sm);
}

.attendance-content-v4 .attendance-module-view .btn:focus-visible,
.attendance-content-v4 .attendance-module-view input:focus-visible,
.attendance-content-v4 .attendance-module-view select:focus-visible,
.attendance-content-v4 .attendance-module-view textarea:focus-visible {
    outline: 3px solid rgba(102, 87, 199, .22);
    outline-offset: 2px;
}

/* Visual contract aligned with hoghogh-dastmozd(3).html. */
.attendance-content-v4 .attendance-reference-shell {
    overflow: visible;
    padding: 20px;
    border: 1px dashed #7c3aed;
    border-radius: 8px;
    background: #fff;
    box-shadow: none;
}

.attendance-content-v4 .attendance-reference-shell>.card-body {
    padding: 0;
}

.attendance-content-v4 .attendance-reference-shell .lesson-title {
    display: flex;
    justify-content: center;
    margin: -36px auto 22px;
}

.attendance-content-v4 .attendance-reference-shell .lesson-title span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 7px 24px;
    border-radius: 6px;
    background: #7c3aed;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(124, 58, 237, .18);
}

.attendance-content-v4 .attendance-view-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0 0 18px;
    padding: 0 0 6px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.attendance-content-v4 .attendance-view-tabs .nav-item {
    flex: 0 0 178px;
}

.attendance-content-v4 .attendance-view-tabs .nav-link {
    width: 100%;
    min-height: 58px;
    display: flex;
    align-items: center;
    padding: 9px 12px;
    border: 1px solid #e7e9eb;
    border-radius: 6px;
    background: #fff;
    color: var(--att-text);
    text-align: right;
    white-space: nowrap;
}

.attendance-content-v4 .attendance-view-tabs .nav-link i {
    color: #7c3aed;
    font-size: 26px;
}

.attendance-content-v4 .attendance-view-tabs .nav-link.active {
    border-color: #efd46f;
    background: #ffeaa7;
    color: var(--att-text);
    box-shadow: none;
}

.attendance-content-v4 .attendance-view-tabs .nav-link:hover {
    border-color: rgba(124, 58, 237, .42);
}

.attendance-content-v4 .attendance-reference-content {
    min-height: 420px;
    border: 1px solid #e7e9eb;
    border-radius: 8px;
    background: #fff;
}

.attendance-content-v4 .attendance-reference-content>.attendance-page-heading {
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid #eceef2;
}

.attendance-content-v4 .attendance-page-heading .module-icon {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    border-radius: 6px;
    background: #7c3aed;
    color: #fff;
}

.attendance-content-v4 .attendance-page-heading .module-title {
    font-size: 21px;
}

.attendance-content-v4 .attendance-page-heading__actions .btn-primary,
.attendance-content-v4 .attendance-module-view .btn-primary,
.attendance-content-v4 .attendance-module-view .btn-add {
    border-color: #7c3aed;
    background: #7c3aed;
    color: #fff;
}

.attendance-content-v4 .attendance-page-heading__actions .btn-primary:hover,
.attendance-content-v4 .attendance-module-view .btn-primary:hover,
.attendance-content-v4 .attendance-module-view .btn-add:hover {
    border-color: #6d28d9;
    background: #6d28d9;
}

.attendance-content-v4 .attendance-worklog-overview {
    border-radius: 8px;
    box-shadow: none;
}

.attendance-content-v4 .attendance-punch-card {
    background: #fff !important;
    color: var(--att-text);
}

.attendance-content-v4 .attendance-punch-card .attendance-panel-kicker,
.attendance-content-v4 .attendance-punch-card .text-muted,
.attendance-content-v4 .attendance-punch-card .text-body {
    color: var(--att-muted) !important;
}

.attendance-content-v4 .attendance-punch-card .attendance-panel-kicker>span,
.attendance-content-v4 .attendance-current-state {
    background: var(--att-primary-soft);
    color: #7c3aed;
}

.attendance-content-v4 .attendance-punch-card .btn-primary {
    border-color: #7c3aed;
    background: #7c3aed;
    color: #fff;
}

.attendance-content-v4 .attendance-punch-card .btn-outline-danger {
    border-color: var(--att-danger);
    background: #fff;
    color: var(--att-danger);
}

.attendance-content-v4 .attendance-module-view .card {
    border-radius: 8px;
    box-shadow: var(--att-shadow);
}

.attendance-content-v4 .attendance-module-view .card-header {
    min-height: 58px;
    padding: 13px 16px;
    background: #fff;
}

.attendance-content-v4 .attendance-module-view .card-body {
    padding: 16px;
}

.attendance-content-v4 .attendance-filter-card {
    border-radius: 8px;
    background: #fff;
    box-shadow: none;
}

.attendance-content-v4 .attendance-module-view .form-control,
.attendance-content-v4 .attendance-module-view .form-select,
.attendance-content-v4 .attendance-module-view .choices__inner {
    min-height: 38px;
    border-radius: 6px;
}

.attendance-content-v4 .request-type-card {
    border-radius: 6px;
}

.attendance-content-v4 .request-type-card.active {
    border-color: #efd46f;
    background: #ffeaa7;
    color: var(--att-text);
}

.attendance-content-v4 .soft-panel {
    border: 1px solid #e7e9eb !important;
    background: #fff !important;
}

.attendance-content-v4 .shift-day {
    border-radius: 8px;
}

.attendance-content-v4 .shift-day.today {
    border-color: #efd46f;
    background: #fff9dc;
    box-shadow: inset 0 3px 0 #7c3aed;
}

.attendance-content-v4 .metric-card {
    min-height: 112px;
    border: 1px solid #e7e9eb;
    box-shadow: var(--att-shadow);
}

.attendance-content-v4 .attendance-summary-item {
    min-height: 72px;
    border-radius: 6px;
    background: #f8f9fa;
}

.attendance-content-v4 .attendance-page .new-style-one {
    border-radius: 8px;
    box-shadow: none;
}

.attendance-content-v4 .attendance-page .add-rows-data-h .thead-sm th {
    background: var(--bs-light, #f8f9fa);
    color: var(--bs-secondary-color, #6c757d);
}

@media (max-width: 1199.98px) {
    .attendance-content-v4 .attendance-worklog-overview {
        grid-template-columns: 1fr;
    }

    .attendance-content-v4 .attendance-summary-card {
        border-inline-start: 0 !important;
        border-top: 1px solid var(--att-border) !important;
    }
}

@media (max-width: 991.98px) {
    .attendance-content-v4 .attendance-page>.container-fluid {
        padding-inline: 16px;
    }

    .attendance-content-v4 .attendance-page-heading {
        flex-direction: column;
    }

    .attendance-content-v4 .attendance-page-heading__actions {
        width: 100%;
        justify-content: flex-start;
    }

    .attendance-content-v4 .attendance-filter-card {
        grid-template-columns: 1fr;
    }

    .attendance-content-v4 .attendance-filter-card .card-header {
        order: 1;
        justify-content: flex-end;
        padding: 12px 0 0;
    }
}

@media (max-width: 767.98px) {
    .attendance-content-v4 .attendance-page>.container-fluid {
        padding-block: 20px 40px;
    }

    .attendance-content-v4 .attendance-page-heading__main .module-icon {
        display: none;
    }

    .attendance-content-v4 .attendance-page-heading__actions .attendance-live-badge {
        width: 100%;
        justify-content: center;
    }

    .attendance-content-v4 .attendance-page-heading__actions .btn {
        flex: 1 1 calc(50% - 4px);
    }

    .attendance-content-v4 .attendance-punch-card .card-body,
    .attendance-content-v4 .attendance-module-view .card-body {
        padding: 16px;
    }

    .attendance-content-v4 .attendance-punch-layout {
        display: grid;
        grid-template-columns: 1fr;
    }

    .attendance-content-v4 .attendance-summary-list {
        grid-template-columns: 1fr 1fr;
    }

    .attendance-content-v4 .attendance-module-view .card-header,
    .attendance-content-v4 .attendance-data-card .card-header {
        padding: 14px 16px;
    }

    .attendance-content-v4 .attendance-page .new-style-one {
        border-radius: 0 0 var(--att-radius) var(--att-radius);
    }
}

@media (max-width: 480px) {
    .attendance-content-v4 .attendance-summary-list {
        grid-template-columns: 1fr;
    }

    .attendance-content-v4 .attendance-punch-actions {
        flex-direction: column;
    }

    .attendance-content-v4 .attendance-page-heading__actions .btn {
        flex-basis: 100%;
    }

    .attendance-content-v4 .attendance-reference-shell {
        padding: 14px;
    }

    .attendance-content-v4 .attendance-reference-content {
        padding: 16px !important;
    }

    .attendance-content-v4 .attendance-view-tabs .nav-item {
        flex-basis: 58px;
    }

    .attendance-content-v4 .attendance-view-tabs .nav-link {
        justify-content: center;
        min-height: 54px;
        padding: 8px;
    }

    .attendance-content-v4 .attendance-view-tabs .nav-label {
        display: none;
    }
}

/* Rose/Violet blob hover effect for wizard tabs - Like Uiverse style */
.wizard-tabs .nav-link {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: transparent !important;
    color: inherit;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition:
        color 0.5s ease,
        border-color 0.5s ease,
        transform 0.5s ease,
        text-decoration-color 0.5s ease,
        text-underline-offset 0.5s ease,
        background-color 0.5s ease;
}

/* محتوای تب بالاتر از افکت بماند */
.wizard-tabs .nav-link>span {
    position: relative;
    z-index: 3;
}

/* blob بنفش - با انیمیشن طولانی‌تر */
.wizard-tabs .nav-link::before {
    content: "";
    position: absolute;
    width: 48px;
    height: 48px;
    right: 4px;
    top: 4px;
    z-index: 1;
    border-radius: 999px;
    background: #8b5cf6;
    filter: blur(16px);
    opacity: 0;
    pointer-events: none;
    transition:
        right 0.5s ease,
        top 0.5s ease,
        bottom 0.5s ease,
        filter 0.5s ease,
        opacity 0.5s ease,
        transform 0.5s ease;
}

/* blob رز - با انیمیشن طولانی‌تر */
.wizard-tabs .nav-link::after {
    content: "";
    position: absolute;
    z-index: 1;
    width: 80px;
    height: 80px;
    right: 32px;
    top: 3px;
    border-radius: 999px;
    background: #fda4af;
    filter: blur(16px);
    opacity: 0;
    pointer-events: none;
    transition:
        right 0.5s ease,
        top 0.5s ease,
        filter 0.5s ease,
        opacity 0.5s ease,
        transform 1s ease;
    /* transition طولانی‌تر برای after */
}

/* حالت hover - مثل نمونه Uiverse */
.wizard-tabs .nav-link:hover {
    border-color: #fda4af;
    color: #fda4af;

    transform: translateY(-4px);
    background: transparent !important;
    box-shadow: none;
}

/* حرکت حباب بنفش به راست و پایین + blur removal */
.wizard-tabs .nav-link:hover::before {
    right: 48px;
    top: auto;
    bottom: -32px;
    filter: blur(0px);
    /* حذف blur مثل نمونه */
    opacity: 0.85;
    box-shadow: 20px 20px 20px 30px #a21caf;
}

/* حرکت حباب رز به راست + بزرگ‌تر شدن + blur removal */
.wizard-tabs .nav-link:hover::after {
    right: -8px;
    top: 3px;
    transform: scale(1.5);
    /* بزرگ‌تر شدن */
    filter: blur(0px);
    /* حذف blur مثل نمونه */
    opacity: 0.75;
}

/* حالت active */
.wizard-tabs .nav-link.active::before {
    opacity: 0.85;
    filter: blur(0px);
}

.wizard-tabs .nav-link.active::after {
    opacity: 0.75;
    filter: blur(0px);
    transform: scale(1.3);
}

/* حس فرو رفتگی موقع کلیک */
.wizard-tabs .nav-link:active {
    transform: translateY(2px) scale(0.98);
}

/* متن و آیکون روی hover هم‌رنگ شود */
.wizard-tabs .nav-link:hover i,
.wizard-tabs .nav-link:hover .text-body,
.wizard-tabs .nav-link:hover span {
    color: black !important;
}

/* اطمینان از شفاف بودن در همه حالات */
.wizard-tabs .nav-link.active,
.wizard-tabs .nav-link:focus,
.wizard-tabs .nav-link:active {
    background: transparent !important;
    box-shadow: none !important;
}



/* Section layout adapted from morelesson(6).html */
.attendance-reference-content {
    min-height: 520px;
}

.morelesson-section-layout {
    min-height: 100%;
}

.morelesson-section-card {
    border: 0;
    box-shadow: none;
    background: transparent;
}

.morelesson-section-intro {
    margin-bottom: 1rem;
}

.morelesson-section-intro .accordion-item {
    background: transparent;
}

.morelesson-section-header {
    min-height: 58px;
    border: 1px solid var(--bs-border-color);
    border-radius: 10px 10px 0 0;
}

.morelesson-section-intro .accordion-collapse {
    border: 1px solid var(--bs-border-color);
    border-top: 0;
    border-radius: 0 0 10px 10px;
    overflow: hidden;
}

.morelesson-section-intro .background-ekardon {
    background: rgba(16, 93, 77, .06);
}

.morelesson-section-intro .info-chip {
    background: var(--bs-body-bg);
    min-height: 42px;
}

.morelesson-section-intro .text-success-icon {
    color: #7b70ef;
    font-size: 18px;
}

.morelesson-section-body {
    padding: 0;
}

.morelesson-section-body>.card,
.morelesson-section-body>.row,
.morelesson-section-body>form,
.morelesson-section-body>div {
    margin-bottom: 1rem;
}

.morelesson-section-body> :last-child {
    margin-bottom: 0;
}

.morelesson-section-body .card {
    border-color: var(--bs-border-color);
    border-radius: 10px;
}

.morelesson-section-body .card-header {
    background: var(--bs-light-bg-subtle);
}

.morelesson-section-body .new-style-one {
    overflow: hidden;
    border-radius: 8px;
}

.morelesson-section-body .new-style-three {
    min-width: 100%;
}

.morelesson-section-body table {
    margin-bottom: 0 !important;
}

.morelesson-section-body table thead {
    background: var(--bs-light-bg-subtle);
}

.morelesson-section-body .attendance-filter-card,
.morelesson-section-body .attendance-data-card,
.morelesson-section-body .attendance-surface {
    box-shadow: none;
}

.attendance-view-tabs .nav-item {
    width: 250px;
}

.attendance-view-tabs .nav-link i {
    color: #7c3aed;
}



@media (max-width: 767.98px) {
    .morelesson-section-intro .accordion-button {
        background: rgba(215, 234, 228, .72);
        font-weight: 700;
    }

    .morelesson-section-intro .accordion-button:not(.collapsed) {
        color: var(--bs-body-color);
        box-shadow: none;
    }

    .morelesson-section-body {
        padding-top: .25rem;
    }

    .morelesson-section-intro .info-chip {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .attendance-view-tabs .nav-item {
        width: auto !important;
    }

    .attendance-view-tabs .nav-link {
        padding: 8px !important;
    }

    .attendance-view-tabs .attendance-tab-label {
        display: none !important;
    }

    .attendance-view-tabs .nav-link .d-flex {
        justify-content: center !important;
    }

    .attendance-view-tabs .nav-link i {
        margin: 0 auto;
        font-size: 28px;
    }

    .morelesson-section-intro .accordion-icon {
        font-size: 11px;
    }
}

















/* ///////////////////////////////////// */

/* ==========================================================
   Student dashboard: profile and tuition summary
   ========================================================== */
.student-dashboard-summary {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.35fr);
    gap: 15px;
    margin-bottom: 15px;
}

.student-summary-card {
    min-width: 0;
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border, #e7e9eb);
    border-radius: var(--radius-lg, 16px);
    padding: 20px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .04);
}

.student-summary-header,
.student-summary-title,
.student-profile-content,
.tuition-progress-label,
.tuition-payments-title {
    display: flex;
    align-items: center;
}

.student-summary-header,
.tuition-progress-label,
.tuition-payments-title {
    justify-content: space-between;
}

.student-summary-header {
    gap: 12px;
    margin-bottom: 18px;
}

.student-summary-title {
    gap: 11px;
    min-width: 0;
}

.student-summary-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.student-summary-icon.profile-icon {
    color: #2563eb;
    background: #eaf2ff;
}

.student-summary-icon.tuition-icon {
    color: #0f8a70;
    background: #e4f8f2;
}

.student-summary-title h2 {
    margin: 0 0 3px;
    color: var(--text-dark, #1e293b);
    font-size: 15px;
    font-weight: 800;
}

.student-summary-title p {
    margin: 0;
    color: var(--text-muted, #64748b);
    font-size: 11px;
}

.student-status-badge,
.tuition-year-badge,
.payment-status-success {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    border-radius: 999px;
    font-weight: 700;
}

.student-status-badge {
    padding: 6px 10px;
    color: #08785f;
    background: #e6faf4;
    font-size: 11px;
}

.tuition-year-badge {
    gap: 6px;
    padding: 7px 11px;
    color: #5b21b6;
    background: #f1ebff;
    font-size: 11px;
}

.student-profile-content {
    align-items: flex-start;
    gap: 16px;
}

.student-profile-avatar {
    width: 74px;
    height: 74px;
    flex: 0 0 74px;
    padding: 4px;
    border: 1px solid #dce5ef;
    border-radius: 20px;
    background: #f8fafc;
}

.student-profile-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 16px;
}

.student-info-grid {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.student-info-item {
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid #edf0f4;
    border-radius: 12px;
    background: #fbfcfe;
}

.student-info-item span,
.tuition-amount-item span {
    display: block;
    color: #7b8794;
    font-size: 12px;
    margin-bottom: 4px;
}

.student-info-item strong {
    display: block;
    overflow: hidden;
    color: var(--text-dark, #1e293b);
    font-size: 12px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-ltr-number {
    direction: ltr;
    text-align: right;
}

.student-success-text {
    color: #0f8a70 !important;
}

.tuition-amount-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.tuition-amount-item {
    position: relative;
    overflow: hidden;
    padding: 13px 14px;
    border: 1px solid #e9edf2;
    border-radius: 14px;
    background: #fbfcfe;
}

.tuition-amount-item::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 4px;
    border-radius: 0 14px 14px 0;
}

.tuition-amount-item.total::after {
    background: #6366f1;
}

.tuition-amount-item.paid::after {
    background: #10b981;
}

.tuition-amount-item.remaining::after {
    background: #f59e0b;
}

.tuition-amount-item strong {
    color: var(--text-dark, #1e293b);
    font-size: 15px;
    font-weight: 850;
}

.tuition-amount-item small {
    margin-right: 3px;
    color: #7b8794;
    font-size: 9px;
}

.tuition-progress-box {
    margin: 14px 0 16px;
    padding: 12px 14px;
    border-radius: 13px;
    background: #f7fafc;
}

.tuition-progress-label {
    margin-bottom: 8px;
    color: #52606d;
    font-size: 11px;
}

.tuition-progress-label strong {
    color: #0f8a70;
    font-size: 12px;
}

.tuition-progress-track {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #e8edf2;
}

.tuition-progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #1ab394, #23c6c8);
}

.tuition-payments-title {
    gap: 10px;
    margin-bottom: 8px;
}

.tuition-payments-title h3 {
    margin: 0;
    color: var(--text-dark, #1e293b);
    font-size: 12px;
    font-weight: 800;
}

.tuition-payments-title h3 i {
    margin-left: 5px;
    color: #1ab394;
}

.tuition-payments-title>span {
    color: #7b8794;
    font-size: 10px;
}

.tuition-payments-wrapper {
    border: 1px solid #edf0f4;
    border-radius: 12px;
}

.tuition-payments-table {
    min-width: 680px;
    margin: 0 !important;
    font-size: 12px;
}

.tuition-payments-table> :not(caption)>*>* {
    padding: 10px 8px;
    background: transparent;
}

.tuition-payments-table thead th {
    border-bottom: 1px solid #e8edf2;
    color: #6b7785;
    background: #f8fafc;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.tuition-payments-table tbody td {
    color: #475569;
    border-bottom-color: #f0f2f5;
    white-space: nowrap;
}

.tuition-payments-table tbody tr:last-child td {
    border-bottom: 0;
}

.payment-status-success {
    padding: 4px 9px;
    color: #08785f;
    background: #e6faf4;
    font-size: 9px;
}

[data-bs-theme="dark"] .student-summary-card,
[data-bs-theme="dark"] .student-info-item,
[data-bs-theme="dark"] .tuition-amount-item,
[data-bs-theme="dark"] .tuition-progress-box,
[data-bs-theme="dark"] .tuition-payments-table thead th {
    background: var(--instr, #1f2a34);
    border-color: var(--ins-border-color, #293036);
}

[data-bs-theme="dark"] .student-profile-avatar,
[data-bs-theme="dark"] .tuition-payments-wrapper {
    border-color: var(--ins-border-color, #293036);
    background: var(--instr, #1f2a34);
}

@media (max-width: 1199.98px) {
    .student-dashboard-summary {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .student-summary-card {
        padding: 15px;
    }

    .student-profile-content {
        flex-direction: column;
    }

    .student-info-grid,
    .tuition-amount-grid {
        width: 100%;
        grid-template-columns: 1fr;
    }

    .student-profile-avatar {
        width: 64px;
        height: 64px;
        flex-basis: 64px;
    }
}

@media (max-width: 480px) {
    .student-summary-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .student-status-badge,
    .tuition-year-badge {
        align-self: flex-start;
    }
}



/* صفحات مستقل مشخصات دانش آموز و وضعیت شهریه */
.student-dashboard-summary-single {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 0;
}

.student-dashboard-summary-single .student-summary-card {
    width: 100%;
}


#attendanceSummary .attendance-summary-card {
    border: 1px solid #e7eaee;
    border-radius: 12px;
    background: var(--bs-body-bg, #fff);
    box-shadow: none;
}

#attendanceSummary .attendance-summary-card .card-body {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
}

#attendanceSummary .attendance-summary-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 10px;
}

#attendanceSummary .attendance-summary-icon i {
    font-size: 22px;
}

#attendanceSummary .attendance-summary-content {
    min-width: 0;
}

#attendanceSummary .attendance-summary-content span {
    display: block;
    margin-bottom: 4px;
    color: #7a8491;
    font-size: 12px;
}

#attendanceSummary .attendance-summary-content strong {
    display: block;
    color: var(--bs-emphasis-color, #20252b);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}

#attendanceSummary .attendance-summary-icon.is-success {
    color: #16a085;
    background: rgba(22, 160, 133, 0.1);
}

#attendanceSummary .attendance-summary-icon.is-warning {
    color: #e69b00;
    background: rgba(230, 155, 0, 0.1);
}

#attendanceSummary .attendance-summary-icon.is-danger {
    color: #dc3545;
    background: rgba(220, 53, 69, 0.1);
}

#attendanceSummary .attendance-summary-icon.is-info {
    color: #3284d6;
    background: rgba(50, 132, 214, 0.1);
}

@media (max-width: 575.98px) {
    #attendanceSummary .attendance-summary-card .card-body {
        gap: 9px;
        padding: 12px;
    }

    #attendanceSummary .attendance-summary-icon {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
    }

    #attendanceSummary .attendance-summary-icon i {
        font-size: 19px;
    }

    #attendanceSummary .attendance-summary-content span {
        font-size: 11px;
    }

    #attendanceSummary .attendance-summary-content strong {
        font-size: 19px;
    }
}




#calendar .fc-col-header-cell {
    cursor: pointer;
    transition: background-color .18s ease;
}

#calendar .fc-col-header-cell:hover {
    background-color: var(--bs-primary-bg-subtle, rgba(26, 179, 148, .08));
}

#calendar .fc-col-header-cell:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
}

#calendar .fc-col-header-cell:hover .fc-col-header-cell-cushion,
#calendar .fc-col-header-cell:focus-visible .fc-col-header-cell-cushion {
    color: var(--bs-primary);
}

#calendar .fc-toolbar-title {
    cursor: pointer;
    border-radius: .375rem;
    padding: .2rem .45rem;
    transition: background-color .18s ease, color .18s ease;
}

#calendar .fc-toolbar-title:hover,
#calendar .fc-toolbar-title:focus-visible {
    color: var(--bs-primary);
    background-color: var(--bs-primary-bg-subtle, rgba(26, 179, 148, .08));
    outline: none;
}

.calendar-date-picker-hint {
    font-size: .75rem;
    color: var(--bs-secondary-color);
}

/* Main calendar only: header, sidebar and modals are intentionally excluded. */
.calendar-main-shell {
    display: flex;
    align-items: stretch;
    min-height: 690px;
    overflow: hidden;
    border-radius: var(--bs-border-radius-lg, .5rem);
}

.calendar-main-shell>.card {
    min-height: 690px;
}

.calendar-main-shell .calendar-events-sidebar {
    flex: 0 0 270px;
    width: 270px;
}

.calendar-main-shell .calendar-events-sidebar-body {
    padding: 1.25rem;
}

.calendar-main-shell #external-events {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.calendar-main-shell #external-events>p {
    margin-top: .75rem !important;
    margin-bottom: .25rem !important;
    line-height: 1.75;
}

.calendar-main-shell .external-event {
    margin: 0 !important;
    padding: .7rem .8rem;
    border-radius: .45rem;
    line-height: 1.5;
}

.calendar-main-shell .calendar-main-card {
    min-width: 0;
}

.calendar-main-shell .calendar-main-body {
    height: auto !important;
    min-height: 690px;
    padding: 1.25rem 1.35rem 1.35rem;
    overflow: visible;
}

.calendar-main-shell #calendar {
    width: 100%;
    min-height: 650px;
}

.calendar-main-shell #calendar .fc-header-toolbar {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem !important;
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--bs-border-color, #e9ecef);
}

.calendar-main-shell #calendar .fc-toolbar-chunk {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
}

.calendar-main-shell #calendar .fc-toolbar-title {
    margin: 0;
    line-height: 1.5;
}

.calendar-main-shell #calendar .fc-button-group {
    gap: .25rem;
}

.calendar-main-shell #calendar .fc-button-group>.fc-button {
    margin: 0;
    border-radius: .4rem !important;
}

.calendar-main-shell #calendar .fc-button {
    min-height: 36px;
    padding: .42rem .72rem;
    line-height: 1.25;
}

.calendar-main-shell #calendar .fc-view-harness {
    min-height: 590px;
    overflow: hidden;
    border-radius: .55rem;
}

.calendar-main-shell #calendar .fc-scrollgrid {
    overflow: hidden;
    border-radius: .55rem;
}

.calendar-main-shell #calendar .fc-col-header-cell-cushion {
    padding: .8rem .35rem;
}

.calendar-main-shell #calendar .fc-daygrid-day-frame {
    min-height: 104px;
}

.calendar-main-shell #calendar .fc-daygrid-day-top {
    min-height: 38px;
    padding: .45rem .5rem .2rem;
}

.calendar-main-shell #calendar .fc-daygrid-day-events {
    margin: .2rem .35rem .45rem;
}

.calendar-main-shell #calendar .fc-daygrid-event {
    margin-top: .2rem;
    border-radius: .3rem;
}

.calendar-main-shell #calendar .fc-event-main {
    padding: .12rem .25rem;
}

.calendar-main-shell #calendar .fc-timegrid-slot {
    height: 2.65rem;
}

.calendar-main-shell #calendar .fc-list-event td {
    padding-top: .75rem;
    padding-bottom: .75rem;
}

@media (max-width: 1199.98px) {
    .calendar-main-shell .calendar-main-body {
        padding: 1rem;
    }

    .calendar-main-shell #calendar .fc-button {
        padding-inline: .58rem;
    }
}

@media (max-width: 991.98px) {
    .calendar-main-shell {
        display: block;
        min-height: 0;
        overflow: visible;
        border-radius: var(--bs-border-radius, .375rem);
    }

    .calendar-main-shell>.card,
    .calendar-main-shell .calendar-main-body {
        min-height: 0;
    }

    .calendar-main-shell .calendar-main-card {
        border-inline-start: var(--bs-border-width, 1px) solid var(--bs-border-color, #e9ecef) !important;
        border-radius: var(--bs-border-radius, .375rem) !important;
    }

    .calendar-main-shell .calendar-mobile-actions {
        align-items: center;
        justify-content: flex-start;
        padding: .85rem 1rem;
    }

    .calendar-main-shell #calendar {
        min-height: 620px;
    }
}

@media (max-width: 767.98px) {
    .calendar-main-shell {
        margin-top: .5rem !important;
        margin-bottom: 1rem !important;
    }

    .calendar-main-shell .calendar-main-body {
        padding: .75rem;
    }

    .calendar-main-shell #calendar .fc-header-toolbar {
        align-items: stretch;
        flex-direction: column;
        gap: .65rem;
        padding-bottom: .75rem;
    }

    .calendar-main-shell #calendar .fc-toolbar-chunk {
        width: 100%;
        justify-content: center;
    }

    .calendar-main-shell #calendar .fc-toolbar-title {
        text-align: center;
        font-size: 1.05rem;
    }

    .calendar-main-shell #calendar .fc-button {
        min-height: 34px;
        padding: .35rem .55rem;
        font-size: .78rem;
    }

    .calendar-main-shell #calendar .fc-view-harness {
        min-height: 560px;
    }

    .calendar-main-shell #calendar .fc-daygrid-day-frame {
        min-height: 88px;
    }

    .calendar-main-shell #calendar .fc-col-header-cell-cushion {
        padding: .6rem .15rem;
        font-size: .75rem;
    }

    .calendar-main-shell #calendar .fc-daygrid-day-top {
        min-height: 34px;
        padding: .35rem .3rem .15rem;
    }

    .calendar-main-shell #calendar .fc-daygrid-day-events {
        margin-inline: .2rem;
    }
}

@media (max-width: 575.98px) {
    .calendar-main-shell .calendar-mobile-actions .btn {
        width: 100%;
    }

    .calendar-main-shell #calendar .fc-daygrid-day-frame {
        min-height: 78px;
    }

    .calendar-main-shell #calendar .calendar-day-events-btn {
        width: 24px;
        height: 24px;
        border-radius: 7px;
    }

    .calendar-main-shell #calendar .fc-daygrid-day-number {
        font-size: .75rem;
    }
}

.calendar-day-events-btn {
    position: relative;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: rgba(26, 179, 148, 0.10);
    color: #16987e;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.calendar-day-events-btn:hover,
.calendar-day-events-btn:focus-visible {
    background: #1ab394;
    color: #fff;
    transform: translateY(-1px);
    outline: none;
}

.calendar-day-events-btn .calendar-events-count {
    position: absolute;
    top: -6px;
    inset-inline-end: -6px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border: 2px solid var(--bs-body-bg, #fff);
    border-radius: 999px;
    display: none;
    align-items: center;
    justify-content: center;
    background: #dc3545;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
}

.calendar-day-events-btn.has-events .calendar-events-count {
    display: inline-flex;
}

.fc .fc-daygrid-day-top {
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 5px 6px 2px;
}

.fc .fc-daygrid-day-number {
    padding: 0 !important;
}

.fc .fc-col-header-cell-cushion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
}

.fc .calendar-week-header-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.calendar-events-summary-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.calendar-events-summary-categories {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
}

.calendar-summary-category {
    overflow: hidden;
    border: 1px solid var(--bs-border-color, #e9ecef);
    border-radius: 14px;
    background: var(--bs-body-bg, #fff);
}

.calendar-summary-category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--bs-border-color, #e9ecef);
    background: var(--category-bg, rgba(26, 179, 148, .08));
}

.calendar-summary-category-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.calendar-summary-category-icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 10px;
    background: var(--bs-body-bg, #fff);
    color: var(--category-color, #1ab394);
    border: 1px solid color-mix(in srgb, var(--category-color, #1ab394) 22%, transparent);
    font-size: 18px;
}

.calendar-summary-category-title {
    margin: 0;
    font-size: .95rem;
    font-weight: 700;
    color: var(--bs-heading-color, inherit);
}

.calendar-summary-category-description {
    margin-top: 2px;
    color: var(--bs-secondary-color, #6c757d);
    font-size: .75rem;
}

.calendar-summary-category .list-group-item:last-child {
    border-bottom: 0;
}

.calendar-summary-readonly-note {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--bs-secondary-color, #6c757d);
    font-size: .75rem;
}

.calendar-events-summary-item {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--bs-border-color, #e9ecef);
    border-radius: 12px;
    background: var(--bs-body-bg, #fff);
    padding: 14px 16px;
}

.calendar-events-summary-item::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    width: 4px;
    background: var(--event-accent, #1ab394);
}

.calendar-events-summary-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: rgba(26, 179, 148, 0.10);
    color: var(--event-accent, #1ab394);
    font-size: 19px;
}

.calendar-summary-empty {
    min-height: 230px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--bs-secondary-color, #6c757d);
}

.calendar-summary-empty i {
    font-size: 54px;
    opacity: .45;
}

.calendar-events-summary-icon+.flex-grow-1 {
    min-width: 0;
}

#calendarEventsSummaryModal .list-group-item {
    cursor: default;
}

#calendarEventsSummaryModal .list-group-item:hover {
    background: transparent;
}

#calendarEventsSummaryModal .calendar-summary-readonly-content a,
#calendarEventsSummaryModal .calendar-summary-readonly-content button {
    pointer-events: none;
}

#calendarEventsSummaryModal .nav-tabs .nav-link {
    pointer-events: auto;
}

.fc .fc-daygrid-day-frame {
    position: relative;
}

.fc .fc-daygrid-day-top {
    position: relative;
    z-index: 20;
    min-height: 36px;
}

.fc .fc-daygrid-day-number {
    position: relative;
    z-index: 21;
}

.fc .fc-daygrid-day .calendar-day-events-btn {
    position: absolute;
    top: 4px;
    inset-inline-end: 5px;
    z-index: 80;
    pointer-events: auto;
    touch-action: manipulation;
}

.fc .fc-col-header-cell .calendar-week-events-btn {
    position: relative;
    z-index: 80;
    pointer-events: auto;
    touch-action: manipulation;
}

.calendar-summary-file-card,
.calendar-summary-image-card {
    height: 100%;
    border: 1px solid var(--bs-border-color, #e9ecef);
    border-radius: 12px;
    background: var(--bs-body-bg, #fff);
}

.calendar-summary-file-card {
    padding: 14px;
}

.calendar-summary-file-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 11px;
    background: var(--bs-primary-bg-subtle, rgba(26, 179, 148, .1));
    color: var(--bs-primary, #1ab394);
    font-size: 21px;
}

.calendar-summary-image-preview {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 11px 11px 0 0;
    background: var(--bs-light, #f8f9fa);
    display: flex;
    align-items: center;
    justify-content: center;
}

.calendar-summary-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.calendar-summary-image-preview i {
    font-size: 44px;
    color: var(--bs-secondary-color, #6c757d);
    opacity: .55;
}

.calendar-summary-image-info {
    padding: 12px 14px;
}

@media (max-width: 575.98px) {
    .calendar-day-events-btn {
        width: 25px;
        height: 25px;
        border-radius: 7px;
    }

    .fc .fc-daygrid-day-top {
        padding-inline: 3px;
        gap: 2px;
    }

    .calendar-events-summary-item {
        padding: 12px;
    }
}




/* فقط چیدمان سربرگ روزهای تقویم اصلی: عدد راست، دکمه مناسبت چپ */
.calendar-main-shell #calendar .fc-daygrid-day-top {
    position: relative;
    min-height: 38px;
    width: 100%;
    display: flex !important;
    align-items: center;
    justify-content: space-between !important;
    gap: 8px;
    padding: 5px 6px 2px;
}

.calendar-main-shell #calendar .fc-daygrid-day-number {
    position: relative !important;
    inset: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 21;
    flex: 0 0 auto;
    text-align: right;
}

.calendar-main-shell #calendar .fc-daygrid-day .calendar-day-events-btn {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    margin: 0 !important;
    z-index: 80;
    flex: 0 0 auto;
}

@media (max-width: 575.98px) {
    .calendar-main-shell #calendar .fc-daygrid-day-top {
        gap: 4px;
        padding: 4px 4px 2px;
    }
}

.table-min-width {
    width: 100px;
    min-width: 100px;
    white-space: nowrap;
}

/* QALAM: global mobile layout fix (2026-08-09) */
/*
 * The desktop layout reserves sidenav space with margin-right. On mobile that
 * space must be released regardless of the current data-sidenav-size value.
 * Keep desktop behavior untouched and turn the RTL sidenav into an off-canvas
 * panel controlled by the existing html.sidebar-enable class.
 */
@media (max-width: 991.98px) {
    html:not([data-layout="topnav"]) .app-topbar,
    html:not([data-layout="topnav"]) .content-page {
        margin-right: 0 !important;
        margin-left: 0 !important;
        max-width: 100%;
        min-width: 0;
    }

    html:not([data-layout="topnav"]) .content-page {
        width: 100%;
    }

    html:not([data-layout="topnav"]) .sidenav-menu {
        position: fixed !important;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        width: var(--ins-sidenav-width) !important;
        max-width: 88vw;
        margin-right: 0 !important;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
        -webkit-transition: opacity .25s ease-in-out, visibility .25s ease-in-out, -webkit-transform .25s ease-in-out;
        transition: opacity .25s ease-in-out, visibility .25s ease-in-out, transform .25s ease-in-out;
        z-index: 1055;
    }

    html:not([data-layout="topnav"]).sidebar-enable .sidenav-menu {
        margin-right: 0 !important;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    html:not([data-layout="topnav"]) .sidenav-menu .simplebar-content-wrapper,
    html:not([data-layout="topnav"]) .sidenav-menu .simplebar-mask {
        overflow: hidden auto !important;
    }

    html:not([data-layout="topnav"]) .sidenav-menu .simplebar-scrollbar {
        display: block !important;
    }

    html:not([data-layout="topnav"]) .button-close-offcanvas {
        display: block;
    }

    .wrapper,
    .content-page,
    .content-page > .content,
    .content-page .container-fluid {
        min-width: 0;
        max-width: 100%;
    }

    .app-topbar .topbar-menu {
        min-width: 0;
        max-width: 100%;
    }
}