@import"https://fonts.googleapis.com/css2?family=Zalando+Sans:ital,wght@0,200..900;1,200..900&display=swap";@import"https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap";@import"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap";@import"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";@import"https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&display=swap";@import"https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&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), .15);
    --dx-pink-bg-subtle: rgba(var(--dx-pink-rgb), .15);
    --dx-orange-bg-subtle: rgba(var(--dx-orange-rgb), .15);
    --dx-indigo-border-subtle: rgba(var(--dx-indigo-rgb), .3);
    --dx-pink-border-subtle: rgba(var(--dx-pink-rgb), .3);
    --dx-orange-border-subtle: rgba(var(--dx-orange-rgb), .3);
    --dx-link-color: var(--dx-primary);
    --dx-primary-text-emphasis: color-mix(in srgb, var(--dx-primary) 75%, black 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: .625rem;
    --dx-sidebar-padding-x: 1rem;
    --dx-sidebar-font-size: 1rem;
    --dx-sidebar-menu-title-font-size: .8438rem;
    --dx-sidebar-bg: rgba(var(--dx-secondary-bg-rgb), .5);
    --dx-topbar: 4.6875rem;
    --dx-topbar-bg: rgba(var(--dx-secondary-bg-rgb), .5);
    --dx-boxed-bg: #00bbf9;
    --dx-boxed-width: 2rem;
    --dx-semibox-width: .75rem
}

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

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

: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=purple] {
    --dx-sidebar-bg: #59359a
}

:root[data-sidebar-colors=light] {
    --dx-sidebar-bg: rgba(var(--dx-secondary-bg-rgb), .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: rgba(149, 157, 165, .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%, white 95%);
    --dx-sidebar-link-color: color-mix(in srgb, var(--dx-sidebar-bg) 100%, white 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: white;
    --dx-sidebar-link-bg-hover-color: color-mix(in srgb, var(--dx-sidebar-bg) 100%, white 5%);
    --dx-sidebar-link-active-color: white;
    --dx-sidebar-link-bg-active-color: color-mix(in srgb, var(--dx-sidebar-bg) 100%, white 5%);
    --dx-sidebar-link-sub-color: color-mix(in srgb, var(--dx-sidebar-bg) 100%, white 95%);
    --dx-sidebar-link-sub-hover-color: white;
    --dx-sidebar-link-sub-active-color: white;
    --dx-sidebar-effect-color: color-mix(in srgb, var(--dx-sidebar-bg) 100%, white 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%,white 80%)!important
}

:root {
    --dx-topbar-bg: rgba(var(--dx-secondary-bg-rgb), .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%, white 10%);
    --dx-topbar-color: color-mix(in srgb, var(--dx-topbar-bg) 100%, white 50%);
    --dx-topbar-hover-color: color-mix(in srgb, var(--dx-topbar-bg) 100%, white 100%)
}

:root[data-topbar-colors=purple] {
    --dx-topbar-bg: #59359a;
    --dx-topbar-border: color-mix(in srgb, var(--dx-topbar-bg) 100%, white 10%);
    --dx-topbar-color: color-mix(in srgb, var(--dx-topbar-bg) 100%, white 50%);
    --dx-topbar-hover-color: color-mix(in srgb, var(--dx-topbar-bg) 100%, white 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), .15);
    --dx-pink-bg-subtle: rgba(var(--dx-pink-rgb), .15);
    --dx-orange-bg-subtle: rgba(var(--dx-orange-rgb), .15);
    --dx-indigo-border-subtle: rgba(var(--dx-indigo-rgb), .3);
    --dx-pink-border-subtle: rgba(var(--dx-pink-rgb), .3);
    --dx-orange-border-subtle: rgba(var(--dx-orange-rgb), .3);
    --dx-light: #161c30;
    --dx-light-rgb: 22, 28, 48;
    --dx-box-shadow: 0 10px 15px -3px rgb(15, 23, 42), 0 4px 6px -4px rgb(15, 23, 42)
}

: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), .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 rgb(21, 31, 53), 0 4px 6px -4px rgb(21, 31, 53);
    --dx-modal-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 rgb(21, 31, 53), 0 4px 6px -4px rgb(21, 31, 53)
}

: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: #9358da;
    --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), .15);
    --dx-secondary-bg-subtle: rgba(var(--dx-secondary-rgb), .15);
    --dx-success-bg-subtle: rgba(var(--dx-success-rgb), .15);
    --dx-info-bg-subtle: rgba(var(--dx-info-rgb), .15);
    --dx-warning-bg-subtle: rgba(var(--dx-warning-rgb), .15);
    --dx-danger-bg-subtle: rgba(var(--dx-danger-rgb), .15);
    --dx-light-bg-subtle: #181c2f;
    --dx-dark-bg-subtle: #0d1123;
    --dx-primary-border-subtle: rgba(var(--dx-primary-rgb), .3);
    --dx-secondary-border-subtle: rgba(var(--dx-secondary-rgb), .3);
    --dx-success-border-subtle: rgba(var(--dx-success-rgb), .3);
    --dx-info-border-subtle: rgba(var(--dx-info-rgb), .3);
    --dx-warning-border-subtle: rgba(var(--dx-warning-rgb), .3);
    --dx-danger-border-subtle: rgba(var(--dx-danger-rgb), .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), .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)
}

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

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

.cursor-pointer {
    cursor: pointer
}

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-left: 1.3rem
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.icon-alert-success .icon {
    border: 1px solid var(--dx-success-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)
}

.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:hover {
    --dx-card-border-color: var(--dx-primary-border-subtle);
    color: #fff;
    --dx-link-color-rgb: #fff
}

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

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

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

.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:hover {
    --dx-card-border-color: var(--dx-secondary-border-subtle);
    color: #fff;
    --dx-link-color-rgb: #fff
}

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

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

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

.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:hover {
    --dx-card-border-color: var(--dx-success-border-subtle);
    color: #fff;
    --dx-link-color-rgb: #fff
}

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

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

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

.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:hover {
    --dx-card-border-color: var(--dx-info-border-subtle);
    color: #fff;
    --dx-link-color-rgb: #fff
}

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

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

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

.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:hover {
    --dx-card-border-color: var(--dx-warning-border-subtle);
    color: #020617;
    --dx-link-color-rgb: #020617
}

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

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

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

.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:hover {
    --dx-card-border-color: var(--dx-danger-border-subtle);
    color: #fff;
    --dx-link-color-rgb: #fff
}

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

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

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

.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:hover {
    --dx-card-border-color: var(--dx-light-border-subtle);
    color: #020617;
    --dx-link-color-rgb: #020617
}

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

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

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

.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:hover {
    --dx-card-border-color: var(--dx-dark-border-subtle);
    color: #fff;
    --dx-link-color-rgb: #fff
}

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

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

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

.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:hover {
    --dx-card-border-color: var(--dx-pink-border-subtle);
    color: #fff;
    --dx-link-color-rgb: #fff
}

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

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

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

.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:hover {
    --dx-card-border-color: var(--dx-orange-border-subtle);
    color: #fff;
    --dx-link-color-rgb: #fff
}

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

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

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

.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:hover {
    --dx-card-border-color: var(--dx-indigo-border-subtle);
    color: #fff;
    --dx-link-color-rgb: #fff
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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-danger {
    color: var(--dx-danger)!important
}

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

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

.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), .75);
    --dx-toast-header-border-color: rgba(var(--dx-white-rgb), .15)
}

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

[data-theme=minimal] {
    --dx-font-family-base: "Inter", sans-serif;
    --dx-font-family-heading: "Inter", sans-serif;
    --dx-body-font-size: .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: .9375rem;
    --dx-sidebar-menu-title-font-size: .75rem;
    --dx-primary: #1e96fc;
    --dx-primary-rgb: 30, 150, 252;
    --dx-primary-text-emphasis: color-mix(in srgb, var(--dx-primary) 75%, black 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%, black 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%, black 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%, black 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%, black 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%, black 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%, black 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%, black 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%, black 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=flat] {
    --dx-font-family-base: "Outfit", sans-serif;
    --dx-font-family-heading: "Outfit", sans-serif;
    --dx-body-font-size: .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: .9375rem;
    --dx-sidebar-menu-title-font-size: .75rem;
    --dx-primary: #2e54f5;
    --dx-primary-rgb: 46, 84, 245;
    --dx-primary-text-emphasis: color-mix(in srgb, var(--dx-primary) 75%, black 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%, black 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%, black 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%, black 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%, black 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%, black 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%, black 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%, black 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%, black 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%, black 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=default] .card {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px)
}

[data-theme=default] .body-effect-img {
    position: fixed;
    inset: 0;
    z-index: 0;
    /* background-image:url(./body-bg-light.avif); */
    background-size: cover;
    background-attachment: scroll;
    background-position: center;
    background-repeat: no-repeat;
    opacity: .6;
    background: radial-gradient(circle at top left, rgba(217, 130, 49, 0.25), transparent 35%),  radial-gradient(circle at bottom right, rgba(26, 55, 110, 0.35), transparent 40%),  #ffffff !important;
}

[data-theme=default][data-bs-theme=dark] .body-effect-img {
    background-image: url(./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-left:var(--dx-sidebar)
    }
}

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

.main-sidebar {
    position: fixed;
    bottom: 0;
    left: 0;
    transition: all .5s ease-in-out;
    z-index: 1005;
    top: var(--dx-topbar);
    width: var(--dx-sidebar);
   
    background-color: rgba(255,255,255,0.90);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px)
}

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

.main-sidebar .navbar-brand {
    display: none;
    align-items: center;
    justify-content: center;
    height: var(--dx-topbar);
    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)
}

[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 {
    padding: .375rem 1rem;
    font-size: var(--dx-sidebar-menu-title-font-size);
    line-height: 1.25rem;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--dx-sidebar-menu-title)
}

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

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

@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 {
    color: var(--dx-sidebar-link-hover-color) !important;
    background-color: #203f68;
}

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

.sidebar-backdrop {
    position: fixed;
    inset: 0;
    background-color: #10182866;
    opacity: 1;
    z-index: 1004;
    display: none
}

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

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

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

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

    .sidebar-hidden .main-sidebar.show {
        left: 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;
    text-align: center;
    gap: .75rem;
    width: calc(var(--dx-sidebar-md) - 24px);
    padding-block:.75rem;margin: .5rem .75rem
}

[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)
}

@media (min-width: 992px) {
    [data-sidebar=medium] .page-wrapper {
        margin-left: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 {
    width: calc(var(--dx-sidebar-sm) - 24px);
    margin-inline:auto;padding-block:.75rem}

[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)
}

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

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

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

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

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

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

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

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

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

.navbar-search .form-control {
    background-color: transparent;
    width: 18rem;
    padding-inline-start:2rem;color: var(--dx-topbar-hover-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
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

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

[data-layout=modern][data-nav-type=floating] .main-topbar {
    position: absolute
}

[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 {
    border-color: rgba(var(--dx-white-rgb),.2);
    background-color: transparent
}

[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] .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::placeholder {
    color: rgba(var(--dx-white-rgb),.75)
}

[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)
}

[data-layout=horizontal] .main-sidebar {
    right: 0;
    width: 100%;
    bottom: auto;
    left: 0;
    border-bottom: 1px solid var(--dx-sidebar-border)
}

@media (max-width: 991.98px) {
    [data-layout=horizontal] .main-sidebar {
        top:-316px;
        left: 0
    }

    [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 {
    display: flex;
    align-items: center;
    margin-bottom: 0
}

[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-left: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 {
        margin-top: 8px;
        height: 300px;
        margin-bottom: 8px
    }

    [data-layout=horizontal] .navbar-menu .nav-menu-title {
        display: none
    }

    [data-layout=horizontal] .navbar-menu .navbar-nav-menu {
        display: block
    }
}

[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
}

: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 {
        left: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 {
        left: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 {
    left: 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
}

.page-heading {
    display: flex;
    align-items: center
}

@media (max-width: 767.98px) {
    .page-heading {
        align-items:start
    }
}

.page-heading .breadcrumb-item+.breadcrumb-item:before {
    content: "î©®";
    font-family: remixicon
}

.btn-close:after {
    content: "\EB99" !important;
    font-size: 20px;
    line-height: 15px;
    color: var(--dx-btn-close-color);
    font-family: remixicon!important
}

.alert-live-backdrop {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px)
}

.alert-dismissible .btn-close:after {
    color: var(--dx-alert-color)
}

.alert-icon {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 4rem
}

.alert-icon .icon {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    border-right: 1px solid var(--dx-alert-border-color)
}

#liveAlert {
    position: fixed;
    top: 1.25rem;
    left: 50%;
    transform: translate(-50%);
    z-index: 1030
}

.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 {
    float: left;
    font-family: RemixIcon;
    color: var(--dx-breadcrumb-divider-color)
}

.btn-navigation {
    box-shadow: var(--dx-box-shadow);
    border: 1px solid var(--dx-border-color);
    background-color: var(--dx-secondary-bg);
    position: relative;
    display: flex;
    border-radius: .625rem
}

.btn-navigation a {
    color: var(--dx-secondary-color);
    padding: 1.5rem 1rem;
    position: relative;
    flex-grow: 1;
    text-align: center;
    transition: all .5s ease-in-out
}

@media (prefers-reduced-motion: reduce) {
    .btn-navigation a {
        transition: none
    }
}

.badge-square {
    display: inline-flex;
    height: 22px;
    width: 22px;
    align-items: center;
    justify-content: center;
    border-width: 1px;
    font-size: .6875rem;
    padding: 0
}

.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-left: var(--dx-spacer)
}

.modal-dialog-end {
    margin-right: var(--dx-spacer)
}

.modal-dialog-bottom-end {
    position: absolute;
    right: var(--dx-spacer);
    bottom: 0
}

.modal-dialog-bottom-start {
    position: absolute;
    left: var(--dx-spacer);
    bottom: 0
}

.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-xs,.modal-sm,.modal-lg,.modal-xl,.modal-2xl {
        max-width:24.0625rem;
        margin-inline:auto}
}

.toast-primary {
    --dx-toast-bg: rgba(var(--dx-primary-rgb))
}

.shipment-timeline {
    position: relative
}

.shipment-timeline .timeline-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    padding-left: 2rem;
    margin-bottom: 1.5rem
}

.shipment-timeline .timeline-item:not(:last-child):before {
    content: "";
    position: absolute;
    top: .5rem;
    bottom: -.5rem;
    left: .75rem;
    width: 2px;
    background-color: var(--dx-tertiary-bg);
    z-index: 1
}

.shipment-timeline .timeline-item:last-child {
    margin-bottom: 0
}

.shipment-timeline .timeline-item.completed:before {
    background-color: var(--dx-success)
}

.shipment-timeline .timeline-item.active:before {
    background-color: var(--dx-primary)
}

.pagination {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap
}

.pagination .page-item:is(:first-child,:last-child) .page-link {
    display: flex;
    align-items: center;
    gap: .25rem;
    width: auto;
    padding: var(--dx-pagination-padding-y) var(--dx-pagination-padding-x)
}

.pagination .page-item .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--dx-border-radius);
    padding: 0
}

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

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

@keyframes bounce {
    0%,to {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(.8,0,1,1)
    }

    50% {
        transform: none;
        animation-timing-function: cubic-bezier(0,0,.2,1)
    }
}

@keyframes ping {
    75%,to {
        content: var(--tw-content);
        transform: scale(2);
        opacity: 0
    }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite
}

@keyframes pulse {
    50% {
        opacity: .5
    }
}

@keyframes shimmer {
    to {
        transform: translate(0);
        opacity: 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: translate(-100%)
    }

    to {
        opacity: 1;
        transform: translate(0)
    }
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes slideInFromRight {
    0% {
        opacity: 0;
        transform: translate(30px)
    }

    to {
        opacity: 1;
        transform: translate(0)
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(10px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.avatar {
    display: flex;
    align-items: center;
    justify-content: center
}

.avatar-group {
    display: flex;
    align-items: center
}

.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 {
    color: #fff;
    background-color: var(--dx-primary)
}

.avatar-group .avatar-group-item:not(:first-child) {
    margin-left: -10px
}

.avatar-group .avatar-group-item:hover {
    z-index: 10
}

[class*=btn-dashed-] {
    border-style: dashed
}

.btn.btn-xs {
    padding: .125rem .5rem;
    font-size: .6875rem;
    border-radius: .375rem
}

.btn.btn-md {
    padding: .5rem 1rem;
    font-size: 12px
}

.btn.btn-lg {
    padding: .75rem 1.75rem;
    font-size: 1rem
}

.btn-icon-overlay {
    padding-left: 4rem
}

.btn-icon-overlay.right {
    padding-inline:1.5rem 4rem}

.btn-icon-overlay.right .icon {
    right: 0;
    left: auto
}

.btn-icon-overlay .icon {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.375rem;
    background-color: rgba(var(--dx-white-rgb),.1)
}

.btn.btn-icon {
    width: 2.5625rem;
    height: 2.5625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    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
}

@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%,#38bdf899,#38bdf800 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: 100
}

.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 {
    padding-bottom: 0;
    border: none
}

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

.card-hover-effect {
    transition: all .5s ease-in-out
}

@media (prefers-reduced-motion: reduce) {
    .card-hover-effect {
        transition: none
    }
}

.card-hover-effect:hover {
    box-shadow: 0 25px 50px -12px #00000040;
    transform: translateY(-6px)
}

.bg-overlay {
    position: absolute;
    inset: 0;
    background-color: #052a40;
    opacity: .2
}

.dropdown-menu {
    animation-name: slideDownIn;
    animation-duration: .3s;
    animation-fill-mode: both
}

.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 {
    content: "î©Ž";
    font-family: remixicon!important;
    border: none;
    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)
}

.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-track {
    background-color: var(--dx-secondary-bg)
}

::-webkit-scrollbar {
    width: 10px;
    background-color: var(--dx-secondary-bg)
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: var(--dx-border-color)
}

.swiper-button-prev:before {
    content: "";
    font-family: RemixIcon
}

.swiper-button-next:before {
    content: "î©®";
    font-family: RemixIcon
}

:is(.swiper-button-prev,.swiper-button-next):after {
    display: none
}

.treeview {
    -webkit-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 {
    content: "";
    position: absolute;
    left: -.75rem;
    top: 0;
    width: 1px;
    height: 100%;
    background-color: var(--dx-border-color);
    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 {
    transition: all .5s ease-in-out;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 5px
}

@media (prefers-reduced-motion: reduce) {
    .treeview a {
        transition: none
    }
}

.treeview a:hover,.treeview a:active,.treeview a:focus {
    color: var(--dx-primary)!important;
    background-color: var(--dx-primary-bg-subtle)
}

.treeview i {
    margin-right: .5rem;
    transition: all .5s ease-in-out
}

@media (prefers-reduced-motion: reduce) {
    .treeview i {
        transition: none
    }
}

.treeview [aria-expanded=true] {
    font-weight: 500;
    color: var(--dx-primary);
    background-color: var(--dx-light)
}

.treeview [data-node] {
    cursor: pointer
}

@keyframes slideDown {
    0% {
        opacity: 0;
        transform: translateY(-10px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.icon-success {
    fill: rgba(var(--dx-success-rgb),.1);
    color: var(--dx-success)
}

.icon-info {
    fill: rgba(var(--dx-info-rgb),.1);
    color: var(--dx-info)
}

.icon-warning {
    fill: rgba(var(--dx-warning-rgb),.1);
    color: var(--dx-warning)
}

.form-label {
    font-weight: 500
}

.form-control:focus {
    box-shadow: none;
    border-color: var(--dx-primary)
}

.form-control-md {
    padding: .375rem .75rem;
    font-size: .875rem
}

.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:focus .vscomp-toggle-button,.vscomp-ele .vscomp-wrapper.focused .vscomp-toggle-button {
    border-color: var(--dx-primary);
    box-shadow: var(--dx-box-shadow)!important
}

.vscomp-ele .vscomp-wrapper:not(.has-value) .vscomp-value {
    opacity: 1;
    color: var(--dx-secondary-color)
}

.vscomp-ele .vscomp-wrapper .vscomp-arrow:after {
    margin-top: -3px;
    border-bottom-color: var(--dx-emphasis-color);
    border-right-color: var(--dx-emphasis-color);
    border-left-color: transparent
}

.vscomp-ele .vscomp-wrapper .checkbox-icon {
    margin-right: 10px;
    margin-left: 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-top-color: transparent!important;
    border-left-color: transparent!important
}

.vscomp-ele .vscomp-wrapper .vscomp-options,.vscomp-ele .vscomp-wrapper .vscomp-no-search-results {
    background-color: var(--dx-secondary-bg)
}

.vscomp-ele .vscomp-wrapper .vscomp-options .vscomp-option,.vscomp-ele .vscomp-wrapper .vscomp-no-search-results .vscomp-option {
    text-align: left
}

.vscomp-ele .vscomp-wrapper .vscomp-options .vscomp-option.selected,.vscomp-ele .vscomp-wrapper .vscomp-options .vscomp-option.focused,.vscomp-ele .vscomp-wrapper .vscomp-no-search-results .vscomp-option.selected,.vscomp-ele .vscomp-wrapper .vscomp-no-search-results .vscomp-option.focused {
    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-right: 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 {
    padding: 2px 3px 2px 8px;
    border: 1px solid var(--dx-border-color)
}

.vscomp-ele .vscomp-wrapper.show-value-as-tags.has-value .vscomp-clear-button {
    right: 2px;
    left: auto
}

.vscomp-ele .vscomp-search-input::placeholder {
    color: var(--dx-secondary-color)
}

.vscomp-ele .vscomp-toggle-button {
    padding: .5938rem 1.875rem .5938rem .625rem!important;
    border-radius: .625rem!important
}

.vscomp-ele .vscomp-clear-button {
    right: 30px;
    left: auto
}

.vscomp-ele .vscomp-arrow {
    right: 0;
    left: auto
}

.form-switch input[type=checkbox] {
    height: 0;
    width: 0;
    visibility: hidden
}

.form-switch input:checked+label:after {
    left: 1.4375rem
}

.form-switch label {
    cursor: pointer;
    width: 3rem;
    height: 1.75rem;
    border-radius: 6.25rem;
    position: relative
}

.form-switch label:after {
    content: "";
    position: absolute;
    top: .1875rem;
    left: .1875rem;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 5.625rem;
    transition: all .5s ease-in-out
}

@media (prefers-reduced-motion: reduce) {
    .form-switch label:after {
        transition: none
    }
}

.form-check {
    min-height: 1.5rem;
    margin-bottom: 0
}

.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 {
    display: flex;
    align-items: center;
    gap: .5rem;
    border: 1px solid transparent;
    cursor: pointer
}

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

.input-spin-group {
    width: 8rem;
    display: flex;
    align-items: center;
    justify-content: center
}

.input-spin-group .input-spin {
    border-radius: 0;
    padding: 0;
    text-align: center
}

.input-spin-group .input-spin.form-control {
    display: block;
    height: 2.5rem;
    width: 100%;
    background-color: transparent;
    border: 1px solid var(--dx-border-color)
}

.input-spin-group .input-spin-plus,.input-spin-group .input-spin-minus {
    display: flex;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--dx-border-color);
    background-color: transparent;
    transition: all .5s ease-in-out
}

@media (prefers-reduced-motion: reduce) {
    .input-spin-group .input-spin-plus,.input-spin-group .input-spin-minus {
        transition: none
    }
}

.input-spin-group .input-spin-plus svg,.input-spin-group .input-spin-minus svg {
    transition: all .5s ease-in-out
}

@media (prefers-reduced-motion: reduce) {
    .input-spin-group .input-spin-plus svg,.input-spin-group .input-spin-minus svg {
        transition: none
    }
}

.input-spin-group .input-spin-minus:where([dir=ltr],[dir=ltr] *) {
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
    border-right-width: 0px
}

.input-spin-group .input-spin-plus:where([dir=ltr],[dir=ltr] *) {
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
    border-left-width: 0px
}

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

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 .25rem
}

.table-separate {
    border-collapse: separate!important;
    border-spacing: 0 8px!important
}

.table-separate td {
    border-top: 1px solid var(--dx-border-color);
    border-bottom: 1px solid var(--dx-border-color)
}

.table-separate td:first-child {
    border-top-left-radius: .625rem;
    border-bottom-left-radius: .625rem;
    border-left: 1px solid var(--dx-border-color)
}

.table-separate td:last-child {
    border-top-right-radius: .625rem;
    border-bottom-right-radius: .625rem;
    border-right: 1px solid var(--dx-border-color)
}

.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), .15);
    --dx-table-border-color: rgba(var(--dx-primary-rgb), .35);
    --dx-table-striped-bg: rgba(var(--dx-primary-rgb), .1);
    --dx-table-active-bg: rgba(var(--dx-primary-rgb), .1);
    --dx-table-hover-bg: rgba(var(--dx-primary-rgb), .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), .15);
    --dx-table-border-color: rgba(var(--dx-secondary-rgb), .35);
    --dx-table-striped-bg: rgba(var(--dx-secondary-rgb), .1);
    --dx-table-active-bg: rgba(var(--dx-secondary-rgb), .1);
    --dx-table-hover-bg: rgba(var(--dx-secondary-rgb), .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), .15);
    --dx-table-border-color: rgba(var(--dx-success-rgb), .35);
    --dx-table-striped-bg: rgba(var(--dx-success-rgb), .1);
    --dx-table-active-bg: rgba(var(--dx-success-rgb), .1);
    --dx-table-hover-bg: rgba(var(--dx-success-rgb), .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), .15);
    --dx-table-border-color: rgba(var(--dx-info-rgb), .35);
    --dx-table-striped-bg: rgba(var(--dx-info-rgb), .1);
    --dx-table-active-bg: rgba(var(--dx-info-rgb), .1);
    --dx-table-hover-bg: rgba(var(--dx-info-rgb), .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), .15);
    --dx-table-border-color: rgba(var(--dx-warning-rgb), .35);
    --dx-table-striped-bg: rgba(var(--dx-warning-rgb), .1);
    --dx-table-active-bg: rgba(var(--dx-warning-rgb), .1);
    --dx-table-hover-bg: rgba(var(--dx-warning-rgb), .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), .15);
    --dx-table-border-color: rgba(var(--dx-danger-rgb), .35);
    --dx-table-striped-bg: rgba(var(--dx-danger-rgb), .1);
    --dx-table-active-bg: rgba(var(--dx-danger-rgb), .1);
    --dx-table-hover-bg: rgba(var(--dx-danger-rgb), .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), .15);
    --dx-table-border-color: rgba(var(--dx-light-rgb), .35);
    --dx-table-striped-bg: rgba(var(--dx-light-rgb), .1);
    --dx-table-active-bg: rgba(var(--dx-light-rgb), .1);
    --dx-table-hover-bg: rgba(var(--dx-light-rgb), .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), .15);
    --dx-table-border-color: rgba(var(--dx-dark-rgb), .35);
    --dx-table-striped-bg: rgba(var(--dx-dark-rgb), .1);
    --dx-table-active-bg: rgba(var(--dx-dark-rgb), .1);
    --dx-table-hover-bg: rgba(var(--dx-dark-rgb), .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), .15);
    --dx-table-border-color: rgba(var(--dx-pink-rgb), .35);
    --dx-table-striped-bg: rgba(var(--dx-pink-rgb), .1);
    --dx-table-active-bg: rgba(var(--dx-pink-rgb), .1);
    --dx-table-hover-bg: rgba(var(--dx-pink-rgb), .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), .15);
    --dx-table-border-color: rgba(var(--dx-orange-rgb), .35);
    --dx-table-striped-bg: rgba(var(--dx-orange-rgb), .1);
    --dx-table-active-bg: rgba(var(--dx-orange-rgb), .1);
    --dx-table-hover-bg: rgba(var(--dx-orange-rgb), .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), .15);
    --dx-table-border-color: rgba(var(--dx-indigo-rgb), .35);
    --dx-table-striped-bg: rgba(var(--dx-indigo-rgb), .1);
    --dx-table-active-bg: rgba(var(--dx-indigo-rgb), .1);
    --dx-table-hover-bg: rgba(var(--dx-indigo-rgb), .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-left: var(--dx-spacer)!important
}

.table-card :is(th,td):last-child {
    padding-right: var(--dx-spacer)!important
}

.form-wizard .step-dot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    cursor: pointer
}

@keyframes bounceIn {
    0% {
        transform: scale(.3);
        opacity: 0
    }

    50% {
        transform: scale(1.05)
    }

    70% {
        transform: scale(.9)
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

@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)
    }
}

@keyframes pulse {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.05)
    }

    to {
        transform: scale(1)
    }
}

.apexcharts-tooltip.apexcharts-theme-light {
    border: 1px solid var(--dx-border-color)!important;
    background: var(--dx-secondary-bg)!important;
    border-radius: .375rem;
    box-shadow: var(--dx-box-shadow)
}

.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
    font-family: var(--dx-font-sans-serif)!important;
    border-bottom: 0!important;
    padding-bottom: 0!important;
    background-color: var(--dx-secondary-bg)!important;
    font-weight: 600
}

.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-text {
    font-size: .75rem
}

.apexcharts-datalabel {
    font-family: var(--dx-font-sans-serif)!important
}

.apexcharts-legend-text {
    font-size: .75rem;
    color: var(--dx-body-color)!important
}

.apexcharts-tooltip-rangebar .category {
    color: var(--dx-secondary-color)!important
}

.apexcharts-xaxistooltip-bottom:before {
    border-bottom: 1px solid var(--dx-secondary-bg)!important
}

.apexcharts-xaxis line {
    stroke: var(--dx-light-bg-subtle)
}

.apexcharts-grid-borders 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
}

html * {
    unicode-bidi: bidi-override
}

: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 {
    color: var(--dx-danger);
    border-color: var(--dx-danger-border-subtle)
}

div:where(.swal2-icon).swal2-error [class^=swal2-x-mark-line] {
    background-color: var(--dx-danger)
}

div:where(.swal2-icon).swal2-warning {
    color: var(--dx-warning);
    border-color: var(--dx-warning-border-subtle)
}

div:where(.swal2-icon).swal2-info {
    color: var(--dx-info);
    border-color: var(--dx-info-border-subtle)
}

div:where(.swal2-icon).swal2-question {
    color: var(--dx-secondary);
    border-color: var(--dx-secondary-border-subtle)
}

div:where(.swal2-container) input:where(.swal2-input),div:where(.swal2-container) input:where(.swal2-file),div:where(.swal2-container) textarea:where(.swal2-textarea) {
    border-color: var(--dx-border-color);
    box-shadow: none;
    border-radius: var(--dx-border-radius);
    background: var(--dx-secondary-bg);
    font-size: var(--dx-body-font-size);
    color: var(--dx-body-color)
}

div:where(.swal2-container) input:where(.swal2-input):focus,div:where(.swal2-container) input:where(.swal2-file):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 {
    background-color: #10182866;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px)
}

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

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

#red,#green,#blue {
    margin: 1.25rem;
    display: inline-block;
    height: 200px
}

#result {
    margin: 2.5rem;
    height: 128px;
    width: 128px;
    display: inline-block;
    vertical-align: top;
    color: #7f7f7f;
    background: #7f7f7f;
    border-radius: .375rem
}

#red .noUi-connect {
    background: var(--dx-danger)
}

#green .noUi-connect {
    background: var(--dx-success)
}

#blue .noUi-connect {
    background: var(--dx-info)
}

.dt-container .dt-layout-table {
    margin-top: 20px!important
}

.dt-container .row {
    gap: 10px
}

.dt-container .pagination {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem
}

.dt-container .pagination .page-item:not(:first-child) .page-link {
    display: flex;
    width: 2.25rem;
    height: 2.25rem;
    align-items: center;
    justify-content: center;
    border-radius: .375rem;
    border-width: 1px
}

.dt-container .table-light {
    background-color: var(--dx-tertiary-bg)
}

.dt-container td.dt-type-numeric,.dt-container table.dataTable td.dt-type-date,.dt-container table.dataTable th.dt-type-numeric,.dt-container table.dataTable th.dt-type-date,.dt-container table.dataTable td.dt-empty {
    text-align: left!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 {
    background-color: var(--dx-tertiary-bg)
}

.dt-container .table.hovered tr:hover {
    background-color: var(--dx-tertiary-bg)
}

.form-control.pattern-input {
    border: none
}

.form-control.pattern-input:focus {
    border: 1px solid var(--dx-primary);
    box-shadow: #959da51a 0 8px 24px;
    background-color: var(--dx-secondary-bg)!important
}

.friends-card .avatar {
    display: inline-block;
    box-shadow: var(--dx-shadow);
    border: 3px solid var(--dx-secondary-bg);
    overflow: hidden
}

.rounded-modern {
    border-radius: 30% 70% 70% 30%/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))
}

.grid-pricing {
    top: 59%
}

.grid-pricing img {
    transform: rotate(45deg);
    opacity: .05
}

.auth-wrapper {
    background: linear-gradient(to left,rgba(var(--dx-info-rgb),.1),rgba(var(--dx-success-rgb),.05),rgba(var(--dx-pink-rgb),.05))
}

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

.ticket-list-wrapper {
    height: calc(100vh - 20rem)
}

@media (max-width: 768px) {

    .ticket-list-wrapper {
        height: calc(100vh - 15rem)
    }
}

.card-slide {
    position: relative;
    transition: all .5s ease-in-out
}

@media (prefers-reduced-motion: reduce) {
    .card-slide {
        transition: none
    }
}

.card-slide:before {
    content: "";
    position: absolute;
    top: initial;
    bottom: 0;
    left: 0;
    width: 100%;
    height: .125rem;
    transition: height .5s ease-in-out
}

.card-slide a {
    color: var(--dx-secondary-color);
    border: 1px solid var(--dx-light-bg-subtle);
    transition: color .6s ease-in-out,border-color .6s ease-in-out
}

.card-slide:hover {
    color: #fff
}

.card-slide:hover:before {
    height: 100%;
    top: 0;
    bottom: initial
}

.card-slide:hover a {
    color: #fff;
    border-color: #ffffff42
}

[class*=icon-outline] {
    outline: 1px;
    outline-style: dashed;
    border: 2px solid var(--dx-light-border-subtle)
}

.card-slide-primary .badge {
    background-color: var(--dx-primary)
}

.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 {
    background-color: var(--dx-secondary)
}

.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 {
    background-color: var(--dx-success)
}

.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 {
    background-color: var(--dx-info)
}

.card-slide-info.card-slide:before {
    background-color: var(--dx-info)
}

.card-slide-info.card-slide .badge {
    background-color: var(--dx-info-text-emphasis)
}

.card-slide-warning .badge {
    background-color: var(--dx-warning)
}

.card-slide-warning.card-slide:before {
    background-color: var(--dx-warning)
}

.card-slide-warning.card-slide .badge {
    background-color: var(--dx-warning-text-emphasis)
}

.card-slide-danger .badge {
    background-color: var(--dx-danger)
}

.card-slide-danger.card-slide:before {
    background-color: var(--dx-danger)
}

.card-slide-danger.card-slide .badge {
    background-color: var(--dx-danger-text-emphasis)
}

.card-slide-light .badge {
    background-color: var(--dx-light)
}

.card-slide-light.card-slide:before {
    background-color: var(--dx-light)
}

.card-slide-light.card-slide .badge {
    background-color: var(--dx-light-text-emphasis)
}

.card-slide-dark .badge {
    background-color: var(--dx-dark)
}

.card-slide-dark.card-slide:before {
    background-color: var(--dx-dark)
}

.card-slide-dark.card-slide .badge {
    background-color: var(--dx-dark-text-emphasis)
}

.card-slide-pink .badge {
    background-color: var(--dx-pink)
}

.card-slide-pink.card-slide:before {
    background-color: var(--dx-pink)
}

.card-slide-pink.card-slide .badge {
    background-color: var(--dx-pink-text-emphasis)
}

.card-slide-orange .badge {
    background-color: var(--dx-orange)
}

.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 {
    background-color: var(--dx-indigo)
}

.card-slide-indigo.card-slide:before {
    background-color: var(--dx-indigo)
}

.card-slide-indigo.card-slide .badge {
    background-color: var(--dx-indigo-text-emphasis)
}

.text-gradient {
    background: linear-gradient(90deg, var(--dx-primary), #ec4899ad);
    -webkit-background-clip: text;
    filter: drop-shadow(0 10px 8px rgba(0,0,0,.04)) drop-shadow(0 4px 3px rgba(0,0,0,.1));
    color: transparent
}

.modal-gradient-bg {
    background: linear-gradient(to right,rgba(var(--dx-primary-rgb),.2),rgba(var(--dx-indigo-rgb),.2),rgba(var(--dx-secondary-rgb),.2))
}

.productMainSlider {
    border-radius: .5rem 0 0 .5rem;
    overflow: hidden
}

.productThumbSlider {
    border-radius: 0 .5rem .5rem 0;
    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)
}

.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;
    margin-block-end:.25rem;font-weight: var(--dx-font-weight-semibold);
    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);
    color: #fff;
    box-shadow: 0 2px 4px rgba(var(--dx-primary-rgb),.3)
}

@media (max-width: 1535.98px) {
    .mailbox-wrapper .mailbox-left {
        position:fixed;
        inset-block: 0;
        right: 0;
        z-index: 1045;
        margin-bottom: 0;
        border-radius: 0;
        display: none;
        overflow-y: auto;
        width: 20rem;
        background-color: var(--dx-custom-bg)
    }
}

.mailbox-wrapper .mailbox-list {
    overflow: hidden
}

@media (max-width: 1535.98px) {
    .mailbox-wrapper .mailbox-list {
        border-radius:1rem
    }
}

@media (min-width: 1200px) {
    .mailbox-wrapper.show .mailbox-list {
        max-width:28rem
    }
}

@media (max-width: 1199.98px) {
    .mailbox-wrapper {
        flex-direction:column;
        gap: 1rem
    }

    .mailbox-wrapper .mailbox-list {
        order: 1
    }
}

@media (max-width: 575.98px) {

    .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: .3;
    --fc-highlight-color: rgba(188, 232, 241, .3);
    --fc-today-bg-color: rgba(var(--dx-primary-rgb), .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), .05)
}

@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 1
    }

    to {
        transform: scale(1);
        opacity: 0
    }
}

.ecommerce-widget {
    position: relative
}

.ecommerce-widget .avatar {
    top: -23px;
    right: 20px;
    border-top: 3px solid var(--dx-border-color)
}

.ecommerce-widget :is(.avatar,.card-body) {
    z-index: 1
}

.ecommerce-widget .card {
    overflow: hidden
}

.ecommerce-widget .card:before,.ecommerce-widget .card:after {
    content: "";
    position: absolute;
    height: 127px;
    width: 442px;
    right: -176px;
    background-color: var(--dx-primary-bg-subtle)
}

.ecommerce-widget .card:before {
    transform: rotate(31deg);
    top: -25px
}

.ecommerce-widget .card:after {
    z-index: 0;
    transform: rotate(-31deg);
    bottom: -80px
}

.ecommerce-widget.success .card:before,.ecommerce-widget.success .card:after {
    content: "";
    background-color: var(--dx-success-bg-subtle)
}

.ecommerce-widget.danger .card:before,.ecommerce-widget.danger .card:after {
    content: "";
    background-color: var(--dx-danger-bg-subtle)
}

.ecommerce-widget.indigo .card:before,.ecommerce-widget.indigo .card:after {
    content: "";
    background-color: var(--dx-indigo-bg-subtle)
}

.project-widgets {
    position: relative
}

.project-widgets:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(var(--dx-primary-rgb),.08);
    z-index: 0;
    clip-path: polygon(25% 0%,100% 0%,54% 100%,100% 34%)
}

.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.danger:after {
    background-color: rgba(var(--dx-danger-rgb),.08)
}
.project-widgets.secondary:after {
    background-color: rgba(var(--dx-secondary-rgb),.08)
}

@keyframes ripple {
    0% {
        transform: translate3d(-50%,50%,0) scale(0);
        opacity: .33
    }

    to {
        transform: translate3d(-50%,50%,0) scale(2000);
        opacity: 0
    }
}

.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))
}
.finance-card-4 .card-body {
    background: linear-gradient(125deg,transparent 60%,var(--dx-secondary-bg-subtle))
}

: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 {
    right: 0
}

:is(#popularCourseTopicSwiper,#topInstructorsSwiper,#weekTopPodcastSwiper,#topSellersSwiper) .swiper-button-next:before {
    content: ""
}

:is(#popularCourseTopicSwiper,#topInstructorsSwiper,#weekTopPodcastSwiper,#topSellersSwiper) .swiper-button-prev {
    left: auto;
    right: 24px
}

:is(#popularCourseTopicSwiper,#topInstructorsSwiper,#weekTopPodcastSwiper,#topSellersSwiper) .swiper-button-prev:before {
    content: ""
}

.postcast-main-widget :is(.effect-1,.effect-2,.effect-3) {
    position: absolute;
    border: 4px solid
}

.postcast-main-widget .effect-1 {
    top: -40px;
    right: -40px
}

.postcast-main-widget .effect-2 {
    top: -28px;
    right: -28px
}

.postcast-main-widget .effect-3 {
    top: -15px;
    right: -15px
}

.nft-widget {
    height: 250px;
    background-size: cover;
    background-position: center center
}

@keyframes bidUpdate {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.1)
    }

    to {
        transform: scale(1)
    }
}

@keyframes pulse {
    0% {
        opacity: 1
    }

    50% {
        opacity: .7
    }

    to {
        opacity: 1
    }
}

.call-center-cta {
    background-image: linear-gradient(to right,rgba(var(--dx-primary-rgb),.15),rgba(var(--dx-secondary-rgb),.15))
}
a.nav-link.active-new{
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.10), rgba(124, 58, 237, 0.06));
    color: #1c3d5d !important;
    border: 1px solid #4f46e533;
    font-weight: 600;
}