﻿/*---TEMPORARY, APPLY TO SCSS----*/

.fade-overlay::before {
    background: -webkit-linear-gradient(250deg, rgba(0, 0, 0, 0.1) 30%, rgba(0, 0, 0, 0.9) 100%);
}

    .form-select {
        white-space: nowrap;
    }

    .menu-item {
        user-select: none;
    }

    .ff-special {
        font-family: "Inter", "Noto Color Emoji", Helvetica, "sans-serif";
    }

    .rounded {
        overflow: hidden;
    }

    body:not(.loaded) .wrapper {
        transition: none !important;
    }

    blockquote {
        border-left: solid 3px var(--bs-gray-300);
        margin: 1rem 0;
        padding-left: 1rem;
    }
    /*---Login Background---*/
    .sphere-bgi {
        background: var(--bs-primary);
        background-image: url('https://sphere-qa.s3-accelerate.amazonaws.com/templates/2001/media/auth/auth-bg-sphere-full.png');
        background-image: url('https://sphere-qa.s3-accelerate.amazonaws.com/templates/2001/media/auth/auth-bg-sphere-full.png'), linear-gradient(110deg, var(--bs-primary-gradient-start) 0%, var(--bs-primary-gradient-end) 100%) !important;
        background-attachment: fixed;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    /*---PROBATIONARY: Custom <select> Picker---*/
    select.form-select-custom, .form-select-custom::picker(select) {
        appearance: base-select;
    }

    select.form-select.form-select-custom option:disabled {
        display: none;
    }

    .form-select-custom:open {
        border-color: var(--bs-primary-300) !important;
        box-shadow: 0px 0px 0px 4px var(--bs-primary-clarity) !important;
    }

    .form-select-custom::picker(select) {
        border: none;
        box-shadow: var(--bs-menu-dropdown-box-shadow);
        border-radius: 0.5rem;
        background-color: var(--bs-menu-dropdown-bg-color);
        box-shadow: var(--bs-menu-dropdown-box-shadow);
        padding: 1rem;
        top: calc(anchor(auto) + 1px);
    }

    .form-select-custom::picker-icon, .form-select-custom option::checkmark {
        display: none;
    }

    .form-select-custom option {
        padding: 0.75rem;
        font-size: 1.1rem;
        font-weight: 500;
        line-height: 1.5;
        border-radius: 0.5rem;
    }

        .form-select-custom option:hover, .form-select-custom option:focus {
            background-color: var(--bs-menu-link-bg-color-hover);
            color: var(--bs-menu-link-color-hover);
            cursor: pointer;
        }

        .form-select-custom option:checked {
            background-color: var(--bs-primary-light);
            color: var(--bs-menu-link-color-hover);
            cursor: pointer;
        }

        .form-select-custom option:not(:last-child) {
            margin-bottom: 0.3rem;
        }

    select option::checkmark {
        display: none
    }

    @media (max-width: 767px) {
        .form-select-custom::picker(select) {
            position: fixed !important;
            transform: unset !important;
            inset: unset !important;
            left: unset !important;
            right: unset !important;
            top: 100% !important;
            width: 100vw !important;
            z-index: 2147483005 !important;
            padding-top: 1rem;
            padding-bottom: 2rem;
            border-bottom-left-radius: 0 !important;
            border-bottom-right-radius: 0 !important;
            max-height: calc(100vh - 120px);
            overflow-y: scroll;
        }

        .form-select-custom:open::before {
            position: fixed;
            content: '';
            background: var(--bs-gray-900);
            opacity: 0.25;
            top: -10px;
            left: -10px;
            width: 110vw;
            height: 110vh;
            z-index: 2147483004 !important;
            cursor: default;
        }
    }
    /*---Misc. Fonts---*/
    .ff-inter {
        font-family: "Inter", "Noto Color Emoji", Helvetica, "sans-serif" !important;
    }

    .ff-roboto {
        font-family: "Roboto", "Noto Color Emoji", Helvetica, "sans-serif" !important;
    }

    .ff-lato {
        font-family: "Lato", "Noto Color Emoji", Helvetica, "sans-serif" !important;
    }

    .ff-noto-sans {
        font-family: "Noto Sans", "Noto Color Emoji", Helvetica, "sans-serif" !important;
    }

    .ff-noto-serif {
        font-family: "Noto Serif", "Noto Color Emoji", Helvetica, "sans-serif" !important;
    }

    .ff-alegreya-sans {
        font-family: "Alegreya Sans", "Noto Color Emoji", Helvetica, "sans-serif" !important;
    }

    .ff-merriweather {
        font-family: "Merriweather", "Noto Color Emoji", Helvetica, "sans-serif" !important;
    }

    .ff-lora {
        font-family: "Lora", "Noto Color Emoji", Helvetica, "sans-serif" !important;
    }

    .ff-eb-garamond {
        font-family: "EB Garamond", "Noto Color Emoji", Helvetica, "sans-serif" !important;
    }

    .ff-crimson-text {
        font-family: "Crimson Text", "Noto Color Emoji", Helvetica, "sans-serif" !important;
    }
    /* Blazor defaults */
    .content {
        padding-top: 1.1rem;
    }

    :root {
        --bs-form-invalid-color: var(--bs-danger);
        --bs-form-invalid-border-color: var(--bs-danger);
        --sphere-banner-text-color: #FFFFFF;
        --sphere-custom-primary: #6666cc;
        --sphere-special-font-family: Inter, "Noto Color Emoji", Helvetica, "sans-serif";
        --sphere-banner-text-visibility: visible;
        --sphere-banner-text-color: #FFFFFF;
        --sphere-body-font-family: Inter, "Noto Color Emoji", Helvetica, "sans-serif";
    }
    /*.invalid + .input-group-text,*/
    .invalid {
        border-color: var(--bs-form-invalid-border-color) !important;
    }

    .form-control.invalid:focus:not(.disabled):not(.border-0), .form-select.invalid:focus:not(.disabled):not(.border-0), .form-check.invalid:focus:not(.disabled):not(.border-0) {
        border-color: var(--bs-form-invalid-border-color) !important;
        box-shadow: 0 0 0 0.25rem var(--bs-danger-clarity) !important;
    }

    .input-group > .form-floating:first-child > .form-control, .input-group > .form-floating:first-child > .form-select {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .validation-message {
        color: var(--bs-form-invalid-color);
    }

    .blazor-error-boundary {
        background: url(data:image/svg+xml; base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
        padding: 1rem 1rem 1rem 3.7rem;
        color: white;
    }

        .blazor-error-boundary::after {
            content: "An error has occurred."
        }

    .darker-border-checkbox.form-check-input {
        border-color: #929292;
    }

    .full-width {
        background-color: lightblue;
        padding: 20px;
    }

    a, a label {
        cursor: pointer !important;
    }

    .cursor-text {
        cursor: text !important;
    }

    .tagify .bg-primary {
        color: #fff;
    }
    /*---COOKIE NOTIFICATION---*/
    @media (min-width: 992px) {
        :root {
            --layout-left-shift: 0px;
        }

        body.aside-fixed {
            --layout-left-shift: 200px;
        }

            body.aside-fixed[data-kt-aside-minimize=on] {
                --layout-left-shift: 80px;
            }
    }

    @keyframes NotifyUp {
        0% {
            transform: translate(50%, 120%);
        }

        100% {
            transform: translate(50%, 0%);
        }
    }

    .cookie-plate {
        z-index: 1000;
        position: fixed;
        right: 50%;
        transition: 0.2s ease;
        transform: translate(50%, 120%);
        bottom: 1rem;
        animation: 0.5s ease-out 1s 1 forwards NotifyUp;
        background: var(--bs-gray-900);
        padding: 1rem;
        box-shadow: 0px 0px 16px 6px rgba(0, 0, 0, 0.25);
        border-radius: 0.65rem;
        display: flex;
        width: 100%;
        max-width: 450px;
        margin-right: calc(-0.5 * var(--layout-left-shift));
    }

    [data-bs-theme=dark] .cookie-plate {
        background: var(--bs-gray-200);
    }

    .cookie-plate a:not(.btn):hover {
        text-decoration: underline !important
    }

    [data-bs-theme=dark] .cookie-plate a.text-primary-300 {
        color: var(--bs-primary-700) !important;
    }

    body.e-dlg-target .cookie-plate {
        display: none;
    }

    @media (max-width: 991.98px) {
        body.aside-fixed {
            --layout-left-shift: 0px;
        }

        [data-kt-drawer-aside=on] .cookie-plate {
            opacity: 0;
            pointer-events: none;
            transform: translate(50%, 120%);
        }
    }

    @media (max-width: 767.98px) {
        .cookie-plate {
            margin-left: 15px;
            margin-right: auto;
            width: calc(100% - 100px);
            padding: 1rem 1.5rem;
        }
    }
    /*---HEADER BAR----*/
    @media (min-width: 992px) {
        body.aside-fixed.aside-secondary-enabled:not([data-kt-sticky-header=on]) div#kt_header div#kt_header_container.header-bar::after {
            display: block;
            position: absolute;
            width: calc(100% - 60px);
            height: 1.4px;
            background: var(--bs-gray-200);
            content: '';
            bottom: 0;
            left: 30px;
        }

        .header {
            height: 80px;
        }

        body.themed-bg.aside-fixed.aside-secondary-enabled:not([data-kt-sticky-header=on]) div#kt_header div#kt_header_container.header-bar::after {
            display: none;
        }
    }
    /*---FOOTER EDIT---*/
    @media (min-width: 992px) {
        div#kt_footer {
            padding: 2rem 30px 1rem 30px !important;
        }

        body.themed-bg div#kt_footer {
            max-width: 1320px;
            margin-left: auto;
            margin-right: auto;
            width: 100%;
        }

            body.themed-bg div#kt_footer .container-xxl {
                border-radius: 0.65rem;
                border: var(--bs-aside-border) !important;
                box-shadow: 0 2px 4px -2px rgba(10, 13, 18, 0.04), 0 4px 8px -2px rgba(10, 13, 18, 0.06);
                background: var(--bs-body-bg);
            }
    }

    body.themed-bg div#kt_footer .container-xxl {
        padding: 0.5rem 1rem !important;
    }

    @media (max-width: 991px) {
        body.themed-bg div#kt_footer .container-xxl {
            border: var(--bs-aside-border) !important;
            box-shadow: 0 2px 4px -2px rgba(10, 13, 18, 0.04), 0 4px 8px -2px rgba(10, 13, 18, 0.06);
            background: var(--bs-body-bg);
        }
    }
    /*---DISABLE LIGHTBOX FULLSCREEN CONTROL---*/
    .fslightbox-toolbar-button:first-child {
        display: none;
    }
    /*-----Select2 Dropdowns inside modals-----*/
    .e-dlg-container + .select2-container .select2-dropdown {
        z-index: 9999999999999999999 !important;
    }
    /*--------METRONIC8 GENERAL FIXES---------*/
    .badge {
        --bs-badge-font-weight: 500;
        gap: 0.5rem;
        line-height: 0.75rem;
    }

        .badge.badge-lg {
            line-height: 1.2rem;
        }

        .badge.badge-sm {
            line-height: 0.5rem;
        }

        .badge > i {
            margin-right: 0 !important;
            padding-right: 0 !important;
            margin-left: 0 !important;
            padding-left: 0 !important;
        }

    .ratio-5x1 {
        --bs-aspect-ratio: 20%;
    }

    .ratio-3x2 {
        --bs-aspect-ratio: 66.666666667%;
    }
    /*.symbol {
     border-radius: 0.75rem;
}
*/
    .symbol > img, .symbol .symbol-label:after {
        border-radius: inherit;
    }

    .btn-outline:hover .form-check.form-check-custom .form-check-input:not(:checked), .btn-outline:focus .form-check.form-check-custom .form-check-input:not(:checked), .btn-outline:active .form-check.form-check-custom .form-check-input:not(:checked) {
        --bs-form-check-bg: var(--bs-body-bg) !important;
        border: 1.4px solid var(--bs-primary);
    }

    .form-check-custom .form-check-input:checked {
        background-color: var(--bs-primary);
        border-color: var(--bs-primary);
    }

    .form-check-custom:not(.form-switch) .form-check-input {
        border: 1.4px solid var(--bs-gray-300);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0), 0 0 0 0 rgba(10, 13, 18, 0);
        transition: box-shadow 0.2s ease;
    }

        .form-check-custom:not(.form-switch) .form-check-input:checked {
            border: 1.4px solid var(--bs-primary);
        }

    .btn-active-outline-primary:focus .form-check-custom .form-check-input {
        box-shadow: 0px 0px 0px 4px var(--bs-primary-clarity) !important;
        transition: box-shadow 0.2s ease;
    }
    /*----BADGE-STYLE ALERTS----*/
    .badge-alert {
        white-space: wrap;
    }

    @media (max-width: 567px) {
        .badge-alert {
            flex-direction: column;
            align-items: start;
        }
    }
    /*---BOOTSTRAP NAVBAR TOGGLER CUSTOMIZATIONS---*/
    .navbar-toggler {
        padding: 0.25rem;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0.475rem !important;
    }

        .navbar-toggler:hover i.ki-duotone, .navbar-toggler[aria-expanded="true"] i.ki-duotone {
            color: var(--bs-primary) !important;
        }

        .navbar-toggler:hover, .navbar-toggler[aria-expanded="true"] {
            padding: 0.25rem;
            color: var(--bs-primary);
            background-color: var(--bs-primary-light);
        }

            .navbar-toggler[aria-expanded="true"]:hover {
                opacity: 75%
            }
    /*---COURSE READ-ONLY RTE----*/
    .card-body.rte-reading-pane {
        max-height: 50vh;
        height: 425px;
    }

    @media (max-width: 767px) {
        .card-body.rte-reading-pane {
            max-height: unset !important;
            height: auto !important;
        }
    }

    .card-body.quiz-reading-pane {
        max-height: 50vh;
        height: 425px;
    }

    @media (max-width: 767px) {
        .card-body.quiz-reading-pane {
            max-height: unset !important;
            height: auto !important;
        }
    }
    /*---SYNCFUSION BUTTONS AND INPUTS---*/
    .e-dialog .e-dialog {
        position: fixed !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%);
        box-shadow: var(--bs-menu-dropdown-box-shadow);
    }
    /*---HIDE EMOJI INPUT ON MOBILE RTEs---*/
    @media (max-width: 767px) {
        .create-post-input .e-rte-custom-toolbar[data-index="5"], #kt_convo_chat_footer .e-rte-custom-toolbar[data-index="5"] {
            display: none !important;
        }
    }

    @media (max-width: 567px) {
        .e-toolbar-item.e-separator {
            display: none !important;
        }
    }

    .e-rte-elements input.e-input, .e-rte-elements .e-input-group input.e-input, .e-rte-elements .e-input-group.e-control-wrapper input.e-input, .e-rte-elements .e-input-group textarea.e-input, .e-rte-elements .e-input-group.e-control-wrapper textarea.e-input, .e-rte-elements textarea.e-input, .e-rte-elements .e-float-input input, .e-rte-elements .e-float-input.e-control-wrapper input, .e-rte-elements .e-float-input textarea, .e-rte-elements .e-float-input.e-control-wrapper textarea {
        font-weight: 400;
        color: var(--bs-gray-900);
        border: 1.4px solid var(--bs-gray-300);
        font-family: var(--bs-body-font-family) !important;
        border-radius: 0.5rem !important;
        background-color: var(--bs-body-bg);
    }

    .e-input-group, .e-input-group.e-control-wrapper, .e-float-input, .e-float-input.e-input-group, .e-float-input.e-control-wrapper, .e-float-input.e-input-group.e-control-wrapper, .e-input-group:not(.e-success):not(.e-warning):not(.e-error), .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error) {
        background-color: var(--bs-body-bg);
        color: var(--bs-gray-900);
        border-color: var(--bs-gray-300);
    }

    .e-dialog .e-img-uploadwrap .e-droptext, .e-dialog .e-aud-uploadwrap .e-droptext, .e-dialog .e-vid-uploadwrap .e-droptext, .e-dialog .e-word-uploadwrap .e-droptext, .e-dialog .e-device .e-vid-uploadwrap .e-droptext {
        border-radius: 0.5rem;
    }

    .e-dialog .e-label {
        font-family: var(--bs-body-font-family) !important;
        color: var(--bs-gray-700);
    }

    .e-checkbox-wrapper:hover .e-label, .e-css.e-checkbox-wrapper:hover .e-label {
        color: var(--bs-gray-600);
    }

    .e-rte-elements input.e-input, .e-rte-elements .e-input-group input.e-input, .e-rte-elements .e-input-group.e-control-wrapper input.e-input, .e-rte-elements .e-input-group textarea.e-input, .e-rte-elements .e-input-group.e-control-wrapper textarea.e-input, .e-rte-elements textarea.e-input, .e-float-input input, .e-float-input.e-control-wrapper input, .e-rte-elements .e-float-input textarea, .e-float-input.e-control-wrapper textarea {
        min-height: 1.75rem;
        height: unset;
        padding: 0.775rem 1rem !important;
        font-family: var(--bs-body-font-family) !important;
        border-width: 1.4px;
        border-radius: 0.5rem;
    }

    .e-maskedtextbox {
        letter-spacing: 0.075rem;
    }

    .e-dialog .form-switch.form-check-solid .form-check-input:not(:checked) {
        background-color: var(--bs-gray-400);
    }

    .e-dialog .e-control, .e-dialog .e-css, .e-dialog .e-error, .e-dialog .e-btn, .e-dialog .e-css.e-btn, .e-dialog .e-primary.e-btn, .e-dialog .e-img-uploadwrap .e-droptext, .e-dialog .e-aud-uploadwrap .e-droptext, .e-dialog .e-vid-uploadwrap .e-droptext, .e-dialog .e-word-uploadwrap .e-droptext, .e-dialog.e-device .e-vid-uploadwrap .e-droptext, .e-richtexteditor .e-linkheader, .e-richtexteditor .e-audioheader, .e-richtexteditor .e-videoheader, .e-richtexteditor .e-video-url-wrap, .e-rte-elements .e-linkheader, .e-rte-elements .e-audioheader, .e-rte-elements .e-videoheader, .e-rte-elements .e-video-url-wrap, .e-dialog .e-label {
        font-family: var(--bs-body-font-family) !important;
    }

    .e-rte-elements .e-input:focus:not(.e-success):not(.e-warning):not(.e-error), .e-rte-elements .e-float-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group) input:focus, .e-rte-elements .e-float-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group) textarea:focus, .e-rte-elements .e-float-input.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group) input:focus, .e-rte-elements .e-float-input.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group) textarea:focus, .e-rte-elements .e-float-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group).e-input-focus input, .e-rte-elements .e-float-input.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group).e-input-focus input {
        box-shadow: 0px 0px 0px 4px var(--bs-primary-clarity) !important;
        border: 1.4px solid var(--bs-primary-300);
    }

    .e-rte-linkcontent .e-rte-label {
        margin-bottom: 2px;
    }

    .e-dialog .e-btn, .e-dialog .e-css.e-btn, .e-dialog .e-primary.e-btn, .e-dialog .e-btn.e-flat.e-primary:disabled, .e-dialog .e-btn.e-flat.e-primary.e-disabled, .e-dialog .e-css.e-btn.e-flat.e-primary:disabled, .e-dialog .e-css.e-btn.e-flat.e-primary.e-disabled, .e-dialog .e-btn.e-primary.e-flat:not([DISABLED]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info), .e-dialog .e-footer-content .e-btn.e-primary.e-flat:not([DISABLED]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info) {
        color: var(--bs-primary-inverse);
        border-color: var(--bs-primary);
        background-color: var(--bs-primary);
        box-shadow: none !important;
        border-radius: 0.5rem !important;
        font-weight: var(--bs-btn-font-weight);
        padding: calc(0.55rem + 1.4px) calc(1rem + 1.4px);
        font-weight: 500;
    }

        .e-dialog .e-btn:hover, .e-dialog .e-css.e-btn:hover .e-dialog .e-btn:active, .e-dialog .e-css.e-btn:active .e-dialog .e-btn:focus, .e-dialog .e-css.e-btn:focus {
            color: var(--bs-primary-inverse);
            border-color: var(--bs-primary-active);
            background-color: var(--bs-primary-active) !important;
        }

        .e-dialog .e-cancel.e-btn, .e-dialog .e-btn.e-flat.e-cancel:disabled, .e-dialog .e-btn.e-flat.e-cancel.e-disabled, .e-dialog .e-css.e-btn.e-flat.e-cancel:disabled, .e-dialog .e-css.e-btn.e-flat.e-cancel.e-disabled, .e-dialog .e-footer-content .e-btn.e-flat:not([DISABLED]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info):not(.e-primary) {
            background-color: var(--bs-body-bg) !important;
            border: 1.4px solid var(--bs-gray-300) !important;
            color: var(--bs-gray-700) !important;
        }

            .e-dialog .e-cancel.e-btn:hover, .e-dialog .e-cancel.e-css.e-btn:hover, .e-dialog .e-footer-content .e-btn.e-flat:not([DISABLED]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info):not(.e-primary):hover, .e-dialog .e-cancel.e-btn:active, .e-dialog .e-cancel.e-css.e-btn:active, .e-dialog .e-footer-content .e-btn.e-flat:not([DISABLED]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info):not(.e-primary):active, .e-dialog .e-cancel.e-btn:focus, .e-dialog .e-cancel.e-css.e-btn:focus, .e-dialog .e-footer-content .e-btn.e-flat:not([DISABLED]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info):not(.e-primary):focus {
                background-color: var(--bs-gray-50) !important;
                border: 1.4px solid var(--bs-gray-300) !important;
                color: var(--bs-gray-700) !important;
            }

        .e-dialog .e-btn.disabled, .e-dialog .e-btn.e-disabled, .e-dialog .e-css.e-btn:disabled, .e-dialog .e-css.e-disabled {
            opacity: 0.5;
        }

    .e-dialog .e-radio + label::before, .e-dialog .e-checkbox-wrapper .e-frame, .e-dialog .e-css.e-checkbox-wrapper .e-frame {
        border-width: 1.4px;
        box-shadow: none !important;
    }

        .e-dialog .e-radio:checked + label::before, .e-dialog .e-radio:checked + label:hover::before, .e-dialog .e-checkbox-wrapper .e-frame.e-check, .e-dialog .e-css.e-checkbox-wrapper .e-frame.e-check {
            background-color: var(--bs-primary) !important;
            border-color: var(--bs-primary) !important;
        }

    .e-dialog .e-checkbox-wrapper .e-checkbox:focus + .e-frame, .e-dialog .e-checkbox-wrapper .e-checkbox:active + .e-frame, .e-dialog .e-css.e-checkbox-wrapper .e-checkbox:focus + .e-frame, .e-dialog .e-css.e-checkbox-wrapper .e-checkbox:active + .e-frame {
        border-color: var(--bs-primary) !important;
    }

    .e-dialog .e-radio:not(:checked) + label:hover::before {
        background-color: var(--bs-primary-light);
        border-color: var(--bs-primary);
    }

    .e-dialog .e-btn.e-icon-btn {
        background-color: transparent !important;
    }

    .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:hover, .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:focus, .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:active {
        color: var(--bs-primary)
    }

    .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
        color: var(--bs-body-color)
    }

    .e-dialog .e-btn.e-dlg-closeicon-btn:hover span {
        color: inherit !important;
    }
    /*----SYNCFUSION RTE UPLOAD FOOTER----*/
    .e-rte-elements .e-footer-content {
        display: flex !important;
        justify-content: flex-end;
    }

        .e-rte-elements .e-footer-content > .e-cancel, .e-rte-elements .e-footer-content .e-btn.e-flat:not([DISABLED]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info):not(.e-primary) {
            order: 1;
        }

        .e-rte-elements .e-footer-content > :not(.e-cancel) {
            order: 2;
        }

    .e-dialog .e-footer-content {
        border-top: 1px solid var(--bs-gray-300);
        !important
    }
    /*---RTE Colors----*/
    .e-input-group, .e-input-group.e-control-wrapper, .e-float-input, .e-float-input.e-input-group, .e-float-input.e-control-wrapper, .e-float-input.e-input-group.e-control-wrapper {
        color: var(--bs-body-color)
    }
    /*----MENU CHEAT----*/
    .menu .separator:last-child {
        display: none;
    }

    .menu-link::selection, .menu-title::selection, .menu-arrow::selection, .menu-link::-moz-selection, .menu-title::-moz-selection, .menu-arrow::-moz-selection {
        background: transparent;
    }
    /*---Customizations for Post Comments and Reply-in-thread---*/
    .post-comments {
        overflow-x: hidden;
    }

    .open-thread .menu-sub .comment-block {
        position: relative;
        z-index: 1;
    }

        .open-thread .menu-sub .comment-block::before {
            background-color: var(--bs-gray-300);
            position: absolute;
            content: '';
            width: 200%;
            height: 100%;
            z-index: -1;
            left: -50%;
            opacity: 0%;
            top: 0;
            pointer-events: none;
        }

        .open-thread .menu-sub .comment-block:hover::before, .open-thread .menu-sub .comment-block:focus-within::before {
            opacity: 30%;
        }
    /*---GLOBAL MODAL CUSTOMIZATIONS----*/
    .e-dialog {
        border-radius: 1rem;
        max-width: calc(100% - 30px);
    }

    @media (max-width: 991px) {
        .e-dialog {
            max-width: calc(100% - 8px);
        }
    }

    .e-dlg-overlay {
        background-color: rgba(0, 0, 0, .3);
        backdrop-filter: blur(4px);
    }

    .e-dialog:not(.settings-modal-unflush) .e-dlg-header-content {
        border: none !important
    }

    .e-dlg-content, .e-dlg-header-content {
        padding: 24px !important;
    }

    .e-dlg-content, .e-dialog .e-footer-content, .e-dlg-header-content {
        padding: 16px 24px !important;
    }

    .e-dialog:not(.settings-modal-unflush):not(.modalShareLink) .e-dlg-header-content {
        padding-bottom: 0.475rem !important;
    }

    .e-dialog:not(.settings-modal-unflush) .e-dlg-header-content + .e-dlg-content {
        padding-top: 24px !important;
    }

    .e-dialog .e-dlg-header {
        white-space: pre-line;
    }

    .e-dlg-header, .e-dlg-header * {
        color: var(--bs-body-color)
    }

    .e-dialog, .e-dialog-header, .e-dlg-content {
        background-color: var(--bs-body-bg);
        color: var(--bs-body-color);
        border-color: var(--bs-root-card-border-color);
    }
        /*-----Stifle height on settings modals-----*/
        .e-dialog.settings-modal-height {
            max-height: 80vh !important;
        }
    /*---Remove rounding on modal overlay backgrounds---*/
    .e-dlg-container, .e-dlg-container.rounded {
        border-radius: 0 !important;
    }
    /*-----modalConfirm Customizations----*/
    .modalConfirm .e-dialog .e-footer-content {
        border: none !important;
        padding-top: 0px !important;
    }
    /*-----modalCustomQuickActions Customizations----*/
    .modalCustomQuickActions .e-dialog .e-footer-content {
        border: none !important;
    }

    .modalCustomQuickActions .e-dialog:not(.settings-modal-unflush) .e-dlg-header-content + .e-dlg-content {
        padding-top: 0 !important;
    }
    /*---modalShareLink Customizations---*/
    .modalShareLink .e-dlg-header-content {
        padding: 0 !important;
    }
    /*---Course Content Modal RTE Customizations-----*/
    .course-rte .e-rte-container, .course-rte .e-rte-container .e-rte-content, .course-rte .e-rte-container .e-rte-content .e-content {
        display: flex !important;
        flex-direction: column !important;
        flex-grow: 1 !important;
        height: 100%;
    }
    /*---modalPickAsset Customizations----*/
    .modalPickAsset.e-dlg-modal {
        max-height: 90vh !important;
        height: 90vh !important;
    }

    .modalPickAsset .e-dlg-content, .modalPickAsset .e-dlg-content section, .modalPickAsset .e-dlg-content .row, .modalPickAsset .e-dlg-content .row > div {
        max-height: inherit;
        height: 100%;
    }

    .modalPickAsset.e-dialog .e-dlg-content {
        overflow: hidden !important;
        padding: 0 !important;
    }

    .modalPickAsset #assets_scrollable {
        max-height: calc(90vh - 79px);
    }

    .modalPickAsset span.system-folder-note::after {
        content: 'system folder';
        padding-left: 1rem;
        color: var(--bs-text-gray-500) !important;
        font-weight: 400;
        opacity: 0;
        pointer-events: none;
    }

    .modalPickAsset a:hover span.system-folder-note::after {
        opacity: 100;
    }

    @media (max-width: 991px) {
        .e-dialog.create-post-modal {
            max-height: 98vh !important;
            height: 100% !important;
        }
    }

    .create-post-modal > .e-dlg-content {
        padding-bottom: 0 !important;
    }

    .create-post-modal .create-post-input {
        margin-bottom: 24px;
    }

    .post-content > * {
        margin-bottom: 1rem !important;
    }

        .post-content > *:last-child, .post-content > p:last-child {
            margin-bottom: 0rem !important;
        }

    .e-richtexteditor, .e-richtexteditor .e-rte-content, .e-richtexteditor .e-source-content {
        color: var(--bs-body-color);
        background: transparent !important;
    }

        .e-richtexteditor .e-rte-placeholder {
            color: var(--bs-body-color);
        }

    .e-toolbar .e-hor-nav {
        border-top-right-radius: 0.425rem;
        color: var(--bs-gray-800)
    }

        .e-toolbar .e-hor-nav:hover {
            background: var(--bs-gray-100);
            color: var(--bs-gray-900)
        }

            .e-toolbar .e-hor-nav:hover:active, .e-toolbar .e-hor-nav:active, .e-toolbar .e-hor-nav:focus {
                background: var(--bs-gray-200);
                color: var(--bs-gray-800)
            }

    .e-toolbar .e-toolbar-items .e-toolbar-left .e-toolbar-item:first-child, .e-toolbar .e-toolbar-items:not(.e-tbar-pos):not(.e-toolbar-multirow) .e-toolbar-item:first-child {
        margin-left: 0
    }

    .e-toolbar.e-rte-toolbar:not(.e-rte-quick-toolbar), div#rteConversationMessageID_toolbar_container, div#rtePostMessageID_toolbar_container {
        background: transparent;
        border-top-left-radius: var(--bs-border-radius) !important;
        border-top-right-radius: var(--bs-border-radius) !important;
        border-color: transparent;
    }

        .e-toolbar.e-rte-toolbar:not(.e-rte-quick-toolbar)::before {
            background-color: var(--bs-body-bg);
            position: absolute;
            left: 0.5rem;
            width: calc(100% - 1rem);
            height: 100%;
            content: '';
            z-index: -1;
            top: 0;
            pointer-events: none;
        }

    .e-richtexteditor .e-rte-content .e-content, .e-richtexteditor .e-source-content .e-content {
        min-height: unset;
    }

    .e-richtexteditor .e-rte-content, .e-richtexteditor .e-source-content {
        color: var(--bs-body-color);
    }

    .e-toolbar .e-toolbar-items, .e-rte-content, .e-richtexteditor, .e-rte-container {
        background: transparent;
    }

        .e-richtexteditor .e-toolbar .e-toolbar-item .e-tbar-btn.e-btn, .e-richtexteditor .e-toolbar .e-rte-dropdown-btn {
            border-radius: 0.475rem !important;
            box-shadow: none !important;
            background: transparent;
            border-color: transparent;
        }

        .e-richtexteditor .e-toolbar .e-rte-dropdown-btn {
            padding-top: 0px;
            padding-bottom: 0px;
            height: 100%;
            min-height: 32px;
        }

            .e-richtexteditor .e-toolbar .e-rte-dropdown-btn .e-icons.e-btn-icon {
                margin: 0;
                min-width: 12px;
                width: auto;
                line-height: 14px;
                font-size: 14px
            }

            .e-richtexteditor .e-toolbar .e-rte-dropdown-btn .e-icons.e-caret {
                font-size: 12px
            }

    .e-rte-container {
        border-color: transparent;
    }

    .create-post-input:focus-within {
        border-color: var(--bs-primary-300);
        box-shadow: 0 0 0px 4px var(--bs-primary-clarity);
    }

    .e-rte-placeholder {
        line-height: 1.5;
        opacity: .50;
        overflow: hidden;
        padding: 16px;
        position: absolute;
        text-align: start;
        top: 0;
        z-index: 1;
        display: none
    }

        .e-rte-placeholder.e-placeholder-enabled {
            display: block
        }

    .e-rte-toolbar:not(.e-rte-quick-toolbar) .e-toolbar-items.e-toolbar-multirow {
        margin-left: 0px !important;
    }

    .e-rte-toolbar.e-rte-quick-toolbar {
        border-radius: var(--bs-border-radius) !important;
    }

        .e-rte-toolbar.e-rte-quick-toolbar .e-toolbar-items {
            margin-left: 0 !important;
            margin-right: 0px !important;
        }

    .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-rte-dropdown-menu:not(:hover):not(:focus):not(:active):not(.e-active) {
        background-color: transparent
    }

    .e-richtexteditor .e-toolbar .e-toolbar-item .e-tbar-btn.e-btn {
        border-radius: 0.475rem !important;
        box-shadow: none !important;
        background: transparent
    }

    .e-richtexteditor .e-toolbar .e-toolbar-item .e-tbar-btn:hover, .e-richtexteditor .e-toolbar .e-toolbar-item .e-tbar-btn:active, .e-richtexteditor .e-toolbar .e-toolbar-item .e-tbar-btn:focus, .e-richtexteditor .e-toolbar .e-toolbar-item.e-active .e-tbar-btn {
        background: var(--bs-gray-200) !important;
    }

    .e-richtexteditor .e-toolbar .e-toolbar-item .e-tbar-btn:hover, .e-richtexteditor .e-toolbar .e-toolbar-item .e-tbar-btn:active, .e-richtexteditor .e-toolbar .e-toolbar-item .e-tbar-btn:focus, .e-richtexteditor .e-toolbar .e-toolbar-item .e-tbar-btn.e-active, .e-richtexteditor .e-toolbar .e-toolbar-item.e-active .e-tbar-btn, .e-richtexteditor .e-toolbar .e-rte-dropdown-btn.e-active, .e-richtexteditor .e-toolbar .e-rte-dropdown-btn:hover, .e-richtexteditor .e-toolbar .e-rte-dropdown-btn:active, .e-richtexteditor .e-toolbar .e-rte-dropdown-btn:focus {
        background: var(--bs-gray-200) !important;
    }

    .e-toolbar .e-toolbar-item.e-overlay {
        color: unset;
        background: unset;
    }

        .e-toolbar .e-toolbar-item.e-overlay + .e-rte-custom-toolbar {
            opacity: 0.5;
            pointer-events: none;
        }

    .e-toolbar .e-toolbar-item .e-tbar-btn, .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-rte-dropdown-menu, .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-item .e-rte-dropdown-menu, .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-tbar-btn .e-icons, .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-item .e-tbar-btn .e-icons, .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
        color: var(--bs-gray-700) !important;
    }

    .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-rte-dropdown-menu {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

        .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-rte-dropdown-menu:hover, .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-rte-dropdown-menu:focus, .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-rte-dropdown-menu:active, .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-rte-dropdown-menu.e-active, .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-item .e-rte-dropdown-menu:hover, .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-item .e-rte-dropdown-menu:focus, .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-item .e-rte-dropdown-menu:active, .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-item .e-rte-dropdown-menu.e-active {
            background-color: var(--bs-gray-200) !important;
        }

        .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-rte-dropdown-menu:hover, .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-tbar-btn:hover .e-icons, .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-tbar-btn:focus .e-icons, .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-item .e-tbar-btn:hover .e-icons, .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-item .e-tbar-btn:focus .e-icons, .e-richtexteditor .e-toolbar .e-toolbar-item .e-tbar-btn:hover .e-tbar-btn-text, .e-richtexteditor .e-toolbar .e-toolbar-item .e-tbar-btn:hover .e-icons, .e-richtexteditor .e-toolbar .e-toolbar-item .e-tbar-btn:hover:active .e-icons, .e-richtexteditor .e-toolbar .e-toolbar-item .e-tbar-btn:hover:active .e-tbar-btn-text {
            color: var(--bs-gray-800) !important;
        }
    /*----Syncfusion Upload Dropzone Customizations----*/
    .e-upload.e-control-wrapper {
        border-radius: var(--bs-border-radius);
        font-family: var(--bs-font-sans-serif);
        background: var(--bs-body-bg);
        border: 0;
    }

    .e-upload .e-file-drop {
        color: var(--bs-gray-700)
    }

    .e-upload-processing .e-upload.e-control-wrapper {
        background: var(--bs-success-light);
    }

    .e-upload-processing .e-file-select-wrap {
        display: none;
    }

    .e-upload .e-upload-files, .e-upload .e-upload-files .e-upload-file-list, .e-upload .e-upload-files {
        border: 0;
    }

        .e-upload .e-upload-files .e-file-remove-btn.e-icons, .e-upload .e-upload-files .e-file-delete-btn.e-icons, .e-upload .e-upload-files .e-file-reload-btn.e-icons, .e-upload .e-upload-files .e-file-abort-btn.e-icons, .e-upload .e-upload-files .e-file-pause-btn.e-icons, .e-upload .e-upload-files .e-file-play-btn.e-icons {
            color: var(--bs-gray-700) !important;
            font-weight: 600;
            font-size: 11px;
            margin-right: 2px;
            margin-left: 0;
            margin-bottom: 0;
            margin-top: 9px;
        }

        .e-upload .e-upload-files .e-file-pause-btn.e-icons, .e-upload .e-upload-files .e-file-play-btn.e-icons, .e-upload .e-upload-files .e-file-reload-btn.e-icons {
            right: 20px;
        }

        .e-upload .e-upload-files .e-file-remove-btn.e-icons, .e-upload .e-upload-files .e-file-delete-btn.e-icons, .e-upload .e-upload-files .e-file-abort-btn.e-icons {
            right: 4px;
        }

        .e-upload .e-upload-files .e-upload-file-list .e-file-container {
            margin-right: 20px;
        }

            .e-upload .e-upload-files .e-upload-file-list .e-file-container .e-progress-inner-wrap {
                background: var(--bs-gray-200) !important;
            }

            .e-upload .e-upload-files .e-upload-file-list .e-file-container .e-upload-progress-wrap .e-progress-inner-wrap {
                height: 8px;
            }

            .e-upload .e-upload-files .e-upload-file-list .e-file-container .e-progress-inner-wrap .e-upload-progress-bar.e-upload-progress {
                height: 8px;
                background: var(--bs-sky);
            }

    .e-upload-processing .e-upload .e-upload-files .e-upload-file-list .e-file-container .e-progress-inner-wrap .e-upload-progress-bar.e-upload-progress {
        background: var(--bs-success-600);
    }

    .e-upload .e-upload-files .e-upload-file-list .e-file-container .e-upload-progress-wrap {
        padding-top: 0px;
    }

    .e-upload .e-upload-files .e-upload-file-list .e-file-container .e-progress-bar-text, .e-upload .e-upload-files .e-upload-file-list .e-file-container .e-file-size {
        color: var(--bs-gray-600);
        font-weight: 500;
    }
    /*---Syncfusion Skeleton Colors---*/
    .e-skeleton.e-shimmer-wave::after {
        background-image: linear-gradient(90deg, transparent calc(50% - 100px), var(--bs-gray-300) 50%, transparent calc(50% + 100px));
    }

    .e-skeleton.e-skeleton-text, .e-skeleton.e-skeleton-square, .e-skeleton.e-skeleton-rectangle, .e-skeleton.e-skeleton-circle {
        background-color: var(--bs-gray-200);
    }
    /*---modalBlock.razor Customizations----*/
    .modalBlock .e-dialog {
        border: none;
    }

        .modalBlock .e-dialog .e-dlg-content {
            padding: 0;
        }
    /*---modalShareLink.razor Customizations---*/
    .modalShareLink .fade-overlay::before {
        background: -webkit-linear-gradient(270deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.8) 100%) !important;
    }

    .modalShareLink .e-dlg-header-content {
        padding: 0 !important;
        background-color: transparent;
        border: none !important;
        height: 125px;
    }

    .modalShareLink .e-dialog {
        background-color: transparent;
    }

        .modalShareLink.e-dialog:not(.settings-modal-unflush) .e-dlg-header-content + .e-dlg-content {
            padding: 0 2.25rem 2.25rem 2.25rem !important;
            padding-top: 0 !important;
            overflow: visible;
            background-color: var(--bs-body-bg);
            border: none !important;
            color: var(--bs-body-color);
            border-radius: 0;
        }

        .modalShareLink.e-dialog .e-dlg-header {
            height: 100%;
        }

    .modalShareLink .hidden-scroll {
        overflow-x: auto;
        overflow-y: hidden;
        -ms-overflow-style: none;
        scrollbar-width: none;
        max-width: 100%;
        white-space: nowrap;
    }

        .modalShareLink .hidden-scroll::-webkit-scrollbar {
            display: none !important;
        }
    /*---FORM-X-CUSTOM FOR METRONIC8---*/
    .form-control-color-custom {
        border-radius: 0.675rem;
        height: 2.5rem;
    }

    .form-control.form-control-custom, .form-control.form-control-custom:focus, .form-select.form-select-custom, .form-select.form-select-custom:focus {
        font-weight: 400;
        color: var(--bs-gray-900);
        border: 1.4px solid var(--bs-gray-300);
    }

        .form-control.form-control-custom:disabled, .form-control.form-control-custom:disabled:focus, .form-control.form-control-custom:disabled:active, .form-select.form-select-custom:disabled, .form-select.form-select-custom:disabled:active, .form-select.form-select-custom:disabled:focus {
            box-shadow: none !important;
            cursor: not-allowed;
            background-color: var(--bs-gray-50);
            color: var(--bs-gray-500);
            border: 1.4px solid var(--bs-gray-300) !important;
        }

    .form-switch.form-check-custom .form-check-input {
        height: 1.75rem;
    }

    .form-switch.form-check-solid .form-check-input:not(:checked) {
        background-color: var(--bs-gray-400);
    }

    .form-floating > textarea.form-control.form-control-custom {
        height: unset !important;
        field-sizing: content;
        resize: none;
    }
    /*---Syncfusion Multiselect Customizations---*/
    .e-ddl.e-multi-select-list-wrapper {
        background: var(--bs-menu-dropdown-bg-color) !important;
        margin-top: 1rem;
        box-shadow: var( --bs-menu-dropdown-box-shadow) !important;
        font-family: var(--bs-body-font-family) !important;
        overflow: hidden;
        border: unset;
        padding: 0.75rem !important;
        border-radius: 0.5rem;
    }

    .e-dropdownbase .e-list-item.e-hover, .e-dropdownbase .e-list-item.e-item-focus, .e-dropdownbase .e-list-item:hover {
        background-color: var(--bs-menu-link-bg-color-hover) !important;
        color: var(--bs-menu-link-color-hover);
    }

    .e-dropdownbase .e-list-item {
        font-family: Inter, "Noto Color Emoji", Helvetica, "sans-serif" !important;
        border-radius: 0.5rem;
        padding: 0.25rem 0;
        margin: 2px auto;
    }

    .e-ddl.e-multi-select-list-wrapper * {
        font-family: Inter, "Noto Color Emoji", Helvetica, "sans-serif" !important;
        font-weight: 500;
        background: var(--bs-menu-dropdown-bg-color);
        color: var(--bs-body-color);
    }

    .e-control, .e-css, .e-error {
        font-family: var(--bs-body-font-family) !important;
    }

    .form-control.form-control-custom .e-dropdownbase.e-control.e-multiselect {
        background-color: transparent !important;
        border: none !important
    }

    .form-control.form-control-custom .e-multi-select-list-wrapper {
        box-shadow: var(--bs-box-shadow) !important;
        border-radius: var(--bs-border-radius) !important;
        overflow: hidden !important;
        margin-top: 9px !important;
    }

        .form-control.form-control-custom .e-multi-select-list-wrapper .e-list-item {
            font-family: var(--bs-body-font) !important;
        }

    .form-control.form-control-custom .e-multi-select-wrapper input[type=text] {
        font-size: 12px;
        min-height: 22px;
        padding: 0 !important;
        margin: 3px;
    }

    .form-control.form-control-custom .e-multi-select-wrapper:not(.e-disabled) .e-chips {
        --bs-badge-padding-x: 0.5rem;
        --bs-badge-padding-y: 0.325rem;
        --bs-badge-font-size: 0.85rem;
        --bs-badge-color: var(--bs-body-color);
        --bs-badge-border-radius: 0.425rem;
        --bs-badge-font-weight: 600;
        font-weight: var(--bs-badge-font-weight);
        padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
        white-space: nowrap;
        border-radius: var(--bs-badge-border-radius);
        height: 22px;
        background-color: var(--bs-secondary);
        color: var(--bs-secondary-inverse);
    }

    .form-control.form-control-custom .e-multiselect:not(.e-disabled) .e-multi-select-wrapper .e-chips:hover, .form-control.form-control-custom .e-multiselect:not(.e-disabled) .e-multi-select-wrapper .e-chips.e-chip-selected:hover {
        background-color: var(--bs-secondary-active);
        color: var(--bs-secondary-inverse);
    }

    .form-control.form-control-custom .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon, .form-control.form-control-custom .e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper .e-clear-icon {
        font-size: 12px;
        height: 22px;
        width: 24px;
    }

    .form-control.form-control-custom .e-multi-select-wrapper .e-chips-close {
        width: 12px;
        height: 12px;
        align-items: center;
    }

        .form-control.form-control-custom .e-multi-select-wrapper .e-chips-close:hover {
            opacity: 0.65;
        }

    .form-control.form-control-custom .e-multiselect:not(.e-disabled) .e-multi-select-wrapper .e-chips .e-chipcontent, .form-control.form-control-custom .e-multiselect:not(.e-disabled) .e-multi-select-wrapper .e-chips .e-chips-close::before {
        color: inherit !important;
        -webkit-text-fill-color: inherit !important;
    }

    .form-control.form-control-custom .e-multi-select-wrapper .e-chips > .e-chipcontent {
        font-family: var(--bs-body-font);
        font-size: 12px;
        padding: 0;
        padding-right: 0.75rem;
    }

    .form-control.form-control-custom .e-multiselect:not(.e-disabled) .e-multi-select-wrapper .e-chips .e-chips-close::before {
        font-size: 11px;
        line-height: 1;
        text-align: center;
    }

    .form-control.form-control-custom .e-multi-select-wrapper .e-searcher input[type=text], .form-control.form-control-custom .e-multi-select-wrapper .e-multi-searcher input[type=text] {
        color: var(--bs-secondary);
        font-family: var(--bs-body-font-family) !important;
        font-weight: 400;
    }

    .form-control.form-control-custom .e-multi-select-wrapper {
        padding-right: 20px !important;
        min-height: 22px;
    }

    .form-control.form-control-custom .e-multiselect.e-control-container .e-multi-select-wrapper .e-multi-searcher, .form-control.form-control-custom .e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper .e-multi-searcher {
        min-height: 22px;
    }

    .form-control.form-control-custom .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon, .form-control.form-control-custom .e-multiselect.e-control-container .e-multi-select-wrapper .e-ddl-icon, .form-control.form-control-custom .e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper .e-clear-icon, .form-control.form-control-custom .e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper .e-ddl-icon {
        right: -5px;
        top: calc(50% - 11px);
        margin-top: unset !important;
    }
    /*---Fix Tooltips on Syncfusion Modals---*/
    .e-dialog + .tooltip, .e-dialog ~ .tooltip, .e-dlg-container + .tooltip, .e-dlg-container ~ .tooltip, .e-dialog + .tooltip, .e-dialog ~ .popover, .e-dlg-container + .popover, .e-dlg-container ~ .popover {
        z-index: 90000000080;
    }
    /*---Suppress clickable tooltips on mobile---*/
    @media (max-width: 767px) {
        .tooltip.tooltip-blocker, .tooltip.tooltip-blocker.show {
            display: none !important;
        }
    }

    .tooltip.tooltip-blocker.show {
        pointer-events: none;
    }
    /*---Custom: Syncfusion Datepicker Customizations. NEEDS UPDATE---*/
    .form-control-custom.sfDatePickerWrapper:focus:not(.border-0):not(:disabled):has(.invalid),
    .form-control-custom.sfDatePickerWrapper:focus-within:not(.border-0):not(:disabled):has(.invalid) {
        border-color: var(--bs-form-invalid-border-color) !important;
        box-shadow: 0 0 0 0.25rem var(--bs-danger-clarity) !important;
    }

    .form-control-custom.sfDatePickerWrapper:not(.border-0):not(:disabled):has(.invalid) {
        border-color: var(--bs-form-invalid-border-color) !important;
    }

    .form-control.form-control-custom:focus:not(.shadow-none):not(:disabled).sfDatePicker .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-multiselect),
    .form-control.form-control-custom:focus:not(.shadow-none):not(:disabled).sfDatePicker .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-multiselect) {
        box-shadow: none !important;
    }

    .form-control.form-control-custom .e-control-container {
        box-shadow: none !important;
        font-family: var(--bs-body-font-family) !important;
        border-radius: 0.475rem !important;
        overflow: hidden;
        padding: 0px;
    }

    .form-control.form-control-custom .e-input-group:not(.e-success):not(.e-warning):not(.e-error), .form-control.form-control-custom .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error) {
        border-color: transparent;
    }

    .form-control.form-control-custom .e-input-group {
        background-color: transparent;
    }

        .form-control.form-control-custom .e-input-group.e-control-wrapper.e-input-focus {
            box-shadow: unset !important;
        }

        .form-control.form-control-custom .e-input-group .e-input-group-icon, .form-control.form-control-custom .e-input-group.e-control-wrapper .e-input-group-icon {
            background-color: var(--bs-gray-100);
            padding: 0.75rem;
            border-color: var(--bs-gray-300);
            color: var(--bs-gray-700);
        }

        .form-control.form-control-custom .e-input-group:not(.e-disabled) .e-input-group-icon:hover, .form-control.form-control-custom .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
            color: var(--bs-primary);
            background-color: var(--bs-primary-light);
        }

    .form-control.form-control-custom .e-date-wrapper span.e-input-group-icon.e-date-icon.e-icons.e-active {
        color: var(--bs-primary-inverse);
        background-color: var(--bs-primary);
    }

    .form-control.form-control-custom .e-control-container input.e-input {
        height: unset !important;
        padding: 1rem;
    }

    .form-control.form-control-custom .e-input-group.e-input-focus {
        background: transparent;
    }

    .hideSelectDropDown .e-ddl.e-multi-select-list-wrapper.e-popup {
        display: none !important;
    }

    .e-toast-container .e-toast {
        border: none;
    }

    .e-toast-content {
        color: #fff !important;
        text-align: center;
    }
    /*---Custom: Force icons inside badges to match badge's text color---*/
    .badge i.ki-duotone, .btn i.ki-duotone, .badge i.ki-solid, .btn i.ki-solid {
        color: inherit;
    }
    /*---Custom: Styles for disabled sections of forms---*/
    form .disabled:not(.btn):not(.form-control):not(.form-select), .form .disabled:not(.btn):not(.form-control):not(.form-select) {
        position: relative;
        opacity: 0.5;
        pointer-events: none;
    }

        form .disabled:not(.btn):not(.form-control):not(.form-select)::before, .form .disabled:not(.btn):not(.form-control):not(.form-select)::before {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            cursor: not-allowed;
            z-index: 1;
            content: '';
        }
    /*---Onboarding Wizard accordion---*/
    .accordion.plans .accordion-header.collapsed .btn.plan-toggle.edit, .accordion.plans .accordion-header:not(.collapsed) .btn.plan-toggle.done {
        display: flex;
    }

    .accordion.plans .accordion-header.collapsed .btn.plan-toggle.done, .accordion.plans .accordion-header:not(.collapsed) .btn.plan-toggle.edit {
        display: none !important;
    }
    /*---Wizard UI for building courses---*/
    .accordion.modules .accordion-header.collapsed .btn.module-toggle.edit, .accordion.modules .accordion-header:not(.collapsed) .btn.module-toggle.done {
        display: flex;
    }

    .accordion.modules .accordion-header.collapsed .btn.module-toggle.done, .accordion.modules .accordion-header:not(.collapsed) .btn.module-toggle.edit {
        display: none !important;
    }
    /*---Syncfusion Popover for selecting emojis---*/
    .sf-custom-popover .e-tooltip-wrap.e-popup {
        border-radius: 7px !important;
    }

    .sf-custom-popover .e-arrow-tip {
        display: none !important;
    }

    .sf-custom-popover .e-tip-content {
        padding-top: 0.5rem;
        padding-bottom: 1rem;
    }

    .sf-custom-emoji-picker {
        font-family: Inter, "Noto Color Emoji", Helvetica, "sans-serif" !important;
    }

        .sf-custom-emoji-picker .e-tab .e-tab-header .e-toolbar-item:not(.e-active) .e-tab-wrap {
            border: 0px solid transparent !important;
            border-bottom: 2px solid transparent !important;
        }

        .sf-custom-emoji-picker .e-tab .e-tab-header .e-toolbar-item:not(.e-active) {
            border: 0px solid transparent !important;
            filter: grayscale(1);
            border-bottom: 2px solid transparent !important;
        }

            .sf-custom-emoji-picker .e-tab .e-tab-header .e-toolbar-item:not(.e-active):hover {
                border: 0px solid transparent !important;
                border-bottom: 2px solid var(--bs-gray-400) !important;
                filter: grayscale(0.5)
            }

        .sf-custom-emoji-picker .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
            border: 0px solid transparent !important;
        }

        .sf-custom-emoji-picker .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
            padding: 0 0.25rem;
        }

        .sf-custom-emoji-picker .e-tab .e-tab-header .e-toolbar-item {
            margin-right: 0.5rem;
        }

            .sf-custom-emoji-picker .e-tab .e-tab-header .e-toolbar-item.e-active {
                border: 0px solid transparent !important;
                border-bottom: 2px solid var(--bs-primary) !important;
                background: transparent !important;
            }

        .sf-custom-emoji-picker .e-tab-text {
            font-family: "Noto Color Emoji" !important;
        }

        .sf-custom-emoji-picker .e-content.e-lib.e-touch {
            max-height: 250px;
            overflow: auto;
        }

        .sf-custom-emoji-picker .e-toolbar-items {
            padding-left: 1rem;
            padding-right: 1rem;
        }

        .sf-custom-emoji-picker .e-tab .e-tab-header:not(.e-vertical)::before {
            border: none !important;
        }

    .e-tooltip-wrap.sf-custom-popover .e-tip-content {
        z-index: 2;
    }

    .e-tooltip-wrap.sf-custom-popover .e-tooltip-close {
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        border-radius: 0;
        opacity: 0;
        cursor: default;
    }

    .sf-custom-popover.e-tooltip-wrap.e-popup {
        background: var(--bs-body-bg);
        box-shadow: var(--bs-box-shadow-lg);
        border-radius: var(--bs-border-radius);
        border: 1px solid var(--bs-secondary);
    }

    .sf-custom-emoji-picker .e-control.e-toolbar.e-lib.e-tab-header.e-keyboard {
        margin-bottom: 0.5rem;
        background: var(--bs-body-bg);
        border-bottom: 1px solid var(--bs-secondary);
    }
    /*----FIXED CELLS----*/
    .fixed-cell {
        position: sticky;
    }

        .fixed-cell.fixed-cell-end {
            right: -1px;
        }

        .fixed-cell.fixed-cell-start {
            left: -1px;
        }

    .card .tr.bg-light .fixed-cell, tr.bg-light .fixed-cell {
        background-color: var(--bs-light) !important;
    }

    tr td.fixed-cell.fixed-cell-end {
        background-color: transparent;
        box-shadow: inset 0 0 0 9999px var(--bs-table-bg);
    }

    tr:hover td.fixed-cell.fixed-cell-end {
        box-shadow: inset 0 0 0 9999px var(--bs-table-hover-bg)
    }

    .fixed-cell .btn {
        z-index: 1;
    }
    /*----TABLE SORTING---*/
    .table-sort-desc.active:after, .table-sort-asc.active:after {
        background-color: var(--bs-primary);
    }

    .table-sort-desc:after, .table-sort-asc:after {
        opacity: 0.75;
    }

    .table-sort-desc:hover:after, .table-sort-asc:hover:after {
        opacity: 1;
    }
    /*---CARDS WITH LEFT NAVIGATION---*/
    @media (max-width: 1200px) {
        .card-leftnav {
            border: none !important
        }
    }
    /*----FIX FOR CONSTANT HEIGHTS---*/
    @media (min-width: 992px) {
        .container-xxl {
            height: 100%;
        }
    }
    /*----MENU ACTION GROUPINGS---*/
    .menu-accordion > .menu-actions {
        height: 40px;
    }

    .menu-item, .menu-content, .menu-icon {
        position: relative;
    }

    .menu-actions {
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        padding: 0.15rem 0.5rem;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        align-items: center;
        background-color: inherit;
        justify-content: flex-end;
        align-content: center;
        gap: 0.5rem;
        z-index: 1;
    }

        .menu-actions > .menu-icon {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            flex-grow: 100;
            z-index: 1;
        }

        .menu-actions + .menu-link, .menu-actions.menu-actions-single + .menu-link {
            padding-right: 30px !important;
        }

        .menu-actions.menu-actions-duo + .menu-link {
            padding-right: 45px !important;
        }

        .menu-actions.menu-actions-trio + .menu-link {
            padding-right: 60px !important;
        }

    .menu-item .menu-actions a.menu-icon, .menu-item .menu-actions button.menu-icon {
        opacity: 0%;
    }

    .menu-item.menu-accordion > .menu-actions a.menu-icon, .menu-item.menu-accordion > .menu-actions button.menu-icon {
        opacity: 50%;
    }

    .menu-item:hover > .menu-actions * {
        opacity: 100% !important;
    }

    .menu-accordion .menu-text.one-line:only-child {
        margin-left: 0.35rem;
    }

    .menu-item:not(.here):hover > .menu-link:not(.disabled):not(.active):not(.here) {
        transition: color 0.2s ease;
        background-color: var(--bs-menu-link-bg-color-hover);
        color: var(--bs-menu-link-color-hover);
    }

    .menu-item:not(.here):hover > .menu-link:not(.disabled):not(.active):not(.here), .menu-state-primary .menu-item.hover:not(.here) > .menu-link:not(.disabled):not(.active):not(.here) .menu-icon, .menu-state-primary .menu-item.hover:not(.here) > .menu-link:not(.disabled):not(.active):not(.here) .menu-icon .svg-icon, .menu-state-primary .menu-item.hover:not(.here) > .menu-link:not(.disabled):not(.active):not(.here) .menu-icon i, .menu-state-primary .menu-item:not(.here):hover > .menu-link:not(.disabled):not(.active):not(.here) .menu-icon, .menu-state-primary .menu-item:not(.here):hover > .menu-link:not(.disabled):not(.active):not(.here) .menu-icon .svg-icon, .menu-state-primary .menu-item:not(.here):hover > .menu-link:not(.disabled):not(.active):not(.here) .menu-icon i {
        transition: color 0.2s ease;
        color: var(--bs-primary);
    }
    /*-----SHOW STANDARD MENU HIGHLIGHT WHEN HOVERING MENU ACTIONS----*/
    .menu-state-primary .menu-item > .menu-link:not(.disabled):not(.active):not(.here) .menu-icon:hover i, .menu-state-primary .menu-item > .menu-link:not(.disabled).active .menu-icon i {
        color: var(--bs-primary) !important;
    }

    .menu-state-primary .menu-item > .menu-link:not(.disabled).active .menu-icon:hover i {
        opacity: 0.85;
    }
    /* Emoticons */
    .rteEmoticons {
        padding: 0 0 10px 10px;
    }

    .char_block {
        width: 30px;
        height: 30px;
        line-height: 30px;
        margin: 0 0.25rem 0.25rem 0;
        text-align: center;
        vertical-align: middle;
        font-size: 20px;
        cursor: pointer;
        user-select: none;
        display: inline-block;
        border-radius: var(--bs-border-radius-sm);
    }

        .char_block:hover, .char_block:active, .char_block:focus {
            background-color: var(--bs-secondary)
        }

        .char_block.e-active {
            outline: 1px solid #e3165b;
            border-color: #e3165b;
        }

    .bootstrap4 .char_block.e-active {
        outline: 1px solid #007bff;
        border-color: #007bff;
    }

    .bootstrap .char_block.e-active, .bootstrap-dark .char_block.e-active {
        outline: 1px solid #317ab9;
        border-color: #317ab9;
    }
    /*--Suppress color on menu header arrows---*/
    .menu-arrow.text-muted::after {
        background-color: var(--bs-text-muted) !important
    }
    /*----Unstick CardNavs on Small Screens---*/
    @media (max-width: 991px) {
        .unstick-me {
            position: relative !important;
            top: unset !important;
            left: unset !important;
            width: 100% !important;
        }

            .unstick-me .card-body.hover-scroll-y {
                max-height: unset !important;
            }
    }
    /*-----Text Clamps----*/
    .text-clamp {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
    }

    .text-clamp-1 {
        -webkit-line-clamp: 1;
    }

    .text-clamp-2 {
        -webkit-line-clamp: 2;
    }

    .text-clamp-3 {
        -webkit-line-clamp: 3;
    }

    .text-clamp-4 {
        -webkit-line-clamp: 4;
    }

    .text-clamp-5 {
        -webkit-line-clamp: 5;
    }

    .text-clamp-6 {
        -webkit-line-clamp: 6;
    }

    .text-clamp-7 {
        -webkit-line-clamp: 7;
    }

    .text-clamp-8 {
        -webkit-line-clamp: 8;
    }

    .text-clamp-9 {
        -webkit-line-clamp: 9;
    }

    @media (max-width: 991.98px) {
        .text-clamp-1.extend-clamp-sm {
            -webkit-line-clamp: 2;
        }
    }
    /*----Background Accent for Table Headers----*/
    .table {
        --bs-table-bg: var(--bs-body-bg);
    }

    thead.header-accent th {
        background-color: transparent;
        box-shadow: inset 0 0 0 9999px var(--bs-gray-200);
    }

        thead.header-accent th:first-child {
            border-bottom-left-radius: 0.425rem;
            border-top-left-radius: 0.425rem;
        }

        thead.header-accent th:last-child {
            border-bottom-right-radius: 0.425rem;
            border-top-right-radius: 0.425rem;
        }

    .thead.header-accent.header-accent-light th {
        box-shadow: inset 0 0 0 9999px var(--bs-gray-25);
    }

    thead.header-accent th {
        color: var(--bs-gray-700) !important;
    }

    thead.header-accent.header-accent-light {
        border-bottom: 1.4px solid var(--bs-gray-200);
    }

        thead.header-accent.header-accent-light th:last-child {
            border-bottom-right-radius: 0 !important;
        }

        thead.header-accent.header-accent-light th:first-child {
            border-bottom-left-radius: 0 !important;
        }

    .card-body.p-0 thead.header-accent th, .card-body.px-0 thead.header-accent th {
        border-radius: 0 !important;
    }

    [data-bs-theme=dark] thead.header-accent.header-accent-light {
        border-bottom: 1.4px solid var(--bs-gray-400);
    }

        [data-bs-theme=dark] thead.header-accent.header-accent-light th {
            box-shadow: inset 0 0 0 9999px var(--bs-gray-300);
        }

    .card-body.px-0 thead.header-accent, .card-body.p-0 thead.header-accent {
        border-radius: 0;
        border-bottom: 1.4px solid var(--bs-gray-200);
    }

    thead.header-accent > tr {
        border: none !important;
    }

    thead.header-accent {
        position: relative;
        z-index: 94
    }

        thead.header-accent + tbody::before {
            display: block;
            width: 100%;
            height: 10px;
            content: '';
            pointer-events: none;
            opacity: 0;
        }

    .card-body.px-0 thead.header-accent + tbody::before, .card-body.p-0 thead.header-accent + tbody::before {
        display: block;
        width: 100%;
        height: 0px;
        content: '';
        pointer-events: none;
        opacity: 0;
    }

    thead.header-accent .form-check-input {
        --bs-form-check-bg: var(--bs-card-bg)
    }

    .form-check.form-check-custom .form-check-input:hover {
        --bs-form-check-bg: var(--bs-primary-light)
    }

    [data-bs-theme=dark] .table thead.header-accent th {
        color: var(--bs-secondary-inverse) !important;
    }

    .table thead.header-accent tr:first-child, .table thead.header-accent th:first-child, .table thead.header-accent td:first-child, .table thead.header-accent + tbody tr:first-child, .table thead.header-accent + tbody td:first-child {
        padding-left: 1.25rem !important;
    }

    .table thead.header-accent tr:last-child, .table thead.header-accent th:last-child, .table thead.header-accent td:last-child, .table thead.header-accent + tbody tr:last-child, .table thead.header-accent + tbody td:last-child {
        padding-right: 1.25rem !important;
    }

    .card-body.px-0 .table thead.header-accent tr:first-child, .card-body.px-0 .table thead.header-accent th:first-child, .card-body.px-0 .table thead.header-accent td:first-child, .card-body.px-0 .table thead.header-accent + tbody tr:first-child, .card-body.px-0 .table thead.header-accent + tbody td:first-child, .card-body.p-0 .table thead.header-accent tr:first-child, .card-body.p-0 .table thead.header-accent th:first-child, .card-body.p-0 .table thead.header-accent td:first-child, .card-body.p-0 .table thead.header-accent + tbody tr:first-child, .card-body.p-0 .table thead.header-accent + tbody td:first-child {
        padding-left: 2.25rem !important;
    }

    .card-body.px-0 .table thead.header-accent tr:last-child, .card-body.px-0 .table thead.header-accent th:last-child, .card-body.px-0 .table thead.header-accent td:last-child, .card-body.px-0 .table thead.header-accent + tbody tr:last-child, .card-body.px-0 .table thead.header-accent + tbody td:last-child, .card-body.p-0 .table thead.header-accent tr:last-child, .card-body.p-0 .table thead.header-accent th:last-child, .card-body.p-0 .table thead.header-accent td:last-child, .card-body.p-0 .table thead.header-accent + tbody tr:last-child, .card-body.p-0 .table thead.header-accent + tbody td:last-child {
        padding-right: 2.25rem !important;
    }
    /*---FIX DROPDOWN MENU BACKGROUNDS IN DARK MODE---*/
    [data-bs-theme=dark] {
        --bs-menu-dropdown-bg-color: var(--bs-gray-200);
    }

        [data-bs-theme=dark] .menu-sub-dropdown .separator {
            border-bottom: 1.4px solid var(--bs-gray-400);
        }
    /*----UNIQUE SIDEBAR ICON COLORING---*/
    #collection_sidebar_right .menu-link.active .symbol-40px .symbol-label {
        background-color: var(--bs-primary) !important;
    }

        #collection_sidebar_right .menu-link.active .symbol-40px .symbol-label .ki-duotone {
            color: #fff !important;
        }
    /*----SPECIAL TOGGLE-STATES FOR POST BUTTONS-----*/
    .btn.comment-toggle:not(.active):hover {
        background: var(--bs-secondary-clarity) !important;
    }

    .btn.comment-toggle.active:hover, .btn.like-toggle.active:hover {
        opacity: 0.85
    }
    /*---SEPARATOR THICKNESS CUSTOMIZATION---*/
    .separator.separator-content::before, .separator.separator-content::after {
        border-bottom-width: 1.4px;
    }
    /*----PRICING NAV-----*/
    .pricing-nav .btn-check:active + .btn.btn-outline.btn-active-light-primary, .pricing-nav .btn-check:checked + .btn.btn-outline.btn-active-light-primary, .pricing-nav .btn.btn-outline.btn-active-light-primary.active, .pricing-nav .btn.btn-outline.btn-active-light-primary.show, .pricing-nav .btn.btn-outline.btn-active-light-primary:active:not(.active), .pricing-nav .btn.btn-outline.btn-active-light-primary:focus:not(.active), .pricing-nav .btn.btn-outline.btn-active-light-primary:hover:not(.active), .pricing-nav .show > .btn.btn-hover-outline.btn-active-light-primary {
        border-color: var(--bs-primary) !important;
        background-color: var(--bs-primary-light) !important;
    }

        .pricing-nav .btn-check:active + .btn.btn-outline.btn-active-light-primary .form-check.form-check-solid .form-check-input:not(:checked), .pricing-nav .btn-check:checked + .btn.btn-outline.btn-active-light-primary .form-check.form-check-solid .form-check-input:not(:checked), .pricing-nav .btn.btn-outline.btn-active-light-primary.active .form-check.form-check-solid .form-check-input:not(:checked), .pricing-nav .btn.btn-outline.btn-active-light-primary.show .form-check.form-check-solid .form-check-input:not(:checked), .pricing-nav .btn.btn-outline.btn-active-light-primary:active:not(.active) .form-check.form-check-solid .form-check-input:not(:checked), .pricing-nav .btn.btn-outline.btn-active-light-primary:focus:not(.active) .form-check.form-check-solid .form-check-input:not(:checked), .pricing-nav .btn.btn-outline.btn-active-light-primary:hover:not(.active) .form-check.form-check-solid .form-check-input:not(:checked), .pricing-nav .show > .btn.btn-hover-outline.btn-active-light-primary {
            background-color: var(--bs-body-bg);
        }

    .btn-group.pricing-period-toggle .btn.btn-outline.btn-active-secondary:not(.active):hover {
        background-color: var(--bs-gray-200) !important;
    }
    /*----BALANCE VERTICAL SPACING ON FLOATING FORM LABELS WHEN NOT FOCUSED OR COMPLETE----*/
    .form-floating > label {
        line-height: 1.75;
        font-weight: 500;
    }

    .form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-control-plaintext ~ label, .form-floating > .form-select ~ label {
        line-height: 1.5;
    }

    .form-floating .form-select {
        line-height: 1.25
    }

    .form-floating > .form-control:focus ~ label.required::after, .form-floating > .form-control:not(:placeholder-shown) ~ label.required::after, .form-floating > .form-control-plaintext ~ label.required::after, .form-floating > .form-select ~ label.required::after {
        content: "*";
        left: calc(100% - 14px);
        background-color: transparent;
    }

    .form-floating > .form-control:focus ~ label::after, .form-floating > .form-control:not(:placeholder-shown) ~ label::after, .form-floating > .form-control-plaintext ~ label::after, .form-floating > .form-select ~ label::after {
        background-color: transparent;
    }
    /*----FORM INPUT AND SELECT2 CUSTOMIZATIONS-----*/
    .select2-container--bootstrap5 .select2-dropdown {
        padding: 0.25rem 0;
        --bs-dropdown-box-shadow: 0px 10px 20px 0px rgba(82, 63, 105, 0.15);
        border: 1px var(--bs-gray-100) solid;
    }

    .form-control.form-control-custom:focus:not(.border-0):not(:disabled), .form-control.form-control-custom:not(.border-0):not(:disabled):focus-within, .form-select.form-select-custom:not(.border-0):not(:disabled):focus, .form-control.form-control-custom:not(.border-0):not(:disabled):active, .form-select.form-select-custom:not(.border-0):not(:disabled):active, .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-multiselect), .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-multiselect) {
        border-color: var(--bs-primary-300) !important;
    }

        .form-control.form-control-custom:focus:not(.shadow-none):not(:disabled), .form-control.form-control-custom:not(.shadow-none):not(:disabled):focus-within, .form-select.form-select-custom:not(.shadow-none):not(:disabled):focus, .form-control.form-control-custom:not(.shadow-none):not(:disabled):active, .form-select.form-select-custom:not(.shadow-none):not(:disabled):active, .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-multiselect):not(.sfDatePicker), .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-multiselect):not(.sfDatePicker) {
            box-shadow: 0px 0px 0px 4px var(--bs-primary-clarity) !important;
        }

    .e-input-group {
        display: block;
        width: 100%;
        padding: 0.775rem 1rem;
        font-size: 1.1rem;
        font-weight: 500;
        line-height: 1.5;
        color: var(--bs-gray-700);
        appearance: none;
        background-color: var(--bs-body-bg);
        background-clip: padding-box;
        border: 1px solid var(--bs-gray-300);
        border-radius: 0.475rem !important;
    }

    .e-maskedtextbox.e-input {
        padding: 0 !important;
        color: var(--bs-gray-700) !important;
        font-weight: 500 !important;
        font-family: var(--bs-body-font);
        height: unset !important;
        line-height: 1.25;
        font-size: 1.1rem;
    }

    .form-control-plaintext .e-input {
        padding: 0 !important;
        color: var(--bs-gray-500) !important;
        font-weight: 400 !important;
        font-family: var(--bs-body-font);
        height: unset !important;
        line-height: 1.25;
        font-size: 1.1rem;
    }
    /*----MOBILE DROPDOWN MENUS----*/
    @media (max-width: 767px) {
        .menu-sub.menu-sub-dropdown.show {
            position: fixed !important;
            transform: unset !important;
            inset: unset !important;
            bottom: env(safe-area-inset-bottom) !important;
            left: env(safe-area-inset-left) !important;
            top: unset !important;
            width: 100% !important;
            z-index: 2147483005 !important;
            padding-top: 1rem;
            padding-bottom: 2rem;
            border-bottom-left-radius: 0 !important;
            border-bottom-right-radius: 0 !important;
            max-height: calc(100vh - 120px);
            overflow-y: scroll;
            gap: 0.15rem;
        }

        .menu-sub.menu-sub-dropdown .menu-title, .menu-sub.menu-sub-dropdown .menu-link, .menu-sub.menu-sub-dropdown .menu-icon, .menu-sub.menu-sub-dropdown .menu-content {
            font-size: 1.25rem;
        }

        .menu-sub.menu-sub-dropdown.show#kt_menu_notifications, .menu-sub.menu-sub-dropdown#kt_menu_notifications {
            padding-top: 0 !important;
            padding-bottom: 0 !important;
            height: 90vh;
            overflow-y: hidden !important;
        }

        .notification-entry-list > a:last-child {
            margin-bottom: 5rem;
        }

        @keyframes menu-sub-dropdown-animation-move-up {
            from {
                margin-bottom: -50vh;
            }

            to {
                margin-top: 0;
            }
        }

        @keyframes menu-sub-dropdown-animation-move-down {
            from {
                margin-bottom: -50vh;
            }

            to {
                margin-top: 0;
            }
        }

        .menu.menu-sub.menu-sub-dropdown.show::-webkit-scrollbar, .menu.menu-sub.menu-sub-dropdown.show *::-webkit-scrollbar {
            opacity: 0;
            height: 0;
            width: 0;
            display: none !important;
        }

        .show.menu-dropdown::before {
            position: fixed;
            content: '';
            background: var(--bs-black);
            opacity: 0.25;
            top: -10px;
            left: -10px;
            width: 110vw;
            height: 110vh;
            z-index: 2147483004 !important;
            cursor: default;
        }
    }
    /*-----MENU DROPDOWN ARROW FIX-----*/
    .menu-item.menu-accordion .menu-arrow:after {
        transform: rotateZ(0deg) !important;
    }

    .menu-item.menu-accordion.showing:not(.menu-dropdown) > .menu-link .menu-arrow:after, .menu-item.menu-accordion.show:not(.hiding):not(.menu-dropdown) > .menu-link .menu-arrow:after {
        transform: rotateZ(90deg) !important;
    }

    .nav-link.active:not(.show) > .rotate-180, .nav-slider .active:not(.show) > .rotate-180 {
        transform: unset !important;
        transition: transform .3s ease;
    }

    .nav-link .active.show > .rotate-180, .nav-slider .active.show > .rotate-180 {
        transform: rotateZ(180deg) !important;
        transition: transform .3s ease;
    }
    /*-----CUSTOM COURSE MENU-----*/
    .course-content-menu .menu-actions + .menu-link, .course-content-menu .menu-actions.menu-actions-single + .menu-link {
        padding-right: 40px !important;
    }
    /*----NAVIGATION OVERHAUL----*/
    .layout-2 div#kt_header[data-kt-sticky-enabled="true"] {
        display: flex;
    }

    .layout-2 div#kt_header:not([data-kt-sticky-enabled="true"]) {
        display: none;
    }

    .header-tablet-and-mobile-fixed[data-kt-sticky-header=on] .layout-2 div#kt_banner {
        z-index: 0 !important;
    }

    .page-title .breadcrumb {
        padding: 0.25rem 0.5rem;
        background: var(--bs-body-bg);
        border-radius: 0.65rem;
    }

    #kt_aside .btn.btn-outline[class*="btn-outline-"] {
        background-color: var(--bs-aside-bg-color);
    }

    .aside-fixed.aside-secondary-enabled[data-kt-sticky-header=on] div#kt_header {
        border-bottom: solid 1.4px var(--bs-gray-200)
    }

    @media (min-width: 992px) {

        .aside-fixed.aside-secondary-enabled[data-kt-sticky-header=on] #kt_banner.header {
            left: 80px !important;
        }

        .aside-fixed.aside-secondary-enabled[data-kt-sticky-header=on] .header {
            left: 200px;
        }

        .aside-fixed.aside-secondary-enabled[data-kt-sticky-header=on][data-kt-aside-minimize=on] .header {
            left: 80px;
        }

        .aside .aside-primary, .aside-secondary-enabled .aside {
            width: 200px;
            transition: width 0.3s ease;
            background-color: var(--bs-aside-bg-color);
            border-right: var(--bs-aside-border) !important;
        }

        [data-kt-aside-minimize=on].aside-secondary-enabled .aside, [data-kt-aside-minimize=on] .aside, [data-kt-aside-minimize=on] .aside .aside-primary {
            width: 80px;
            transition: width 0.3s ease;
            background-color: var(--bs-aside-bg-color);
            border-right: var(--bs-aside-border) !important;
        }

        .aside-secondary-enabled.aside-fixed .wrapper {
            padding-left: 200px;
        }

        [data-kt-aside-minimize=on].aside-secondary-enabled.aside-fixed .wrapper {
            padding-left: 80px;
        }

        body .aside .d-closed-none {
            white-space: nowrap;

            @starting-style {
                opacity: 0;
            }

            animation: nav-fadein 0.3s;
        }

        body[data-kt-aside-minimize=on] .d-closed-none {
            opacity: 0;
            display: none;
        }

        body[data-kt-aside-minimize=on] .aside .menu.closed-center {
            align-items: center;
        }

            body[data-kt-aside-minimize=on] .aside .menu.closed-center .menu-item, body[data-kt-aside-minimize=on] .aside .menu.closed-center > .btn {
                width: 100%;
                min-width: 46.36px;
            }

        .aside .menu.closed-center .menu-item .menu-link {
            padding: 10px;
            min-width: 46.36px;
        }

        body[data-kt-aside-minimize=on] .aside .menu.closed-center .menu-item .menu-link {
            width: 100%;
            height: 100%;
            /* justify-content: center;
         */
            min-width: 46.36px;
        }

        body[data-kt-aside-minimize=on] .create-button {
            min-width: 46.36px;
            width: 100%;
        }

        body[data-kt-aside-minimize=on] .aside .menu.closed-center > .btn {
            /* justify-content: center;
         */
        }

        .aside .menu.closed-center .menu-icon, .aside .menu.closed-center .btn i, .aside .menu.closed-center .menu-item .symbol {
            margin: unset !important;
            padding: unset !important;
        }

        .aside .menu.closed-center .menu-text {
            margin-left: 0.25rem;
        }

        body[data-kt-aside-minimize=on] .closed-center {
            justify-content: center !important;
            align-items: start !important;
        }

        .aside-fixed.aside-secondary-enabled[data-kt-sticky-header=on] .header.layout-2 {
            position: relative !important;
            left: unset !important;
            top: unset !important;
            z-index: inherit !important;
        }
    }

    @media (max-width: 991.98px) {
        .aside .aside-primary {
            width: 300px;
        }
    }

    .aside .menu.closed-center .menu-item .menu-link {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .aside .menu.closed-center .menu-item {
        height: 46.36px;
        padding: 0rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .aside {
        box-shadow: none;
        --bs-aside-border: 1.5px solid var(--bs-gray-200);
    }

    .aside-logo:hover .symbol-circle.bg-gray-200:not(.active) {
        background-color: var(--bs-primary-50) !important;
    }

    @keyframes nav-fadein {
        0% {
            opacity: 0;
            display: none;
        }

        100% {
            opacity: 1;
            display: block;
        }
    }
    /*----BREADCRUMB TWEAK-----*/
    .breadcrumb .breadcrumb-item:after {
        content: "\ee03";
        font-family: "keenicons-duotone" !important;
        font-weight: 500 !important;
    }

    .breadcrumb .breadcrumb-item {
        font-weight: 500 !important;
        color: var(--bs-gray-600);
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

        .breadcrumb .breadcrumb-item, .breadcrumb .breadcrumb-item:after {
            padding-left: 0.25rem;
            padding-right: 0.25rem;
        }

            .breadcrumb .breadcrumb-item:last-child {
                color: var(--bs-body-color) !important;
            }
    /*----HORIZONTAL MOBILE NAVIGATIONS---*/
    .nav-slider {
        overflow-x: scroll;
        white-space: nowrap;
        flex-wrap: nowrap;
        margin: -0.3rem -1rem;
        padding: 0.3rem 1rem;
        overflow-y: visible;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

        .nav-slider::-webkit-scrollbar {
            opacity: 0;
            height: 0;
        }

    .row.nav-slider > *:first-child {
        padding-left: 0 !important;
    }

    .row.nav-slider > *:last-child {
        padding-right: 0 !important;
    }

    @media (max-width: 991px) {
        .nav-slider-lg {
            overflow-x: scroll;
            white-space: nowrap;
            flex-wrap: nowrap;
            margin-left: -1rem;
            padding-left: 1rem;
            margin-right: -1rem;
            padding-right: 1rem;
            overflow-y: hidden;
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

            .nav-slider-lg::-webkit-scrollbar {
                opacity: 0;
                height: 0;
            }

        .row.nav-slider-lg > *:first-child {
            padding-left: 0 !important;
        }

        .row.nav-slider-lg > *:last-child {
            padding-right: 0 !important;
        }
    }

    @media (max-width: 767px) {
        .nav-slider-md {
            overflow-x: scroll;
            white-space: nowrap;
            flex-wrap: nowrap;
            margin-left: -1rem;
            padding-left: 1rem;
            margin-right: -1rem;
            padding-right: 1rem;
            overflow-y: hidden;
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

            .nav-slider-md::-webkit-scrollbar {
                opacity: 0;
                height: 0;
            }

        .row.nav-slider-md > *:first-child {
            padding-left: 0 !important;
        }

        .row.nav-slider-md > *:last-child {
            padding-right: 0 !important;
        }
    }

    @media (max-width: 565px) {
        .nav-slider-sm {
            overflow-x: scroll;
            white-space: nowrap;
            flex-wrap: nowrap;
            margin-left: -1rem;
            padding-left: 1rem;
            margin-right: -1rem;
            padding-right: 1rem;
            overflow-y: hidden;
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

            .nav-slider-sm::-webkit-scrollbar {
                opacity: 0;
                height: 0;
            }

        .row.nav-slider-sm > *:first-child {
            padding-left: 0 !important;
        }

        .row.nav-slider-sm > *:last-child {
            padding-right: 0 !important;
        }
    }

    .white-space-normal .e-dialog .e-dlg-header {
        white-space: normal;
    }
    /*---CUSTOMIZED NAV TABS-----*/
    .nav-line-tabs.nav-line-tabs-custom {
        border-bottom: none !important;
        gap: 1.5rem;
        margin: unset !important;
    }

        .nav-line-tabs.nav-line-tabs-custom .nav-item {
            margin-bottom: unset !important;
        }

            .nav-line-tabs.nav-line-tabs-custom .nav-item .nav-link, .nav-line-tabs.nav-line-tabs-custom .nav-item .nav-link.active, .nav-line-tabs.nav-line-tabs-custom .nav-item.show .nav-link, .nav-line-tabs.nav-line-tabs-custom .nav-item .nav-link:hover:not(.disabled) {
                border-bottom: unset !important;
                margin: unset;
                position: relative;
                width: 100%;
            }

                .nav-line-tabs.nav-line-tabs-custom .nav-item .nav-link::after {
                    position: absolute;
                    content: '';
                    display: block;
                    width: 100%;
                    height: 3px;
                    border-radius: 50px;
                    bottom: 0;
                    left: 0;
                    background: var(--bs-primary-500);
                    opacity: 0;
                    transition: opacity 0.2s ease;
                }

                .nav-line-tabs.nav-line-tabs-custom .nav-item .nav-link:hover::after {
                    opacity: 0.7;
                    transition: opacity 0.2s ease;
                }

                .nav-line-tabs.nav-line-tabs-custom .nav-item .nav-link.active::after {
                    opacity: 1;
                }
    /*----NOTIFICATION ENTRY LINK COLORING----*/
    a.notification-entry {
        color: unset;
    }

        a.notification-entry .notification-title {
            color: var(--bs-gray-900);
        }

        a.notification-entry .notification-date {
            color: var(--bs-gray-700);
        }

        a.notification-entry:hover .notification-title {
            color: var(--bs-primary);
        }
    /*----SYNCFUSION CHART CUSTOMIZATION -----*/
    .e-control.e-chart rect {
        stroke: transparent !important;
        fill: transparent !important;
    }
    /*----CUSTOM COMPONENT: CHECKBOX GROUPS----*/
    .checkbox-group {
        box-shadow: 0 0 0 0px var(--bs-primary-clarity);
        transition: box-shadow ease 0.2s;
        border: 1.4px solid var(--bs-gray-200);
        padding: 1rem;
        border-radius: 0.625rem;
        background: inherit;
        cursor: pointer;
    }

        .checkbox-group:not(:last-child) {
            margin-bottom: 0.75rem;
        }

    .d-flex[class*="gap-"] > .checkbox-group {
        margin-bottom: unset;
    }

    .checkbox-group:hover:not(.disabled) {
        border: 1.4px solid var(--bs-primary-300);
    }

    .checkbox-group.active, .checkbox-group:has(.form-check-input:checked) {
        background: var(--bs-primary-clarity);
        border: 1.4px solid var(--bs-primary-300)
    }

    .checkbox-group:not(.disabled) .symbol-label {
        background: var(--bs-primary-light);
    }

        .checkbox-group:not(.disabled) .symbol-label i, .checkbox-group:not(.disabled) .symbol-label i span {
            color: var(--bs-primary-600) !important;
        }

    .checkbox-group.active span:not(.checkbox-group-title):not(.badge), .checkbox-group:has(.form-check-input:checked) span:not(.checkbox-group-title):not(.badge) {
        color: var(--bs-primary-600) !important;
    }

    .checkbox-group:not(.active) span:not(.checkbox-group-title):not(.badge), .checkbox-group:not(:has(.form-check-input:checked)) span:not(.checkbox-group-title):not(.badge) {
        color: var(--bs-gray-600);
    }

    .checkbox-group:not(.active) .checkbox-group-title, .checkbox-group:not(:has(.form-check-input:checked)) .checkbox-group-title, {
        color: var(--bs-gray-900) !important;
        font-weight: 600;
    }

    .checkbox-group.active .checkbox-group-title, .checkbox-group:has(.form-check-input:checked) .checkbox-group-title {
        color: var(--bs-primary-800) !important;
        font-weight: 600;
    }

    .checkbox-group span.form-check.form-check-custom input[type=radio] {
        border-radius: 50%;
        border: 1.4px solid var(--bs-gray-300);
    }

    .checkbox-group span.form-check.form-check-custom input[type=checkbox] {
        border-radius: 0.5rem;
        border: 1.4px solid var(--bs-gray-300);
    }

    .checkbox-group:hover:not(.disabled):not(.active) .form-check-input:not(:checked), .checkbox-group:hover:not(.disabled):not(:has(.form-check-input:checked)) .form-check-input:not(:checked) {
        background: var(--bs-primary-50);
        border: 1.4px solid var(--bs-primary-300);
    }

    .checkbox-group:hover:not(.disabled):not(:focus):not(:active).active .form-check-input:checked, .checkbox-group:hover:not(.disabled):not(:focus):not(:active):has(.form-check-input:checked) .form-check-input:checked {
        opacity: 0.75;
    }

    .checkbox-group.active span.form-check.form-check-custom input, .checkbox-group:has(.form-check-input:checked) span.form-check.form-check-custom input {
        border: 1.4px solid var(--bs-primary);
    }

    .checkbox-group:focus:not(.disabled), .checkbox-group:active:not(.disabled), .checkbox-group:focus-within:not(.disabled) {
        box-shadow: 0 0 0 4px var(--bs-primary-clarity);
        transition: box-shadow ease 0.2s;
        border: 1.4px solid var(--bs-primary-300);
    }

        .checkbox-group:focus:not(.disabled):not(.active) span.form-check.form-check-custom input, .checkbox-group:active:not(.disabled):not(.active) span.form-check.form-check-custom input, .checkbox-group:focus-within:not(.disabled):not(.active) span.form-check.form-check-custom input, .checkbox-group:focus:not(.disabled):not(:has(.form-check-input:checked)) span.form-check.form-check-custom input, .checkbox-group:active:not(.disabled):not(:has(.form-check-input:checked)) span.form-check.form-check-custom input, .checkbox-group:focus-within:not(.disabled):not(:has(.form-check-input:checked)) span.form-check.form-check-custom input, {
            box-shadow: 0 0 0 4px var(--bs-primary-clarity);
            transition: box-shadow ease 0.2s;
            background: var(--bs-primary-50);
            border: 1.4px solid var(--bs-primary-300);
        }

    .checkbox-group.disabled {
        opacity: 1 !important;
        pointer-events: all !important;
        cursor: unset !important;
        background: var(--bs-gray-50);
        border: 1.4px solid var(--bs-gray-200);
    }

        .checkbox-group.disabled::before {
            display: none !important;
        }

    .checkbox-group .symbol-label {
        background: transparent;
    }

    .checkbox-group.disabled .symbol-label i {
        color: var(--bs-gray-300);
    }

    .checkbox-group.disabled span:not(.checkbox-group-title):not(.badge) {
        color: var(--bs-gray-600);
    }

    .checkbox-group.disabled .checkbox-group-title {
        color: var(--bs-gray-700) !important;
    }
    /*----CB CREDIT CARD NUMBER form CUSTOMIZATIONS------*/
    iframe#tx_iframe_ccnumber {
        height: 18px;
    }

    #ccnumber.form-is-focused {
        border-color: var(--bs-primary-300) !important;
        box-shadow: 0px 0px 0px 4px var(--bs-primary-clarity) !important;
    }
    /*----FADE BAR ON CONVERSATIONS----*/
    .fade-bar {
        position: relative;
        z-index: 1;
        pointer-events: none;
    }

        .fade-bar::after {
            position: absolute;
            content: '';
            bottom: -12px;
            height: 12px;
            width: 100%;
            left: 0;
        }

    [data-bs-theme=light] .fade-bar::after {
        background: #FFF;
        background: linear-gradient(0deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.27) 46%, rgba(255, 255, 255, 0.5) 100%);
    }
    /*-----YOUTUBE THUMBNAILS IN CHAT-----*/
    .rte-video-wrapper {
        position: relative;
        width: 100%;
        max-width: 100%;
        min-width: 100%;
        overflow: hidden;
        display: block !important;
        margin: unset;
        --bs-aspect-ratio: 56.25%;
    }

        .rte-video-wrapper::before {
            display: block;
            padding-top: var(--bs-aspect-ratio);
            content: "";
        }

    .rte-video-iframe {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        overflow: hidden;
        border-radius: 1rem;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
    }
    /*----Draggable Indicators-----*/
    .drag-destination {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 50px;
        transition: height ease 0.2s;
        position: relative;
        padding: var(--bs-gutter-y) 0;
    }

    .drag-destination-inner {
        background: var(--bs-primary);
        border-radius: inherit;
        display: flex;
        width: 100%;
        height: 0rem;
        transition: height ease 0.2s;
        position: relative;
        opacity: 0;
    }

    html.is-dragging-level-1 .drag-destination.drag-level-1 .drag-destination-inner, html.is-dragging-level-2 .drag-destination.drag-level-2 .drag-destination-inner, html.is-dragging-level-3 .drag-destination.drag-level-3 .drag-destination-inner, html.is-dragging-level-4 .drag-destination.drag-level-4 .drag-destination-inner, html.is-dragging-level-5 .drag-destination.drag-level-5 .drag-destination-inner {
        transition: height ease 0.2s;
        opacity: 0.25;
        height: 0.25rem;
    }

    html.is-dragging-level-1 .drag-destination.drag-level-1:hover .drag-destination-inner, html.is-dragging-level-2 .drag-destination.drag-level-2:hover .drag-destination-inner, html.is-dragging-level-3 .drag-destination.drag-level-3:hover .drag-destination-inner, html.is-dragging-level-4 .drag-destination.drag-level-4:hover .drag-destination-inner, html.is-dragging-level-5 .drag-destination.drag-level-5:hover .drag-destination-inner {
        opacity: 1;
    }

    html .hide-drag-gutter .drag-level-1, html .hide-drag-gutter .drag-level-2, html .hide-drag-gutter .drag-level-3, html .hide-drag-gutter .drag-level-4, html .hide-drag-gutter .drag-level-5 {
        padding: 0rem 0rem 0rem 0rem !important;
    }

    html.is-dragging-level-1 .hide-drag-gutter .drag-level-1 {
        padding: 1rem 0rem 0rem 0rem !important;
    }

    html.is-dragging-level-2 .hide-drag-gutter .drag-level-2, html.is-dragging-level-3 .hide-drag-gutter .drag-level-3, html.is-dragging-level-4 .hide-drag-gutter .drag-level-4, html.is-dragging-level-5 .hide-drag-gutter .drag-level-5 {
        padding: 0.5rem 0rem 0.5rem 0rem !important;
    }
    /*-----RTE & POST MEDIA----*/
    .e-rte-video, .e-rte-image, .e-rte-audio {
        outline-color: var(--bs-primary) !important;
        box-shadow: var(--bs-box-shadow-sm);
    }

    .e-rte-image, .e-rte-video {
        border-radius: 1rem;
        padding: 0 !important;
    }

    .e-vid-resize, .e-img-resize {
        display: none !important;
    }

    .e-rte-image {
        width: auto !important;
        height: auto !important;
        max-height: 300px !important;
        max-width: 100% !important;
        margin: unset !important;
        display: block !important;
    }

    .e-img-inner {
        opacity: 0.5 !important;
        margin-bottom: 1rem !important;
        font-size: 14px !important;
        font-weight: normal;
        font-style: italic;
        text-align: left !important;
        padding: 0.5rem 1rem;
    }

    .e-video-inline, .e-video-break {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden;
        display: block;
    }

    .e-embed-video-wrap, .e-video-wrap {
        position: relative;
        max-width: 100% !important;
        width: 450px;
        overflow: hidden;
        display: block !important;
        --bs-aspect-ratio: 56.25%;
        border-radius: 1rem;
    }

    .message-text {
        position: relative;
        width: 100%;
    }

    .e-embed-video-wrap::before, .e-video-wrap::before {
        display: block;
        padding-top: var(--bs-aspect-ratio);
        content: "";
    }

    .e-video-clickelem, .e-video-embed-wrap > *, .e-video-wrap > * {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        position: absolute !important;
        top: 0;
        left: 0;
        max-height: unset !important;
        margin: unset !important;
    }

        .e-video-clickelem iframe {
            height: 100% !important;
            width: 100% !important;
            position: relative;
            border-radius: 1rem;
        }

    span.e-audio-wrap, .e-richtexteditor .e-audio-wrap {
        max-width: calc(100% - 2rem) !important;
        width: 600px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: block;
        background-color: var(--bs-body-bg);
        border-radius: 50px;
        padding: 0.25rem;
    }

    .e-clickelem, .e-rte-audio {
        width: 100%;
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
        border-radius: inherit;
    }

    .e-rte-image, .e-rte-image.e-imgbreak {
        cursor: inherit;
    }

    a .e-rte-image, .e-richtexteditor .e-rte-image {
        cursor: pointer;
    }
    /*---NOTIFICATION LINK BEHAVIOR CUSTOMIZATION---*/
    a .notification-title, a .notification-date {
        color: var(--bs-gray-900);
    }

    a:hover .notification-title, a:active .notification-title, a:focus .notification-title {
        color: var(--bs-primary);
    }
    /*----ACCESSIBILITY FONT SIZE FOR MOBILE INPUTS-----*/
    /*---IMAGE INPUT THUMBNAILS----*/
    .image-input-wrapper {
        border: 2px solid var(--bs-gray-300);
        overflow: hidden;
    }

    .image-input-placeholder.image-input-empty {
        background-image: url('https://sphere-qa.s3-accelerate.amazonaws.com/templates/2001/media/svg/files/blank-image.svg');
    }

    [data-bs-theme="dark"] .image-input-placeholder.image-input-empty {
        background-image: url('https://sphere-qa.s3-accelerate.amazonaws.com/templates/2001/media/svg/files/blank-image-dark.svg');
    }

    [data-bs-theme="dark"] .image-input-placeholder {
        background-color: var(--bs-body-bg);
    }
    /*---DARK MODE MODIFICATIONS---*/
    [data-bs-theme=dark] .card .menu {
        --bs-menu-link-bg-color-hover: var(--bs-aside-bg-color);
        --bs-menu-link-bg-color-show: var(--bs-aside-bg-color);
        --bs-menu-link-bg-color-here: var(--bs-aside-bg-color);
        --bs-menu-link-bg-color-active: var(--bs-aside-bg-color);
    }

    [data-bs-theme=dark] .card .table-hover {
        --bs-table-hover-bg: var(--bs-body-bg)
    }

    [data-bs-theme=dark] {
        --bs-symbol-label-bg: rgba(255, 255, 255, 0.05);
    }

        [data-bs-theme=dark] .btn.btn-outline:not(:hover):not(.active):not(:active):not(:focus):not(.disabled) {
            background-color: var(--bs-aside-bg-color) !important;
        }

        [data-bs-theme=dark] .badge-outline {
            background-color: transparent !important;
        }

        [data-bs-theme=dark] .ki-duotone, [data-bs-theme=dark] .ki-outline, [data-bs-theme=dark] .ki-solid, [data-bs-theme=dark] .e-richtexteditor .e-rte-placeholder {
            color: var(--bs-secondary-color);
        }

        [data-bs-theme=dark] .checkbox-group:not(.disabled) .symbol-label, [data-bs-theme=dark] .checkbox-group.active {
            background: var(--bs-primary-clarity);
        }

            [data-bs-theme=dark] .checkbox-group.active .checkbox-group-title, [data-bs-theme=dark] .checkbox-group.active span:not(.checkbox-group-title):not(.badge) {
                color: var(--bs-primary-700) !important;
            }

        [data-bs-theme=dark] .e-richtexteditor .e-rte-placeholder {
            color: var(--bs-gray-600);
        }

        [data-bs-theme=dark] .bg-hover-light:hover, [data-bs-theme=dark] .bg-active-light.active {
            background: var(--bs-secondary-clarity) !important;
        }

    .e-grid .e-table {
        background: var(--bs-card-bg)
    }

    .e-grid.e-gridhover .e-frozenhover:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover .e-row tr:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover:not(.e-rowdrag) .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowcollapse:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover:not(.e-rowdrag) .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-rtl .e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover .e-row.e-addedrow:not(.e-disable-gridhover):not(.e-detailrow):hover .e-dragindentcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowexpand:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
        background: var(--bs-secondary-clarity) !important;
        color: var(--bs-body-color);
    }

    .e-grid .e-rowcell:not(.e-editedbatchcell):not(.e-updatedtd), .e-grid .e-detailrowcollapse:not(.e-editedbatchcell):not(.e-updatedtd), .e-grid .e-detailrowexpand:not(.e-editedbatchcell):not(.e-updatedtd), .e-grid .e-gridcontent .e-rowdragdrop:not(.e-editedbatchcell):not(.e-updatedtd), .e-grid .e-gridheader .e-rowdragdrop:not(.e-editedbatchcell):not(.e-updatedtd), .e-grid .e-emptyrow:not(.e-editedbatchcell):not(.e-updatedtd) {
        color: var(--bs-text-gray-800);
    }

    .e-grid .e-headercell, .e-grid .e-detailheadercell {
        background: var(--bs-gray-50)
    }

    [data-bs-theme=dark] .btn.btn-outline.btn-outline-primary, [data-bs-theme=dark] .btn-check:checked + .btn.btn-outline.btn-outline-primary, [data-bs-theme=dark] .btn-check:active + .btn.btn-outline.btn-outline-primary, [data-bs-theme=dark] .btn.btn-outline.btn-outline-primary:focus:not(.btn-active), [data-bs-theme=dark] .btn.btn-outline.btn-outline-primary:hover:not(.btn-active), [data-bs-theme=dark] .btn.btn-outline.btn-outline-primary:active:not(.btn-active), [data-bs-theme=dark] .btn.btn-outline.btn-outline-primary.active, [data-bs-theme=dark] .btn.btn-outline.btn-outline-primary.show, [data-bs-theme=dark] .show > .btn.btn-outline.btn-outline-primary {
        --bs-primary-100: var(--bs-primary);
        --bs-primary-200: var(--bs-primary-active);
    }

    [class*=-gradient] {
        background-blend-mode: var(--bs-gradient-blend-mode);
    }

    [class*=primary-gradient], [class*=onyx-gradient] {
        background-blend-mode: unset !important;
    }

    .e-upload .e-upload-files .e-upload-file-list .e-file-container .e-file-name,
    .e-upload .e-upload-files .e-upload-file-list .e-file-container .e-file-type,
    .e-upload .e-upload-files .e-upload-file-list .e-file-container .e-file-status,
    .e-upload .e-upload-files .e-upload-file-list .e-file-container .e-file-information {
        color: var(--bs-body-color);
    }
    /*---THEMEABLE SPHERE PREVIEW PANE---*/
    .theme-preview-pane a, .theme-preview-pane button, .theme-preview-pane .menu-link {
        cursor: default !important;
    }

    #theme-preview-label {
        z-index: 9;
        background-color: var(--bs-primary);
        color: var(--bs-primary-inverse);
    }
    /*---THEME PROTECTION---*/
    body:not(.themed-bg) .card.theme-protection {
        background: transparent;
        border: none;
        box-shadow: none;
    }

    body.themed-bg .card.theme-protection {
        padding: 1rem;
        background: var(--bs-body-bg);
    }
    /*---EDGE CASES FOR CONVERSATIONS SIDEBAR---*/

    @media (max-width: 1100px) and (min-width: 992px) {
        body#kt_body:not([data-kt-aside-minimize="on"]) #cardnav_list {
            max-width: 225px !important;
        }

            body#kt_body:not([data-kt-aside-minimize="on"]) #cardnav_list .btn-compress {
                width: 35px !important;
                height: 35px !important;
                padding: 0 !important;
                line-height: 1;
            }

                body#kt_body:not([data-kt-aside-minimize="on"]) #cardnav_list .btn-compress i {
                    padding: 0 !important;
                    margin: unset !important;
                    font-size: 1.25rem !important;
                }

            body#kt_body:not([data-kt-aside-minimize="on"]) #cardnav_list .compress-text {
                display: none;
            }
    }

    @media (min-width: 768px) and (max-width: 991px) {
        #cardnav_list .btn-compress {
            width: 35px !important;
            height: 35px !important;
            padding: 0 !important;
            line-height: 1;
        }

            #cardnav_list .btn-compress i {
                padding: 0 !important;
                margin: unset !important;
                font-size: 1.25rem !important;
            }

        #cardnav_list .compress-text {
            display: none;
        }
    }
    /*---Syncfusion Image Editor Customizations---*/

    .e-dialog.modalCropper .e-ie-toolbar-undo,
    .e-dialog.modalCropper .e-ie-toolbar-redo,
    .e-dialog.modalCropper .e-ie-toolbar-check-btn,
    .e-dialog.modalCropper .e-ie-toolbar-close-btn,
    .e-dialog.modalCropper .e-image-editor .e-contextual-toolbar-wrapper,
    .e-dialog.modalCropper .e-image-editor .e-bottom-toolbar-area,
    .e-dialog.modalCropper .e-image-editor .e-ie-drop-area {
        display: none !important;
    }


    .e-dialog.modalCropper {
        --cropper-width: 370px;
        --cropper-ratio: 1;
    }

    @media (max-width: 420px) {
        .e-dialog.modalCropper {
            --cropper-width: calc(100dvw - 60px) !important;
        }
    }

    .e-dialog.modalCropper {
        max-height: 90vh !important;
    }

        .e-dialog.modalCropper:not(.settings-modal-unflush) .e-dlg-content {
            padding-top: 0px !important;
        }



        .e-dialog.modalCropper .e-toolbar {
            border-bottom: 1px solid var(--bs-gray-300);
            width: 100%;
        }

    [data-bs-theme="light"] .e-dialog.modalCropper .e-toolbar {
        background: #0d101c;
    }

    [data-bs-theme="dark"] .e-dialog.modalCropper .e-toolbar {
        background: #0f1013;
    }

    [data-bs-theme="light"] .cropper-wrapper, {
        background: #0d101c;
    }

    [data-bs-theme="dark"] .cropper-wrapper {
        background: #0f1013;
    }

    .cropper-wrapper {
        overflow: hidden;
        border-radius: 1rem;
    }

    .e-dialog.modalCropper .e-toolbar .e-btn.e-icon-btn,
    .e-dialog.modalCropper .e-toolbar .e-toolbar-item {
        padding: 0 !important;
    }

    .e-dialog.modalCropper .e-toolbar-left {
        padding-left: 4px
    }

    .e-dialog.modalCropper .e-image-editor {
        background: var(--bs-dark);
        border: 1.4px solid transparent;
    }

        .e-dialog.modalCropper .e-image-editor.e-control {
            width: 100% !important;
            z-index: 2;
            opacity: 0;
            transition: opacity 0.5s ease;
            /*height: calc(var(--cropper-width) * var(--cropper-ratio)) !important;*/
        }


    .cropper-skeleton {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        opacity: 1;
    }

        .cropper-skeleton.e-skeleton.e-shimmer-wave::after {
            background-image: linear-gradient(90deg, transparent calc(50% - 100px), #2e345161 50%, transparent calc(50% + 100px));
        }
