﻿/*This sheet is for modifications to existing 3rd-party classes*/
/*---------------------START | MOVE TO SCSS---------------------*/

@media (max-width: 991.98px) {
    html,
    body {
        font-size: 16.1px !important;
    }
}

@media (max-width: 767.98px) {
    html,
    body {
        font-size: 16.1px !important;
    }
}

/*---------------------END | MOVE TO SCSS---------------------*/


/*Android Mobile*/
:root {
    --chin-accomodation: env(safe-area-inset-bottom, 1rem);
}

/*---------------------START | METRONIC8---------------------*/


/*Hide scroll-to-top button when inputs are focused on mobile*/

@media (max-width: 576px) {
    body:has(.menu-sub.menu-sub-dropdown.show) .scrolltop,
    body:has(.form-select:open) .scrolltop,
    body:has(.form-control:focus) .scrolltop,
    body:has(.form-control:focus-within) .scrolltop {
        opacity: 0;
        pointer-events: none;
        transition: 0.1s ease;
    }
}

    /*Reduce horizontal padding for containers and cards on mobile*/

    @media (max-width: 991.98px) {

        .card .card-body {
            padding: 1rem 1rem;
        }

        .card .card-header {
            padding-left: 1rem;
            padding-right: 1rem;
        }

        .card .card-footer {
            padding: 1rem;
        }

        .e-dlg-content, .e-dialog .e-footer-content, .e-dlg-header-content {
            padding: 1rem !important;
        }
    }

    @media (max-width: 767.98px) {
        .container,
        .container-xxl:not(.header-bar),
        .container-fluid,
        .container-sm,
        .container-md,
        .container-lg,
        .container-xl {
            max-width: none;
            padding: 0 0.5rem;
        }

        .card .card-body {
            padding: 1.5rem 1rem;
        }

        .card .card-header {
            padding-left: 1rem;
            padding-right: 1rem;
        }

        .card .card-footer {
            padding: 1rem;
        }

        .e-dlg-content, .e-dialog .e-footer-content, .e-dlg-header-content {
            padding: 1rem !important;
        }

        .btn,
        .btn:not(.btn-outline):not(.btn-dashed):not(.btn-bordered):not(.border-hover):not(.border-active):not(.btn-flush):not(.btn-icon):not(.btn-hover-outline) {
            padding: calc(0.5rem + 1.4px) calc(1rem + 1.4px);
            --bs-btn-font-size: 0.9rem !important;
        }
    }


    /*Tab-focus accessibility for form inputs*/

    body:not(.show-focus-outlines) input,
    body:not(.show-focus-outlines) select,
    body:not(.show-focus-outlines) button,
    body:not(.show-focus-outlines) a,
    body:not(.show-focus-outlines) textarea,
    body:not(.show-focus-outlines) [role="button"],
    body:not(.show-focus-outlines) label {
        outline: none !important;
    }

    body.show-focus-outlines input:focus-visible,
    body.show-focus-outlines select:focus-visible,
    body.show-focus-outlines button:focus-visible,
    body.show-focus-outlines a:focus-visible,
    body.show-focus-outlines textarea:focus-visible,
    body.show-focus-outlines [role="button"]:focus-visible,
    body.show-focus-outlines label:has(:focus-visible) {
        outline: var(--bs-body-color) 2px solid !important;
    }

    .show-focus-outlines .image-input:has(input:focus) label,
    .show-focus-outlines .image-input:has(:focus) {
        outline: 2px solid var(--bs-body-color) !important;
    }

    /*Form Label Spacing and Sizing*/
    .col-form-label > .form-label:last-child {
        margin-bottom: 0;
    }

    .form-floating > .e-label,
    .form-floating > label {
        font-size: 1rem;
        color: var(--bs-gray-800);
    }

    /*Form Validation highlight*/

    :root {
        --bs-form-invalid-color: var(--bs-danger);
        --bs-form-invalid-border-color: var(--bs-danger);
    }

    .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);
        margin: 0.25rem 0;
    }

    .blazor-error-boundary {
        background: var(--bs-danger);
        border: 1.4px solid var(--bs-danger);
        padding: 1rem 1rem 1rem 3.7rem;
        color: var(--bs-danger-inverse);
        border-radius: 0.665rem;
        margin-bottom: 1.25rem;
        width: fit-content;
        box-shadow: var(--bs-box-shadow);
    }

        .blazor-error-boundary::after {
            content: "Whoops! An error has occurred.";
            font-weight: bold;
            font-family: "Inter", "Noto Color Emoji", Helvetica, "sans-serif" !important;
        }

    /*Turn multi-step wizard stepper into dynamic preview panel*/
    /*Add .stepper-preview to existing templates with a div.stepper-multistep, then customize HTML in each .step-wrapper*/
    .stepper-preview.stepper-multistep .stepper-item:not(.current) {
        display: none !important;
    }

    /*Fix for constant heights*/
    @media (min-width: 992px) {
        .container-xxl {
            height: 100%;
        }
    }

    /*Prevent Cumulative Shift when body loads*/
    body:not(.loaded) .wrapper,
    body:not(.loaded) .app-wrapper {
        transition: none !important;
    }

    /* Automatically space stacked cards within columns to match the gutter set by the parent row*/
    .container-xxl .row div .card:not(:only-child):not(:last-child) {
        margin-bottom: var(--bs-gutter-y)
    }

    .container-xxl .card.card-stretch {
        height: 100% !important;
    }

    .container-xxl .card.card-stretch {
        height: 100% !important;
    }

    .container-xxl .card.card-stretch-75:last-child {
        height: 75% !important;
    }

    .container-xxl .card.card-stretch-50:last-child {
        height: 50% !important;
    }

    .container-xxl .card.card-stretch-33:last-child {
        height: 33.3333% !important;
    }

    .container-xxl .card.card-stretch-25:last-child {
        height: 25% !important;
    }

    /*Arch option for symbols*/
    .symbol-arch {
        border-top-right-radius: 50%;
        border-top-left-radius: 50%;
    }

    /*Default State for Community Icon*/
    .ki-solid.ki-community:before {
        content: "\e914";
    }

    .ki-community .path1:before {
        content: "\e927";
        opacity: 0.3;
    }

    .ki-community .path2:before {
        content: "\e928";
        position: absolute;
        left: 0;
    }

    /*Card Title Spacing*/
    .card .card-header .card-title,
    .card .card-header .card-toolbar,
    .card .card-header > * {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .card .card-header {
        gap: 0.5rem;
    }

    /*Clarify value and usage of --bs-text-muted*/
    [data-bs-theme=light], [data-bs-theme=dark] {
        --bs-text-muted: var(--bs-gray-700);
    }

    .form-check-label {
        color: var(--bs-text-muted);
    }

    /*FlatCaledar Edits*/
    .flatpickr-calendar {
        border: 1.4px solid var(--bs-gray-300);
    }

        .flatpickr-calendar.hasTime.noCalendar {
            max-width: 100vw;
            width: 150px;
            padding-right: 1rem;
        }

    /*Masonry Workaround*/
    .masonry {
        columns: 3 200px;
        column-fill: balance;
    }

        .masonry > * {
            margin-bottom: 1rem;
        }

    .masonry-2 {
        columns: 2 200px;
    }

    .masonry-3 {
        columns: 3 200px;
    }

    .masonry-4 {
        columns: 4 200px;
    }

    .masonry-5 {
        columns: 5 200px;
    }

    .masonry-6 {
        columns: 6 200px;
    }


    /*Bootstrap Navbar edits*/
    .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%
            }

    /*Remove colored background from floating labels on solid field inputs*/
    .form-floating > .form-control.form-control-solid:focus ~ label::after,
    .form-floating > .form-control.form-control-solid:not(:placeholder-shown) ~ label::after,
    .form-floating > .form-control-plaintext.form-control-solid ~ label::after,
    .form-floating > .form-select.form-select-solid ~ label::after {
        background-color: var(--bs-gray-100);
    }

    /*Semitransparent Form Inputs for use on backgrounds*/
    .form-control.form-control-special::placeholder,
    .form-control.form-control-special.form-control-solid::placeholder {
        color: #ffffff80 !important;
    }

    .form-control.form-control-special,
    .form-control.form-control-special.form-control-solid {
        background-color: #ffffff69 !important;
    }

    /*Add Focus-Within to form-control-solid divs that wrap 3rd-party inputs*/
    div.form-control.form-control-solid:focus-within {
        background-color: var(--bs-gray-200);
        border-color: var(--bs-gray-200);
        color: var(--bs-gray-700);
        transition: color 0.2s ease;
    }

    /*Fix vertical spacing on floating form labels*/
    .form-floating > label {
        line-height: 1.75rem;
        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.5rem;
    }

    .form-floating .form-select {
        line-height: 1.25rem
    }

    .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;
    }

    /*Prevent footer from losing contrast when page background color is themed*/
    @media (min-width: 992px) {
        #kt_footer {
            padding: 2rem 30px 1rem 30px !important;
            max-width: 1320px;
            margin-left: auto;
            margin-right: auto;
            width: 100%;
        }

            #kt_footer .container-xxl {
                border-radius: 0.65rem;
                border: 1.4px solid transparent;
                box-shadow: 0 2px 4px -2px rgba(10, 13, 18, 0.0), 0 4px 8px -2px rgba(10, 13, 18, 0.0);
                background: var(--bs-body-bg);
            }

        body.themed-bg #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) !important;
        }
    }

    #kt_footer .container-xxl {
        padding: 0.5rem 1rem;
        background: var(--bs-body-bg);
    }

    @media (max-width: 991px) {
        #kt_footer .container-xxl {
            box-shadow: 0 2px 4px -2px rgba(10, 13, 18, 0.04), 0 4px 8px -2px rgba(10, 13, 18, 0.06);
            border-top: var(--bs-aside-border) !important;
        }

        #kt_footer .container-xxl {
            padding: 0.5rem 1rem 8rem 1rem !important;
        }
    }

    /*Prevent overlapping borders inside button groups*/
    .input-group .input-group-text.btn {
        z-index: 1;
    }

        .input-group .input-group-text.btn.active {
            z-index: 2;
        }

    /*Prevent symbol content from overflowing the symbol itself*/
    .symbol > img, .symbol .symbol-label:after {
        border-radius: inherit;
    }

    /*Disable first button on Metronic8 lightbox*/
    .fslightbox-toolbar-button:first-child {
        display: none;
    }

    /*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;
            }
    }

    /*--Menu arrow fixes and customizations---*/
    .menu-arrow.text-muted::after {
        background-color: var(--bs-text-muted) !important
    }

    .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;
    }

    /*Image Input Wrappers*/

    .image-input-wrapper {
        border: 2px solid var(--bs-gray-300);
        overflow: hidden;
        cursor: pointer;
    }

        .image-input-wrapper input {
            width: 100%;
            height: 100%;
            position: relative;
            cursor: pointer;
            opacity: 0;
        }

    .image-input-placeholder.image-input-empty {
        background-image: url('https://wavoto-community.s3.dualstack.us-east-1.amazonaws.com/templates/2001/media/svg/files/blank-image.svg');
    }

    [data-bs-theme="dark"] .image-input-placeholder.image-input-empty {
        background-image: url('https://wavoto-community.s3.dualstack.us-east-1.amazonaws.com/templates/2001/media/svg/files/blank-image-dark.svg');
    }

    [data-bs-theme="dark"] .image-input-placeholder {
        background-color: var(--bs-gray-25);
    }

    .image-input input {
        cursor: pointer;
    }

    .image-input::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        pointer-events: none;
        width: 100%;
        height: 100%;
        background: var(--bs-body-color);
        border-radius: inherit;
        z-index: 1;
        opacity: 0;
        transition: 0.1s ease;
    }

    .image-input:has(:focus):after,
    .image-input:focus::after,
    .image-input:hover::after {
        opacity: 0.05;
    }

    .image-input .btn {
        z-index: 2;
    }

    /*Misc. class patches*/
    .table {
        --bs-table-bg: var(--bs-body-bg);
    }

    tr:not(.addZIndex)[aria-hidden="true"] {
        display: none !important;
    }

    .form-select {
        white-space: nowrap;
    }

    .menu-item {
        user-select: none;
    }

    .rounded {
        overflow: hidden;
    }

    .col-form-label {
        padding-top: 0;
    }

    blockquote {
        border-left: solid 3px var(--bs-gray-300);
        margin: 1rem 0;
        padding-left: 1rem;
    }


    .badge {
        --bs-badge-font-weight: 500;
        gap: 0.5rem;
        line-height: 0.75rem;
        cursor: default;
    }


        .badge.badge-lg {
            line-height: 1.2rem;
        }

        .badge.badge-sm {
            line-height: 0.5rem;
            gap: 0.25rem;
        }

        .badge > i {
            margin-right: 0 !important;
            padding-right: 0 !important;
            margin-left: 0 !important;
            padding-left: 0 !important;
        }

        .badge i.ki-duotone, .btn i.ki-duotone, .badge i.ki-solid, .btn i.ki-solid {
            color: inherit;
        }

    a, a label {
        cursor: pointer !important;
    }

    .cursor-text {
        cursor: text !important;
    }

    .tagify .bg-primary {
        color: #fff;
    }

    .separator.separator-content::before,
    .separator.separator-content::after {
        border-bottom-width: 1.4px;
    }

    .tooltip {
        --bs-tooltip-zindex: 100080;
    }

    /*Button version of menu-link*/
    button.menu-link {
        width: 100%;
    }

    .btn-reset, button:not(.btn):not(.accordion-button) {
        outline: none;
        border: none;
        background: transparent;
        padding: revert-rule;
        appearance: none;
        font-weight: inherit;
        text-align: unset;
    }

    .notification-entry:hover .notification-title,
    .notification-entry:hover .notification-date {
        color: var(--bs-primary) !important;
    }


    /*Custom Accordion*/

    .accordion.accordion-custom {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

        .accordion.accordion-custom .accordion-button::after {
            display: none;
        }

    .accordion-custom .accordion-item,
    .accordion-custom .accordion-body {
        border: 0 !important;
        border-radius: 0;
        box-shadow: none !important;
    }

    /*    .accordion-custom .accordion-item::after {
        display: block;
        height: 0.5rem;
        background: transparent;
        border-bottom: 1.4px solid var(--bs-gray-200);
        width: 100%;
        content: '';
        position: relative;
        margin-bottom: 0.5rem;
    }*/

    .accordion-custom .accordion-button h4 {
        font-weight: 500;
    }

    .accordion-custom .accordion-button:not(.collapsed),
    .accordion-custom .accordion-button {
        box-shadow: none !important;
        border: 0 !important;
    }

    .accordion-custom .accordion-item .accordion-button {
        border-radius: var(--bs-accordion-border-radius) !important;
    }

    /*---------------------END | METRONIC8---------------------*/
    /*---------------------START | MISC. DARK MODE EDITS---------------------*/
    /*Dropdown 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);
        }
    /*---------------------END | MISC. DARK MODE EDITS---------------------*/
    /*---------------------START | SYNCFUSION [Needs cleaning]---------------------*/
    /*Suppress clickable tooltips on mobile*/
    @media (max-width: 767.98px) {
        .tooltip.tooltip-blocker, .tooltip.tooltip-blocker.show {
            display: none !important;
        }
    }

    .tooltip.tooltip-blocker.show {
        pointer-events: none;
    }
    /*---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);
    }

    .e-btn-group:not(.e-outline), .e-css.e-btn-group:not(.e-outline) {
        box-shadow: none !important;
    }

    .e-btn-group input:checked + label.e-btn.btn-outline-secondary, .e-css.e-btn-group input:checked + label.e-btn.btn-outline-secondary {
        background: var(--bs-gray-200);
        border-color: var(--bs-gray-400);
    }

        .e-btn-group input:checked + label.e-btn.btn-outline-secondary, .e-btn-group input:checked + label.e-btn.btn-outline-secondary > i, .e-btn-group input:hover + label.e-btn.btn-outline-secondary, .e-btn-group input:hover + label.e-btn.btn-outline-secondary > i {
            color: var(--bs-gray-800) !important;
        }

    textarea.member-input {
        outline: none !important;
        border: none !important;
    }
    /*---HIDE EMOJI INPUT ON MOBILE RTEs---*/
    @media (max-width: 767.98px) {
        .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-control.e-masked-textbox {
        font-size: 1.1rem !important;
    }

    .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: 1.4px 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----*/
    @media (min-width: 768px) {
        body.e-dlg-target.e-scroll-disabled, .fslightbox-open body {
            padding-right: 15px;
        }
    }

    .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: 1rem 1.25rem !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: 2rem !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: 90vh !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;
    }

    .e-dialog:not(.settings-modal-unflush).modalConfirm .e-dlg-header-content + .e-dlg-content {
        padding-top: 1rem !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---*/
    .e-dialog.modalShareLink .e-dlg-content {
        padding: 0 !important;
        border-radius: 1rem;
    }
    /*---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: 1199px) {
        .e-dialog.create-post-modal,
        .e-dialog.settings-modal-height {
            max-height: calc(100vh - 30px) !important;
            height: 100% !important;
        }
    }

    @media (max-width: 991px) {
        .e-dialog.create-post-modal,
        .e-dialog.settings-modal-height {
            max-height: calc(100vh - 8px) !important;
            height: 100% !important;
        }

            .e-dialog.create-post-modal .e-dialog .e-footer-content,
            .e-dialog.settings-modal-height .e-dialog .e-footer-content {
                padding-top: 1rem !important;
                padding-left: 1.25rem !important;
                padding-right: 1.25rem !important;
                padding-bottom: calc(var(--chin-accomodation) + 1rem);
            }

        .e-richtexteditor .e-rte-content .e-content,
        .e-richtexteditor .e-source-content .e-content,
        .e-richtexteditor .e-rte-iframe-content .e-content {
            font-size: 1rem;
        }

        .e-richtexteditor .e-rte-content .e-content,
        .e-richtexteditor .e-source-content .e-content {
            padding: 1rem 4rem 0.75rem 1rem !important;
            min-height: unset;
        }
    }



    .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-toolbar-item:not(.e-separator):not(.e-spacer) {
        padding: 2px !important;
    }

    .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;
            width: calc(100%);
            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 {
        border: none;
    }

    @media (max-width: 767.98px) {
        .modalBlock {
            max-width: 100% !important;
            border-radius: 0 !important;
            max-height: 100dvh !important;
            width: 100% !important;
        }

            .modalBlock .e-dialog .e-dlg-content {
                padding: 12px !important;
            }
    }
    /*---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;
        }

    @media (max-width: 767.98px) {
        .modalShareLink.e-dialog:not(.settings-modal-unflush) .e-dlg-header-content + .e-dlg-content {
            padding: 0 1.25rem 1.25rem 1.25rem !important;
        }
    }

    .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;
        }
    /*---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-popup.e-multi-select-list-wrapper > * {
        color: var(--bs-gray-700) !important
    }

    .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: 25px;
        padding: 0 !important;
        margin: 0px;
    }

    .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);
        margin: 3px 3px 3px 0px;
    }

    .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: 25px;
        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;
    }

        .form-control.form-control-custom .e-multi-select-wrapper .e-chips > .e-chipcontent:not(:last-child) {
            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-gray-900);
        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;
    }

    .form-control.form-control-custom .e-control-container.e-multiselect {
        border-radius: unset !important;
        overflow: visible !important;
    }

    .form-floating .form-control.form-control-custom .e-control-container.e-multiselect ::placeholder {
        opacity: 0 !important;
        transition: opacity 0.1s ease;
    }

    .form-floating .form-control.form-control-custom:has(:focus) .e-control-container.e-multiselect ::placeholder {
        opacity: 100% !important;
        transition: opacity 0.1s ease;
    }

    .e-dropdownbase.e-control.e-multiselect {
        border-radius: unset !important;
    }

    .form-floating > .form-control:has(.e-multiselect) {
        height: unset;
    }

        .form-floating > .form-control:has(.e-multiselect) ~ label {
            transform: none;
            line-height: 2;
        }

        .form-floating > .form-control:has(.e-multiselect):has(:focus) ~ label,
        .form-floating > .form-control:has(.e-chips) ~ label {
            transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem) !important;
        }

    .form-floating > .form-control:has(.e-multiselect) {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

        .form-floating > .form-control:has(.e-multiselect):has(:focus),
        .form-floating > .form-control:has(.e-chips) {
            padding-top: 1.95rem !important;
            padding-bottom: 0.625rem !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;
    }
    /*Customized Syncfusion Datepicker*/


    .form-floating span.sfDatePicker {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
    }

    .form-floating .form-control.form-control-custom span.sfDatePicker input {
        padding: 0 1rem !important;
        height: calc(3.75rem + 2.8px) !important;
        min-height: calc(3.75rem + 2.8px) !important;
        line-height: 1 !important;
        padding-top: 1.85rem !important;
        padding-bottom: 0.625rem !important;
        box-shadow: none !important;
    }

    .form-control.form-control-custom span.sfDatePicker input.e-datetimepicker ~ .e-input-group-icon.e-icons.e-date-icon {
        margin-right: -0.5rem;
    }

    .form-control.form-control-custom span.sfDatePicker .e-input-group-icon.e-icons {
        border: unset;
        scale: 0.75;
        border-radius: 0.5rem;
        font-size: 1.5rem;
    }

    .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).sfDatePickerWrapper .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).sfDatePickerWrapper .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;
    }
    /*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);
    }
    /* Emoticons */
    .rteEmoticons {
        padding: 0 0 10px 10px;
    }
    /*char_block*/
    .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;
    }
    /*----FORM INPUT AND SELECT2 CUSTOMIZATIONS-----*/



    .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;
    }
    /*----SYNCFUSION CHART CUSTOMIZATION -----*/
    .e-control.e-chart rect {
        stroke: transparent !important;
        fill: transparent !important;
    }
    /*----SYNCFUSION SPINNER CUSTOMIZATION -----*/
    .e-spinner-pane .e-spinner-inner .e-spin-bootstrap5, .e-spinner-pane .e-spinner-inner .e-spin-bootstrap5v3 {
        stroke: var(--bs-primary);
        height: 2rem !important;
        width: 2rem !important;
        transform-origin: 1rem 1rem 1rem !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;
        margin-left: unset !important;
        margin-right: unset !important;
    }

    .e-vid-resize, .e-img-resize {
        display: none !important;
    }

    @media (min-width: 768px) {
        .e-rte-image {
            width: auto !important;
            height: auto !important;
            max-height: 300px !important;
            max-width: 100% !important;
            margin: unset !important;
            display: block !important;
        }
    }

    @media (min-width: 420px) and (max-width: 767px) {
        .e-rte-image {
            width: auto !important;
            height: auto !important;
            max-height: 300px !important;
            max-width: 100% !important;
            margin: auto !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;
    }
    /*---DARK MODE MODIFICATIONS---*/


    [data-bs-theme="dark"] .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
        background-color: var(--bs-gray-300) !important;
        border-color: var(--bs-gray-300) !important;
    }

    .e-hscroll .e-scroll-overlay.e-scroll-left-overlay {
        background-image: linear-gradient(-270deg, var(--bs-gray-300) 0%, rgba(233, 236, 239, 0) 100%)
    }

    .e-hscroll .e-scroll-overlay.e-scroll-right-overlay {
        background-image: linear-gradient(-270deg, rgba(233, 236, 239, 0) 0%, var(--bs-gray-300) 100%)
    }



    [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 {
        --bs-gray-100: var(--bs-gray-200) !important;
    }

        [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);
    }
    /*---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));
        }



    /*---MENTIONS---*/

    .e-mention.e-popup {
        font-family: var(--bs-body-font) !important;
        padding: 0.25rem;
        border-radius: 0.5rem;
        background-color: var(--bs-menu-dropdown-bg-color) !important;
        box-shadow: var(--bs-menu-dropdown-box-shadow) !important;
        overflow: hidden;
    }

        .e-mention.e-popup .e-content.e-dropdownbase {
            border-radius: unset !important;
            box-shadow: none !important;
            padding: 0.25rem;
            !important;
            background-color: transparent !important;
            width: 250px !important;
        }

        .e-mention.e-popup .e-list-item {
            font-family: var(--bs-body-font) !important;
            color: var(--bs-gray-800);
            font-weight: 500;
        }

            .e-mention.e-popup .e-list-item.e-active,
            .e-mention.e-popup .e-list-item.e-active:hover {
                background: var(--bs-primary-light);
                color: var(--bs-primary);
            }

    .e-mention .e-mention-chip::before, .e-mention-chip::before {
        content: '@'
    }

    .e-mention .e-mention-chip, .e-mention-chip {
        color: var(--bs-primary);
        background-color: var(--bs-primary-light);
        font-weight: inherit;
        padding: 0.125rem 0.5rem;
        border-radius: 50rem;
        font-size: inherit;
        transition: 0.1s ease;
    }

        .e-mention .e-mention-chip:hover, .e-mention-chip:hover {
            color: var(--bs-primary-inverse);
            background-color: var(--bs-primary);
            font-weight: inherit;
            padding: 0.125rem 0.5rem;
            border-radius: 50rem;
            font-size: inherit;
            transition: 0.1s ease;
        }



    /*QR Code Positioning*/
    .e-barcode {
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .e-barcode svg {
            box-shadow: 0px 0px 0px 5px var(--bs-body-color);
            border-radius: 0.5rem;
            margin: 5px auto;
        }

    /*---------------------END | SYNCFUSION---------------------*/
    /*---------------------START | CLICKBANK PAYMENT PROCESSING---------------------*/

    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;
    }
    /*---------------------END | CLICKBANK PAYMENT PROCESSING---------------------*/


