@import url("https://fonts.googleapis.com/css2?family=Zalando+Sans:ital,wght@0,200..900;1,200..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap");

.bg-orange-subtle {
    background-color: var(--dx-orange-bg-subtle) !important
}

.border-orange-subtle {
    border-color: var(--dx-orange-border-subtle) !important
}

.text-orange-emphasis {
    color: var(--dx-orange-text-emphasis) !important
}

.bg-indigo-subtle {
    background-color: var(--dx-indigo-bg-subtle) !important
}

.border-indigo-subtle {
    border-color: var(--dx-indigo-border-subtle) !important
}

.text-indigo-emphasis {
    color: var(--dx-indigo-text-emphasis) !important
}

.bg-pink-subtle {
    background-color: var(--dx-pink-bg-subtle) !important
}

.border-pink-subtle {
    border-color: var(--dx-pink-border-subtle) !important
}

.text-pink-emphasis {
    color: var(--dx-pink-text-emphasis) !important
}

:root {
    --dx-font-family-base: Atkinson Hyperlegible Next,sans-serif;
    --dx-font-family-heading: Atkinson Hyperlegible Next,sans-serif;
    --dx-font-weight-semibold: 600;
    --dx-custom-bg: #fff;
    --dx-custom-color: #7484a5;
    --dx-indigo-text-emphasis: #5e61e5;
    --dx-pink-text-emphasis: #e04491;
    --dx-orange-text-emphasis: #ed6d15;
    --dx-indigo-bg-subtle: rgba(var(--dx-indigo-rgb),0.15);
    --dx-pink-bg-subtle: rgba(var(--dx-pink-rgb),0.15);
    --dx-orange-bg-subtle: rgba(var(--dx-orange-rgb),0.15);
    --dx-indigo-border-subtle: rgba(var(--dx-indigo-rgb),0.3);
    --dx-pink-border-subtle: rgba(var(--dx-pink-rgb),0.3);
    --dx-orange-border-subtle: rgba(var(--dx-orange-rgb),0.3);
    --dx-link-color: var(--dx-primary);
    --dx-primary-text-emphasis: color-mix(in srgb,var(--dx-primary) 75%,#000 25%);
    --dx-primary-bg-subtle: color-mix(in srgb,var(--dx-primary) 10%,transparent);
    --dx-primary-border-subtle: color-mix(in srgb,var(--dx-primary) 30%,transparent);
    --dx-spacer: 1.25rem;
    --dx-sidebar: 15rem;
    --dx-sidebar-md: 10rem;
    --dx-sidebar-sm: 4.6875rem;
    --dx-sidebar-padding-y: 0.625rem;
    --dx-sidebar-padding-x: 1rem;
    --dx-sidebar-font-size: 1rem;
    --dx-sidebar-menu-title-font-size: 0.8438rem;
    --dx-sidebar-bg: rgba(var(--dx-secondary-bg-rgb),0.5);
    --dx-topbar: 4.6875rem;
    --dx-boxed-bg: #03b611;
    --dx-boxed-width: 2rem;
    --dx-semibox-width: 0.75rem
}

    :root[data-colors=blue] {
        --dx-primary: #5582fb;
        --dx-primary-rgb: 85,130,251
    }

    :root[data-colors=violet] {
        --dx-primary: #8338ec;
        --dx-primary-rgb: 131,56,236
    }

    :root[data-colors=red] {
        --dx-primary: #e65f5c;
        --dx-primary-rgb: 230,95,92
    }

    :root[data-colors=teal] {
        --dx-primary: #00bba7;
        --dx-primary-rgb: 0,187,167
    }

    :root[data-colors=fuchsia] {
        --dx-primary: #e12afb;
        --dx-primary-rgb: 225,42,251
    }

    :root[data-colors=lime] {
        --dx-primary: #a7c957;
        --dx-primary-rgb: 167,201,87
    }

    :root[data-colors=orange] {
        --dx-primary: #ff9f1c;
        --dx-primary-rgb: 255,159,28
    }

    :root[data-sidebar-colors=dark] {
        --dx-sidebar-bg: #071f2e
    }

    :root[data-sidebar-colors=brand] {
        --dx-sidebar-bg: #1b408d
    }

    :root[data-sidebar-colors=purple] {
        --dx-sidebar-bg: #59359a
    }

    :root[data-sidebar-colors=sky] {
        --dx-sidebar-bg: #075985
    }

    :root[data-sidebar-colors=light] {
        --dx-sidebar-bg: rgba(var(--dx-secondary-bg-rgb),0.5);
        --dx-sidebar-border: var(--dx-secondary-bg);
        --dx-sidebar-menu-title: var(--dx-secondary-color);
        --dx-sidebar-link-color: var(--dx-secondary-color);
        --dx-sidebar-dropdown-shadow: hsla(210,8%,62%,.1) 0px 8px 24px;
        --dx-sidebar-link-hover-color: var(--dx-primary);
        --dx-sidebar-link-bg-hover-color: var(--dx-primary-bg-subtle);
        --dx-sidebar-link-active-color: var(--dx-primary);
        --dx-sidebar-link-bg-active-color: var(--dx-primary-bg-subtle);
        --dx-sidebar-link-sub-color: var(--dx-secondary-color);
        --dx-sidebar-link-sub-hover-color: var(--dx-primary);
        --dx-sidebar-link-sub-active-color: var(--dx-primary);
        --dx-sidebar-effect-color: var(--dx-border-color)
    }

    :root:is([data-sidebar-colors=dark],[data-sidebar-colors=brand],[data-sidebar-colors=purple],[data-sidebar-colors=sky]) {
        --dx-sidebar-border: var(--dx-sidebar-bg);
        --dx-sidebar-menu-title: color-mix(in srgb,var(--dx-sidebar-bg) 100%,#fff 95%);
        --dx-sidebar-link-color: color-mix(in srgb,var(--dx-sidebar-bg) 100%,#fff 95%);
        --dx-sidebar-dropdown-shadow: 0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);
        --dx-sidebar-link-hover-color: #fff;
        --dx-sidebar-link-bg-hover-color: color-mix(in srgb,var(--dx-sidebar-bg) 100%,#fff 5%);
        --dx-sidebar-link-active-color: #fff;
        --dx-sidebar-link-bg-active-color: color-mix(in srgb,var(--dx-sidebar-bg) 100%,#fff 5%);
        --dx-sidebar-link-sub-color: color-mix(in srgb,var(--dx-sidebar-bg) 100%,#fff 95%);
        --dx-sidebar-link-sub-hover-color: #fff;
        --dx-sidebar-link-sub-active-color: #fff;
        --dx-sidebar-effect-color: color-mix(in srgb,var(--dx-sidebar-bg) 100%,#fff 10%)
    }

        :root:is([data-sidebar-colors=dark],[data-sidebar-colors=brand],[data-sidebar-colors=purple],[data-sidebar-colors=sky]) .main-sidebar .simplebar-scrollbar:before {
            background-color: color-mix(in srgb,var(--dx-sidebar-bg) 100%,#fff 80%) !important
        }

:root {
    --dx-topbar-bg: rgba(var(--dx-secondary-bg-rgb),0.5);
    --dx-topbar-border: var(--dx-secondary-bg);
    --dx-topbar-color: var(--dx-secondary-color);
    --dx-topbar-hover-color: var(--dx-primary)
}

    :root[data-topbar-colors=dark] {
        --dx-topbar-bg: #1e293b;
        --dx-topbar-border: color-mix(in srgb,var(--dx-topbar-bg) 100%,#fff 10%);
        --dx-topbar-color: color-mix(in srgb,var(--dx-topbar-bg) 100%,#fff 50%);
        --dx-topbar-hover-color: color-mix(in srgb,var(--dx-topbar-bg) 100%,#fff 100%)
    }

    :root[data-topbar-colors=brand] {
        --dx-topbar-bg: #1b408d;
        --dx-topbar-border: color-mix(in srgb,var(--dx-topbar-bg) 100%,#fff 10%);
        --dx-topbar-color: color-mix(in srgb,var(--dx-topbar-bg) 100%,#fff 50%);
        --dx-topbar-hover-color: color-mix(in srgb,var(--dx-topbar-bg) 100%,#fff 100%)
    }

    :root[data-topbar-colors=purple] {
        --dx-topbar-bg: #59359a;
        --dx-topbar-border: color-mix(in srgb,var(--dx-topbar-bg) 100%,#fff 10%);
        --dx-topbar-color: color-mix(in srgb,var(--dx-topbar-bg) 100%,#fff 50%);
        --dx-topbar-hover-color: color-mix(in srgb,var(--dx-topbar-bg) 100%,#fff 100%)
    }

    :root[data-topbar-colors=sky] {
        --dx-topbar-bg: #075985;
        --dx-topbar-border: color-mix(in srgb,var(--dx-topbar-bg) 100%,#fff 10%);
        --dx-topbar-color: color-mix(in srgb,var(--dx-topbar-bg) 100%,#fff 50%);
        --dx-topbar-hover-color: color-mix(in srgb,var(--dx-topbar-bg) 100%,#fff 100%)
    }

    :root[data-bs-theme=dark] {
        --dx-indigo-text-emphasis: #5e61e5;
        --dx-pink-text-emphasis: #e04491;
        --dx-orange-text-emphasis: #ed6d15;
        --dx-indigo-bg-subtle: rgba(var(--dx-indigo-rgb),0.15);
        --dx-pink-bg-subtle: rgba(var(--dx-pink-rgb),0.15);
        --dx-orange-bg-subtle: rgba(var(--dx-orange-rgb),0.15);
        --dx-indigo-border-subtle: rgba(var(--dx-indigo-rgb),0.3);
        --dx-pink-border-subtle: rgba(var(--dx-pink-rgb),0.3);
        --dx-orange-border-subtle: rgba(var(--dx-orange-rgb),0.3);
        --dx-light: #161c30;
        --dx-light-rgb: 22,28,48;
        --dx-box-shadow: 0 10px 15px -3px #0f172a,0 4px 6px -4px #0f172a
    }

        :root[data-bs-theme=dark]:is([data-theme=default],[data-theme=minimal],[data-theme=elegant],[data-theme=material],[data-theme=sparkle],[data-theme=flat],[data-theme=creative]) {
            --dx-body-bg: #020617;
            --dx-secondary-bg: #0f172a;
            --dx-secondary-bg-rgb: 15,23,42;
            --dx-tertiary-bg: #161c30;
            --dx-tertiary-bg-rgb: 22,28,48;
            --dx-light: #161c30;
            --dx-light-rgb: 22,28,48;
            --dx-border-color: #1e293b;
            --dx-dark: #1e293b;
            --dx-dark-bg-subtle: rgba(to-rgb($dark-custom-dark),0.3);
            --dx-dark-rgb: 30,41,59;
            --dx-custom-bg: #161c30
        }

            :root[data-bs-theme=dark]:is([data-theme=default],[data-theme=minimal],[data-theme=elegant],[data-theme=material],[data-theme=sparkle],[data-theme=flat],[data-theme=creative]) .card {
                --dx-card-bg: var(--dx-secondary-bg)
            }

            :root[data-bs-theme=dark]:is([data-theme=default],[data-theme=minimal],[data-theme=elegant],[data-theme=material],[data-theme=sparkle],[data-theme=flat],[data-theme=creative]) .modal {
                --dx-modal-bg: var(--dx-secondary-bg)
            }

        :root[data-bs-theme=dark] .modal {
            --dx-modal-box-shadow: 0 10px 15px -3px #151f35,0 4px 6px -4px #151f35;
            --dx-modal-border-color: var(--dx-border-color)
        }

        :root[data-bs-theme=dark] .offcanvas {
            --dx-offcanvas-box-shadow: 0 10px 15px -3px #151f35,0 4px 6px -4px #151f35;
            --dx-offcanvas-border-color: var(--dx-border-color)
        }

        :root[data-bs-theme=dark] .dropdown-menu {
            --dx-dropdown-border-width: 1px;
            --dx-dropdown-box-shadow: 0 10px 15px -3px #151f35,0 4px 6px -4px #151f35
        }

    :root[data-bs-theme=black] {
        --dx-body-color: #f1f5f9;
        --dx-body-color-rgb: 241,245,249;
        --dx-emphasis-color: #fff;
        --dx-emphasis-color-rgb: 255,255,255;
        --dx-secondary-color: #94a3b8;
        --dx-secondary-color-rgb: 148,163,184;
        --dx-tertiary-color: #a5b1bd;
        --dx-tertiary-color-rgb: 165,177,189;
        --dx-primary-text-emphasis: #00b2ed;
        --dx-secondary-text-emphasis: #e44f61;
        --dx-success-text-emphasis: #06ba54;
        --dx-info-text-emphasis: #00abcd;
        --dx-warning-text-emphasis: #e9c213;
        --dx-danger-text-emphasis: #f2494a;
        --dx-light-text-emphasis: #f9fafb;
        --dx-dark-text-emphasis: #eff4ff;
        --dx-primary-bg-subtle: rgba(var(--dx-primary-rgb),0.15);
        --dx-secondary-bg-subtle: rgba(var(--dx-secondary-rgb),0.15);
        --dx-success-bg-subtle: rgba(var(--dx-success-rgb),0.15);
        --dx-info-bg-subtle: rgba(var(--dx-info-rgb),0.15);
        --dx-warning-bg-subtle: rgba(var(--dx-warning-rgb),0.15);
        --dx-danger-bg-subtle: rgba(var(--dx-danger-rgb),0.15);
        --dx-light-bg-subtle: #181c2f;
        --dx-dark-bg-subtle: #0d1123;
        --dx-primary-border-subtle: rgba(var(--dx-primary-rgb),0.3);
        --dx-secondary-border-subtle: rgba(var(--dx-secondary-rgb),0.3);
        --dx-success-border-subtle: rgba(var(--dx-success-rgb),0.3);
        --dx-info-border-subtle: rgba(var(--dx-info-rgb),0.3);
        --dx-warning-border-subtle: rgba(var(--dx-warning-rgb),0.3);
        --dx-danger-border-subtle: rgba(var(--dx-danger-rgb),0.3);
        --dx-light-border-subtle: #052a40;
        --dx-dark-border-subtle: #181c2f;
        --dx-heading-color: #d9e0e3;
        --dx-link-color: #66d6fb;
        --dx-link-hover-color: #75dafb;
        --dx-link-color-rgb: 102,214,251;
        --dx-link-hover-color-rgb: 117,218,251;
        --dx-code-color: #f491c2;
        --dx-highlight-color: #f1f5f9;
        --dx-highlight-bg: #664d03;
        --dx-border-color: #262f36;
        --dx-border-color-translucent: #262f36;
        --dx-form-valid-color: #75b798;
        --dx-form-valid-border-color: #75b798;
        --dx-form-invalid-color: #ea868f;
        --dx-form-invalid-border-color: #ea868f;
        --dx-box-shadow: none
    }

        :root[data-bs-theme=black]:is([data-theme=minimal],[data-theme=elegant],[data-theme=material],[data-theme=sparkle],[data-theme=flat],[data-theme=creative]) {
            --dx-body-bg: #18191f;
            --dx-body-bg-rgb: 24,25,31;
            --dx-secondary-bg: #1e1f27;
            --dx-secondary-bg-rgb: 30,31,39;
            --dx-tertiary-bg: #22242c;
            --dx-tertiary-bg-rgb: 34,36,44;
            --dx-light: #22242c;
            --dx-light-rgb: 34,36,44;
            --dx-dark: #22242c;
            --dx-dark-bg-subtle: rgba(to-rgb($black-custom-dark),0.3);
            --dx-dark-rgb: 34,36,44;
            --dx-custom-bg: #22242c
        }

            :root[data-bs-theme=black]:is([data-theme=minimal],[data-theme=elegant],[data-theme=material],[data-theme=sparkle],[data-theme=flat],[data-theme=creative]) .card {
                --dx-card-bg: var(--dx-secondary-bg)
            }

            :root[data-bs-theme=black]:is([data-theme=minimal],[data-theme=elegant],[data-theme=material],[data-theme=sparkle],[data-theme=flat],[data-theme=creative]) .modal {
                --dx-modal-bg: var(--dx-secondary-bg)
            }

.font-base {
    font-family: var(--dx-font-sans-serif)
}

.bg-body-custom {
    background-color: var(--dx-custom-bg)
}

.text-body-custom {
    color: var(--dx-custom-text)
}

.cursor-pointer {
    cursor: pointer
}

.top-24 {
    top: 6rem
}

h6 {
    line-height: 1.5
}

.logos .logo-light {
    display: none
}

.logos .logo-dark, [data-bs-theme=dark] .logos .logo-light {
    display: inline-block
}

[data-bs-theme=dark] .logos .logo-dark {
    display: none
}

ol, ul {
    padding-right: 1.3rem
}

.custom-container {
    max-width: 1350px
}

.opacity-10 {
    opacity: .1
}

.profile-active {
    display: inline-block;
    position: relative
}

    .profile-active .dot {
        border: 2px solid var(--dx-secondary-bg);
        border-radius: 50rem;
        bottom: 5px;
        left: 5px;
        position: absolute
    }

.modal-backdrop, .offcanvas-backdrop {
    backdrop-filter: blur(4px)
}

.jvm-tooltip {
    display: none
}

:is(.text-truncate-2,.text-truncate-3) {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical
}

.text-truncate-2 {
    -webkit-line-clamp: 2
}

.text-truncate-3 {
    -webkit-line-clamp: 3
}

.accordion-primary, .accordion-primary.accordion-boxed {
    --dx-accordion-active-color: var(--dx-primary);
    --dx-accordion-active-bg: var(--dx-primary-bg-subtle)
}

    .accordion-primary.accordion-boxed [aria-expanded=true] {
        --dx-accordion-border-color: var(--dx-primary-border-subtle)
    }

.accordion-solid-primary {
    --dx-accordion-active-bg: var(--dx-primary);
    --dx-accordion-active-color: #fff
}

    .accordion-solid-primary [aria-expanded=true] {
        --dx-accordion-border-color: var(--dx-primary)
    }

.accordion-secondary, .accordion-secondary.accordion-boxed {
    --dx-accordion-active-color: var(--dx-secondary);
    --dx-accordion-active-bg: var(--dx-secondary-bg-subtle)
}

    .accordion-secondary.accordion-boxed [aria-expanded=true] {
        --dx-accordion-border-color: var(--dx-secondary-border-subtle)
    }

.accordion-solid-secondary {
    --dx-accordion-active-bg: var(--dx-secondary);
    --dx-accordion-active-color: #fff
}

    .accordion-solid-secondary [aria-expanded=true] {
        --dx-accordion-border-color: var(--dx-secondary)
    }

.accordion-success, .accordion-success.accordion-boxed {
    --dx-accordion-active-color: var(--dx-success);
    --dx-accordion-active-bg: var(--dx-success-bg-subtle)
}

    .accordion-success.accordion-boxed [aria-expanded=true] {
        --dx-accordion-border-color: var(--dx-success-border-subtle)
    }

.accordion-solid-success {
    --dx-accordion-active-bg: var(--dx-success);
    --dx-accordion-active-color: #fff
}

    .accordion-solid-success [aria-expanded=true] {
        --dx-accordion-border-color: var(--dx-success)
    }

.accordion-info, .accordion-info.accordion-boxed {
    --dx-accordion-active-color: var(--dx-info);
    --dx-accordion-active-bg: var(--dx-info-bg-subtle)
}

    .accordion-info.accordion-boxed [aria-expanded=true] {
        --dx-accordion-border-color: var(--dx-info-border-subtle)
    }

.accordion-solid-info {
    --dx-accordion-active-bg: var(--dx-info);
    --dx-accordion-active-color: #fff
}

    .accordion-solid-info [aria-expanded=true] {
        --dx-accordion-border-color: var(--dx-info)
    }

.accordion-warning, .accordion-warning.accordion-boxed {
    --dx-accordion-active-color: var(--dx-warning);
    --dx-accordion-active-bg: var(--dx-warning-bg-subtle)
}

    .accordion-warning.accordion-boxed [aria-expanded=true] {
        --dx-accordion-border-color: var(--dx-warning-border-subtle)
    }

.accordion-solid-warning {
    --dx-accordion-active-bg: var(--dx-warning);
    --dx-accordion-active-color: #020617
}

    .accordion-solid-warning [aria-expanded=true] {
        --dx-accordion-border-color: var(--dx-warning)
    }

.accordion-danger, .accordion-danger.accordion-boxed {
    --dx-accordion-active-color: var(--dx-danger);
    --dx-accordion-active-bg: var(--dx-danger-bg-subtle)
}

    .accordion-danger.accordion-boxed [aria-expanded=true] {
        --dx-accordion-border-color: var(--dx-danger-border-subtle)
    }

.accordion-solid-danger {
    --dx-accordion-active-bg: var(--dx-danger);
    --dx-accordion-active-color: #fff
}

    .accordion-solid-danger [aria-expanded=true] {
        --dx-accordion-border-color: var(--dx-danger)
    }

.accordion-light, .accordion-light.accordion-boxed {
    --dx-accordion-active-color: var(--dx-secondary-color);
    --dx-accordion-active-bg: var(--dx-light)
}

    .accordion-light.accordion-boxed [aria-expanded=true] {
        --dx-accordion-border-color: var(--dx-border-color)
    }

.accordion-solid-light {
    --dx-accordion-active-bg: var(--dx-light);
    --dx-accordion-active-color: #020617
}

    .accordion-solid-light [aria-expanded=true] {
        --dx-accordion-border-color: var(--dx-light)
    }

.accordion-dark, .accordion-dark.accordion-boxed {
    --dx-accordion-active-color: var(--dx-dark);
    --dx-accordion-active-bg: var(--dx-dark-bg-subtle)
}

    .accordion-dark.accordion-boxed [aria-expanded=true] {
        --dx-accordion-border-color: var(--dx-dark-border-subtle)
    }

.accordion-solid-dark {
    --dx-accordion-active-bg: var(--dx-dark);
    --dx-accordion-active-color: #fff
}

    .accordion-solid-dark [aria-expanded=true] {
        --dx-accordion-border-color: var(--dx-dark)
    }

.accordion-pink, .accordion-pink.accordion-boxed {
    --dx-accordion-active-color: var(--dx-pink);
    --dx-accordion-active-bg: var(--dx-pink-bg-subtle)
}

    .accordion-pink.accordion-boxed [aria-expanded=true] {
        --dx-accordion-border-color: var(--dx-pink-border-subtle)
    }

.accordion-solid-pink {
    --dx-accordion-active-bg: var(--dx-pink);
    --dx-accordion-active-color: #fff
}

    .accordion-solid-pink [aria-expanded=true] {
        --dx-accordion-border-color: var(--dx-pink)
    }

.accordion-orange, .accordion-orange.accordion-boxed {
    --dx-accordion-active-color: var(--dx-orange);
    --dx-accordion-active-bg: var(--dx-orange-bg-subtle)
}

    .accordion-orange.accordion-boxed [aria-expanded=true] {
        --dx-accordion-border-color: var(--dx-orange-border-subtle)
    }

.accordion-solid-orange {
    --dx-accordion-active-bg: var(--dx-orange);
    --dx-accordion-active-color: #fff
}

    .accordion-solid-orange [aria-expanded=true] {
        --dx-accordion-border-color: var(--dx-orange)
    }

.accordion-indigo, .accordion-indigo.accordion-boxed {
    --dx-accordion-active-color: var(--dx-indigo);
    --dx-accordion-active-bg: var(--dx-indigo-bg-subtle)
}

    .accordion-indigo.accordion-boxed [aria-expanded=true] {
        --dx-accordion-border-color: var(--dx-indigo-border-subtle)
    }

.accordion-solid-indigo {
    --dx-accordion-active-bg: var(--dx-indigo);
    --dx-accordion-active-color: #fff
}

    .accordion-solid-indigo [aria-expanded=true] {
        --dx-accordion-border-color: var(--dx-indigo)
    }

.btn-primary {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-primary);
    --dx-btn-border-color: var(--dx-primary);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-primary-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-primary-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-primary-text-emphasis);
    --dx-btn-active-border-color: var(--dx-primary-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-primary-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-primary-text-emphasis)
}

[data-theme=material] .btn-primary {
    box-shadow: var(--dx-box-shadow)
}

.btn-outline-primary {
    --dx-btn-color: var(--dx-primary);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-primary);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-primary-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-primary-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-primary-text-emphasis);
    --dx-btn-active-border-color: var(--dx-primary-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-primary-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-primary-text-emphasis)
}

[data-theme=material] .btn-outline-primary {
    box-shadow: var(--dx-box-shadow)
}

.btn-sub-primary {
    --dx-btn-color: var(--dx-primary);
    --dx-btn-bg: var(--dx-primary-bg-subtle);
    --dx-btn-border-color: transparent;
    --dx-btn-hover-color: var(--dx-primary);
    --dx-btn-hover-bg: var(--dx-primary-border-subtle);
    --dx-btn-hover-border-color: transparent;
    --dx-btn-active-color: var(--dx-primary);
    --dx-btn-active-bg: var(--dx-primary-border-subtle);
    --dx-btn-active-border-color: transparent;
    --dx-btn-disabled-color: var(--dx-primary);
    --dx-btn-disabled-bg: var(--dx-primary-border-subtle);
    --dx-btn-disabled-border-color: transparent
}

.btn-dashed-primary {
    --dx-btn-color: var(--dx-primary);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-primary);
    --dx-btn-hover-color: var(--dx-primary);
    --dx-btn-hover-bg: var(--dx-primary-bg-subtle);
    --dx-btn-hover-border-color: var(--dx-primary);
    --dx-btn-active-color: var(--dx-primary);
    --dx-btn-active-bg: var(--dx-primary-bg-subtle);
    --dx-btn-active-border-color: var(--dx-primary);
    --dx-btn-disabled-color: var(--dx-primary);
    --dx-btn-disabled-bg: var(--dx-primary-bg-subtle);
    --dx-btn-disabled-border-color: var(--dx-primary)
}

.btn-active-primary {
    --dx-btn-color: var(--dx-primary);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: transparent;
    --dx-btn-hover-color: var(--dx-primary);
    --dx-btn-hover-bg: var(--dx-primary-bg-subtle);
    --dx-btn-hover-border-color: transparent;
    --dx-btn-active-color: var(--dx-primary);
    --dx-btn-active-bg: var(--dx-primary-bg-subtle);
    --dx-btn-active-border-color: transparent;
    --dx-btn-disabled-color: var(--dx-primary);
    --dx-btn-disabled-bg: var(--dx-primary-bg-subtle);
    --dx-btn-disabled-border-color: transparent
}

.btn-3d-primary {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-primary);
    --dx-btn-border-color: var(--dx-primary);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-primary-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-primary-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-primary-text-emphasis);
    --dx-btn-active-border-color: var(--dx-primary-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-primary-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-primary-text-emphasis);
    --dx-btn-shadow-color: var(--dx-primary-text-emphasis)
}

.navigation-primary a:is(:hover,.active) {
    color: var(--dx-primary)
}

.navigation-primary.navigation-bottom-animation a:is(:hover,.active):before {
    background-color: var(--dx-primary)
}

.navigation-primary.navigation-border-animation a:before {
    background-color: var(--dx-primary)
}

.btn-secondary {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-secondary);
    --dx-btn-border-color: var(--dx-secondary);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-secondary-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-secondary-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-secondary-text-emphasis);
    --dx-btn-active-border-color: var(--dx-secondary-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-secondary-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-secondary-text-emphasis)
}

[data-theme=material] .btn-secondary {
    box-shadow: var(--dx-box-shadow)
}

.btn-outline-secondary {
    --dx-btn-color: var(--dx-secondary);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-secondary);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-secondary-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-secondary-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-secondary-text-emphasis);
    --dx-btn-active-border-color: var(--dx-secondary-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-secondary-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-secondary-text-emphasis)
}

[data-theme=material] .btn-outline-secondary {
    box-shadow: var(--dx-box-shadow)
}

.btn-sub-secondary {
    --dx-btn-color: var(--dx-secondary);
    --dx-btn-bg: var(--dx-secondary-bg-subtle);
    --dx-btn-border-color: transparent;
    --dx-btn-hover-color: var(--dx-secondary);
    --dx-btn-hover-bg: var(--dx-secondary-border-subtle);
    --dx-btn-hover-border-color: transparent;
    --dx-btn-active-color: var(--dx-secondary);
    --dx-btn-active-bg: var(--dx-secondary-border-subtle);
    --dx-btn-active-border-color: transparent;
    --dx-btn-disabled-color: var(--dx-secondary);
    --dx-btn-disabled-bg: var(--dx-secondary-border-subtle);
    --dx-btn-disabled-border-color: transparent
}

.btn-dashed-secondary {
    --dx-btn-color: var(--dx-secondary);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-secondary);
    --dx-btn-hover-color: var(--dx-secondary);
    --dx-btn-hover-bg: var(--dx-secondary-bg-subtle);
    --dx-btn-hover-border-color: var(--dx-secondary);
    --dx-btn-active-color: var(--dx-secondary);
    --dx-btn-active-bg: var(--dx-secondary-bg-subtle);
    --dx-btn-active-border-color: var(--dx-secondary);
    --dx-btn-disabled-color: var(--dx-secondary);
    --dx-btn-disabled-bg: var(--dx-secondary-bg-subtle);
    --dx-btn-disabled-border-color: var(--dx-secondary)
}

.btn-active-secondary {
    --dx-btn-color: var(--dx-secondary);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: transparent;
    --dx-btn-hover-color: var(--dx-secondary);
    --dx-btn-hover-bg: var(--dx-secondary-bg-subtle);
    --dx-btn-hover-border-color: transparent;
    --dx-btn-active-color: var(--dx-secondary);
    --dx-btn-active-bg: var(--dx-secondary-bg-subtle);
    --dx-btn-active-border-color: transparent;
    --dx-btn-disabled-color: var(--dx-secondary);
    --dx-btn-disabled-bg: var(--dx-secondary-bg-subtle);
    --dx-btn-disabled-border-color: transparent
}

.btn-3d-secondary {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-secondary);
    --dx-btn-border-color: var(--dx-secondary);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-secondary-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-secondary-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-secondary-text-emphasis);
    --dx-btn-active-border-color: var(--dx-secondary-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-secondary-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-secondary-text-emphasis);
    --dx-btn-shadow-color: var(--dx-secondary-text-emphasis)
}

.navigation-secondary a:is(:hover,.active) {
    color: var(--dx-secondary)
}

.navigation-secondary.navigation-bottom-animation a:is(:hover,.active):before {
    background-color: var(--dx-secondary)
}

.navigation-secondary.navigation-border-animation a:before {
    background-color: var(--dx-secondary)
}

.btn-success {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-success);
    --dx-btn-border-color: var(--dx-success);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-success-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-success-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-success-text-emphasis);
    --dx-btn-active-border-color: var(--dx-success-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-success-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-success-text-emphasis)
}

[data-theme=material] .btn-success {
    box-shadow: var(--dx-box-shadow)
}

.btn-outline-success {
    --dx-btn-color: var(--dx-success);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-success);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-success-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-success-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-success-text-emphasis);
    --dx-btn-active-border-color: var(--dx-success-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-success-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-success-text-emphasis)
}

[data-theme=material] .btn-outline-success {
    box-shadow: var(--dx-box-shadow)
}

.btn-sub-success {
    --dx-btn-color: var(--dx-success);
    --dx-btn-bg: var(--dx-success-bg-subtle);
    --dx-btn-border-color: transparent;
    --dx-btn-hover-color: var(--dx-success);
    --dx-btn-hover-bg: var(--dx-success-border-subtle);
    --dx-btn-hover-border-color: transparent;
    --dx-btn-active-color: var(--dx-success);
    --dx-btn-active-bg: var(--dx-success-border-subtle);
    --dx-btn-active-border-color: transparent;
    --dx-btn-disabled-color: var(--dx-success);
    --dx-btn-disabled-bg: var(--dx-success-border-subtle);
    --dx-btn-disabled-border-color: transparent
}

.btn-dashed-success {
    --dx-btn-color: var(--dx-success);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-success);
    --dx-btn-hover-color: var(--dx-success);
    --dx-btn-hover-bg: var(--dx-success-bg-subtle);
    --dx-btn-hover-border-color: var(--dx-success);
    --dx-btn-active-color: var(--dx-success);
    --dx-btn-active-bg: var(--dx-success-bg-subtle);
    --dx-btn-active-border-color: var(--dx-success);
    --dx-btn-disabled-color: var(--dx-success);
    --dx-btn-disabled-bg: var(--dx-success-bg-subtle);
    --dx-btn-disabled-border-color: var(--dx-success)
}

.btn-active-success {
    --dx-btn-color: var(--dx-success);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: transparent;
    --dx-btn-hover-color: var(--dx-success);
    --dx-btn-hover-bg: var(--dx-success-bg-subtle);
    --dx-btn-hover-border-color: transparent;
    --dx-btn-active-color: var(--dx-success);
    --dx-btn-active-bg: var(--dx-success-bg-subtle);
    --dx-btn-active-border-color: transparent;
    --dx-btn-disabled-color: var(--dx-success);
    --dx-btn-disabled-bg: var(--dx-success-bg-subtle);
    --dx-btn-disabled-border-color: transparent
}

.btn-3d-success {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-success);
    --dx-btn-border-color: var(--dx-success);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-success-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-success-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-success-text-emphasis);
    --dx-btn-active-border-color: var(--dx-success-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-success-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-success-text-emphasis);
    --dx-btn-shadow-color: var(--dx-success-text-emphasis)
}

.navigation-success a:is(:hover,.active) {
    color: var(--dx-success)
}

.navigation-success.navigation-bottom-animation a:is(:hover,.active):before {
    background-color: var(--dx-success)
}

.navigation-success.navigation-border-animation a:before {
    background-color: var(--dx-success)
}

.btn-info {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-info);
    --dx-btn-border-color: var(--dx-info);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-info-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-info-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-info-text-emphasis);
    --dx-btn-active-border-color: var(--dx-info-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-info-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-info-text-emphasis)
}

[data-theme=material] .btn-info {
    box-shadow: var(--dx-box-shadow)
}

.btn-outline-info {
    --dx-btn-color: var(--dx-info);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-info);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-info-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-info-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-info-text-emphasis);
    --dx-btn-active-border-color: var(--dx-info-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-info-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-info-text-emphasis)
}

[data-theme=material] .btn-outline-info {
    box-shadow: var(--dx-box-shadow)
}

.btn-sub-info {
    --dx-btn-color: var(--dx-info);
    --dx-btn-bg: var(--dx-info-bg-subtle);
    --dx-btn-border-color: transparent;
    --dx-btn-hover-color: var(--dx-info);
    --dx-btn-hover-bg: var(--dx-info-border-subtle);
    --dx-btn-hover-border-color: transparent;
    --dx-btn-active-color: var(--dx-info);
    --dx-btn-active-bg: var(--dx-info-border-subtle);
    --dx-btn-active-border-color: transparent;
    --dx-btn-disabled-color: var(--dx-info);
    --dx-btn-disabled-bg: var(--dx-info-border-subtle);
    --dx-btn-disabled-border-color: transparent
}

.btn-dashed-info {
    --dx-btn-color: var(--dx-info);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-info);
    --dx-btn-hover-color: var(--dx-info);
    --dx-btn-hover-bg: var(--dx-info-bg-subtle);
    --dx-btn-hover-border-color: var(--dx-info);
    --dx-btn-active-color: var(--dx-info);
    --dx-btn-active-bg: var(--dx-info-bg-subtle);
    --dx-btn-active-border-color: var(--dx-info);
    --dx-btn-disabled-color: var(--dx-info);
    --dx-btn-disabled-bg: var(--dx-info-bg-subtle);
    --dx-btn-disabled-border-color: var(--dx-info)
}

.btn-active-info {
    --dx-btn-color: var(--dx-info);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: transparent;
    --dx-btn-hover-color: var(--dx-info);
    --dx-btn-hover-bg: var(--dx-info-bg-subtle);
    --dx-btn-hover-border-color: transparent;
    --dx-btn-active-color: var(--dx-info);
    --dx-btn-active-bg: var(--dx-info-bg-subtle);
    --dx-btn-active-border-color: transparent;
    --dx-btn-disabled-color: var(--dx-info);
    --dx-btn-disabled-bg: var(--dx-info-bg-subtle);
    --dx-btn-disabled-border-color: transparent
}

.btn-3d-info {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-info);
    --dx-btn-border-color: var(--dx-info);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-info-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-info-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-info-text-emphasis);
    --dx-btn-active-border-color: var(--dx-info-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-info-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-info-text-emphasis);
    --dx-btn-shadow-color: var(--dx-info-text-emphasis)
}

.navigation-info a:is(:hover,.active) {
    color: var(--dx-info)
}

.navigation-info.navigation-bottom-animation a:is(:hover,.active):before {
    background-color: var(--dx-info)
}

.navigation-info.navigation-border-animation a:before {
    background-color: var(--dx-info)
}

.btn-warning {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-warning);
    --dx-btn-border-color: var(--dx-warning);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-warning-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-warning-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-warning-text-emphasis);
    --dx-btn-active-border-color: var(--dx-warning-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-warning-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-warning-text-emphasis)
}

[data-theme=material] .btn-warning {
    box-shadow: var(--dx-box-shadow)
}

.btn-outline-warning {
    --dx-btn-color: var(--dx-warning);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-warning);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-warning-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-warning-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-warning-text-emphasis);
    --dx-btn-active-border-color: var(--dx-warning-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-warning-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-warning-text-emphasis)
}

[data-theme=material] .btn-outline-warning {
    box-shadow: var(--dx-box-shadow)
}

.btn-sub-warning {
    --dx-btn-color: var(--dx-warning);
    --dx-btn-bg: var(--dx-warning-bg-subtle);
    --dx-btn-border-color: transparent;
    --dx-btn-hover-color: var(--dx-warning);
    --dx-btn-hover-bg: var(--dx-warning-border-subtle);
    --dx-btn-hover-border-color: transparent;
    --dx-btn-active-color: var(--dx-warning);
    --dx-btn-active-bg: var(--dx-warning-border-subtle);
    --dx-btn-active-border-color: transparent;
    --dx-btn-disabled-color: var(--dx-warning);
    --dx-btn-disabled-bg: var(--dx-warning-border-subtle);
    --dx-btn-disabled-border-color: transparent
}

.btn-dashed-warning {
    --dx-btn-color: var(--dx-warning);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-warning);
    --dx-btn-hover-color: var(--dx-warning);
    --dx-btn-hover-bg: var(--dx-warning-bg-subtle);
    --dx-btn-hover-border-color: var(--dx-warning);
    --dx-btn-active-color: var(--dx-warning);
    --dx-btn-active-bg: var(--dx-warning-bg-subtle);
    --dx-btn-active-border-color: var(--dx-warning);
    --dx-btn-disabled-color: var(--dx-warning);
    --dx-btn-disabled-bg: var(--dx-warning-bg-subtle);
    --dx-btn-disabled-border-color: var(--dx-warning)
}

.btn-active-warning {
    --dx-btn-color: var(--dx-warning);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: transparent;
    --dx-btn-hover-color: var(--dx-warning);
    --dx-btn-hover-bg: var(--dx-warning-bg-subtle);
    --dx-btn-hover-border-color: transparent;
    --dx-btn-active-color: var(--dx-warning);
    --dx-btn-active-bg: var(--dx-warning-bg-subtle);
    --dx-btn-active-border-color: transparent;
    --dx-btn-disabled-color: var(--dx-warning);
    --dx-btn-disabled-bg: var(--dx-warning-bg-subtle);
    --dx-btn-disabled-border-color: transparent
}

.btn-3d-warning {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-warning);
    --dx-btn-border-color: var(--dx-warning);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-warning-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-warning-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-warning-text-emphasis);
    --dx-btn-active-border-color: var(--dx-warning-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-warning-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-warning-text-emphasis);
    --dx-btn-shadow-color: var(--dx-warning-text-emphasis)
}

.navigation-warning a:is(:hover,.active) {
    color: var(--dx-warning)
}

.navigation-warning.navigation-bottom-animation a:is(:hover,.active):before {
    background-color: var(--dx-warning)
}

.navigation-warning.navigation-border-animation a:before {
    background-color: var(--dx-warning)
}

.btn-danger {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-danger);
    --dx-btn-border-color: var(--dx-danger);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-danger-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-danger-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-danger-text-emphasis);
    --dx-btn-active-border-color: var(--dx-danger-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-danger-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-danger-text-emphasis)
}

[data-theme=material] .btn-danger {
    box-shadow: var(--dx-box-shadow)
}

.btn-outline-danger {
    --dx-btn-color: var(--dx-danger);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-danger);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-danger-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-danger-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-danger-text-emphasis);
    --dx-btn-active-border-color: var(--dx-danger-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-danger-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-danger-text-emphasis)
}

[data-theme=material] .btn-outline-danger {
    box-shadow: var(--dx-box-shadow)
}

.btn-sub-danger {
    --dx-btn-color: var(--dx-danger);
    --dx-btn-bg: var(--dx-danger-bg-subtle);
    --dx-btn-border-color: transparent;
    --dx-btn-hover-color: var(--dx-danger);
    --dx-btn-hover-bg: var(--dx-danger-border-subtle);
    --dx-btn-hover-border-color: transparent;
    --dx-btn-active-color: var(--dx-danger);
    --dx-btn-active-bg: var(--dx-danger-border-subtle);
    --dx-btn-active-border-color: transparent;
    --dx-btn-disabled-color: var(--dx-danger);
    --dx-btn-disabled-bg: var(--dx-danger-border-subtle);
    --dx-btn-disabled-border-color: transparent
}

.btn-dashed-danger {
    --dx-btn-color: var(--dx-danger);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-danger);
    --dx-btn-hover-color: var(--dx-danger);
    --dx-btn-hover-bg: var(--dx-danger-bg-subtle);
    --dx-btn-hover-border-color: var(--dx-danger);
    --dx-btn-active-color: var(--dx-danger);
    --dx-btn-active-bg: var(--dx-danger-bg-subtle);
    --dx-btn-active-border-color: var(--dx-danger);
    --dx-btn-disabled-color: var(--dx-danger);
    --dx-btn-disabled-bg: var(--dx-danger-bg-subtle);
    --dx-btn-disabled-border-color: var(--dx-danger)
}

.btn-active-danger {
    --dx-btn-color: var(--dx-danger);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: transparent;
    --dx-btn-hover-color: var(--dx-danger);
    --dx-btn-hover-bg: var(--dx-danger-bg-subtle);
    --dx-btn-hover-border-color: transparent;
    --dx-btn-active-color: var(--dx-danger);
    --dx-btn-active-bg: var(--dx-danger-bg-subtle);
    --dx-btn-active-border-color: transparent;
    --dx-btn-disabled-color: var(--dx-danger);
    --dx-btn-disabled-bg: var(--dx-danger-bg-subtle);
    --dx-btn-disabled-border-color: transparent
}

.btn-3d-danger {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-danger);
    --dx-btn-border-color: var(--dx-danger);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-danger-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-danger-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-danger-text-emphasis);
    --dx-btn-active-border-color: var(--dx-danger-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-danger-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-danger-text-emphasis);
    --dx-btn-shadow-color: var(--dx-danger-text-emphasis)
}

.navigation-danger a:is(:hover,.active) {
    color: var(--dx-danger)
}

.navigation-danger.navigation-bottom-animation a:is(:hover,.active):before {
    background-color: var(--dx-danger)
}

.navigation-danger.navigation-border-animation a:before {
    background-color: var(--dx-danger)
}

.btn-light {
    --dx-btn-color: var(--dx-secondary-color);
    --dx-btn-bg: var(--dx-light);
    --dx-btn-border-color: var(--dx-light);
    --dx-btn-hover-color: var(--dx-body-color);
    --dx-btn-hover-bg: var(--dx-tertiary-bg);
    --dx-btn-hover-border-color: var(--dx-tertiary-bg);
    --dx-btn-active-color: var(--dx-body-color);
    --dx-btn-active-bg: var(--dx-tertiary-bg);
    --dx-btn-active-border-color: var(--dx-tertiary-bg);
    --dx-btn-disabled-color: var(--dx-secondary-color);
    --dx-btn-disabled-bg: var(--dx-light);
    --dx-btn-disabled-border-color: var(--dx-light)
}

[data-theme=material] .btn-light {
    box-shadow: var(--dx-box-shadow)
}

.btn-outline-light {
    --dx-btn-color: var(--dx-secondary-color);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-light);
    --dx-btn-hover-color: var(--dx-body-color);
    --dx-btn-hover-bg: var(--dx-tertiary-bg);
    --dx-btn-hover-border-color: var(--dx-tertiary-bg);
    --dx-btn-active-color: var(--dx-body-color);
    --dx-btn-active-bg: var(--dx-tertiary-bg);
    --dx-btn-active-border-color: var(--dx-tertiary-bg);
    --dx-btn-disabled-color: var(--dx-secondary-color);
    --dx-btn-disabled-bg: var(--dx-light);
    --dx-btn-disabled-border-color: var(--dx-light)
}

[data-theme=material] .btn-outline-light {
    box-shadow: var(--dx-box-shadow)
}

.navigation-light a:is(:hover,.active) {
    color: var(--dx-light)
}

.navigation-light.navigation-bottom-animation a:is(:hover,.active):before {
    background-color: var(--dx-light)
}

.navigation-light.navigation-border-animation a:before {
    background-color: var(--dx-light)
}

.btn-dark {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-dark);
    --dx-btn-border-color: var(--dx-dark);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-dark-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-dark-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-dark-text-emphasis);
    --dx-btn-active-border-color: var(--dx-dark-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-dark-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-dark-text-emphasis)
}

[data-theme=material] .btn-dark {
    box-shadow: var(--dx-box-shadow)
}

.btn-outline-dark {
    --dx-btn-color: var(--dx-body-color);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-dark);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-dark);
    --dx-btn-hover-border-color: var(--dx-dark);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-dark);
    --dx-btn-active-border-color: var(--dx-dark);
    --dx-btn-disabled-color: var(--dx-secondary-color);
    --dx-btn-disabled-bg: var(--dx-dark);
    --dx-btn-disabled-border-color: var(--dx-dark)
}

[data-theme=material] .btn-outline-dark {
    box-shadow: var(--dx-box-shadow)
}

.btn-sub-dark {
    --dx-btn-color: var(--dx-body-color);
    --dx-btn-bg: var(--dx-light);
    --dx-btn-border-color: transparent;
    --dx-btn-hover-color: var(--dx-body-color);
    --dx-btn-hover-bg: var(--dx-dark-border-subtle);
    --dx-btn-hover-border-color: transparent;
    --dx-btn-active-color: var(--dx-body-color);
    --dx-btn-active-bg: var(--dx-dark-border-subtle);
    --dx-btn-active-border-color: transparent;
    --dx-btn-disabled-color: var(--dx-body-color);
    --dx-btn-disabled-bg: var(--dx-dark-border-subtle);
    --dx-btn-disabled-border-color: transparent
}

.btn-dashed-dark {
    --dx-btn-color: var(--dx-body-color);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-border-color);
    --dx-btn-hover-color: var(--dx-body-color);
    --dx-btn-hover-bg: var(--dx-tertiary-bg);
    --dx-btn-hover-border-color: var(--dx-border-color);
    --dx-btn-active-color: var(--dx-body-color);
    --dx-btn-active-bg: var(--dx-tertiary-bg);
    --dx-btn-active-border-color: var(--dx-border-color);
    --dx-btn-disabled-color: var(--dx-body-color);
    --dx-btn-disabled-bg: var(--dx-tertiary-bg);
    --dx-btn-disabled-border-color: var(--dx-border-color)
}

.btn-active-dark {
    --dx-btn-color: var(--dx-body-color);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: transparent;
    --dx-btn-hover-color: var(--dx-body-color);
    --dx-btn-hover-bg: var(--dx-tertiary-bg);
    --dx-btn-hover-border-color: transparent;
    --dx-btn-active-color: var(--dx-body-color);
    --dx-btn-active-bg: var(--dx-tertiary-bg);
    --dx-btn-active-border-color: transparent;
    --dx-btn-disabled-color: var(--dx-body-color);
    --dx-btn-disabled-bg: var(--dx-tertiary-bg);
    --dx-btn-disabled-border-color: transparent
}

.btn-3d-dark {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-dark);
    --dx-btn-border-color: var(--dx-dark);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-dark);
    --dx-btn-hover-border-color: var(--dx-dark);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-dark);
    --dx-btn-active-border-color: var(--dx-dark);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-dark);
    --dx-btn-disabled-border-color: var(--dx-dark)
}

.navigation-dark a:is(:hover,.active) {
    color: var(--dx-dark)
}

.navigation-dark.navigation-bottom-animation a:is(:hover,.active):before {
    background-color: var(--dx-dark)
}

.navigation-dark.navigation-border-animation a:before {
    background-color: var(--dx-dark)
}

.btn-pink {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-pink);
    --dx-btn-border-color: var(--dx-pink);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-pink-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-pink-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-pink-text-emphasis);
    --dx-btn-active-border-color: var(--dx-pink-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-pink-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-pink-text-emphasis)
}

[data-theme=material] .btn-pink {
    box-shadow: var(--dx-box-shadow)
}

.btn-outline-pink {
    --dx-btn-color: var(--dx-pink);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-pink);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-pink-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-pink-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-pink-text-emphasis);
    --dx-btn-active-border-color: var(--dx-pink-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-pink-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-pink-text-emphasis)
}

[data-theme=material] .btn-outline-pink {
    box-shadow: var(--dx-box-shadow)
}

.btn-sub-pink {
    --dx-btn-color: var(--dx-pink);
    --dx-btn-bg: var(--dx-pink-bg-subtle);
    --dx-btn-border-color: transparent;
    --dx-btn-hover-color: var(--dx-pink);
    --dx-btn-hover-bg: var(--dx-pink-border-subtle);
    --dx-btn-hover-border-color: transparent;
    --dx-btn-active-color: var(--dx-pink);
    --dx-btn-active-bg: var(--dx-pink-border-subtle);
    --dx-btn-active-border-color: transparent;
    --dx-btn-disabled-color: var(--dx-pink);
    --dx-btn-disabled-bg: var(--dx-pink-border-subtle);
    --dx-btn-disabled-border-color: transparent
}

.btn-dashed-pink {
    --dx-btn-color: var(--dx-pink);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-pink);
    --dx-btn-hover-color: var(--dx-pink);
    --dx-btn-hover-bg: var(--dx-pink-bg-subtle);
    --dx-btn-hover-border-color: var(--dx-pink);
    --dx-btn-active-color: var(--dx-pink);
    --dx-btn-active-bg: var(--dx-pink-bg-subtle);
    --dx-btn-active-border-color: var(--dx-pink);
    --dx-btn-disabled-color: var(--dx-pink);
    --dx-btn-disabled-bg: var(--dx-pink-bg-subtle);
    --dx-btn-disabled-border-color: var(--dx-pink)
}

.btn-active-pink {
    --dx-btn-color: var(--dx-pink);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: transparent;
    --dx-btn-hover-color: var(--dx-pink);
    --dx-btn-hover-bg: var(--dx-pink-bg-subtle);
    --dx-btn-hover-border-color: transparent;
    --dx-btn-active-color: var(--dx-pink);
    --dx-btn-active-bg: var(--dx-pink-bg-subtle);
    --dx-btn-active-border-color: transparent;
    --dx-btn-disabled-color: var(--dx-pink);
    --dx-btn-disabled-bg: var(--dx-pink-bg-subtle);
    --dx-btn-disabled-border-color: transparent
}

.btn-3d-pink {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-pink);
    --dx-btn-border-color: var(--dx-pink);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-pink-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-pink-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-pink-text-emphasis);
    --dx-btn-active-border-color: var(--dx-pink-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-pink-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-pink-text-emphasis);
    --dx-btn-shadow-color: var(--dx-pink-text-emphasis)
}

.navigation-pink a:is(:hover,.active) {
    color: var(--dx-pink)
}

.navigation-pink.navigation-bottom-animation a:is(:hover,.active):before {
    background-color: var(--dx-pink)
}

.navigation-pink.navigation-border-animation a:before {
    background-color: var(--dx-pink)
}

.btn-orange {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-orange);
    --dx-btn-border-color: var(--dx-orange);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-orange-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-orange-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-orange-text-emphasis);
    --dx-btn-active-border-color: var(--dx-orange-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-orange-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-orange-text-emphasis)
}

[data-theme=material] .btn-orange {
    box-shadow: var(--dx-box-shadow)
}

.btn-outline-orange {
    --dx-btn-color: var(--dx-orange);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-orange);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-orange-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-orange-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-orange-text-emphasis);
    --dx-btn-active-border-color: var(--dx-orange-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-orange-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-orange-text-emphasis)
}

[data-theme=material] .btn-outline-orange {
    box-shadow: var(--dx-box-shadow)
}

.btn-sub-orange {
    --dx-btn-color: var(--dx-orange);
    --dx-btn-bg: var(--dx-orange-bg-subtle);
    --dx-btn-border-color: transparent;
    --dx-btn-hover-color: var(--dx-orange);
    --dx-btn-hover-bg: var(--dx-orange-border-subtle);
    --dx-btn-hover-border-color: transparent;
    --dx-btn-active-color: var(--dx-orange);
    --dx-btn-active-bg: var(--dx-orange-border-subtle);
    --dx-btn-active-border-color: transparent;
    --dx-btn-disabled-color: var(--dx-orange);
    --dx-btn-disabled-bg: var(--dx-orange-border-subtle);
    --dx-btn-disabled-border-color: transparent
}

.btn-dashed-orange {
    --dx-btn-color: var(--dx-orange);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-orange);
    --dx-btn-hover-color: var(--dx-orange);
    --dx-btn-hover-bg: var(--dx-orange-bg-subtle);
    --dx-btn-hover-border-color: var(--dx-orange);
    --dx-btn-active-color: var(--dx-orange);
    --dx-btn-active-bg: var(--dx-orange-bg-subtle);
    --dx-btn-active-border-color: var(--dx-orange);
    --dx-btn-disabled-color: var(--dx-orange);
    --dx-btn-disabled-bg: var(--dx-orange-bg-subtle);
    --dx-btn-disabled-border-color: var(--dx-orange)
}

.btn-active-orange {
    --dx-btn-color: var(--dx-orange);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: transparent;
    --dx-btn-hover-color: var(--dx-orange);
    --dx-btn-hover-bg: var(--dx-orange-bg-subtle);
    --dx-btn-hover-border-color: transparent;
    --dx-btn-active-color: var(--dx-orange);
    --dx-btn-active-bg: var(--dx-orange-bg-subtle);
    --dx-btn-active-border-color: transparent;
    --dx-btn-disabled-color: var(--dx-orange);
    --dx-btn-disabled-bg: var(--dx-orange-bg-subtle);
    --dx-btn-disabled-border-color: transparent
}

.btn-3d-orange {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-orange);
    --dx-btn-border-color: var(--dx-orange);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-orange-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-orange-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-orange-text-emphasis);
    --dx-btn-active-border-color: var(--dx-orange-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-orange-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-orange-text-emphasis);
    --dx-btn-shadow-color: var(--dx-orange-text-emphasis)
}

.navigation-orange a:is(:hover,.active) {
    color: var(--dx-orange)
}

.navigation-orange.navigation-bottom-animation a:is(:hover,.active):before {
    background-color: var(--dx-orange)
}

.navigation-orange.navigation-border-animation a:before {
    background-color: var(--dx-orange)
}

.btn-indigo {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-indigo);
    --dx-btn-border-color: var(--dx-indigo);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-indigo-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-indigo-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-indigo-text-emphasis);
    --dx-btn-active-border-color: var(--dx-indigo-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-indigo-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-indigo-text-emphasis)
}

[data-theme=material] .btn-indigo {
    box-shadow: var(--dx-box-shadow)
}

.btn-outline-indigo {
    --dx-btn-color: var(--dx-indigo);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-indigo);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-indigo-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-indigo-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-indigo-text-emphasis);
    --dx-btn-active-border-color: var(--dx-indigo-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-indigo-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-indigo-text-emphasis)
}

[data-theme=material] .btn-outline-indigo {
    box-shadow: var(--dx-box-shadow)
}

.btn-sub-indigo {
    --dx-btn-color: var(--dx-indigo);
    --dx-btn-bg: var(--dx-indigo-bg-subtle);
    --dx-btn-border-color: transparent;
    --dx-btn-hover-color: var(--dx-indigo);
    --dx-btn-hover-bg: var(--dx-indigo-border-subtle);
    --dx-btn-hover-border-color: transparent;
    --dx-btn-active-color: var(--dx-indigo);
    --dx-btn-active-bg: var(--dx-indigo-border-subtle);
    --dx-btn-active-border-color: transparent;
    --dx-btn-disabled-color: var(--dx-indigo);
    --dx-btn-disabled-bg: var(--dx-indigo-border-subtle);
    --dx-btn-disabled-border-color: transparent
}

.btn-dashed-indigo {
    --dx-btn-color: var(--dx-indigo);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-indigo);
    --dx-btn-hover-color: var(--dx-indigo);
    --dx-btn-hover-bg: var(--dx-indigo-bg-subtle);
    --dx-btn-hover-border-color: var(--dx-indigo);
    --dx-btn-active-color: var(--dx-indigo);
    --dx-btn-active-bg: var(--dx-indigo-bg-subtle);
    --dx-btn-active-border-color: var(--dx-indigo);
    --dx-btn-disabled-color: var(--dx-indigo);
    --dx-btn-disabled-bg: var(--dx-indigo-bg-subtle);
    --dx-btn-disabled-border-color: var(--dx-indigo)
}

.btn-active-indigo {
    --dx-btn-color: var(--dx-indigo);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: transparent;
    --dx-btn-hover-color: var(--dx-indigo);
    --dx-btn-hover-bg: var(--dx-indigo-bg-subtle);
    --dx-btn-hover-border-color: transparent;
    --dx-btn-active-color: var(--dx-indigo);
    --dx-btn-active-bg: var(--dx-indigo-bg-subtle);
    --dx-btn-active-border-color: transparent;
    --dx-btn-disabled-color: var(--dx-indigo);
    --dx-btn-disabled-bg: var(--dx-indigo-bg-subtle);
    --dx-btn-disabled-border-color: transparent
}

.btn-3d-indigo {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-indigo);
    --dx-btn-border-color: var(--dx-indigo);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-indigo-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-indigo-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-indigo-text-emphasis);
    --dx-btn-active-border-color: var(--dx-indigo-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-indigo-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-indigo-text-emphasis);
    --dx-btn-shadow-color: var(--dx-indigo-text-emphasis)
}

.navigation-indigo a:is(:hover,.active) {
    color: var(--dx-indigo)
}

.navigation-indigo.navigation-bottom-animation a:is(:hover,.active):before {
    background-color: var(--dx-indigo)
}

.navigation-indigo.navigation-border-animation a:before {
    background-color: var(--dx-indigo)
}

.alert-outline-primary {
    --dx-alert-color: var(--dx-primary);
    --dx-alert-bg: var(--dx-secondary-bg);
    --dx-alert-border-color: var(--dx-primary);
    --dx-alert-link-color: var(--dx-primary)
}

.alert-sub-primary {
    --dx-alert-color: var(--dx-primary-text-emphasis);
    --dx-alert-bg: var(--dx-primary-bg-subtle);
    --dx-alert-link-color: var(--dx-primary)
}

.alert-solid-primary {
    --dx-alert-color: #fff;
    --dx-alert-bg: var(--dx-primary);
    --dx-alert-border-color: var(--dx-primary);
    --dx-alert-link-color: var(--dx-primary-bg-subtle)
}

.icon-alert-primary {
    border-top: 4px solid var(--dx-primary) !important
}

    .icon-alert-primary .icon {
        border: 1px solid var(--dx-primary-bg-subtle)
    }

.alert-outline-secondary {
    --dx-alert-color: var(--dx-secondary);
    --dx-alert-bg: var(--dx-secondary-bg);
    --dx-alert-border-color: var(--dx-secondary);
    --dx-alert-link-color: var(--dx-secondary)
}

.alert-sub-secondary {
    --dx-alert-color: var(--dx-secondary-text-emphasis);
    --dx-alert-bg: var(--dx-secondary-bg-subtle);
    --dx-alert-link-color: var(--dx-secondary)
}

.alert-solid-secondary {
    --dx-alert-color: #fff;
    --dx-alert-bg: var(--dx-secondary);
    --dx-alert-border-color: var(--dx-secondary);
    --dx-alert-link-color: var(--dx-secondary-bg-subtle)
}

.icon-alert-secondary {
    border-top: 4px solid var(--dx-secondary) !important
}

    .icon-alert-secondary .icon {
        border: 1px solid var(--dx-secondary-bg-subtle)
    }

.alert-outline-success {
    --dx-alert-color: var(--dx-success);
    --dx-alert-bg: var(--dx-secondary-bg);
    --dx-alert-border-color: var(--dx-success);
    --dx-alert-link-color: var(--dx-success)
}

.alert-sub-success {
    --dx-alert-color: var(--dx-success-text-emphasis);
    --dx-alert-bg: var(--dx-success-bg-subtle);
    --dx-alert-link-color: var(--dx-success)
}

.alert-solid-success {
    --dx-alert-color: #fff;
    --dx-alert-bg: var(--dx-success);
    --dx-alert-border-color: var(--dx-success);
    --dx-alert-link-color: var(--dx-success-bg-subtle)
}

.icon-alert-success {
    border-top: 4px solid var(--dx-success) !important
}

    .icon-alert-success .icon {
        border: 1px solid var(--dx-success-bg-subtle)
    }

.alert-outline-info {
    --dx-alert-color: var(--dx-info);
    --dx-alert-bg: var(--dx-secondary-bg);
    --dx-alert-border-color: var(--dx-info);
    --dx-alert-link-color: var(--dx-info)
}

.alert-sub-info {
    --dx-alert-color: var(--dx-info-text-emphasis);
    --dx-alert-bg: var(--dx-info-bg-subtle);
    --dx-alert-link-color: var(--dx-info)
}

.alert-solid-info {
    --dx-alert-color: #fff;
    --dx-alert-bg: var(--dx-info);
    --dx-alert-border-color: var(--dx-info);
    --dx-alert-link-color: var(--dx-info-bg-subtle)
}

.icon-alert-info {
    border-top: 4px solid var(--dx-info) !important
}

    .icon-alert-info .icon {
        border: 1px solid var(--dx-info-bg-subtle)
    }

.alert-outline-warning {
    --dx-alert-color: var(--dx-warning);
    --dx-alert-bg: var(--dx-secondary-bg);
    --dx-alert-border-color: var(--dx-warning);
    --dx-alert-link-color: var(--dx-warning)
}

.alert-sub-warning {
    --dx-alert-color: var(--dx-warning-text-emphasis);
    --dx-alert-bg: var(--dx-warning-bg-subtle);
    --dx-alert-link-color: var(--dx-warning)
}

.alert-solid-warning {
    --dx-alert-color: #020617;
    --dx-alert-bg: var(--dx-warning);
    --dx-alert-border-color: var(--dx-warning);
    --dx-alert-link-color: var(--dx-warning-bg-subtle)
}

.icon-alert-warning {
    border-top: 4px solid var(--dx-warning) !important
}

    .icon-alert-warning .icon {
        border: 1px solid var(--dx-warning-bg-subtle)
    }

.alert-outline-danger {
    --dx-alert-color: var(--dx-danger);
    --dx-alert-bg: var(--dx-secondary-bg);
    --dx-alert-border-color: var(--dx-danger);
    --dx-alert-link-color: var(--dx-danger)
}

.alert-sub-danger {
    --dx-alert-color: var(--dx-danger-text-emphasis);
    --dx-alert-bg: var(--dx-danger-bg-subtle);
    --dx-alert-link-color: var(--dx-danger)
}

.alert-solid-danger {
    --dx-alert-color: #fff;
    --dx-alert-bg: var(--dx-danger);
    --dx-alert-border-color: var(--dx-danger);
    --dx-alert-link-color: var(--dx-danger-bg-subtle)
}

.icon-alert-danger {
    border-top: 4px solid var(--dx-danger) !important
}

    .icon-alert-danger .icon {
        border: 1px solid var(--dx-danger-bg-subtle)
    }

.icon-alert-light {
    border-top: 4px solid var(--dx-light) !important
}

    .icon-alert-light .icon {
        border: 1px solid var(--dx-light-bg-subtle)
    }

.alert-outline-dark {
    --dx-alert-color: var(--dx-dark);
    --dx-alert-bg: var(--dx-secondary-bg);
    --dx-alert-border-color: var(--dx-border-color);
    --dx-alert-link-color: var(--dx-dark)
}

.alert-sub-dark {
    --dx-alert-color: var(--dx-secondary-color);
    --dx-alert-bg: var(--dx-tertiary-bg);
    --dx-alert-link-color: var(--dx-dark)
}

.alert-solid-dark {
    --dx-alert-color: #fff;
    --dx-alert-bg: var(--dx-dark);
    --dx-alert-border-color: var(--dx-dark);
    --dx-alert-link-color: var(--dx-dark-bg-subtle)
}

.icon-alert-dark {
    border-top: 4px solid var(--dx-dark) !important
}

    .icon-alert-dark .icon {
        border: 1px solid var(--dx-dark-bg-subtle)
    }

.alert-outline-pink {
    --dx-alert-color: var(--dx-pink);
    --dx-alert-bg: var(--dx-secondary-bg);
    --dx-alert-border-color: var(--dx-pink);
    --dx-alert-link-color: var(--dx-pink)
}

.alert-sub-pink {
    --dx-alert-color: var(--dx-pink-text-emphasis);
    --dx-alert-bg: var(--dx-pink-bg-subtle);
    --dx-alert-link-color: var(--dx-pink)
}

.alert-solid-pink {
    --dx-alert-color: #fff;
    --dx-alert-bg: var(--dx-pink);
    --dx-alert-border-color: var(--dx-pink);
    --dx-alert-link-color: var(--dx-pink-bg-subtle)
}

.icon-alert-pink {
    border-top: 4px solid var(--dx-pink) !important
}

    .icon-alert-pink .icon {
        border: 1px solid var(--dx-pink-bg-subtle)
    }

.alert-outline-orange {
    --dx-alert-color: var(--dx-orange);
    --dx-alert-bg: var(--dx-secondary-bg);
    --dx-alert-border-color: var(--dx-orange);
    --dx-alert-link-color: var(--dx-orange)
}

.alert-sub-orange {
    --dx-alert-color: var(--dx-orange-text-emphasis);
    --dx-alert-bg: var(--dx-orange-bg-subtle);
    --dx-alert-link-color: var(--dx-orange)
}

.alert-solid-orange {
    --dx-alert-color: #fff;
    --dx-alert-bg: var(--dx-orange);
    --dx-alert-border-color: var(--dx-orange);
    --dx-alert-link-color: var(--dx-orange-bg-subtle)
}

.icon-alert-orange {
    border-top: 4px solid var(--dx-orange) !important
}

    .icon-alert-orange .icon {
        border: 1px solid var(--dx-orange-bg-subtle)
    }

.alert-outline-indigo {
    --dx-alert-color: var(--dx-indigo);
    --dx-alert-bg: var(--dx-secondary-bg);
    --dx-alert-border-color: var(--dx-indigo);
    --dx-alert-link-color: var(--dx-indigo)
}

.alert-sub-indigo {
    --dx-alert-color: var(--dx-indigo-text-emphasis);
    --dx-alert-bg: var(--dx-indigo-bg-subtle);
    --dx-alert-link-color: var(--dx-indigo)
}

.alert-solid-indigo {
    --dx-alert-color: #fff;
    --dx-alert-bg: var(--dx-indigo);
    --dx-alert-border-color: var(--dx-indigo);
    --dx-alert-link-color: var(--dx-indigo-bg-subtle)
}

.icon-alert-indigo {
    border-top: 4px solid var(--dx-indigo) !important
}

    .icon-alert-indigo .icon {
        border: 1px solid var(--dx-indigo-bg-subtle)
    }

.card-border-primary {
    --dx-card-border-color: var(--dx-primary-border-subtle);
    box-shadow: 0 10px 15px -3px var(--dx-primary-bg-subtle),0 4px 6px -4px var(--dx-primary-bg-subtle);
    --dx-link-color-rgb: var(--dx-primary-rgb);
    --prefixlink-hover-color-rgb: var(--dx-primary-rgb)
}

.card-primary {
    --dx-link-color-rgb: var(--dx-primary-rgb)
}

    .card-primary .icon-bg {
        background-color: var(--dx-primary);
        color: #fff
    }

    .card-primary:hover {
        --dx-card-border-color: var(--dx-primary-border-subtle);
        color: #fff;
        --dx-link-color-rgb: #fff
    }

        .card-primary:hover .icon-bg {
            background-color: hsla(0,0%,100%,.144)
        }

        .card-primary:hover .icon-hover-bg {
            background-color: var(--dx-primary)
        }

.card-sub-primary {
    --dx-link-color-rgb: var(--dx-primary-rgb)
}

    .card-sub-primary .icon-bg {
        background-color: var(--dx-primary-bg-subtle);
        color: var(--dx-primary)
    }

    .card-sub-primary:hover {
        color: var(--dx-primary);
        --dx-card-border-color: var(--dx-primary-border-subtle)
    }

        .card-sub-primary:hover .icon-hover-bg {
            background-color: rgba(var(--dx-primary-rgb),.08)
        }

.card-hover-primary {
    --dx-link-color-rgb: var(--dx-primary-rgb)
}

    .card-hover-primary .icon-bg {
        background-color: var(--dx-primary-bg-subtle);
        color: var(--dx-primary)
    }

.card-border-secondary {
    --dx-card-border-color: var(--dx-secondary-border-subtle);
    box-shadow: 0 10px 15px -3px var(--dx-secondary-bg-subtle),0 4px 6px -4px var(--dx-secondary-bg-subtle);
    --dx-link-color-rgb: var(--dx-secondary-rgb);
    --prefixlink-hover-color-rgb: var(--dx-secondary-rgb)
}

.card-secondary {
    --dx-link-color-rgb: var(--dx-secondary-rgb)
}

    .card-secondary .icon-bg {
        background-color: var(--dx-secondary);
        color: #fff
    }

    .card-secondary:hover {
        --dx-card-border-color: var(--dx-secondary-border-subtle);
        color: #fff;
        --dx-link-color-rgb: #fff
    }

        .card-secondary:hover .icon-bg {
            background-color: hsla(0,0%,100%,.144)
        }

        .card-secondary:hover .icon-hover-bg {
            background-color: var(--dx-secondary)
        }

.card-sub-secondary {
    --dx-link-color-rgb: var(--dx-secondary-rgb)
}

    .card-sub-secondary .icon-bg {
        background-color: var(--dx-secondary-bg-subtle);
        color: var(--dx-secondary)
    }

    .card-sub-secondary:hover {
        color: var(--dx-secondary);
        --dx-card-border-color: var(--dx-secondary-border-subtle)
    }

        .card-sub-secondary:hover .icon-hover-bg {
            background-color: rgba(var(--dx-secondary-rgb),.08)
        }

.card-hover-secondary {
    --dx-link-color-rgb: var(--dx-secondary-rgb)
}

    .card-hover-secondary .icon-bg {
        background-color: var(--dx-secondary-bg-subtle);
        color: var(--dx-secondary)
    }

.card-border-success {
    --dx-card-border-color: var(--dx-success-border-subtle);
    box-shadow: 0 10px 15px -3px var(--dx-success-bg-subtle),0 4px 6px -4px var(--dx-success-bg-subtle);
    --dx-link-color-rgb: var(--dx-success-rgb);
    --prefixlink-hover-color-rgb: var(--dx-success-rgb)
}

.card-success {
    --dx-link-color-rgb: var(--dx-success-rgb)
}

    .card-success .icon-bg {
        background-color: var(--dx-success);
        color: #fff
    }

    .card-success:hover {
        --dx-card-border-color: var(--dx-success-border-subtle);
        color: #fff;
        --dx-link-color-rgb: #fff
    }

        .card-success:hover .icon-bg {
            background-color: hsla(0,0%,100%,.144)
        }

        .card-success:hover .icon-hover-bg {
            background-color: var(--dx-success)
        }

.card-sub-success {
    --dx-link-color-rgb: var(--dx-success-rgb)
}

    .card-sub-success .icon-bg {
        background-color: var(--dx-success-bg-subtle);
        color: var(--dx-success)
    }

    .card-sub-success:hover {
        color: var(--dx-success);
        --dx-card-border-color: var(--dx-success-border-subtle)
    }

        .card-sub-success:hover .icon-hover-bg {
            background-color: rgba(var(--dx-success-rgb),.08)
        }

.card-hover-success {
    --dx-link-color-rgb: var(--dx-success-rgb)
}

    .card-hover-success .icon-bg {
        background-color: var(--dx-success-bg-subtle);
        color: var(--dx-success)
    }

.card-border-info {
    --dx-card-border-color: var(--dx-info-border-subtle);
    box-shadow: 0 10px 15px -3px var(--dx-info-bg-subtle),0 4px 6px -4px var(--dx-info-bg-subtle);
    --dx-link-color-rgb: var(--dx-info-rgb);
    --prefixlink-hover-color-rgb: var(--dx-info-rgb)
}

.card-info {
    --dx-link-color-rgb: var(--dx-info-rgb)
}

    .card-info .icon-bg {
        background-color: var(--dx-info);
        color: #fff
    }

    .card-info:hover {
        --dx-card-border-color: var(--dx-info-border-subtle);
        color: #fff;
        --dx-link-color-rgb: #fff
    }

        .card-info:hover .icon-bg {
            background-color: hsla(0,0%,100%,.144)
        }

        .card-info:hover .icon-hover-bg {
            background-color: var(--dx-info)
        }

.card-sub-info {
    --dx-link-color-rgb: var(--dx-info-rgb)
}

    .card-sub-info .icon-bg {
        background-color: var(--dx-info-bg-subtle);
        color: var(--dx-info)
    }

    .card-sub-info:hover {
        color: var(--dx-info);
        --dx-card-border-color: var(--dx-info-border-subtle)
    }

        .card-sub-info:hover .icon-hover-bg {
            background-color: rgba(var(--dx-info-rgb),.08)
        }

.card-hover-info {
    --dx-link-color-rgb: var(--dx-info-rgb)
}

    .card-hover-info .icon-bg {
        background-color: var(--dx-info-bg-subtle);
        color: var(--dx-info)
    }

.card-border-warning {
    --dx-card-border-color: var(--dx-warning-border-subtle);
    box-shadow: 0 10px 15px -3px var(--dx-warning-bg-subtle),0 4px 6px -4px var(--dx-warning-bg-subtle);
    --dx-link-color-rgb: var(--dx-warning-rgb);
    --prefixlink-hover-color-rgb: var(--dx-warning-rgb)
}

.card-warning {
    --dx-link-color-rgb: var(--dx-warning-rgb)
}

    .card-warning .icon-bg {
        background-color: var(--dx-warning);
        color: #020617
    }

    .card-warning:hover {
        --dx-card-border-color: var(--dx-warning-border-subtle);
        color: #020617;
        --dx-link-color-rgb: #020617
    }

        .card-warning:hover .icon-bg {
            background-color: hsla(0,0%,100%,.144)
        }

        .card-warning:hover .icon-hover-bg {
            background-color: var(--dx-warning)
        }

.card-sub-warning {
    --dx-link-color-rgb: var(--dx-warning-rgb)
}

    .card-sub-warning .icon-bg {
        background-color: var(--dx-warning-bg-subtle);
        color: var(--dx-warning)
    }

    .card-sub-warning:hover {
        color: var(--dx-warning);
        --dx-card-border-color: var(--dx-warning-border-subtle)
    }

        .card-sub-warning:hover .icon-hover-bg {
            background-color: rgba(var(--dx-warning-rgb),.08)
        }

.card-hover-warning {
    --dx-link-color-rgb: var(--dx-warning-rgb)
}

    .card-hover-warning .icon-bg {
        background-color: var(--dx-warning-bg-subtle);
        color: var(--dx-warning)
    }

.card-border-danger {
    --dx-card-border-color: var(--dx-danger-border-subtle);
    box-shadow: 0 10px 15px -3px var(--dx-danger-bg-subtle),0 4px 6px -4px var(--dx-danger-bg-subtle);
    --dx-link-color-rgb: var(--dx-danger-rgb);
    --prefixlink-hover-color-rgb: var(--dx-danger-rgb)
}

.card-danger {
    --dx-link-color-rgb: var(--dx-danger-rgb)
}

    .card-danger .icon-bg {
        background-color: var(--dx-danger);
        color: #fff
    }

    .card-danger:hover {
        --dx-card-border-color: var(--dx-danger-border-subtle);
        color: #fff;
        --dx-link-color-rgb: #fff
    }

        .card-danger:hover .icon-bg {
            background-color: hsla(0,0%,100%,.144)
        }

        .card-danger:hover .icon-hover-bg {
            background-color: var(--dx-danger)
        }

.card-sub-danger {
    --dx-link-color-rgb: var(--dx-danger-rgb)
}

    .card-sub-danger .icon-bg {
        background-color: var(--dx-danger-bg-subtle);
        color: var(--dx-danger)
    }

    .card-sub-danger:hover {
        color: var(--dx-danger);
        --dx-card-border-color: var(--dx-danger-border-subtle)
    }

        .card-sub-danger:hover .icon-hover-bg {
            background-color: rgba(var(--dx-danger-rgb),.08)
        }

.card-hover-danger {
    --dx-link-color-rgb: var(--dx-danger-rgb)
}

    .card-hover-danger .icon-bg {
        background-color: var(--dx-danger-bg-subtle);
        color: var(--dx-danger)
    }

.card-border-light {
    --dx-card-border-color: var(--dx-light-border-subtle);
    box-shadow: 0 10px 15px -3px var(--dx-light-bg-subtle),0 4px 6px -4px var(--dx-light-bg-subtle);
    --dx-link-color-rgb: var(--dx-light-rgb);
    --prefixlink-hover-color-rgb: var(--dx-light-rgb)
}

.card-light {
    --dx-link-color-rgb: var(--dx-light-rgb)
}

    .card-light .icon-bg {
        background-color: var(--dx-light);
        color: #020617
    }

    .card-light:hover {
        --dx-card-border-color: var(--dx-light-border-subtle);
        color: #020617;
        --dx-link-color-rgb: #020617
    }

        .card-light:hover .icon-bg {
            background-color: hsla(0,0%,100%,.144)
        }

        .card-light:hover .icon-hover-bg {
            background-color: var(--dx-light)
        }

.card-sub-light {
    --dx-link-color-rgb: var(--dx-light-rgb)
}

    .card-sub-light .icon-bg {
        background-color: var(--dx-light-bg-subtle);
        color: var(--dx-light)
    }

    .card-sub-light:hover {
        color: var(--dx-light);
        --dx-card-border-color: var(--dx-light-border-subtle)
    }

        .card-sub-light:hover .icon-hover-bg {
            background-color: rgba(var(--dx-light-rgb),.08)
        }

.card-hover-light {
    --dx-link-color-rgb: var(--dx-light-rgb)
}

    .card-hover-light .icon-bg {
        background-color: var(--dx-light-bg-subtle);
        color: var(--dx-light)
    }

.card-border-dark {
    --dx-card-border-color: var(--dx-dark-border-subtle);
    box-shadow: 0 10px 15px -3px var(--dx-dark-bg-subtle),0 4px 6px -4px var(--dx-dark-bg-subtle);
    --dx-link-color-rgb: var(--dx-dark-rgb);
    --prefixlink-hover-color-rgb: var(--dx-dark-rgb)
}

.card-dark {
    --dx-link-color-rgb: var(--dx-dark-rgb)
}

    .card-dark .icon-bg {
        background-color: var(--dx-dark);
        color: #fff
    }

    .card-dark:hover {
        --dx-card-border-color: var(--dx-dark-border-subtle);
        color: #fff;
        --dx-link-color-rgb: #fff
    }

        .card-dark:hover .icon-bg {
            background-color: hsla(0,0%,100%,.144)
        }

        .card-dark:hover .icon-hover-bg {
            background-color: var(--dx-dark)
        }

.card-sub-dark {
    --dx-link-color-rgb: var(--dx-dark-rgb)
}

    .card-sub-dark .icon-bg {
        background-color: var(--dx-dark-bg-subtle);
        color: var(--dx-dark)
    }

    .card-sub-dark:hover {
        color: var(--dx-dark);
        --dx-card-border-color: var(--dx-dark-border-subtle)
    }

        .card-sub-dark:hover .icon-hover-bg {
            background-color: rgba(var(--dx-dark-rgb),.08)
        }

.card-hover-dark {
    --dx-link-color-rgb: var(--dx-dark-rgb)
}

    .card-hover-dark .icon-bg {
        background-color: var(--dx-dark-bg-subtle);
        color: var(--dx-dark)
    }

.card-border-pink {
    --dx-card-border-color: var(--dx-pink-border-subtle);
    box-shadow: 0 10px 15px -3px var(--dx-pink-bg-subtle),0 4px 6px -4px var(--dx-pink-bg-subtle);
    --dx-link-color-rgb: var(--dx-pink-rgb);
    --prefixlink-hover-color-rgb: var(--dx-pink-rgb)
}

.card-pink {
    --dx-link-color-rgb: var(--dx-pink-rgb)
}

    .card-pink .icon-bg {
        background-color: var(--dx-pink);
        color: #fff
    }

    .card-pink:hover {
        --dx-card-border-color: var(--dx-pink-border-subtle);
        color: #fff;
        --dx-link-color-rgb: #fff
    }

        .card-pink:hover .icon-bg {
            background-color: hsla(0,0%,100%,.144)
        }

        .card-pink:hover .icon-hover-bg {
            background-color: var(--dx-pink)
        }

.card-sub-pink {
    --dx-link-color-rgb: var(--dx-pink-rgb)
}

    .card-sub-pink .icon-bg {
        background-color: var(--dx-pink-bg-subtle);
        color: var(--dx-pink)
    }

    .card-sub-pink:hover {
        color: var(--dx-pink);
        --dx-card-border-color: var(--dx-pink-border-subtle)
    }

        .card-sub-pink:hover .icon-hover-bg {
            background-color: rgba(var(--dx-pink-rgb),.08)
        }

.card-hover-pink {
    --dx-link-color-rgb: var(--dx-pink-rgb)
}

    .card-hover-pink .icon-bg {
        background-color: var(--dx-pink-bg-subtle);
        color: var(--dx-pink)
    }

.card-border-orange {
    --dx-card-border-color: var(--dx-orange-border-subtle);
    box-shadow: 0 10px 15px -3px var(--dx-orange-bg-subtle),0 4px 6px -4px var(--dx-orange-bg-subtle);
    --dx-link-color-rgb: var(--dx-orange-rgb);
    --prefixlink-hover-color-rgb: var(--dx-orange-rgb)
}

.card-orange {
    --dx-link-color-rgb: var(--dx-orange-rgb)
}

    .card-orange .icon-bg {
        background-color: var(--dx-orange);
        color: #fff
    }

    .card-orange:hover {
        --dx-card-border-color: var(--dx-orange-border-subtle);
        color: #fff;
        --dx-link-color-rgb: #fff
    }

        .card-orange:hover .icon-bg {
            background-color: hsla(0,0%,100%,.144)
        }

        .card-orange:hover .icon-hover-bg {
            background-color: var(--dx-orange)
        }

.card-sub-orange {
    --dx-link-color-rgb: var(--dx-orange-rgb)
}

    .card-sub-orange .icon-bg {
        background-color: var(--dx-orange-bg-subtle);
        color: var(--dx-orange)
    }

    .card-sub-orange:hover {
        color: var(--dx-orange);
        --dx-card-border-color: var(--dx-orange-border-subtle)
    }

        .card-sub-orange:hover .icon-hover-bg {
            background-color: rgba(var(--dx-orange-rgb),.08)
        }

.card-hover-orange {
    --dx-link-color-rgb: var(--dx-orange-rgb)
}

    .card-hover-orange .icon-bg {
        background-color: var(--dx-orange-bg-subtle);
        color: var(--dx-orange)
    }

.card-border-indigo {
    --dx-card-border-color: var(--dx-indigo-border-subtle);
    box-shadow: 0 10px 15px -3px var(--dx-indigo-bg-subtle),0 4px 6px -4px var(--dx-indigo-bg-subtle);
    --dx-link-color-rgb: var(--dx-indigo-rgb);
    --prefixlink-hover-color-rgb: var(--dx-indigo-rgb)
}

.card-indigo {
    --dx-link-color-rgb: var(--dx-indigo-rgb)
}

    .card-indigo .icon-bg {
        background-color: var(--dx-indigo);
        color: #fff
    }

    .card-indigo:hover {
        --dx-card-border-color: var(--dx-indigo-border-subtle);
        color: #fff;
        --dx-link-color-rgb: #fff
    }

        .card-indigo:hover .icon-bg {
            background-color: hsla(0,0%,100%,.144)
        }

        .card-indigo:hover .icon-hover-bg {
            background-color: var(--dx-indigo)
        }

.card-sub-indigo {
    --dx-link-color-rgb: var(--dx-indigo-rgb)
}

    .card-sub-indigo .icon-bg {
        background-color: var(--dx-indigo-bg-subtle);
        color: var(--dx-indigo)
    }

    .card-sub-indigo:hover {
        color: var(--dx-indigo);
        --dx-card-border-color: var(--dx-indigo-border-subtle)
    }

        .card-sub-indigo:hover .icon-hover-bg {
            background-color: rgba(var(--dx-indigo-rgb),.08)
        }

.card-hover-indigo {
    --dx-link-color-rgb: var(--dx-indigo-rgb)
}

    .card-hover-indigo .icon-bg {
        background-color: var(--dx-indigo-bg-subtle);
        color: var(--dx-indigo)
    }

.dropdown-primary .dropdown-item:hover {
    background-color: rgba(var(--dx-primary-rgb),.1);
    color: var(--dx-primary)
}

.dropdown-secondary .dropdown-item:hover {
    background-color: rgba(var(--dx-secondary-rgb),.1);
    color: var(--dx-secondary)
}

.dropdown-success .dropdown-item:hover {
    background-color: rgba(var(--dx-success-rgb),.1);
    color: var(--dx-success)
}

.dropdown-info .dropdown-item:hover {
    background-color: rgba(var(--dx-info-rgb),.1);
    color: var(--dx-info)
}

.dropdown-warning .dropdown-item:hover {
    background-color: rgba(var(--dx-warning-rgb),.1);
    color: var(--dx-warning)
}

.dropdown-danger .dropdown-item:hover {
    background-color: rgba(var(--dx-danger-rgb),.1);
    color: var(--dx-danger)
}

.dropdown-light .dropdown-item:hover {
    background-color: rgba(var(--dx-light-rgb),.1);
    color: var(--dx-light)
}

.dropdown-dark .dropdown-item:hover {
    background-color: rgba(var(--dx-dark-rgb),.1);
    color: var(--dx-dark)
}

.dropdown-pink .dropdown-item:hover {
    background-color: rgba(var(--dx-pink-rgb),.1);
    color: var(--dx-pink)
}

.dropdown-orange .dropdown-item:hover {
    background-color: rgba(var(--dx-orange-rgb),.1);
    color: var(--dx-orange)
}

.dropdown-indigo .dropdown-item:hover {
    background-color: rgba(var(--dx-indigo-rgb),.1);
    color: var(--dx-indigo)
}

.nav-primary {
    --dx-nav-pills-link-active-bg: var(--dx-primary);
    --dx-nav-link-hover-color: var(--dx-primary);
    --dx-nav-underline-link-active-color: var(--dx-primary);
    --dx-nav-pills-link-active-color: #fff
}

.nav-secondary {
    --dx-nav-pills-link-active-bg: var(--dx-secondary);
    --dx-nav-link-hover-color: var(--dx-secondary);
    --dx-nav-underline-link-active-color: var(--dx-secondary);
    --dx-nav-pills-link-active-color: #fff
}

.nav-success {
    --dx-nav-pills-link-active-bg: var(--dx-success);
    --dx-nav-link-hover-color: var(--dx-success);
    --dx-nav-underline-link-active-color: var(--dx-success);
    --dx-nav-pills-link-active-color: #fff
}

.nav-info {
    --dx-nav-pills-link-active-bg: var(--dx-info);
    --dx-nav-link-hover-color: var(--dx-info);
    --dx-nav-underline-link-active-color: var(--dx-info);
    --dx-nav-pills-link-active-color: #fff
}

.nav-warning {
    --dx-nav-pills-link-active-bg: var(--dx-warning);
    --dx-nav-link-hover-color: var(--dx-warning);
    --dx-nav-underline-link-active-color: var(--dx-warning);
    --dx-nav-pills-link-active-color: #fff
}

.nav-danger {
    --dx-nav-pills-link-active-bg: var(--dx-danger);
    --dx-nav-link-hover-color: var(--dx-danger);
    --dx-nav-underline-link-active-color: var(--dx-danger);
    --dx-nav-pills-link-active-color: #fff
}

.nav-light {
    --dx-nav-pills-link-active-bg: var(--dx-light);
    --dx-nav-link-hover-color: var(--dx-light);
    --dx-nav-underline-link-active-color: var(--dx-light);
    --dx-nav-pills-link-active-color: #fff;
    --dx-nav-pills-link-active-color: var(--dx-body-color);
    --dx-nav-link-hover-color: var(--dx-body-color)
}

.nav-dark {
    --dx-nav-pills-link-active-bg: var(--dx-dark);
    --dx-nav-link-hover-color: var(--dx-dark);
    --dx-nav-underline-link-active-color: var(--dx-dark);
    --dx-nav-pills-link-active-color: #fff
}

.nav-pink {
    --dx-nav-pills-link-active-bg: var(--dx-pink);
    --dx-nav-link-hover-color: var(--dx-pink);
    --dx-nav-underline-link-active-color: var(--dx-pink);
    --dx-nav-pills-link-active-color: #fff
}

.nav-orange {
    --dx-nav-pills-link-active-bg: var(--dx-orange);
    --dx-nav-link-hover-color: var(--dx-orange);
    --dx-nav-underline-link-active-color: var(--dx-orange);
    --dx-nav-pills-link-active-color: #fff
}

.nav-indigo {
    --dx-nav-pills-link-active-bg: var(--dx-indigo);
    --dx-nav-link-hover-color: var(--dx-indigo);
    --dx-nav-underline-link-active-color: var(--dx-indigo);
    --dx-nav-pills-link-active-color: #fff
}

.pagination-primary {
    --dx-pagination-hover-color: var(--dx-primary);
    --dx-pagination-active-bg: var(--dx-primary);
    --dx-pagination-active-border-color: var(--dx-primary);
    --dx-pagination-focus-color: var(--dx-primary)
}

.pagination-solid-primary .page-link {
    background-color: var(--dx-primary)
}

.pagination-secondary {
    --dx-pagination-hover-color: var(--dx-secondary);
    --dx-pagination-active-bg: var(--dx-secondary);
    --dx-pagination-active-border-color: var(--dx-secondary);
    --dx-pagination-focus-color: var(--dx-secondary)
}

.pagination-solid-secondary .page-link {
    background-color: var(--dx-secondary)
}

.pagination-success {
    --dx-pagination-hover-color: var(--dx-success);
    --dx-pagination-active-bg: var(--dx-success);
    --dx-pagination-active-border-color: var(--dx-success);
    --dx-pagination-focus-color: var(--dx-success)
}

.pagination-solid-success .page-link {
    background-color: var(--dx-success)
}

.pagination-info {
    --dx-pagination-hover-color: var(--dx-info);
    --dx-pagination-active-bg: var(--dx-info);
    --dx-pagination-active-border-color: var(--dx-info);
    --dx-pagination-focus-color: var(--dx-info)
}

.pagination-solid-info .page-link {
    background-color: var(--dx-info)
}

.pagination-warning {
    --dx-pagination-hover-color: var(--dx-warning);
    --dx-pagination-active-bg: var(--dx-warning);
    --dx-pagination-active-border-color: var(--dx-warning);
    --dx-pagination-focus-color: var(--dx-warning)
}

.pagination-solid-warning .page-link {
    background-color: var(--dx-warning)
}

.pagination-danger {
    --dx-pagination-hover-color: var(--dx-danger);
    --dx-pagination-active-bg: var(--dx-danger);
    --dx-pagination-active-border-color: var(--dx-danger);
    --dx-pagination-focus-color: var(--dx-danger)
}

.pagination-solid-danger .page-link {
    background-color: var(--dx-danger)
}

.pagination-light {
    --dx-pagination-hover-color: var(--dx-light);
    --dx-pagination-active-bg: var(--dx-light);
    --dx-pagination-active-border-color: var(--dx-light);
    --dx-pagination-focus-color: var(--dx-light)
}

.pagination-solid-light .page-link {
    background-color: var(--dx-light)
}

.pagination-dark {
    --dx-pagination-hover-color: var(--dx-dark);
    --dx-pagination-active-bg: var(--dx-dark);
    --dx-pagination-active-border-color: var(--dx-dark);
    --dx-pagination-focus-color: var(--dx-dark)
}

.pagination-solid-dark .page-link {
    background-color: var(--dx-dark)
}

.pagination-pink {
    --dx-pagination-hover-color: var(--dx-pink);
    --dx-pagination-active-bg: var(--dx-pink);
    --dx-pagination-active-border-color: var(--dx-pink);
    --dx-pagination-focus-color: var(--dx-pink)
}

.pagination-solid-pink .page-link {
    background-color: var(--dx-pink)
}

.pagination-orange {
    --dx-pagination-hover-color: var(--dx-orange);
    --dx-pagination-active-bg: var(--dx-orange);
    --dx-pagination-active-border-color: var(--dx-orange);
    --dx-pagination-focus-color: var(--dx-orange)
}

.pagination-solid-orange .page-link {
    background-color: var(--dx-orange)
}

.pagination-indigo {
    --dx-pagination-hover-color: var(--dx-indigo);
    --dx-pagination-active-bg: var(--dx-indigo);
    --dx-pagination-active-border-color: var(--dx-indigo);
    --dx-pagination-focus-color: var(--dx-indigo)
}

.pagination-solid-indigo .page-link {
    background-color: var(--dx-indigo)
}

.tooltip-primary {
    --dx-tooltip-bg: var(--dx-primary);
    --dx-tooltip-color: var(--dx-white)
}

.tooltip-secondary {
    --dx-tooltip-bg: var(--dx-secondary);
    --dx-tooltip-color: var(--dx-white)
}

.tooltip-success {
    --dx-tooltip-bg: var(--dx-success);
    --dx-tooltip-color: var(--dx-white)
}

.tooltip-info {
    --dx-tooltip-bg: var(--dx-info);
    --dx-tooltip-color: var(--dx-white)
}

.tooltip-warning {
    --dx-tooltip-bg: var(--dx-warning);
    --dx-tooltip-color: var(--dx-white)
}

.tooltip-danger {
    --dx-tooltip-bg: var(--dx-danger);
    --dx-tooltip-color: var(--dx-white)
}

.tooltip-light {
    --dx-tooltip-bg: var(--dx-light);
    --dx-tooltip-color: var(--dx-white);
    --dx-tooltip-color: #000
}

.tooltip-dark {
    --dx-tooltip-bg: var(--dx-dark);
    --dx-tooltip-color: var(--dx-white)
}

.tooltip-pink {
    --dx-tooltip-bg: var(--dx-pink);
    --dx-tooltip-color: var(--dx-white)
}

.tooltip-orange {
    --dx-tooltip-bg: var(--dx-orange);
    --dx-tooltip-color: var(--dx-white)
}

.tooltip-indigo {
    --dx-tooltip-bg: var(--dx-indigo);
    --dx-tooltip-color: var(--dx-white)
}

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

    .link-primary:hover {
        color: var(--dx-primary-text-emphasis) !important
    }

.link-custom-primary {
    color: var(--dx-secondary-color) !important
}

    .link-custom-primary:hover {
        color: var(--dx-primary) !important
    }

.link-secondary {
    color: var(--dx-secondary) !important
}

    .link-secondary:hover {
        color: var(--dx-secondary-text-emphasis) !important
    }

.link-custom-secondary {
    color: var(--dx-secondary-color) !important
}

    .link-custom-secondary:hover {
        color: var(--dx-secondary) !important
    }

.link-success {
    color: var(--dx-success) !important
}

    .link-success:hover {
        color: var(--dx-success-text-emphasis) !important
    }

.link-custom-success {
    color: var(--dx-secondary-color) !important
}

    .link-custom-success:hover {
        color: var(--dx-success) !important
    }

.link-info {
    color: var(--dx-info) !important
}

    .link-info:hover {
        color: var(--dx-info-text-emphasis) !important
    }

.link-custom-info {
    color: var(--dx-secondary-color) !important
}

    .link-custom-info:hover {
        color: var(--dx-info) !important
    }

.link-warning {
    color: var(--dx-warning) !important
}

    .link-warning:hover {
        color: var(--dx-warning-text-emphasis) !important
    }

.link-custom-warning {
    color: var(--dx-secondary-color) !important
}

    .link-custom-warning:hover {
        color: var(--dx-warning) !important
    }

.link-danger {
    color: var(--dx-danger) !important
}

    .link-danger:hover {
        color: var(--dx-danger-text-emphasis) !important
    }

.link-custom-danger {
    color: var(--dx-secondary-color) !important
}

    .link-custom-danger:hover {
        color: var(--dx-danger) !important
    }

.link-light {
    color: var(--dx-light) !important
}

    .link-light:hover {
        color: var(--dx-light-text-emphasis) !important
    }

.link-custom-light {
    color: var(--dx-secondary-color) !important
}

    .link-custom-light:hover {
        color: var(--dx-light) !important
    }

.link-dark {
    color: var(--dx-dark) !important
}

    .link-dark:hover {
        color: var(--dx-dark-text-emphasis) !important
    }

.link-custom-dark {
    color: var(--dx-secondary-color) !important
}

    .link-custom-dark:hover {
        color: var(--dx-dark) !important
    }

.link-pink {
    color: var(--dx-pink) !important
}

    .link-pink:hover {
        color: var(--dx-pink-text-emphasis) !important
    }

.link-custom-pink {
    color: var(--dx-secondary-color) !important
}

    .link-custom-pink:hover {
        color: var(--dx-pink) !important
    }

.link-orange {
    color: var(--dx-orange) !important
}

    .link-orange:hover {
        color: var(--dx-orange-text-emphasis) !important
    }

.link-custom-orange {
    color: var(--dx-secondary-color) !important
}

    .link-custom-orange:hover {
        color: var(--dx-orange) !important
    }

.link-indigo {
    color: var(--dx-indigo) !important
}

    .link-indigo:hover {
        color: var(--dx-indigo-text-emphasis) !important
    }

.link-custom-indigo {
    color: var(--dx-secondary-color) !important
}

    .link-custom-indigo:hover {
        color: var(--dx-indigo) !important
    }

.switch-outline-primary input:checked + label:after, .switch-soft-primary input:checked + label:after {
    background-color: var(--dx-primary)
}

.switch-light-primary input:checked + label {
    background: var(--dx-primary-bg-subtle);
    border: 1px solid var(--dx-primary-bg-subtle)
}

    .switch-light-primary input:checked + label:after {
        background-color: var(--dx-primary)
    }

.switch-solid-primary input:checked + label {
    background: var(--dx-primary);
    border: 1px solid var(--dx-primary)
}

.switch-effect-primary input:checked + label:after {
    background-color: var(--dx-primary)
}

.switch-outline-secondary input:checked + label:after, .switch-soft-secondary input:checked + label:after {
    background-color: var(--dx-secondary)
}

.switch-light-secondary input:checked + label {
    background: var(--dx-secondary-bg-subtle);
    border: 1px solid var(--dx-secondary-bg-subtle)
}

    .switch-light-secondary input:checked + label:after {
        background-color: var(--dx-secondary)
    }

.switch-solid-secondary input:checked + label {
    background: var(--dx-secondary);
    border: 1px solid var(--dx-secondary)
}

.switch-effect-secondary input:checked + label:after {
    background-color: var(--dx-secondary)
}

.switch-outline-success input:checked + label:after, .switch-soft-success input:checked + label:after {
    background-color: var(--dx-success)
}

.switch-light-success input:checked + label {
    background: var(--dx-success-bg-subtle);
    border: 1px solid var(--dx-success-bg-subtle)
}

    .switch-light-success input:checked + label:after {
        background-color: var(--dx-success)
    }

.switch-solid-success input:checked + label {
    background: var(--dx-success);
    border: 1px solid var(--dx-success)
}

.switch-effect-success input:checked + label:after {
    background-color: var(--dx-success)
}

.switch-outline-info input:checked + label:after, .switch-soft-info input:checked + label:after {
    background-color: var(--dx-info)
}

.switch-light-info input:checked + label {
    background: var(--dx-info-bg-subtle);
    border: 1px solid var(--dx-info-bg-subtle)
}

    .switch-light-info input:checked + label:after {
        background-color: var(--dx-info)
    }

.switch-solid-info input:checked + label {
    background: var(--dx-info);
    border: 1px solid var(--dx-info)
}

.switch-effect-info input:checked + label:after {
    background-color: var(--dx-info)
}

.switch-outline-warning input:checked + label:after, .switch-soft-warning input:checked + label:after {
    background-color: var(--dx-warning)
}

.switch-light-warning input:checked + label {
    background: var(--dx-warning-bg-subtle);
    border: 1px solid var(--dx-warning-bg-subtle)
}

    .switch-light-warning input:checked + label:after {
        background-color: var(--dx-warning)
    }

.switch-solid-warning input:checked + label {
    background: var(--dx-warning);
    border: 1px solid var(--dx-warning)
}

.switch-effect-warning input:checked + label:after {
    background-color: var(--dx-warning)
}

.switch-outline-danger input:checked + label:after, .switch-soft-danger input:checked + label:after {
    background-color: var(--dx-danger)
}

.switch-light-danger input:checked + label {
    background: var(--dx-danger-bg-subtle);
    border: 1px solid var(--dx-danger-bg-subtle)
}

    .switch-light-danger input:checked + label:after {
        background-color: var(--dx-danger)
    }

.switch-solid-danger input:checked + label {
    background: var(--dx-danger);
    border: 1px solid var(--dx-danger)
}

.switch-effect-danger input:checked + label:after {
    background-color: var(--dx-danger)
}

.switch-outline-light input:checked + label:after, .switch-soft-light input:checked + label:after {
    background-color: var(--dx-light)
}

.switch-light-light input:checked + label {
    background: var(--dx-light-bg-subtle);
    border: 1px solid var(--dx-light-bg-subtle)
}

    .switch-light-light input:checked + label:after {
        background-color: var(--dx-light)
    }

.switch-solid-light input:checked + label {
    background: var(--dx-light);
    border: 1px solid var(--dx-light)
}

.switch-effect-light input:checked + label:after {
    background-color: var(--dx-light)
}

.switch-outline-dark input:checked + label:after, .switch-soft-dark input:checked + label:after {
    background-color: var(--dx-dark)
}

.switch-light-dark input:checked + label {
    background: var(--dx-dark-bg-subtle);
    border: 1px solid var(--dx-dark-bg-subtle)
}

    .switch-light-dark input:checked + label:after {
        background-color: var(--dx-dark)
    }

.switch-solid-dark input:checked + label {
    background: var(--dx-dark);
    border: 1px solid var(--dx-dark)
}

.switch-effect-dark input:checked + label:after {
    background-color: var(--dx-dark)
}

.switch-outline-pink input:checked + label:after, .switch-soft-pink input:checked + label:after {
    background-color: var(--dx-pink)
}

.switch-light-pink input:checked + label {
    background: var(--dx-pink-bg-subtle);
    border: 1px solid var(--dx-pink-bg-subtle)
}

    .switch-light-pink input:checked + label:after {
        background-color: var(--dx-pink)
    }

.switch-solid-pink input:checked + label {
    background: var(--dx-pink);
    border: 1px solid var(--dx-pink)
}

.switch-effect-pink input:checked + label:after {
    background-color: var(--dx-pink)
}

.switch-outline-orange input:checked + label:after, .switch-soft-orange input:checked + label:after {
    background-color: var(--dx-orange)
}

.switch-light-orange input:checked + label {
    background: var(--dx-orange-bg-subtle);
    border: 1px solid var(--dx-orange-bg-subtle)
}

    .switch-light-orange input:checked + label:after {
        background-color: var(--dx-orange)
    }

.switch-solid-orange input:checked + label {
    background: var(--dx-orange);
    border: 1px solid var(--dx-orange)
}

.switch-effect-orange input:checked + label:after {
    background-color: var(--dx-orange)
}

.switch-outline-indigo input:checked + label:after, .switch-soft-indigo input:checked + label:after {
    background-color: var(--dx-indigo)
}

.switch-light-indigo input:checked + label {
    background: var(--dx-indigo-bg-subtle);
    border: 1px solid var(--dx-indigo-bg-subtle)
}

    .switch-light-indigo input:checked + label:after {
        background-color: var(--dx-indigo)
    }

.switch-solid-indigo input:checked + label {
    background: var(--dx-indigo);
    border: 1px solid var(--dx-indigo)
}

.switch-effect-indigo input:checked + label:after {
    background-color: var(--dx-indigo)
}

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

.check-soft-primary .form-check-input {
    --dx-border-color: rgba(var(--dx-primary-rgb),.2);
    --dx-form-check-bg: var(--dx-primary-bg-subtle)
}

    .check-soft-primary .form-check-input:checked, .radio-primary .form-check-input:checked {
        background-color: var(--dx-primary);
        border-color: var(--dx-primary)
    }

.radio-soft-primary .form-check-input {
    --dx-border-color: rgba(var(--dx-primary-rgb),.2);
    --dx-form-check-bg: var(--dx-primary-bg-subtle)
}

    .radio-soft-primary .form-check-input:focus {
        box-shadow: none
    }

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

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

.check-soft-secondary .form-check-input {
    --dx-border-color: rgba(var(--dx-secondary-rgb),.2);
    --dx-form-check-bg: var(--dx-secondary-bg-subtle)
}

    .check-soft-secondary .form-check-input:checked, .radio-secondary .form-check-input:checked {
        background-color: var(--dx-secondary);
        border-color: var(--dx-secondary)
    }

.radio-soft-secondary .form-check-input {
    --dx-border-color: rgba(var(--dx-secondary-rgb),.2);
    --dx-form-check-bg: var(--dx-secondary-bg-subtle)
}

    .radio-soft-secondary .form-check-input:focus {
        box-shadow: none
    }

    .radio-soft-secondary .form-check-input:checked {
        background-color: var(--dx-secondary);
        border-color: var(--dx-secondary)
    }

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

.check-soft-success .form-check-input {
    --dx-border-color: rgba(var(--dx-success-rgb),.2);
    --dx-form-check-bg: var(--dx-success-bg-subtle)
}

    .check-soft-success .form-check-input:checked, .radio-success .form-check-input:checked {
        background-color: var(--dx-success);
        border-color: var(--dx-success)
    }

.radio-soft-success .form-check-input {
    --dx-border-color: rgba(var(--dx-success-rgb),.2);
    --dx-form-check-bg: var(--dx-success-bg-subtle)
}

    .radio-soft-success .form-check-input:focus {
        box-shadow: none
    }

    .radio-soft-success .form-check-input:checked {
        background-color: var(--dx-success);
        border-color: var(--dx-success)
    }

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

.check-soft-info .form-check-input {
    --dx-border-color: rgba(var(--dx-info-rgb),.2);
    --dx-form-check-bg: var(--dx-info-bg-subtle)
}

    .check-soft-info .form-check-input:checked, .radio-info .form-check-input:checked {
        background-color: var(--dx-info);
        border-color: var(--dx-info)
    }

.radio-soft-info .form-check-input {
    --dx-border-color: rgba(var(--dx-info-rgb),.2);
    --dx-form-check-bg: var(--dx-info-bg-subtle)
}

    .radio-soft-info .form-check-input:focus {
        box-shadow: none
    }

    .radio-soft-info .form-check-input:checked {
        background-color: var(--dx-info);
        border-color: var(--dx-info)
    }

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

.check-soft-warning .form-check-input {
    --dx-border-color: rgba(var(--dx-warning-rgb),.2);
    --dx-form-check-bg: var(--dx-warning-bg-subtle)
}

    .check-soft-warning .form-check-input:checked, .radio-warning .form-check-input:checked {
        background-color: var(--dx-warning);
        border-color: var(--dx-warning)
    }

.radio-soft-warning .form-check-input {
    --dx-border-color: rgba(var(--dx-warning-rgb),.2);
    --dx-form-check-bg: var(--dx-warning-bg-subtle)
}

    .radio-soft-warning .form-check-input:focus {
        box-shadow: none
    }

    .radio-soft-warning .form-check-input:checked {
        background-color: var(--dx-warning);
        border-color: var(--dx-warning)
    }

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

.check-soft-danger .form-check-input {
    --dx-border-color: rgba(var(--dx-danger-rgb),.2);
    --dx-form-check-bg: var(--dx-danger-bg-subtle)
}

    .check-soft-danger .form-check-input:checked, .radio-danger .form-check-input:checked {
        background-color: var(--dx-danger);
        border-color: var(--dx-danger)
    }

.radio-soft-danger .form-check-input {
    --dx-border-color: rgba(var(--dx-danger-rgb),.2);
    --dx-form-check-bg: var(--dx-danger-bg-subtle)
}

    .radio-soft-danger .form-check-input:focus {
        box-shadow: none
    }

    .radio-soft-danger .form-check-input:checked {
        background-color: var(--dx-danger);
        border-color: var(--dx-danger)
    }

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

.check-soft-light .form-check-input {
    --dx-border-color: rgba(var(--dx-light-rgb),.2);
    --dx-form-check-bg: var(--dx-light-bg-subtle)
}

    .check-soft-light .form-check-input:checked, .radio-light .form-check-input:checked {
        background-color: var(--dx-light);
        border-color: var(--dx-light)
    }

.radio-soft-light .form-check-input {
    --dx-border-color: rgba(var(--dx-light-rgb),.2);
    --dx-form-check-bg: var(--dx-light-bg-subtle)
}

    .radio-soft-light .form-check-input:focus {
        box-shadow: none
    }

    .radio-soft-light .form-check-input:checked {
        background-color: var(--dx-light);
        border-color: var(--dx-light)
    }

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

.check-soft-dark .form-check-input {
    --dx-border-color: rgba(var(--dx-dark-rgb),.2);
    --dx-form-check-bg: var(--dx-dark-bg-subtle)
}

    .check-soft-dark .form-check-input:checked, .radio-dark .form-check-input:checked {
        background-color: var(--dx-dark);
        border-color: var(--dx-dark)
    }

.radio-soft-dark .form-check-input {
    --dx-border-color: rgba(var(--dx-dark-rgb),.2);
    --dx-form-check-bg: var(--dx-dark-bg-subtle)
}

    .radio-soft-dark .form-check-input:focus {
        box-shadow: none
    }

    .radio-soft-dark .form-check-input:checked {
        background-color: var(--dx-dark);
        border-color: var(--dx-dark)
    }

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

.check-soft-pink .form-check-input {
    --dx-border-color: rgba(var(--dx-pink-rgb),.2);
    --dx-form-check-bg: var(--dx-pink-bg-subtle)
}

    .check-soft-pink .form-check-input:checked, .radio-pink .form-check-input:checked {
        background-color: var(--dx-pink);
        border-color: var(--dx-pink)
    }

.radio-soft-pink .form-check-input {
    --dx-border-color: rgba(var(--dx-pink-rgb),.2);
    --dx-form-check-bg: var(--dx-pink-bg-subtle)
}

    .radio-soft-pink .form-check-input:focus {
        box-shadow: none
    }

    .radio-soft-pink .form-check-input:checked {
        background-color: var(--dx-pink);
        border-color: var(--dx-pink)
    }

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

.check-soft-orange .form-check-input {
    --dx-border-color: rgba(var(--dx-orange-rgb),.2);
    --dx-form-check-bg: var(--dx-orange-bg-subtle)
}

    .check-soft-orange .form-check-input:checked, .radio-orange .form-check-input:checked {
        background-color: var(--dx-orange);
        border-color: var(--dx-orange)
    }

.radio-soft-orange .form-check-input {
    --dx-border-color: rgba(var(--dx-orange-rgb),.2);
    --dx-form-check-bg: var(--dx-orange-bg-subtle)
}

    .radio-soft-orange .form-check-input:focus {
        box-shadow: none
    }

    .radio-soft-orange .form-check-input:checked {
        background-color: var(--dx-orange);
        border-color: var(--dx-orange)
    }

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

.check-soft-indigo .form-check-input {
    --dx-border-color: rgba(var(--dx-indigo-rgb),.2);
    --dx-form-check-bg: var(--dx-indigo-bg-subtle)
}

    .check-soft-indigo .form-check-input:checked, .radio-indigo .form-check-input:checked {
        background-color: var(--dx-indigo);
        border-color: var(--dx-indigo)
    }

.radio-soft-indigo .form-check-input {
    --dx-border-color: rgba(var(--dx-indigo-rgb),.2);
    --dx-form-check-bg: var(--dx-indigo-bg-subtle)
}

    .radio-soft-indigo .form-check-input:focus {
        box-shadow: none
    }

    .radio-soft-indigo .form-check-input:checked {
        background-color: var(--dx-indigo);
        border-color: var(--dx-indigo)
    }

.input-spin-primary button:hover svg {
    color: var(--dx-primary)
}

.input-solid-primary .input-spin-minus, .input-solid-primary .input-spin-plus {
    background-color: var(--dx-primary) !important;
    color: #fff
}

.input-spin-secondary button:hover svg {
    color: var(--dx-secondary)
}

.input-solid-secondary .input-spin-minus, .input-solid-secondary .input-spin-plus {
    background-color: var(--dx-secondary) !important;
    color: #fff
}

.input-spin-success button:hover svg {
    color: var(--dx-success)
}

.input-solid-success .input-spin-minus, .input-solid-success .input-spin-plus {
    background-color: var(--dx-success) !important;
    color: #fff
}

.input-spin-info button:hover svg {
    color: var(--dx-info)
}

.input-solid-info .input-spin-minus, .input-solid-info .input-spin-plus {
    background-color: var(--dx-info) !important;
    color: #fff
}

.input-spin-warning button:hover svg {
    color: var(--dx-warning)
}

.input-solid-warning .input-spin-minus, .input-solid-warning .input-spin-plus {
    background-color: var(--dx-warning) !important;
    color: #fff
}

.input-spin-danger button:hover svg {
    color: var(--dx-danger)
}

.input-solid-danger .input-spin-minus, .input-solid-danger .input-spin-plus {
    background-color: var(--dx-danger) !important;
    color: #fff
}

.input-spin-light button:hover svg {
    color: var(--dx-light)
}

.input-solid-light .input-spin-minus, .input-solid-light .input-spin-plus {
    background-color: var(--dx-light) !important;
    color: #fff;
    color: var(--dx-secondary-color)
}

.input-spin-dark button:hover svg {
    color: var(--dx-dark)
}

.input-solid-dark .input-spin-minus, .input-solid-dark .input-spin-plus {
    background-color: var(--dx-dark) !important;
    color: #fff
}

.input-spin-pink button:hover svg {
    color: var(--dx-pink)
}

.input-solid-pink .input-spin-minus, .input-solid-pink .input-spin-plus {
    background-color: var(--dx-pink) !important;
    color: #fff
}

.input-spin-orange button:hover svg {
    color: var(--dx-orange)
}

.input-solid-orange .input-spin-minus, .input-solid-orange .input-spin-plus {
    background-color: var(--dx-orange) !important;
    color: #fff
}

.input-spin-indigo button:hover svg {
    color: var(--dx-indigo)
}

.input-solid-indigo .input-spin-minus, .input-solid-indigo .input-spin-plus {
    background-color: var(--dx-indigo) !important;
    color: #fff
}

.toast-primary {
    --dx-toast-bg: var(--dx-primary);
    --dx-toast-color: var(--dx-white);
    --dx-toast-header-bg: var(--dx-primary);
    --dx-toast-border-color: var(--dx-primary);
    --dx-toast-header-color: rgba(var(--dx-white-rgb),0.75);
    --dx-toast-header-border-color: rgba(var(--dx-white-rgb),0.15)
}

    .toast-primary .btn-close {
        --dx-btn-close-color: rgba(var(--dx-white-rgb),0.75)
    }

.toast-secondary {
    --dx-toast-bg: var(--dx-secondary);
    --dx-toast-color: var(--dx-white);
    --dx-toast-header-bg: var(--dx-secondary);
    --dx-toast-border-color: var(--dx-secondary);
    --dx-toast-header-color: rgba(var(--dx-white-rgb),0.75);
    --dx-toast-header-border-color: rgba(var(--dx-white-rgb),0.15)
}

    .toast-secondary .btn-close {
        --dx-btn-close-color: rgba(var(--dx-white-rgb),0.75)
    }

.toast-success {
    --dx-toast-bg: var(--dx-success);
    --dx-toast-color: var(--dx-white);
    --dx-toast-header-bg: var(--dx-success);
    --dx-toast-border-color: var(--dx-success);
    --dx-toast-header-color: rgba(var(--dx-white-rgb),0.75);
    --dx-toast-header-border-color: rgba(var(--dx-white-rgb),0.15)
}

    .toast-success .btn-close {
        --dx-btn-close-color: rgba(var(--dx-white-rgb),0.75)
    }

.toast-info {
    --dx-toast-bg: var(--dx-info);
    --dx-toast-color: var(--dx-white);
    --dx-toast-header-bg: var(--dx-info);
    --dx-toast-border-color: var(--dx-info);
    --dx-toast-header-color: rgba(var(--dx-white-rgb),0.75);
    --dx-toast-header-border-color: rgba(var(--dx-white-rgb),0.15)
}

    .toast-info .btn-close {
        --dx-btn-close-color: rgba(var(--dx-white-rgb),0.75)
    }

.toast-warning {
    --dx-toast-bg: var(--dx-warning);
    --dx-toast-color: var(--dx-white);
    --dx-toast-header-bg: var(--dx-warning);
    --dx-toast-border-color: var(--dx-warning);
    --dx-toast-header-color: rgba(var(--dx-white-rgb),0.75);
    --dx-toast-header-border-color: rgba(var(--dx-white-rgb),0.15)
}

    .toast-warning .btn-close {
        --dx-btn-close-color: rgba(var(--dx-white-rgb),0.75)
    }

.toast-danger {
    --dx-toast-bg: var(--dx-danger);
    --dx-toast-color: var(--dx-white);
    --dx-toast-header-bg: var(--dx-danger);
    --dx-toast-border-color: var(--dx-danger);
    --dx-toast-header-color: rgba(var(--dx-white-rgb),0.75);
    --dx-toast-header-border-color: rgba(var(--dx-white-rgb),0.15)
}

    .toast-danger .btn-close {
        --dx-btn-close-color: rgba(var(--dx-white-rgb),0.75)
    }

.toast-pink {
    --dx-toast-bg: var(--dx-pink);
    --dx-toast-color: var(--dx-white);
    --dx-toast-header-bg: var(--dx-pink);
    --dx-toast-border-color: var(--dx-pink);
    --dx-toast-header-color: rgba(var(--dx-white-rgb),0.75);
    --dx-toast-header-border-color: rgba(var(--dx-white-rgb),0.15)
}

    .toast-pink .btn-close {
        --dx-btn-close-color: rgba(var(--dx-white-rgb),0.75)
    }

.toast-orange {
    --dx-toast-bg: var(--dx-orange);
    --dx-toast-color: var(--dx-white);
    --dx-toast-header-bg: var(--dx-orange);
    --dx-toast-border-color: var(--dx-orange);
    --dx-toast-header-color: rgba(var(--dx-white-rgb),0.75);
    --dx-toast-header-border-color: rgba(var(--dx-white-rgb),0.15)
}

    .toast-orange .btn-close {
        --dx-btn-close-color: rgba(var(--dx-white-rgb),0.75)
    }

.toast-indigo {
    --dx-toast-bg: var(--dx-indigo);
    --dx-toast-color: var(--dx-white);
    --dx-toast-header-bg: var(--dx-indigo);
    --dx-toast-border-color: var(--dx-indigo);
    --dx-toast-header-color: rgba(var(--dx-white-rgb),0.75);
    --dx-toast-header-border-color: rgba(var(--dx-white-rgb),0.15)
}

    .toast-indigo .btn-close {
        --dx-btn-close-color: rgba(var(--dx-white-rgb),0.75)
    }

[data-theme=minimal] {
    @import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
    --dx-font-family-base: "Inter",sans-serif;
    --dx-font-family-heading: "Inter",sans-serif;
    --dx-body-font-size: 0.875rem;
    --dx-body-bg: #fff;
    --dx-secondary-bg: #fff;
    --dx-tertiary-bg: #f6f6f6;
    --dx-light: #f6f6f6;
    --dx-light-rgb: 246,246,246;
    --dx-custom-bg: var(--dx-tertiary-bg);
    --dx-custom-color: #7484a5;
    --dx-sidebar-font-size: 0.9375rem;
    --dx-sidebar-menu-title-font-size: 0.75rem;
    --dx-primary: #1e96fc;
    --dx-primary-rgb: 30,150,252;
    --dx-primary-text-emphasis: color-mix(in srgb,var(--dx-primary) 75%,#000 25%);
    --dx-primary-bg-subtle: color-mix(in srgb,var(--dx-primary) 10%,transparent);
    --dx-primary-border-subtle: color-mix(in srgb,var(--dx-primary) 30%,transparent);
    --dx-success: #00ab84;
    --dx-success-rgb: 0,171,132;
    --dx-success-text-emphasis: color-mix(in srgb,var(--dx-success) 75%,#000 25%);
    --dx-success-bg-subtle: color-mix(in srgb,var(--dx-success) 10%,transparent);
    --dx-success-border-subtle: color-mix(in srgb,var(--dx-success) 30%,transparent);
    --dx-danger: #ff7f51;
    --dx-danger-rgb: 255,127,81;
    --dx-danger-text-emphasis: color-mix(in srgb,var(--dx-danger) 75%,#000 25%);
    --dx-danger-bg-subtle: color-mix(in srgb,var(--dx-danger) 10%,transparent);
    --dx-danger-border-subtle: color-mix(in srgb,var(--dx-danger) 30%,transparent);
    --dx-secondary: #667df0;
    --dx-secondary-rgb: 102,125,240;
    --dx-secondary-text-emphasis: color-mix(in srgb,var(--dx-secondary) 75%,#000 25%);
    --dx-secondary-bg-subtle: color-mix(in srgb,var(--dx-secondary) 10%,transparent);
    --dx-secondary-border-subtle: color-mix(in srgb,var(--dx-secondary) 30%,transparent);
    --dx-info: #34bed6;
    --dx-info-rgb: 52,190,214;
    --dx-info-text-emphasis: color-mix(in srgb,var(--dx-info) 75%,#000 25%);
    --dx-info-bg-subtle: color-mix(in srgb,var(--dx-info) 10%,transparent);
    --dx-info-border-subtle: color-mix(in srgb,var(--dx-info) 30%,transparent);
    --dx-warning: #ffba08;
    --dx-warning-rgb: 255,186,8;
    --dx-warning-text-emphasis: color-mix(in srgb,var(--dx-warning) 75%,#000 25%);
    --dx-warning-bg-subtle: color-mix(in srgb,var(--dx-warning) 10%,transparent);
    --dx-warning-border-subtle: color-mix(in srgb,var(--dx-warning) 30%,transparent);
    --dx-pink: #ff4d6d;
    --dx-pink-rgb: 255,77,109;
    --dx-pink-text-emphasis: color-mix(in srgb,var(--dx-pink) 75%,#000 25%);
    --dx-pink-bg-subtle: color-mix(in srgb,var(--dx-pink) 10%,transparent);
    --dx-pink-border-subtle: color-mix(in srgb,var(--dx-pink) 30%,transparent);
    --dx-indigo: #9d4edd;
    --dx-indigo-rgb: 157,78,221;
    --dx-indigo-text-emphasis: color-mix(in srgb,var(--dx-indigo) 75%,#000 25%);
    --dx-indigo-bg-subtle: color-mix(in srgb,var(--dx-indigo) 10%,transparent);
    --dx-indigo-border-subtle: color-mix(in srgb,var(--dx-indigo) 30%,transparent);
    --dx-orange: #ff9f1c;
    --dx-orange-rgb: 255,159,28;
    --dx-orange-text-emphasis: color-mix(in srgb,var(--dx-orange) 75%,#000 25%);
    --dx-orange-bg-subtle: color-mix(in srgb,var(--dx-orange) 10%,transparent);
    --dx-orange-border-subtle: color-mix(in srgb,var(--dx-orange) 30%,transparent)
}

    [data-theme=minimal] .card {
        --dx-card-border-color: var(--dx-border-color);
        --dx-card-bg: #fff
    }

    [data-theme=minimal] .modal {
        --dx-modal-bg: var(--dx-secondary-bg)
    }

    [data-theme=minimal][data-topbar-colors=light] {
        --dx-topbar-border: var(--dx-border-color)
    }

    [data-theme=minimal][data-sidebar-colors=light] {
        --dx-sidebar-border: var(--dx-border-color)
    }

    [data-theme=minimal] .card-title {
        font-size: calc(var(--dx-body-font-size)*1.1)
    }

[data-theme=elegant] {
    @import url("https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&display=swap");
    --dx-font-family-base: "League Spartan",sans-serif;
    --dx-font-family-heading: "League Spartan",sans-serif;
    --dx-body-font-size: 0.875rem;
    --dx-body-bg: #f3f3f3;
    --dx-secondary-bg: #fff;
    --dx-tertiary-bg: #f6f6f6;
    --dx-light: #f6f6f6;
    --dx-light-rgb: 246,246,246;
    --dx-custom-bg: var(--dx-tertiary-bg);
    --dx-custom-color: #7484a5;
    --dx-spacer: 0.8125rem;
    --dx-sidebar-font-size: 0.9375rem;
    --dx-sidebar-menu-title-font-size: 0.75rem;
    --dx-primary: #96c10c;
    --dx-primary-rgb: 150,193,12;
    --dx-primary-text-emphasis: color-mix(in srgb,var(--dx-primary) 75%,#000 25%);
    --dx-primary-bg-subtle: color-mix(in srgb,var(--dx-primary) 10%,transparent);
    --dx-primary-border-subtle: color-mix(in srgb,var(--dx-primary) 30%,transparent);
    --dx-success: #00ab84;
    --dx-success-rgb: 0,171,132;
    --dx-success-text-emphasis: color-mix(in srgb,var(--dx-success) 75%,#000 25%);
    --dx-success-bg-subtle: color-mix(in srgb,var(--dx-success) 10%,transparent);
    --dx-success-border-subtle: color-mix(in srgb,var(--dx-success) 30%,transparent);
    --dx-danger: #ff7f51;
    --dx-danger-rgb: 255,127,81;
    --dx-danger-text-emphasis: color-mix(in srgb,var(--dx-danger) 75%,#000 25%);
    --dx-danger-bg-subtle: color-mix(in srgb,var(--dx-danger) 10%,transparent);
    --dx-danger-border-subtle: color-mix(in srgb,var(--dx-danger) 30%,transparent);
    --dx-secondary: #838bd7;
    --dx-secondary-rgb: 131,139,215;
    --dx-secondary-text-emphasis: color-mix(in srgb,var(--dx-secondary) 75%,#000 25%);
    --dx-secondary-bg-subtle: color-mix(in srgb,var(--dx-secondary) 10%,transparent);
    --dx-secondary-border-subtle: color-mix(in srgb,var(--dx-secondary) 30%,transparent);
    --dx-info: #34bed6;
    --dx-info-rgb: 52,190,214;
    --dx-info-text-emphasis: color-mix(in srgb,var(--dx-info) 75%,#000 25%);
    --dx-info-bg-subtle: color-mix(in srgb,var(--dx-info) 10%,transparent);
    --dx-info-border-subtle: color-mix(in srgb,var(--dx-info) 30%,transparent);
    --dx-warning: #ffba08;
    --dx-warning-rgb: 255,186,8;
    --dx-warning-text-emphasis: color-mix(in srgb,var(--dx-warning) 75%,#000 25%);
    --dx-warning-bg-subtle: color-mix(in srgb,var(--dx-warning) 10%,transparent);
    --dx-warning-border-subtle: color-mix(in srgb,var(--dx-warning) 30%,transparent);
    --dx-pink: #ff4d6d;
    --dx-pink-rgb: 255,77,109;
    --dx-pink-text-emphasis: color-mix(in srgb,var(--dx-pink) 75%,#000 25%);
    --dx-pink-bg-subtle: color-mix(in srgb,var(--dx-pink) 10%,transparent);
    --dx-pink-border-subtle: color-mix(in srgb,var(--dx-pink) 30%,transparent);
    --dx-indigo: #9d4edd;
    --dx-indigo-rgb: 157,78,221;
    --dx-indigo-text-emphasis: color-mix(in srgb,var(--dx-indigo) 75%,#000 25%);
    --dx-indigo-bg-subtle: color-mix(in srgb,var(--dx-indigo) 10%,transparent);
    --dx-indigo-border-subtle: color-mix(in srgb,var(--dx-indigo) 30%,transparent);
    --dx-orange: #ff9f1c;
    --dx-orange-rgb: 255,159,28;
    --dx-orange-text-emphasis: color-mix(in srgb,var(--dx-orange) 75%,#000 25%);
    --dx-orange-bg-subtle: color-mix(in srgb,var(--dx-orange) 10%,transparent);
    --dx-orange-border-subtle: color-mix(in srgb,var(--dx-orange) 30%,transparent)
}

    [data-theme=elegant] .card {
        --dx-card-border-width: 0;
        --dx-card-bg: #fff;
        --dx-card-box-shadow: none
    }

    [data-theme=elegant] .modal {
        --dx-modal-bg: var(--dx-secondary-bg)
    }

    [data-theme=elegant][data-topbar-colors=light] {
        --dx-topbar-border: var(--dx-border-color);
        --dx-topbar-bg: var(--dx-secondary-bg)
    }

    [data-theme=elegant][data-sidebar-colors=light] {
        --dx-sidebar-border: var(--dx-border-color);
        --dx-sidebar-bg: var(--dx-secondary-bg)
    }

    [data-theme=elegant] .card-title {
        font-size: calc(var(--dx-body-font-size)*1.1)
    }

    [data-theme=elegant] .border-elegant {
        border: 1px solid var(--dx-border-color)
    }

[data-theme=material] {
    @import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap");
    --dx-font-family-base: "Noto Sans",sans-serif;
    --dx-font-family-heading: "Noto Sans",sans-serif;
    --dx-body-font-size: 0.9375rem;
    --dx-body-bg: #f4f6f8;
    --dx-secondary-bg: #fff;
    --dx-secondary-color: #627383;
    --dx-tertiary-bg: #f4f6f8;
    --dx-custom-bg: var(--dx-tertiary-bg);
    --dx-custom-color: #7484a5;
    --dx-sidebar-font-size: 0.9375rem;
    --dx-sidebar-menu-title-font-size: 0.75rem;
    --dx-box-shadow: 0px 3px 3px -2px rgba(145,158,171,.2),0px 3px 4px 0px rgba(145,158,171,.14),0px 1px 8px 0px rgba(145,158,171,.12);
    --dx-primary: #04a872;
    --dx-primary-rgb: 4,168,114;
    --dx-primary-text-emphasis: color-mix(in srgb,var(--dx-primary) 75%,#000 25%);
    --dx-primary-bg-subtle: color-mix(in srgb,var(--dx-primary) 10%,transparent);
    --dx-primary-border-subtle: color-mix(in srgb,var(--dx-primary) 30%,transparent);
    --dx-success: #4acb63;
    --dx-success-rgb: 74,203,99;
    --dx-success-text-emphasis: color-mix(in srgb,var(--dx-success) 75%,#000 25%);
    --dx-success-bg-subtle: color-mix(in srgb,var(--dx-success) 10%,transparent);
    --dx-success-border-subtle: color-mix(in srgb,var(--dx-success) 30%,transparent);
    --dx-danger: #e7572b;
    --dx-danger-rgb: 231,87,43;
    --dx-danger-text-emphasis: color-mix(in srgb,var(--dx-danger) 75%,#000 25%);
    --dx-danger-bg-subtle: color-mix(in srgb,var(--dx-danger) 10%,transparent);
    --dx-danger-border-subtle: color-mix(in srgb,var(--dx-danger) 30%,transparent);
    --dx-secondary: #842af1;
    --dx-secondary-rgb: 132,42,241;
    --dx-secondary-text-emphasis: color-mix(in srgb,var(--dx-secondary) 75%,#000 25%);
    --dx-secondary-bg-subtle: color-mix(in srgb,var(--dx-secondary) 10%,transparent);
    --dx-secondary-border-subtle: color-mix(in srgb,var(--dx-secondary) 30%,transparent);
    --dx-info: #18a7c0;
    --dx-info-rgb: 24,167,192;
    --dx-info-text-emphasis: color-mix(in srgb,var(--dx-info) 75%,#000 25%);
    --dx-info-bg-subtle: color-mix(in srgb,var(--dx-info) 10%,transparent);
    --dx-info-border-subtle: color-mix(in srgb,var(--dx-info) 30%,transparent);
    --dx-warning: #eba721;
    --dx-warning-rgb: 235,167,33;
    --dx-warning-text-emphasis: color-mix(in srgb,var(--dx-warning) 75%,#000 25%);
    --dx-warning-bg-subtle: color-mix(in srgb,var(--dx-warning) 10%,transparent);
    --dx-warning-border-subtle: color-mix(in srgb,var(--dx-warning) 30%,transparent);
    --dx-light: #f4f6f8;
    --dx-light-rgb: 244,246,248;
    --dx-light-text-emphasis: color-mix(in srgb,var(--dx-light) 75%,#000 25%);
    --dx-light-bg-subtle: color-mix(in srgb,var(--dx-light) 10%,transparent);
    --dx-light-border-subtle: color-mix(in srgb,var(--dx-light) 30%,transparent)
}

    [data-theme=material] .card {
        --dx-card-border-width: 0;
        --dx-card-bg: #fff
    }

    [data-theme=material] .modal {
        --dx-modal-bg: var(--dx-secondary-bg)
    }

    [data-theme=material][data-topbar-colors=light] {
        --dx-topbar-border: var(--dx-border-color);
        --dx-topbar-bg: var(--dx-secondary-bg)
    }

    [data-theme=material][data-sidebar-colors=light] {
        --dx-sidebar-border: var(--dx-border-color);
        --dx-sidebar-bg: var(--dx-secondary-bg)
    }

    [data-theme=material] .card-title {
        font-size: calc(var(--dx-body-font-size)*1.1)
    }

[data-theme=sparkle] {
    --dx-font-family-base: "Zalando Sans",sans-serif;
    --dx-font-family-heading: "Zalando Sans",sans-serif;
    --dx-body-font-size: 0.9063rem;
    --dx-body-bg: #f9f6ee;
    --dx-secondary-bg: #fff;
    --dx-secondary-bg-rgb: 255,255,255;
    --dx-tertiary-bg: #f9f9f9;
    --dx-tertiary-bg-rgb: 246,246,246;
    --dx-light: #f9f9f9;
    --dx-light-rgb: 246,246,246;
    --dx-border-color: #eaecf1;
    --dx-custom-bg: var(--dx-tertiary-bg);
    --dx-custom-color: #7484a5;
    --dx-spacer: 1rem;
    --dx-sidebar-font-size: 0.9375rem;
    --dx-sidebar-menu-title-font-size: 0.75rem;
    --dx-primary: #1f837e;
    --dx-primary-rgb: 31,131,126;
    --dx-primary-text-emphasis: color-mix(in srgb,var(--dx-primary) 75%,#000 25%);
    --dx-primary-bg-subtle: color-mix(in srgb,var(--dx-primary) 10%,transparent);
    --dx-primary-border-subtle: color-mix(in srgb,var(--dx-primary) 30%,transparent);
    --dx-success: #87c553;
    --dx-success-rgb: 135,197,83;
    --dx-success-text-emphasis: color-mix(in srgb,var(--dx-success) 75%,#000 25%);
    --dx-success-bg-subtle: color-mix(in srgb,var(--dx-success) 10%,transparent);
    --dx-success-border-subtle: color-mix(in srgb,var(--dx-success) 30%,transparent);
    --dx-danger: #f37c50;
    --dx-danger-rgb: 243,124,80;
    --dx-danger-text-emphasis: color-mix(in srgb,var(--dx-danger) 75%,#000 25%);
    --dx-danger-bg-subtle: color-mix(in srgb,var(--dx-danger) 10%,transparent);
    --dx-danger-border-subtle: color-mix(in srgb,var(--dx-danger) 30%,transparent);
    --dx-secondary: #4068ed;
    --dx-secondary-rgb: 64,104,237;
    --dx-secondary-text-emphasis: color-mix(in srgb,var(--dx-secondary) 75%,#000 25%);
    --dx-secondary-bg-subtle: color-mix(in srgb,var(--dx-secondary) 10%,transparent);
    --dx-secondary-border-subtle: color-mix(in srgb,var(--dx-secondary) 30%,transparent);
    --dx-info: #34bed6;
    --dx-info-rgb: 52,190,214;
    --dx-info-text-emphasis: color-mix(in srgb,var(--dx-info) 75%,#000 25%);
    --dx-info-bg-subtle: color-mix(in srgb,var(--dx-info) 10%,transparent);
    --dx-info-border-subtle: color-mix(in srgb,var(--dx-info) 30%,transparent);
    --dx-warning: #f7a82e;
    --dx-warning-rgb: 247,168,46;
    --dx-warning-text-emphasis: color-mix(in srgb,var(--dx-warning) 75%,#000 25%);
    --dx-warning-bg-subtle: color-mix(in srgb,var(--dx-warning) 10%,transparent);
    --dx-warning-border-subtle: color-mix(in srgb,var(--dx-warning) 30%,transparent);
    --dx-pink: #ff4d6d;
    --dx-pink-rgb: 255,77,109;
    --dx-pink-text-emphasis: color-mix(in srgb,var(--dx-pink) 75%,#000 25%);
    --dx-pink-bg-subtle: color-mix(in srgb,var(--dx-pink) 10%,transparent);
    --dx-pink-border-subtle: color-mix(in srgb,var(--dx-pink) 30%,transparent);
    --dx-indigo: #9d4edd;
    --dx-indigo-rgb: 157,78,221;
    --dx-indigo-text-emphasis: color-mix(in srgb,var(--dx-indigo) 75%,#000 25%);
    --dx-indigo-bg-subtle: color-mix(in srgb,var(--dx-indigo) 10%,transparent);
    --dx-indigo-border-subtle: color-mix(in srgb,var(--dx-indigo) 30%,transparent);
    --dx-orange: #ff9f1c;
    --dx-orange-rgb: 255,159,28;
    --dx-orange-text-emphasis: color-mix(in srgb,var(--dx-orange) 75%,#000 25%);
    --dx-orange-bg-subtle: color-mix(in srgb,var(--dx-orange) 10%,transparent);
    --dx-orange-border-subtle: color-mix(in srgb,var(--dx-orange) 30%,transparent)
}

    [data-theme=sparkle] .card {
        --dx-card-border-width: 1px;
        --dx-card-border-color: var(--dx-border-color);
        --dx-card-bg: #fff;
        --dx-card-box-shadow: none
    }

    [data-theme=sparkle] .modal {
        --dx-modal-bg: var(--dx-secondary-bg)
    }

    [data-theme=sparkle][data-topbar-colors=light] {
        --dx-topbar-border: var(--dx-border-color);
        --dx-topbar-bg: var(--dx-secondary-bg)
    }

    [data-theme=sparkle][data-sidebar-colors=light] {
        --dx-sidebar-border: var(--dx-border-color);
        --dx-sidebar-bg: var(--dx-secondary-bg)
    }

    [data-theme=sparkle] .card-title {
        font-size: calc(var(--dx-body-font-size)*1.1)
    }

[data-theme=flat] {
    --dx-font-family-base: "Outfit",sans-serif;
    --dx-font-family-heading: "Outfit",sans-serif;
    --dx-body-font-size: 0.875rem;
    --dx-body-bg: #efefef;
    --dx-secondary-bg: #fff;
    --dx-tertiary-bg: #f6f6f6;
    --dx-light: #f6f6f6;
    --dx-light-rgb: 246,246,246;
    --dx-custom-bg: var(--dx-tertiary-bg);
    --dx-custom-color: #7484a5;
    --dx-spacer: 1.5rem;
    --dx-box-shadow: 0 4px 6px -1px rgba(220,233,249,.4);
    --dx-sidebar-font-size: 0.9375rem;
    --dx-sidebar-menu-title-font-size: 0.75rem;
    --dx-primary: #2e54f5;
    --dx-primary-rgb: 46,84,245;
    --dx-primary-text-emphasis: color-mix(in srgb,var(--dx-primary) 75%,#000 25%);
    --dx-primary-bg-subtle: color-mix(in srgb,var(--dx-primary) 10%,transparent);
    --dx-primary-border-subtle: color-mix(in srgb,var(--dx-primary) 30%,transparent);
    --dx-success: #85d52d;
    --dx-success-rgb: 133,213,45;
    --dx-success-text-emphasis: color-mix(in srgb,var(--dx-success) 75%,#000 25%);
    --dx-success-bg-subtle: color-mix(in srgb,var(--dx-success) 10%,transparent);
    --dx-success-border-subtle: color-mix(in srgb,var(--dx-success) 30%,transparent);
    --dx-danger: #f18232;
    --dx-danger-rgb: 241,130,50;
    --dx-danger-text-emphasis: color-mix(in srgb,var(--dx-danger) 75%,#000 25%);
    --dx-danger-bg-subtle: color-mix(in srgb,var(--dx-danger) 10%,transparent);
    --dx-danger-border-subtle: color-mix(in srgb,var(--dx-danger) 30%,transparent);
    --dx-secondary: #ac8cf9;
    --dx-secondary-rgb: 172,140,249;
    --dx-secondary-text-emphasis: color-mix(in srgb,var(--dx-secondary) 75%,#000 25%);
    --dx-secondary-bg-subtle: color-mix(in srgb,var(--dx-secondary) 10%,transparent);
    --dx-secondary-border-subtle: color-mix(in srgb,var(--dx-secondary) 30%,transparent);
    --dx-info: #44d6f1;
    --dx-info-rgb: 68,214,241;
    --dx-info-text-emphasis: color-mix(in srgb,var(--dx-info) 75%,#000 25%);
    --dx-info-bg-subtle: color-mix(in srgb,var(--dx-info) 10%,transparent);
    --dx-info-border-subtle: color-mix(in srgb,var(--dx-info) 30%,transparent);
    --dx-warning: #f3da2c;
    --dx-warning-rgb: 243,218,44;
    --dx-warning-text-emphasis: color-mix(in srgb,var(--dx-warning) 75%,#000 25%);
    --dx-warning-bg-subtle: color-mix(in srgb,var(--dx-warning) 10%,transparent);
    --dx-warning-border-subtle: color-mix(in srgb,var(--dx-warning) 30%,transparent);
    --dx-pink: #f186bd;
    --dx-pink-rgb: 241,134,189;
    --dx-pink-text-emphasis: color-mix(in srgb,var(--dx-pink) 75%,#000 25%);
    --dx-pink-bg-subtle: color-mix(in srgb,var(--dx-pink) 10%,transparent);
    --dx-pink-border-subtle: color-mix(in srgb,var(--dx-pink) 30%,transparent);
    --dx-indigo: #9d4edd;
    --dx-indigo-rgb: 157,78,221;
    --dx-indigo-text-emphasis: color-mix(in srgb,var(--dx-indigo) 75%,#000 25%);
    --dx-indigo-bg-subtle: color-mix(in srgb,var(--dx-indigo) 10%,transparent);
    --dx-indigo-border-subtle: color-mix(in srgb,var(--dx-indigo) 30%,transparent);
    --dx-orange: #f7bc4d;
    --dx-orange-rgb: 247,188,77;
    --dx-orange-text-emphasis: color-mix(in srgb,var(--dx-orange) 75%,#000 25%);
    --dx-orange-bg-subtle: color-mix(in srgb,var(--dx-orange) 10%,transparent);
    --dx-orange-border-subtle: color-mix(in srgb,var(--dx-orange) 30%,transparent);
    --dx-dark: #312f2e;
    --dx-dark-rgb: 49,47,46;
    --dx-dark-text-emphasis: color-mix(in srgb,var(--dx-dark) 75%,#000 25%);
    --dx-dark-bg-subtle: color-mix(in srgb,var(--dx-dark) 10%,transparent);
    --dx-dark-border-subtle: color-mix(in srgb,var(--dx-dark) 30%,transparent)
}

    [data-theme=flat] .card {
        --dx-card-border-width: 0;
        --dx-card-bg: #fff;
        --dx-card-box-shadow: var(--dx-box-shadow)
    }

    [data-theme=flat] .modal {
        --dx-modal-bg: var(--dx-secondary-bg)
    }

    [data-theme=flat][data-topbar-colors=light] {
        --dx-topbar-border: var(--dx-border-color);
        --dx-topbar-bg: var(--dx-secondary-bg)
    }

    [data-theme=flat][data-sidebar-colors=light] {
        --dx-sidebar-bg: var(--dx-secondary-bg)
    }

    [data-theme=flat][data-topbar-colors=dark] {
        --dx-topbar-bg: #2a2929
    }

    [data-theme=flat][data-sidebar-colors=dark] {
        --dx-sidebar-bg: #2a2929
    }

    [data-theme=flat] .card-title {
        font-size: calc(var(--dx-body-font-size)*1.1)
    }

    [data-theme=flat] .border-elegant {
        border: 1px solid var(--dx-border-color)
    }

[data-theme=creative] {
    --dx-font-family-base: "Nunito",sans-serif;
    --dx-font-family-heading: "Nunito",sans-serif;
    --dx-body-font-size: 00.7688rem;
    --dx-body-bg: #f2f4f5;
    --dx-body-bg-rgb: 242,244,245;
    --dx-secondary-bg: #fff;
    --dx-secondary-bg-rgb: 255,255,255;
    --dx-tertiary-bg: #f6f6f6;
    --dx-tertiary-bg-rgb: 246,246,246;
    --dx-light: #f6f6f6;
    --dx-light-rgb: 246,246,246;
    --dx-custom-bg: var(--dx-tertiary-bg);
    --dx-custom-color: #7484a5;
    --dx-spacer: 1.5rem;
    --dx-box-shadow: hsla(160,4%,70%,.32) 0px 1px 4px;
    --dx-font-weight-semibold: 700;
    --dx-sidebar-font-size: 00.7688rem;
    --dx-sidebar-menu-title-font-size: 0.8438rem;
    --dx-primary: #e6645e;
    --dx-primary-rgb: 230,100,94;
    --dx-primary-text-emphasis: color-mix(in srgb,var(--dx-primary) 75%,#000 25%);
    --dx-primary-bg-subtle: color-mix(in srgb,var(--dx-primary) 10%,transparent);
    --dx-primary-border-subtle: color-mix(in srgb,var(--dx-primary) 30%,transparent);
    --dx-secondary: #6783d3;
    --dx-secondary-rgb: 103,131,211;
    --dx-secondary-text-emphasis: color-mix(in srgb,var(--dx-secondary) 75%,#000 25%);
    --dx-secondary-bg-subtle: color-mix(in srgb,var(--dx-secondary) 10%,transparent);
    --dx-secondary-border-subtle: color-mix(in srgb,var(--dx-secondary) 30%,transparent);
    --dx-success: #5eb492;
    --dx-success-rgb: 94,180,146;
    --dx-success-text-emphasis: color-mix(in srgb,var(--dx-success) 75%,#000 25%);
    --dx-success-bg-subtle: color-mix(in srgb,var(--dx-success) 10%,transparent);
    --dx-success-border-subtle: color-mix(in srgb,var(--dx-success) 30%,transparent);
    --dx-danger: #e56e6e;
    --dx-danger-rgb: 229,110,110;
    --dx-danger-text-emphasis: color-mix(in srgb,var(--dx-danger) 75%,#000 25%);
    --dx-danger-bg-subtle: color-mix(in srgb,var(--dx-danger) 10%,transparent);
    --dx-danger-border-subtle: color-mix(in srgb,var(--dx-danger) 30%,transparent);
    --dx-info: #66c3cd;
    --dx-info-rgb: 102,195,205;
    --dx-info-text-emphasis: color-mix(in srgb,var(--dx-info) 75%,#000 25%);
    --dx-info-bg-subtle: color-mix(in srgb,var(--dx-info) 10%,transparent);
    --dx-info-border-subtle: color-mix(in srgb,var(--dx-info) 30%,transparent);
    --dx-warning: #f7bc4d;
    --dx-warning-rgb: 247,188,77;
    --dx-warning-text-emphasis: color-mix(in srgb,var(--dx-warning) 75%,#000 25%);
    --dx-warning-bg-subtle: color-mix(in srgb,var(--dx-warning) 10%,transparent);
    --dx-warning-border-subtle: color-mix(in srgb,var(--dx-warning) 30%,transparent);
    --dx-pink: #f186bd;
    --dx-pink-rgb: 241,134,189;
    --dx-pink-text-emphasis: color-mix(in srgb,var(--dx-pink) 75%,#000 25%);
    --dx-pink-bg-subtle: color-mix(in srgb,var(--dx-pink) 10%,transparent);
    --dx-pink-border-subtle: color-mix(in srgb,var(--dx-pink) 30%,transparent);
    --dx-indigo: #8177d1;
    --dx-indigo-rgb: 129,119,209;
    --dx-indigo-text-emphasis: color-mix(in srgb,var(--dx-indigo) 75%,#000 25%);
    --dx-indigo-bg-subtle: color-mix(in srgb,var(--dx-indigo) 10%,transparent);
    --dx-indigo-border-subtle: color-mix(in srgb,var(--dx-indigo) 30%,transparent);
    --dx-orange: #fbac36;
    --dx-orange-rgb: 251,172,54;
    --dx-orange-text-emphasis: color-mix(in srgb,var(--dx-orange) 75%,#000 25%);
    --dx-orange-bg-subtle: color-mix(in srgb,var(--dx-orange) 10%,transparent);
    --dx-orange-border-subtle: color-mix(in srgb,var(--dx-orange) 30%,transparent);
    --dx-dark: #524746;
    --dx-dark-rgb: 82,71,70;
    --dx-dark-text-emphasis: color-mix(in srgb,var(--dx-dark) 75%,#000 25%);
    --dx-dark-bg-subtle: color-mix(in srgb,var(--dx-dark) 10%,transparent);
    --dx-dark-border-subtle: color-mix(in srgb,var(--dx-dark) 30%,transparent)
}

    [data-theme=creative] .card {
        --dx-card-border-width: 0;
        --dx-card-bg: #fff;
        --dx-card-box-shadow: var(--dx-box-shadow)
    }

    [data-theme=creative] .modal {
        --dx-modal-bg: var(--dx-secondary-bg)
    }

    [data-theme=creative][data-topbar-colors=light] {
        --dx-topbar-bg: var(--dx-secondary-bg);
        --dx-topbar-border: var(--dx-border-color)
    }

    [data-theme=creative][data-sidebar-colors=light] {
        --dx-sidebar-bg: var(--dx-secondary-bg);
        --dx-sidebar-border: var(--dx-border-color)
    }

    [data-theme=creative][data-topbar-colors=dark] {
        --dx-topbar-bg: #2a2929
    }

    [data-theme=creative][data-sidebar-colors=dark] {
        --dx-sidebar-bg: #2a2929
    }

    [data-theme=creative] .card-title {
        font-size: calc(var(--dx-body-font-size)*1.1)
    }

    [data-theme=creative] .border-elegant {
        border: 1px solid var(--dx-border-color)
    }

[data-theme=default] .card {
    backdrop-filter: blur(10px)
}

[data-theme=default] .body-effect-img {
    background-attachment: scroll;
    background-image: url(https://srbthemes.kcubeinfotech.com/semidash/images/body-bg-light.avif);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    inset: 0;
    opacity: .6;
    position: fixed;
    z-index: 0
}

[data-theme=default][data-bs-theme=dark] .body-effect-img {
    background-image: url(https://srbthemes.kcubeinfotech.com/semidash/images/body-bg-dark.avif);
    opacity: .3
}

.page-wrapper {
    padding-inline: .25rem;
    padding-bottom: 3.5rem;
    padding-block: calc(var(--dx-topbar)*1.2) 3.5rem
}

@media (min-width:992px) {
    .page-wrapper {
        margin-right: var(--dx-sidebar)
    }
}

@media (min-width:1200px) {
    .page-wrapper {
        padding-inline: .65rem
    }
}

.main-sidebar {
    backdrop-filter: blur(14px);
    background-color: var(--dx-sidebar-bg);
    border-left: 1px solid var(--dx-sidebar-border);
    bottom: 0;
    position: fixed;
    right: 0;
    top: var(--dx-topbar);
    transition: all .5s ease-in-out;
    width: var(--dx-sidebar);
    z-index: 1005
}

@media (prefers-reduced-motion:reduce) {
    .main-sidebar {
        transition: none
    }
}

.main-sidebar .navbar-brand {
    align-items: center;
    display: none;
    height: var(--dx-topbar);
    justify-content: center;
    width: var(--dx-sidebar)
}

@media (max-width:991.98px) {
    .main-sidebar {
        top: 0
    }
}

.profile-dropdown {
    display: none
}

    .profile-dropdown .btn {
        color: var(--dx-sidebar-link-active-color) !important
    }

        .profile-dropdown .btn:active {
            border-color: transparent
        }

        .profile-dropdown .btn p {
            color: var(--dx-sidebar-link-color)
        }

    .profile-dropdown .profile-dropdown-menu .profile-link {
        color: var(--dx-secondary-color);
        display: block;
        padding: .5rem;
        transition: all .5s ease-in-out
    }

@media (prefers-reduced-motion:reduce) {
    .profile-dropdown .profile-dropdown-menu .profile-link {
        transition: none
    }
}

.profile-dropdown .profile-dropdown-menu .profile-link:hover {
    color: var(--dx-primary)
}

[data-profile-sidebar] .profile-dropdown {
    display: block
}

.navbar-menu {
    height: calc(100vh - 5rem)
}

[data-profile-sidebar] .navbar-menu {
    height: calc(100vh - 10rem)
}

@media (max-width:991.98px) {
    .navbar-menu {
        height: calc(100vh - 6rem)
    }
}

.navbar-menu .simplebar-wrapper {
    margin: 0
}

    .navbar-menu .simplebar-wrapper .simplebar-content {
        padding: 0 !important
    }

.navbar-menu .nav-menu-title {
    color: var(--dx-sidebar-menu-title);
    font-size: var(--dx-sidebar-menu-title-font-size);
    font-weight: 500;
    line-height: 1.25rem;
    padding: .375rem 1rem;
    text-transform: uppercase
}

.navbar-menu .nav-item {
    margin: 2px 14px
}

    .navbar-menu .nav-item .nav-link {
        align-items: center;
        border-radius: var(--dx-border-radius);
        color: var(--dx-sidebar-link-color);
        display: flex;
        font-size: var(--dx-sidebar-font-size);
        gap: .5rem;
        padding: var(--dx-sidebar-padding-y) var(--dx-sidebar-padding-x);
        transition: all .5s ease-in-out
    }

@media (prefers-reduced-motion:reduce) {
    .navbar-menu .nav-item .nav-link {
        transition: none
    }
}

.navbar-menu .nav-item .nav-link .icons svg {
    height: 1rem;
    width: 1rem
}

.navbar-menu .nav-item .nav-link[aria-expanded=true] .menu-arrow svg {
    transform: rotate(-180deg)
}

.navbar-menu .nav-item .nav-link:hover {
    background-color: var(--dx-sidebar-link-bg-hover-color);
    color: var(--dx-sidebar-link-hover-color)
}

.navbar-menu .nav-item .nav-link.active {
    background-color: var(--dx-sidebar-link-bg-active-color);
    color: var(--dx-sidebar-link-active-color)
}

.navbar-menu .nav-item .nav-menu-sub {
    list-style-type: none;
    margin-right: 1.5rem;
    padding: 0
}

    .navbar-menu .nav-item .nav-menu-sub li {
        position: relative
    }

        .navbar-menu .nav-item .nav-menu-sub li:before {
            background: var(--dx-sidebar-effect-color);
            bottom: 19px;
            content: "";
            position: absolute;
            right: -4px;
            top: -18px;
            width: 1px
        }

        .navbar-menu .nav-item .nav-menu-sub li:first-child:before {
            height: 18px;
            top: 0
        }

        .navbar-menu .nav-item .nav-menu-sub li:first-child:has([data-bs-toggle=collapse]):before {
            height: 100%;
            top: 0
        }

        .navbar-menu .nav-item .nav-menu-sub li:last-child:has([data-bs-toggle=collapse]):before {
            height: 30px
        }

        .navbar-menu .nav-item .nav-menu-sub li li:last-child:before {
            display: block;
            height: 35px;
            top: -20px
        }

    .navbar-menu .nav-item .nav-menu-sub .nav-link {
        color: var(--dx-sidebar-link-sub-color);
        font-size: var(--dx-body-font-size);
        padding: .375rem 1rem;
        position: relative
    }

        .navbar-menu .nav-item .nav-menu-sub .nav-link[aria-expanded=true] .menu-arrow svg {
            transform: rotate(-180deg)
        }

        .navbar-menu .nav-item .nav-menu-sub .nav-link:after {
            border-color: var(--dx-sidebar-effect-color);
            border-radius: 0 0 5.25rem 0;
            border-style: solid;
            border-width: 0 1px 1px 0;
            content: "";
            height: 6px;
            position: absolute;
            right: -.25rem;
            top: 12px;
            width: 10px
        }

        .navbar-menu .nav-item .nav-menu-sub .nav-link:hover {
            background-color: transparent;
            color: var(--dx-sidebar-link-sub-hover-color)
        }

        .navbar-menu .nav-item .nav-menu-sub .nav-link.active {
            background-color: transparent;
            color: var(--dx-sidebar-link-sub-active-color)
        }

.sidebar-backdrop {
    background-color: rgba(16,24,40,.4);
    display: none;
    inset: 0;
    opacity: 1;
    position: fixed;
    z-index: 1004
}

@media (min-width:768px) and (max-width:1199.98px) {
    .sidebar-hidden .main-sidebar {
        right: calc(var(--dx-sidebar-sm)*-1.1)
    }

    .sidebar-hidden .main-topbar {
        right: 0 !important
    }

    .sidebar-hidden .page-wrapper {
        margin-right: 0 !important
    }
}

@media (max-width:991.98px) {
    .sidebar-hidden .main-sidebar {
        right: calc(var(--dx-sidebar)*-1.1)
    }

        .sidebar-hidden .main-sidebar.show {
            right: 0
        }
}

[data-sidebar=medium] .main-sidebar, [data-sidebar=medium] .main-sidebar .navbar-brand {
    width: var(--dx-sidebar-md)
}

[data-sidebar=medium] .profile-dropdown :is(.arrow) {
    display: none
}

[data-sidebar=medium] .navbar-menu .nav-menu-title {
    text-align: center
}

[data-sidebar=medium] .navbar-menu .nav-item {
    margin-inline: 0
}

    [data-sidebar=medium] .navbar-menu .nav-item :is(.menu-arrow) {
        display: none
    }

    [data-sidebar=medium] .navbar-menu .nav-item .nav-link {
        flex-direction: column;
        gap: .75rem;
        margin: .5rem .75rem;
        padding-block: .75rem;
        text-align: center;
        width: calc(var(--dx-sidebar-md) - 24px)
    }

        [data-sidebar=medium] .navbar-menu .nav-item .nav-link .icons svg {
            height: 1.25rem;
            width: 1.25rem
        }

        [data-sidebar=medium] .navbar-menu .nav-item .nav-link.active {
            background-color: var(--dx-sidebar-link-bg-active-color)
        }

    [data-sidebar=medium] .navbar-menu .nav-item .nav-menu-sub {
        margin-right: 0
    }

        [data-sidebar=medium] .navbar-menu .nav-item .nav-menu-sub li:before {
            display: none
        }

        [data-sidebar=medium] .navbar-menu .nav-item .nav-menu-sub .nav-link {
            margin: 0;
            padding: .5rem 1.5rem;
            width: 100%
        }

            [data-sidebar=medium] .navbar-menu .nav-item .nav-menu-sub .nav-link:after {
                display: none
            }

            [data-sidebar=medium] .navbar-menu .nav-item .nav-menu-sub .nav-link.active {
                background-color: transparent
            }

@media (min-width:992px) {
    [data-sidebar=medium] .page-wrapper {
        margin-right: var(--dx-sidebar-md)
    }

    [data-sidebar=medium] .main-footer {
        right: var(--dx-sidebar-md)
    }
}

[data-sidebar=small] .main-sidebar, [data-sidebar=small] .main-sidebar .navbar-brand {
    width: var(--dx-sidebar-sm)
}

[data-sidebar=small] .profile-dropdown :is(.content,.arrow) {
    display: none
}

[data-sidebar=small] .navbar-menu .nav-menu-title {
    display: none
}

[data-sidebar=small] .navbar-menu .nav-item :is(.content,.menu-arrow) {
    display: none
}

[data-sidebar=small] .navbar-menu .nav-item .nav-link {
    margin-inline: auto;
    padding-block: .75rem;
    width: calc(var(--dx-sidebar-sm) - 24px)
}

    [data-sidebar=small] .navbar-menu .nav-item .nav-link .icons {
        font-size: 1.125rem
    }

    [data-sidebar=small] .navbar-menu .nav-item .nav-link.active {
        background-color: var(--dx-sidebar-link-bg-active-color)
    }

[data-sidebar=small] .navbar-menu .nav-item .nav-menu-sub {
    background-color: var(--dx-sidebar-bg);
    box-shadow: var(--dx-sidebar-dropdown-shadow);
    margin-right: 0;
    padding: .5rem 0;
    position: fixed;
    right: var(--dx-sidebar-sm);
    width: 12rem
}

    [data-sidebar=small] .navbar-menu .nav-item .nav-menu-sub .menu-arrow {
        display: inline-block !important
    }

    [data-sidebar=small] .navbar-menu .nav-item .nav-menu-sub li:before {
        display: none !important
    }

    [data-sidebar=small] .navbar-menu .nav-item .nav-menu-sub .nav-link {
        margin: 0;
        padding: .5rem 1.5rem;
        width: 100%
    }

        [data-sidebar=small] .navbar-menu .nav-item .nav-menu-sub .nav-link:after {
            display: none
        }

        [data-sidebar=small] .navbar-menu .nav-item .nav-menu-sub .nav-link.active {
            background-color: transparent
        }

@media (min-width:992px) {
    [data-sidebar=small] .page-wrapper {
        margin-right: var(--dx-sidebar-sm)
    }

    [data-sidebar=small] .main-footer {
        right: var(--dx-sidebar-sm)
    }
}

.main-topbar {
    backdrop-filter: blur(14px);
    background-color: var(--dx-topbar-bg);
    border-bottom: 1px solid var(--dx-topbar-border);
    display: flex;
    height: var(--dx-topbar);
    left: 0;
    padding-inline-end: 1rem;
    position: fixed;
    right: 0;
    top: 0;
    transition: all .5s ease-in-out;
    z-index: 1003
}

@media (prefers-reduced-motion:reduce) {
    .main-topbar {
        transition: none
    }
}

.main-topbar .navbar-brand {
    align-items: center;
    display: flex;
    height: var(--dx-topbar);
    padding-inline-start: 1rem;
    width: var(--dx-sidebar)
}

.main-topbar .topbar-link {
    align-items: center;
    border: none;
    color: var(--dx-topbar-color);
    display: flex;
    height: 2.25rem;
    height: var(--dx-topbar);
    justify-content: center;
    padding: 0;
    width: 2.25rem
}

    .main-topbar .topbar-link:hover {
        color: var(--dx-topbar-hover-color)
    }

.main-topbar .sidebar-toggle {
    align-items: center;
    border-radius: .375rem;
    border-width: 0;
    color: var(--dx-topbar-color);
    display: flex;
    height: 2.25rem;
    justify-content: center;
    margin-inline-start: .5rem;
    width: 2.25rem
}

.main-topbar .profile-dropdown {
    display: block
}

[data-profile-sidebar] .main-topbar .profile-dropdown {
    display: none
}

.profile-dropdown-menu {
    width: 17rem
}

@media (max-width:767.98px) {
    .profile-dropdown-menu {
        min-width: 18rem;
        width: auto
    }
}

.topbar-main-btn {
    align-items: center;
    border: 1px solid var(--dx-topbar-border) !important;
    display: flex;
    height: 2.25rem;
    justify-content: center;
    padding: 0 .5rem;
    --dx-btn-border-color: var(--dx-topbar-border);
    --dx-btn-color: var(--dx-topbar-color);
    --dx-btn-hover-color: var(--dx-topbar-hover-color);
    --dx-btn-focus-color: var(--dx-topbar-hover-color);
    --dx-btn-active-color: var(--dx-topbar-hover-color)
}

.topbar-mode .light {
    display: none
}

[data-bs-theme=dark] .topbar-mode .light {
    display: inline-block
}

[data-bs-theme=dark] .topbar-mode .dark {
    display: none
}

.navbar-search .icon {
    color: var(--dx-topbar-color);
    position: absolute;
    right: .5rem;
    top: .75rem
}

.navbar-search .form-control {
    background-color: transparent;
    color: var(--dx-topbar-hover-color);
    padding-inline-start: 2rem;
    width: 18rem
}

    .navbar-search .form-control::-moz-placeholder {
        color: var(--dx-topbar-color)
    }

    .navbar-search .form-control::placeholder {
        color: var(--dx-topbar-color)
    }

.dropdown-menu-topbar {
    max-height: calc(100vh - var(--dx-topbar) - 26px);
    overflow-y: auto
}

.notification-dropdown .nav .nav-item .nav-link {
    color: rgb(var(--dx-white-rgb),.75);
    font-size: 14px;
    padding: 7px 5px
}

    .notification-dropdown .nav .nav-item .nav-link.active {
        background-color: var(--dx-primary-bg-subtle);
        color: var(--dx-primary)
    }

.notification-animate {
    left: 8px;
    position: absolute;
    top: 25px
}

.topbar-notification {
    max-height: calc(100vh - 205px)
}

    .topbar-notification .notification-item {
        color: currentColor;
        position: relative;
        transition: all .5s ease-in-out
    }

@media (prefers-reduced-motion:reduce) {
    .topbar-notification .notification-item {
        transition: none
    }
}

.topbar-notification .notification-item:not(:last-child) {
    border-bottom: 1px solid var(--dx-border-color)
}

.topbar-notification .notification-item:is(.unread,:hover) {
    background-color: var(--dx-tertiary-bg)
}

#toolAppsModal .app-card {
    border: 1px solid var(--dx-card-border-color) !important;
    cursor: pointer;
    overflow: hidden;
    transition: all .5s ease-in-out
}

@media (prefers-reduced-motion:reduce) {
    #toolAppsModal .app-card {
        transition: none
    }
}

#toolAppsModal .app-card:hover {
    border-color: var(--dx-primary) !important;
    transform: translateY(-2px)
}

#toolAppsModal .app-card.active {
    transform: translateY(-2px)
}

#toolAppsModal .app-item {
    transition: all .5s ease-in-out
}

@media (prefers-reduced-motion:reduce) {
    #toolAppsModal .app-item {
        transition: none
    }
}

#toolAppsModal .app-item.filtered-out {
    display: none !important
}

#toolAppsModal .app-item.selected-app .app-card {
    background-color: var(--dx-primary-bg-subtle) !important;
    border-color: var(--dx-primary) !important;
    box-shadow: 0 4px 12px rgba(var(--dx-primary-rgb),.15) !important;
    position: relative
}

    #toolAppsModal .app-item.selected-app .app-card:before {
        animation: slideIn .3s ease-out;
        background: linear-gradient(-90deg,var(--dx-primary),var(--dx-primary-bg-subtle));
        border-radius: .375rem .375rem 0 0;
        content: "";
        height: 3px;
        left: 0;
        position: absolute;
        right: 0;
        top: 0
    }

#toolAppsModal .app-item {
    animation: fadeInUp .5s ease forwards;
    opacity: 0;
    transform: translateY(20px)
}

    #toolAppsModal .app-item:first-child {
        animation-delay: .1s
    }

    #toolAppsModal .app-item:nth-child(2) {
        animation-delay: .2s
    }

    #toolAppsModal .app-item:nth-child(3) {
        animation-delay: .3s
    }

    #toolAppsModal .app-item:nth-child(4) {
        animation-delay: .4s
    }

    #toolAppsModal .app-item:nth-child(5) {
        animation-delay: .5s
    }

    #toolAppsModal .app-item:nth-child(6) {
        animation-delay: .6s
    }

    #toolAppsModal .app-item:nth-child(7) {
        animation-delay: .7s
    }

    #toolAppsModal .app-item:nth-child(8) {
        animation-delay: .8s
    }

    #toolAppsModal .app-item:nth-child(9) {
        animation-delay: .9s
    }

    #toolAppsModal .app-item:nth-child(10) {
        animation-delay: 1s
    }

    #toolAppsModal .app-item:nth-child(11) {
        animation-delay: 1.1s
    }

    #toolAppsModal .app-item:nth-child(12) {
        animation-delay: 1.2s
    }

    #toolAppsModal .app-item:nth-child(13) {
        animation-delay: 1.3s
    }

    #toolAppsModal .app-item:nth-child(14) {
        animation-delay: 1.4s
    }

    #toolAppsModal .app-item:nth-child(15) {
        animation-delay: 1.5s
    }

    #toolAppsModal .app-item:nth-child(16) {
        animation-delay: 1.6s
    }

    #toolAppsModal .app-item:nth-child(17) {
        animation-delay: 1.7s
    }

    #toolAppsModal .app-item:nth-child(18) {
        animation-delay: 1.8s
    }

    #toolAppsModal .app-item:nth-child(19) {
        animation-delay: 1.9s
    }

    #toolAppsModal .app-item:nth-child(20) {
        animation-delay: 2s
    }

#toolAppsModal #noResults {
    animation: fadeIn .5s ease
}

    #toolAppsModal #noResults.d-none {
        display: none !important
    }

    #toolAppsModal #noResults:not(.d-none) {
        display: block !important
    }

.dropdown-menu-lg {
    width: 24rem
}

@media (max-width:767.98px) {
    .dropdown-menu-lg {
        min-width: 18rem;
        width: auto
    }
}

.dropdown-menu-md {
    width: 18rem
}

:is([data-topbar-colors=dark],[data-topbar-colors=brand],[data-topbar-colors=purple],[data-topbar-colors=sky]) .logos .logo-light {
    display: block
}

:is([data-topbar-colors=dark],[data-topbar-colors=brand],[data-topbar-colors=purple],[data-topbar-colors=sky]) .logos .logo-dark {
    display: none
}

.main-footer {
    align-items: center;
    border-top: 1px solid var(--dx-border-color);
    bottom: 0;
    display: flex;
    height: 3.5rem;
    display: none !important;
    left: 0;
    margin-inline: .9375rem;
    padding-inline: 1rem;
    position: absolute;
    right: 0
}

@media (min-width:992px) {
    .main-footer {
        right: var(--dx-sidebar)
    }
}

@media (min-width:1200px) {
    .main-footer {
        padding-inline: 1rem
    }
}

@media (min-width:1536px) {
    .main-footer {
        margin-inline: 1.25rem
    }
}

[data-layout=modern][data-nav-type=floating] .main-topbar {
    position: absolute
}

[data-layout=modern][data-nav-type=boxed] .main-topbar {
    border: 1px solid var(--dx-topbar-border);
    border-radius: .625rem;
    margin: .75rem 1.25rem
}

    [data-layout=modern][data-nav-type=boxed] .main-topbar.nav-sticky {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        margin-top: 0
    }

[data-layout=modern][data-nav-type=boxed] .page-wrapper {
    padding-top: calc(var(--dx-topbar)*1.3)
}

[data-layout=modern][data-nav-type=pattern] .sidebar-toggle {
    color: rgba(var(--dx-white-rgb),.75)
}

[data-layout=modern][data-nav-type=pattern] .main-topbar {
    background-color: transparent;
    border-color: rgba(var(--dx-white-rgb),.2)
}

    [data-layout=modern][data-nav-type=pattern] .main-topbar.nav-sticky {
        background-color: var(--dx-primary)
    }

    [data-layout=modern][data-nav-type=pattern] .main-topbar .topbar-link {
        color: rgba(var(--dx-white-rgb),.75)
    }

        [data-layout=modern][data-nav-type=pattern] .main-topbar .topbar-link:hover {
            color: #fff
        }

[data-layout=modern][data-nav-type=pattern] .topbar-main-btn {
    --dx-btn-border-color: rgba(var(--dx-white-rgb),0.2) !important;
    --dx-btn-color: rgba(var(--dx-white-rgb),0.75);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-focus-color: var(--dx-white);
    --dx-btn-active-color: var(--dx-white)
}

[data-layout=modern][data-nav-type=pattern] .navbar-search .icon {
    color: rgba(var(--dx-white-rgb),.75)
}

[data-layout=modern][data-nav-type=pattern] .navbar-search .form-control {
    color: #fff
}

    [data-layout=modern][data-nav-type=pattern] .navbar-search .form-control::-moz-placeholder {
        color: rgba(var(--dx-white-rgb),.75)
    }

    [data-layout=modern][data-nav-type=pattern] .navbar-search .form-control::placeholder {
        color: rgba(var(--dx-white-rgb),.75)
    }

[data-layout=modern][data-nav-type=pattern] .nav-pattern {
    background-color: var(--dx-primary);
    display: inline-block;
    height: 13rem;
    inset: 0;
    position: absolute
}

    [data-layout=modern][data-nav-type=pattern] .nav-pattern svg {
        height: auto;
        width: 100%
    }

[data-layout=modern][data-nav-type=pattern] .page-heading {
    color: #fff
}

    [data-layout=modern][data-nav-type=pattern] .page-heading .breadcrumb {
        --dx-breadcrumb-divider-color: #fff;
        --dx-breadcrumb-item-active-color: #fff
    }

        [data-layout=modern][data-nav-type=pattern] .page-heading .breadcrumb .breadcrumb-item a {
            color: rgba(var(--dx-white-rgb),.75)
        }

.nav-pattern {
    display: none
}

[data-layout=boxed] body {
    background-color: var(--dx-boxed-bg);
    margin: var(--dx-boxed-width) var(--dx-boxed-width) 0
}

[data-layout=boxed] .main-topbar {
    left: var(--dx-boxed-width);
    right: var(--dx-boxed-width) !important;
    top: var(--dx-boxed-width)
}

    [data-layout=boxed] .main-topbar.nav-sticky {
        top: 0
    }

[data-layout=boxed] .main-sidebar {
    right: var(--dx-boxed-width);
    top: calc(var(--dx-topbar) + var(--dx-boxed-width))
}

    [data-layout=boxed] .main-sidebar .navbar-menu {
        height: calc(100vh - 5rem - var(--dx-boxed-width))
    }

    [data-layout=boxed] .main-sidebar.sidebar-sticky {
        top: var(--dx-topbar)
    }

        [data-layout=boxed] .main-sidebar.sidebar-sticky .navbar-menu {
            height: calc(100vh - 5rem)
        }

@media (max-width:991.98px) {
    [data-layout=boxed] .main-sidebar {
        right: 0;
        top: 0
    }
}

[data-layout=boxed][data-profile-sidebar=true] .main-sidebar .navbar-menu {
    height: calc(100vh - 9rem - var(--dx-boxed-width))
}

[data-layout=boxed][data-profile-sidebar=true] .main-sidebar.sidebar-sticky .navbar-menu {
    height: calc(100vh - 9rem)
}

[data-layout=boxed] .page-wrapper {
    background-color: var(--dx-body-bg);
    min-height: 100vh
}

@media (max-width:991.98px) {
    [data-layout=boxed] .sidebar-hidden .main-sidebar {
        right: calc(var(--dx-sidebar)*-1.1)
    }
}

[data-layout=semibox] .main-sidebar {
    border: 1px solid var(--dx-sidebar-border);
    border-radius: .625rem;
    inset: var(--dx-semibox-width);
    top: var(--dx-semibox-width) !important
}

[data-layout=semibox] .main-topbar {
    border: 1px solid var(--dx-border-color);
    border-radius: .625rem;
    left: var(--dx-semibox-width);
    right: calc(var(--dx-sidebar) + var(--dx-semibox-width) + var(--dx-semibox-width)) !important;
    top: var(--dx-semibox-width)
}

    [data-layout=semibox] .main-topbar.nav-sticky {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        top: 0
    }

@media (max-width:1199.98px) {
    [data-layout=semibox] .main-topbar {
        right: var(--dx-semibox-width) !important
    }
}

[data-layout=semibox] .page-wrapper {
    margin-right: calc(var(--dx-sidebar) + var(--dx-semibox-width));
    padding-top: calc(var(--dx-topbar) + var(--dx-semibox-width) + var(--dx-semibox-width));
    padding-inline: var(--dx-semibox-width)
}

[data-layout=semibox] .navbar-menu {
    height: calc(100vh - 7rem)
}

[data-layout=semibox][data-profile-sidebar=true] .navbar-menu {
    height: calc(100vh - 12rem)
}

@media (min-width:992px) {
    [data-layout=semibox][data-sidebar=medium] .main-topbar {
        left: calc(var(--dx-semibox-width) + 8px);
        right: calc(var(--dx-sidebar-md) + var(--dx-semibox-width) + var(--dx-semibox-width) + 8px) !important
    }

    [data-layout=semibox][data-sidebar=medium] .page-wrapper {
        margin-right: calc(var(--dx-sidebar-md) + var(--dx-semibox-width))
    }

    [data-layout=semibox][data-sidebar=small] .main-topbar {
        left: calc(var(--dx-semibox-width) + 8px);
        right: calc(var(--dx-sidebar-sm) + var(--dx-semibox-width) + var(--dx-semibox-width) + 8px) !important
    }

    [data-layout=semibox][data-sidebar=small] .page-wrapper {
        margin-right: calc(var(--dx-sidebar-sm) + var(--dx-semibox-width))
    }
}

@media (min-width:768px) and (max-width:1199.98px) {
    [data-layout=semibox] .sidebar-hidden .main-sidebar {
        right: calc(var(--dx-sidebar-sm)*-1.1)
    }

    [data-layout=semibox] .sidebar-hidden .main-topbar {
        right: var(--dx-semibox-width) !important
    }

    [data-layout=semibox] .sidebar-hidden .page-wrapper {
        margin-right: 0 !important
    }
}

@media (max-width:991.98px) {
    [data-layout=semibox] .sidebar-hidden .main-sidebar {
        right: calc(var(--dx-sidebar)*-1.1)
    }

        [data-layout=semibox] .sidebar-hidden .main-sidebar.show {
            display: block;
            right: 0
        }
}

[data-layout=horizontal] .main-sidebar {
    border-bottom: 1px solid var(--dx-sidebar-border);
    bottom: auto;
    left: 0;
    right: 0;
    width: 100%
}

@media (max-width:991.98px) {
    [data-layout=horizontal] .main-sidebar {
        right: 0;
        top: -316px
    }

        [data-layout=horizontal] .main-sidebar.show {
            display: block;
            top: var(--dx-topbar)
        }
}

[data-layout=horizontal] .navbar-menu {
    height: auto
}

    [data-layout=horizontal] .navbar-menu .nav-menu-title {
        display: none
    }

    [data-layout=horizontal] .navbar-menu .navbar-nav-menu {
        align-items: center;
        display: flex;
        margin-bottom: 0
    }

        [data-layout=horizontal] .navbar-menu .navbar-nav-menu .nav-menu-sub {
            background-color: var(--dx-sidebar-bg);
            box-shadow: var(--dx-sidebar-dropdown-shadow);
            margin-right: 0;
            max-height: calc(100vh - var(--dx-topbar) - var(--dx-topbar));
            overflow-y: auto;
            padding: .5rem 0;
            position: fixed;
            width: 12rem
        }

    [data-layout=horizontal] .navbar-menu .nav-item {
        flex-shrink: 0;
        margin-inline: 0
    }

        [data-layout=horizontal] .navbar-menu .nav-item .nav-link {
            background-color: transparent
        }

            [data-layout=horizontal] .navbar-menu .nav-item .nav-link:before {
                display: none
            }

[data-layout=horizontal] :is(.profile-dropdown,.main-topbar .sidebar-toggle) {
    display: none
}

[data-layout=horizontal] .main-topbar {
    z-index: 1006
}

@media (min-width:992px) {
    [data-layout=horizontal] .page-wrapper {
        padding-top: calc(var(--dx-topbar)*1.8)
    }
}

@media (min-width:992px) and (min-width:992px) {
    [data-layout=horizontal] .page-wrapper {
        margin-right: 0
    }
}

[data-layout=horizontal] .main-footer {
    right: 0
}

@media (max-width:991.98px) {
    [data-layout=horizontal] .main-topbar .sidebar-toggle {
        display: flex
    }

    [data-layout=horizontal] .main-sidebar {
        height: 316px
    }

    [data-layout=horizontal] .navbar-menu {
        height: 300px;
        margin-bottom: 8px;
        margin-top: 8px
    }

        [data-layout=horizontal] .navbar-menu .nav-menu-title {
            display: none
        }

        [data-layout=horizontal] .navbar-menu .navbar-nav-menu {
            display: block
        }

            [data-layout=horizontal] .navbar-menu .navbar-nav-menu .nav-menu-sub {
                background-color: transparent;
                box-shadow: none;
                position: static;
                width: 100%
            }
}

[data-layout=horizontal][data-sidebar=medium] .navbar-menu .nav-item .nav-link {
    font-size: 14px
}

    [data-layout=horizontal][data-sidebar=medium] .navbar-menu .nav-item .nav-link .icons svg {
        height: 1rem;
        width: 1rem
    }

[data-layout=horizontal][data-sidebar=medium] .navbar-menu .nav-item .nav-menu-sub .nav-link {
    align-items: start
}

:is([data-layout=modern],[data-layout=semibox]) .main-sidebar {
    top: 0
}

    :is([data-layout=modern],[data-layout=semibox]) .main-sidebar .navbar-brand {
        display: flex
    }

        :is([data-layout=modern],[data-layout=semibox]) .main-sidebar .navbar-brand .logo-lg .logo-light {
            display: none
        }

        :is([data-layout=modern],[data-layout=semibox]) .main-sidebar .navbar-brand .logo-sm {
            display: none
        }

:is([data-layout=modern],[data-layout=semibox]):is([data-bs-theme=dark],[data-bs-theme=black]) .main-sidebar .navbar-brand .logo-lg .logo-light {
    display: block
}

:is([data-layout=modern],[data-layout=semibox]):is([data-bs-theme=dark],[data-bs-theme=black]) .main-sidebar .navbar-brand .logo-lg .logo-dark {
    display: none
}

@media (min-width:992px) {
    :is([data-layout=modern],[data-layout=semibox]) .main-topbar {
        right: var(--dx-sidebar)
    }

        :is([data-layout=modern],[data-layout=semibox]) .main-topbar .navbar-brand {
            width: auto
        }

            :is([data-layout=modern],[data-layout=semibox]) .main-topbar .navbar-brand .logos {
                display: none
            }
}

@media (min-width:992px) {
    :is([data-layout=modern],[data-layout=semibox])[data-sidebar=medium] .main-topbar {
        right: var(--dx-sidebar-md)
    }
}

:is([data-layout=modern],[data-layout=semibox])[data-sidebar=small] .main-sidebar .navbar-brand {
    display: flex
}

    :is([data-layout=modern],[data-layout=semibox])[data-sidebar=small] .main-sidebar .navbar-brand .logo-lg {
        display: none
    }

    :is([data-layout=modern],[data-layout=semibox])[data-sidebar=small] .main-sidebar .navbar-brand .logo-sm {
        display: block
    }

        :is([data-layout=modern],[data-layout=semibox])[data-sidebar=small] .main-sidebar .navbar-brand .logo-sm .logo-light {
            display: none
        }

:is([data-layout=modern],[data-layout=semibox])[data-sidebar=small] .main-topbar {
    right: var(--dx-sidebar-sm)
}

:is([data-layout=modern],[data-layout=semibox]):is([data-sidebar-colors=dark],[data-sidebar-colors=brand],[data-sidebar-colors=purple],[data-sidebar-colors=sky]) .navbar-brand .logo-lg .logo-light {
    display: block
}

:is([data-layout=modern],[data-layout=semibox]):is([data-sidebar-colors=dark],[data-sidebar-colors=brand],[data-sidebar-colors=purple],[data-sidebar-colors=sky]) .navbar-brand .logo-lg .logo-dark {
    display: none
}

:is([data-layout=modern],[data-layout=semibox]):is([data-sidebar-colors=dark],[data-sidebar-colors=brand],[data-sidebar-colors=purple],[data-sidebar-colors=sky]) .navbar-brand .logo-sm {
    display: none
}

:is([data-layout=modern],[data-layout=semibox]):is([data-sidebar-colors=dark],[data-sidebar-colors=brand],[data-sidebar-colors=purple],[data-sidebar-colors=sky])[data-sidebar=small] .navbar-brand .logo-sm .logo-light {
    display: block
}

:is([data-layout=modern],[data-layout=semibox]):is([data-sidebar-colors=dark],[data-sidebar-colors=brand],[data-sidebar-colors=purple],[data-sidebar-colors=sky])[data-sidebar=small] .navbar-brand .logo-sm .logo-dark {
    display: none
}

[data-bs-theme=black-white] {
    filter: grayscale(100%) !important
}

.page-heading {
    align-items: center;
    display: flex
}

@media (max-width:767.98px) {
    .page-heading {
        align-items: start
    }
}

.page-heading .breadcrumb-item + .breadcrumb-item:before {
    content: "\ea6e";
    font-family: remixicon
}

.setting-modal .setting-widget .setting-widget-wrapper {
    background-color: var(--dx-tertiary-bg);
    display: flex;
    gap: .25rem;
    padding: 6px 16px
}

    .setting-modal .setting-widget .setting-widget-wrapper span {
        border-radius: 50rem;
        display: inline-block;
        height: 6px;
        width: 6px
    }

.setting-modal .setting-widget.setting-vertical-widget {
    cursor: pointer;
    display: block;
    height: 112px;
    overflow: hidden
}

    .setting-modal .setting-widget.setting-vertical-widget .setting-widget-content {
        height: calc(100% - 8px)
    }

        .setting-modal .setting-widget.setting-vertical-widget .setting-widget-content .custom-height-element {
            height: .375rem
        }

.setting-modal #navigationType .form-check-label {
    outline: none
}

.setting-modal .form-check {
    padding-right: 0
}

.setting-modal .form-check-label.system-mode:before {
    background-color: var(--dx-black);
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 50%;
    top: 0;
    width: 50%
}

.setting-modal input[type=radio]:checked + .form-check-label {
    outline: 1px solid var(--dx-primary)
}

    .setting-modal input[type=radio]:checked + .form-check-label.outline-offset-2 {
        outline-offset: 2px
    }

.setting-modal .grayscale {
    filter: grayscale(100%)
}

.setting-modal .custom-size-element {
    height: .375rem;
    width: .375rem
}

.setting-modal .sidebar-color-2 {
    background-color: #071f2e
}

.setting-modal .sidebar-color-3 {
    background-color: #1b408d
}

.setting-modal .sidebar-color-4 {
    background-color: #59359a
}

.setting-modal .sidebar-color-5 {
    background-color: #075985
}

.setting-modal .theme-color-1 {
    background-color: #03b611
}

.setting-modal .theme-color-2 {
    background-color: #5582fb
}

.setting-modal .theme-color-3 {
    background-color: #8338ec
}

.setting-modal .theme-color-4 {
    background-color: #e65f5c
}

.setting-modal .theme-color-5 {
    background-color: #00bba7
}

.setting-modal .theme-color-6 {
    background-color: #e12afb
}

.setting-modal .theme-color-7 {
    background-color: #a7c957
}

.setting-modal .theme-color-8 {
    background-color: #ff9f1c
}

.btn-close:after {
    color: var(--dx-btn-close-color);
    content: "\eb98" !important;
    font-family: remixicon !important;
    font-size: 20px;
    line-height: 15px
}

.alert-live-backdrop {
    backdrop-filter: blur(20px)
}

.alert-dismissible .btn-close:after {
    color: var(--dx-alert-color)
}

.alert-icon {
    padding-right: 4rem;
    position: relative
}

    .alert-icon, .alert-icon .icon {
        align-items: center;
        display: flex
    }

        .alert-icon .icon {
            border-left: 1px solid var(--dx-alert-border-color);
            bottom: 0;
            justify-content: center;
            position: absolute;
            right: 0;
            top: 0;
            width: 2.75rem
        }

.icon-alert {
    border-color: var(--dx-border-color)
}

    .icon-alert .icon {
        align-items: center;
        display: flex;
        justify-content: center
    }

.primary-gradient {
    background: linear-gradient(to left,var(--dx-primary),var(--dx-primary-text-emphasis))
}

.secondary-gradient {
    background: linear-gradient(270deg,#a855f7,#7e22ce)
}

.success-gradient {
    background: linear-gradient(270deg,#358ffc,#22c55e)
}

.danger-gradient {
    background: linear-gradient(270deg,#152956,#450a0a)
}

#liveAlert {
    position: fixed;
    top: 1.25rem;
    z-index: 1030
}

#liveAlert, .basic-alert {
    right: 50%;
    transform: translateX(50%)
}

.basic-alert {
    align-items: center;
    border: 4px solid var(--dx-secondary-bg);
    display: flex;
    justify-content: center;
    position: absolute;
    top: -1.25rem
}

.breadcrumb-item {
    font-weight: 500
}

    .breadcrumb-item a {
        color: var(--dx-secondary-color)
    }

:is(.double-arrow,.single-arrow,.dash-arrow) .breadcrumb-item + .breadcrumb-item:before {
    color: var(--dx-breadcrumb-divider-color);
    float: right;
    font-family: RemixIcon
}

.double-arrow .breadcrumb-item + .breadcrumb-item:before {
    content: "\f2e4"
}

.single-arrow .breadcrumb-item + .breadcrumb-item:before {
    content: "\ea6e"
}

.dash-arrow .breadcrumb-item + .breadcrumb-item:before {
    content: "\f1af"
}

.btn-navigation {
    background-color: var(--dx-secondary-bg);
    border: 1px solid var(--dx-border-color);
    border-radius: .625rem;
    box-shadow: var(--dx-box-shadow);
    display: flex;
    position: relative
}

    .btn-navigation a {
        color: var(--dx-secondary-color);
        flex-grow: 1;
        padding: 1.5rem 1rem;
        position: relative;
        text-align: center;
        transition: all .5s ease-in-out
    }

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

.navigation-bottom-animation a:before {
    border-radius: 50rem;
    bottom: 0;
    content: "";
    height: 6px;
    position: absolute;
    right: 50%;
    transform: translateX(50%);
    transition: all .5s ease-in-out;
    width: 6px
}

@media (prefers-reduced-motion:reduce) {
    .navigation-bottom-animation a:before {
        transition: none
    }
}

.navigation-bottom-animation a:is(:hover,.active):before {
    bottom: 10px
}

.navigation-border-animation a:before {
    bottom: 0;
    content: "";
    height: .125rem;
    position: absolute;
    right: 50%;
    transform: translateX(50%);
    transition: all .5s ease-in-out;
    width: 0
}

@media (prefers-reduced-motion:reduce) {
    .navigation-border-animation a:before {
        transition: none
    }
}

.navigation-border-animation a:is(:hover,.active):before {
    width: 100%
}

.navigation-border-animation.top-border a:before {
    position: absolute;
    right: 50%;
    top: 0
}

.notification {
    align-items: center;
    border-width: 1px;
    border: 2px solid var(--dx-secondary-bg);
    display: inline-flex;
    font-size: .6875rem;
    height: 22px;
    justify-content: center;
    padding: 0;
    width: 22px
}

    .notification.top-end {
        left: -8px;
        position: absolute;
        top: -8px
    }

    .notification.top-start {
        position: absolute;
        right: -8px;
        top: -8px
    }

    .notification.bottom-start {
        bottom: -8px;
        position: absolute;
        right: -8px
    }

    .notification.bottom-end {
        bottom: -8px;
        left: -8px;
        position: absolute
    }

    .notification.inside {
        position: static
    }

.badge-square {
    align-items: center;
    border-width: 1px;
    display: inline-flex;
    font-size: .6875rem;
    height: 22px;
    justify-content: center;
    padding: 0;
    width: 22px
}

.spin {
    border-radius: 50rem;
    height: 2rem;
    width: 2rem
}

.modern-spinner {
    border: 2px solid;
    border-left-color: transparent !important;
    border-right-color: transparent !important
}

.gradient-loader .bg-gradient {
    border-color: var(--dx-primary) var(--dx-danger) var(--dx-warning) var(--dx-success) !important
}

.gradient-loader .bg-gradient2 {
    border-color: var(--dx-info) var(--dx-primary) var(--dx-secondary) var(--dx-pink) !important
}

.gradient-loader .bg-sub-gradient {
    border-color: var(--dx-primary-bg-subtle) var(--dx-danger-bg-subtle) var(--dx-warning-bg-subtle) var(--dx-success-bg-subtle) !important
}

.animation-button .circle {
    margin-left: -.25rem;
    margin-top: -.25rem
}

.animation-button .loader-button-animation {
    left: -.2188rem;
    position: absolute;
    top: -.2188rem
}

.animate-bounce {
    border: 2px solid var(--dx-border-color)
}

.accordion.accordion-boxed .accordion-item {
    border: none
}

    .accordion.accordion-boxed .accordion-item:not(:last-child) {
        margin-bottom: calc(var(--dx-spacer)*.7)
    }

.accordion.accordion-boxed .accordion-button {
    border: 1px solid var(--dx-accordion-border-color);
    border-radius: .625rem
}

.accordion .accordion-button {
    padding-left: 1.6rem
}

    .accordion .accordion-button:after {
        background: none;
        content: "\ea4e";
        font-family: remixicon !important;
        font-size: 22px;
        font-weight: 300;
        left: .4rem;
        line-height: 1;
        position: absolute;
        top: 50%;
        transform: translateY(-50%)
    }

    .accordion .accordion-button[aria-expanded=true]:after {
        transform: translateY(-50%) rotate(180deg)
    }

.modal {
    --dx-modal-box-shadow: 0 10px 15px -3px rgba(229,231,235,.3),0 4px 6px -4px rgba(229,231,235,.3)
}

.modal-footer {
    padding: var(--dx-spacer)
}

.modal-dialog-start {
    margin-right: var(--dx-spacer)
}

.modal-dialog-end {
    margin-left: var(--dx-spacer)
}

.modal-dialog-bottom-end {
    bottom: 0;
    left: var(--dx-spacer);
    position: absolute
}

.modal-dialog-bottom-start {
    bottom: 0;
    position: absolute;
    right: var(--dx-spacer)
}

.modal-xs {
    width: 20rem
}

.modal-2xl {
    max-width: 64rem
}

@media (max-width:1024px) {
    .modal-2xl {
        max-width: 61.5rem
    }
}

@media (max-width:768px) {
    .modal-2xl {
        max-width: 45.5rem
    }
}

@media (max-width:575.98px) {
    .modal-2xl, .modal-lg, .modal-sm, .modal-xl, .modal-xs {
        margin-inline: auto;
        max-width: 24.0625rem
    }
}

.progress-bar.progress-gradient {
    background: var(--dx-progress-bar-bg)
}

.progress-bar.progress-gradient-primary {
    --dx-progress-bar-bg: linear-gradient(90deg,var(--dx-primary),var(--dx-success))
}

.progress-bar.progress-gradient-info {
    --dx-progress-bar-bg: linear-gradient(90deg,var(--dx-primary),var(--dx-info-text-emphasis),var(--dx-info))
}

.progress-bar.progress-gradient-indigo {
    --dx-progress-bar-bg: linear-gradient(90deg,var(--dx-indigo),var(--dx-secondary))
}

.progress-1 {
    height: .5rem
}

.progress-2 {
    height: .625rem
}

.progress-3 {
    height: .75rem
}

.progress-4 {
    height: 1rem
}

.progress-5 {
    height: 1.25rem
}

.progress-6 {
    height: 1.5rem
}

.progress-7 {
    height: 2rem
}

.progress-circle {
    display: inline-block;
    position: relative
}

    .progress-circle svg {
        transform: rotate(90deg)
    }

    .progress-circle circle {
        fill: none;
        stroke-linecap: round
    }

    .progress-circle .progress-bg {
        stroke: var(--dx-tertiary-bg)
    }

    .progress-circle .progress-fill {
        transition: stroke-dashoffset 1s ease-in-out
    }

    .progress-circle .progress-text {
        align-items: center;
        display: flex;
        font-weight: 700;
        height: 100%;
        justify-content: center;
        position: absolute;
        right: 0;
        top: 0;
        width: 100%
    }

    .progress-circle .progress-text-inner {
        line-height: 1.2;
        text-align: center
    }

    .progress-circle .animate-count {
        transition: all .5s ease-in-out
    }

@media (prefers-reduced-motion:reduce) {
    .progress-circle .animate-count {
        transition: none
    }
}

.offcanvas .offcanvas-header {
    border-bottom: 1px solid var(--dx-offcanvas-border-color)
}

.offcanvas .offcanvas-footer {
    border-top: 1px solid var(--dx-offcanvas-border-color);
    padding: var(--dx-spacer) var(--dx-spacer)
}

.offcanvas.offcanvas-small {
    width: 7rem
}

.offcanvas.offcanvas-large {
    width: 24rem
}

@media (min-width:576px) {
    .offcanvas.offcanvas-half {
        width: 50%
    }
}

.toast-primary {
    --dx-toast-bg: rgba(var(--dx-primary-rgb))
}

.toast-secondary {
    --dx-toast-bg: rgba(var(--dx-secondary-rgb))
}

.toast-success {
    --dx-toast-bg: rgba(var(--dx-success-rgb))
}

.toast-info {
    --dx-toast-bg: rgba(var(--dx-info-rgb))
}

.toast-warning {
    --dx-toast-bg: rgba(var(--dx-warning-rgb))
}

.toast-danger {
    --dx-toast-bg: rgba(var(--dx-danger-rgb))
}

.toast-light {
    --dx-toast-bg: rgba(var(--dx-light-rgb))
}

.toast-dark {
    --dx-toast-bg: rgba(var(--dx-dark-rgb))
}

.toast-pink {
    --dx-toast-bg: rgba(var(--dx-pink-rgb))
}

.toast-orange {
    --dx-toast-bg: rgba(var(--dx-orange-rgb))
}

.toast-indigo {
    --dx-toast-bg: rgba(var(--dx-indigo-rgb))
}

.toast-content {
    --dx-toast-max-width: 24rem;
    --dx-toast-box-shadow: 0 10px 15px -3px #bdbdbd9f,0 4px 6px -4px #bbbbbb41
}

.basic-gallery img {
    transition: transform 5s ease-in-out
}

.basic-gallery:hover > img {
    transform: scale(1.25)
}

@media (min-width:992px) {
    .item-4 {
        margin-top: -9rem
    }

    .item-6 {
        margin-top: -7rem
    }

    .item-7 {
        margin-top: -17rem
    }
}

@media (min-width:768px) and (max-width:992px) {
    .item-3 {
        margin-top: -9rem
    }

    .item-5, .item-7 {
        margin-top: -3rem
    }
}

.timeline {
    display: flex;
    flex-direction: column;
    list-style: none;
    position: relative
}

    .timeline.timeline-square > :after {
        border-radius: .125rem
    }

.timeline-basic {
    list-style: none;
    margin-bottom: 0;
    padding-right: 0
}

    .timeline-basic .timeline-item {
        padding-bottom: .75rem;
        padding-right: 1.25rem;
        position: relative
    }

        .timeline-basic .timeline-item:not(:last-child):before {
            background-color: var(--dx-tertiary-bg);
            bottom: -.5rem;
            content: "";
            position: absolute;
            right: .125rem;
            top: .5rem;
            width: 2px
        }

        .timeline-basic .timeline-item:after {
            background-color: var(--dx-tertiary-bg);
            border-radius: 999px;
            content: "";
            height: .375rem;
            position: absolute;
            right: 0;
            top: .5rem;
            width: .375rem
        }

        .timeline-basic .timeline-item:last-child {
            padding-bottom: 0
        }

.timeline-primary .timeline-item.active:after, .timeline-primary .timeline-item.active:before {
    background-color: var(--dx-primary)
}

.timeline-secondary .timeline-item.active:after, .timeline-secondary .timeline-item.active:before {
    background-color: var(--dx-secondary)
}

.timeline-success .timeline-item.active:after, .timeline-success .timeline-item.active:before {
    background-color: var(--dx-success)
}

.timeline-info .timeline-item.active:after, .timeline-info .timeline-item.active:before {
    background-color: var(--dx-info)
}

.timeline-warning .timeline-item.active:after, .timeline-warning .timeline-item.active:before {
    background-color: var(--dx-warning)
}

.timeline-danger .timeline-item.active:after, .timeline-danger .timeline-item.active:before {
    background-color: var(--dx-danger)
}

.timeline-light .timeline-item.active:after, .timeline-light .timeline-item.active:before {
    background-color: var(--dx-light)
}

.timeline-dark .timeline-item.active:after, .timeline-dark .timeline-item.active:before {
    background-color: var(--dx-dark)
}

.timeline-pink .timeline-item.active:after, .timeline-pink .timeline-item.active:before {
    background-color: var(--dx-pink)
}

.timeline-orange .timeline-item.active:after, .timeline-orange .timeline-item.active:before {
    background-color: var(--dx-orange)
}

.timeline-indigo .timeline-item.active:after, .timeline-indigo .timeline-item.active:before {
    background-color: var(--dx-indigo)
}

.changelog-timeline {
    list-style: none;
    margin-bottom: 0;
    padding-right: 0;
    position: relative
}

    .changelog-timeline .timeline-item {
        display: flex;
        justify-content: center;
        padding-bottom: 1.5rem;
        position: relative
    }

        .changelog-timeline .timeline-item:before {
            background-color: var(--dx-tertiary-bg);
            bottom: -.5rem;
            content: "";
            margin: 1.875rem 0 1rem;
            position: absolute;
            right: 1rem;
            top: .5rem;
            width: .125rem
        }

        .changelog-timeline .timeline-item:last-child {
            padding-bottom: 0
        }

            .changelog-timeline .timeline-item:last-child:before {
                display: none
            }

        .changelog-timeline .timeline-item .dot {
            height: 6px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 6px
        }

.timeline-modern {
    list-style: none
}

    .timeline-modern .timeline-item {
        position: relative
    }

        .timeline-modern .timeline-item:before {
            background-color: var(--dx-tertiary-bg);
            bottom: -.5rem;
            content: "";
            position: absolute;
            right: 16px;
            top: -1.3rem;
            width: .0625rem;
            z-index: -1
        }

        .timeline-modern .timeline-item:last-child:before {
            content: none
        }

.order-timeline {
    position: relative
}

    .order-timeline .timeline-item {
        align-items: flex-start;
        display: flex;
        padding-right: 2rem;
        position: relative
    }

        .order-timeline .timeline-item:not(:last-child):before {
            background-color: var(--dx-tertiary-bg);
            bottom: -.5rem;
            content: "";
            position: absolute;
            right: .75rem;
            top: .5rem;
            width: 2px;
            z-index: 1
        }

        .order-timeline .timeline-item:not(:last-child) {
            padding-bottom: 1.5rem
        }

        .order-timeline .timeline-item.completed .timeline-marker, .order-timeline .timeline-item.completed:before {
            background-color: var(--dx-success)
        }

        .order-timeline .timeline-item.active .timeline-marker, .order-timeline .timeline-item.active:before {
            background-color: var(--dx-primary)
        }

        .order-timeline .timeline-item.pending .timeline-marker {
            background-color: var(--dx-tertiary-bg);
            color: var(--dx-tertiary-color)
        }

    .order-timeline .timeline-marker {
        align-items: center;
        border: 2px solid var(--dx-secondary-bg);
        border-radius: 50%;
        color: #fff;
        display: flex;
        flex-shrink: 0;
        font-size: .75rem;
        height: 1.625rem;
        justify-content: center;
        position: absolute;
        right: 0;
        top: .25rem;
        width: 1.625rem;
        z-index: 2
    }

    .order-timeline .timeline-content {
        flex: 1
    }

.shipment-timeline {
    position: relative
}

    .shipment-timeline .timeline-item {
        align-items: flex-start;
        display: flex;
        margin-bottom: 1.5rem;
        padding-right: 2rem;
        position: relative
    }

        .shipment-timeline .timeline-item:not(:last-child):before {
            background-color: var(--dx-tertiary-bg);
            bottom: -.5rem;
            content: "";
            position: absolute;
            right: .75rem;
            top: .5rem;
            width: 2px;
            z-index: 1
        }

        .shipment-timeline .timeline-item:last-child {
            margin-bottom: 0
        }

        .shipment-timeline .timeline-item.completed .timeline-marker {
            background-color: var(--dx-success);
            border-color: var(--dx-success)
        }

        .shipment-timeline .timeline-item.completed:before {
            background-color: var(--dx-success)
        }

        .shipment-timeline .timeline-item.active .timeline-marker {
            background-color: var(--dx-primary);
            border-color: var(--dx-primary)
        }

        .shipment-timeline .timeline-item.active:before {
            background-color: var(--dx-primary)
        }

        .shipment-timeline .timeline-item.pending .timeline-marker {
            background-color: var(--dx-light);
            border-color: var(--dx-tertiary-bg);
            color: var(--dx-tertiary-color)
        }

    .shipment-timeline .timeline-marker {
        align-items: center;
        border: 2px solid var(--dx-secondary-bg);
        border-radius: 50%;
        color: #fff;
        display: flex;
        flex-shrink: 0;
        font-size: .75rem;
        height: 1.625rem;
        justify-content: center;
        position: absolute;
        right: 0;
        top: .25rem;
        transition: all .3s ease;
        width: 1.625rem;
        z-index: 2
    }

    .shipment-timeline .timeline-content {
        flex: 1;
        padding-right: .5rem
    }

        .shipment-timeline .timeline-content .timeline-title {
            color: var(--dx-body-color);
            font-size: .875rem;
            font-weight: 600;
            margin-bottom: .25rem
        }

        .shipment-timeline .timeline-content p {
            font-size: .8125rem;
            margin-bottom: .25rem
        }

        .shipment-timeline .timeline-content small {
            font-size: .75rem
        }

.pagination {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem
}

    .pagination .page-item:is(:first-child,:last-child) .page-link {
        align-items: center;
        display: flex;
        gap: .25rem;
        padding: var(--dx-pagination-padding-y) var(--dx-pagination-padding-x);
        width: auto
    }

    .pagination .page-item .page-link {
        align-items: center;
        border-radius: var(--dx-border-radius);
        display: flex;
        height: 2.25rem;
        justify-content: center;
        padding: 0;
        width: 2.25rem
    }

    .pagination.pagination-rounded .page-link {
        border-radius: 50rem
    }

    .pagination.pagination-modern {
        gap: 0
    }

        .pagination.pagination-modern .page-item .page-link {
            border-radius: 0;
            gap: .25rem;
            padding: var(--dx-pagination-padding-y) var(--dx-pagination-padding-x);
            width: auto
        }

        .pagination.pagination-modern .page-item:is(:first-child,:last-child) .page-link {
            align-items: center;
            display: flex;
            height: 2.25rem;
            justify-content: center;
            padding: 0;
            width: 2.25rem
        }

        .pagination.pagination-modern .page-item:first-child .page-link {
            border-bottom-right-radius: var(--dx-pagination-border-radius);
            border-top-right-radius: var(--dx-pagination-border-radius)
        }

        .pagination.pagination-modern .page-item:last-child .page-link {
            border-bottom-left-radius: var(--dx-pagination-border-radius);
            border-top-left-radius: var(--dx-pagination-border-radius)
        }

        .pagination.pagination-modern.pagination-rounded .page-item:first-child .page-link {
            border-bottom-right-radius: 50rem;
            border-top-right-radius: 50rem
        }

        .pagination.pagination-modern.pagination-rounded .page-item:last-child .page-link {
            border-bottom-left-radius: 50rem;
            border-top-left-radius: 50rem
        }

    .pagination.pagination-flush .page-item .page-link {
        border: 0
    }

    .pagination.pagination-xs .page-item .page-link {
        font-size: .75rem;
        height: 1.5rem;
        line-height: 1rem;
        width: 1.5rem
    }

    .pagination.pagination-xs .page-item:is(:first-child,:last-child) .page-link {
        height: 1.5rem;
        padding: .125rem .5rem;
        width: auto
    }

    .pagination.pagination-sm .page-item .page-link {
        font-size: .75rem;
        height: 1.75rem;
        line-height: 1rem;
        width: 1.75rem
    }

    .pagination.pagination-sm .page-item:is(:first-child,:last-child) .page-link {
        height: 1.75rem;
        width: auto
    }

    .pagination.pagination-md .page-item .page-link {
        height: 2rem;
        width: 2rem
    }

    .pagination.pagination-md .page-item:is(:first-child,:last-child) .page-link {
        height: 2rem;
        width: auto
    }

    .pagination.pagination-lg .page-item .page-link {
        font-size: .9375rem;
        height: 2.5rem;
        width: 2.5rem
    }

    .pagination.pagination-lg .page-item:is(:first-child,:last-child) .page-link {
        height: 2.5rem;
        width: auto
    }

.link {
    transition: all .5s ease-in-out
}

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

.link.link-custom {
    color: var(--dx-body-color)
}

    .link.link-custom:hover {
        color: var(--dx-primary)
    }

.list-borderless {
    --dx-list-group-border-width: none;
    --dx-list-group-item-padding-x: 0px;
    --dx-list-group-item-padding-y: 4px
}

.list-arrow {
    list-style-image: url(https://srbthemes.kcubeinfotech.com/semidash/images/others/arrow-right.webp)
}

.list-boxed .list-group-item {
    border: var(--dx-list-group-border-width) solid var(--dx-list-group-border-color);
    border-radius: .625rem
}

    .list-boxed .list-group-item:not(:last-child) {
        margin-bottom: .5rem
    }

.list-group-primary li::marker, .list-group-primary li:before {
    color: var(--dx-primary)
}

.list-group-secondary li::marker, .list-group-secondary li:before {
    color: var(--dx-secondary)
}

.list-group-success li::marker, .list-group-success li:before {
    color: var(--dx-success)
}

.list-group-info li::marker, .list-group-info li:before {
    color: var(--dx-info)
}

.list-group-warning li::marker, .list-group-warning li:before {
    color: var(--dx-warning)
}

.list-group-danger li::marker, .list-group-danger li:before {
    color: var(--dx-danger)
}

.list-group-light li::marker, .list-group-light li:before {
    color: var(--dx-light)
}

.list-group-dark li::marker, .list-group-dark li:before {
    color: var(--dx-dark)
}

.list-group-pink li::marker, .list-group-pink li:before {
    color: var(--dx-pink)
}

.list-group-orange li::marker, .list-group-orange li:before {
    color: var(--dx-orange)
}

.list-group-indigo li::marker, .list-group-indigo li:before {
    color: var(--dx-indigo)
}

.nav-underline .nav-link {
    border: 0;
    padding: .5rem 1rem;
    position: relative
}

    .nav-underline .nav-link:after {
        background-color: var(--dx-nav-underline-link-active-color);
        border-radius: 50rem;
        bottom: 0;
        content: "";
        height: 1px;
        left: 0;
        margin: 0 auto;
        position: absolute;
        right: 0;
        transition: all .5s ease-in-out;
        width: 0
    }

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

.nav-underline .nav-link:is(:hover,.active):after {
    width: 100%
}

.nav-underline .nav-link.active {
    font-weight: 500
}

.tabs-animation .nav-link {
    height: 2.75rem;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 8rem
}

    .tabs-animation .nav-link .icon {
        display: inline-block;
        height: 1rem;
        margin-inline: auto;
        transition: all .5s ease-in-out;
        width: 1rem
    }

@media (prefers-reduced-motion:reduce) {
    .tabs-animation .nav-link .icon {
        transition: none
    }
}

.tabs-animation .nav-link .content {
    display: block;
    transform: translateY(-3.5rem);
    transition: all .5s ease-in-out
}

@media (prefers-reduced-motion:reduce) {
    .tabs-animation .nav-link .content {
        transition: none
    }
}

.tabs-animation .nav-link:hover .content {
    transform: translateY(-1.1rem)
}

.tabs-animation .nav-link:hover .icon {
    transform: translateY(2.5rem)
}

.modern-spinner {
    animation: spin 1s linear infinite
}

@keyframes spin {
    to {
        transform: rotate(-1turn)
    }
}

:is(.animate-dot,.animate-bounce) {
    animation: bounce 1s infinite
}

    :is(.animate-dot,.animate-bounce).delay-150 {
        animation-delay: -.3s
    }

    :is(.animate-dot,.animate-bounce).delay-300 {
        animation-delay: -.15s
    }

@keyframes bounce {
    0%,to {
        animation-timing-function: cubic-bezier(.8,0,1,1);
        transform: translateY(-25%)
    }

    50% {
        animation-timing-function: cubic-bezier(0,0,.2,1);
        transform: none
    }
}

.animate-ping {
    animation: ping 1s cubic-bezier(0,0,.2,1) infinite
}

@keyframes ping {
    75%,to {
        content: var(--tw-content);
        opacity: 0;
        transform: scale(2)
    }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite
}

@keyframes shimmer {
    to {
        opacity: 0;
        transform: translate(0)
    }
}

@keyframes timerPulse {
    0%,to {
        transform: scale(1)
    }

    50% {
        transform: scale(1.02)
    }
}

@keyframes timeUpdate {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.05)
    }

    to {
        transform: scale(1)
    }
}

@keyframes slideInUp {
    0% {
        opacity: 0;
        transform: translateY(20px)
    }

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

@keyframes slideIn {
    0% {
        opacity: 0;
        transform: translateX(100%)
    }

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

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

@keyframes slideInFromRight {
    0% {
        opacity: 0;
        transform: translateX(-30px)
    }

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

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(10px)
    }

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

.avatar {
    justify-content: center
}

.avatar, .avatar-group {
    align-items: center;
    display: flex
}

    .avatar-group .avatar-group-item {
        position: relative;
        transition: z-index .3s ease
    }

        .avatar-group .avatar-group-item :is(img,div) {
            border: 2px solid var(--dx-secondary-bg);
            border-radius: 50rem
        }

        .avatar-group .avatar-group-item div {
            background-color: var(--dx-primary);
            color: #fff
        }

        .avatar-group .avatar-group-item:not(:first-child) {
            margin-right: -10px
        }

        .avatar-group .avatar-group-item:hover {
            z-index: 10
        }

:is(.btn.show) {
    border-color: transparent
}

[class*=btn-dashed-] {
    border-style: dashed
}

[class*=btn-3d-] {
    box-shadow: inset 0 2px 4px 0 var(--dx-btn-shadow-color)
}

.btn.btn-xs {
    border-radius: .375rem;
    font-size: .6875rem;
    padding: .125rem .5rem
}

.btn.btn-md {
    font-size: 12px;
    padding: .5rem 1rem
}

.btn.btn-lg {
    font-size: 1rem;
    padding: .75rem 1.75rem
}

.btn-icon-overlay {
    padding-right: 4rem
}

    .btn-icon-overlay.right {
        padding-inline: 1.5rem 4rem
    }

        .btn-icon-overlay.right .icon {
            left: 0;
            right: auto
        }

    .btn-icon-overlay .icon {
        background-color: rgba(var(--dx-white-rgb),.1);
        bottom: 0;
        position: absolute;
        right: 0;
        top: 0;
        width: 2.375rem
    }

    .btn-icon-overlay .icon, .btn.btn-icon {
        align-items: center;
        display: flex;
        justify-content: center
    }

.btn.btn-icon {
    height: 2.5625rem;
    padding: 0;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,opacity .25s ease-in-out;
    width: 2.5625rem
}

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

.btn.btn-icon i {
    line-height: 2
}

.btn-modern .effect {
    background-image: radial-gradient(75% 100% at 50% 0,rgba(56,189,248,.6) 0,rgba(56,189,248,0) 75%);
    opacity: 0;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,opacity .25s ease-in-out
}

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

.btn-modern .effect:hover {
    opacity: 1
}

.btn-translate-up {
    transform: translateY(0);
    transition: all .5s ease-in-out
}

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

.btn-translate-up:hover {
    transform: translateY(-.125rem)
}

.btn-translate-down {
    transform: translateY(0);
    transition: all .5s ease-in-out
}

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

.btn-translate-down:hover {
    transform: translateY(.125rem)
}

.btn-scale {
    transform: scale(1);
    transition: all .5s ease-in-out
}

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

.btn-scale:hover {
    transform: scale(1.1)
}

.card {
    margin-bottom: var(--dx-spacer)
}

    .card .card-header {
        border: none;
        padding-bottom: 0
    }

    .card.card-h-100 {
        height: calc(100% - var(--dx-spacer))
    }

.card-hover-animate {
    transition: transform .3s ease-in-out
}

    .card-hover-animate:hover {
        transform: translateY(-.25rem)
    }

.basic-card .card-img-top {
    height: 8rem;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%
}

.basic-card .user {
    height: 120px;
    margin-top: -4rem;
    width: 120px
}

.card-hover-effect {
    transition: all .5s ease-in-out
}

@media (prefers-reduced-motion:reduce) {
    .card-hover-effect {
        transition: none
    }
}

.card-hover-effect .icon-bg {
    align-items: center;
    display: flex;
    height: 5rem;
    justify-content: center;
    width: 5rem
}

.card-hover-effect .icon-hover-bg {
    border-radius: 50%;
    height: 5rem;
    position: absolute;
    right: 30px;
    top: 30px;
    transition: all .5s ease-in-out;
    width: 5rem
}

@media (prefers-reduced-motion:reduce) {
    .card-hover-effect .icon-hover-bg {
        transition: none
    }
}

.card-hover-effect:hover {
    box-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
    transform: translateY(-6px)
}

    .card-hover-effect:hover .icon-hover-bg {
        border-radius: 100%;
        transform: scale(10)
    }

.bg-overlay {
    background-color: #052a40;
    inset: 0;
    opacity: .2;
    position: absolute
}

.dropdown-menu {
    animation-duration: .3s;
    animation-fill-mode: both;
    animation-name: slideDownIn
}

    .dropdown-menu .dropdown-item {
        border-radius: .625rem;
        transition: all .5s ease-in-out
    }

@media (prefers-reduced-motion:reduce) {
    .dropdown-menu .dropdown-item {
        transition: none
    }
}

@keyframes slideDownIn {
    to {
        margin-top: -1px
    }

    0% {
        margin-top: 5px
    }
}

:is(.dropdown .dropdown-toggle,.dropdown-toggle-split.dropdown-toggle):after {
    border: none;
    content: "\ea4e";
    font-family: remixicon !important;
    font-size: 20px;
    line-height: .8;
    margin-top: 0;
    vertical-align: -.2rem
}

:is(.dropdown .dropdown-toggle,.dropdown-toggle-split.dropdown-toggle).show:after {
    transform: rotate(-180deg)
}

.dropend .dropdown-toggle:after {
    border: none !important;
    content: "\ea4e";
    font-family: remixicon !important;
    font-size: 20px;
    line-height: .8;
    margin-top: 3.2px;
    transform: rotate(90deg)
}

.dropend .dropdown-toggle:hover:after {
    transform: rotate(90deg)
}

.dropstart .dropdown-toggle:before {
    transform: rotate(-90deg)
}

.dropstart .dropdown-toggle:before, .dropup .dropdown-toggle:after {
    border: none;
    content: "\ea4e";
    font-family: remixicon !important;
    font-size: 20px;
    line-height: .8;
    margin-top: 3.2px
}

.dropup .dropdown-toggle:after {
    transform: rotate(-180deg)
}

.square {
    background: linear-gradient(-136deg,rgba(var(--dx-primary-rgb),.2),rgba(var(--dx-secondary-rgb),.2),rgba(var(--dx-info-rgb),.2));
    height: 20rem;
    margin: 0 auto;
    width: 20rem
}

@media (max-width:575.98px) {
    .square {
        height: 15rem;
        width: 15rem
    }
}

.simplebar-scrollbar:before {
    background: var(--dx-border-color) !important
}

.simplebar-primary .simplebar-scrollbar:before {
    background: var(--dx-primary) !important
}

.simplebar-secondary .simplebar-scrollbar:before {
    background: var(--dx-secondary) !important
}

.simplebar-success .simplebar-scrollbar:before {
    background: var(--dx-success) !important
}

.simplebar-info .simplebar-scrollbar:before {
    background: var(--dx-info) !important
}

.simplebar-warning .simplebar-scrollbar:before {
    background: var(--dx-warning) !important
}

.simplebar-danger .simplebar-scrollbar:before {
    background: var(--dx-danger) !important
}

.simplebar-light .simplebar-scrollbar:before {
    background: var(--dx-light) !important
}

.simplebar-dark .simplebar-scrollbar:before {
    background: var(--dx-dark) !important
}

.simplebar-pink .simplebar-scrollbar:before {
    background: var(--dx-pink) !important
}

.simplebar-orange .simplebar-scrollbar:before {
    background: var(--dx-orange) !important
}

.simplebar-indigo .simplebar-scrollbar:before {
    background: var(--dx-indigo) !important
}

::-webkit-scrollbar, ::-webkit-scrollbar-track {
    background-color: var(--dx-secondary-bg)
}

::-webkit-scrollbar {
    width: 10px
}

::-webkit-scrollbar-thumb {
    background-color: var(--dx-border-color);
    border-radius: 10px
}

.swiper-primary .swiper-pagination-bullet {
    background: var(--dx-primary);
    height: .75rem;
    width: .75rem
}

.swiper-primary .swiper-pagination-bullet-active {
    background: var(--dx-white);
    border: 3px solid var(--dx-primary)
}

.swiper-secondary .swiper-pagination-bullet {
    background: var(--dx-secondary);
    height: .75rem;
    width: .75rem
}

.swiper-secondary .swiper-pagination-bullet-active {
    background: var(--dx-white);
    border: 3px solid var(--dx-secondary)
}

.swiper-success .swiper-pagination-bullet {
    background: var(--dx-success);
    height: .75rem;
    width: .75rem
}

.swiper-success .swiper-pagination-bullet-active {
    background: var(--dx-white);
    border: 3px solid var(--dx-success)
}

.swiper-info .swiper-pagination-bullet {
    background: var(--dx-info);
    height: .75rem;
    width: .75rem
}

.swiper-info .swiper-pagination-bullet-active {
    background: var(--dx-white);
    border: 3px solid var(--dx-info)
}

.swiper-warning .swiper-pagination-bullet {
    background: var(--dx-warning);
    height: .75rem;
    width: .75rem
}

.swiper-warning .swiper-pagination-bullet-active {
    background: var(--dx-white);
    border: 3px solid var(--dx-warning)
}

.swiper-danger .swiper-pagination-bullet {
    background: var(--dx-danger);
    height: .75rem;
    width: .75rem
}

.swiper-danger .swiper-pagination-bullet-active {
    background: var(--dx-white);
    border: 3px solid var(--dx-danger)
}

.swiper-light .swiper-pagination-bullet {
    background: var(--dx-light);
    height: .75rem;
    width: .75rem
}

.swiper-light .swiper-pagination-bullet-active {
    background: var(--dx-white);
    border: 3px solid var(--dx-light)
}

.swiper-dark .swiper-pagination-bullet {
    background: var(--dx-dark);
    height: .75rem;
    width: .75rem
}

.swiper-dark .swiper-pagination-bullet-active {
    background: var(--dx-white);
    border: 3px solid var(--dx-dark)
}

.swiper-pink .swiper-pagination-bullet {
    background: var(--dx-pink);
    height: .75rem;
    width: .75rem
}

.swiper-pink .swiper-pagination-bullet-active {
    background: var(--dx-white);
    border: 3px solid var(--dx-pink)
}

.swiper-orange .swiper-pagination-bullet {
    background: var(--dx-orange);
    height: .75rem;
    width: .75rem
}

.swiper-orange .swiper-pagination-bullet-active {
    background: var(--dx-white);
    border: 3px solid var(--dx-orange)
}

.swiper-indigo .swiper-pagination-bullet {
    background: var(--dx-indigo);
    height: .75rem;
    width: .75rem
}

.swiper-indigo .swiper-pagination-bullet-active {
    background: var(--dx-white);
    border: 3px solid var(--dx-indigo)
}

.swiper-button-prev:before {
    content: "\ea64";
    font-family: RemixIcon
}

.swiper-button-next:before {
    content: "\ea6e";
    font-family: RemixIcon
}

:is(.swiper-button-prev,.swiper-button-next):after {
    display: none
}

.swiper-navigation-hover :is(.swiper-button-prev,.swiper-button-next) {
    opacity: 0;
    transition: all .5s ease-in-out;
    visibility: hidden
}

@media (prefers-reduced-motion:reduce) {
    .swiper-navigation-hover :is(.swiper-button-prev,.swiper-button-next) {
        transition: none
    }
}

.swiper-navigation-hover :is(.swiper-button-prev,.swiper-button-next):before {
    opacity: 0;
    transition: all .5s ease-in-out;
    visibility: hidden
}

@media (prefers-reduced-motion:reduce) {
    .swiper-navigation-hover :is(.swiper-button-prev,.swiper-button-next):before {
        transition: none
    }
}

.swiper-navigation-hover:hover :is(.swiper-button-prev,.swiper-button-next) {
    opacity: 1;
    visibility: visible
}

    .swiper-navigation-hover:hover :is(.swiper-button-prev,.swiper-button-next):before {
        opacity: 1;
        visibility: visible
    }

.basic-square {
    background: linear-gradient(-136deg,var(--dx-primary),var(--dx-secondary),var(--dx-info))
}

.glare-square {
    background: linear-gradient(-136deg,var(--dx-success),var(--dx-indigo),var(--dx-info))
}

.reverse-square {
    background: linear-gradient(-136deg,var(--dx-info),var(--dx-info))
}

.floating-square {
    background: linear-gradient(-136deg,var(--dx-primary),var(--dx-primary))
}

.annotation-dropdown {
    right: 50px;
    top: 40px
}

    .annotation-dropdown .comment-content {
        max-height: 200px
    }

    .annotation-dropdown #comment-input {
        color: var(--dx-emphasis-color);
        width: 100%
    }

        .annotation-dropdown #comment-input:focus {
            outline: none
        }

.deckgo-highlight-code-carbon {
    --deckgo-highlight-code-carbon-background: #161c30;
    --deckgo-highlight-code-carbon-color: #fff;
    --deckgo-highlight-code-token-atrule: #ec4899;
    --deckgo-highlight-code-token-function: #eab308;
    --deckgo-highlight-code-carbon-header-button-red-background: #ef4444;
    --deckgo-highlight-code-token-selector: #4ade80;
    --deckgo-highlight-code-font-size: 0.9063rem;
    --deckgo-highlight-code-carbon-header-button-width: 0.68rem;
    --deckgo-highlight-code-carbon-header-button-height: 0.68rem
}

.chatbot-one {
    background: linear-gradient(to bottom left,rgba(var(--dx-primary-rgb),.2),rgba(var(--dx-success-rgb),.2),rgba(var(--dx-secondary-rgb),.2))
}

.chatbot-two {
    background: linear-gradient(to top left,var(--dx-success),var(--dx-info))
}

.chatbot-three {
    background: linear-gradient(to top left,var(--dx-primary),var(--dx-secondary))
}

.treeview-scrollable {
    max-height: 70vh
}

.treeview {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

    .treeview ul {
        transition: all .5s ease-in-out
    }

@media (prefers-reduced-motion:reduce) {
    .treeview ul {
        transition: none
    }
}

.treeview ul.list-unstyled {
    margin-bottom: 0
}

.treeview ul:not(.d-none) {
    animation: slideDown .5s ease-in-out
}

.treeview li {
    position: relative
}

    .treeview li:before {
        background-color: var(--dx-border-color);
        content: "";
        height: 100%;
        position: absolute;
        right: -.75rem;
        top: 0;
        width: 1px;
        z-index: 0
    }

    .treeview li:last-child:before {
        height: 1.5rem
    }

    .treeview li:last-child {
        margin-bottom: 0
    }

    .treeview li:before, .treeview li > a:before {
        display: none
    }

.treeview a {
    margin-bottom: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all .5s ease-in-out;
    white-space: nowrap
}

@media (prefers-reduced-motion:reduce) {
    .treeview a {
        transition: none
    }
}

.treeview a:active, .treeview a:focus, .treeview a:hover {
    background-color: var(--dx-primary-bg-subtle);
    color: var(--dx-primary) !important
}

.treeview i {
    margin-left: .5rem;
    transition: all .5s ease-in-out
}

@media (prefers-reduced-motion:reduce) {
    .treeview i {
        transition: none
    }
}

.treeview [aria-expanded=true] {
    background-color: var(--dx-light);
    color: var(--dx-primary);
    font-weight: 500
}

.treeview [data-node] {
    cursor: pointer
}

@keyframes slideDown {
    0% {
        opacity: 0;
        transform: translateY(-10px)
    }

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

.icon-box {
    align-items: center;
    border: 1px solid var(--dx-border-color);
    border-radius: .625rem;
    display: flex;
    height: 2.5rem;
    justify-content: center;
    width: 2.5rem
}

.stroke-1 {
    stroke-width: 1
}

.stroke-2 {
    stroke-width: 2
}

.stroke-3 {
    stroke-width: 3
}

.stroke-4 {
    stroke-width: 4
}

.size-2-5 {
    height: .625rem;
    width: .625rem
}

.size-3-5 {
    height: .875rem;
    width: .875rem
}

.icon-primary {
    fill: rgba(var(--dx-primary-rgb),.1)
}

.icon-hover-primary, .icon-primary {
    color: var(--dx-primary)
}

    .icon-hover-primary:hover {
        fill: var(--dx-primary-bg-subtle)
    }

.icon-secondary {
    fill: rgba(var(--dx-secondary-rgb),.1)
}

.icon-hover-secondary, .icon-secondary {
    color: var(--dx-secondary)
}

    .icon-hover-secondary:hover {
        fill: var(--dx-secondary-bg-subtle)
    }

.icon-success {
    fill: rgba(var(--dx-success-rgb),.1)
}

.icon-hover-success, .icon-success {
    color: var(--dx-success)
}

    .icon-hover-success:hover {
        fill: var(--dx-success-bg-subtle)
    }

.icon-info {
    fill: rgba(var(--dx-info-rgb),.1)
}

.icon-hover-info, .icon-info {
    color: var(--dx-info)
}

    .icon-hover-info:hover {
        fill: var(--dx-info-bg-subtle)
    }

.icon-warning {
    fill: rgba(var(--dx-warning-rgb),.1)
}

.icon-hover-warning, .icon-warning {
    color: var(--dx-warning)
}

    .icon-hover-warning:hover {
        fill: var(--dx-warning-bg-subtle)
    }

.icon-danger {
    fill: rgba(var(--dx-danger-rgb),.1)
}

.icon-danger, .icon-hover-danger {
    color: var(--dx-danger)
}

    .icon-hover-danger:hover {
        fill: var(--dx-danger-bg-subtle)
    }

.icon-light {
    fill: rgba(var(--dx-light-rgb),.1)
}

.icon-hover-light, .icon-light {
    color: var(--dx-light)
}

    .icon-hover-light:hover {
        fill: var(--dx-light-bg-subtle)
    }

.icon-dark {
    fill: rgba(var(--dx-dark-rgb),.1)
}

.icon-dark, .icon-hover-dark {
    color: var(--dx-dark)
}

    .icon-hover-dark:hover {
        fill: var(--dx-dark-bg-subtle)
    }

.icon-pink {
    fill: rgba(var(--dx-pink-rgb),.1)
}

.icon-hover-pink, .icon-pink {
    color: var(--dx-pink)
}

    .icon-hover-pink:hover {
        fill: var(--dx-pink-bg-subtle)
    }

.icon-orange {
    fill: rgba(var(--dx-orange-rgb),.1)
}

.icon-hover-orange, .icon-orange {
    color: var(--dx-orange)
}

    .icon-hover-orange:hover {
        fill: var(--dx-orange-bg-subtle)
    }

.icon-indigo {
    fill: rgba(var(--dx-indigo-rgb),.1)
}

.icon-hover-indigo, .icon-indigo {
    color: var(--dx-indigo)
}

    .icon-hover-indigo:hover {
        fill: var(--dx-indigo-bg-subtle)
    }

.fill-primary {
    fill: var(--dx-primary)
}

.fill-secondary {
    fill: var(--dx-secondary)
}

.fill-success {
    fill: var(--dx-success)
}

.fill-info {
    fill: var(--dx-info)
}

.fill-warning {
    fill: var(--dx-warning)
}

.fill-danger {
    fill: var(--dx-danger)
}

.fill-light {
    fill: var(--dx-light)
}

.fill-dark {
    fill: var(--dx-dark)
}

.fill-pink {
    fill: var(--dx-pink)
}

.fill-orange {
    fill: var(--dx-orange)
}

.fill-indigo {
    fill: var(--dx-indigo)
}

.form-label {
    font-weight: 500
}

.form-control:focus {
    border-color: var(--dx-primary);
    box-shadow: none
}

.form-control-md {
    font-size: .875rem;
    padding: .375rem .75rem
}

.resize-none {
    resize: none
}

.form-control.fil-input:focus {
    border-color: var(--dx-gray-200)
}

#formFile::file-selector-button {
    background-color: var(--dx-light-bg-subtle);
    color: var(--dx-secondary-color)
}

#formFileDark::file-selector-button {
    background-color: var(--dx-gray-800);
    color: var(--dx-white)
}

#formFileSecondary::file-selector-button {
    background-color: var(--dx-secondary-bg-subtle);
    border: none;
    border-radius: 6px;
    color: var(--dx-secondary);
    font-weight: 500
}

.vscomp-ele {
    max-width: 100% !important
}

    .vscomp-ele .vscomp-wrapper {
        color: var(--dx-body-color)
    }

        .vscomp-ele .vscomp-wrapper .vscomp-toggle-button {
            background-color: var(--dx-secondary-bg);
            border: 1px solid var(--dx-border-color)
        }

        .vscomp-ele .vscomp-wrapper.focused .vscomp-toggle-button, .vscomp-ele .vscomp-wrapper:focus .vscomp-toggle-button {
            border-color: var(--dx-primary);
            box-shadow: var(--dx-box-shadow) !important
        }

        .vscomp-ele .vscomp-wrapper:not(.has-value) .vscomp-value {
            color: var(--dx-secondary-color);
            opacity: 1
        }

        .vscomp-ele .vscomp-wrapper .vscomp-arrow:after {
            border-bottom-color: var(--dx-emphasis-color);
            border-left-color: var(--dx-emphasis-color);
            border-right-color: transparent;
            margin-top: -3px
        }

        .vscomp-ele .vscomp-wrapper .checkbox-icon {
            margin-left: 10px;
            margin-right: 0
        }

            .vscomp-ele .vscomp-wrapper .checkbox-icon:after {
                border: 1px solid var(--dx-tertiary-bg)
            }

        .vscomp-ele .vscomp-wrapper.multiple .vscomp-option.selected .checkbox-icon:after {
            border: 1px solid var(--dx-primary);
            border-right-color: transparent !important;
            border-top-color: transparent !important
        }

        .vscomp-ele .vscomp-wrapper .vscomp-no-search-results, .vscomp-ele .vscomp-wrapper .vscomp-options {
            background-color: var(--dx-secondary-bg)
        }

            .vscomp-ele .vscomp-wrapper .vscomp-no-search-results .vscomp-option, .vscomp-ele .vscomp-wrapper .vscomp-options .vscomp-option {
                text-align: right
            }

                .vscomp-ele .vscomp-wrapper .vscomp-no-search-results .vscomp-option.focused, .vscomp-ele .vscomp-wrapper .vscomp-no-search-results .vscomp-option.selected, .vscomp-ele .vscomp-wrapper .vscomp-options .vscomp-option.focused, .vscomp-ele .vscomp-wrapper .vscomp-options .vscomp-option.selected {
                    background-color: var(--dx-tertiary-bg) !important
                }

        .vscomp-ele .vscomp-wrapper .vscomp-search-container {
            background-color: var(--dx-secondary-bg);
            border-bottom: 1px solid var(--dx-tertiary-bg)
        }

        .vscomp-ele .vscomp-wrapper .pop-comp-wrapper {
            box-shadow: 0 10px 15px -3px var(--dx-tertiary-bg),0 4px 6px -4px var(--dx-tertiary-bg);
            color: var(--dx-emphasis-color)
        }

        .vscomp-ele .vscomp-wrapper .vscomp-search-wrapper {
            box-shadow: none !important
        }

        .vscomp-ele .vscomp-wrapper.has-clear-button .vscomp-toggle-button {
            padding-left: 3.375rem !important
        }

        .vscomp-ele .vscomp-wrapper .vscomp-dropbox-container {
            z-index: 9999 !important
        }

        .vscomp-ele .vscomp-wrapper.show-value-as-tags .vscomp-arrow {
            height: 100%
        }

        .vscomp-ele .vscomp-wrapper.show-value-as-tags .vscomp-value {
            min-height: 100%
        }

        .vscomp-ele .vscomp-wrapper.show-value-as-tags .vscomp-value-tag {
            border: 1px solid var(--dx-border-color);
            padding: 2px 8px 2px 3px
        }

        .vscomp-ele .vscomp-wrapper.show-value-as-tags.has-value .vscomp-clear-button {
            left: 2px;
            right: auto
        }

    .vscomp-ele .vscomp-search-input::-moz-placeholder {
        color: var(--dx-secondary-color)
    }

    .vscomp-ele .vscomp-search-input::placeholder {
        color: var(--dx-secondary-color)
    }

    .vscomp-ele .vscomp-toggle-button {
        border-radius: .625rem !important;
        padding: .5938rem .625rem .5938rem 1.875rem !important
    }

    .vscomp-ele .vscomp-clear-button {
        left: 30px;
        right: auto
    }

    .vscomp-ele .vscomp-arrow {
        left: 0;
        right: auto
    }

.form-range.range-primary::-webkit-slider-thumb {
    background: var(--dx-primary)
}

.form-range.range-secondary::-webkit-slider-thumb {
    background: var(--dx-secondary)
}

.form-range.range-success::-webkit-slider-thumb {
    background: var(--dx-success)
}

.form-range.range-info::-webkit-slider-thumb {
    background: var(--dx-info)
}

.form-range.range-warning::-webkit-slider-thumb {
    background: var(--dx-warning)
}

.form-range.range-danger::-webkit-slider-thumb {
    background: var(--dx-danger)
}

.form-range.range-light::-webkit-slider-thumb {
    background: var(--dx-light)
}

.form-range.range-dark::-webkit-slider-thumb {
    background: var(--dx-dark)
}

.form-range.range-pink::-webkit-slider-thumb {
    background: var(--dx-pink)
}

.form-range.range-orange::-webkit-slider-thumb {
    background: var(--dx-orange)
}

.form-range.range-indigo::-webkit-slider-thumb {
    background: var(--dx-indigo)
}

.form-switch input[type=checkbox] {
    height: 0;
    visibility: hidden;
    width: 0
}

.form-switch input:checked + label:after {
    right: 1.4375rem
}

.form-switch label {
    border-radius: 6.25rem;
    cursor: pointer;
    height: 1.75rem;
    position: relative;
    width: 3rem
}

    .form-switch label:after {
        border-radius: 5.625rem;
        content: "";
        height: 1.25rem;
        position: absolute;
        right: .1875rem;
        top: .1875rem;
        transition: all .5s ease-in-out;
        width: 1.25rem
    }

@media (prefers-reduced-motion:reduce) {
    .form-switch label:after {
        transition: none
    }
}

[class*=switch-outline] label {
    border: 1px solid var(--dx-border-color)
}

    [class*=switch-outline] label:after {
        background: var(--dx-border-color)
    }

    [class*=switch-outline] label .rounded {
        border-radius: 2px
    }

[class*=switch-light] label, [class*=switch-soft] label {
    background-color: var(--dx-border-color);
    border: 1px solid var(--dx-border-color)
}

    [class*=switch-light] label:after, [class*=switch-soft] label:after {
        background: var(--dx-secondary-bg)
    }

[class*=switch-solid] input:checked + label:after {
    background-color: var(--dx-secondary-bg)
}

[class*=switch-solid] label {
    border: 1px solid var(--dx-border-color)
}

    [class*=switch-solid] label:after {
        background: var(--dx-border-color)
    }

[class*=switch-effect] label {
    border: 1px solid var(--dx-border-color);
    box-shadow: inset 0 2px 4px 0 var(--dx-border-color)
}

    [class*=switch-effect] label:after {
        background: var(--dx-secondary-bg);
        box-shadow: 0 10px 15px -3px rgba(var(--dx-secondary-color-rgb),.5),0 4px 6px -4px rgba(var(--dx-secondary-color-rgb),.5)
    }

.switch-square label, .switch-square label:after {
    border-radius: .625rem
}

.switch-text label:after {
    align-items: center;
    content: "N";
    display: flex;
    font-size: 12px;
    font-weight: 600;
    justify-content: center
}

.switch-text input:checked + label:after {
    color: #fff
}

.switch-icon label:after {
    content: "\ea64";
    font-family: RemixIcon
}

.switch-icon input:checked + label:after {
    content: "\ea6e"
}

.form-check {
    margin-bottom: 0;
    min-height: 1.5rem
}

    .form-check .form-check-input, .form-check .form-check-label {
        cursor: pointer
    }

    .form-check [type=checkbox]:checked {
        background-size: .65rem .65rem
    }

.card-checkbox svg {
    width: 2.375rem
}

.card-checkbox .form-check-selected {
    align-items: center;
    border: 1px solid transparent;
    cursor: pointer;
    display: flex;
    gap: .5rem
}

    .card-checkbox .form-check-selected:hover {
        background-color: var(--dx-tertiary-bg)
    }

    .card-checkbox .form-check-selected:has(:checked) {
        background-color: var(--dx-primary-bg-subtle);
        border-color: var(--dx-primary-bg-subtle);
        color: var(--dx-primary)
    }

#taskList .completed {
    color: var(--dx-secondary-color);
    text-decoration: line-through
}

.input-spin-group {
    align-items: center;
    display: flex;
    justify-content: center;
    width: 8rem
}

    .input-spin-group .input-spin {
        border-radius: 0;
        padding: 0;
        text-align: center
    }

        .input-spin-group .input-spin.form-control {
            background-color: transparent;
            border: 1px solid var(--dx-border-color);
            display: block;
            height: 2.5rem;
            width: 100%
        }

    .input-spin-group .input-spin-minus, .input-spin-group .input-spin-plus {
        align-items: center;
        background-color: transparent;
        border: 1px solid var(--dx-border-color);
        display: flex;
        flex-shrink: 0;
        height: 2.5rem;
        justify-content: center;
        transition: all .5s ease-in-out;
        width: 2.5rem
    }

@media (prefers-reduced-motion:reduce) {
    .input-spin-group .input-spin-minus, .input-spin-group .input-spin-plus {
        transition: none
    }
}

.input-spin-group .input-spin-minus svg, .input-spin-group .input-spin-plus svg {
    transition: all .5s ease-in-out
}

@media (prefers-reduced-motion:reduce) {
    .input-spin-group .input-spin-minus svg, .input-spin-group .input-spin-plus svg {
        transition: none
    }
}

.input-spin-group .input-spin-minus:where([dir=ltr],[dir=ltr] *) {
    border-bottom-right-radius: .375rem;
    border-left-width: 0;
    border-top-right-radius: .375rem
}

.input-spin-group .input-spin-plus:where([dir=ltr],[dir=ltr] *) {
    border-bottom-left-radius: .375rem;
    border-right-width: 0;
    border-top-left-radius: .375rem
}

.ql-snow .ql-editor h2 {
    line-height: 2
}

.ql-container {
    height: 13rem !important
}

:is(.ql-toolbar,.ql-container) .ql-snow {
    border-color: var(--dx-border-color) !important
}

.ql-snow .ql-picker {
    color: var(--dx-body-color)
}

.ql-snow .ql-stroke {
    stroke: var(--dx-body-color)
}

.ql-snow .ql-picker-options {
    background-color: var(--dx-secondary-bg)
}

:is(.ql-toolbar,.ql-container).ql-snow {
    border-color: var(--dx-border-color)
}

.ql-toolbar.ql-snow .ql-picker.ql-expanded :is(.ql-picker-label,.ql-picker-options) {
    border-color: var(--dx-border-color)
}

.codex-editor .codex-editor__redactor {
    padding-bottom: 0 !important
}

.codex-editor :is(.ce-toolbar__plus,.ce-toolbar__settings-btn) {
    color: var(--dx-body-color)
}

@media (hover:hover) {
    .codex-editor :is(.ce-toolbar__settings-btn,.ce-toolbar__plus):hover {
        background-color: var(--dx-tertiary-bg)
    }
}

.codex-editor .ce-block--selected .ce-block__content {
    background-color: var(--dx-primary-bg-subtle)
}

.codex-editor .ce-popover {
    --color-background: var(--dx-secondary-bg);
    --color-border: var(--dx-border-color);
    --color-text-primary: var(--dx-body-color);
    --color-text-secondary: var(--dx-secondary-color);
    --color-background-item-hover: var(--dx-tertiary-bg)
}

.codex-editor .cdx-marker {
    background-color: var(--dx-warning-bg-subtle)
}

.codex-editor .cdx-search-field {
    background-color: var(--dx-tertiary-bg);
    border-color: var(--dx-border-color)
}

.cdx-block .cdx-attaches {
    --color-line: var(--dx-border-color);
    --color-bg: var(--dx-secondary-bg);
    --color-bg-secondary: var(--dx-tertiary-bg);
    --color-bg-secondary--hover: var(--dx-tertiary-bg);
    --color-text-secondary: var(--dx-secondary-color)
}

@media (max-width:650px) {
    :is(.ce-toolbar__settings-btn,.ce-toolbar__plus) {
        background-color: var(--dx-secondary-bg);
        border-color: var(--dx-border-color)
    }
}

th {
    font-weight: 500
}

.border-separate {
    border-collapse: separate
}

    .border-separate tr :is(td,th) {
        border: 1px solid var(--dx-border-color)
    }

    .border-separate.border-spacing-2 {
        border-spacing: .25rem
    }

.table-separate {
    border-collapse: separate !important;
    border-spacing: 0 8px !important
}

    .table-separate td {
        border-bottom: 1px solid var(--dx-border-color);
        border-top: 1px solid var(--dx-border-color)
    }

        .table-separate td:first-child {
            border-bottom-right-radius: .625rem;
            border-right: 1px solid var(--dx-border-color);
            border-top-right-radius: .625rem
        }

        .table-separate td:last-child {
            border-bottom-left-radius: .625rem;
            border-left: 1px solid var(--dx-border-color);
            border-top-left-radius: .625rem
        }

.table-striped-even > tbody > tr:nth-child(2n) > td {
    background-color: var(--dx-tertiary-bg)
}

.table-color-primary {
    --dx-table-striped-bg: var(--dx-primary-bg-subtle)
}

.table-primary {
    --dx-table-color: var(--dx-body-color);
    --dx-table-bg: rgba(var(--dx-primary-rgb),0.15);
    --dx-table-border-color: rgba(var(--dx-primary-rgb),0.35);
    --dx-table-striped-bg: rgba(var(--dx-primary-rgb),0.1);
    --dx-table-active-bg: rgba(var(--dx-primary-rgb),0.1);
    --dx-table-hover-bg: rgba(var(--dx-primary-rgb),0.1)
}

.table-color-secondary {
    --dx-table-striped-bg: var(--dx-secondary-bg-subtle)
}

.table-secondary {
    --dx-table-color: var(--dx-body-color);
    --dx-table-bg: rgba(var(--dx-secondary-rgb),0.15);
    --dx-table-border-color: rgba(var(--dx-secondary-rgb),0.35);
    --dx-table-striped-bg: rgba(var(--dx-secondary-rgb),0.1);
    --dx-table-active-bg: rgba(var(--dx-secondary-rgb),0.1);
    --dx-table-hover-bg: rgba(var(--dx-secondary-rgb),0.1)
}

.table-color-success {
    --dx-table-striped-bg: var(--dx-success-bg-subtle)
}

.table-success {
    --dx-table-color: var(--dx-body-color);
    --dx-table-bg: rgba(var(--dx-success-rgb),0.15);
    --dx-table-border-color: rgba(var(--dx-success-rgb),0.35);
    --dx-table-striped-bg: rgba(var(--dx-success-rgb),0.1);
    --dx-table-active-bg: rgba(var(--dx-success-rgb),0.1);
    --dx-table-hover-bg: rgba(var(--dx-success-rgb),0.1)
}

.table-color-info {
    --dx-table-striped-bg: var(--dx-info-bg-subtle)
}

.table-info {
    --dx-table-color: var(--dx-body-color);
    --dx-table-bg: rgba(var(--dx-info-rgb),0.15);
    --dx-table-border-color: rgba(var(--dx-info-rgb),0.35);
    --dx-table-striped-bg: rgba(var(--dx-info-rgb),0.1);
    --dx-table-active-bg: rgba(var(--dx-info-rgb),0.1);
    --dx-table-hover-bg: rgba(var(--dx-info-rgb),0.1)
}

.table-color-warning {
    --dx-table-striped-bg: var(--dx-warning-bg-subtle)
}

.table-warning {
    --dx-table-color: var(--dx-body-color);
    --dx-table-bg: rgba(var(--dx-warning-rgb),0.15);
    --dx-table-border-color: rgba(var(--dx-warning-rgb),0.35);
    --dx-table-striped-bg: rgba(var(--dx-warning-rgb),0.1);
    --dx-table-active-bg: rgba(var(--dx-warning-rgb),0.1);
    --dx-table-hover-bg: rgba(var(--dx-warning-rgb),0.1)
}

.table-color-danger {
    --dx-table-striped-bg: var(--dx-danger-bg-subtle)
}

.table-danger {
    --dx-table-color: var(--dx-body-color);
    --dx-table-bg: rgba(var(--dx-danger-rgb),0.15);
    --dx-table-border-color: rgba(var(--dx-danger-rgb),0.35);
    --dx-table-striped-bg: rgba(var(--dx-danger-rgb),0.1);
    --dx-table-active-bg: rgba(var(--dx-danger-rgb),0.1);
    --dx-table-hover-bg: rgba(var(--dx-danger-rgb),0.1)
}

.table-color-light {
    --dx-table-striped-bg: var(--dx-light-bg-subtle)
}

.table-light {
    --dx-table-color: var(--dx-body-color);
    --dx-table-bg: rgba(var(--dx-light-rgb),0.15);
    --dx-table-border-color: rgba(var(--dx-light-rgb),0.35);
    --dx-table-striped-bg: rgba(var(--dx-light-rgb),0.1);
    --dx-table-active-bg: rgba(var(--dx-light-rgb),0.1);
    --dx-table-hover-bg: rgba(var(--dx-light-rgb),0.1)
}

.table-color-dark {
    --dx-table-striped-bg: var(--dx-dark-bg-subtle)
}

.table-dark {
    --dx-table-color: var(--dx-body-color);
    --dx-table-bg: rgba(var(--dx-dark-rgb),0.15);
    --dx-table-border-color: rgba(var(--dx-dark-rgb),0.35);
    --dx-table-striped-bg: rgba(var(--dx-dark-rgb),0.1);
    --dx-table-active-bg: rgba(var(--dx-dark-rgb),0.1);
    --dx-table-hover-bg: rgba(var(--dx-dark-rgb),0.1)
}

.table-color-pink {
    --dx-table-striped-bg: var(--dx-pink-bg-subtle)
}

.table-pink {
    --dx-table-color: var(--dx-body-color);
    --dx-table-bg: rgba(var(--dx-pink-rgb),0.15);
    --dx-table-border-color: rgba(var(--dx-pink-rgb),0.35);
    --dx-table-striped-bg: rgba(var(--dx-pink-rgb),0.1);
    --dx-table-active-bg: rgba(var(--dx-pink-rgb),0.1);
    --dx-table-hover-bg: rgba(var(--dx-pink-rgb),0.1)
}

.table-color-orange {
    --dx-table-striped-bg: var(--dx-orange-bg-subtle)
}

.table-orange {
    --dx-table-color: var(--dx-body-color);
    --dx-table-bg: rgba(var(--dx-orange-rgb),0.15);
    --dx-table-border-color: rgba(var(--dx-orange-rgb),0.35);
    --dx-table-striped-bg: rgba(var(--dx-orange-rgb),0.1);
    --dx-table-active-bg: rgba(var(--dx-orange-rgb),0.1);
    --dx-table-hover-bg: rgba(var(--dx-orange-rgb),0.1)
}

.table-color-indigo {
    --dx-table-striped-bg: var(--dx-indigo-bg-subtle)
}

.table-indigo {
    --dx-table-color: var(--dx-body-color);
    --dx-table-bg: rgba(var(--dx-indigo-rgb),0.15);
    --dx-table-border-color: rgba(var(--dx-indigo-rgb),0.35);
    --dx-table-striped-bg: rgba(var(--dx-indigo-rgb),0.1);
    --dx-table-active-bg: rgba(var(--dx-indigo-rgb),0.1);
    --dx-table-hover-bg: rgba(var(--dx-indigo-rgb),0.1)
}

.table-card {
    margin-left: calc(var(--dx-spacer)*-1);
    margin-right: calc(var(--dx-spacer)*-1)
}

    .table-card :is(th,td):first-child {
        padding-right: var(--dx-spacer) !important
    }

    .table-card :is(th,td):last-child {
        padding-left: var(--dx-spacer) !important
    }

.form-wizard .step-indicators {
    display: flex;
    gap: 1rem
}

.form-wizard .step-dot {
    align-items: center;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: .5rem
}

    .form-wizard .step-dot .step-number {
        background: var(--dx-tertiary-bg);
        color: var(--dx-secondary-color);
        font-size: .875rem;
        font-weight: var(--dx-font-weight-semibold);
        transition: all .5s ease-in-out
    }

@media (prefers-reduced-motion:reduce) {
    .form-wizard .step-dot .step-number {
        transition: none
    }
}

.form-wizard .step-dot.active .step-number {
    background: linear-gradient(-135deg,var(--dx-primary) 0,var(--dx-secondary) 100%);
    color: #fff
}

.form-wizard .step-dot.completed .step-number {
    background: var(--dx-success-bg-subtle);
    color: var(--dx-success)
}

.form-wizard .requirement-item.valid {
    color: var(--dx-success)
}

.form-wizard .requirement-item.invalid {
    color: var(--dx-danger)
}

.form-wizard .success-animation {
    animation: bounceIn .8s ease-out
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(.3)
    }

    50% {
        opacity: 1;
        transform: scale(1.05)
    }

    70% {
        transform: scale(.9)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

.apexcharts-tooltip.apexcharts-theme-light {
    background: var(--dx-secondary-bg) !important;
    border: 1px solid var(--dx-border-color) !important;
    border-radius: .375rem;
    box-shadow: var(--dx-box-shadow)
}

    .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
        background-color: var(--dx-secondary-bg) !important;
        border-bottom: 0 !important;
        font-family: var(--dx-font-sans-serif) !important;
        font-weight: 600;
        padding-bottom: 0 !important
    }

    .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-text {
        font-size: .75rem
    }

.apexcharts-datalabel {
    font-family: var(--dx-font-sans-serif) !important
}

:is(.apexcharts-text,.apexcharts-title-text,.apexcharts-xaxis-label) {
    font-family: var(--dx-font-sans-serif) !important;
    fill: var(--dx-body-color) !important
}

.apexcharts-legend-text {
    color: var(--dx-body-color) !important;
    font-size: .75rem
}

.apexcharts-tooltip-rangebar .category {
    color: var(--dx-secondary-color) !important
}

:is(.apexcharts-xaxistooltip,.apexcharts-yaxistooltip) {
    background-color: var(--dx-secondary-bg) !important;
    border: 1px solid var(--dx-border-color) !important;
    color: var(--dx-emphasis-color) !important;
    font-size: .75rem
}

.apexcharts-xaxistooltip-bottom:before {
    border-bottom: 1px solid var(--dx-secondary-bg) !important
}

:is(.apexcharts-gridline,.apexcharts-xcrosshairs,.apexcharts-xaxis-tick) {
    stroke: var(--dx-border-color) !important
}

.apexcharts-grid-borders line, .apexcharts-xaxis line {
    stroke: var(--dx-light-bg-subtle)
}

.apexcharts-series-markers :is(circle,path) {
    stroke: var(--dx-secondary-bg)
}

.apexcharts-bar-series path {
    stroke: var(--dx-secondary-bg)
}

.apexcharts-boxPlot-series path {
    stroke: var(--dx-light-bg-subtle)
}

:is(.apexcharts-heatmap,.apexcharts-treemap) rect {
    stroke: var(--dx-secondary-bg)
}

.apexcharts-pie-series path {
    stroke: var(--dx-secondary-bg)
}

.apexcharts-pie-label {
    fill: #fff !important
}

.apexcharts-pie :is(line,circle) {
    stroke: transparent
}

.apexcharts-radar-series :is(polygon,line) {
    stroke: var(--dx-border-color)
}

.apexcharts-radialbar-track path {
    stroke: var(--dx-custom-bg)
}

.apexcharts-data-labels rect {
    stroke: var(--dx-light-bg-subtle)
}

.apexcharts-menu {
    background-color: var(--dx-secondary-bg) !important;
    border-color: var(--dx-border-color) !important
}

.jvm-container path {
    fill: var(--dx-border-color)
}

.jvm-zoom-btn.jvm-zoomin {
    top: .625rem
}

.jvm-zoom-btn:where([dir=ltr],[dir=ltr] *) {
    right: .625rem
}

.jvm-zoom-btn.jvm-zoomout {
    top: 1.75rem
}

.jvm-zoom-btn {
    align-items: center;
    background-color: var(--dx-dark);
    border-radius: .375rem;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: flex;
    height: .875rem;
    justify-content: center;
    line-height: 10px;
    position: absolute;
    width: .875rem
}

.jvm-legend {
    background-color: var(--dx-secondary-bg);
    border-radius: 5px;
    box-shadow: 0 10px 15px -3px var(--dx-tertiary-bg),0 4px 6px -4px var(--dx-tertiary-bg);
    display: inline-block;
    float: inline-end;
    padding: 10px
}

    .jvm-legend .jvm-legend-title {
        margin-bottom: 9px
    }

    .jvm-legend .jvm-legend-tick {
        align-items: center;
        display: flex;
        gap: 7px;
        margin-top: 10px
    }

        .jvm-legend .jvm-legend-tick .jvm-legend-tick-sample {
            border-radius: 999px;
            height: 14px;
            width: 14px
        }

        .jvm-legend .jvm-legend-tick .jvm-legend-tick-text {
            font-size: 12px
        }

#jvm-markers-labels-group .jvm-element {
    fill: var(--dx-secondary-color)
}

div.air-datepicker {
    --adp-color: var(--dx-secondary-color);
    --adp-font-family: var(--dx-body-font-family);
    --adp-background-color: var(--dx-secondary-bg);
    --adp-border-color-inline: var(--dx-border-color);
    --adp-border-color-inner: var(--dx-border-color);
    --adp-border-color: var(--dx-border-color);
    --adp-color-current-date: var(--dx-primary);
    --adp-accent-color: var(--dx-primary);
    --adp-btn-color: var(--dx-primary);
    --adp-cell-background-color-selected: var(--dx-primary);
    --adp-cell-background-color-selected-hover: var(--dx-primary);
    --adp-background-color-chover: var(--dx-tertiary-bg);
    --adp-background-color-hover: var(--dx-tertiary-bg);
    --adp-background-color-active: var(--dx-tertiary-bg);
    --adp-color-secondary: var(--dx-secondary-color);
    --adp-color-other-month: var(--dx-tertiary-color);
    --adp-day-name-color: var(--dx-secondary-color);
    --adp-time-track-color: var(--dx-secondary-color);
    --adp-time-track-color-hover: var(--dx-body-color);
    --adp-cell-background-color-in-range: var(--dx-primary-bg-subtle);
    --adp-cell-background-color-in-range-hover: var(--dx-primary-bg-subtle);
    direction: rtl
}

.air-datepicker {
    box-shadow: var(--dx-box-shadow) !important
}

    .air-datepicker .air-datepicker-body--day-names {
        background-color: var(--dx-tertiary-bg);
        font-weight: var(--dx-font-weight-semibold);
        margin: 0 0 3px;
        padding: 3px 0
    }

    .air-datepicker .air-datepicker--pointer:after {
        background: var(--dx-secondary-bg)
    }

.air-datepicker-global-container {
    z-index: 1055
}

html * {
    unicode-bidi: bidi-override
}

.filepond--drip-blob, .filepond--panel-root {
    background: var(--dx-tertiary-bg) !important;
    border: 1px solid var(--dx-border-color)
}

.filepond--drop-label {
    color: var(--dx-secondary-color) !important;
    cursor: pointer
}

    .filepond--drop-label.filepond--drop-label label {
        padding: .7rem !important
    }

.filepond--file {
    color: var(--dx-body-color) !important
}

    .filepond--file .filepond--image-preview {
        background: var(--dx-secondary-bg);
        border: 1px solid var(--dx-border-color);
        border-radius: .625rem;
        box-shadow: none
    }

    .filepond--file .filepond--image-preview-overlay {
        display: none
    }

    .filepond--file .filepond--file-action-button {
        background-color: var(--dx-tertiary-bg);
        color: var(--dx-secondary-color)
    }

.filepond--item-panel {
    background-color: transparent !important
}

.filepond--item > .filepond--panel .filepond--panel-bottom {
    box-shadow: none !important
}

.file-upload-invoice .filepond--root, .file-upload-invoice .filepond--root .filepond--drop-label {
    height: 152px !important
}

.file-upload-invoice .filepond--image-preview-wrapper {
    height: 120px !important
}

.gridjs-container {
    color: var(--dx-body-color)
}

    .gridjs-container .gridjs-wrapper {
        border: 1px solid var(--dx-border-color);
        border-radius: 0;
        box-shadow: none
    }

    .gridjs-container th.gridjs-th {
        background-color: var(--dx-tertiary-bg);
        color: var(--dx-secondary-color)
    }

    .gridjs-container td.gridjs-td, .gridjs-container th.gridjs-th {
        border-color: var(--dx-border-color);
        padding: .875rem .75rem
    }

    .gridjs-container :is(.gridjs-tbody,td.gridjs-td) {
        background-color: var(--dx-secondary-bg)
    }

    .gridjs-container .gridjs-footer {
        background-color: var(--dx-secondary-bg);
        border: 1px solid var(--dx-border-color);
        border-radius: 0;
        border-top: none;
        box-shadow: none
    }

    .gridjs-container .gridjs-pagination {
        color: var(--dx-secondary-color)
    }

        .gridjs-container .gridjs-pagination .gridjs-pages {
            align-items: center;
            display: flex;
            flex-wrap: wrap;
            gap: .5rem
        }

@media (max-width:575.98px) {
    .gridjs-container .gridjs-pagination .gridjs-pages {
        margin-top: .75rem
    }
}

.gridjs-container .gridjs-pagination .gridjs-pages button {
    align-items: center;
    background-color: var(--dx-secondary-bg);
    border: 1px solid var(--dx-border-color);
    border-radius: var(--dx-border-radius);
    color: var(--dx-body-color);
    display: flex;
    height: 2.25rem;
    justify-content: center;
    padding: 0;
    width: 2.25rem
}

    .gridjs-container .gridjs-pagination .gridjs-pages button:is(:last-child,:first-child) {
        border: 1px solid var(--dx-border-color);
        padding: 0 .79rem;
        width: auto
    }

    .gridjs-container .gridjs-pagination .gridjs-pages button.gridjs-currentPage {
        background-color: var(--dx-primary);
        border-color: var(--dx-primary);
        color: #fff
    }

    .gridjs-container .gridjs-pagination .gridjs-pages button:focus {
        border-color: var(--dx-border-color);
        box-shadow: none
    }

    .gridjs-container .gridjs-pagination .gridjs-pages button:disabled, .gridjs-container .gridjs-pagination .gridjs-pages button:hover:disabled, .gridjs-container .gridjs-pagination .gridjs-pages button[disabled] {
        background-color: var(--dx-secondary-bg);
        color: var(--dx-secondary-color)
    }

.gridjs-container input.gridjs-input {
    background-color: var(--dx-secondary-bg);
    border-color: var(--dx-border-color);
    font-size: var(--dx-body-font-size);
    padding: .594rem 1rem
}

    .gridjs-container input.gridjs-input:focus {
        border-color: var(--dx-primary);
        box-shadow: none
    }

    .gridjs-container input.gridjs-input::-moz-placeholder {
        color: var(--dx-secondary-color)
    }

    .gridjs-container input.gridjs-input::placeholder {
        color: var(--dx-secondary-color)
    }

:root {
    --swal2-background: var(--dx-secondary-bg);
    --swal2-color: var(--dx-body-color);
    --swal2-footer-border-color: var(--dx-border-color);
    --swal2-close-button-color: var(--dx-secondary-color)
}

div:where(.swal2-icon).swal2-success {
    border-color: var(--dx-success-border-subtle);
    color: var(--dx-success)
}

    div:where(.swal2-icon).swal2-success .swal2-success-ring {
        border-color: var(--dx-success-border-subtle)
    }

    div:where(.swal2-icon).swal2-success [class^=swal2-success-line] {
        background-color: var(--dx-success)
    }

div:where(.swal2-icon).swal2-error {
    border-color: var(--dx-danger-border-subtle);
    color: var(--dx-danger)
}

    div:where(.swal2-icon).swal2-error [class^=swal2-x-mark-line] {
        background-color: var(--dx-danger)
    }

div:where(.swal2-icon).swal2-warning {
    border-color: var(--dx-warning-border-subtle);
    color: var(--dx-warning)
}

div:where(.swal2-icon).swal2-info {
    border-color: var(--dx-info-border-subtle);
    color: var(--dx-info)
}

div:where(.swal2-icon).swal2-question {
    border-color: var(--dx-secondary-border-subtle);
    color: var(--dx-secondary)
}

div:where(.swal2-container) input:where(.swal2-file), div:where(.swal2-container) input:where(.swal2-input), div:where(.swal2-container) textarea:where(.swal2-textarea) {
    background: var(--dx-secondary-bg);
    border-color: var(--dx-border-color);
    border-radius: var(--dx-border-radius);
    box-shadow: none;
    color: var(--dx-body-color);
    font-size: var(--dx-body-font-size)
}

    div:where(.swal2-container) input:where(.swal2-file):focus, div:where(.swal2-container) input:where(.swal2-input):focus, div:where(.swal2-container) textarea:where(.swal2-textarea):focus {
        border-color: var(--dx-primary);
        box-shadow: none
    }

div:where(.swal2-container) h2:where(.swal2-title) {
    font-size: calc(var(--dx-body-font-size)*1.75);
    margin-bottom: .5rem
}

div:where(.swal2-container).swal2-backdrop-show, div:where(.swal2-container).swal2-noanimation {
    backdrop-filter: blur(4px);
    background-color: rgba(16,24,40,.4)
}

div:where(.swal2-container) div:where(.swal2-validation-message) {
    background-color: var(--dx-tertiary-bg);
    color: var(--dx-secondary-color)
}

    div:where(.swal2-container) div:where(.swal2-validation-message):before {
        background-color: var(--dx-danger)
    }

.noUi-connect {
    background-color: var(--dx-primary)
}

.noUi-horizontal {
    background: none;
    border-color: var(--dx-border-color);
    box-shadow: none;
    height: 12px
}

    .noUi-horizontal .noUi-handle {
        height: 1.5rem;
        left: -.25rem;
        top: -8px;
        width: .5rem
    }

.noUi-handle {
    box-shadow: none
}

    .noUi-handle:after, .noUi-handle:before {
        display: none
    }

.noUi-marker {
    background-color: var(--dx-tertiary-bg)
}

.noUi-value-sub {
    color: var(--dx-text-muted)
}

.noUi-handle {
    background: var(--dx-secondary-bg);
    border: 1px solid var(--dx-border-color)
}

.noUi-pips {
    color: var(--dx-secondary-color)
}

.noUi-tooltip {
    background: var(--dx-secondary-bg);
    border: 1px solid var(--dx-border-color);
    color: var(--dx-emphasis-color)
}

.c-1-color {
    background: var(--dx-danger)
}

.c-2-color {
    background: var(--dx-warning)
}

.c-3-color {
    background: var(--dx-success)
}

.c-4-color {
    background: var(--dx-primary)
}

#slider-toggle {
    height: 50px
}

    #slider-toggle.off .noUi-handle {
        background-color: var(--dx-danger);
        border-radius: .3125rem
    }

.noUi-target {
    background: var(--dx-secondary-bg);
    border: 1px solid var(--dx-border-color);
    box-shadow: none
}

#blue, #green, #red {
    display: inline-block;
    height: 200px;
    margin: 1.25rem
}

#colorpicker {
    border: 1px solid #bfbfbf;
    height: 240px;
    margin: 0 auto;
    padding: 10px;
    width: 310px
}

#result {
    background: #7f7f7f;
    border-radius: .375rem;
    color: #7f7f7f;
    display: inline-block;
    height: 128px;
    margin: 2.5rem;
    vertical-align: top;
    width: 128px
}

#red .noUi-connect {
    background: var(--dx-danger)
}

#green .noUi-connect {
    background: var(--dx-success)
}

#blue .noUi-connect {
    background: var(--dx-info)
}

.tippy-box {
    background-color: var(--dx-body-color);
    color: var(--dx-secondary-bg);
    font-size: .8477rem
}

.tippy-arrow {
    color: var(--dx-body-color)
}

.vis-panel.vis-bottom, .vis-panel.vis-center, .vis-panel.vis-left, .vis-panel.vis-right, .vis-panel.vis-top, .vis-timeline {
    border-color: var(--dx-border-color)
}

:is(.vis-labelset .vis-label,.vis-foreground .vis-group) {
    border-color: var(--dx-border-color)
}

.vis-item {
    background-color: var(--dx-primary-bg-subtle);
    border-color: rgba(var(--dx-primary-rgb),.4);
    color: var(--dx-body-color)
}

:is(.vis-time-axis .vis-text,.vis-labelset .vis-label) {
    color: var(--dx-secondary-color)
}

#visualization2 div.vis-readonly, #visualization2 div.vis-readonly.vis-selected {
    background-color: var(--dx-danger-bg-subtle);
    border-color: rgba(var(--dx-danger-rgb),.4)
}

.vis-item.vis-selected {
    background-color: var(--dx-warning-bg-subtle)
}

.vis-time-axis .vis-grid.vis-minor {
    border-color: var(--dx-border-color)
}

.dt-container .dt-layout-table {
    margin-top: 20px !important
}

.dt-container .row {
    gap: 10px
}

.dt-container .pagination {
    align-items: center;
    display: inline-flex;
    flex-wrap: wrap;
    gap: .5rem
}

    .dt-container .pagination .page-item:not(:first-child) .page-link {
        align-items: center;
        border-radius: .375rem;
        border-width: 1px;
        display: flex;
        height: 2.25rem;
        justify-content: center;
        width: 2.25rem
    }

.dt-container .table-light {
    background-color: var(--dx-tertiary-bg)
}

.dt-container table.dataTable td.dt-empty, .dt-container table.dataTable td.dt-type-date, .dt-container table.dataTable th.dt-type-date, .dt-container table.dataTable th.dt-type-numeric, .dt-container td.dt-type-numeric {
    text-align: right !important
}

.dt-container table.dataTable thead:hover > tr > th.dt-orderable-asc:hover, .dt-container table.dataTable thead > tr > th.dt-orderable-desc:hover {
    outline: none
}

.dt-container .table-striped-even > tbody > tr:nth-child(2n) > td, .dt-container .table.hovered tr:hover {
    background-color: var(--dx-tertiary-bg)
}

.profile-widget {
    background-image: url(https://srbthemes.kcubeinfotech.com/semidash/images/gallery/profile.webp);
    background-position: 50%;
    background-size: cover;
    height: 300px
}

.profile-avatar .profile-avatar-wrapper {
    border-radius: 50rem;
    padding: .25rem;
    position: relative
}

.profile-avatar .profile-avatar-img {
    border: 3px solid var(--dx-secondary-bg);
    border-radius: 50rem
}

.profile-avatar .profile-avatar-dot {
    border: 2px solid var(--dx-secondary-bg);
    border-radius: 50rem;
    bottom: .875rem;
    left: .875rem;
    position: absolute
}

.payment-gradient {
    backdrop-filter: blur(10px);
    background: linear-gradient(to bottom,rgba(var(--dx-primary-rgb),.1),rgba(var(--dx-danger-rgb),.05),rgba(var(--dx-secondary-bg-rgb),0))
}

    .payment-gradient img {
        height: 2.5rem
    }

.form-control.pattern-input {
    border: none
}

    .form-control.pattern-input:focus {
        background-color: var(--dx-secondary-bg) !important;
        border: 1px solid var(--dx-primary);
        box-shadow: 0 8px 24px hsla(210,8%,62%,.1)
    }

.timeline-horizontal {
    position: relative
}

    .timeline-horizontal .timeline-line {
        background-color: var(--dx-border-color);
        border-radius: .625rem;
        position: absolute;
        top: 15px;
        inset-inline: 0
    }

    .timeline-horizontal .timeline-box {
        min-width: 120px
    }

        .timeline-horizontal .timeline-box .dot {
            position: absolute;
            right: 50%;
            top: 16px
        }

.img-scale-skew {
    transition: all .5s ease-in-out
}

@media (prefers-reduced-motion:reduce) {
    .img-scale-skew {
        transition: none
    }
}

.img-scale-skew:hover {
    transform: scale(1.05) skewX(-3deg)
}

.friends-card .avatar {
    border: 3px solid var(--dx-secondary-bg);
    box-shadow: var(--dx-shadow);
    display: inline-block;
    overflow: hidden
}

.rounded-modern {
    border-radius: 70% 30% 30% 70%/30% 30% 70% 70%
}

.bg-gradient-b-primary {
    background-image: linear-gradient(to top,rgba(var(--dx-primary-rgb),.1),rgba(var(--dx-primary-rgb),0))
}

.bg-gradient-b-secondary {
    background-image: linear-gradient(to top,rgba(var(--dx-secondary-rgb),.1),rgba(var(--dx-secondary-rgb),0))
}

.bg-gradient-b-success {
    background-image: linear-gradient(to top,rgba(var(--dx-success-rgb),.1),rgba(var(--dx-success-rgb),0))
}

.bg-gradient-b-info {
    background-image: linear-gradient(to top,rgba(var(--dx-info-rgb),.1),rgba(var(--dx-info-rgb),0))
}

.bg-gradient-b-warning {
    background-image: linear-gradient(to top,rgba(var(--dx-warning-rgb),.1),rgba(var(--dx-warning-rgb),0))
}

.bg-gradient-b-danger {
    background-image: linear-gradient(to top,rgba(var(--dx-danger-rgb),.1),rgba(var(--dx-danger-rgb),0))
}

.bg-gradient-b-light {
    background-image: linear-gradient(to top,rgba(var(--dx-light-rgb),.1),rgba(var(--dx-light-rgb),0))
}

.bg-gradient-b-dark {
    background-image: linear-gradient(to top,rgba(var(--dx-dark-rgb),.1),rgba(var(--dx-dark-rgb),0))
}

.bg-gradient-b-pink {
    background-image: linear-gradient(to top,rgba(var(--dx-pink-rgb),.1),rgba(var(--dx-pink-rgb),0))
}

.bg-gradient-b-orange {
    background-image: linear-gradient(to top,rgba(var(--dx-orange-rgb),.1),rgba(var(--dx-orange-rgb),0))
}

.bg-gradient-b-indigo {
    background-image: linear-gradient(to top,rgba(var(--dx-indigo-rgb),.1),rgba(var(--dx-indigo-rgb),0))
}

.line-clamp-5 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical
}

.blur-2xl {
    filter: blur(40px)
}

.pricing-tag {
    left: var(--dx-spacer);
    position: absolute;
    top: var(--dx-spacer)
}

.avatar-blur {
    position: relative
}

    .avatar-blur .avatar-blur-wrapper {
        filter: blur(12px);
        position: absolute;
        top: 0;
        z-index: 0
    }

    .avatar-blur .icon {
        position: relative;
        z-index: 1
    }

.grid-pricing {
    top: 59%
}

    .grid-pricing img {
        opacity: .05;
        transform: rotate(-45deg)
    }

.auth-wrapper {
    background: linear-gradient(to right,rgba(var(--dx-info-rgb),.1),rgba(var(--dx-success-rgb),.05),rgba(var(--dx-pink-rgb),.05))
}

.contact-info-card {
    background-color: color-mix(in srgb,var(--dx-primary) 95%,#000 5%);
    position: relative
}

    .contact-info-card :is(.circle-1,.circle-2) {
        border: 1px solid rgba(var(--dx-white-rgb),.15);
        border-radius: 50rem;
        height: 200px;
        position: absolute;
        width: 200px;
        z-index: 0
    }

    .contact-info-card .circle-1 {
        bottom: -50px;
        left: -50px
    }

    .contact-info-card .circle-2 {
        bottom: -100px;
        left: 30px
    }

    .contact-info-card .circle-3 {
        border: 1px solid rgba(var(--dx-white-rgb),.15);
        border-radius: .4rem;
        bottom: 30px;
        height: 30px;
        left: 85px;
        position: absolute;
        transform: rotate(-45deg);
        width: 30px
    }

.contactUs-three .check-primary .form-check-input:checked + .form-check-label {
    background-color: var(--dx-primary-bg-subtle);
    border-color: rgba(var(--dx-primary-rgb),.5)
}

.contactUs-three .check-secondary .form-check-input:checked + .form-check-label {
    background-color: var(--dx-secondary-bg-subtle);
    border-color: rgba(var(--dx-secondary-rgb),.5)
}

.contactUs-three .check-success .form-check-input:checked + .form-check-label {
    background-color: var(--dx-success-bg-subtle);
    border-color: rgba(var(--dx-success-rgb),.5)
}

.contactUs-three .check-info .form-check-input:checked + .form-check-label {
    background-color: var(--dx-info-bg-subtle);
    border-color: rgba(var(--dx-info-rgb),.5)
}

.contactUs-three .check-warning .form-check-input:checked + .form-check-label {
    background-color: var(--dx-warning-bg-subtle);
    border-color: rgba(var(--dx-warning-rgb),.5)
}

.contactUs-three .check-danger .form-check-input:checked + .form-check-label {
    background-color: var(--dx-danger-bg-subtle);
    border-color: rgba(var(--dx-danger-rgb),.5)
}

.contactUs-three .check-light .form-check-input:checked + .form-check-label {
    background-color: var(--dx-light-bg-subtle);
    border-color: rgba(var(--dx-light-rgb),.5)
}

.contactUs-three .check-dark .form-check-input:checked + .form-check-label {
    background-color: var(--dx-dark-bg-subtle);
    border-color: rgba(var(--dx-dark-rgb),.5)
}

.contactUs-three .check-pink .form-check-input:checked + .form-check-label {
    background-color: var(--dx-pink-bg-subtle);
    border-color: rgba(var(--dx-pink-rgb),.5)
}

.contactUs-three .check-orange .form-check-input:checked + .form-check-label {
    background-color: var(--dx-orange-bg-subtle);
    border-color: rgba(var(--dx-orange-rgb),.5)
}

.contactUs-three .check-indigo .form-check-input:checked + .form-check-label {
    background-color: var(--dx-indigo-bg-subtle);
    border-color: rgba(var(--dx-indigo-rgb),.5)
}

.contactUs-three .form-check-label {
    background-color: var(--dx-secondary-bg);
    border: 1px solid var(--dx-border-color)
}

.bg-gradient-t-primary {
    background-image: linear-gradient(to bottom,rgba(var(--dx-primary-rgb),.1),rgba(var(--dx-primary-rgb),0))
}

.bg-gradient-t-secondary {
    background-image: linear-gradient(to bottom,rgba(var(--dx-secondary-rgb),.1),rgba(var(--dx-secondary-rgb),0))
}

.bg-gradient-t-success {
    background-image: linear-gradient(to bottom,rgba(var(--dx-success-rgb),.1),rgba(var(--dx-success-rgb),0))
}

.bg-gradient-t-info {
    background-image: linear-gradient(to bottom,rgba(var(--dx-info-rgb),.1),rgba(var(--dx-info-rgb),0))
}

.bg-gradient-t-warning {
    background-image: linear-gradient(to bottom,rgba(var(--dx-warning-rgb),.1),rgba(var(--dx-warning-rgb),0))
}

.bg-gradient-t-danger {
    background-image: linear-gradient(to bottom,rgba(var(--dx-danger-rgb),.1),rgba(var(--dx-danger-rgb),0))
}

.bg-gradient-t-light {
    background-image: linear-gradient(to bottom,rgba(var(--dx-light-rgb),.1),rgba(var(--dx-light-rgb),0))
}

.bg-gradient-t-dark {
    background-image: linear-gradient(to bottom,rgba(var(--dx-dark-rgb),.1),rgba(var(--dx-dark-rgb),0))
}

.bg-gradient-t-pink {
    background-image: linear-gradient(to bottom,rgba(var(--dx-pink-rgb),.1),rgba(var(--dx-pink-rgb),0))
}

.bg-gradient-t-orange {
    background-image: linear-gradient(to bottom,rgba(var(--dx-orange-rgb),.1),rgba(var(--dx-orange-rgb),0))
}

.bg-gradient-t-indigo {
    background-image: linear-gradient(to bottom,rgba(var(--dx-indigo-rgb),.1),rgba(var(--dx-indigo-rgb),0))
}

.coming-soon-input {
    margin: 0 auto;
    max-width: 36rem;
    position: relative
}

    .coming-soon-input .form-control {
        height: 48px;
        padding-left: 126px
    }

    .coming-soon-input button {
        left: .1875rem;
        position: absolute;
        top: 50%;
        transform: translateY(-50%)
    }

.coming-soon-title {
    font-size: 9rem;
    letter-spacing: 4px;
    line-height: .8
}

@media (max-width:767.98px) {
    .coming-soon-title {
        font-size: 3rem
    }
}

.rocket-icon {
    position: absolute;
    right: 44%;
    top: 30%;
    transform: rotate(21deg)
}

.help-center-categories {
    height: calc(100vh - 360px)
}

    .help-center-categories .nav .nav-item .nav-link {
        align-items: center;
        border-radius: .5rem;
        color: var(--dx-body-color);
        display: flex;
        font-weight: 500;
        padding: .75rem 1rem;
        transition: all .5s ease-in-out
    }

@media (prefers-reduced-motion:reduce) {
    .help-center-categories .nav .nav-item .nav-link {
        transition: none
    }
}

.help-center-categories .nav .nav-item .nav-link i {
    font-size: 1.1rem
}

.help-center-categories .nav .nav-item .nav-link .badge {
    font-size: .75rem;
    padding: .25rem .5rem
}

.help-center-categories .nav .nav-item .nav-link:hover {
    background-color: var(--dx-primary-subtle);
    color: var(--dx-primary)
}

.help-center-categories .nav .nav-item .nav-link.active {
    background: linear-gradient(-135deg,var(--dx-primary),var(--dx-primary-text-emphasis));
    color: var(--dx-white)
}

    .help-center-categories .nav .nav-item .nav-link.active .badge {
        background-color: hsla(0,0%,100%,.2) !important;
        color: var(--dx-white) !important
    }

.help-center-quick-actions {
    background-image: linear-gradient(-135deg,var(--dx-primary-text-emphasis),var(--dx-primary))
}

.ticket-list-wrapper {
    height: calc(100vh - 20rem)
}

.ticket-comments .comment-item {
    background-color: var(--dx-custom-bg);
    border-inline-start: 3px solid var(--dx-primary);
    border-radius: .5rem;
    margin-block-end: 1rem
}

    .ticket-comments .comment-item.internal {
        background-color: var(--dx-custom-bg);
        border-right-color: var(--dx-warning)
    }

    .ticket-comments .comment-item .comment-header {
        align-items: center;
        display: flex;
        gap: .5rem;
        margin-block-end: .5rem
    }

        .ticket-comments .comment-item .comment-header .comment-type {
            background-color: var(--dx-primary-bg-subtle);
            color: var(--dx-primary)
        }

@media (max-width:768px) {
    .help-center-categories {
        height: auto;
        max-height: 20rem
    }

    .ticket-list-wrapper {
        height: calc(100vh - 15rem)
    }

    .ticket-card .ticket-footer .ticket-info {
        align-items: flex-start;
        flex-direction: column
    }

        .ticket-card .ticket-footer .ticket-info .ticket-actions {
            align-self: flex-end
        }

    .stats-card {
        margin-block-end: 1rem
    }
}

.card-slide {
    position: relative;
    transition: all .5s ease-in-out
}

@media (prefers-reduced-motion:reduce) {
    .card-slide {
        transition: none
    }
}

.card-slide:before {
    bottom: 0;
    content: "";
    height: .125rem;
    position: absolute;
    right: 0;
    top: auto;
    transition: height .5s ease-in-out;
    width: 100%
}

.card-slide a {
    border: 1px solid var(--dx-light-bg-subtle);
    color: var(--dx-secondary-color);
    transition: color .6s ease-in-out,border-color .6s ease-in-out
}

.card-slide:hover {
    color: #fff
}

    .card-slide:hover:before {
        bottom: auto;
        height: 100%;
        top: 0
    }

    .card-slide:hover a {
        border-color: hsla(0,0%,100%,.26);
        color: #fff
    }

[class*=icon-outline] {
    border: 2px solid var(--dx-light-border-subtle);
    outline: 1px;
    outline-style: dashed
}

.card-slide-primary .badge, .card-slide-primary.card-slide:before {
    background-color: var(--dx-primary)
}

.card-slide-primary.card-slide .badge {
    background-color: var(--dx-primary-text-emphasis)
}

.icon-outline-primary {
    background-color: var(--dx-primary);
    outline-color: var(--dx-primary)
}

.card-slide-secondary .badge, .card-slide-secondary.card-slide:before {
    background-color: var(--dx-secondary)
}

.card-slide-secondary.card-slide .badge {
    background-color: var(--dx-secondary-text-emphasis)
}

.icon-outline-secondary {
    background-color: var(--dx-secondary);
    outline-color: var(--dx-secondary)
}

.card-slide-success .badge, .card-slide-success.card-slide:before {
    background-color: var(--dx-success)
}

.card-slide-success.card-slide .badge {
    background-color: var(--dx-success-text-emphasis)
}

.icon-outline-success {
    background-color: var(--dx-success);
    outline-color: var(--dx-success)
}

.card-slide-info .badge, .card-slide-info.card-slide:before {
    background-color: var(--dx-info)
}

.card-slide-info.card-slide .badge {
    background-color: var(--dx-info-text-emphasis)
}

.icon-outline-info {
    background-color: var(--dx-info);
    outline-color: var(--dx-info)
}

.card-slide-warning .badge, .card-slide-warning.card-slide:before {
    background-color: var(--dx-warning)
}

.card-slide-warning.card-slide .badge {
    background-color: var(--dx-warning-text-emphasis)
}

.icon-outline-warning {
    background-color: var(--dx-warning);
    outline-color: var(--dx-warning)
}

.card-slide-danger .badge, .card-slide-danger.card-slide:before {
    background-color: var(--dx-danger)
}

.card-slide-danger.card-slide .badge {
    background-color: var(--dx-danger-text-emphasis)
}

.icon-outline-danger {
    background-color: var(--dx-danger);
    outline-color: var(--dx-danger)
}

.card-slide-light .badge, .card-slide-light.card-slide:before {
    background-color: var(--dx-light)
}

.card-slide-light.card-slide .badge {
    background-color: var(--dx-light-text-emphasis)
}

.icon-outline-light {
    background-color: var(--dx-light);
    outline-color: var(--dx-light)
}

.card-slide-dark .badge, .card-slide-dark.card-slide:before {
    background-color: var(--dx-dark)
}

.card-slide-dark.card-slide .badge {
    background-color: var(--dx-dark-text-emphasis)
}

.icon-outline-dark {
    background-color: var(--dx-dark);
    outline-color: var(--dx-dark)
}

.card-slide-pink .badge, .card-slide-pink.card-slide:before {
    background-color: var(--dx-pink)
}

.card-slide-pink.card-slide .badge {
    background-color: var(--dx-pink-text-emphasis)
}

.icon-outline-pink {
    background-color: var(--dx-pink);
    outline-color: var(--dx-pink)
}

.card-slide-orange .badge, .card-slide-orange.card-slide:before {
    background-color: var(--dx-orange)
}

.card-slide-orange.card-slide .badge {
    background-color: var(--dx-orange-text-emphasis)
}

.icon-outline-orange {
    background-color: var(--dx-orange);
    outline-color: var(--dx-orange)
}

.card-slide-indigo .badge, .card-slide-indigo.card-slide:before {
    background-color: var(--dx-indigo)
}

.card-slide-indigo.card-slide .badge {
    background-color: var(--dx-indigo-text-emphasis)
}

.icon-outline-indigo {
    background-color: var(--dx-indigo);
    outline-color: var(--dx-indigo)
}

.schedule-tabs {
    display: flex;
    gap: .75rem
}

    .schedule-tabs a {
        color: var(--dx-secondary-color);
        display: inline-block;
        font-size: .875rem;
        position: relative;
        transition: all .5s ease-in-out
    }

@media (prefers-reduced-motion:reduce) {
    .schedule-tabs a {
        transition: none
    }
}

.schedule-tabs a:after {
    background-color: var(--dx-primary);
    border-radius: 50rem;
    bottom: -.75rem;
    content: "";
    height: .25rem;
    left: 0;
    margin: 0 auto;
    opacity: 0;
    position: absolute;
    right: 0;
    transition: all .5s ease-in-out;
    width: .25rem
}

@media (prefers-reduced-motion:reduce) {
    .schedule-tabs a:after {
        transition: none
    }
}

.schedule-tabs a.active, .schedule-tabs a:hover {
    color: var(--dx-primary)
}

    .schedule-tabs a.active:after, .schedule-tabs a:hover:after {
        bottom: -.375rem;
        opacity: 1
    }

.img-opacity {
    opacity: .03
}

.widget-banner-primary {
    --dx-card-bg: var(--dx-primary-bg-subtle);
    --dx-card-border-color: var(--dx-primary-border-subtle)
}

.widget-banner-secondary {
    --dx-card-bg: var(--dx-secondary-bg-subtle);
    --dx-card-border-color: var(--dx-secondary-border-subtle)
}

.widget-banner-success {
    --dx-card-bg: var(--dx-success-bg-subtle);
    --dx-card-border-color: var(--dx-success-border-subtle)
}

.widget-banner-info {
    --dx-card-bg: var(--dx-info-bg-subtle);
    --dx-card-border-color: var(--dx-info-border-subtle)
}

.widget-banner-warning {
    --dx-card-bg: var(--dx-warning-bg-subtle);
    --dx-card-border-color: var(--dx-warning-border-subtle)
}

.widget-banner-danger {
    --dx-card-bg: var(--dx-danger-bg-subtle);
    --dx-card-border-color: var(--dx-danger-border-subtle)
}

.widget-banner-light {
    --dx-card-bg: var(--dx-light-bg-subtle);
    --dx-card-border-color: var(--dx-light-border-subtle)
}

.widget-banner-dark {
    --dx-card-bg: var(--dx-dark-bg-subtle);
    --dx-card-border-color: var(--dx-dark-border-subtle)
}

.widget-banner-pink {
    --dx-card-bg: var(--dx-pink-bg-subtle);
    --dx-card-border-color: var(--dx-pink-border-subtle)
}

.widget-banner-orange {
    --dx-card-bg: var(--dx-orange-bg-subtle);
    --dx-card-border-color: var(--dx-orange-border-subtle)
}

.widget-banner-indigo {
    --dx-card-bg: var(--dx-indigo-bg-subtle);
    --dx-card-border-color: var(--dx-indigo-border-subtle)
}

.widget-svg svg path {
    stroke: rgba(225,228,235,.15)
}

.widget-banner-one {
    background-image: url(https://srbthemes.kcubeinfotech.com/semidash/images/others/banner-1.webp)
}

.widget-banner-one, .widget-banner-two {
    background-position: 50%;
    background-size: cover
}

.widget-banner-two {
    background-image: url(https://srbthemes.kcubeinfotech.com/semidash/images/others/banner-2.webp)
}

.widget-banner-three {
    background: linear-gradient(-145deg,#f0f0f0,#cacaca)
}

.widget-banner-four {
    background: linear-gradient(-135deg,#d4af37,#f8e473)
}

[class*=chart-icon-ring] {
    border: 2px solid var(--dx-border-color);
    outline: 1px solid var(--dx-border-color);
    outline-offset: 2px
}

.chart-icon-ring-primary {
    border-color: var(--dx-primary);
    outline-color: rgba(var(--dx-primary-rgb),.2)
}

.chart-icon-ring-secondary {
    border-color: var(--dx-secondary);
    outline-color: rgba(var(--dx-secondary-rgb),.2)
}

.chart-icon-ring-success {
    border-color: var(--dx-success);
    outline-color: rgba(var(--dx-success-rgb),.2)
}

.chart-icon-ring-info {
    border-color: var(--dx-info);
    outline-color: rgba(var(--dx-info-rgb),.2)
}

.chart-icon-ring-warning {
    border-color: var(--dx-warning);
    outline-color: rgba(var(--dx-warning-rgb),.2)
}

.chart-icon-ring-danger {
    border-color: var(--dx-danger);
    outline-color: rgba(var(--dx-danger-rgb),.2)
}

.chart-icon-ring-light {
    border-color: var(--dx-light);
    outline-color: rgba(var(--dx-light-rgb),.2)
}

.chart-icon-ring-dark {
    border-color: var(--dx-dark);
    outline-color: rgba(var(--dx-dark-rgb),.2)
}

.chart-icon-ring-pink {
    border-color: var(--dx-pink);
    outline-color: rgba(var(--dx-pink-rgb),.2)
}

.chart-icon-ring-orange {
    border-color: var(--dx-orange);
    outline-color: rgba(var(--dx-orange-rgb),.2)
}

.chart-icon-ring-indigo {
    border-color: var(--dx-indigo);
    outline-color: rgba(var(--dx-indigo-rgb),.2)
}

.auth-modern .card {
    backdrop-filter: blur(10px);
    background-color: hsla(0,0%,100%,.1);
    border: none;
    box-shadow: none;
    color: var(--dx-gray-300)
}

    .auth-modern .card a {
        color: hsla(0,0%,100%,.749)
    }

    .auth-modern .card .form-control, .auth-modern .card .form-control.pattern-input, .auth-modern .card .form-control.pattern-input:focus {
        background-color: hsla(0,0%,100%,.1) !important;
        border: none;
        box-shadow: none;
        color: var(--dx-white)
    }

        .auth-modern .card .form-control.pattern-input::-moz-placeholder, .auth-modern .card .form-control.pattern-input:focus::-moz-placeholder, .auth-modern .card .form-control::-moz-placeholder {
            color: var(--dx-gray-300)
        }

        .auth-modern .card .form-control.pattern-input::placeholder, .auth-modern .card .form-control.pattern-input:focus::placeholder, .auth-modern .card .form-control::placeholder {
            color: var(--dx-gray-300)
        }

    .auth-modern .card .form-check-input {
        border-color: hsla(0,0%,100%,.1) !important
    }

    .auth-modern .card .btn-light {
        background-color: hsla(0,0%,100%,.055)
    }

    .auth-modern .card .social-link:hover {
        background-color: hsla(0,0%,100%,.102);
        color: #fff
    }

.auth-modern .login-user-modern {
    transition: all .5s ease-in-out
}

    .auth-modern .login-user-modern:hover {
        background-color: rgba(var(--dx-light-rgb),.06)
    }

.text-gradient {
    background: linear-gradient(-90deg,var(--dx-primary),var(--dx-success));
    -webkit-background-clip: text;
    color: transparent;
    filter: drop-shadow(0 10px 8px rgba(0,0,0,.04)) drop-shadow(0 4px 3px rgba(0,0,0,.1))
}

@media (min-width:576px) {
    .otp-box {
        height: 56px;
        width: 56px
    }
}

@media (max-width:991.98px) {
    .auth-creative-img {
        padding: 10px
    }
}

@media (min-width:992px) {
    .auth-creative-img .dash-img {
        right: 14%;
        top: 12%
    }
}

.auth-creative-img .circle-1 {
    height: 57rem;
    width: 57rem
}

.auth-creative-img .circle-2 {
    height: 68rem;
    width: 68rem
}

.faq-card:before {
    background-image: url(https://srbthemes.kcubeinfotech.com/semidash/images/others/faq-bg.webp);
    background-position: 50%;
    background-size: cover;
    content: "";
    height: 100%;
    opacity: .1;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%
}

.faq-img {
    right: 62%
}

.privacy-banner {
    background-image: linear-gradient(to bottom left,hsla(0,0%,100%,.07) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.07) 0,hsla(0,0%,100%,.07) 75%,transparent 0,transparent),linear-gradient(to top left,hsla(0,0%,100%,.07) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.07) 0,hsla(0,0%,100%,.07) 75%,transparent 0,transparent);
    background-size: 80px 80px;
    clip-path: polygon(0 0,100% 0,100% 80%,50% 100%,0 80%)
}

.progress-gradient-secondary {
    background: linear-gradient(-90deg,var(--dx-primary),var(--dx-secondary),var(--dx-pink))
}

.timeline-month:before {
    background-color: var(--dx-tertiary-bg);
    border-radius: .375rem;
    content: "";
    height: calc(100% - .3125rem);
    position: absolute;
    right: .875rem;
    top: .5rem;
    width: .5rem
}

.timeline-section {
    position: relative
}

    .timeline-section:before {
        background-color: var(--dx-tertiary-bg);
        content: "";
        height: 1px;
        position: absolute;
        right: 1.25rem;
        top: .875rem;
        width: 1.75rem;
        z-index: 0
    }

    .timeline-section:after {
        background-color: var(--dx-primary);
        border: 2px solid var(--dx-secondary-bg);
        border-radius: 3.125rem;
        content: "";
        height: .75rem;
        position: absolute;
        right: .75rem;
        top: .5rem;
        width: .75rem
    }

.modal-gradient-bg {
    background: linear-gradient(to left,rgba(var(--dx-primary-rgb),.2),rgba(var(--dx-indigo-rgb),.2),rgba(var(--dx-secondary-rgb),.2))
}

.deal-simplebar {
    max-height: calc(100vh - 23.5rem)
}

.deal-wrapper {
    display: flex
}

    .deal-wrapper .deal-card {
        flex-shrink: 0;
        width: 350px
    }

    .deal-wrapper .deal-content {
        max-height: calc(100vh - 50rem)
    }

.product-card {
    position: relative
}

    .product-card .product-wrapper-hover {
        bottom: 0;
        opacity: 0;
        transition: opacity .5s ease-in-out;
        will-change: opacity
    }

@media (prefers-reduced-motion:reduce) {
    .product-card .product-wrapper-hover {
        transition: none
    }
}

.product-card img {
    transition: transform .5s ease-in-out;
    will-change: transform
}

@media (prefers-reduced-motion:reduce) {
    .product-card img {
        transition: none
    }
}

.product-card:hover img {
    transform: scale(1.2)
}

.product-card:hover .product-wrapper-hover {
    bottom: 10px;
    opacity: 1
}

.products-colors .form-check .form-check-input {
    border: 2px solid var(--dx-secondary-bg) !important;
    box-shadow: var(--dx-box-shadow)
}

.products-colors .form-check .form-check-label {
    color: var(--dx-secondary-color)
}

.products-colors .form-check .form-check-input:checked + .form-check-label {
    border-color: var(--dx-primary) !important;
    color: var(--dx-primary)
}

.productMainSlider {
    border-radius: 0 .5rem .5rem 0;
    overflow: hidden
}

.productThumbSlider {
    border-radius: .5rem 0 0 .5rem;
    overflow: hidden
}

:is(.productMainSlider,.productThumbSlider) .swiper-slide {
    position: relative
}

    :is(.productMainSlider,.productThumbSlider) .swiper-slide img {
        transition: all .5s ease-in-out
    }

@media (prefers-reduced-motion:reduce) {
    :is(.productMainSlider,.productThumbSlider) .swiper-slide img {
        transition: none
    }
}

:is(.productMainSlider,.productThumbSlider) .swiper-slide:hover img {
    transform: scale(1.02)
}

:is(.swiper-button-next,.swiper-button-prev).swiper-button-white {
    background-color: rgba(var(--dx-secondary-bg-rgb),.9);
    border-radius: 50%;
    color: var(--dx-primary);
    font-size: 16px;
    height: 24px;
    width: 24px
}

.managar-reviews-sticky {
    position: sticky;
    top: calc(var(--dx-topbar) + var(--dx-spacer));
    z-index: 1001
}

@media (max-width:767.98px) {
    .order-timeline {
        overflow-x: auto;
        overflow-y: hidden;
        width: 100%
    }
}

.payment-success-modal {
    background-image: url(https://srbthemes.kcubeinfotech.com/semidash/images/others/payment-modal.webp);
    background-position: 50%;
    background-size: cover
}

.mailbox-wrapper {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    min-height: calc(100vh - 200px)
}

    .mailbox-wrapper .mailbox-left {
        width: 22rem
    }

        .mailbox-wrapper .mailbox-left .card-header {
            background: linear-gradient(-135deg,var(--dx-light) 0,var(--dx-light-dark) 100%);
            border-bottom: 1px solid var(--dx-border-color)
        }

        .mailbox-wrapper .mailbox-left .mailbox-nav .nav-link {
            border-radius: .5rem;
            font-weight: var(--dx-font-weight-semibold);
            margin-block-end: .25rem;
            transition: all .5s ease-in-out
        }

@media (prefers-reduced-motion:reduce) {
    .mailbox-wrapper .mailbox-left .mailbox-nav .nav-link {
        transition: none
    }
}

.mailbox-wrapper .mailbox-left .mailbox-nav .nav-link:hover {
    background-color: var(--dx-primary-subtle);
    color: var(--dx-primary)
}

.mailbox-wrapper .mailbox-left .mailbox-nav .nav-link.active {
    background-color: var(--dx-primary);
    box-shadow: 0 2px 4px rgba(var(--dx-primary-rgb),.3);
    color: #fff
}

.mailbox-wrapper .mailbox-left .mailbox-labels .label-color {
    flex-shrink: 0
}

.mailbox-wrapper .mailbox-left .mailbox-labels a {
    border-radius: .5rem;
    padding: .5rem;
    transition: all .5s ease-in-out
}

@media (prefers-reduced-motion:reduce) {
    .mailbox-wrapper .mailbox-left .mailbox-labels a {
        transition: none
    }
}

.mailbox-wrapper .mailbox-left .mailbox-labels a:hover {
    background-color: var(--dx-light)
}

@media (max-width:1535.98px) {
    .mailbox-wrapper .mailbox-left {
        background-color: var(--dx-custom-bg);
        border-radius: 0;
        display: none;
        inset-block: 0;
        left: 0;
        margin-bottom: 0;
        overflow-y: auto;
        position: fixed;
        width: 20rem;
        z-index: 1045
    }
}

.mailbox-wrapper .mailbox-list {
    overflow: hidden
}

    .mailbox-wrapper .mailbox-list .quick-contacts .quick-contact-item {
        overflow: hidden;
        position: relative;
        transition: all .5s ease-in-out;
        width: 350px
    }

@media (prefers-reduced-motion:reduce) {
    .mailbox-wrapper .mailbox-list .quick-contacts .quick-contact-item {
        transition: none
    }
}

.mailbox-wrapper .mailbox-list .quick-contacts .quick-contact-item:before {
    background: var(--dx-primary);
    content: "";
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    transform: scaleY(0);
    transition: all .5s ease-in-out;
    width: 4px
}

@media (prefers-reduced-motion:reduce) {
    .mailbox-wrapper .mailbox-list .quick-contacts .quick-contact-item:before {
        transition: none
    }
}

.mailbox-wrapper .mailbox-list .quick-contacts .quick-contact-item .contact-actions {
    display: flex;
    gap: .5rem;
    opacity: 0;
    transition: all .5s ease-in-out;
    visibility: hidden
}

@media (prefers-reduced-motion:reduce) {
    .mailbox-wrapper .mailbox-list .quick-contacts .quick-contact-item .contact-actions {
        transition: none
    }
}

.mailbox-wrapper .mailbox-list .quick-contacts .quick-contact-item:hover {
    border-color: var(--dx-primary)
}

    .mailbox-wrapper .mailbox-list .quick-contacts .quick-contact-item:hover:before {
        transform: scaleY(1)
    }

    .mailbox-wrapper .mailbox-list .quick-contacts .quick-contact-item:hover .contact-actions {
        opacity: 1;
        visibility: visible
    }

.mailbox-wrapper .mailbox-list .quick-contacts .quick-contact-item .contact-avatar {
    flex-shrink: 0;
    position: relative
}

    .mailbox-wrapper .mailbox-list .quick-contacts .quick-contact-item .contact-avatar .unread-count {
        align-items: center;
        background: var(--dx-danger);
        border: 2px solid var(--dx-secondary-bg);
        border-radius: 50%;
        color: #fff;
        display: flex;
        font-size: 10px;
        font-weight: 600;
        height: 20px;
        justify-content: center;
        left: -4px;
        position: absolute;
        top: -4px;
        width: 20px;
        z-index: 3
    }

.mailbox-wrapper .mailbox-list .email-list-container {
    height: 562px
}

    .mailbox-wrapper .mailbox-list .email-list-container .email-list .mailbox-list-item {
        border-bottom: 1px solid var(--dx-border-color);
        padding: 1rem 1.5rem;
        transition: all .2s ease
    }

        .mailbox-wrapper .mailbox-list .email-list-container .email-list .mailbox-list-item:hover {
            background-color: var(--dx-light);
            transform: translateX(-4px)
        }

        .mailbox-wrapper .mailbox-list .email-list-container .email-list .mailbox-list-item:last-child {
            border-bottom: none
        }

        .mailbox-wrapper .mailbox-list .email-list-container .email-list .mailbox-list-item .unread-indicator {
            border: 2px solid #fff;
            height: 8px;
            left: -2px;
            position: absolute;
            top: -2px;
            width: 8px;
            z-index: 1
        }

@media (max-width:1535.98px) {
    .mailbox-wrapper .mailbox-list {
        border-radius: 1rem
    }
}

@media (min-width:1200px) {
    .mailbox-wrapper.show .mailbox-list {
        max-width: 28rem
    }
}

.mailbox-wrapper .mail-overview {
    overflow: hidden
}

    .mailbox-wrapper .mail-overview .card-header {
        background: linear-gradient(-135deg,var(--dx-light) 0,var(--dx-light-dark) 100%);
        border-bottom: 1px solid var(--dx-border-color)
    }

    .mailbox-wrapper .mail-overview .email-reply .reply-content {
        border-right: 3px solid var(--dx-primary)
    }

    .mailbox-wrapper .mail-overview .email-compose .form-control {
        border: 1px solid var(--dx-border-color);
        border-radius: .5rem
    }

        .mailbox-wrapper .mail-overview .email-compose .form-control:focus {
            border-color: var(--dx-primary);
            box-shadow: 0 0 0 .2rem rgba(var(--dx-primary-rgb),.25)
        }

@media (max-width:1199.98px) {
    .mailbox-wrapper {
        flex-direction: column;
        gap: 1rem
    }

        .mailbox-wrapper .mailbox-list {
            order: 1
        }

        .mailbox-wrapper .mail-overview {
            order: 3
        }
}

@media (max-width:767.98px) {
    .mailbox-wrapper .mailbox-list .quick-contacts .quick-contact-item {
        gap: .75rem;
        padding: .75rem
    }

        .mailbox-wrapper .mailbox-list .quick-contacts .quick-contact-item .contact-avatar .unread-count {
            font-size: 9px;
            height: 18px;
            width: 18px
        }

    .mailbox-wrapper .mailbox-list .email-list-container .mailbox-list-item {
        padding: .75rem 1rem
    }

        .mailbox-wrapper .mailbox-list .email-list-container .mailbox-list-item .d-flex {
            align-items: flex-start !important;
            flex-direction: column;
            gap: .5rem
        }

    .mailbox-wrapper .mail-overview .email-content {
        padding: 1rem
    }

    .mailbox-wrapper .mail-overview .email-compose .p-4, .mailbox-wrapper .mail-overview .email-reply .p-4 {
        padding: 1rem !important
    }
}

@media (max-width:575.98px) {
    .mailbox-header {
        margin-bottom: 1rem;
        padding: 1rem
    }

        .mailbox-header .mailbox-title h4 {
            font-size: 1.25rem
        }

        .mailbox-header .mailbox-title p {
            font-size: .875rem
        }

    .mailbox-wrapper {
        gap: .75rem
    }
}

.mailbox-transition {
    transition: all .5s ease-in-out
}

@media (prefers-reduced-motion:reduce) {
    .mailbox-transition {
        transition: none
    }
}

.fc {
    --dx-link-color-rgb: var(--dx-emphasis-color);
    --fc-small-font-size: .85em;
    --fc-page-bg-color: var(--dx-secondary-bg);
    --fc-neutral-bg-color: var(--dx-tertiary-bg);
    --fc-neutral-text-color: var(--dx-secondary-color);
    --fc-border-color: var(--dx-border-color);
    --fc-event-bg-color: var(--dx-primary);
    --fc-event-border-color: var(--dx-primary);
    --fc-event-text-color: var(--dx-emphasis-color);
    --fc-event-selected-overlay-color: rgba(0,0,0,.25);
    --fc-more-link-bg-color: #d0d0d0;
    --fc-more-link-text-color: var(--dx-emphasis-color);
    --fc-event-resizer-thickness: 8px;
    --fc-event-resizer-dot-total-width: 8px;
    --fc-event-resizer-dot-border-width: 1px;
    --fc-non-business-color: hsla(0,0%,84%,.3);
    --fc-bg-event-color: #8fdf82;
    --fc-bg-event-opacity: 0.3;
    --fc-highlight-color: rgba(188,232,241,.3);
    --fc-today-bg-color: rgba(var(--dx-primary-rgb),0.1);
    --fc-now-indicator-color: var(--dx-danger);
    --fc-list-event-hover-bg-color: var(--dx-tertiary-bg);
    --fc-highlight-color: rgba(var(--dx-primary-rgb),0.05)
}

    .fc .fc-col-header-cell-cushion {
        padding: 10px
    }

    .fc .fc-toolbar-title {
        font-size: 1rem
    }

    .fc .fc-toolbar {
        display: flex;
        flex-wrap: wrap
    }

    .fc .fc-multimonth-title {
        background-color: var(--fc-page-bg-color)
    }

    .fc .fc-header-toolbar {
        gap: .5rem
    }

    .fc .fc-toolbar-chunk .fc-today-button {
        background-color: var(--dx-primary);
        border-color: var(--dx-primary);
        border-radius: .625rem;
        color: var(--dx-white);
        font-size: .87192rem;
        padding: .375rem .875rem;
        text-transform: capitalize;
        transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,opacity .25s ease-in-out
    }

@media (prefers-reduced-motion:reduce) {
    .fc .fc-toolbar-chunk .fc-today-button {
        transition: none
    }
}

.fc .fc-toolbar-chunk .fc-today-button:focus, .fc .fc-toolbar-chunk .fc-today-button:hover {
    background-color: var(--dx-primary);
    border-color: var(--dx-primary);
    color: var(--dx-white)
}

.fc-button-group {
    background-color: rgba(var(--dx-primary-rgb),.2);
    border-color: rgba(var(--dx-primary-rgb),.2);
    border-radius: .625rem;
    padding: 4px
}

    .fc-button-group .fc-button-primary {
        background-color: transparent;
        border-color: transparent;
        border-radius: .625rem;
        color: var(--dx-secondary-color);
        font-size: .87192rem;
        padding: .375rem .875rem;
        text-transform: capitalize;
        transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,opacity .25s ease-in-out
    }

@media (prefers-reduced-motion:reduce) {
    .fc-button-group .fc-button-primary {
        transition: none
    }
}

.fc-button-group .fc-button-primary:hover {
    background-color: transparent;
    border-color: transparent;
    color: var(--dx-primary)
}

.fc-button-group .fc-button-primary:is(:not(:disabled).fc-button-active,:not(:disabled):active) {
    background-color: var(--dx-primary);
    border-color: var(--dx-primary);
    color: var(--dx-white)
}

.fc-button-primary:is(:not(:disabled).fc-button-active:focus,:not(:disabled):active:focus,:focus) {
    box-shadow: none !important
}

.fc-license-message {
    display: none
}

.fc-daygrid-event {
    font-size: var(--dx-body-font-size)
}

.upcoming-events {
    max-height: 550px
}

    .upcoming-events .upcoming-events-item {
        position: relative
    }

        .upcoming-events .upcoming-events-item .number {
            height: 42px;
            width: 50px
        }

        .upcoming-events .upcoming-events-item .week {
            font-size: 10px;
            padding: 2px 0;
            text-align: center
        }

.see-more-btn {
    background-color: var(--dx-secondary-bg);
    border-color: var(--dx-secondary-bg);
    color: var(--dx-secondary-color);
    overflow: hidden;
    position: relative;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,opacity .25s ease-in-out
}

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

.see-more-btn .arrow-icon {
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,opacity .25s ease-in-out
}

@media (prefers-reduced-motion:reduce) {
    .see-more-btn .arrow-icon {
        transition: none
    }
}

.see-more-btn:focus, .see-more-btn:hover {
    background-color: var(--dx-primary) !important;
    border-color: var(--dx-primary) !important;
    color: #fff !important
}

    .see-more-btn:focus .arrow-icon, .see-more-btn:hover .arrow-icon {
        transform: translateX(-5px)
    }

    .see-more-btn:focus:after, .see-more-btn:hover:after {
        animation: ripple 1.5s ease-out infinite;
        background: radial-gradient(circle,hsla(0,0%,100%,.3) 0,hsla(0,0%,100%,0) 70%);
        content: "";
        height: 200%;
        opacity: 0;
        position: absolute;
        right: -50%;
        top: -50%;
        width: 200%
    }

.fc-h-event {
    border: none;
    border-top: 1px solid var(--dx-primary)
}

    .fc-h-event .fc-event-main {
        color: currentColor
    }

.chat-profile-card .chat-sidebar-nav a {
    align-items: center;
    color: var(--dx-body-color);
    display: flex;
    gap: .5rem;
    padding: .55rem 0;
    transition: all .5s ease-in-out
}

@media (prefers-reduced-motion:reduce) {
    .chat-profile-card .chat-sidebar-nav a {
        transition: none
    }
}

.chat-profile-card .chat-sidebar-nav a.active, .chat-profile-card .chat-sidebar-nav a:hover {
    color: var(--dx-primary)
}

.chat-profile-card .chat-profile-height {
    margin-inline: calc(var(--dx-spacer)*-1);
    max-height: calc(100vh - 28.625rem);
    padding: var(--dx-spacer)
}

    .chat-profile-card .chat-profile-height .chat-sidebar-nav .chat-sidebar-nav-sub a {
        padding-inline-start: .69rem;
        position: relative
    }

        .chat-profile-card .chat-profile-height .chat-sidebar-nav .chat-sidebar-nav-sub a:before {
            border-right: 1px solid var(--dx-border-color);
            bottom: -14px;
            content: "";
            position: absolute;
            right: -.35rem;
            top: 0;
            z-index: 10
        }

        .chat-profile-card .chat-profile-height .chat-sidebar-nav .chat-sidebar-nav-sub a:after {
            border-color: var(--dx-border-color);
            border-radius: 0 0 5.25rem 0;
            border-style: solid;
            border-width: 0 1px 1px 0;
            content: "";
            height: 6px;
            position: absolute;
            right: -.35rem;
            top: 14px;
            width: 10px
        }

    .chat-profile-card .chat-profile-height .chat-sidebar-nav .chat-sidebar-nav-sub li:last-child a:before {
        display: none
    }

.chat-message-widget .avatar img {
    outline: 1px solid var(--dx-border-color);
    outline-offset: 2px
}

.chat-message-widget .chat-message-widget-body {
    padding-inline-start: calc(var(--dx-spacer)*2)
}

.chat-message-widget.right .chat-message-widget-body {
    padding-inline: 0 calc(var(--dx-spacer)*2)
}

.thread-chat-widget {
    height: calc(100% - 7rem);
    max-height: calc(100vh - 25.125rem)
}

.meassages .chat-height {
    max-height: calc(100vh - 19.375rem)
}

.meassages .chat-toolbar {
    backdrop-filter: blur(16px);
    background-color: rgba(var(--dx-secondary-bg-rgb),.65);
    z-index: 50
}

.invoice-wrapper {
    border-bottom-right-radius: 50rem
}

.invoice-circle {
    background-color: rgba(var(--dx-secondary-bg-rgb),.6);
    border-radius: 50%;
    height: 490px;
    position: absolute;
    right: -200px;
    top: -200px;
    width: 490px;
    z-index: -1
}

.ecommerce-widget {
    position: relative
}

    .ecommerce-widget .avatar {
        border-top: 3px solid var(--dx-border-color);
        left: 20px;
        top: -23px
    }

    .ecommerce-widget :is(.avatar,.card-body) {
        z-index: 1
    }

    .ecommerce-widget .card {
        overflow: hidden
    }

        .ecommerce-widget .card:after, .ecommerce-widget .card:before {
            background-color: var(--dx-primary-bg-subtle);
            content: "";
            height: 127px;
            left: -176px;
            position: absolute;
            width: 442px
        }

        .ecommerce-widget .card:before {
            top: -25px;
            transform: rotate(-31deg)
        }

        .ecommerce-widget .card:after {
            bottom: -80px;
            transform: rotate(31deg);
            z-index: 0
        }

    .ecommerce-widget.success .card:after, .ecommerce-widget.success .card:before {
        background-color: var(--dx-success-bg-subtle);
        content: ""
    }

    .ecommerce-widget.danger .card:after, .ecommerce-widget.danger .card:before {
        background-color: var(--dx-danger-bg-subtle);
        content: ""
    }

    .ecommerce-widget.indigo .card:after, .ecommerce-widget.indigo .card:before {
        background-color: var(--dx-indigo-bg-subtle);
        content: ""
    }

.modern-table tr {
    border-right: 2px solid transparent
}

    .modern-table tr.active {
        background-color: var(--dx-secondary-bg);
        border-right-color: var(--dx-primary)
    }

.meeting-timeline {
    position: relative
}

    .meeting-timeline .meeting-item {
        align-items: flex-start;
        display: flex;
        margin-block-end: 24px;
        position: relative
    }

        .meeting-timeline .meeting-item:last-child {
            margin-block-end: 0
        }

        .meeting-timeline .meeting-item .meeting-time {
            margin-left: 20px;
            width: 80px
        }

        .meeting-timeline .meeting-item .meeting-content {
            position: relative
        }

            .meeting-timeline .meeting-item .meeting-content:before {
                background: var(--dx-secondary-bg);
                border: 2px solid var(--dx-border-color);
                border-radius: 50%;
                content: "";
                height: 12px;
                position: absolute;
                right: -30px;
                top: 12px;
                width: 12px;
                z-index: 2
            }

        .meeting-timeline .meeting-item .meeting-card {
            align-items: center;
            background: var(--dx-secondary-bg);
            border: 1px dashed var(--dx-border-color);
            border-radius: 12px;
            display: flex;
            gap: 12px;
            padding: 16px;
            position: relative;
            transition: all .5s ease-in-out
        }

@media (prefers-reduced-motion:reduce) {
    .meeting-timeline .meeting-item .meeting-card {
        transition: none
    }
}

.meeting-timeline .meeting-item .meeting-card:hover {
    border-color: var(--dx-primary-border-subtle);
    box-shadow: var(--dx-box-shadow)
}

.meeting-timeline .meeting-item .meeting-card .meeting-icon.phone-call {
    background: linear-gradient(-45deg,rgba(var(--dx-primary-rgb),0) 0,rgba(var(--dx-primary-rgb),.2) 100%);
    border: 1px solid rgba(var(--dx-primary-rgb),.1);
    color: var(--dx-primary)
}

.meeting-timeline .meeting-item .meeting-card .meeting-icon.video-call {
    background: linear-gradient(-45deg,rgba(var(--dx-danger-rgb),0) 0,rgba(var(--dx-danger-rgb),.2) 100%);
    border: 1px solid rgba(var(--dx-danger-rgb),.1);
    color: var(--dx-danger)
}

.meeting-timeline .meeting-item .meeting-card .meeting-icon.in-person {
    background: linear-gradient(-45deg,rgba(var(--dx-info-rgb),0) 0,rgba(var(--dx-info-rgb),.2) 100%);
    border: 1px solid rgba(var(--dx-info-rgb),.1);
    color: var(--dx-info)
}

.meeting-timeline .meeting-item .meeting-card .meeting-icon.conference {
    background: linear-gradient(-45deg,rgba(var(--dx-success-rgb),0) 0,rgba(var(--dx-success-rgb),.2) 100%);
    border: 1px solid rgba(var(--dx-success-rgb),.1);
    color: var(--dx-success)
}

.meeting-timeline .timeline-connector {
    bottom: 53px;
    position: absolute;
    right: 75px;
    top: 14px;
    width: 2px;
    z-index: 1
}

    .meeting-timeline .timeline-connector .connector-line {
        background: var(--dx-border-color);
        bottom: 0;
        position: absolute;
        right: 50%;
        top: 0;
        transform: translateX(50%);
        width: 2px
    }

    .meeting-timeline .timeline-connector .connector-dot {
        background: var(--dx-border-color);
        border-radius: 50%;
        height: 8px;
        position: absolute;
        right: 50%;
        transform: translateX(50%);
        width: 8px
    }

        .meeting-timeline .timeline-connector .connector-dot:first-child {
            top: 0
        }

        .meeting-timeline .timeline-connector .connector-dot:last-child {
            bottom: 0
        }

@media (max-width:768px) {
    .meeting-timeline .meeting-item .meeting-time {
        margin-left: 15px;
        width: 70px
    }

        .meeting-timeline .meeting-item .meeting-time .time-label {
            font-size: 13px
        }

        .meeting-timeline .meeting-item .meeting-time .time-value {
            font-size: 11px
        }

    .meeting-timeline .meeting-item .meeting-content:before {
        height: 10px;
        right: -25px;
        width: 10px
    }

    .meeting-timeline .meeting-item .meeting-card {
        gap: 10px;
        padding: 12px
    }

        .meeting-timeline .meeting-item .meeting-card .meeting-icon {
            font-size: 16px;
            height: 36px;
            width: 36px
        }

            .meeting-timeline .meeting-item .meeting-card .meeting-icon i {
                font-size: 14px
            }

        .meeting-timeline .meeting-item .meeting-card .meeting-details .meeting-title {
            font-size: 13px
        }

        .meeting-timeline .meeting-item .meeting-card .meeting-details .meeting-attendance {
            font-size: 11px
        }

    .meeting-timeline .timeline-connector {
        right: 60px
    }
}

.growth-analysis-toolbar a {
    align-items: center;
    border: 1px solid var(--dx-border-color);
    border-radius: .375rem;
    color: var(--dx-secondary-color);
    display: flex;
    font-size: 14px;
    gap: 5px;
    padding: 6px 12px
}

    .growth-analysis-toolbar a:hover {
        color: var(--dx-primary)
    }

    .growth-analysis-toolbar a.active {
        border-color: var(--dx-primary);
        color: var(--dx-primary)
    }

.project-widgets {
    position: relative
}

    .project-widgets:after {
        background-color: rgba(var(--dx-primary-rgb),.08);
        clip-path: polygon(25% 0,100% 0,54% 100%,100% 34%);
        content: "";
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        width: 100%;
        z-index: 0
    }

    .project-widgets.orange:after {
        background-color: rgba(var(--dx-orange-rgb),.08)
    }

    .project-widgets.success:after {
        background-color: rgba(var(--dx-success-rgb),.08)
    }

    .project-widgets.pink:after {
        background-color: rgba(var(--dx-pink-rgb),.08)
    }

    .project-widgets.danger:after {
        background-color: rgba(var(--dx-danger-rgb),.08)
    }

.time-tracker-widget:before {
    background: linear-gradient(-135deg,rgba(var(--dx-white-rgb),.1) 0,rgba(var(--dx-white-rgb),.05) 50%,rgba(var(--dx-white-rgb),.1) 100%);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 1
}

.time-tracker-widget .card-body {
    position: relative;
    z-index: 2
}

.time-tracker-widget .time-status .badge {
    letter-spacing: .5px;
    text-transform: uppercase;
    transition: all .5s ease-in-out
}

@media (prefers-reduced-motion:reduce) {
    .time-tracker-widget .time-status .badge {
        transition: none
    }
}

.time-tracker-widget .time-circle {
    filter: drop-shadow(0 4px 8px rgba(0,0,0,.1));
    transition: transform .3s ease
}

@media (prefers-reduced-motion:reduce) {
    .time-tracker-widget .time-circle {
        transition: none
    }
}

.time-tracker-widget .time-circle svg {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.1))
}

.time-tracker-widget .time-circle:hover {
    transform: scale(1.05)
}

.time-tracker-widget .time-controls .btn {
    backdrop-filter: blur(10px);
    background-color: rgba(var(--dx-white-rgb),.25);
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
    transition: all .5s ease-in-out
}

@media (prefers-reduced-motion:reduce) {
    .time-tracker-widget .time-controls .btn {
        transition: none
    }
}

.time-tracker-widget .time-controls .btn:active, .time-tracker-widget .time-controls .btn:hover {
    background-color: rgba(var(--dx-white-rgb),.4);
    transform: scale(1.1)
}

.time-tracker-widget .time-controls .btn:disabled {
    cursor: not-allowed;
    opacity: .5;
    transform: none
}

.time-tracker-widget .time {
    letter-spacing: 5px
}

.time-tracker-widget .time-progress {
    transition: all .5s ease-in-out
}

@media (prefers-reduced-motion:reduce) {
    .time-tracker-widget .time-progress {
        transition: none
    }
}

.time-tracker-widget.timer-running .time-circle {
    animation: timerPulse 2s infinite
}

.time-tracker-widget.timer-paused .time-circle {
    opacity: .8
}

.time-tracker-widget .time-display .time {
    transition: all .5s ease-in-out
}

@media (prefers-reduced-motion:reduce) {
    .time-tracker-widget .time-display .time {
        transition: none
    }
}

.time-tracker-widget .time-display .time.updating {
    animation: timeUpdate .5s ease
}

.time-tracker-widget .time-notifications .alert {
    animation: slideInUp .3s ease;
    backdrop-filter: blur(10px)
}

.project-tasks .list-group-item {
    margin-inline: calc(var(--dx-spacer)*-1)
}

.finance-main-wrapper {
    margin: -15px -20px 0
}

@media (max-width:1199.98px) {
    .finance-main-wrapper {
        margin-inline: -13px
    }
}

.finance-widget-cart {
    background: linear-gradient(to left,var(--dx-primary),var(--dx-indigo),var(--dx-secondary))
}

:is(.finance-widget-cart,.crypto-widget-cart) :is(.ripple-1,.ripple-2,.ripple-3,.ripple-4,.ripple-5) {
    animation: ripple 8s ease-out infinite;
    background-color: rgba(var(--dx-secondary-bg-rgb),.2);
    border-radius: 50%;
    bottom: 0;
    height: 1px;
    position: absolute;
    right: 0;
    transform: translate3d(50%,50%,0);
    width: 1px;
    will-change: transform,opacity
}

:is(.finance-widget-cart,.crypto-widget-cart) .ripple-1 {
    animation-delay: 0
}

:is(.finance-widget-cart,.crypto-widget-cart) .ripple-2 {
    animation-delay: 1s
}

:is(.finance-widget-cart,.crypto-widget-cart) .ripple-3 {
    animation-delay: 2s
}

:is(.finance-widget-cart,.crypto-widget-cart) .ripple-4 {
    animation-delay: 3s
}

:is(.finance-widget-cart,.crypto-widget-cart) .ripple-4 {
    animation-delay: 4s
}

:is(.finance-widget-cart,.crypto-widget-cart) .ripple-5 {
    animation-delay: 5s
}

@keyframes ripple {
    0% {
        opacity: .33;
        transform: translate3d(50%,50%,0) scale(0)
    }

    to {
        opacity: 0;
        transform: translate3d(50%,50%,0) scale(2000)
    }
}

.finance-card-1 .card-body {
    background: linear-gradient(-125deg,transparent 60%,var(--dx-primary-bg-subtle))
}

.finance-card-2 .card-body {
    background: linear-gradient(-125deg,transparent 60%,var(--dx-success-bg-subtle))
}

.finance-card-3 .card-body {
    background: linear-gradient(-125deg,transparent 60%,var(--dx-danger-bg-subtle))
}

.lms-task-card .card-header .badge {
    animation: pulse 2s infinite
}

.lms-task-card .lms-task-list .task-item {
    align-items: center;
    animation: slideInFromRight .5s ease-out;
    border-bottom: 1px solid var(--dx-secondary-bg);
    display: flex;
    overflow: hidden;
    padding: 1rem 1.25rem;
    position: relative;
    transition: all .3s cubic-bezier(.4,0,.2,1)
}

@media (prefers-reduced-motion:reduce) {
    .lms-task-card .lms-task-list .task-item {
        transition: none
    }
}

.lms-task-card .lms-task-list .task-item .task-actions {
    transition: all .3s cubic-bezier(.4,0,.2,1)
}

@media (prefers-reduced-motion:reduce) {
    .lms-task-card .lms-task-list .task-item .task-actions {
        transition: none
    }
}

.lms-task-card .lms-task-list .task-item:hover {
    background-color: var(--dx-light)
}

    .lms-task-card .lms-task-list .task-item:hover .task-actions {
        opacity: 1
    }

.lms-task-card .lms-task-list .task-item:first-child {
    animation-delay: .1s
}

.lms-task-card .lms-task-list .task-item:nth-child(2) {
    animation-delay: .2s
}

.lms-task-card .lms-task-list .task-item:nth-child(3) {
    animation-delay: .3s
}

.lms-task-card .lms-task-list .task-item:nth-child(4) {
    animation-delay: .4s
}

.lms-task-card .lms-task-list .task-item:nth-child(5) {
    animation-delay: .5s
}

.lms-task-card .lms-task-list .task-item:nth-child(6) {
    animation-delay: .6s
}

.lms-task-card .lms-task-list .task-item:nth-child(7) {
    animation-delay: .7s
}

.lms-task-card .lms-task-list .task-item:nth-child(8) {
    animation-delay: .8s
}

.lms-task-card .lms-task-list .task-item:nth-child(9) {
    animation-delay: .9s
}

.lms-task-card .lms-task-list .task-item:nth-child(10) {
    animation-delay: 1s
}

.lms-task-card .lms-task-list .task-item.completed {
    background-color: var(--dx-tertiary-bg)
}

    .lms-task-card .lms-task-list .task-item.completed .task-title {
        color: var(--dx-secondary-color);
        text-decoration: line-through
    }

    .lms-task-card .lms-task-list .task-item.completed .task-meta {
        opacity: .6
    }

.lms-task-card .lms-task-list .task-checkbox {
    margin-left: 1rem;
    position: relative
}

    .lms-task-card .lms-task-list .task-checkbox .task-input {
        cursor: pointer;
        height: 0;
        opacity: 0;
        position: absolute;
        width: 0
    }

    .lms-task-card .lms-task-list .task-checkbox .task-label {
        cursor: pointer;
        display: block;
        position: relative;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none
    }

    .lms-task-card .lms-task-list .task-checkbox .checkmark {
        background-color: var(--dx-secondary-bg);
        border: 2px solid var(--dx-border-color);
        border-radius: 4px;
        position: relative;
        transition: all .3s cubic-bezier(.4,0,.2,1)
    }

@media (prefers-reduced-motion:reduce) {
    .lms-task-card .lms-task-list .task-checkbox .checkmark {
        transition: none
    }
}

.lms-task-card .lms-task-list .task-checkbox .task-input:checked ~ .task-label .checkmark {
    background-color: var(--dx-primary);
    border-color: var(--dx-primary);
    transform: scale(1.1)
}

.lms-task-card .lms-task-list .task-checkbox .task-input:focus ~ .task-label .checkmark {
    box-shadow: 0 0 0 3px rgba(var(--dx-primary-rgb),.25)
}

.lms-task-card .lms-task-list .task-content .task-title {
    color: var(--dx-body-color);
    line-height: 1.4;
    margin-bottom: .25rem;
    transition: all .3s ease
}

.lms-task-card .lms-task-list .task-content .task-meta .task-priority.high {
    background-color: rgba(var(--dx-danger-rgb),.1);
    color: var(--dx-danger)
}

.lms-task-card .lms-task-list .task-content .task-meta .task-priority.medium {
    background-color: rgba(var(--dx-warning-rgb),.1);
    color: var(--dx-warning)
}

.lms-task-card .lms-task-list .task-content .task-meta .task-priority.low {
    background-color: rgba(var(--dx-success-rgb),.1);
    color: var(--dx-success)
}

.lms-task-card .lms-task-list .task-actions {
    flex-shrink: 0;
    opacity: 0;
    transform: translateX(-10px);
    transition: all .3s cubic-bezier(.4,0,.2,1)
}

@media (max-width:768px) {
    .lms-task-list .task-item {
        padding: .75rem 1rem
    }

        .lms-task-list .task-item:hover {
            transform: none
        }

    .lms-task-list .task-actions {
        opacity: 1;
        transform: none
    }

    .lms-task-list .task-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: .25rem
    }
}

:is(#popularCourseTopicSwiper,#topInstructorsSwiper,#weekTopPodcastSwiper,#topSellersSwiper) :is(.swiper-button-next,.swiper-button-prev) {
    top: 12px
}

    :is(#popularCourseTopicSwiper,#topInstructorsSwiper,#weekTopPodcastSwiper,#topSellersSwiper) :is(.swiper-button-next,.swiper-button-prev):before {
        color: var(--dx-primary);
        font-family: MingCute !important;
        font-size: 18px
    }

:is(#popularCourseTopicSwiper,#topInstructorsSwiper,#weekTopPodcastSwiper,#topSellersSwiper) .swiper-button-next {
    left: 0
}

    :is(#popularCourseTopicSwiper,#topInstructorsSwiper,#weekTopPodcastSwiper,#topSellersSwiper) .swiper-button-next:before {
        content: "\f1f8"
    }

:is(#popularCourseTopicSwiper,#topInstructorsSwiper,#weekTopPodcastSwiper,#topSellersSwiper) .swiper-button-prev {
    left: 24px;
    right: auto
}

    :is(#popularCourseTopicSwiper,#topInstructorsSwiper,#weekTopPodcastSwiper,#topSellersSwiper) .swiper-button-prev:before {
        content: "\ef86"
    }

.custom-calendar td, .custom-calendar th {
    border: none;
    padding: 5px 0
}

#fundAllocationChart #toolbar {
    display: none !important
}

.postcast-main-widget :is(.effect-1,.effect-2,.effect-3) {
    border: 4px solid;
    position: absolute
}

.postcast-main-widget .effect-1 {
    left: -40px;
    top: -40px
}

.postcast-main-widget .effect-2 {
    left: -28px;
    top: -28px
}

.postcast-main-widget .effect-3 {
    left: -15px;
    top: -15px
}

.podcast-widget {
    background-color: #181c2f
}

    .podcast-widget .track-cover .animate-ping {
        opacity: .3;
        position: absolute;
        right: 14px;
        top: 14px
    }

    .podcast-widget .progress {
        background-color: #282e4a
    }

#popularPodcastTable td {
    border-left: 0;
    border-right: 0
}

    #popularPodcastTable td:first-child {
        border-right: 1px solid var(--dx-border-color)
    }

    #popularPodcastTable td:last-child {
        border-left: 1px solid var(--dx-border-color)
    }

.swiper-wrapper {
    transition-timing-function: linear !important
}

.crypto-swiper.swiper {
    margin-top: -13px
}

@media (min-width:1200px) {
    .crypto-swiper.swiper {
        margin-inline: -18px
    }
}

.crypto-swiper .swiper-slide {
    padding: 0 10px;
    white-space: nowrap;
    width: auto !important
}

.nft-widget {
    background-position: 50%;
    background-size: cover;
    height: 250px
}

    .nft-widget .nft-wrapper {
        backdrop-filter: blur(4px);
        background-color: rgba(5,42,64,.3);
        border: 1px solid hsla(0,0%,100%,.25);
        border-radius: .625rem;
        bottom: var(--dx-spacer);
        position: absolute;
        right: var(--dx-spacer)
    }

.nft-profile-wrapper {
    background-image: linear-gradient(rgba(var(--dx-primary-rgb),.06) 1px,transparent 1px),linear-gradient(to left,rgba(var(--dx-primary-rgb),.06) 1px,transparent 1px);
    background-size: 58px 58px;
    opacity: .8
}

.wallet-item {
    border: 1px solid var(--dx-border-color);
    position: relative;
    transition: all .5s ease-in-out
}

@media (prefers-reduced-motion:reduce) {
    .wallet-item {
        transition: none
    }
}

.wallet-item.connected {
    background-color: var(--dx-primary-bg-subtle);
    border-color: var(--dx-primary-border-subtle)
}

.wallet-item .wallet-icon img {
    transition: all .5s ease-in-out
}

@media (prefers-reduced-motion:reduce) {
    .wallet-item .wallet-icon img {
        transition: none
    }
}

.wallet-item .bid-update {
    animation: bidUpdate .5s ease-in-out
}

.wallet-item .wallet-connect {
    min-width: 80px;
    transition: all .5s ease-in-out
}

@media (prefers-reduced-motion:reduce) {
    .wallet-item .wallet-connect {
        transition: none
    }
}

.wallet-item .wallet-connect:disabled {
    cursor: not-allowed;
    opacity: .7
}

.wallet-item:not(.connected):hover {
    border-color: var(--dx-primary);
    transform: translateY(-2px)
}

    .wallet-item:not(.connected):hover .wallet-icon img {
        transform: scale(1.1)
    }

@keyframes bidUpdate {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.1)
    }

    to {
        transform: scale(1)
    }
}

.countdown-pulse {
    animation: pulse 1s infinite
}

@keyframes pulse {
    0% {
        opacity: 1
    }

    50% {
        opacity: .7
    }

    to {
        opacity: 1
    }
}

.trending-nft-card img {
    height: 240px;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%
}

.trending-nft-card .btn-nft-bookmark {
    background-color: var(--dx-secondary-bg);
    font-size: 17px;
    left: .625rem;
    opacity: 0;
    position: absolute;
    top: 5px;
    transition: all .5s ease-in-out
}

@media (prefers-reduced-motion:reduce) {
    .trending-nft-card .btn-nft-bookmark {
        transition: none
    }
}

.trending-nft-card:hover .btn-nft-bookmark {
    opacity: 1;
    top: 10px
}

.call-center-nav {
    margin: -14px -20px 0
}

@media (max-width:1199.98px) {
    .call-center-nav {
        margin-inline: -14px
    }
}

.call-center-nav .nav-item .nav-link {
    color: hsla(0,0%,100%,.75);
    font-weight: 400;
    padding: 12px 20px 15px;
    position: relative
}

    .call-center-nav .nav-item .nav-link :is(.call-center-effect-left,.call-center-effect-right) {
        inset: 0;
        position: absolute
    }

        .call-center-nav .nav-item .nav-link :is(.call-center-effect-left,.call-center-effect-right):after, .call-center-nav .nav-item .nav-link :is(.call-center-effect-left,.call-center-effect-right):before {
            bottom: 0;
            content: "";
            opacity: 0;
            position: absolute
        }

        .call-center-nav .nav-item .nav-link :is(.call-center-effect-left,.call-center-effect-right):before {
            background-color: var(--dx-dark);
            height: 35px;
            width: 35px;
            z-index: 1
        }

        .call-center-nav .nav-item .nav-link :is(.call-center-effect-left,.call-center-effect-right):after {
            background-color: var(--dx-secondary-bg);
            border-radius: 0;
            height: 16px;
            width: 32px
        }

    .call-center-nav .nav-item .nav-link .call-center-effect-left:before {
        border-radius: 0 50%;
        right: -35px
    }

    .call-center-nav .nav-item .nav-link .call-center-effect-left:after {
        right: -21px
    }

    .call-center-nav .nav-item .nav-link .call-center-effect-right:before {
        border-radius: 50% 0;
        left: -35px
    }

    .call-center-nav .nav-item .nav-link .call-center-effect-right:after {
        left: -21px
    }

    .call-center-nav .nav-item .nav-link.active {
        background-color: var(--dx-secondary-bg);
        color: var(--dx-body-color);
        font-weight: var(--dx-font-weight-semibold)
    }

        .call-center-nav .nav-item .nav-link.active .call-center-effect-left:after, .call-center-nav .nav-item .nav-link.active .call-center-effect-left:before, .call-center-nav .nav-item .nav-link.active .call-center-effect-right:after, .call-center-nav .nav-item .nav-link.active .call-center-effect-right:before {
            opacity: 1
        }

.call-center-cta {
    background-image: linear-gradient(to left,rgba(var(--dx-primary-rgb),.15),rgba(var(--dx-secondary-rgb),.15))
}

.ranking-list .ranking-item {
    margin-inline: calc(var(--dx-spacer)*-1);
    padding: .75rem var(--dx-spacer);
    position: relative
}

    .ranking-list .ranking-item:first-child {
        border-top: 1px dashed var(--dx-border-color)
    }

    .ranking-list .ranking-item:last-child {
        padding-bottom: 0
    }

    .ranking-list .ranking-item:not(:last-child) {
        border-bottom: 1px dashed var(--dx-border-color)
    }

    .ranking-list .ranking-item .ranking-badge .badge {
        border: 2px solid var(--dx-secondary-bg);
        bottom: -1px;
        left: -2px;
        padding: 0;
        position: absolute
    }