:root,
[data-bs-theme=light],
[data-bs-theme=dark] {
    --brand-primary: #660f11;
    --brand-primary-dark: #4a0a0c;
    --brand-primary-hover: #7a1518;
    --brand-gold: #E8C547;
    --brand-gold-dark: #C9A227;
    --brand-lavender: #8B6FBF;
    --brand-mint: #2BBBAD;
    --brand-soft: #F8F4F3;

    --bs-primary: #660f11 !important;
    --bs-primary-active: #4a0a0c !important;
    --bs-primary-light: #F8EAEA !important;
    --bs-primary-inverse: #ffffff !important;
    --bs-primary-rgb: 102, 15, 17 !important;
    --bs-primary-clarity: rgba(102, 15, 17, 0.2) !important;
    --bs-primary-text-emphasis: #4a0a0c !important;
    --bs-primary-bg-subtle: #F8EAEA !important;
    --bs-primary-border-subtle: #E4B4B5 !important;
    --bs-text-primary: #660f11 !important;
    --bs-pagination-active-bg: #660f11 !important;
    --bs-pagination-active-border-color: #660f11 !important;
    --bs-component-active-bg: #660f11 !important;
    --bs-component-hover-color: #660f11 !important;
    --bs-component-checked-bg: #660f11 !important;
    --bs-nav-link-color: #660f11 !important;
    --bs-link-color: #660f11 !important;
    --bs-link-color-rgb: 102, 15, 17 !important;
    --bs-link-hover-color: #4a0a0c !important;
    --bs-link-hover-color-rgb: 74, 10, 12 !important;
    --bs-focus-ring-color: rgba(102, 15, 17, 0.25) !important;
    --bs-menu-link-color-hover: #660f11 !important;
    --bs-menu-link-color-show: #660f11 !important;
    --bs-menu-link-color-here: #660f11 !important;
    --bs-menu-link-color-active: #660f11 !important;
    --bs-ribbon-label-bg: #660f11 !important;
    --bs-scrolltop-bg-color: #660f11 !important;
    --bs-scrolltop-bg-color-hover: #4a0a0c !important;
    --bs-warning: #C9A227 !important;
    --bs-warning-active: #A8861A !important;
    --bs-warning-light: #FBF6E4 !important;
    --bs-warning-rgb: 201, 162, 39 !important;
    --bs-text-warning: #8A7010 !important;
    --bs-info: #8B6FBF !important;
    --bs-info-active: #6F54A8 !important;
    --bs-info-light: #F3EEF8 !important;
    --bs-info-rgb: 139, 111, 191 !important;
    --bs-text-info: #5A458C !important;
    --bs-success: #1A8A7A !important;
    --bs-success-active: #146E62 !important;
    --bs-success-light: #E6F6F3 !important;
    --bs-success-rgb: 26, 138, 122 !important;
    --bs-text-success: #146E62 !important;
    --bs-font-sans-serif: "Tajawal", Helvetica, "sans-serif";
    --bs-form-invalid-color: #ea868f !important;
}

[data-bs-theme=dark] {
    --bs-primary: #A82428 !important;
    --bs-primary-active: #C44A4D !important;
    --bs-primary-light: #2A1415 !important;
    --bs-primary-rgb: 168, 36, 40 !important;
    --bs-text-primary: #E8C547 !important;
    --bs-link-color: #E8C547 !important;
    --bs-link-hover-color: #F3D56A !important;
    --bs-menu-link-color-hover: #E8C547 !important;
    --bs-menu-link-color-show: #E8C547 !important;
    --bs-menu-link-color-here: #E8C547 !important;
    --bs-menu-link-color-active: #E8C547 !important;
}

.btn-primary,
.btn.btn-primary {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: #660f11;
    --bs-btn-border-color: #660f11;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #7a1518;
    --bs-btn-hover-border-color: #7a1518;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #4a0a0c;
    --bs-btn-active-border-color: #4a0a0c;
    --bs-btn-disabled-color: #ffffff;
    --bs-btn-disabled-bg: #660f11;
    --bs-btn-disabled-border-color: #660f11;
    --bs-btn-focus-shadow-rgb: 102, 15, 17;
}

.btn-outline-primary,
.btn.btn-outline-primary {
    --bs-btn-color: #660f11;
    --bs-btn-border-color: #660f11;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #660f11;
    --bs-btn-hover-border-color: #660f11;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #4a0a0c;
    --bs-btn-active-border-color: #4a0a0c;
    --bs-btn-disabled-color: #660f11;
    --bs-btn-disabled-border-color: #660f11;
    --bs-btn-focus-shadow-rgb: 102, 15, 17;
}

.nav-pills {
    --bs-nav-pills-link-active-bg: #660f11 !important;
}

.progress {
    --bs-progress-bar-bg: #660f11 !important;
}

body.app-default {
    background-color: #F8F4F3;
}

.app-header {
    border-bottom: 1px solid rgba(102, 15, 17, 0.08);
}

[data-kt-app-layout=dark-sidebar] .app-sidebar {
    background-color: #660f11;
    background-image: radial-gradient(ellipse at top, #7a1518 0%, #660f11 48%, #4a0a0c 100%);
    border-right: 0;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .app-sidebar-logo {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    height: auto !important;
    min-height: 0;
    overflow: visible;
    padding-top: 22px;
    padding-bottom: 8px;
    border-bottom: 0;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .app-sidebar-toggle {
    top: 58px;
    background-color: #ffffff !important;
    color: #660f11 !important;
    border: 0;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .app-sidebar-toggle i {
    color: #660f11 !important;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .sidebar-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .sidebar-brand__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    padding: 4px;
    overflow: hidden;
    border-radius: 50%;
    background: linear-gradient(145deg, #E8C547, #C9A227 55%, #8a6d14);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .22), 0 0 0 8px rgba(232, 197, 71, .12);
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .sidebar-brand__logo .app-sidebar-logo-default {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
    padding: 8px;
    border-radius: 50%;
    background: #1a0808;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .sidebar-brand__logo .app-sidebar-logo-minimize {
    display: none;
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 50%;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .sidebar-brand__name {
    color: #ffffff;
    font-weight: 800;
    font-size: 1.02rem;
    line-height: 1.3;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .sidebar-brand__hint {
    color: rgba(232, 197, 71, .85);
    font-size: .75rem;
    font-weight: 600;
    margin-top: 2px;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .sidebar-search {
    position: relative;
    z-index: 5;
    flex-shrink: 0;
    margin: 4px 0 0;
    padding-bottom: 16px;
    pointer-events: auto;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .sidebar-search__field {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    margin: 0;
    padding: 0 12px;
    cursor: text;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(232, 197, 71, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .sidebar-search__field:focus-within {
    background: rgba(0, 0, 0, 0.32);
    border-color: rgba(232, 197, 71, 0.7);
    box-shadow: 0 0 0 3px rgba(232, 197, 71, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .sidebar-search__icon {
    display: block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: #E8C547;
    pointer-events: none;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .sidebar-search__input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: 42px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #ffffff !important;
    caret-color: #E8C547;
    font-size: .92rem;
    font-weight: 600;
    outline: none !important;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .sidebar-search__input::placeholder {
    color: rgba(255, 255, 255, 0.55);
    font-weight: 500;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .sidebar-search__clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    flex-shrink: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    cursor: pointer;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .sidebar-search__clear[hidden] {
    display: none !important;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .sidebar-search__clear svg {
    width: 12px;
    height: 12px;
    display: block;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .sidebar-search__clear:hover {
    background: rgba(232, 197, 71, 0.28);
    color: #E8C547;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-heading {
    color: rgba(232, 197, 71, 0.72);
    letter-spacing: 0.04em;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link {
    color: rgba(255, 255, 255, 0.78);
    border-radius: 12px;
    margin-bottom: 2px;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-title {
    color: rgba(255, 255, 255, 0.78);
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-icon,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-icon .svg-icon,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-icon i {
    color: rgba(255, 255, 255, 0.55);
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.hover:not(.here) > .menu-link:not(.disabled):not(.active):not(.here),
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) {
    background-color: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link.active,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.here > .menu-link,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.show > .menu-link {
    background-color: rgba(232, 197, 71, 0.18) !important;
    color: #E8C547 !important;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link.active .menu-title,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.here > .menu-link .menu-title,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.show > .menu-link .menu-title,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link.active .menu-icon,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link.active .menu-icon i,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.here > .menu-link .menu-icon,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.here > .menu-link .menu-icon i,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.show > .menu-link .menu-icon,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.show > .menu-link .menu-icon i {
    color: #E8C547 !important;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .form-control.form-control-solid {
    background-color: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border-color: transparent;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .form-control.form-control-solid::placeholder {
    color: rgba(255, 255, 255, 0.55);
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .btn-custom.btn-primary {
    background-color: #E8C547 !important;
    border-color: #E8C547 !important;
    color: #4a0a0c !important;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .btn-custom.btn-primary:hover {
    background-color: #C9A227 !important;
    border-color: #C9A227 !important;
    color: #4a0a0c !important;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .btn-custom.btn-primary i,
[data-kt-app-layout=dark-sidebar] .app-sidebar .btn-custom.btn-primary .svg-icon {
    color: #4a0a0c !important;
}

@media (min-width: 992px) {
    [data-kt-app-sidebar-minimize=on][data-kt-app-layout=dark-sidebar] .app-sidebar:not(:hover) .app-sidebar-logo {
        align-items: center;
        padding-top: 18px;
        padding-bottom: 18px;
    }

    [data-kt-app-sidebar-minimize=on][data-kt-app-layout=dark-sidebar] .app-sidebar:not(:hover) .app-sidebar-toggle {
        top: 39px;
    }

    [data-kt-app-sidebar-minimize=on][data-kt-app-layout=dark-sidebar] .app-sidebar:not(:hover) .sidebar-brand__logo {
        width: 42px;
        height: 42px;
        padding: 3px;
        box-shadow: 0 6px 14px rgba(0, 0, 0, .2), 0 0 0 4px rgba(232, 197, 71, .1);
    }

    [data-kt-app-sidebar-minimize=on][data-kt-app-layout=dark-sidebar] .app-sidebar:not(:hover) .sidebar-brand__logo .app-sidebar-logo-default,
    [data-kt-app-sidebar-minimize=on][data-kt-app-layout=dark-sidebar] .app-sidebar:not(:hover) .sidebar-brand__meta,
    [data-kt-app-sidebar-minimize=on][data-kt-app-layout=dark-sidebar] .app-sidebar:not(:hover) .sidebar-search,
    [data-kt-app-sidebar-minimize=on][data-kt-app-layout=dark-sidebar] .app-sidebar:not(:hover) #kt_app_sidebar_menu_search {
        display: none !important;
    }

    [data-kt-app-sidebar-minimize=on][data-kt-app-layout=dark-sidebar] .app-sidebar:not(:hover) .sidebar-brand__logo .app-sidebar-logo-minimize {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 4px;
        background: #1a0808;
        border-radius: 50%;
    }

    [data-kt-app-layout=dark-sidebar] .app-sidebar .menu-sub-lg-dropdown {
        background-color: #4a0a0c;
    }
}

body.app-blank h1 {
    color: #660f11 !important;
}

body.app-blank .w-50.bgi-size-cover,
body.app-blank .auth-aside {
    position: relative;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #660f11 !important;
    background-image:
        radial-gradient(circle at 16% 18%, rgba(232, 197, 71, .22), transparent 34%),
        radial-gradient(circle at 86% 82%, rgba(201, 162, 39, .16), transparent 38%),
        radial-gradient(ellipse at center, #7a1518 0%, #660f11 52%, #4a0a0c 100%) !important;
}

body.app-blank .auth-aside::before,
body.app-blank .auth-aside::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(232, 197, 71, .22);
    pointer-events: none;
}

body.app-blank .auth-aside::before {
    width: 420px;
    height: 420px;
    inset-inline-start: -90px;
    top: -110px;
}

body.app-blank .auth-aside::after {
    width: 360px;
    height: 360px;
    inset-inline-end: -80px;
    bottom: -90px;
}

body.app-blank .auth-aside__content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 40px 32px;
    max-width: 420px;
}

body.app-blank .auth-aside__orb {
    width: min(280px, 58vw);
    height: min(280px, 58vw);
    margin: 0 auto 28px;
    padding: 8px;
    border-radius: 50%;
    background: linear-gradient(145deg, #E8C547, #C9A227 55%, #8a6d14);
    box-shadow: 0 22px 48px rgba(0, 0, 0, .28), 0 0 0 16px rgba(201, 162, 39, .12);
}

body.app-blank .auth-aside__logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    background: #111;
}

body.app-blank .auth-aside__title {
    color: #fff;
    font-weight: 800;
    font-size: 2rem;
    line-height: 1.3;
    margin: 0 0 8px;
}

body.app-blank .auth-aside__hint {
    color: rgba(255, 255, 255, .72);
    font-weight: 600;
    font-size: .98rem;
    margin: 0;
}

.page-item.active .page-link,
.pagination .page-item.active .page-link {
    background-color: #660f11 !important;
    border-color: #660f11 !important;
    color: #ffffff !important;
}

.card {
    --bs-card-border-radius: 15px !important;
}

.btn {
    --bs-btn-disabled-opacity: 0.8 !important;
}

body,
html {
    font-family: var(--bs-font-sans-serif)
}

[type="tel"],
[type="url"],
[type="email"],
[type="number"] {
    direction: inherit;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

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

.errorMessage {
    color: var(--bs-form-invalid-color) !important
}

.dt-container {
    overflow-x: auto;
    margin-top: 5px;
}

.image-input-custom-wrapper {
    border: 3px solid var(--bs-body-bg);
    box-shadow: var(--bs-box-shadow);
    width: 120px;
    height: 120px;
    border-radius: 0.475rem;
    background-repeat: no-repeat;
    background-size: cover;
}

.image-input [data-kt-image-input-action="delete"] {
    position: absolute;
    right: 100%;
    top: 100%;
}

html[dir="ltr"] .image-input [data-kt-image-input-action="delete"] {
    left: 100%;
}

html[dir="rtl"] .select2-container--bootstrap5 .select2-dropdown .select2-results__option.select2-results__option--selected:after {
    left: 1.25rem;
    right: auto;
}

a {
    cursor: pointer;
}

table.dataTable {
    text-align: center;
    vertical-align: middle;
}

div.dt-processing {
    position: absolute !important;
    top: 250px !important;
    left: 50% !important;
    width: auto !important;
    text-align: center !important;
}

@media (min-width: 1200px) {
    html[dir="rtl"] .modal {
        right: auto;
    }
}

.modal-dialog-centered {
    display: table;
    min-width: 400px;
}

.logo-default {
    width: 600px;
    height: 600px;
}

@media(min-width:993px) {
    .logo-minimize {
        display: none;
    }
}

.datatable-name {
    width: 400px !important;
}

.user-avatar-wrapper-sub {
    width: 150px;
    padding-right: 10px;
    /* padding-left: 10px; */
}

html[dir="ltr"] .user-avatar-wrapper-sub {
    padding-left: 10px;
    /* padding-right: 60px; */
}

@media (max-width: 992px) {
    .logo-default {
        display: none;
    }

    .logo-minimize {
        width: 300px !important;
        height: 300px !important;
    }
}

@media (max-width: 300px) {
    .logo-default {
        display: none;
    }

    .logo-minimize {
        width: 200px !important;
        height: 200px !important;
    }
}

.table> :not(caption)>*>* {
    padding: 0 8px;
}

.table>thead>tr>th {
    padding: 4.5px 8px;
}

.card-icon {
    font-size: 35px !important;
}

.card-main-title {
    font-size: 15px !important;
}

.card.card-flush>.card-header {
    padding-top: 40px !important;
}

.main-card {
    height: 160px !important;
}


.danger-row {
    background-color: #f8285a36 !important;
}

.dataTable tbody tr:nth-child(even) {
    background-color: #ffffff;
}

.dataTable tbody tr:nth-child(odd) {
    background-color: rgba(102, 15, 17, 0.05);
}

.filterPrintDataShow {
    z-index: 107;
    position: fixed;
    inset: 0px 0px auto auto;
    margin: 0px;
    transform: translate(-1475px, 250px);
    border-radius: 10px;
}

@media(min-width:250px) and (max-width:299px) {
    .filterPrintDataShow {
        transform: translate(0px, 310px);
    }
}

@media(min-width:300px) and (max-width:589px) {
    .filterPrintDataShow {
        transform: translate(-50px, 256px);
    }
    .dataTable thead tr th {
        min-width: 100px !important;
    }
}

@media(min-width:590px) and (max-width:820px) {
    .filterPrintDataShow {
        transform: translate(-350px, 230px);
    }
}

@media(min-width:821px) and (max-width:1024px) {
    .filterPrintDataShow {
        transform: translate(-580px, 250px);
    }
}

@media(min-width:1025px) and (max-width:1120px) {
    .filterPrintDataShow {
        transform: translate(-630px, 250px);
    }
}

@media(min-width:1121px) and (max-width:1400px) {
    .filterPrintDataShow {
        transform: translate(-930px, 250px);
    }
}

@media(min-width:1401px) and (max-width:1650px) {
    .filterPrintDataShow {
        transform: translate(-930px, 250px) !important;
    }
}

@media(min-width:1651px) and (max-width:1785px) {
    .filterPrintDataShow {
        transform: translate(-1330px, 250px) !important;
    }
}

.btn.btn-secondary {
    background-color: var(--bs-secondary) !important;
}

.btn.btn-secondary:focus:not(.btn-active) .show {
    background-color: var(--bs-secondary-active) !important;
}

.buttons-dt-hsm {
    border-radius: 0;
}

.buttons-print-hsm {
    border-left: 3px solid #dee2e6 !important;
}

.dt-buttons {
    display: none !important;
}

[data-bs-theme=dark] .dataTable tbody tr:nth-child(odd) {
    background-color: #000;
}


[data-bs-theme=dark] .danger-row {
    background-color: #f8285a36 !important;
}



[data-bs-theme=dark] .dataTable tbody tr:nth-child(even) {
    background-color: #80829000;
}

.print-btn {
    border-bottom-right-radius: 10px;
    box-shadow: var(--bs-menu-dropdown-box-shadow) !important;
}

.export-btn {
    border-bottom-left-radius: 10px;
    box-shadow: var(--bs-menu-dropdown-box-shadow) !important;
}

[data-bs-theme=dark] .print-title {
    color: #fff !important;
}

[data-bs-theme=dark] .printDataCheckBoxes label {
    color: #fff !important;
}

.form-check {
    cursor: pointer;
    padding: 3px 30px !important;
}

.form-check-label {
    cursor: pointer;
}

.nav-profile-container {
    overflow-x: scroll;
    display: flex;
    overflow-y: hidden;
    flex-wrap: nowrap;
}

.fade:not(.show) {
    opacity: 0;
    display: none;
    /* height: 0; */
}

.dataTable thead {
    background-color: #660f11;
    vertical-align: middle;
}

.dataTable thead tr th {
    color: #ffffff !important;
    min-width: 100px !important;
}


.select2-container--bootstrap5 .select2-selection__clear {
    right: auto !important;
    left: 10px;
    width: 10px;
    height: 10px;
}

.select2-container--bootstrap5 .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove {
    height: 0.6rem;
    width: 0.6rem;
    right: auto !important;
    left: 8px;
}

html[dir="ltr"] .select2-container--bootstrap5 .select2-selection__clear {
    left: auto !important;
    right: 10px !important;
    width: 10px;
    height: 10px;
}

html[dir="ltr"] .select2-container--bootstrap5 .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove {
    height: 0.6rem;
    width: 0.6rem;
    left: auto !important;
    right: 10px !important;
}

.error-stepper {
    background-color: #F8285A !important;
}

.form-control.select2-hidden-accessible {
    display: contents !important;
}

.form-check.form-check-solid .form-check-input[type=checkbox]:indeterminate {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.user-name-link,
.user-name {
    color: var(--bs-primary) !important;
}

.user-name-link:hover {
    color: var(--bs-primary-active) !important;
}

.user-name-link::after {
    background-color: var(--bs-primary) !important;
}

.link-primary {
    color: var(--bs-primary) !important;
}

.link-primary:hover {
    color: var(--bs-primary-active) !important;
}

.select2-container--bootstrap5 .select2-results__option--highlighted,
.select2-container--bootstrap5 .select2-results__option--selected,
.select2-container--bootstrap5 .select2-results__option[aria-selected=true] {
    background-color: var(--bs-primary) !important;
    color: #ffffff !important;
}

.scrolltop {
    background-color: var(--bs-primary) !important;
}

/* KPI / datatable statistic cards */
.card.card-flush.bg-light-primary,
.card.card-flush.bg-light-success,
.card.card-flush.bg-light-info,
.card.card-flush.bg-light-warning,
.card.card-flush.bg-light-danger,
.card.bg-light-primary,
.card.bg-light-success,
.card.bg-light-info,
.card.bg-light-warning,
.card.bg-light-danger {
    border: 1px solid rgba(102, 15, 17, 0.08) !important;
    border-radius: 1rem !important;
    box-shadow: 0 8px 22px rgba(102, 15, 17, 0.05);
    overflow: hidden;
    background: #ffffff !important;
}

.card.card-flush.bg-light-primary,
.card.bg-light-primary {
    box-shadow: inset 0 3px 0 #660f11, 0 8px 22px rgba(102, 15, 17, 0.05);
}

.card.card-flush.bg-light-success,
.card.bg-light-success {
    box-shadow: inset 0 3px 0 #1A8A7A, 0 8px 22px rgba(102, 15, 17, 0.05);
}

.card.card-flush.bg-light-info,
.card.bg-light-info {
    box-shadow: inset 0 3px 0 #8B6FBF, 0 8px 22px rgba(102, 15, 17, 0.05);
}

.card.card-flush.bg-light-warning,
.card.bg-light-warning {
    box-shadow: inset 0 3px 0 #C9A227, 0 8px 22px rgba(102, 15, 17, 0.05);
}

.card.card-flush.bg-light-danger,
.card.bg-light-danger {
    box-shadow: inset 0 3px 0 #F8285A, 0 8px 22px rgba(102, 15, 17, 0.05);
}

.card.card-flush.bg-light-primary .fs-2hx,
.card.card-flush.bg-light-primary .fs-2,
.card.bg-light-primary .fs-2hx,
.card.bg-light-primary .fs-2 {
    color: #660f11;
}

.card.card-flush.bg-light-success .fs-2hx,
.card.card-flush.bg-light-success .fs-2,
.card.bg-light-success .fs-2hx,
.card.bg-light-success .fs-2 {
    color: #1A8A7A;
}

.card.card-flush.bg-light-info .fs-2hx,
.card.card-flush.bg-light-info .fs-2,
.card.bg-light-info .fs-2hx,
.card.bg-light-info .fs-2 {
    color: #5A458C;
}

.card.card-flush.bg-light-warning .fs-2hx,
.card.card-flush.bg-light-warning .fs-2,
.card.bg-light-warning .fs-2hx,
.card.bg-light-warning .fs-2 {
    color: #8A7010;
}

.card.card-flush.bg-light-danger .fs-2hx,
.card.card-flush.bg-light-danger .fs-2 {
    color: #D81A48;
}

.card.card-flush.bg-light-primary .text-gray-600,
.card.card-flush.bg-light-success .text-gray-600,
.card.card-flush.bg-light-info .text-gray-600,
.card.card-flush.bg-light-warning .text-gray-600,
.card.card-flush.bg-light-danger .text-gray-600 {
    color: #6B5E5E !important;
    font-size: .9rem;
}

.nav-tabs .badge.badge-circle.badge-primary {
    background-color: #F8EAEA !important;
    color: #660f11 !important;
}

.nav-tabs .nav-link.active .badge.badge-circle.badge-primary {
    background-color: #660f11 !important;
    color: #ffffff !important;
}

.accordion-icon-collapse .accordion-icon {
    color: #660f11;
}

.badge-light-primary {
    background-color: #F8EAEA !important;
    color: #660f11 !important;
}

.badge-light-info {
    background-color: #F3EEF8 !important;
    color: #5A458C !important;
}

.badge-light-warning {
    background-color: #FBF6E4 !important;
    color: #8A7010 !important;
}

.badge-light-success {
    background-color: #E6F6F3 !important;
    color: #146E62 !important;
}

.badge.badge-success {
    background-color: #1A8A7A !important;
    color: #ffffff !important;
}

.badge.badge-danger {
    background-color: #F8EAEA !important;
    color: #660f11 !important;
}

.status-toggle {
    display: inline-flex;
    text-decoration: none !important;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1;
    border: 1px solid transparent;
    transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.status-pill__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-pill--active {
    background-color: #E6F6F3;
    color: #146E62;
    border-color: rgba(26, 138, 122, .18);
}

.status-pill--active .status-pill__dot {
    background-color: #1A8A7A;
    box-shadow: 0 0 0 3px rgba(26, 138, 122, .16);
}

.status-pill--inactive {
    background-color: #F8EAEA;
    color: #660f11;
    border-color: rgba(102, 15, 17, .12);
}

.status-pill--inactive .status-pill__dot {
    background-color: #660f11;
    box-shadow: 0 0 0 3px rgba(102, 15, 17, .12);
}

.status-toggle:hover .status-pill {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(74, 10, 12, .08);
}

.swal2-popup.brand-swal,
.swal2-popup {
    border-radius: 20px !important;
    padding-top: 28px !important;
}

.swal2-title {
    color: #4a0a0c !important;
    font-weight: 800 !important;
}

.swal2-html-container {
    color: #6b4a4c !important;
}

.swal2-icon.swal2-info {
    border-color: rgba(102, 15, 17, .28) !important;
    color: #660f11 !important;
}

.swal2-icon.swal2-info .swal2-icon-content {
    color: #660f11 !important;
}

.swal2-icon.swal2-question {
    border-color: rgba(201, 162, 39, .45) !important;
    color: #C9A227 !important;
}

.swal2-icon.swal2-question .swal2-icon-content {
    color: #C9A227 !important;
}

.swal2-icon.swal2-warning {
    border-color: rgba(201, 162, 39, .45) !important;
    color: #C9A227 !important;
}

.swal2-icon.swal2-success {
    border-color: rgba(26, 138, 122, .35) !important;
    color: #1A8A7A !important;
}

.swal2-icon.swal2-success [class^=swal2-success-line] {
    background-color: #1A8A7A !important;
}

.swal2-icon.swal2-success .swal2-success-ring {
    border-color: rgba(26, 138, 122, .35) !important;
}

.swal2-actions .btn {
    min-width: 110px;
    border-radius: 10px !important;
    font-weight: 700 !important;
}

.swal2-actions .btn-info,
.swal2-actions .btn-primary,
.swal2-styled.swal2-confirm.btn-info,
.swal2-styled.swal2-confirm.btn-primary {
    background-color: #660f11 !important;
    border-color: #660f11 !important;
    color: #ffffff !important;
}

.swal2-actions .btn-warning,
.swal2-styled.swal2-confirm.btn-warning {
    background-color: #C9A227 !important;
    border-color: #C9A227 !important;
    color: #4a0a0c !important;
}

.swal2-actions .btn-light,
.swal2-actions .btn-secondary {
    background-color: #F3ECEC !important;
    border-color: #F3ECEC !important;
    color: #5c3d3e !important;
}

.chat-page {
    min-height: calc(100vh - 220px);
    height: calc(100vh - 200px);
    gap: 18px;
}

.chat-contacts {
    width: 100%;
}

@media (min-width: 992px) {
    .chat-contacts {
        width: 340px;
    }
}

.chat-contacts .card,
.chat-thread .card {
    border: 1px solid #eee4e4;
    box-shadow: 0 8px 24px rgba(74, 10, 12, .06);
}

.chat-search {
    width: 100%;
}

.chat-search .form-control {
    height: 46px;
    padding-inline-start: 42px;
    border: 0;
    border-radius: 12px;
    background: #f4f4f6;
    color: #3b2a2b;
}

.chat-search__icon {
    position: absolute;
    top: 50%;
    inset-inline-start: 14px;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    color: #8a7576;
    pointer-events: none;
}

.chat-contacts__list {
    max-height: calc(100vh - 320px);
    overflow-y: auto;
}

.chat-contact {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 10px;
    cursor: pointer;
    border-bottom: 1px solid #f1eaea;
}

.chat-contact.is-active {
    background: #f6f1fb;
    border-radius: 12px;
}

.chat-contact__avatar,
.chat-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #F8EAEA;
    color: #660f11;
    font-weight: 800;
    flex-shrink: 0;
}

.chat-avatar {
    width: 36px;
    height: 36px;
    font-size: .85rem;
}

.chat-contact__body {
    min-width: 0;
    flex: 1;
}

.chat-contact__name {
    color: #2b1a1b;
    font-weight: 800;
    line-height: 1.3;
}

.chat-contact__preview,
.chat-contact__meta {
    color: #8a7576;
    font-size: .78rem;
}

.chat-contact__preview {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-contact__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.chat-contact__badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #660f11;
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.chat-thread {
    min-width: 0;
    flex: 1;
}

.chat-thread .card,
#admin_chat {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: calc(100vh - 220px);
}

.chat-thread__header {
    border-bottom: 1px solid #f1eaea;
}

.chat-thread__title {
    color: #660f11;
    font-size: 1.15rem;
    font-weight: 800;
}

.chat-thread__body {
    flex: 1 1 auto;
    min-height: 280px;
    width: 100%;
    overflow-y: auto;
    background: #fff;
    padding: 20px !important;
    direction: ltr !important;
}

.chat-empty,
.chat-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 360px;
    gap: 8px;
    color: #8a7576;
}

.chat-empty__title {
    color: #660f11;
    font-weight: 800;
}

.chat-row {
    display: flex;
    width: 100%;
    margin-bottom: 18px;
}

.chat-row__cluster {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    max-width: min(420px, 85%);
}

.chat-row--in {
    justify-content: flex-start;
}

.chat-row--out {
    justify-content: flex-end;
}

.chat-row--out .chat-row__cluster {
    flex-direction: row-reverse;
}

.chat-bubble {
    max-width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    text-align: start;
    overflow-wrap: anywhere;
    direction: rtl;
    unicode-bidi: isolate;
}

.chat-bubble--in {
    background: #eef7fb;
}

.chat-bubble--out {
    background: #F8EAEA;
}

.chat-bubble__name {
    display: block;
    margin-bottom: 6px;
    font-weight: 800;
}

.chat-bubble--in .chat-bubble__name {
    color: #1A8A7A;
}

.chat-bubble--out .chat-bubble__name {
    color: #660f11;
}

.chat-bubble p {
    margin: 0;
    color: #2b1a1b;
    line-height: 1.6;
}

.chat-bubble img,
.chat-bubble video {
    display: block;
    max-width: 240px;
    border-radius: 10px;
}

.chat-bubble__time {
    display: block;
    margin-top: 8px;
    color: #8a7576;
    font-size: .75rem;
}

.chat-file {
    display: inline-flex;
    color: #660f11;
    font-weight: 700;
}

.chat-thread__footer {
    border-top: 1px solid #f1eaea;
    flex-shrink: 0;
    background: #fff;
    padding: 16px 20px 18px !important;
}

.chat-composer {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 6px;
    border: 1px solid #eadfdf;
    border-radius: 28px;
    background: #faf7f7;
}

.chat-composer:focus-within {
    border-color: rgba(102, 15, 17, .35);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(102, 15, 17, .08);
}

.chat-composer__field {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.chat-thread__footer textarea,
.chat-composer textarea {
    width: 100%;
    min-height: 44px;
    max-height: 120px;
    margin: 0;
    padding: 10px 8px;
    border: 0;
    border-radius: 0;
    resize: none;
    outline: none;
    background: transparent;
    line-height: 1.5;
    color: #2b1a1b;
}

.chat-thread__footer textarea:focus,
.chat-composer textarea:focus {
    border: 0;
    box-shadow: none;
}

.chat-composer__status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 0;
}

.chat-composer__count {
    color: #b09a9b;
    font-size: .72rem;
    font-weight: 600;
    margin-inline-start: auto;
}

.chat-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 70%;
    padding: 2px 8px 2px 4px;
    border-radius: 999px;
    background: #F8EAEA;
    color: #660f11;
    font-size: .72rem;
    font-weight: 700;
}

.chat-file-chip[hidden],
.chat-composer__count[hidden] {
    display: none !important;
}

.chat-file-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-file-chip__remove {
    border: 0;
    background: transparent;
    color: #660f11;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
}

.chat-attach {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #8a7576;
    cursor: pointer;
    flex-shrink: 0;
    overflow: hidden;
}

.chat-attach:hover {
    background: #F8EAEA;
    color: #660f11;
}

.chat-attach input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
    font-size: 0;
}

.chat-attach svg {
    width: 22px;
    height: 22px;
}

.chat-send {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #660f11 !important;
    color: #fff !important;
    flex-shrink: 0;
}

.chat-send:hover:not(:disabled) {
    background: #4e0b0d !important;
}

.chat-send:disabled {
    opacity: .35;
    cursor: not-allowed;
}

.chat-send svg {
    width: 18px;
    height: 18px;
    transform: scaleX(-1);
}

.question-thread-page {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    min-height: calc(100vh - 160px);
}

.question-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    color: #8a7576;
    font-size: .9rem;
    font-weight: 700;
}

.question-back svg {
    width: 16px;
    height: 16px;
}

[dir=rtl] .question-back svg {
    transform: scaleX(-1);
}

.question-back:hover {
    color: #660f11;
}

.question-thread {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #eee4e4;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(74, 10, 12, .06);
}

.question-hero {
    padding: 22px 24px 18px;
    background:
        linear-gradient(180deg, #F8F4F3 0%, #ffffff 48px);
    border-bottom: 1px solid #f1eaea;
}

.question-hero .question-post--hero {
    margin-bottom: 16px;
}

.question-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.question-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.question-chip {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: #f4f1f1;
    color: #5c4a4b;
    font-size: .78rem;
    font-weight: 700;
}

.question-chip--course {
    background: #F8EAEA;
    color: #660f11;
}

.question-chip--status.is-open,
.question-chip--status.is-open {
    background: #E6F6F3;
    color: #146E62;
}

.question-chip--status.is-answered,
.question-chip--status.is-answered {
    background: #FBF6E4;
    color: #8A7010;
}

.question-chip--status.is-closed,
.question-chip--status.is-closed {
    background: #f1f1f1;
    color: #6b6b6b;
}

.question-hero__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.question-status {
    display: flex;
    align-items: center;
    gap: 8px;
}

.question-status__label {
    margin: 0;
    color: #8a7576;
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
}

.question-status select.form-control {
    width: 180px;
}

.question-status .select2-container {
    width: 180px !important;
}

.question-status .select2-container .select2-selection--single {
    height: 42px;
    display: flex;
    align-items: center;
    border: 1px solid #eadfdf;
    border-radius: 8px;
    background: #fff;
}

.question-status .select2-container .select2-selection--single .select2-selection__rendered {
    padding-inline: 12px 8px;
    color: #3b2a2b;
    font-size: .85rem;
    font-weight: 600;
    line-height: 40px;
}

.question-status .select2-container .select2-selection--single .select2-selection__arrow {
    height: 40px;
}

.question-status__save {
    height: 42px;
    padding: 0 16px;
    border: 0;
    border-radius: 8px;
    background: #660f11;
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
}

.question-status__save:hover {
    background: #7a1518;
    color: #fff;
}

.question-delete {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 42px;
    padding: 0 14px;
    border: 1px solid #ead0d0;
    border-radius: 8px;
    background: #fff;
    color: #a61b1b;
    font-size: .85rem;
    font-weight: 700;
}

.question-delete svg {
    width: 16px;
    height: 16px;
}

.question-delete:hover {
    background: #F8EAEA;
    color: #7a1212;
}

.question-post__actions {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.question-delete-toggle {
    padding: 0;
    border: 0;
    background: none;
    color: #a61b1b;
    font-size: .8rem;
    font-weight: 800;
}

.question-delete-toggle:hover {
    color: #7a1212;
    text-decoration: underline;
}

.question-post {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.question-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: 50%;
    background: #F8EAEA;
    color: #660f11;
    font-size: .95rem;
    font-weight: 800;
    flex-shrink: 0;
}

.question-post--hero .question-avatar {
    width: 52px;
    height: 52px;
    font-size: 1.15rem;
}

.question-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.question-avatar--instructor {
    background: #E6F6F3;
    color: #146E62;
}

.question-avatar--admin {
    background: #FBF6E4;
    color: #8A7010;
}

.question-post__body {
    min-width: 0;
    flex: 1;
}

.question-post__topline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
}

.question-post__name {
    color: #2b1a1b;
    font-size: .95rem;
    font-weight: 800;
    line-height: 1.4;
}

.question-post--hero .question-post__name {
    font-size: 1.05rem;
}

.question-role {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 0 7px;
    border-radius: 999px;
    background: #F8EAEA;
    color: #660f11;
    font-size: .68rem;
    font-weight: 800;
}

.question-role--instructor {
    background: #E6F6F3;
    color: #146E62;
}

.question-role--admin {
    background: #FBF6E4;
    color: #8A7010;
}

.question-post__time {
    color: #9a8687;
    font-size: .78rem;
}

.question-post__text {
    margin-top: 8px;
    color: #3b2a2b;
    font-size: .98rem;
    font-weight: 500;
    line-height: 1.75;
}

.question-post--hero .question-post__text {
    margin-top: 10px;
    color: #1f1f1f;
    font-size: 1.18rem;
    font-weight: 700;
    line-height: 1.7;
}

.question-reply-toggle {
    padding: 0;
    border: 0;
    background: none;
    color: #660f11;
    font-size: .8rem;
    font-weight: 800;
}

.question-reply-toggle:hover,
.question-reply-toggle.is-open {
    color: #4a0a0c;
    text-decoration: underline;
}

.question-discussion {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 18px 24px 20px;
}

.question-discussion__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.question-discussion__title {
    margin: 0;
    color: #2b1a1b;
    font-size: 1rem;
    font-weight: 800;
}

.question-discussion__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: #F8EAEA;
    color: #660f11;
    font-size: .75rem;
    font-weight: 800;
}

.question-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px 12px;
    text-align: center;
}

.question-empty__title {
    margin: 0 0 4px;
    color: #660f11;
    font-weight: 800;
}

.question-empty__hint {
    margin: 0;
    color: #8a7576;
    font-size: .9rem;
}

.question-replies {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 4px;
    min-height: 0;
    overflow-y: auto;
}

.question-replies > .question-comment:first-child {
    padding-top: 0;
    border-top: 0;
}

.question-comment {
    padding: 12px 0;
    border-top: 1px solid #f3ecec;
}

.question-comment.is-nested {
    margin-inline-start: 20px;
    padding-inline-start: 16px;
    border-top: 0;
    border-inline-start: 2px solid #eadfdf;
}

.question-comment__children {
    margin-top: 4px;
}

.question-composer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding: 8px;
    border: 1px solid #eadfdf;
    border-radius: 14px;
    background: #faf7f7;
}

.question-composer--nested {
    margin-top: 10px;
    margin-inline-start: 52px;
}

.question-composer__input {
    flex: 1;
    height: 42px;
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #2b1a1b;
    outline: none;
}

.question-composer__input::placeholder {
    color: #b09a9b;
}

.question-composer__send {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    background: #660f11;
    color: #fff;
    font-size: .85rem;
    font-weight: 800;
}

.question-composer__send svg {
    width: 16px;
    height: 16px;
}

[dir=rtl] .question-composer__send svg {
    transform: scaleX(-1);
}

.question-composer__send:hover {
    background: #7a1518;
    color: #fff;
}

@media (max-width: 767px) {
    .question-hero,
    .question-discussion {
        padding-inline: 16px;
    }

    .question-composer--nested {
        margin-inline-start: 0;
    }

    .question-comment.is-nested {
        margin-inline-start: 10px;
        padding-inline-start: 12px;
    }

    .question-composer__send span {
        display: none;
    }
}

.header-bell {
    position: relative;
    display: flex;
    align-items: center;
    margin-inline: 8px;
}

.header-bell__btn {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    outline: 0;
    border-radius: 50%;
    background: var(--brand-primary);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(102, 15, 17, 0.18);
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}

.header-bell__icon {
    width: 20px;
    height: 20px;
    display: block;
    color: #fff;
    flex-shrink: 0;
}

.header-bell__btn:hover,
.header-bell__btn:focus-visible,
.header-bell__btn[aria-expanded="true"] {
    background: var(--brand-primary-hover);
    color: #fff;
    box-shadow: 0 6px 16px rgba(102, 15, 17, 0.28);
}

.header-bell__btn:focus-visible {
    outline: 2px solid var(--brand-gold);
    outline-offset: 2px;
}

.header-bell__badge {
    position: absolute;
    inset-block-end: -4px;
    inset-inline-start: -4px;
    min-width: 22px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--brand-gold);
    color: #2b2208;
    font-size: 10px;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
}

.header-bell__panel {
    position: absolute;
    top: calc(100% + 10px);
    inset-inline-end: 0;
    z-index: 1055;
    width: min(420px, calc(100vw - 24px));
    max-height: min(72vh, 520px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #efe7e7;
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(48, 12, 14, 0.14);
    overflow: hidden;
}

.header-bell__panel[hidden] {
    display: none;
}

.header-bell__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid #f1eaea;
}

.header-bell__head h3 {
    margin: 0;
    color: var(--brand-primary);
    font-size: 15px;
    font-weight: 800;
}

.header-bell__mark {
    border: 0;
    background: transparent;
    color: var(--brand-mint);
    font-size: 12px;
    font-weight: 700;
    padding: 0;
    cursor: pointer;
}

.header-bell__mark:hover {
    color: #146e62;
}

.header-bell__list {
    overflow-y: auto;
    overscroll-behavior: contain;
    max-height: 380px;
    scrollbar-color: var(--brand-primary) transparent;
}

.header-bell__item {
    display: block;
    padding: 14px 16px 13px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid #f3eeee;
    position: relative;
    content-visibility: auto;
    contain-intrinsic-size: 88px;
}

.header-bell__item:last-child {
    border-bottom: 0;
}

.header-bell__item:hover {
    background: #fbf7f7;
}

.header-bell__item.is-unread {
    background: #fffdf8;
}

.header-bell__item.is-unread .header-bell__title {
    color: var(--brand-primary);
}

.header-bell__dot {
    display: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand-gold);
    position: absolute;
    inset-block-start: 18px;
    inset-inline-start: 8px;
}

.header-bell__item.is-unread .header-bell__dot {
    display: block;
}

.header-bell__meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.header-bell__title {
    color: var(--brand-primary);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.4;
}

.header-bell__time {
    flex-shrink: 0;
    color: #6b7280;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.header-bell__body {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #374151;
    font-size: 13px;
    line-height: 1.55;
}

.header-bell__item.is-unread .header-bell__body {
    padding-inline-start: 8px;
}

.header-bell__status {
    padding: 12px 16px 14px;
    text-align: center;
    color: #6b7280;
    font-size: 13px;
    font-weight: 600;
}

.header-bell__status.is-empty {
    padding-block: 36px;
}

@media (max-width: 767px) {
    .header-bell__btn {
        width: 38px;
        height: 38px;
    }

    .header-bell__panel {
        position: fixed;
        top: 64px;
        inset-inline: 12px;
        width: auto;
    }
}

/* Datepickers must sit above stacked Bootstrap modals (curriculum content modal). */
.modal-open .daterangepicker,
body > .daterangepicker {
    z-index: 10050 !important;
}