/*This sheet is for modifications to existing 3rd-party classes*/


/*---------------------START | METRONIC8---------------------*/

/*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);
}

.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;
}


/*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;
}

/*Clarify value and usage of --bs-text-muted*/
[data-bs-theme=light], [data-bs-theme=dark] {
    --bs-text-muted: var(--bs-gray-600);
}

.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;
}

.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.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;
}

/*Prevent footer from losing contrast when page background color is themed*/
@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);
        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;
}

.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);
}

/*Misc. class patches*/
.table {
    --bs-table-bg: var(--bs-body-bg);
}

.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;
    }

    .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;
}


/*---------------------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: 767px) {
    .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: 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----*/
@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: 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;
    }

/*---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-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;
}



/*---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 .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;
}

.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;
}

/*---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 .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));
    }

/*---------------------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---------------------*/