/*
Template Name: Domiex - Admin & Dashboard Template 
Author: SRBThemes
Version: 1.0.0
File: Main Css File
*/
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@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-indigo-text-emphasis: #5e61e5;
  --dx-pink-text-emphasis: #e04491;
  --dx-orange-text-emphasis: #ed6d15;
  --dx-indigo-bg-subtle: rgba(var(--dx-indigo-rgb), 0.15);
  --dx-pink-bg-subtle: rgba(var(--dx-pink-rgb), 0.15);
  --dx-orange-bg-subtle: rgba(var(--dx-orange-rgb), 0.15);
  --dx-indigo-border-subtle: rgba(var(--dx-indigo-rgb), 0.3);
  --dx-pink-border-subtle: rgba(var(--dx-pink-rgb), 0.3);
  --dx-orange-border-subtle: rgba(var(--dx-orange-rgb), 0.3);
  --dx-link-color: var(--dx-primary);
  --dx-primary-text-emphasis: color-mix(in srgb, var(--dx-primary) 75%, 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-sidebar: 15rem;
  --dx-sidebar-md: 10rem;
  --dx-sidebar-sm: 4.6875rem;
  --dx-sidebar-padding-y: 0.625rem;
  --dx-sidebar-padding-x: 1rem;
  --dx-sidebar-font-size: 15px;
  --dx-sidebar-bg: #fff;
  --dx-topbar: 4.6875rem;
  --dx-topbar-bg: var(--dx-secondary-bg);
  --dx-boxed-bg: #358ffc;
  --dx-boxed-width: 2rem;
  --dx-semibox-width: 0.75rem;
}
:root[data-colors=green] {
  --dx-primary: #1acd81;
  --dx-primary-rgb: 26, 205, 129;
}
:root[data-colors=violet] {
  --dx-primary: #8b5cf6;
  --dx-primary-rgb: 139, 92, 246;
}
:root[data-colors=orange] {
  --dx-primary: #f04b1f;
  --dx-primary-rgb: 240, 75, 31;
}
:root[data-colors=teal] {
  --dx-primary: #00bba7;
  --dx-primary-rgb: 0, 187, 167;
}
:root[data-colors=fuchsia] {
  --dx-primary: #e12afb;
  --dx-primary-rgb: 225, 42, 251;
}
:root[data-colors=lime] {
  --dx-primary: #84cc16;
  --dx-primary-rgb: 132, 204, 22;
}
:root[data-colors=amber] {
  --dx-primary: #f59e0b;
  --dx-primary-rgb: 245, 158, 11;
}
:root[data-sidebar-colors=dark] {
  --dx-sidebar-bg: #0f1d35;
}
:root[data-sidebar-colors=brand] {
  --dx-sidebar-bg: #1b408d;
}
:root[data-sidebar-colors=purple] {
  --dx-sidebar-bg: #59359a;
}
:root[data-sidebar-colors=sky] {
  --dx-sidebar-bg: #075985;
}
:root[data-sidebar-colors=light] {
  --dx-sidebar-bg: #fff;
  --dx-sidebar-border: #e5e7eb;
  --dx-sidebar-menu-title: var(--dx-secondary-color);
  --dx-sidebar-link-color: var(--dx-secondary-color);
  --dx-sidebar-dropdown-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --dx-sidebar-link-hover-color: var(--dx-primary);
  --dx-sidebar-link-bg-hover-color: sidebar-link-bg-hover-color;
  --dx-sidebar-link-active-color: var(--dx-primary);
  --dx-sidebar-link-bg-active-color: sidebar-link-bg-hover-color;
  --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-link-sub-effect-color: sidebar-link-sub-effect-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, 0.1), 0 1px 2px -1px rgba(0, 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-link-sub-effect-color: color-mix(in srgb, var(--dx-sidebar-bg) 100%, white 3.5%);
}
:root:is([data-sidebar-colors=dark], [data-sidebar-colors=brand], [data-sidebar-colors=purple], [data-sidebar-colors=sky]) .simplebar-scrollbar:before {
  background-color: color-mix(in srgb, var(--dx-sidebar-bg) 100%, white 80%) !important;
}
:root {
  --dx-topbar-bg: var(--dx-secondary-bg);
  --dx-topbar-border: var(--dx-border-color);
  --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=brand] {
  --dx-topbar-bg: #1b408d;
  --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-topbar-colors=sky] {
  --dx-topbar-bg: #075985;
  --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), 0.15);
  --dx-pink-bg-subtle: rgba(var(--dx-pink-rgb), 0.15);
  --dx-orange-bg-subtle: rgba(var(--dx-orange-rgb), 0.15);
  --dx-indigo-border-subtle: rgba(var(--dx-indigo-rgb), 0.3);
  --dx-pink-border-subtle: rgba(var(--dx-pink-rgb), 0.3);
  --dx-orange-border-subtle: rgba(var(--dx-orange-rgb), 0.3);
  --dx-light: #161c30;
  --dx-light-rgb: 22, 28, 48;
  --dx-box-shadow: 0 10px 15px -3px rgb(15, 23, 42), 0 4px 6px -4px rgb(15, 23, 42);
}
: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] .offcanvas {
  --dx-offcanvas-box-shadow: 0 10px 15px -3px rgb(21, 31, 53), 0 4px 6px -4px rgb(21, 31, 53);
  --dx-offcanvas-border-color: var(--dx-border-color);
}
:root[data-bs-theme=dark] .dropdown-menu {
  --dx-dropdown-border-width: 1px;
  --dx-dropdown-box-shadow: 0 10px 15px -3px rgb(21, 31, 53), 0 4px 6px -4px rgb(21, 31, 53);
}

.font-base {
  font-family: "Inter", sans-serif;
}

.cursor-pointer {
  cursor: pointer;
}

.top-24 {
  top: 6rem;
}

h6 {
  line-height: 1.5;
}

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

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

.opacity-10 {
  opacity: 0.1;
}

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

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

.jvm-tooltip {
  display: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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-outline-primary .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-bg-subtle);
  --dx-btn-disabled-border-color: var(--dx-primary-border-subtle);
}

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

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

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

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

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

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

.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-outline-secondary .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-bg-subtle);
  --dx-btn-disabled-border-color: var(--dx-secondary-border-subtle);
}

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

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

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

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

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

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

.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-outline-success .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-bg-subtle);
  --dx-btn-disabled-border-color: var(--dx-success-border-subtle);
}

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

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

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

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

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

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

.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-outline-info .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-bg-subtle);
  --dx-btn-disabled-border-color: var(--dx-info-border-subtle);
}

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

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

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

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

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

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

.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-outline-warning .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-bg-subtle);
  --dx-btn-disabled-border-color: var(--dx-warning-border-subtle);
}

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

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

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

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

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

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

.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-outline-danger .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-bg-subtle);
  --dx-btn-disabled-border-color: var(--dx-danger-border-subtle);
}

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

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

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

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

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

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

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

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

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

.btn-outline-dark {
  --dx-btn-color: var(--dx-dark);
  --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-outline-dark .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-bg-subtle);
  --dx-btn-disabled-border-color: var(--dx-dark-border-subtle);
}

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

.btn-dashed-dark {
  --dx-btn-color: var(--dx-dark);
  --dx-btn-bg: transparent;
  --dx-btn-border-color: var(--dx-border-color);
  --dx-btn-hover-color: var(--dx-dark);
  --dx-btn-hover-bg: var(--dx-tertiary-bg);
  --dx-btn-hover-border-color: var(--dx-border-color);
  --dx-btn-active-color: var(--dx-dark);
  --dx-btn-active-bg: var(--dx-tertiary-bg);
  --dx-btn-active-border-color: var(--dx-border-color);
  --dx-btn-disabled-color: var(--dx-dark);
  --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-dark);
  --dx-btn-bg: transparent;
  --dx-btn-border-color: transparent;
  --dx-btn-hover-color: var(--dx-dark);
  --dx-btn-hover-bg: var(--dx-tertiary-bg);
  --dx-btn-hover-border-color: transparent;
  --dx-btn-active-color: var(--dx-dark);
  --dx-btn-active-bg: var(--dx-tertiary-bg);
  --dx-btn-active-border-color: transparent;
  --dx-btn-disabled-color: var(--dx-dark);
  --dx-btn-disabled-bg: var(--dx-tertiary-bg);
  --dx-btn-disabled-border-color: transparent;
}

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

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

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

.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-outline-pink .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-bg-subtle);
  --dx-btn-disabled-border-color: var(--dx-pink-border-subtle);
}

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

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

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

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

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

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

.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-outline-orange .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-bg-subtle);
  --dx-btn-disabled-border-color: var(--dx-orange-border-subtle);
}

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

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

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

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

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

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

.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-outline-indigo .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-bg-subtle);
  --dx-btn-disabled-border-color: var(--dx-indigo-border-subtle);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.card-primary {
  --dx-link-color-rgb: var(--dx-primary-rgb);
}
.card-primary .icon-bg {
  background-color: var(--dx-primary);
  color: #fff;
}
.card-primary:hover {
  --dx-card-border-color: var(--dx-primary-border-subtle);
  color: #fff;
  --dx-link-color-rgb:#fff;
}
.card-primary:hover .icon-bg {
  background-color: rgba(255, 255, 255, 0.144);
}
.card-primary:hover .icon-hover-bg {
  background-color: var(--dx-primary);
}

.card-sub-primary {
  --dx-link-color-rgb: var(--dx-primary-rgb);
}
.card-sub-primary .icon-bg {
  background-color: var(--dx-primary-bg-subtle);
  color: var(--dx-primary);
}
.card-sub-primary:hover {
  color: var(--dx-primary);
  --dx-card-border-color: var(--dx-primary-border-subtle);
}
.card-sub-primary:hover .icon-hover-bg {
  background-color: rgba(var(--dx-primary-rgb), 0.08);
}

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

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

.card-secondary {
  --dx-link-color-rgb: var(--dx-secondary-rgb);
}
.card-secondary .icon-bg {
  background-color: var(--dx-secondary);
  color: #fff;
}
.card-secondary:hover {
  --dx-card-border-color: var(--dx-secondary-border-subtle);
  color: #fff;
  --dx-link-color-rgb:#fff;
}
.card-secondary:hover .icon-bg {
  background-color: rgba(255, 255, 255, 0.144);
}
.card-secondary:hover .icon-hover-bg {
  background-color: var(--dx-secondary);
}

.card-sub-secondary {
  --dx-link-color-rgb: var(--dx-secondary-rgb);
}
.card-sub-secondary .icon-bg {
  background-color: var(--dx-secondary-bg-subtle);
  color: var(--dx-secondary);
}
.card-sub-secondary:hover {
  color: var(--dx-secondary);
  --dx-card-border-color: var(--dx-secondary-border-subtle);
}
.card-sub-secondary:hover .icon-hover-bg {
  background-color: rgba(var(--dx-secondary-rgb), 0.08);
}

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

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

.card-success {
  --dx-link-color-rgb: var(--dx-success-rgb);
}
.card-success .icon-bg {
  background-color: var(--dx-success);
  color: #fff;
}
.card-success:hover {
  --dx-card-border-color: var(--dx-success-border-subtle);
  color: #fff;
  --dx-link-color-rgb:#fff;
}
.card-success:hover .icon-bg {
  background-color: rgba(255, 255, 255, 0.144);
}
.card-success:hover .icon-hover-bg {
  background-color: var(--dx-success);
}

.card-sub-success {
  --dx-link-color-rgb: var(--dx-success-rgb);
}
.card-sub-success .icon-bg {
  background-color: var(--dx-success-bg-subtle);
  color: var(--dx-success);
}
.card-sub-success:hover {
  color: var(--dx-success);
  --dx-card-border-color: var(--dx-success-border-subtle);
}
.card-sub-success:hover .icon-hover-bg {
  background-color: rgba(var(--dx-success-rgb), 0.08);
}

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

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

.card-info {
  --dx-link-color-rgb: var(--dx-info-rgb);
}
.card-info .icon-bg {
  background-color: var(--dx-info);
  color: #fff;
}
.card-info:hover {
  --dx-card-border-color: var(--dx-info-border-subtle);
  color: #fff;
  --dx-link-color-rgb:#fff;
}
.card-info:hover .icon-bg {
  background-color: rgba(255, 255, 255, 0.144);
}
.card-info:hover .icon-hover-bg {
  background-color: var(--dx-info);
}

.card-sub-info {
  --dx-link-color-rgb: var(--dx-info-rgb);
}
.card-sub-info .icon-bg {
  background-color: var(--dx-info-bg-subtle);
  color: var(--dx-info);
}
.card-sub-info:hover {
  color: var(--dx-info);
  --dx-card-border-color: var(--dx-info-border-subtle);
}
.card-sub-info:hover .icon-hover-bg {
  background-color: rgba(var(--dx-info-rgb), 0.08);
}

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

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

.card-warning {
  --dx-link-color-rgb: var(--dx-warning-rgb);
}
.card-warning .icon-bg {
  background-color: var(--dx-warning);
  color: #fff;
}
.card-warning:hover {
  --dx-card-border-color: var(--dx-warning-border-subtle);
  color: #fff;
  --dx-link-color-rgb:#fff;
}
.card-warning:hover .icon-bg {
  background-color: rgba(255, 255, 255, 0.144);
}
.card-warning:hover .icon-hover-bg {
  background-color: var(--dx-warning);
}

.card-sub-warning {
  --dx-link-color-rgb: var(--dx-warning-rgb);
}
.card-sub-warning .icon-bg {
  background-color: var(--dx-warning-bg-subtle);
  color: var(--dx-warning);
}
.card-sub-warning:hover {
  color: var(--dx-warning);
  --dx-card-border-color: var(--dx-warning-border-subtle);
}
.card-sub-warning:hover .icon-hover-bg {
  background-color: rgba(var(--dx-warning-rgb), 0.08);
}

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

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

.card-danger {
  --dx-link-color-rgb: var(--dx-danger-rgb);
}
.card-danger .icon-bg {
  background-color: var(--dx-danger);
  color: #fff;
}
.card-danger:hover {
  --dx-card-border-color: var(--dx-danger-border-subtle);
  color: #fff;
  --dx-link-color-rgb:#fff;
}
.card-danger:hover .icon-bg {
  background-color: rgba(255, 255, 255, 0.144);
}
.card-danger:hover .icon-hover-bg {
  background-color: var(--dx-danger);
}

.card-sub-danger {
  --dx-link-color-rgb: var(--dx-danger-rgb);
}
.card-sub-danger .icon-bg {
  background-color: var(--dx-danger-bg-subtle);
  color: var(--dx-danger);
}
.card-sub-danger:hover {
  color: var(--dx-danger);
  --dx-card-border-color: var(--dx-danger-border-subtle);
}
.card-sub-danger:hover .icon-hover-bg {
  background-color: rgba(var(--dx-danger-rgb), 0.08);
}

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

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

.card-light {
  --dx-link-color-rgb: var(--dx-light-rgb);
}
.card-light .icon-bg {
  background-color: var(--dx-light);
  color: #020617;
}
.card-light:hover {
  --dx-card-border-color: var(--dx-light-border-subtle);
  color: #020617;
  --dx-link-color-rgb:#020617;
}
.card-light:hover .icon-bg {
  background-color: rgba(255, 255, 255, 0.144);
}
.card-light:hover .icon-hover-bg {
  background-color: var(--dx-light);
}

.card-sub-light {
  --dx-link-color-rgb: var(--dx-light-rgb);
}
.card-sub-light .icon-bg {
  background-color: var(--dx-light-bg-subtle);
  color: var(--dx-light);
}
.card-sub-light:hover {
  color: var(--dx-light);
  --dx-card-border-color: var(--dx-light-border-subtle);
}
.card-sub-light:hover .icon-hover-bg {
  background-color: rgba(var(--dx-light-rgb), 0.08);
}

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

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

.card-dark {
  --dx-link-color-rgb: var(--dx-dark-rgb);
}
.card-dark .icon-bg {
  background-color: var(--dx-dark);
  color: #fff;
}
.card-dark:hover {
  --dx-card-border-color: var(--dx-dark-border-subtle);
  color: #fff;
  --dx-link-color-rgb:#fff;
}
.card-dark:hover .icon-bg {
  background-color: rgba(255, 255, 255, 0.144);
}
.card-dark:hover .icon-hover-bg {
  background-color: var(--dx-dark);
}

.card-sub-dark {
  --dx-link-color-rgb: var(--dx-dark-rgb);
}
.card-sub-dark .icon-bg {
  background-color: var(--dx-dark-bg-subtle);
  color: var(--dx-dark);
}
.card-sub-dark:hover {
  color: var(--dx-dark);
  --dx-card-border-color: var(--dx-dark-border-subtle);
}
.card-sub-dark:hover .icon-hover-bg {
  background-color: rgba(var(--dx-dark-rgb), 0.08);
}

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

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

.card-pink {
  --dx-link-color-rgb: var(--dx-pink-rgb);
}
.card-pink .icon-bg {
  background-color: var(--dx-pink);
  color: #fff;
}
.card-pink:hover {
  --dx-card-border-color: var(--dx-pink-border-subtle);
  color: #fff;
  --dx-link-color-rgb:#fff;
}
.card-pink:hover .icon-bg {
  background-color: rgba(255, 255, 255, 0.144);
}
.card-pink:hover .icon-hover-bg {
  background-color: var(--dx-pink);
}

.card-sub-pink {
  --dx-link-color-rgb: var(--dx-pink-rgb);
}
.card-sub-pink .icon-bg {
  background-color: var(--dx-pink-bg-subtle);
  color: var(--dx-pink);
}
.card-sub-pink:hover {
  color: var(--dx-pink);
  --dx-card-border-color: var(--dx-pink-border-subtle);
}
.card-sub-pink:hover .icon-hover-bg {
  background-color: rgba(var(--dx-pink-rgb), 0.08);
}

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

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

.card-orange {
  --dx-link-color-rgb: var(--dx-orange-rgb);
}
.card-orange .icon-bg {
  background-color: var(--dx-orange);
  color: #fff;
}
.card-orange:hover {
  --dx-card-border-color: var(--dx-orange-border-subtle);
  color: #fff;
  --dx-link-color-rgb:#fff;
}
.card-orange:hover .icon-bg {
  background-color: rgba(255, 255, 255, 0.144);
}
.card-orange:hover .icon-hover-bg {
  background-color: var(--dx-orange);
}

.card-sub-orange {
  --dx-link-color-rgb: var(--dx-orange-rgb);
}
.card-sub-orange .icon-bg {
  background-color: var(--dx-orange-bg-subtle);
  color: var(--dx-orange);
}
.card-sub-orange:hover {
  color: var(--dx-orange);
  --dx-card-border-color: var(--dx-orange-border-subtle);
}
.card-sub-orange:hover .icon-hover-bg {
  background-color: rgba(var(--dx-orange-rgb), 0.08);
}

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

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

.card-indigo {
  --dx-link-color-rgb: var(--dx-indigo-rgb);
}
.card-indigo .icon-bg {
  background-color: var(--dx-indigo);
  color: #fff;
}
.card-indigo:hover {
  --dx-card-border-color: var(--dx-indigo-border-subtle);
  color: #fff;
  --dx-link-color-rgb:#fff;
}
.card-indigo:hover .icon-bg {
  background-color: rgba(255, 255, 255, 0.144);
}
.card-indigo:hover .icon-hover-bg {
  background-color: var(--dx-indigo);
}

.card-sub-indigo {
  --dx-link-color-rgb: var(--dx-indigo-rgb);
}
.card-sub-indigo .icon-bg {
  background-color: var(--dx-indigo-bg-subtle);
  color: var(--dx-indigo);
}
.card-sub-indigo:hover {
  color: var(--dx-indigo);
  --dx-card-border-color: var(--dx-indigo-border-subtle);
}
.card-sub-indigo:hover .icon-hover-bg {
  background-color: rgba(var(--dx-indigo-rgb), 0.08);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.page-wrapper {
  padding-inline: 0.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: 5rem;
  }
}
@media (min-width: 1536px) {
  .page-wrapper {
    padding-inline: 6.3rem;
  }
}
[data-content-width=fluid] .page-wrapper {
  padding-inline: 0.65rem;
}

.main-sidebar {
  position: fixed;
  bottom: 0;
  left: 0;
  transition: all 0.5s ease-in-out;
  z-index: 1005;
  top: var(--dx-topbar);
  width: var(--dx-sidebar);
  border-right: 1px solid var(--dx-sidebar-border);
  background-color: var(--dx-sidebar-bg);
}
@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);
}
.profile-dropdown .profile-dropdown-menu .profile-link {
  display: block;
  transition: all 0.5s ease-in-out;
  padding: 0.5rem;
  color: var(--dx-secondary-color);
}
@media (prefers-reduced-motion: reduce) {
  .profile-dropdown .profile-dropdown-menu .profile-link {
    transition: none;
  }
}
.profile-dropdown .profile-dropdown-menu .profile-link:hover {
  color: var(--dx-primary);
}
[data-profile-sidebar] .profile-dropdown {
  display: block;
}

.navbar-menu {
  height: calc(100vh - 5rem);
}
[data-profile-sidebar] .navbar-menu {
  height: calc(100vh - 10rem);
}
@media (max-width: 991.98px) {
  .navbar-menu {
    height: calc(100vh - 6rem);
  }
}
.navbar-menu .simplebar-wrapper {
  margin: 0;
}
.navbar-menu .simplebar-wrapper .simplebar-content {
  padding: 0 !important;
}
.navbar-menu .nav-menu-title {
  padding: 0.375rem 1rem;
  font-size: 0.775rem;
  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: 0.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 0.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);
  background-color: var(--dx-sidebar-link-bg-hover-color);
}
.navbar-menu .nav-item .nav-link.active {
  color: var(--dx-sidebar-link-active-color);
  background-color: var(--dx-sidebar-link-bg-active-color);
}
.navbar-menu .nav-item .nav-menu-sub {
  padding: 0;
  list-style-type: none;
  margin-left: 1.5rem;
}
.navbar-menu .nav-item .nav-menu-sub .nav-link {
  padding: 0.375rem 1rem;
  font-size: 14.5px;
  color: var(--dx-sidebar-link-sub-color);
  position: relative;
}
.navbar-menu .nav-item .nav-menu-sub .nav-link[aria-expanded=true] .menu-arrow svg {
  transform: rotate(180deg);
}
.navbar-menu .nav-item .nav-menu-sub .nav-link::before {
  content: "";
  position: absolute;
  top: 0.75rem;
  z-index: 10;
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--dx-sidebar-link-sub-effect-color);
  outline: 1px dashed var(--dx-sidebar-link-sub-color);
  border-radius: 50rem;
  left: -0.25rem;
}
.navbar-menu .nav-item .nav-menu-sub .nav-link:hover {
  color: var(--dx-sidebar-link-sub-hover-color);
  background-color: transparent;
}
.navbar-menu .nav-item .nav-menu-sub .nav-link:hover::before {
  outline-color: var(--dx-sidebar-link-sub-hover-color);
  animation: spin 1s linear infinite;
}
.navbar-menu .nav-item .nav-menu-sub .nav-link.active {
  color: var(--dx-sidebar-link-sub-active-color);
  background-color: transparent;
}
.navbar-menu .nav-item .nav-menu-sub .nav-link.active::before {
  outline-color: var(--dx-sidebar-link-sub-active-color);
}

.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(16, 24, 40, 0.4);
  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 {
  width: var(--dx-sidebar-md);
}
[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: 0.75rem;
  width: calc(var(--dx-sidebar-md) - 24px);
  padding-block: 0.75rem;
  margin: 0.5rem 0.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);
}
[data-sidebar=medium] .navbar-menu .nav-item .nav-menu-sub {
  margin-left: 0;
}
[data-sidebar=medium] .navbar-menu .nav-item .nav-menu-sub .nav-link {
  margin: 0;
  padding: 0.5rem 1.5rem;
  width: 100%;
}
[data-sidebar=medium] .navbar-menu .nav-item .nav-menu-sub .nav-link::before {
  display: none;
}
[data-sidebar=medium] .navbar-menu .nav-item .nav-menu-sub .nav-link.active {
  background-color: transparent;
}
@media (min-width: 992px) {
  [data-sidebar=medium] .page-wrapper {
    margin-left: var(--dx-sidebar-md);
  }
}
@media (min-width: 992px) {
  [data-sidebar=medium] .main-footer {
    left: var(--dx-sidebar-md);
  }
}

[data-sidebar=small] .main-sidebar {
  width: var(--dx-sidebar-sm);
}
[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: 0.75rem;
}
[data-sidebar=small] .navbar-menu .nav-item .nav-link .icons svg {
  height: 1.25rem;
  width: 1.25rem;
}
[data-sidebar=small] .navbar-menu .nav-item .nav-link.active {
  background-color: var(--dx-sidebar-link-bg-active-color);
}
[data-sidebar=small] .navbar-menu .nav-item .nav-menu-sub {
  position: fixed;
  left: var(--dx-sidebar-sm);
  background-color: var(--dx-sidebar-bg);
  box-shadow: var(--dx-sidebar-dropdown-shadow);
  margin-left: 0;
  width: 12rem;
  padding: 0.5rem 0;
}
[data-sidebar=small] .navbar-menu .nav-item .nav-menu-sub .menu-arrow {
  display: inline-block !important;
}
[data-sidebar=small] .navbar-menu .nav-item .nav-menu-sub .nav-link {
  margin: 0;
  padding: 0.5rem 1.5rem;
  width: 100%;
}
[data-sidebar=small] .navbar-menu .nav-item .nav-menu-sub .nav-link::before {
  display: none;
}
[data-sidebar=small] .navbar-menu .nav-item .nav-menu-sub .nav-link.active {
  background-color: transparent;
}
@media (min-width: 992px) {
  [data-sidebar=small] .page-wrapper {
    margin-left: var(--dx-sidebar-sm);
  }
}
@media (min-width: 992px) {
  [data-sidebar=small] .main-footer {
    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-right: 1rem;
  border-bottom: 1px solid var(--dx-topbar-border);
  background-color: var(--dx-topbar-bg);
  transition: all 0.5s ease-in-out;
}
@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-left: 1rem;
}
.main-topbar .topbar-link {
  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: 0.375rem;
  border-width: 0;
  margin-left: 0.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: 14rem;
}
@media (max-width: 767.98px) {
  .profile-dropdown-menu {
    min-width: 18rem;
    width: auto;
  }
}

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

.topbar-mode .light {
  display: none;
}

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

.navbar-search .icon {
  position: absolute;
  top: 0.75rem;
  left: 0.5rem;
  color: var(--dx-topbar-color);
}
.navbar-search .form-control {
  background-color: transparent;
  width: 18rem;
  padding-left: 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;
}

.notification-animate {
  position: absolute;
  top: -3px;
  right: -3px;
}

.topbar-notification {
  max-height: calc(100vh - 170px);
}
.topbar-notification .notification-item {
  color: currentColor;
  transition: all 0.5s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .topbar-notification .notification-item {
    transition: none;
  }
}
.topbar-notification .notification-item:is(.unread, :hover) {
  background-color: var(--dx-tertiary-bg);
}

.tool-apps .form-check {
  position: relative;
  padding-left: 0;
}
.tool-apps .form-check .form-check-input {
  right: -5px;
  top: -5px;
  position: absolute;
  background-color: var(--dx-secondary-bg);
}
.tool-apps .form-check .form-check-input:checked {
  background-color: var(--dx-primary);
}
.tool-apps .form-check .form-check-input:checked + .form-check-label {
  border-color: var(--dx-primary);
}
.tool-apps .form-check .form-check-label {
  font-weight: 600;
  border: 1px solid var(--dx-border-color);
  border-radius: 0.375rem;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
}
.tool-apps .form-check .form-check-label img {
  height: 28px;
}

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

:is([data-topbar-colors=dark], [data-topbar-colors=brand], [data-topbar-colors=purple], [data-topbar-colors=sky]) .logos .logo-light {
  display: block;
}
:is([data-topbar-colors=dark], [data-topbar-colors=brand], [data-topbar-colors=purple], [data-topbar-colors=sky]) .logos .logo-dark {
  display: none;
}

.main-footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  margin-inline: 0.9375rem;
  padding-inline: 1rem;
  height: 3.5rem;
  border-top: 1px solid var(--dx-border-color);
}
@media (min-width: 992px) {
  .main-footer {
    left: var(--dx-sidebar);
  }
}
@media (min-width: 1200px) {
  .main-footer {
    padding-inline: 1rem;
  }
}
@media (min-width: 1536px) {
  .main-footer {
    margin-inline: 7rem;
  }
}
[data-content-width=fluid] .main-footer {
  margin-inline: 1.25rem;
}

[data-layout=modern][data-nav-type=floating] .main-topbar {
  position: absolute;
}
[data-layout=modern][data-nav-type=boxed] .main-topbar {
  border: 1px solid var(--dx-topbar-border);
  margin: 0.75rem;
  border-radius: 0.375rem;
}
[data-layout=modern][data-nav-type=boxed] .main-topbar.nav-sticky {
  margin-top: 0;
}
[data-layout=modern][data-nav-type=boxed] .page-wrapper {
  padding-top: calc(var(--dx-topbar) * 1.3);
}
[data-layout=modern][data-nav-type=pattern] .sidebar-toggle {
  color: rgba(var(--dx-white-rgb), 0.75);
}
[data-layout=modern][data-nav-type=pattern] .main-topbar {
  border-color: rgba(var(--dx-white-rgb), 0.2);
  background-color: transparent;
}
[data-layout=modern][data-nav-type=pattern] .main-topbar.nav-sticky {
  background-color: var(--dx-primary);
}
[data-layout=modern][data-nav-type=pattern] .main-topbar .topbar-link {
  color: rgba(var(--dx-white-rgb), 0.75);
}
[data-layout=modern][data-nav-type=pattern] .main-topbar .topbar-link:hover {
  color: #fff;
}
[data-layout=modern][data-nav-type=pattern] .topbar-main-btn {
  --dx-btn-border-color: rgba(var(--dx-white-rgb), 0.2) !important;
  --dx-btn-color: rgba(var(--dx-white-rgb), 0.75);
  --dx-btn-hover-color: var(--dx-white);
  --dx-btn-focus-color: var(--dx-white);
  --dx-btn-active-color: var(--dx-white);
}
[data-layout=modern][data-nav-type=pattern] .navbar-search .icon {
  color: rgba(var(--dx-white-rgb), 0.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), 0.75);
}
[data-layout=modern][data-nav-type=pattern] .nav-pattern {
  position: absolute;
  inset: 0;
  display: inline-block;
  height: 13rem;
  background-color: var(--dx-primary);
}
[data-layout=modern][data-nav-type=pattern] .nav-pattern svg {
  width: 100%;
  height: auto;
}
[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), 0.75);
}

.nav-pattern {
  display: none;
}

[data-layout=boxed] body {
  margin: var(--dx-boxed-width) var(--dx-boxed-width) 0;
  background-color: var(--dx-boxed-bg);
}
[data-layout=boxed] .main-topbar {
  top: var(--dx-boxed-width);
  right: var(--dx-boxed-width);
  left: var(--dx-boxed-width) !important;
}
[data-layout=boxed] .main-topbar.nav-sticky {
  top: 0;
}
[data-layout=boxed] .main-sidebar {
  top: calc(var(--dx-topbar) + var(--dx-boxed-width));
  left: var(--dx-boxed-width);
}
[data-layout=boxed] .main-sidebar .navbar-menu {
  height: calc(100vh - 5rem - var(--dx-boxed-width));
}
[data-layout=boxed] .main-sidebar.sidebar-sticky {
  top: var(--dx-topbar);
}
[data-layout=boxed] .main-sidebar.sidebar-sticky .navbar-menu {
  height: calc(100vh - 5rem);
}
@media (max-width: 991.98px) {
  [data-layout=boxed] .main-sidebar {
    top: 0;
    left: 0;
  }
}
[data-layout=boxed][data-profile-sidebar=true] .main-sidebar .navbar-menu {
  height: calc(100vh - 9rem - var(--dx-boxed-width));
}
[data-layout=boxed][data-profile-sidebar=true] .main-sidebar.sidebar-sticky .navbar-menu {
  height: calc(100vh - 9rem);
}
[data-layout=boxed] .page-wrapper {
  background-color: var(--dx-body-bg);
  min-height: 100vh;
}
@media (max-width: 991.98px) {
  [data-layout=boxed] .sidebar-hidden .main-sidebar {
    left: calc(var(--dx-sidebar) * -1.1);
  }
}

[data-layout=semibox] .main-sidebar {
  inset: var(--dx-semibox-width);
  top: var(--dx-semibox-width) !important;
  border: 1px solid var(--dx-sidebar-border);
  border-radius: 0.375rem;
}
[data-layout=semibox] .main-topbar {
  border: 1px solid var(--dx-border-color);
  border-radius: 0.375rem;
  top: var(--dx-semibox-width);
  left: calc(var(--dx-sidebar) + var(--dx-semibox-width) + var(--dx-semibox-width)) !important;
  right: var(--dx-semibox-width);
}
[data-layout=semibox] .main-topbar.nav-sticky {
  top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
@media (max-width: 1199.98px) {
  [data-layout=semibox] .main-topbar {
    left: var(--dx-semibox-width) !important;
  }
}
[data-layout=semibox] .page-wrapper {
  padding-top: calc(var(--dx-topbar) + var(--dx-semibox-width) + var(--dx-semibox-width));
}
[data-layout=semibox] .navbar-menu {
  height: calc(100vh - 7rem);
}
[data-layout=semibox][data-profile-sidebar=true] .navbar-menu {
  height: calc(100vh - 12rem);
}
@media (min-width: 992px) {
  [data-layout=semibox][data-sidebar=medium] .main-topbar {
    left: calc(var(--dx-sidebar-md) + var(--dx-semibox-width) + var(--dx-semibox-width)) !important;
  }
  [data-layout=semibox][data-sidebar=small] .main-topbar {
    left: calc(var(--dx-sidebar-sm) + var(--dx-semibox-width) + var(--dx-semibox-width)) !important;
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  [data-layout=semibox] .sidebar-hidden .main-sidebar {
    left: calc(var(--dx-sidebar-sm) * -1.1);
  }
  [data-layout=semibox] .sidebar-hidden .main-topbar {
    left: var(--dx-semibox-width) !important;
  }
  [data-layout=semibox] .sidebar-hidden .page-wrapper {
    margin-left: 0 !important;
  }
}
@media (max-width: 991.98px) {
  [data-layout=semibox] .sidebar-hidden .main-sidebar {
    left: calc(var(--dx-sidebar) * -1.1);
  }
  [data-layout=semibox] .sidebar-hidden .main-sidebar.show {
    display: block;
    left: 0;
  }
}

[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 .navbar-nav-menu .nav-menu-sub {
  position: fixed;
  background-color: var(--dx-sidebar-bg);
  box-shadow: var(--dx-sidebar-dropdown-shadow);
  margin-left: 0;
  width: 12rem;
  padding: 0.5rem 0;
  overflow-y: auto;
  max-height: calc(100vh - var(--dx-topbar) - var(--dx-topbar));
}
[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;
  }
}
[data-layout=horizontal] .main-footer {
  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] .navbar-menu .navbar-nav-menu .nav-menu-sub {
    position: static;
    box-shadow: none;
    background-color: transparent;
    width: 100%;
  }
}
[data-layout=horizontal][data-sidebar=medium] .navbar-menu .nav-item .nav-link {
  font-size: 14px;
}
[data-layout=horizontal][data-sidebar=medium] .navbar-menu .nav-item .nav-link .icons svg {
  height: 1rem;
  width: 1rem;
}
[data-layout=horizontal][data-sidebar=medium] .navbar-menu .nav-item .nav-menu-sub .nav-link {
  align-items: start;
}

:is([data-layout=modern], [data-layout=semibox]) .main-sidebar {
  top: 0;
}
:is([data-layout=modern], [data-layout=semibox]) .main-sidebar .navbar-brand {
  display: flex;
}
:is([data-layout=modern], [data-layout=semibox]) .main-sidebar .navbar-brand .logo-lg .logo-light {
  display: none;
}
:is([data-layout=modern], [data-layout=semibox]) .main-sidebar .navbar-brand .logo-sm {
  display: none;
}
@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;
}

[data-bs-theme=black-white] {
  filter: grayscale(100%) !important;
}

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

.setting-modal .setting-widget .setting-widget-wrapper {
  display: flex;
  gap: 0.25rem;
  padding: 6px 16px;
  background-color: var(--dx-tertiary-bg);
}
.setting-modal .setting-widget .setting-widget-wrapper span {
  height: 6px;
  width: 6px;
  display: inline-block;
  border-radius: 50rem;
}
.setting-modal .setting-widget.setting-vertical-widget {
  display: block;
  overflow: hidden;
  height: 112px;
  cursor: pointer;
}
.setting-modal .setting-widget.setting-vertical-widget .setting-widget-content {
  height: calc(100% - 8px);
}
.setting-modal .setting-widget.setting-vertical-widget .setting-widget-content .custom-height-element {
  height: 0.375rem;
}
.setting-modal #navigationType .form-check-label {
  outline: none;
}
.setting-modal .form-check {
  padding-left: 0;
}
.setting-modal .form-check-label.system-mode::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 50%;
  background-color: var(--dx-black);
  width: 50%;
}
.setting-modal input[type=radio]:checked + .form-check-label {
  outline: 1px solid var(--dx-primary);
}
.setting-modal input[type=radio]:checked + .form-check-label.outline-offset-2 {
  outline-offset: 2px;
}
.setting-modal .grayscale {
  filter: grayscale(100%);
}
.setting-modal .custom-size-element {
  height: 0.375rem;
  width: 0.375rem;
}
.setting-modal .sidebar-color-2 {
  background-color: #0f1d35;
}
.setting-modal .sidebar-color-3 {
  background-color: #1b408d;
}
.setting-modal .sidebar-color-4 {
  background-color: #59359a;
}
.setting-modal .sidebar-color-5 {
  background-color: #075985;
}
.setting-modal .theme-color-1 {
  background-color: #358ffc;
}
.setting-modal .theme-color-2 {
  background-color: #1acd81;
}
.setting-modal .theme-color-3 {
  background-color: #8b5cf6;
}
.setting-modal .theme-color-4 {
  background-color: #f04b1f;
}
.setting-modal .theme-color-5 {
  background-color: #00bba7;
}
.setting-modal .theme-color-6 {
  background-color: #e12afb;
}
.setting-modal .theme-color-7 {
  background-color: #84cc16;
}
.setting-modal .theme-color-8 {
  background-color: #fe9a00;
}

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

.alert-live-backdrop {
  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);
}

.icon-alert {
  border-color: var(--dx-border-color);
}
.icon-alert .icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.primary-gradient {
  background: linear-gradient(to right, #358ffc, #1759de);
}

.secondary-gradient {
  background: linear-gradient(to right, #a855f7, #7e22ce);
}

.success-gradient {
  background: linear-gradient(to right, #358ffc, #22c55e);
}

.danger-gradient {
  background: linear-gradient(to right, #152956, #450a0a);
}

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

.basic-alert {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid var(--dx-secondary-bg);
  position: absolute;
  top: -1.25rem;
  left: 50%;
  transform: translateX(-50%);
}

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

.double-arrow .breadcrumb-item + .breadcrumb-item::before {
  content: "\f2e4";
}

.single-arrow .breadcrumb-item + .breadcrumb-item::before {
  content: "\ea6e";
}

.dash-arrow .breadcrumb-item + .breadcrumb-item::before {
  content: "\f1af";
}

.btn-navigation {
  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: 0.375rem;
}
.btn-navigation a {
  color: var(--dx-secondary-color);
  padding: 1.5rem 1rem;
  position: relative;
  flex-grow: 1;
  text-align: center;
  transition: all 0.5s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .btn-navigation a {
    transition: none;
  }
}

.navigation-bottom-animation a::before {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50rem;
  transform: translateX(-50%);
  transition: all 0.5s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .navigation-bottom-animation a::before {
    transition: none;
  }
}
.navigation-bottom-animation a:is(:hover, .active)::before {
  bottom: 10px;
}

.navigation-border-animation a::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 0.125rem;
  transform: translateX(-50%);
  transition: all 0.5s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .navigation-border-animation a::before {
    transition: none;
  }
}
.navigation-border-animation a:is(:hover, .active)::before {
  width: 100%;
}
.navigation-border-animation.top-border a::before {
  position: absolute;
  top: 0;
  left: 50%;
}

.notification {
  display: inline-flex;
  height: 22px;
  width: 22px;
  align-items: center;
  justify-content: center;
  border-width: 1px;
  font-size: 0.6875rem;
  padding: 0;
  border: 2px solid var(--dx-secondary-bg);
}
.notification.top-end {
  position: absolute;
  top: -8px;
  right: -8px;
}
.notification.top-start {
  position: absolute;
  top: -8px;
  left: -8px;
}
.notification.bottom-start {
  position: absolute;
  bottom: -8px;
  left: -8px;
}
.notification.bottom-end {
  position: absolute;
  right: -8px;
  bottom: -8px;
}
.notification.inside {
  position: static;
}

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

.spin {
  height: 2rem;
  width: 2rem;
  border-radius: 50rem;
}

.modern-spinner {
  border: 2px solid;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
}

.gradient-loader .bg-gradient {
  border-color: var(--dx-primary) var(--dx-success) var(--dx-warning) var(--dx-danger) !important;
}
.gradient-loader .bg-gradient2 {
  border-color: var(--dx-info) var(--dx-pink) var(--dx-secondary) var(--dx-primary) !important;
}
.gradient-loader .bg-sub-gradient {
  border-color: var(--dx-primary-bg-subtle) var(--dx-success-bg-subtle) var(--dx-warning-bg-subtle) var(--dx-danger-bg-subtle) !important;
}

.animation-button .circle {
  margin-top: -0.25rem;
  margin-right: -0.25rem;
}
.animation-button .loader-button-animation {
  position: absolute;
  top: -0.2188rem;
  right: -0.2188rem;
}

.animate-bounce {
  border: 2px solid var(--dx-border-color);
}

.accordion.accordion-boxed .accordion-item {
  border: none;
}
.accordion.accordion-boxed .accordion-item:not(:last-child) {
  margin-bottom: 0.875rem;
}
.accordion.accordion-boxed .accordion-button {
  border: 1px solid var(--dx-accordion-border-color);
  border-radius: 0.375rem;
}

.accordion .accordion-button {
  padding-right: 1.6rem;
}
.accordion .accordion-button::after {
  content: "\ea4e";
  font-family: "remixicon" !important;
  position: absolute;
  top: 50%;
  right: 0.4rem;
  background: none;
  font-size: 22px;
  transform: translateY(-50%);
  line-height: 1;
  font-weight: 300;
}
.accordion .accordion-button[aria-expanded=true]::after {
  transform: translateY(-50%) rotate(-180deg);
}

.modal {
  --dx-modal-box-shadow: 0 10px 15px -3px rgba(229, 231, 235, 0.3), 0 4px 6px -4px rgba(229, 231, 235, 0.3);
}

.modal-footer {
  padding: 1.25rem;
}

.modal-dialog-start {
  margin-left: 1.25rem;
}

.modal-dialog-end {
  margin-right: 1.25rem;
}

.modal-dialog-bottom-end {
  position: absolute;
  right: 1.25rem;
  bottom: 0;
}

.modal-dialog-bottom-start {
  position: absolute;
  left: 1.25rem;
  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;
  }
}
.progress-bar.progress-gradient {
  background: var(--dx-progress-bar-bg);
}
.progress-bar.progress-gradient-primary {
  --dx-progress-bar-bg: linear-gradient(90deg, var(--dx-primary), var(--dx-success));
}
.progress-bar.progress-gradient-info {
  --dx-progress-bar-bg: linear-gradient(90deg, var(--dx-primary), var(--dx-info-text-emphasis), var(--dx-info));
}
.progress-bar.progress-gradient-indigo {
  --dx-progress-bar-bg: linear-gradient(90deg, var(--dx-indigo), var(--dx-secondary));
}

.progress-1 {
  height: 0.5rem;
}

.progress-2 {
  height: 0.625rem;
}

.progress-3 {
  height: 0.75rem;
}

.progress-4 {
  height: 1rem;
}

.progress-5 {
  height: 1.25rem;
}

.progress-6 {
  height: 1.5rem;
}

.progress-7 {
  height: 2rem;
}

.progress-circle {
  position: relative;
  display: inline-block;
}
.progress-circle svg {
  transform: rotate(-90deg);
}
.progress-circle circle {
  fill: none;
  stroke-linecap: round;
}
.progress-circle .progress-bg {
  stroke: var(--dx-tertiary-bg);
}
.progress-circle .progress-fill {
  transition: stroke-dashoffset 1s ease-in-out;
}
.progress-circle .progress-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}
.progress-circle .progress-text-inner {
  text-align: center;
  line-height: 1.2;
}
.progress-circle .animate-count {
  transition: all 0.5s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .progress-circle .animate-count {
    transition: none;
  }
}

.offcanvas .offcanvas-header {
  border-bottom: 1px solid var(--dx-offcanvas-border-color);
}
.offcanvas .offcanvas-footer {
  padding: 1.25rem 1.25rem;
  border-top: 1px solid var(--dx-offcanvas-border-color);
}
.offcanvas.offcanvas-small {
  width: 7rem;
}
.offcanvas.offcanvas-large {
  width: 24rem;
}
@media (min-width: 576px) {
  .offcanvas.offcanvas-half {
    width: 50%;
  }
}

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

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

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

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

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

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

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

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

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

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

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

.toast-content {
  --dx-toast-max-width: 24rem;
  --dx-toast-box-shadow: 0 10px 15px -3px #bdbdbd9f, 0 4px 6px -4px #bbbbbb41;
}

.basic-gallery img {
  transition: transform 5s ease-in-out;
}
.basic-gallery:hover > img {
  transform: scale(1.25);
}

@media (min-width: 992px) {
  .item-4 {
    margin-top: -9rem;
  }
  .item-6 {
    margin-top: -7rem;
  }
  .item-7 {
    margin-top: -17rem;
  }
}
@media (min-width: 768px) and (max-width: 992px) {
  .item-3 {
    margin-top: -9rem;
  }
  .item-5 {
    margin-top: -3rem;
  }
  .item-7 {
    margin-top: -3rem;
  }
}
.timeline {
  display: flex;
  flex-direction: column;
  position: relative;
  list-style: none;
}

.timeline.timeline-square > *::after {
  border-radius: 0.125rem;
}

.timeline-basic {
  list-style: none;
  margin-bottom: 0;
  padding-left: 0;
}
.timeline-basic .timeline-item {
  position: relative;
  padding-left: 1.25rem;
  padding-bottom: 0.75rem;
}
.timeline-basic .timeline-item:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 0.5rem;
  bottom: -0.5rem;
  left: 0.125rem;
  width: 2px;
  background-color: var(--dx-tertiary-bg);
}
.timeline-basic .timeline-item::after {
  content: "";
  position: absolute;
  top: 0.5rem;
  left: 0;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 999px;
  background-color: var(--dx-tertiary-bg);
}
.timeline-basic .timeline-item:last-child {
  padding-bottom: 0;
}

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

.timeline-secondary .timeline-item.active::after, .timeline-secondary .timeline-item.active::before {
  background-color: var(--dx-secondary);
}

.timeline-success .timeline-item.active::after, .timeline-success .timeline-item.active::before {
  background-color: var(--dx-success);
}

.timeline-info .timeline-item.active::after, .timeline-info .timeline-item.active::before {
  background-color: var(--dx-info);
}

.timeline-warning .timeline-item.active::after, .timeline-warning .timeline-item.active::before {
  background-color: var(--dx-warning);
}

.timeline-danger .timeline-item.active::after, .timeline-danger .timeline-item.active::before {
  background-color: var(--dx-danger);
}

.timeline-light .timeline-item.active::after, .timeline-light .timeline-item.active::before {
  background-color: var(--dx-light);
}

.timeline-dark .timeline-item.active::after, .timeline-dark .timeline-item.active::before {
  background-color: var(--dx-dark);
}

.timeline-pink .timeline-item.active::after, .timeline-pink .timeline-item.active::before {
  background-color: var(--dx-pink);
}

.timeline-orange .timeline-item.active::after, .timeline-orange .timeline-item.active::before {
  background-color: var(--dx-orange);
}

.timeline-indigo .timeline-item.active::after, .timeline-indigo .timeline-item.active::before {
  background-color: var(--dx-indigo);
}

.changelog-timeline {
  position: relative;
  list-style: none;
  margin-bottom: 0;
  padding-left: 0;
}
.changelog-timeline .timeline-item {
  position: relative;
  padding-bottom: 1.5rem;
  display: flex;
  justify-content: center;
}
.changelog-timeline .timeline-item::before {
  content: "";
  position: absolute;
  top: 0.5rem;
  bottom: -0.5rem;
  left: 1rem;
  width: 0.125rem;
  margin: 1.875rem 0 1rem 0;
  background-color: var(--dx-tertiary-bg);
}
.changelog-timeline .timeline-item:last-child {
  padding-bottom: 0;
}
.changelog-timeline .timeline-item:last-child::before {
  display: none;
}
.changelog-timeline .timeline-item .dot {
  position: absolute;
  height: 6px;
  width: 6px;
  top: 50%;
  transform: translateY(-50%);
}

.timeline-modern {
  list-style: none;
}
.timeline-modern .timeline-item {
  position: relative;
}
.timeline-modern .timeline-item::before {
  content: "";
  position: absolute;
  top: -1.3rem;
  bottom: -0.5rem;
  left: 16px;
  width: 0.0625rem;
  background-color: var(--dx-tertiary-bg);
  z-index: -1;
}
.timeline-modern .timeline-item:last-child::before {
  content: none;
}

.pagination {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.pagination .page-item:is(:first-child, :last-child) .page-link {
  display: flex;
  align-items: center;
  gap: 0.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;
}
.pagination.pagination-rounded .page-link {
  border-radius: 50rem;
}
.pagination.pagination-modern {
  gap: 0;
}
.pagination.pagination-modern .page-item .page-link {
  width: auto;
  padding: var(--dx-pagination-padding-y) var(--dx-pagination-padding-x);
  border-radius: 0;
  gap: 0.25rem;
}
.pagination.pagination-modern .page-item:is(:first-child, :last-child) .page-link {
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.pagination.pagination-modern .page-item:first-child .page-link {
  border-top-left-radius: var(--dx-pagination-border-radius);
  border-bottom-left-radius: var(--dx-pagination-border-radius);
}
.pagination.pagination-modern .page-item:last-child .page-link {
  border-top-right-radius: var(--dx-pagination-border-radius);
  border-bottom-right-radius: var(--dx-pagination-border-radius);
}
.pagination.pagination-modern.pagination-rounded .page-item:first-child .page-link {
  border-top-left-radius: 50rem;
  border-bottom-left-radius: 50rem;
}
.pagination.pagination-modern.pagination-rounded .page-item:last-child .page-link {
  border-top-right-radius: 50rem;
  border-bottom-right-radius: 50rem;
}
.pagination.pagination-flush .page-item .page-link {
  border: 0;
}
.pagination.pagination-xs .page-item .page-link {
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
}
.pagination.pagination-xs .page-item:is(:first-child, :last-child) .page-link {
  width: auto;
  height: 1.5rem;
  padding: 0.125rem 0.5rem;
}
.pagination.pagination-sm .page-item .page-link {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
}
.pagination.pagination-sm .page-item:is(:first-child, :last-child) .page-link {
  width: auto;
  height: 1.75rem;
}
.pagination.pagination-md .page-item .page-link {
  width: 2rem;
  height: 2rem;
}
.pagination.pagination-md .page-item:is(:first-child, :last-child) .page-link {
  width: auto;
  height: 2rem;
}
.pagination.pagination-lg .page-item .page-link {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 0.9375rem;
}
.pagination.pagination-lg .page-item:is(:first-child, :last-child) .page-link {
  width: auto;
  height: 2.5rem;
}

.link {
  transition: all 0.5s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .link {
    transition: none;
  }
}
.link.link-custom {
  color: var(--dx-body-color);
}
.link.link-custom:hover {
  color: var(--dx-primary);
}

.list-borderless {
  --dx-list-group-border-width: none;
  --dx-list-group-item-padding-x: 0px;
  --dx-list-group-item-padding-y: 4px;
}

.list-arrow {
  list-style-image: url("../images/others/arrow-right.png");
}

.list-boxed .list-group-item {
  border: var(--dx-list-group-border-width) solid var(--dx-list-group-border-color);
  border-radius: 0.375rem;
}
.list-boxed .list-group-item:not(:last-child) {
  margin-bottom: 0.5rem;
}

.list-group-primary li::marker, .list-group-primary li:before {
  color: var(--dx-primary);
}

.list-group-secondary li::marker, .list-group-secondary li:before {
  color: var(--dx-secondary);
}

.list-group-success li::marker, .list-group-success li:before {
  color: var(--dx-success);
}

.list-group-info li::marker, .list-group-info li:before {
  color: var(--dx-info);
}

.list-group-warning li::marker, .list-group-warning li:before {
  color: var(--dx-warning);
}

.list-group-danger li::marker, .list-group-danger li:before {
  color: var(--dx-danger);
}

.list-group-light li::marker, .list-group-light li:before {
  color: var(--dx-light);
}

.list-group-dark li::marker, .list-group-dark li:before {
  color: var(--dx-dark);
}

.list-group-pink li::marker, .list-group-pink li:before {
  color: var(--dx-pink);
}

.list-group-orange li::marker, .list-group-orange li:before {
  color: var(--dx-orange);
}

.list-group-indigo li::marker, .list-group-indigo li:before {
  color: var(--dx-indigo);
}

.nav-underline .nav-link {
  padding: 0.5rem 1rem;
  position: relative;
  border: 0;
}
.nav-underline .nav-link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0 auto;
  height: 1px;
  width: 0px;
  border-radius: 50rem;
  transition: all 0.5s ease-in-out;
  background-color: var(--dx-nav-underline-link-active-color);
}
@media (prefers-reduced-motion: reduce) {
  .nav-underline .nav-link::after {
    transition: none;
  }
}
.nav-underline .nav-link:is(:hover, .active)::after {
  width: 100%;
}
.nav-underline .nav-link.active {
  font-weight: 500;
}

.tabs-animation .nav-link {
  position: relative;
  overflow: hidden;
  height: 2.75rem;
  text-align: center;
  width: 8rem;
}
.tabs-animation .nav-link .icon {
  transition: all 0.5s ease-in-out;
  margin-inline: auto;
  display: inline-block;
  width: 1rem;
  height: 1rem;
}
@media (prefers-reduced-motion: reduce) {
  .tabs-animation .nav-link .icon {
    transition: none;
  }
}
.tabs-animation .nav-link .content {
  transition: all 0.5s ease-in-out;
  display: block;
  transform: translateY(-3.5rem);
}
@media (prefers-reduced-motion: reduce) {
  .tabs-animation .nav-link .content {
    transition: none;
  }
}
.tabs-animation .nav-link:hover .content {
  transform: translateY(-1.1rem);
}
.tabs-animation .nav-link:hover .icon {
  transform: translateY(2.5rem);
}

.modern-spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}
:is(.animate-dot, .animate-bounce) {
  animation: bounce 1s infinite;
}
:is(.animate-dot, .animate-bounce).delay-150 {
  animation-delay: -0.3s;
}
:is(.animate-dot, .animate-bounce).delay-300 {
  animation-delay: -0.15s;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}
.animate-ping {
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes ping {
  75%, 100% {
    content: var(--tw-content);
    transform: scale(2);
    opacity: 0;
  }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  50% {
    opacity: 0.5;
  }
}
@keyframes shimmer {
  100% {
    transform: translate(0);
    opacity: 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 0.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:not(:first-child) {
  margin-left: -10px;
}
.avatar-group .avatar-group-item:hover {
  z-index: 10;
}

:is(.btn.show) {
  border-color: transparent;
}

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

[class*=btn-3d-] {
  box-shadow: inset 0 2px 4px 0 var(--dx-btn-shadow-color);
}

.btn.btn-xs {
  padding: 0.125rem 0.5rem;
  font-size: 0.6875rem;
}

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

.btn.btn-lg {
  padding: 0.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), 0.1);
}

.btn.btn-icon {
  width: 2.5625rem;
  height: 2.5625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, opacity 0.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%, rgba(56, 189, 248, 0.6) 0%, rgba(56, 189, 248, 0) 75%);
  opacity: 0;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, opacity 0.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 0.5s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .btn-translate-up {
    transition: none;
  }
}
.btn-translate-up:hover {
  transform: translateY(-0.125rem);
}

.btn-translate-down {
  transform: translateY(0);
  transition: all 0.5s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .btn-translate-down {
    transition: none;
  }
}
.btn-translate-down:hover {
  transform: translateY(0.125rem);
}

.btn-scale {
  transform: scale(1);
  transition: all 0.5s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .btn-scale {
    transition: none;
  }
}
.btn-scale:hover {
  transform: scale(1.1);
}

.card {
  margin-bottom: 1.25rem;
}
.card.card-h-100 {
  height: calc(100% - 1.25rem);
}

.card-hover-animate {
  transition: transform 0.3s ease-in-out;
}
.card-hover-animate:hover {
  transform: translateY(-0.25rem);
}

.basic-card .card-img-top {
  height: 8rem;
  object-fit: cover;
  width: 100%;
}
.basic-card .user {
  height: 120px;
  width: 120px;
  margin-top: -4rem;
}

.card-hover-effect {
  transition: all 0.5s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .card-hover-effect {
    transition: none;
  }
}
.card-hover-effect .icon-bg {
  height: 5rem;
  width: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-hover-effect .icon-hover-bg {
  position: absolute;
  top: 30px;
  left: 30px;
  transition: all 0.5s ease-in-out;
  height: 5rem;
  width: 5rem;
  border-radius: 50%;
}
@media (prefers-reduced-motion: reduce) {
  .card-hover-effect .icon-hover-bg {
    transition: none;
  }
}
.card-hover-effect:hover {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  transform: translateY(-6px);
}
.card-hover-effect:hover .icon-hover-bg {
  transform: scale(10);
  border-radius: 100%;
}

.bg-overlay {
  position: absolute;
  inset: 0;
  background-color: #0f172a;
  opacity: 0.2;
}

.dropdown-menu .dropdown-item {
  border-radius: 0.375rem;
  transition: all 0.5s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .dropdown-menu .dropdown-item {
    transition: none;
  }
}

:is(.dropdown .dropdown-toggle, .dropdown-toggle-split.dropdown-toggle)::after {
  content: "\ea4e";
  font-family: "remixicon" !important;
  border: none;
  font-size: 20px;
  line-height: 0.8;
  margin-top: 0;
  vertical-align: -0.2rem;
}
:is(.dropdown .dropdown-toggle, .dropdown-toggle-split.dropdown-toggle).show::after {
  transform: rotate(180deg);
}

.dropend .dropdown-toggle::after {
  content: "\ea4e";
  font-family: "remixicon" !important;
  border: none !important;
  font-size: 20px;
  line-height: 0.8;
  margin-top: 3.2px;
  transform: rotate(-90deg);
}
.dropend .dropdown-toggle:hover::after {
  transform: rotate(-90deg);
}

.dropstart .dropdown-toggle::before {
  content: "\ea4e";
  font-family: "remixicon" !important;
  border: none;
  font-size: 20px;
  line-height: 0.8;
  margin-top: 3.2px;
  transform: rotate(90deg);
}

.dropup .dropdown-toggle::after {
  content: "\ea4e";
  font-family: "remixicon" !important;
  border: none;
  font-size: 20px;
  line-height: 0.8;
  margin-top: 3.2px;
  transform: rotate(180deg);
}

.square {
  height: 20rem;
  width: 20rem;
  background: linear-gradient(136deg, rgba(var(--dx-primary-rgb), 0.2), rgba(var(--dx-secondary-rgb), 0.2), rgba(var(--dx-info-rgb), 0.2));
  margin: 0 auto;
}

.simplebar-scrollbar:before {
  background: var(--dx-border-color) !important;
}

.simplebar-primary .simplebar-scrollbar:before {
  background-color: var(--dx-primary) !important;
}

.simplebar-secondary .simplebar-scrollbar:before {
  background-color: var(--dx-secondary) !important;
}

.simplebar-success .simplebar-scrollbar:before {
  background-color: var(--dx-success) !important;
}

.simplebar-info .simplebar-scrollbar:before {
  background-color: var(--dx-info) !important;
}

.simplebar-warning .simplebar-scrollbar:before {
  background-color: var(--dx-warning) !important;
}

.simplebar-danger .simplebar-scrollbar:before {
  background-color: var(--dx-danger) !important;
}

.simplebar-light .simplebar-scrollbar:before {
  background-color: var(--dx-light) !important;
}

.simplebar-dark .simplebar-scrollbar:before {
  background-color: var(--dx-dark) !important;
}

.simplebar-pink .simplebar-scrollbar:before {
  background-color: var(--dx-pink) !important;
}

.simplebar-orange .simplebar-scrollbar:before {
  background-color: var(--dx-orange) !important;
}

.simplebar-indigo .simplebar-scrollbar:before {
  background-color: 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-primary .swiper-pagination-bullet {
  background: var(--dx-primary);
  height: 0.75rem;
  width: 0.75rem;
}
.swiper-primary .swiper-pagination-bullet-active {
  background: var(--dx-white);
  border: 3px solid var(--dx-primary);
}

.swiper-secondary .swiper-pagination-bullet {
  background: var(--dx-secondary);
  height: 0.75rem;
  width: 0.75rem;
}
.swiper-secondary .swiper-pagination-bullet-active {
  background: var(--dx-white);
  border: 3px solid var(--dx-secondary);
}

.swiper-success .swiper-pagination-bullet {
  background: var(--dx-success);
  height: 0.75rem;
  width: 0.75rem;
}
.swiper-success .swiper-pagination-bullet-active {
  background: var(--dx-white);
  border: 3px solid var(--dx-success);
}

.swiper-info .swiper-pagination-bullet {
  background: var(--dx-info);
  height: 0.75rem;
  width: 0.75rem;
}
.swiper-info .swiper-pagination-bullet-active {
  background: var(--dx-white);
  border: 3px solid var(--dx-info);
}

.swiper-warning .swiper-pagination-bullet {
  background: var(--dx-warning);
  height: 0.75rem;
  width: 0.75rem;
}
.swiper-warning .swiper-pagination-bullet-active {
  background: var(--dx-white);
  border: 3px solid var(--dx-warning);
}

.swiper-danger .swiper-pagination-bullet {
  background: var(--dx-danger);
  height: 0.75rem;
  width: 0.75rem;
}
.swiper-danger .swiper-pagination-bullet-active {
  background: var(--dx-white);
  border: 3px solid var(--dx-danger);
}

.swiper-light .swiper-pagination-bullet {
  background: var(--dx-light);
  height: 0.75rem;
  width: 0.75rem;
}
.swiper-light .swiper-pagination-bullet-active {
  background: var(--dx-white);
  border: 3px solid var(--dx-light);
}

.swiper-dark .swiper-pagination-bullet {
  background: var(--dx-dark);
  height: 0.75rem;
  width: 0.75rem;
}
.swiper-dark .swiper-pagination-bullet-active {
  background: var(--dx-white);
  border: 3px solid var(--dx-dark);
}

.swiper-pink .swiper-pagination-bullet {
  background: var(--dx-pink);
  height: 0.75rem;
  width: 0.75rem;
}
.swiper-pink .swiper-pagination-bullet-active {
  background: var(--dx-white);
  border: 3px solid var(--dx-pink);
}

.swiper-orange .swiper-pagination-bullet {
  background: var(--dx-orange);
  height: 0.75rem;
  width: 0.75rem;
}
.swiper-orange .swiper-pagination-bullet-active {
  background: var(--dx-white);
  border: 3px solid var(--dx-orange);
}

.swiper-indigo .swiper-pagination-bullet {
  background: var(--dx-indigo);
  height: 0.75rem;
  width: 0.75rem;
}
.swiper-indigo .swiper-pagination-bullet-active {
  background: var(--dx-white);
  border: 3px solid var(--dx-indigo);
}

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

.swiper-button-next:before {
  content: "\ea6e";
  font-family: "RemixIcon";
}

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

.swiper-navigation-hover :is(.swiper-button-prev,
.swiper-button-next) {
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .swiper-navigation-hover :is(.swiper-button-prev,
  .swiper-button-next) {
    transition: none;
  }
}
.swiper-navigation-hover :is(.swiper-button-prev,
.swiper-button-next)::before {
  transition: all 0.5s ease-in-out;
  opacity: 0;
  visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .swiper-navigation-hover :is(.swiper-button-prev,
  .swiper-button-next)::before {
    transition: none;
  }
}
.swiper-navigation-hover:hover :is(.swiper-button-prev,
.swiper-button-next) {
  opacity: 1;
  visibility: visible;
}
.swiper-navigation-hover:hover :is(.swiper-button-prev,
.swiper-button-next)::before {
  opacity: 1;
  visibility: visible;
}

.basic-square {
  background: linear-gradient(136deg, var(--dx-primary), var(--dx-secondary), var(--dx-info));
}

.glare-square {
  background: linear-gradient(136deg, var(--dx-success), var(--dx-indigo), var(--dx-info));
}

.reverse-square {
  background: linear-gradient(136deg, var(--dx-info), var(--dx-info));
}

.floating-square {
  background: linear-gradient(136deg, var(--dx-primary), var(--dx-primary));
}

.annotation-dropdown {
  top: 40px;
  left: 50px;
}
.annotation-dropdown .comment-content {
  max-height: 200px;
}
.annotation-dropdown #comment-input {
  width: 100%;
  color: var(--dx-emphasis-color);
}
.annotation-dropdown #comment-input:focus {
  outline: none;
}

.deckgo-highlight-code-carbon {
  --deckgo-highlight-code-carbon-background: #161c30;
  --deckgo-highlight-code-carbon-color: #ffffff;
  --deckgo-highlight-code-token-atrule: #ec4899;
  --deckgo-highlight-code-token-function: #eab308;
  --deckgo-highlight-code-carbon-header-button-red-background: #ef4444;
  --deckgo-highlight-code-token-selector: #4ade80;
  --deckgo-highlight-code-font-size: 0.9063rem;
  --deckgo-highlight-code-carbon-header-button-width: 0.68rem;
  --deckgo-highlight-code-carbon-header-button-height: 0.68rem;
}

.chatbot-one {
  background: linear-gradient(to top right, var(--dx-primary), var(--dx-secondary));
}

.chatbot-two {
  background: linear-gradient(to top right, var(--dx-success), var(--dx-info));
}

.chatbot-three {
  background: linear-gradient(to bottom right, rgba(var(--dx-primary-rgb), 0.2), rgba(var(--dx-success-rgb), 0.2), rgba(var(--dx-secondary-rgb), 0.2));
}

.treeview-scrollable {
  max-height: 70vh;
}

.treeview {
  user-select: none;
}
.treeview ul {
  transition: all 0.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 0.5s ease-in-out;
}
.treeview li {
  position: relative;
}
.treeview li::before {
  content: "";
  position: absolute;
  left: -0.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 0.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: 0.5rem;
  transition: all 0.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 {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.icon-box {
  height: 2.5rem;
  width: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--dx-border-color);
  border-radius: 0.375rem;
}

.stroke-1 {
  stroke-width: 1;
}

.stroke-2 {
  stroke-width: 2;
}

.stroke-3 {
  stroke-width: 3;
}

.stroke-4 {
  stroke-width: 4;
}

.size-2-5 {
  width: 0.625rem;
  height: 0.625rem;
}

.size-3-5 {
  width: 0.875rem;
  height: 0.875rem;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.fill-primary {
  fill: var(--dx-primary);
}

.fill-secondary {
  fill: var(--dx-secondary);
}

.fill-success {
  fill: var(--dx-success);
}

.fill-info {
  fill: var(--dx-info);
}

.fill-warning {
  fill: var(--dx-warning);
}

.fill-danger {
  fill: var(--dx-danger);
}

.fill-light {
  fill: var(--dx-light);
}

.fill-dark {
  fill: var(--dx-dark);
}

.fill-pink {
  fill: var(--dx-pink);
}

.fill-orange {
  fill: var(--dx-orange);
}

.fill-indigo {
  fill: var(--dx-indigo);
}

.form-label {
  font-weight: 500;
}

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

.form-control-md {
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
}

.resize-none {
  resize: none;
}

.form-control.fil-input:focus {
  border-color: var(--dx-gray-200);
}

#formFile::file-selector-button {
  background-color: var(--dx-light-bg-subtle);
  color: var(--dx-secondary-color);
}

#formFileDark::file-selector-button {
  background-color: var(--dx-gray-800);
  color: var(--dx-white);
}

#formFileSecondary::file-selector-button {
  background-color: var(--dx-secondary-bg-subtle);
  color: var(--dx-secondary);
  font-weight: 500;
  border-radius: 6px;
  border: none;
}

.vscomp-ele {
  max-width: 100% !important;
}
.vscomp-ele .vscomp-wrapper {
  color: var(--dx-body-color);
}
.vscomp-ele .vscomp-wrapper .vscomp-toggle-button {
  background-color: transparent;
  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: 0.5938rem 1.875rem 0.5938rem 0.625rem !important;
  border-radius: 0.375rem !important;
}
.vscomp-ele .vscomp-clear-button {
  right: 30px;
  left: auto;
}
.vscomp-ele .vscomp-arrow {
  right: 0;
  left: auto;
}

.form-range.range-primary::-webkit-slider-thumb {
  background: var(--dx-primary);
}

.form-range.range-secondary::-webkit-slider-thumb {
  background: var(--dx-secondary);
}

.form-range.range-success::-webkit-slider-thumb {
  background: var(--dx-success);
}

.form-range.range-info::-webkit-slider-thumb {
  background: var(--dx-info);
}

.form-range.range-warning::-webkit-slider-thumb {
  background: var(--dx-warning);
}

.form-range.range-danger::-webkit-slider-thumb {
  background: var(--dx-danger);
}

.form-range.range-light::-webkit-slider-thumb {
  background: var(--dx-light);
}

.form-range.range-dark::-webkit-slider-thumb {
  background: var(--dx-dark);
}

.form-range.range-pink::-webkit-slider-thumb {
  background: var(--dx-pink);
}

.form-range.range-orange::-webkit-slider-thumb {
  background: var(--dx-orange);
}

.form-range.range-indigo::-webkit-slider-thumb {
  background: var(--dx-indigo);
}

.form-switch input[type=checkbox] {
  height: 0;
  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: 0.1875rem;
  left: 0.1875rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 5.625rem;
  transition: all 0.5s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .form-switch label::after {
    transition: none;
  }
}

[class*=switch-outline] label {
  border: 1px solid var(--dx-border-color);
}
[class*=switch-outline] label::after {
  background: var(--dx-border-color);
}
[class*=switch-outline] label .rounded {
  border-radius: 2px;
}

[class*=switch-soft] label, [class*=switch-light] label {
  background-color: var(--dx-border-color);
  border: 1px solid var(--dx-border-color);
}
[class*=switch-soft] label::after, [class*=switch-light] label::after {
  background: var(--dx-secondary-bg);
}

[class*=switch-solid] input:checked + label::after {
  background-color: var(--dx-secondary-bg);
}
[class*=switch-solid] label {
  border: 1px solid var(--dx-border-color);
}
[class*=switch-solid] label::after {
  background: var(--dx-border-color);
}

[class*=switch-effect] label {
  box-shadow: inset 0 2px 4px 0 var(--dx-border-color);
  border: 1px solid var(--dx-border-color);
}
[class*=switch-effect] label::after {
  background: var(--dx-secondary-bg);
  box-shadow: 0 10px 15px -3px rgba(var(--dx-secondary-color-rgb), 0.5), 0 4px 6px -4px rgba(var(--dx-secondary-color-rgb), 0.5);
}

.switch-square label {
  border-radius: 0.375rem;
}
.switch-square label::after {
  border-radius: 0.375rem;
}

.switch-text label:after {
  content: "N";
  font-weight: 600;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.switch-text input:checked + label:after {
  color: #fff;
}

.switch-icon label:after {
  content: "\ea64";
  font-family: "RemixIcon";
}
.switch-icon input:checked + label:after {
  content: "\ea6e";
}

.form-check {
  min-height: 1.5rem;
  margin-bottom: 0;
}
.form-check .form-check-input {
  cursor: pointer;
}
.form-check .form-check-input.circle {
  border-radius: 50px;
}
.form-check .form-check-label {
  cursor: pointer;
}
.form-check [type=checkbox]:checked {
  background-size: 0.65rem 0.65rem;
}

.card-checkbox svg {
  width: 2.375rem;
}
.card-checkbox .form-check-selected {
  display: flex;
  align-items: center;
  gap: 0.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);
}

#taskList .completed {
  text-decoration: line-through;
  color: var(--dx-secondary-color);
}

.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%;
  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 0.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 0.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: 0.375rem;
  border-bottom-left-radius: 0.375rem;
  border-right-width: 0px;
}

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

.ql-snow .ql-editor h2 {
  line-height: 2;
}

.ql-container {
  height: 13rem !important;
}

:is(.ql-toolbar, .ql-container) .ql-snow {
  border-color: var(--dx-border-color) !important;
}

.ql-snow .ql-picker {
  color: var(--dx-body-color);
}
.ql-snow .ql-stroke {
  stroke: var(--dx-body-color);
}
.ql-snow .ql-picker-options {
  background-color: var(--dx-secondary-bg);
}

:is(.ql-toolbar, .ql-container).ql-snow {
  border-color: var(--dx-border-color);
}

.ql-toolbar.ql-snow .ql-picker.ql-expanded :is(.ql-picker-label, .ql-picker-options) {
  border-color: var(--dx-border-color);
}

.codex-editor .codex-editor__redactor {
  padding-bottom: 0 !important;
}
.codex-editor :is(.ce-toolbar__plus, .ce-toolbar__settings-btn) {
  color: var(--dx-body-color);
}
@media (hover: hover) {
  .codex-editor :is(.ce-toolbar__settings-btn, .ce-toolbar__plus):hover {
    background-color: var(--dx-tertiary-bg);
  }
}
.codex-editor .ce-block--selected .ce-block__content {
  background-color: var(--dx-primary-bg-subtle);
}
.codex-editor .ce-popover {
  --color-background: var(--dx-secondary-bg);
  --color-border: var(--dx-border-color);
  --color-text-primary: var(--dx-body-color);
  --color-text-secondary: var(--dx-secondary-color);
  --color-background-item-hover: var(--dx-tertiary-bg);
}
.codex-editor .cdx-marker {
  background-color: var(--dx-warning-bg-subtle);
}
.codex-editor .cdx-search-field {
  background-color: var(--dx-tertiary-bg);
  border-color: var(--dx-border-color);
}

.cdx-block .cdx-attaches {
  --color-line: var(--dx-border-color);
  --color-bg: var(--dx-secondary-bg);
  --color-bg-secondary: var(--dx-tertiary-bg);
  --color-bg-secondary--hover: var(--dx-tertiary-bg);
  --color-text-secondary: var(--dx-secondary-color);
}

@media (max-width: 650px) {
  :is(.ce-toolbar__settings-btn, .ce-toolbar__plus) {
    border-color: var(--dx-border-color);
    background-color: var(--dx-secondary-bg);
  }
}
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: 0.25rem 0.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: 0.375rem;
  border-bottom-left-radius: 0.375rem;
  border-left: 1px solid var(--dx-border-color);
}
.table-separate td:last-child {
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
  border-right: 1px solid var(--dx-border-color);
}

.table-striped-even > tbody > tr:nth-child(even) > td {
  background-color: var(--dx-tertiary-bg);
}

.table-color-primary {
  --dx-table-striped-bg: var(--dx-primary-bg-subtle);
}

.table-primary {
  --dx-table-color: var(--dx-body-color);
  --dx-table-bg: rgba(var(--dx-primary-rgb), 0.15);
  --dx-table-border-color: rgba(var(--dx-primary-rgb), 0.35);
  --dx-table-striped-bg: rgba(var(--dx-primary-rgb), 0.1);
  --dx-table-active-bg: rgba(var(--dx-primary-rgb), 0.1);
  --dx-table-hover-bg: rgba(var(--dx-primary-rgb), 0.1);
}

.table-color-secondary {
  --dx-table-striped-bg: var(--dx-secondary-bg-subtle);
}

.table-secondary {
  --dx-table-color: var(--dx-body-color);
  --dx-table-bg: rgba(var(--dx-secondary-rgb), 0.15);
  --dx-table-border-color: rgba(var(--dx-secondary-rgb), 0.35);
  --dx-table-striped-bg: rgba(var(--dx-secondary-rgb), 0.1);
  --dx-table-active-bg: rgba(var(--dx-secondary-rgb), 0.1);
  --dx-table-hover-bg: rgba(var(--dx-secondary-rgb), 0.1);
}

.table-color-success {
  --dx-table-striped-bg: var(--dx-success-bg-subtle);
}

.table-success {
  --dx-table-color: var(--dx-body-color);
  --dx-table-bg: rgba(var(--dx-success-rgb), 0.15);
  --dx-table-border-color: rgba(var(--dx-success-rgb), 0.35);
  --dx-table-striped-bg: rgba(var(--dx-success-rgb), 0.1);
  --dx-table-active-bg: rgba(var(--dx-success-rgb), 0.1);
  --dx-table-hover-bg: rgba(var(--dx-success-rgb), 0.1);
}

.table-color-info {
  --dx-table-striped-bg: var(--dx-info-bg-subtle);
}

.table-info {
  --dx-table-color: var(--dx-body-color);
  --dx-table-bg: rgba(var(--dx-info-rgb), 0.15);
  --dx-table-border-color: rgba(var(--dx-info-rgb), 0.35);
  --dx-table-striped-bg: rgba(var(--dx-info-rgb), 0.1);
  --dx-table-active-bg: rgba(var(--dx-info-rgb), 0.1);
  --dx-table-hover-bg: rgba(var(--dx-info-rgb), 0.1);
}

.table-color-warning {
  --dx-table-striped-bg: var(--dx-warning-bg-subtle);
}

.table-warning {
  --dx-table-color: var(--dx-body-color);
  --dx-table-bg: rgba(var(--dx-warning-rgb), 0.15);
  --dx-table-border-color: rgba(var(--dx-warning-rgb), 0.35);
  --dx-table-striped-bg: rgba(var(--dx-warning-rgb), 0.1);
  --dx-table-active-bg: rgba(var(--dx-warning-rgb), 0.1);
  --dx-table-hover-bg: rgba(var(--dx-warning-rgb), 0.1);
}

.table-color-danger {
  --dx-table-striped-bg: var(--dx-danger-bg-subtle);
}

.table-danger {
  --dx-table-color: var(--dx-body-color);
  --dx-table-bg: rgba(var(--dx-danger-rgb), 0.15);
  --dx-table-border-color: rgba(var(--dx-danger-rgb), 0.35);
  --dx-table-striped-bg: rgba(var(--dx-danger-rgb), 0.1);
  --dx-table-active-bg: rgba(var(--dx-danger-rgb), 0.1);
  --dx-table-hover-bg: rgba(var(--dx-danger-rgb), 0.1);
}

.table-color-light {
  --dx-table-striped-bg: var(--dx-light-bg-subtle);
}

.table-light {
  --dx-table-color: var(--dx-body-color);
  --dx-table-bg: rgba(var(--dx-light-rgb), 0.15);
  --dx-table-border-color: rgba(var(--dx-light-rgb), 0.35);
  --dx-table-striped-bg: rgba(var(--dx-light-rgb), 0.1);
  --dx-table-active-bg: rgba(var(--dx-light-rgb), 0.1);
  --dx-table-hover-bg: rgba(var(--dx-light-rgb), 0.1);
}

.table-color-dark {
  --dx-table-striped-bg: var(--dx-dark-bg-subtle);
}

.table-dark {
  --dx-table-color: var(--dx-body-color);
  --dx-table-bg: rgba(var(--dx-dark-rgb), 0.15);
  --dx-table-border-color: rgba(var(--dx-dark-rgb), 0.35);
  --dx-table-striped-bg: rgba(var(--dx-dark-rgb), 0.1);
  --dx-table-active-bg: rgba(var(--dx-dark-rgb), 0.1);
  --dx-table-hover-bg: rgba(var(--dx-dark-rgb), 0.1);
}

.table-color-pink {
  --dx-table-striped-bg: var(--dx-pink-bg-subtle);
}

.table-pink {
  --dx-table-color: var(--dx-body-color);
  --dx-table-bg: rgba(var(--dx-pink-rgb), 0.15);
  --dx-table-border-color: rgba(var(--dx-pink-rgb), 0.35);
  --dx-table-striped-bg: rgba(var(--dx-pink-rgb), 0.1);
  --dx-table-active-bg: rgba(var(--dx-pink-rgb), 0.1);
  --dx-table-hover-bg: rgba(var(--dx-pink-rgb), 0.1);
}

.table-color-orange {
  --dx-table-striped-bg: var(--dx-orange-bg-subtle);
}

.table-orange {
  --dx-table-color: var(--dx-body-color);
  --dx-table-bg: rgba(var(--dx-orange-rgb), 0.15);
  --dx-table-border-color: rgba(var(--dx-orange-rgb), 0.35);
  --dx-table-striped-bg: rgba(var(--dx-orange-rgb), 0.1);
  --dx-table-active-bg: rgba(var(--dx-orange-rgb), 0.1);
  --dx-table-hover-bg: rgba(var(--dx-orange-rgb), 0.1);
}

.table-color-indigo {
  --dx-table-striped-bg: var(--dx-indigo-bg-subtle);
}

.table-indigo {
  --dx-table-color: var(--dx-body-color);
  --dx-table-bg: rgba(var(--dx-indigo-rgb), 0.15);
  --dx-table-border-color: rgba(var(--dx-indigo-rgb), 0.35);
  --dx-table-striped-bg: rgba(var(--dx-indigo-rgb), 0.1);
  --dx-table-active-bg: rgba(var(--dx-indigo-rgb), 0.1);
  --dx-table-hover-bg: rgba(var(--dx-indigo-rgb), 0.1);
}

.table-card {
  margin-left: -1.25rem;
  margin-right: -1.25rem;
}
.table-card :is(th, td):first-child {
  padding-left: 1.25rem !important;
}
.table-card :is(th, td):last-child {
  padding-right: 1.25rem !important;
}

.apexcharts-tooltip.apexcharts-theme-light {
  border: 1px solid var(--dx-border-color) !important;
  background: var(--dx-secondary-bg) !important;
  border-radius: 0.375rem;
  box-shadow: var(--dx-box-shadow);
}
.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
  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: 0.75rem;
}

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

.apexcharts-text,
.apexcharts-title-text {
  font-family: var(--dx-font-sans-serif) !important;
  fill: var(--dx-body-color) !important;
}

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

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

.apexcharts-xaxistooltip,
.apexcharts-yaxistooltip {
  font-size: 0.75rem;
  color: var(--dx-emphasis-color) !important;
  background-color: var(--dx-secondary-bg) !important;
  border: 1px solid var(--dx-border-color) !important;
}

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

.apexcharts-gridline,
.apexcharts-xcrosshairs,
.apexcharts-xaxis-tick {
  stroke: var(--dx-border-color) !important;
}

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

.apexcharts-grid-borders line {
  stroke: var(--dx-light-bg-subtle);
}

.apexcharts-series-markers circle,
.apexcharts-series-markers 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);
}

.apexcharts-heatmap rect,
.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 line,
.apexcharts-pie circle {
  stroke: transparent;
}

.apexcharts-radar-series polygon,
.apexcharts-radar-series line {
  stroke: var(--dx-light-bg-subtle);
}

.apexcharts-radialbar-track path {
  stroke: var(--dx-light-bg-subtle);
}

.apexcharts-data-labels rect {
  stroke: var(--dx-light-bg-subtle);
}

.apexcharts-menu {
  background-color: var(--dx-secondary-bg) !important;
  border-color: var(--dx-border-color) !important;
}

.jvm-container path {
  fill: var(--dx-border-color);
}

.jvm-zoom-btn.jvm-zoomin {
  top: 0.625rem;
}

.jvm-zoom-btn:where([dir=ltr], [dir=ltr] *) {
  left: 0.625rem;
}

.jvm-zoom-btn.jvm-zoomout {
  top: 1.75rem;
}

.jvm-zoom-btn {
  position: absolute;
  box-sizing: border-box;
  display: flex;
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  background-color: var(--dx-dark);
  line-height: 10px;
  color: white;
}

.jvm-legend {
  display: inline-block;
  background-color: var(--dx-secondary-bg);
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 10px 15px -3px var(--dx-tertiary-bg), 0 4px 6px -4px var(--dx-tertiary-bg);
  float: inline-end;
}
.jvm-legend .jvm-legend-title {
  margin-bottom: 9px;
}
.jvm-legend .jvm-legend-tick {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
}
.jvm-legend .jvm-legend-tick .jvm-legend-tick-sample {
  height: 14px;
  width: 14px;
  border-radius: 999px;
}
.jvm-legend .jvm-legend-tick .jvm-legend-tick-text {
  font-size: 12px;
}

#jvm-markers-labels-group .jvm-element {
  fill: var(--dx-secondary-color);
}

div.air-datepicker {
  --adp-color: var(--dx-secondary-color);
  --adp-font-family: var(--dx-body-font-family);
  --adp-background-color: var(--dx-secondary-bg);
  --adp-border-color-inline: var(--dx-border-color);
  --adp-border-color-inner: var(--dx-border-color);
  --adp-border-color: var(--dx-border-color);
  --adp-color-current-date: var(--dx-primary);
  --adp-accent-color: var(--dx-primary);
  --adp-btn-color: var(--dx-primary);
  --adp-cell-background-color-selected: var(--dx-primary);
  --adp-cell-background-color-selected-hover: var(--dx-primary);
  --adp-background-color-chover: var(--dx-tertiary-bg);
  --adp-background-color-hover: var(--dx-tertiary-bg);
  --adp-background-color-active: var(--dx-tertiary-bg);
  --adp-color-secondary: var(--dx-secondary-color);
  --adp-color-other-month: var(--dx-tertiary-color);
  --adp-day-name-color: var(--dx-secondary-color);
  --adp-time-track-color: var(--dx-secondary-color);
  --adp-time-track-color-hover: var(--dx-body-color);
  --adp-cell-background-color-in-range: var(--dx-primary-bg-subtle);
  --adp-cell-background-color-in-range-hover: var(--dx-primary-bg-subtle);
  direction: ltr;
}

.air-datepicker {
  box-shadow: var(--dx-box-shadow) !important;
}
.air-datepicker .air-datepicker-body--day-names {
  margin: 0 0 3px;
  padding: 3px 0;
  background-color: var(--dx-tertiary-bg);
  font-weight: 600;
}
.air-datepicker .air-datepicker--pointer:after {
  background: var(--dx-secondary-bg);
}

.air-datepicker-global-container {
  z-index: 1055;
}

html * {
  unicode-bidi: bidi-override;
}

.filepond--panel-root,
.filepond--drip-blob {
  background: var(--dx-tertiary-bg) !important;
  border: 1px solid var(--dx-border-color);
}

.filepond--drop-label {
  cursor: pointer;
  color: var(--dx-secondary-color) !important;
}

.filepond--drop-label.filepond--drop-label label {
  padding: 0.7rem !important;
}

.filepond--file {
  color: var(--dx-body-color) !important;
}
.filepond--file .filepond--image-preview {
  background: var(--dx-secondary-bg);
  border: 1px solid var(--dx-border-color);
  border-radius: 0.375rem;
  box-shadow: none;
}
.filepond--file .filepond--image-preview-overlay {
  display: none;
}
.filepond--file .filepond--file-action-button {
  background-color: var(--dx-tertiary-bg);
  color: var(--dx-secondary-color);
}

.filepond--item-panel {
  background-color: transparent !important;
}

.filepond--item > .filepond--panel .filepond--panel-bottom {
  box-shadow: none !important;
}

.file-upload-invoice {
  /* Customize the image preview */
}
.file-upload-invoice .filepond--root,
.file-upload-invoice .filepond--root .filepond--drop-label {
  height: 152px !important;
}
.file-upload-invoice .filepond--image-preview-wrapper {
  height: 120px !important;
}

.gridjs-container {
  color: var(--dx-body-color);
}
.gridjs-container .gridjs-wrapper {
  box-shadow: none;
  border: 1px solid var(--dx-border-color);
  border-radius: 0;
}
.gridjs-container th.gridjs-th {
  border-color: var(--dx-border-color);
  background-color: var(--dx-tertiary-bg);
  color: var(--dx-secondary-color);
  padding: 0.875rem 0.75rem;
}
.gridjs-container td.gridjs-td {
  padding: 0.875rem 0.75rem;
  border-color: var(--dx-border-color);
}
.gridjs-container :is(.gridjs-tbody, td.gridjs-td) {
  background-color: var(--dx-secondary-bg);
}
.gridjs-container .gridjs-footer {
  box-shadow: none;
  border-radius: 0;
  background-color: var(--dx-secondary-bg);
  border: 1px solid var(--dx-border-color);
  border-top: none;
}
.gridjs-container .gridjs-pagination {
  color: var(--dx-secondary-color);
}
.gridjs-container .gridjs-pagination .gridjs-pages {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
@media (max-width: 575.98px) {
  .gridjs-container .gridjs-pagination .gridjs-pages {
    margin-top: 0.75rem;
  }
}
.gridjs-container .gridjs-pagination .gridjs-pages button {
  color: var(--dx-body-color);
  background-color: var(--dx-secondary-bg);
  border: 1px solid var(--dx-border-color);
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--dx-border-radius);
}
.gridjs-container .gridjs-pagination .gridjs-pages button:is(:last-child, :first-child) {
  width: auto;
  padding: 0 0.79rem;
  border: 1px solid var(--dx-border-color);
}
.gridjs-container .gridjs-pagination .gridjs-pages button.gridjs-currentPage {
  color: #fff;
  background-color: var(--dx-primary);
  border-color: var(--dx-primary);
}
.gridjs-container .gridjs-pagination .gridjs-pages button:focus {
  box-shadow: none;
  border-color: var(--dx-border-color);
}
.gridjs-container .gridjs-pagination .gridjs-pages button:disabled, .gridjs-container .gridjs-pagination .gridjs-pages button:hover:disabled, .gridjs-container .gridjs-pagination .gridjs-pages button[disabled] {
  color: var(--dx-secondary-color);
  background-color: var(--dx-secondary-bg);
}
.gridjs-container input.gridjs-input {
  background-color: var(--dx-secondary-bg);
  border-color: var(--dx-border-color);
  padding: 0.594rem 1rem;
  font-size: 0.875rem;
}
.gridjs-container input.gridjs-input:focus {
  box-shadow: none;
  border-color: var(--dx-primary);
}
.gridjs-container input.gridjs-input::placeholder {
  color: var(--dx-secondary-color);
}

:root {
  --swal2-background: var(--dx-secondary-bg);
  --swal2-color: var(--dx-body-color);
  --swal2-footer-border-color: var(--dx-border-color);
  --swal2-close-button-color: var(--dx-secondary-color);
}

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

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

div:where(.swal2-icon).swal2-success [class^=swal2-success-line] {
  background-color: var(--dx-success);
}

div:where(.swal2-icon).swal2-error {
  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: 0.875rem;
  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: 1.586025rem;
  margin-bottom: 0.5rem;
}

div:where(.swal2-container).swal2-backdrop-show, div:where(.swal2-container).swal2-noanimation {
  background-color: rgba(16, 24, 40, 0.4);
  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);
}

.noUi-horizontal {
  height: 12px;
  background: none;
  box-shadow: none;
  border-color: var(--dx-border-color);
}

.noUi-horizontal .noUi-handle {
  right: -0.25rem;
  height: 1.5rem;
  width: 0.5rem;
  top: -8px;
}

.noUi-handle {
  box-shadow: none;
}
.noUi-handle::after {
  display: none;
}
.noUi-handle::before {
  display: none;
}

.noUi-marker {
  background-color: var(--dx-tertiary-bg);
}

.noUi-value-sub {
  color: var(--dx-text-muted);
}

.noUi-handle {
  border: 1px solid var(--dx-border-color);
  background: var(--dx-secondary-bg);
}

.noUi-pips {
  color: var(--dx-secondary-color);
}

.noUi-tooltip {
  border: 1px solid var(--dx-border-color);
  background: var(--dx-secondary-bg);
  color: var(--dx-emphasis-color);
}

.c-1-color {
  background: var(--dx-danger);
}

.c-2-color {
  background: var(--dx-warning);
}

.c-3-color {
  background: var(--dx-success);
}

.c-4-color {
  background: var(--dx-primary);
}

#slider-toggle {
  height: 50px;
}

#slider-toggle.off .noUi-handle {
  background-color: var(--dx-danger);
  border-radius: 0.3125rem;
}

.noUi-target {
  background: var(--dx-secondary-bg);
  border: 1px solid var(--dx-border-color);
  box-shadow: none;
}

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

#colorpicker {
  height: 240px;
  width: 310px;
  margin: 0 auto;
  padding: 10px;
  border: 1px solid #BFBFBF;
}

#result {
  margin: 2.5rem;
  height: 128px;
  width: 128px;
  display: inline-block;
  vertical-align: top;
  color: rgb(127, 127, 127);
  background: rgb(127, 127, 127);
  border-radius: 0.375rem;
}

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

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

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

.tabulator {
  background-color: var(--dx-secondary-bg);
  font-size: 0.9063rem;
}
.tabulator .tabulator-header {
  border-bottom: 1px solid var(--dx-border-color);
  border-top-color: var(--dx-border-color);
  color: var(--dx-body-color);
  font-weight: 600;
}
.tabulator .tabulator-header .tabulator-col {
  background-color: var(--dx-secondary-bg);
  border-color: var(--dx-border-color);
}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=none] .tabulator-col-content .tabulator-col-sorter {
  color: var(--dx-secondary-color);
}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=descending] .tabulator-col-content .tabulator-col-sorter {
  color: var(--dx-body-color);
}
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter .tabulator-arrow {
  border-bottom-color: var(--dx-border-color);
}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=none] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow {
  border-bottom-color: var(--dx-border-color);
}
.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
  padding: 14px;
}
@media (hover: hover) and (pointer: fine) {
  .tabulator .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover {
    background-color: var(--dx-tertiary-bg);
  }
}
.tabulator .tabulator-row {
  background-color: var(--dx-secondary-bg);
  border-color: var(--dx-border-color);
}
.tabulator .tabulator-row .tabulator-cell {
  border-color: var(--dx-border-color);
}
.tabulator .tabulator-row.tabulator-row-even {
  background-color: var(--dx-tertiary-bg);
}
@media (hover: hover) and (pointer: fine) {
  .tabulator .tabulator-row.tabulator-selectable:hover {
    background-color: var(--dx-tertiary-bg);
    cursor: pointer;
  }
}
.tabulator .tabulator-tableholder .tabulator-table {
  color: var(--dx-body-color);
}
.tabulator .tabulator-row .tabulator-cell .tabulator-data-tree-control {
  background-color: transparent;
  border-color: var(--dx-border-color);
}
.tabulator .tabulator-footer {
  padding-top: 12px;
  background-color: transparent;
  border: none;
  color: var(--dx-body-color);
}
@media (max-width: 991.98px) {
  .tabulator .tabulator-footer .tabulator-footer-contents {
    flex-direction: column;
    gap: 15px;
  }
}
.tabulator .tabulator-footer .tabulator-paginator {
  color: var(--dx-body-color);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
@media (min-width: 992px) {
  .tabulator .tabulator-footer .tabulator-paginator {
    justify-content: end;
  }
}
.tabulator .tabulator-footer .tabulator-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  height: 2.25rem;
  border-radius: var(--dx-border-radius);
  padding-top: 0;
  padding-bottom: 0;
  background-color: var(--dx-secondary-bg);
  border-color: var(--dx-border-color);
}
.tabulator .tabulator-footer .tabulator-page:disabled {
  color: var(--dx-tertiary-color);
  border-color: var(--dx-border-color);
  background-color: var(--dx-secondary-bg);
}
.tabulator .tabulator-footer .tabulator-page.active {
  background-color: var(--dx-primary);
  border-color: var(--dx-primary);
}
.tabulator .tabulator-footer .tabulator-page[data-page=last] {
  border-color: var(--dx-border-color);
}
@media (hover: hover) and (pointer: fine) {
  .tabulator .tabulator-footer .tabulator-page:not(.disabled):hover, .tabulator .tabulator-footer .tabulator-page:not(.active):hover {
    background: var(--dx-tertiary-bg);
    border-color: var(--dx-border-color);
    color: var(--dx-primary);
  }
}
.tabulator .tabulator-footer .tabulator-pages {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.tabulator .tabulator-footer .tabulator-pages .tabulator-page {
  width: 2.25rem;
  padding: 0;
}
.tabulator .tabulator-footer .tabulator-page-size {
  border-color: var(--dx-border-color);
  background-color: var(--dx-secondary-bg);
}

.tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-collapse:after,
.tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-expand,
.tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-expand:after {
  background-color: var(--dx-border-color);
}

.tabulator-cell svg {
  width: 16px;
  height: 16px;
}

.tippy-box {
  background-color: var(--dx-body-color);
  font-size: 0.7930125rem;
  color: var(--dx-secondary-bg);
}

.tippy-arrow {
  color: var(--dx-body-color);
}

.vis-timeline {
  border-color: var(--dx-border-color);
}

.vis-panel.vis-bottom,
.vis-panel.vis-center,
.vis-panel.vis-left,
.vis-panel.vis-right,
.vis-panel.vis-top {
  border-color: var(--dx-border-color);
}

:is(.vis-labelset .vis-label, .vis-foreground .vis-group) {
  border-color: var(--dx-border-color);
}

.vis-item {
  color: var(--dx-body-color);
  background-color: var(--dx-primary-bg-subtle);
  border-color: rgba(var(--dx-primary-rgb), 0.4);
}

:is(.vis-time-axis .vis-text, .vis-labelset .vis-label) {
  color: var(--dx-secondary-color);
}

#visualization2 div.vis-readonly,
#visualization2 div.vis-readonly.vis-selected {
  background-color: var(--dx-danger-bg-subtle);
  border-color: rgba(var(--dx-danger-rgb), 0.4);
}

.vis-item.vis-selected {
  background-color: var(--dx-warning-bg-subtle);
}

.vis-time-axis .vis-grid.vis-minor {
  border-color: var(--dx-border-color);
}

.dt-container .dt-layout-table {
  margin-top: 20px !important;
}
.dt-container .row {
  gap: 10px;
}
.dt-container .pagination {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.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: 0.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(even) > td {
  background-color: var(--dx-tertiary-bg);
}
.dt-container .table.hovered tr:hover {
  background-color: var(--dx-tertiary-bg);
}

.profile-widget {
  background-color: rgba(var(--dx-primary-rgb), 0.1);
}
.profile-widget div {
  border-width: 60px;
  border-style: solid;
  rotate: 45deg;
}
.profile-widget div:nth-child(1) {
  position: absolute;
  top: 0;
  left: 0;
  border-color: rgba(var(--dx-primary-rgb), 0.1);
}
.profile-widget div:nth-child(2) {
  position: absolute;
  top: 5rem;
  left: 2rem;
  border-color: rgba(var(--dx-success-rgb), 0.1);
}
.profile-widget div:nth-child(3) {
  position: absolute;
  top: 9rem;
  left: 7rem;
  border-color: rgba(var(--dx-pink-rgb), 0.1);
}
.profile-widget.right div:nth-child(1) {
  left: auto;
  right: 0;
}
.profile-widget.right div:nth-child(2) {
  right: 2rem;
  left: auto;
}
.profile-widget.right div:nth-child(3) {
  right: 7rem;
  left: auto;
}

.profile-avatar .profile-avatar-wrapper {
  position: relative;
  padding: 0.25rem;
  border-radius: 50rem;
  background: linear-gradient(to top right, rgba(var(--dx-primary-rgb), 0.5), rgba(var(--dx-danger-rgb), 0.5), rgba(var(--dx-success-rgb), 0.5));
}
.profile-avatar .profile-avatar-img {
  border-radius: 50rem;
  border: 4px solid var(--dx-secondary-bg);
}
.profile-avatar .profile-avatar-dot {
  border-radius: 50rem;
  border: 2px solid var(--dx-secondary-bg);
  position: absolute;
  right: 0.625rem;
  bottom: 0.625rem;
}

.payment-gradient {
  background: linear-gradient(to bottom, rgba(var(--dx-primary-rgb), 0.1), rgba(var(--dx-danger-rgb), 0.05), rgba(var(--dx-secondary-bg-rgb), 0));
  backdrop-filter: blur(10px);
}
.payment-gradient img {
  height: 2.5rem;
}

.form-control.pattern-input {
  border: none;
}
.form-control.pattern-input:focus {
  border: 1px solid var(--dx-primary);
  box-shadow: 0 10px 15px -3px #f3f4f6, 0 4px 6px -4px #f3f4f6;
  background-color: var(--dx-secondary-bg) !important;
}

.img-scale-skew {
  transition: all 0.5s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .img-scale-skew {
    transition: none;
  }
}
.img-scale-skew:hover {
  transform: scale(1.05) skewX(3deg);
}

.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), 0.1), rgba(var(--dx-primary-rgb), 0));
}

.bg-gradient-b-secondary {
  background-image: linear-gradient(to top, rgba(var(--dx-secondary-rgb), 0.1), rgba(var(--dx-secondary-rgb), 0));
}

.bg-gradient-b-success {
  background-image: linear-gradient(to top, rgba(var(--dx-success-rgb), 0.1), rgba(var(--dx-success-rgb), 0));
}

.bg-gradient-b-info {
  background-image: linear-gradient(to top, rgba(var(--dx-info-rgb), 0.1), rgba(var(--dx-info-rgb), 0));
}

.bg-gradient-b-warning {
  background-image: linear-gradient(to top, rgba(var(--dx-warning-rgb), 0.1), rgba(var(--dx-warning-rgb), 0));
}

.bg-gradient-b-danger {
  background-image: linear-gradient(to top, rgba(var(--dx-danger-rgb), 0.1), rgba(var(--dx-danger-rgb), 0));
}

.bg-gradient-b-light {
  background-image: linear-gradient(to top, rgba(var(--dx-light-rgb), 0.1), rgba(var(--dx-light-rgb), 0));
}

.bg-gradient-b-dark {
  background-image: linear-gradient(to top, rgba(var(--dx-dark-rgb), 0.1), rgba(var(--dx-dark-rgb), 0));
}

.bg-gradient-b-pink {
  background-image: linear-gradient(to top, rgba(var(--dx-pink-rgb), 0.1), rgba(var(--dx-pink-rgb), 0));
}

.bg-gradient-b-orange {
  background-image: linear-gradient(to top, rgba(var(--dx-orange-rgb), 0.1), rgba(var(--dx-orange-rgb), 0));
}

.bg-gradient-b-indigo {
  background-image: linear-gradient(to top, rgba(var(--dx-indigo-rgb), 0.1), rgba(var(--dx-indigo-rgb), 0));
}

.line-clamp-5 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}

.blur-2xl {
  filter: blur(40px);
}

.arrow-gradient {
  background: linear-gradient(to bottom, rgba(var(--dx-warning-rgb), 0.2), rgba(var(--dx-warning-rgb), 0));
}

.droplet-gradient {
  background: linear-gradient(to right, rgba(var(--dx-secondary-rgb), 0.2), rgba(var(--dx-secondary-rgb), 0));
}

.gem-gradient {
  background: linear-gradient(to left, rgba(var(--dx-danger-rgb), 0.2), rgba(var(--dx-danger-rgb), 0));
}

.pricing-tag {
  position: absolute;
  right: 1.25rem;
  top: 1.25rem;
}

.avatar-blur {
  position: relative;
}
.avatar-blur .avatar-blur-wrapper {
  position: absolute;
  top: 0;
  filter: blur(12px);
  z-index: 0;
}
.avatar-blur .icon {
  position: relative;
  z-index: 1;
}

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

.contactUs-three .check-primary .form-check-input:checked + .form-check-label {
  background-color: var(--dx-primary-bg-subtle);
  border-color: rgba(var(--dx-primary-rgb), 0.5);
}

.contactUs-three .check-secondary .form-check-input:checked + .form-check-label {
  background-color: var(--dx-secondary-bg-subtle);
  border-color: rgba(var(--dx-secondary-rgb), 0.5);
}

.contactUs-three .check-success .form-check-input:checked + .form-check-label {
  background-color: var(--dx-success-bg-subtle);
  border-color: rgba(var(--dx-success-rgb), 0.5);
}

.contactUs-three .check-info .form-check-input:checked + .form-check-label {
  background-color: var(--dx-info-bg-subtle);
  border-color: rgba(var(--dx-info-rgb), 0.5);
}

.contactUs-three .check-warning .form-check-input:checked + .form-check-label {
  background-color: var(--dx-warning-bg-subtle);
  border-color: rgba(var(--dx-warning-rgb), 0.5);
}

.contactUs-three .check-danger .form-check-input:checked + .form-check-label {
  background-color: var(--dx-danger-bg-subtle);
  border-color: rgba(var(--dx-danger-rgb), 0.5);
}

.contactUs-three .check-light .form-check-input:checked + .form-check-label {
  background-color: var(--dx-light-bg-subtle);
  border-color: rgba(var(--dx-light-rgb), 0.5);
}

.contactUs-three .check-dark .form-check-input:checked + .form-check-label {
  background-color: var(--dx-dark-bg-subtle);
  border-color: rgba(var(--dx-dark-rgb), 0.5);
}

.contactUs-three .check-pink .form-check-input:checked + .form-check-label {
  background-color: var(--dx-pink-bg-subtle);
  border-color: rgba(var(--dx-pink-rgb), 0.5);
}

.contactUs-three .check-orange .form-check-input:checked + .form-check-label {
  background-color: var(--dx-orange-bg-subtle);
  border-color: rgba(var(--dx-orange-rgb), 0.5);
}

.contactUs-three .check-indigo .form-check-input:checked + .form-check-label {
  background-color: var(--dx-indigo-bg-subtle);
  border-color: rgba(var(--dx-indigo-rgb), 0.5);
}

.contactUs-three .form-check-label {
  background-color: var(--dx-secondary-bg);
  border: 1px solid var(--dx-border-color);
}

.bg-gradient-t-primary {
  background-image: linear-gradient(to bottom, rgba(var(--dx-primary-rgb), 0.1), rgba(var(--dx-primary-rgb), 0));
}

.bg-gradient-t-secondary {
  background-image: linear-gradient(to bottom, rgba(var(--dx-secondary-rgb), 0.1), rgba(var(--dx-secondary-rgb), 0));
}

.bg-gradient-t-success {
  background-image: linear-gradient(to bottom, rgba(var(--dx-success-rgb), 0.1), rgba(var(--dx-success-rgb), 0));
}

.bg-gradient-t-info {
  background-image: linear-gradient(to bottom, rgba(var(--dx-info-rgb), 0.1), rgba(var(--dx-info-rgb), 0));
}

.bg-gradient-t-warning {
  background-image: linear-gradient(to bottom, rgba(var(--dx-warning-rgb), 0.1), rgba(var(--dx-warning-rgb), 0));
}

.bg-gradient-t-danger {
  background-image: linear-gradient(to bottom, rgba(var(--dx-danger-rgb), 0.1), rgba(var(--dx-danger-rgb), 0));
}

.bg-gradient-t-light {
  background-image: linear-gradient(to bottom, rgba(var(--dx-light-rgb), 0.1), rgba(var(--dx-light-rgb), 0));
}

.bg-gradient-t-dark {
  background-image: linear-gradient(to bottom, rgba(var(--dx-dark-rgb), 0.1), rgba(var(--dx-dark-rgb), 0));
}

.bg-gradient-t-pink {
  background-image: linear-gradient(to bottom, rgba(var(--dx-pink-rgb), 0.1), rgba(var(--dx-pink-rgb), 0));
}

.bg-gradient-t-orange {
  background-image: linear-gradient(to bottom, rgba(var(--dx-orange-rgb), 0.1), rgba(var(--dx-orange-rgb), 0));
}

.bg-gradient-t-indigo {
  background-image: linear-gradient(to bottom, rgba(var(--dx-indigo-rgb), 0.1), rgba(var(--dx-indigo-rgb), 0));
}

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

.coming-soon-input {
  max-width: 36rem;
  margin: 0 auto;
  position: relative;
}
.coming-soon-input .form-control {
  padding-right: 126px;
  height: 48px;
}
.coming-soon-input button {
  position: absolute;
  top: 50%;
  right: 0.1875rem;
  transform: translateY(-50%);
}

.help-center-tabs {
  height: calc(100vh - 30rem);
  overflow-y: auto;
}
.help-center-tabs .nav .nav-item .nav-link {
  padding: 8px 16px;
  font-weight: 400;
  display: block;
}
.help-center-tabs .nav .nav-item .nav-link.active {
  color: var(--dx-primary);
  background-color: rgba(var(--dx-primary-rgb), 0.1);
  outline-offset: 2px;
  outline: 1px solid rgba(var(--dx-primary-rgb), 0.15);
}

.ticket-content-wrapper {
  height: calc(100vh - 17rem);
}

.help-center-widget {
  position: relative;
  padding: 0.75rem 1rem;
  border-radius: 0.375rem;
}
.help-center-widget button .bg-wrapper {
  background-image: radial-gradient(75% 100% at 50% 0%, rgba(56, 189, 248, 0.6) 0%, rgba(56, 189, 248, 0) 75%);
  opacity: 0;
  transition: all 0.5s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .help-center-widget button .bg-wrapper {
    transition: none;
  }
}
.help-center-widget button .bg-wrapper:hover {
  opacity: 100;
}

.ticket-list-wrapper {
  height: calc(100vh - 16.8rem);
}
.ticket-list-wrapper .line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.card-slide {
  position: relative;
  transition: all 0.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: 0.125rem;
  transition: height 0.5s ease-in-out;
}
.card-slide a {
  color: var(--dx-secondary-color);
  border: 1px solid var(--dx-light-bg-subtle);
  transition: color 0.6s ease-in-out, border-color 0.6s ease-in-out;
}
.card-slide:hover {
  color: white;
}
.card-slide:hover::before {
  height: 100%;
  top: 0;
  bottom: initial;
}
.card-slide:hover a {
  color: white;
  border-color: rgba(255, 255, 255, 0.26);
}

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

.icon-outline-info {
  background-color: var(--dx-info);
  outline-color: var(--dx-info);
}

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

.icon-outline-warning {
  background-color: var(--dx-warning);
  outline-color: var(--dx-warning);
}

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

.icon-outline-danger {
  background-color: var(--dx-danger);
  outline-color: var(--dx-danger);
}

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

.icon-outline-light {
  background-color: var(--dx-light);
  outline-color: var(--dx-light);
}

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

.icon-outline-dark {
  background-color: var(--dx-dark);
  outline-color: var(--dx-dark);
}

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

.icon-outline-pink {
  background-color: var(--dx-pink);
  outline-color: var(--dx-pink);
}

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

.icon-outline-indigo {
  background-color: var(--dx-indigo);
  outline-color: var(--dx-indigo);
}

.schedule-tabs {
  display: flex;
  gap: 0.75rem;
}
.schedule-tabs a {
  position: relative;
  color: var(--dx-secondary-color);
  transition: all 0.5s ease-in-out;
  display: inline-block;
  font-size: 0.875rem;
}
@media (prefers-reduced-motion: reduce) {
  .schedule-tabs a {
    transition: none;
  }
}
.schedule-tabs a::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  bottom: -0.75rem;
  width: 0.25rem;
  height: 0.25rem;
  transition: all 0.5s ease-in-out;
  border-radius: 50rem;
  background-color: var(--dx-primary);
  margin: 0 auto;
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .schedule-tabs a::after {
    transition: none;
  }
}
.schedule-tabs a:hover, .schedule-tabs a.active {
  color: var(--dx-primary);
}
.schedule-tabs a:hover::after, .schedule-tabs a.active::after {
  bottom: -0.375rem;
  opacity: 1;
}

[class*=widget-banner] .banner-circle {
  border: 20px solid transparent;
  width: 14rem;
  height: 14rem;
  position: absolute;
  right: -3rem;
  bottom: -3rem;
  border-radius: 50%;
}
[class*=widget-banner] img {
  margin-bottom: -1.5rem;
}
@media (min-width: 768px) {
  [class*=widget-banner] img {
    margin-bottom: 0;
    position: absolute;
    right: 0.75rem;
    bottom: -1.5rem;
  }
}

.widget-banner-primary {
  --dx-card-bg: var(--dx-primary-bg-subtle);
  --dx-card-border-color: var(--dx-primary-border-subtle);
}
.widget-banner-primary .banner-circle {
  border-color: rgba(var(--dx-primary-rgb), 0.1);
}

.widget-banner-secondary {
  --dx-card-bg: var(--dx-secondary-bg-subtle);
  --dx-card-border-color: var(--dx-secondary-border-subtle);
}
.widget-banner-secondary .banner-circle {
  border-color: rgba(var(--dx-secondary-rgb), 0.1);
}

.widget-banner-success {
  --dx-card-bg: var(--dx-success-bg-subtle);
  --dx-card-border-color: var(--dx-success-border-subtle);
}
.widget-banner-success .banner-circle {
  border-color: rgba(var(--dx-success-rgb), 0.1);
}

.widget-banner-info {
  --dx-card-bg: var(--dx-info-bg-subtle);
  --dx-card-border-color: var(--dx-info-border-subtle);
}
.widget-banner-info .banner-circle {
  border-color: rgba(var(--dx-info-rgb), 0.1);
}

.widget-banner-warning {
  --dx-card-bg: var(--dx-warning-bg-subtle);
  --dx-card-border-color: var(--dx-warning-border-subtle);
}
.widget-banner-warning .banner-circle {
  border-color: rgba(var(--dx-warning-rgb), 0.1);
}

.widget-banner-danger {
  --dx-card-bg: var(--dx-danger-bg-subtle);
  --dx-card-border-color: var(--dx-danger-border-subtle);
}
.widget-banner-danger .banner-circle {
  border-color: rgba(var(--dx-danger-rgb), 0.1);
}

.widget-banner-light {
  --dx-card-bg: var(--dx-light-bg-subtle);
  --dx-card-border-color: var(--dx-light-border-subtle);
}
.widget-banner-light .banner-circle {
  border-color: rgba(var(--dx-light-rgb), 0.1);
}

.widget-banner-dark {
  --dx-card-bg: var(--dx-dark-bg-subtle);
  --dx-card-border-color: var(--dx-dark-border-subtle);
}
.widget-banner-dark .banner-circle {
  border-color: rgba(var(--dx-dark-rgb), 0.1);
}

.widget-banner-pink {
  --dx-card-bg: var(--dx-pink-bg-subtle);
  --dx-card-border-color: var(--dx-pink-border-subtle);
}
.widget-banner-pink .banner-circle {
  border-color: rgba(var(--dx-pink-rgb), 0.1);
}

.widget-banner-orange {
  --dx-card-bg: var(--dx-orange-bg-subtle);
  --dx-card-border-color: var(--dx-orange-border-subtle);
}
.widget-banner-orange .banner-circle {
  border-color: rgba(var(--dx-orange-rgb), 0.1);
}

.widget-banner-indigo {
  --dx-card-bg: var(--dx-indigo-bg-subtle);
  --dx-card-border-color: var(--dx-indigo-border-subtle);
}
.widget-banner-indigo .banner-circle {
  border-color: rgba(var(--dx-indigo-rgb), 0.1);
}

.widget-svg svg path {
  stroke: rgba(225, 228, 235, 0.15);
}

[class*=chart-icon-ring] {
  outline: 1px solid var(--dx-border-color);
  outline-offset: 2px;
  border: 2px solid var(--dx-border-color);
}

.chart-icon-ring-primary {
  outline-color: rgba(var(--dx-primary-rgb), 0.2);
  border-color: var(--dx-primary);
}

.chart-icon-ring-secondary {
  outline-color: rgba(var(--dx-secondary-rgb), 0.2);
  border-color: var(--dx-secondary);
}

.chart-icon-ring-success {
  outline-color: rgba(var(--dx-success-rgb), 0.2);
  border-color: var(--dx-success);
}

.chart-icon-ring-info {
  outline-color: rgba(var(--dx-info-rgb), 0.2);
  border-color: var(--dx-info);
}

.chart-icon-ring-warning {
  outline-color: rgba(var(--dx-warning-rgb), 0.2);
  border-color: var(--dx-warning);
}

.chart-icon-ring-danger {
  outline-color: rgba(var(--dx-danger-rgb), 0.2);
  border-color: var(--dx-danger);
}

.chart-icon-ring-light {
  outline-color: rgba(var(--dx-light-rgb), 0.2);
  border-color: var(--dx-light);
}

.chart-icon-ring-dark {
  outline-color: rgba(var(--dx-dark-rgb), 0.2);
  border-color: var(--dx-dark);
}

.chart-icon-ring-pink {
  outline-color: rgba(var(--dx-pink-rgb), 0.2);
  border-color: var(--dx-pink);
}

.chart-icon-ring-orange {
  outline-color: rgba(var(--dx-orange-rgb), 0.2);
  border-color: var(--dx-orange);
}

.chart-icon-ring-indigo {
  outline-color: rgba(var(--dx-indigo-rgb), 0.2);
  border-color: var(--dx-indigo);
}

.auth-modern {
  background: url("../images/others/auth.jpg");
  background-position: center;
  background-size: cover;
}
.auth-modern .card {
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  box-shadow: none;
  border: none;
  color: var(--dx-gray-300);
}
.auth-modern .card a {
  color: rgba(255, 255, 255, 0.7490196078);
}
.auth-modern .card .form-control.pattern-input,
.auth-modern .card .form-control.pattern-input:focus, .auth-modern .card .form-control {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border: none;
  color: var(--dx-white);
  box-shadow: none;
}
.auth-modern .card .form-control.pattern-input::placeholder,
.auth-modern .card .form-control.pattern-input:focus::placeholder, .auth-modern .card .form-control::placeholder {
  color: var(--dx-gray-300);
}
.auth-modern .card .form-check-input {
  border-color: rgba(255, 255, 255, 0.1) !important;
}
.auth-modern .card .btn-light {
  background-color: rgba(255, 255, 255, 0.0549019608);
}
.auth-modern .card .social-link:hover {
  background-color: rgba(255, 255, 255, 0.1019607843);
  color: white;
}

.auth-creative-img {
  max-width: 100%;
  height: auto;
}

.auth-title {
  font-size: 24px;
}
@media (min-width: 576px) {
  .auth-title {
    font-size: 2.25rem;
  }
}
@media (min-width: 1200px) {
  .auth-title {
    font-size: 2.25rem;
  }
}

@media (min-width: 1200px) {
  .auth-creative-effect {
    background-color: rgba(var(--dx-primary-rgb), 0.04);
    rotate: -45deg;
    position: absolute;
    top: -16rem;
    right: -2rem;
    bottom: 0px;
  }
}
.btn-outline-light.auth-social-icon:hover {
  background-color: var(--dx-tertiary-bg);
}

@media (min-width: 1200px) {
  .auth-creative-img {
    transform: scale(0.7);
    position: absolute;
    top: 25px;
    left: -158px;
    max-width: none;
  }
}
@media (min-width: 576px) {
  .otp-box {
    height: 56px;
    width: 56px;
  }
}
.progress-gradient-secondary {
  background: linear-gradient(90deg, var(--dx-primary), var(--dx-secondary), var(--dx-pink));
}

.timeline-month::before {
  content: "";
  width: 0.5rem;
  height: calc(100% - 0.3125rem);
  background-color: var(--dx-tertiary-bg);
  position: absolute;
  top: 0.5rem;
  left: 0.875rem;
  border-radius: 0.375rem;
}

.timeline-section {
  position: relative;
}
.timeline-section::before {
  content: "";
  height: 1px;
  width: 1.75rem;
  position: absolute;
  top: 0.875rem;
  left: 1.25rem;
  background-color: var(--dx-tertiary-bg);
  z-index: 0;
}
.timeline-section::after {
  content: "";
  width: 0.75rem;
  height: 0.75rem;
  position: absolute;
  top: 0.5rem;
  left: 0.75rem;
  background-color: var(--dx-primary);
  border: 2px solid var(--dx-secondary-bg);
  border-radius: 3.125rem;
}

.modal-gradient-bg {
  background: linear-gradient(to right, rgba(var(--dx-primary-rgb), 0.2), rgba(var(--dx-pink-rgb), 0.2), rgba(var(--dx-success-rgb), 0.2));
}

.lead-simplebar {
  max-height: calc(100vh - 25.1rem);
}

.today-gradient {
  background: linear-gradient(to right, rgba(var(--dx-warning-rgb), 0.15), rgba(var(--dx-success-rgb), 0.15));
}

.new-gradient {
  background: linear-gradient(to right, rgba(var(--dx-info-rgb), 0.15), rgba(var(--dx-success-rgb), 0.15));
}

.cancel-gradient {
  background: linear-gradient(to right, rgba(var(--dx-danger-rgb), 0.15), rgba(var(--dx-pink-rgb), 0.15));
}

.total-gradient {
  background: linear-gradient(to right, rgba(var(--dx-secondary-rgb), 0.15), rgba(var(--dx-pink-rgb), 0.15));
}

.appointment-primary::before {
  background-color: var(--dx-primary);
  content: "";
  position: absolute;
  top: 1.25rem;
  left: -0.125rem;
  border-radius: 9999px;
  height: 3rem;
  width: 0.125rem;
}

.appointment-secondary::before {
  background-color: var(--dx-secondary);
  content: "";
  position: absolute;
  top: 1.25rem;
  left: -0.125rem;
  border-radius: 9999px;
  height: 3rem;
  width: 0.125rem;
}

.appointment-success::before {
  background-color: var(--dx-success);
  content: "";
  position: absolute;
  top: 1.25rem;
  left: -0.125rem;
  border-radius: 9999px;
  height: 3rem;
  width: 0.125rem;
}

.appointment-info::before {
  background-color: var(--dx-info);
  content: "";
  position: absolute;
  top: 1.25rem;
  left: -0.125rem;
  border-radius: 9999px;
  height: 3rem;
  width: 0.125rem;
}

.appointment-warning::before {
  background-color: var(--dx-warning);
  content: "";
  position: absolute;
  top: 1.25rem;
  left: -0.125rem;
  border-radius: 9999px;
  height: 3rem;
  width: 0.125rem;
}

.appointment-danger::before {
  background-color: var(--dx-danger);
  content: "";
  position: absolute;
  top: 1.25rem;
  left: -0.125rem;
  border-radius: 9999px;
  height: 3rem;
  width: 0.125rem;
}

.appointment-light::before {
  background-color: var(--dx-light);
  content: "";
  position: absolute;
  top: 1.25rem;
  left: -0.125rem;
  border-radius: 9999px;
  height: 3rem;
  width: 0.125rem;
}

.appointment-dark::before {
  background-color: var(--dx-dark);
  content: "";
  position: absolute;
  top: 1.25rem;
  left: -0.125rem;
  border-radius: 9999px;
  height: 3rem;
  width: 0.125rem;
}

.appointment-pink::before {
  background-color: var(--dx-pink);
  content: "";
  position: absolute;
  top: 1.25rem;
  left: -0.125rem;
  border-radius: 9999px;
  height: 3rem;
  width: 0.125rem;
}

.appointment-orange::before {
  background-color: var(--dx-orange);
  content: "";
  position: absolute;
  top: 1.25rem;
  left: -0.125rem;
  border-radius: 9999px;
  height: 3rem;
  width: 0.125rem;
}

.appointment-indigo::before {
  background-color: var(--dx-indigo);
  content: "";
  position: absolute;
  top: 1.25rem;
  left: -0.125rem;
  border-radius: 9999px;
  height: 3rem;
  width: 0.125rem;
}

.select-form-control:focus {
  outline: none;
}
.select-form-control::placeholder {
  color: var(--dx-tertiary-color);
}

.excellence-award {
  background: linear-gradient(to top, rgba(var(--dx-warning-rgb), 0.1), rgba(var(--dx-warning-rgb), 0));
}

.recognition-award {
  background: linear-gradient(to top, rgba(var(--dx-success-rgb), 0.1), rgba(var(--dx-success-rgb), 0));
}

.attendance-list-late {
  border-top: 2px solid rgba(var(--dx-orange-rgb), 0.5);
}

.attendance-list-on-time {
  border-top: 2px solid rgba(var(--dx-success-rgb), 0.5);
}

.attendance-list-holiday {
  border-top: 2px solid rgba(var(--dx-dark-rgb), 0.5);
}

.exam-question-check input[type=radio]:checked + label {
  color: #fff;
  background-color: var(--dx-primary);
  border-color: var(--dx-primary);
}

@media (min-width: 576px) {
  .exam-schedule.row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .exam-schedule.row .row-span-2 {
    grid-row: span 2;
  }
}
@media (min-width: 1200px) {
  .exam-schedule.row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
  .exam-schedule.row .row-span-2 {
    grid-row: span 2;
  }
}
@media (max-width: 767.98px) {
  .order-timeline {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
  }
}
@media (max-width: 767.98px) {
  .order-timeline-wrapper {
    width: 450px;
  }
}
.order-timeline-wrapper::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 0.2em;
  background-color: var(--dx-border-color);
  display: block;
}
.order-timeline-wrapper .timeline-steps::before {
  content: "";
  height: 5px;
  width: 5px;
  margin-left: auto;
  margin-right: auto;
  padding: 0.375rem;
  border: 2px solid var(--dx-secondary-bg);
  border-radius: 999px;
  display: block;
  z-index: 10;
  bottom: 0.375rem;
  position: relative;
  background-color: var(--dx-border-color);
}
.order-timeline-wrapper .timeline-steps.active::before {
  background-color: var(--dx-primary);
}
.order-timeline-wrapper .timeline-steps .animate-ping {
  margin-top: -20px;
  margin-left: 1.5px;
}
.order-timeline-wrapper .time-line-active {
  position: absolute;
  right: 0;
  left: 0;
  width: 50%;
  height: 0.2em;
  background-color: var(--dx-primary);
}

.avatar-dot {
  bottom: 6px;
  right: 8px;
}

.order-track-card {
  position: relative;
  height: 8rem;
}
.order-track-card .order-truck {
  position: absolute;
  left: 23%;
}
.order-track-card .order-track-point {
  width: 2px;
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: var(--dx-border-color);
}
.order-track-card .order-track-dot {
  position: absolute;
  top: 0;
  right: -5px;
  height: 12px;
  width: 12px;
  border-radius: 50rem;
  border: 4px solid var(--dx-secondary-bg);
}
.order-track-card .progress {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
}

.payment-success-modal {
  background-image: url("../images/others/payment-modal.png");
  background-position: center;
  background-size: cover;
}

.mailbox-wrapper {
  display: flex;
  flex-direction: row;
}
.mailbox-wrapper .mailbox-left {
  width: 20rem;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.mailbox-wrapper .mailbox-left .inbox-message .inbox-message-list {
  display: flex;
  padding-left: 0;
  flex-direction: column;
  gap: 0.75rem;
  list-style-type: none;
}
.mailbox-wrapper .mailbox-left .inbox-message .inbox-message-list a {
  color: var(--dx-secondary-color);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.5s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .mailbox-wrapper .mailbox-left .inbox-message .inbox-message-list a {
    transition: none;
  }
}
.mailbox-wrapper .mailbox-left .inbox-message .inbox-message-list a:is(:hover, .active) {
  color: var(--dx-primary);
}
@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;
  }
}
.mailbox-wrapper .mailbox-list {
  border-inline-start: none;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.mailbox-wrapper .mailbox-list .mailbox-user-list .mailbox-user-item {
  transition: all 0.5s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .mailbox-wrapper .mailbox-list .mailbox-user-list .mailbox-user-item {
    transition: none;
  }
}
.mailbox-wrapper .mailbox-list .mailbox-user-list .mailbox-user-item .avatar {
  position: relative;
  border-radius: 50rem;
}
.mailbox-wrapper .mailbox-list .mailbox-user-list .mailbox-user-item .avatar .mailbox-user-noti {
  position: absolute;
  right: -0.3125rem;
  bottom: -0.25rem;
  border-radius: 50rem;
  font-size: 11px;
  border: 2px solid var(--dx-secondary-bg);
}
.mailbox-wrapper .mailbox-list .mailbox-user-list .mailbox-user-item:hover {
  background-color: rgba(var(--dx-tertiary-bg-rgb), 0.5);
}
.mailbox-wrapper .mailbox-list .mailbox-list-wrapper {
  height: 492px;
}
.mailbox-wrapper .mailbox-list .mailbox-list-item:not(:last-child) {
  border-bottom: 1px solid var(--dx-border-color);
}
@media (max-width: 1535.98px) {
  .mailbox-wrapper .mailbox-list {
    border-radius: 0.375rem;
    border-inline-start: 1px solid var(--dx-border-color);
  }
}
.mailbox-wrapper.show .mailbox-list {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
@media (min-width: 1200px) {
  .mailbox-wrapper.show .mailbox-list {
    max-width: 28rem;
  }
}
.mailbox-wrapper .mail-overview {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: none;
}
.mailbox-wrapper .mail-overview .mail-overview-wrapper {
  height: 350px;
}
@media (max-width: 991.98px) {
  .mailbox-wrapper .mail-overview {
    border-radius: 0.375rem;
    border-left: 1px solid var(--dx-border-color);
  }
}

.news-gradient {
  background: linear-gradient(to top, var(--dx-warning-bg-subtle), rgba(var(--dx-warning-rgb), 0));
}

.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-button-text-color: #fff;
  --fc-button-bg-color: var(--dx-info);
  --fc-button-border-color: var(--dx-info);
  --fc-button-hover-bg-color: var(--dx-info);
  --fc-button-hover-border-color: var(--dx-info);
  --fc-button-active-bg-color: var(--dx-info);
  --fc-button-active-border-color: var(--dx-info);
  --fc-event-bg-color: var(--dx-info);
  --fc-event-border-color: var(--dx-info);
  --fc-event-text-color: var(--dx-emphasis-color);
  --fc-event-selected-overlay-color: rgba(0, 0, 0, .25);
  --fc-more-link-bg-color: #d0d0d0;
  --fc-more-link-text-color: var(--dx-emphasis-color);
  --fc-event-resizer-thickness: 8px;
  --fc-event-resizer-dot-total-width: 8px;
  --fc-event-resizer-dot-border-width: 1px;
  --fc-non-business-color: hsla(0, 0%, 84%, .3);
  --fc-bg-event-color: #8fdf82;
  --fc-bg-event-opacity: 0.3;
  --fc-highlight-color: rgba(188, 232, 241, .3);
  --fc-today-bg-color: rgba(var(--dx-info-rgb), 0.1);
  --fc-now-indicator-color: red;
  --fc-list-event-hover-bg-color: var(--dx-tertiary-bg);
  --fc-highlight-color: rgba(var(--dx-primary-rgb), 0.05);
}
.fc .fc-col-header-cell-cushion {
  padding: 10px;
}
.fc .fc-toolbar-title {
  font-size: 1rem;
}
.fc .fc-toolbar {
  display: flex;
  flex-wrap: wrap;
}
.fc .fc-multimonth-title {
  background-color: var(--fc-page-bg-color);
}
.fc .fc-header-toolbar {
  gap: 0.5rem;
}

.fc-license-message {
  display: none;
}

.fc-daygrid-event {
  border-radius: 0.375rem;
  padding: 0.375rem 1rem;
  font-size: 0.9063rem;
}

.chat-profile-card .chat-profile-height {
  max-height: calc(100vh - 15.3125rem);
}
.chat-profile-card .chat-profile-height a {
  transition: all 0.5s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .chat-profile-card .chat-profile-height a {
    transition: none;
  }
}
.chat-profile-card .chat-profile-height a:is(:hover, :focus, .active) {
  box-shadow: 0 0 0 2px #358ffc;
  outline-offset: 2px;
  opacity: 1;
}

.chat-list .chat-list-item {
  color: var(--dx-body-color);
  padding: 0.625rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.5s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .chat-list .chat-list-item {
    transition: none;
  }
}
.chat-list .chat-list-item:hover {
  background-color: var(--dx-tertiary-bg);
}
.chat-list .chat-list-item.active {
  background-color: rgba(var(--dx-primary-rgb), 0.1);
}
.chat-list .chat-list-item .unread {
  color: var(--dx-body-color) !important;
}
.chat-list .unread {
  color: var(--dx-emphasis-color) !important;
  font-weight: 500;
}
.chat-list .chat-list-height {
  max-height: calc(100vh - 22.5rem);
}
.chat-list .chat-list-height .simplebar-content {
  padding: 0 !important;
}

.status-indicator {
  position: absolute;
  bottom: 0;
  right: 0;
  border: 2px solid var(--dx-secondary-bg);
  border-radius: 50rem;
}

.meassages .chat-height {
  max-height: calc(100vh - 310px);
}
.meassages .chat-toolbar {
  background-color: rgba(var(--dx-secondary-bg-rgb), 0.3);
  backdrop-filter: blur(16px);
  z-index: 50;
}

.member-list {
  max-height: 295px;
}
.member-list .member-list-item {
  color: var(--dx-body-color);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.invoice-wrapper {
  border-bottom-left-radius: 50rem;
}

.welcome-widget {
  position: relative;
}
.welcome-widget .welcome-wrapper {
  position: absolute;
  bottom: 0;
  right: 0;
}
.welcome-widget .welcome-wrapper .welcome-gradient {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to right, var(--dx-secondary-bg), rgba(var(--dx-body-bg-rgb), 0.2));
}
@media (min-width: 768px) {
  .welcome-widget .welcome-img {
    position: absolute;
    right: 1.25rem;
    bottom: 0.5rem;
  }
}

.stroke-primary {
  stroke: var(--dx-primary);
}

.stroke-secondary {
  stroke: var(--dx-secondary);
}

.stroke-success {
  stroke: var(--dx-success);
}

.stroke-info {
  stroke: var(--dx-info);
}

.stroke-warning {
  stroke: var(--dx-warning);
}

.stroke-danger {
  stroke: var(--dx-danger);
}

.stroke-light {
  stroke: var(--dx-light);
}

.stroke-dark {
  stroke: var(--dx-dark);
}

.stroke-pink {
  stroke: var(--dx-pink);
}

.stroke-orange {
  stroke: var(--dx-orange);
}

.stroke-indigo {
  stroke: var(--dx-indigo);
}

.campaign-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(to bottom left, rgba(var(--dx-success-rgb), 0.15), rgba(var(--dx-primary-rgb), 0.15));
}

.email-performance-toolbar {
  background-color: var(--dx-tertiary-bg);
}
.email-performance-toolbar a {
  border: none !important;
}
.email-performance-toolbar a:is(.active, :hover) {
  background-color: var(--dx-secondary-bg) !important;
}

.crm-bg-pattern {
  background-image: url("../images/dashboards/dashboard-patterm.png");
}

[data-bs-theme=dark] .crm-bg-pattern {
  background-image: none;
}

.task-circle1 {
  position: absolute;
  top: 3rem;
  left: 7rem;
}

.task-circle2 {
  position: absolute;
  top: 1.25rem;
  left: 0.5rem;
}

.task-circle3 {
  position: absolute;
  bottom: 0.5rem;
  left: 7rem;
}

.project-timeline {
  position: relative;
  padding-left: 1.25rem;
}
.project-timeline:not(:last-child) {
  padding-bottom: 1rem;
}
.project-timeline::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  position: absolute;
  top: 1.25rem;
  left: 0;
  border-radius: 0.125rem;
  border: 1px solid var(--dx-border-color);
  background-color: var(--dx-secondary-bg);
}
.project-timeline::before {
  content: "";
  width: 0.125rem;
  position: absolute;
  top: 1.25rem;
  bottom: -1.25rem;
  left: 0.1875rem;
  background-color: var(--dx-border-color);
}

.task-list .task-list-item {
  position: relative;
  padding: 0;
}
.task-list .task-list-item .form-check-label {
  border-radius: 0.375rem;
  padding: 8px 8px 8px 36px;
  background-color: var(--dx-tertiary-bg);
  cursor: pointer;
  width: 100%;
  margin-left: 0;
  float: none;
  font-weight: 500;
}
.task-list .task-list-item .form-check-input {
  position: absolute;
  left: 34px;
  top: 8px;
}
.task-list .task-list-item input[type=checkbox]:checked + label {
  background-color: var(--dx-primary-bg-subtle);
}

.music-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(to bottom right, rgba(var(--dx-pink-rgb), 0.15), rgba(var(--dx-warning-rgb), 0.15), rgba(var(--dx-success-rgb), 0.15));
}

.music-banner {
  background: linear-gradient(to right, var(--dx-primary), var(--dx-secondary), var(--dx-pink));
}
.music-banner .btn-play {
  border-radius: 20px 7px 20px 7px;
  color: #fff !important;
  background-color: rgba(255, 255, 255, 0.25) !important;
  border: 0 !important;
}

.play-btn {
  transition: all 0.5s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .play-btn {
    transition: none;
  }
}
.play-btn:hover {
  background-color: var(--dx-secondary-bg);
  box-shadow: 0 10px 15px -3px #f3f4f6, 0 4px 6px -4px #f3f4f6;
}

.music-avatar {
  position: relative;
  overflow: hidden;
  border-radius: 0.375rem;
}
.music-avatar .music-avatar-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(2, 6, 23, 0.25);
  color: #fff;
  opacity: 0;
  transition: all 0.5s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .music-avatar .music-avatar-overlay {
    transition: none;
  }
}
.music-avatar .music-avatar-overlay:hover {
  opacity: 1;
}

.upgrade-bg {
  background: linear-gradient(to top right, rgba(var(--dx-info-rgb), 0.15), rgba(var(--dx-secondary-rgb), 0.15), rgba(var(--dx-primary-rgb), 0.15));
}

.music-panel {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  border-top: 1px solid var(--dx-border-color);
  backdrop-filter: blur(16px);
  background-color: rgba(var(--dx-body-bg-rgb), 0.5);
  z-index: 1;
}
@media (min-width: 992px) {
  .music-panel {
    left: var(--dx-sidebar);
  }
}
.music-panel .progress {
  background-color: var(--dx-border-color);
}

@media (min-width: 992px) {
  [data-sidebar=small] .music-panel {
    left: var(--dx-sidebar-sm);
  }
  [data-sidebar=medium] .music-panel {
    left: var(--dx-sidebar-md);
  }
  [data-layout=boxed][data-sidebar=small] .music-panel {
    left: calc(var(--dx-sidebar-sm) + var(--dx-boxed-width));
  }
  [data-layout=boxed][data-sidebar=medium] .music-panel {
    left: calc(var(--dx-sidebar-md) + var(--dx-boxed-width));
  }
  [data-layout=boxed][data-sidebar=large] .music-panel {
    left: calc(var(--dx-sidebar) + var(--dx-boxed-width));
  }
  [data-layout=semibox][data-sidebar=small] .music-panel {
    left: calc(var(--dx-sidebar-sm) + var(--dx-semibox-width) + var(--dx-semibox-width));
  }
  [data-layout=semibox][data-sidebar=medium] .music-panel {
    left: calc(var(--dx-sidebar-md) + var(--dx-semibox-width) + var(--dx-semibox-width));
  }
  [data-layout=semibox][data-sidebar=large] .music-panel {
    left: calc(var(--dx-sidebar) + var(--dx-semibox-width) + var(--dx-semibox-width));
  }
  [data-layout=horizontal] .music-panel {
    left: 0;
  }
}
.date-widget-item {
  color: var(--dx-body-color);
  background-color: var(--dx-tertiary-bg);
  font-size: 1.125rem;
  font-weight: 500;
  border-radius: 0.375rem;
}
.date-widget-item.active {
  background-color: var(--dx-primary);
  color: white;
}

.navbar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  transition: all 0.5s ease-in-out;
  height: 5rem;
  background-color: transparent;
  z-index: 1001;
  margin: 0 auto;
}
@media (prefers-reduced-motion: reduce) {
  .navbar {
    transition: none;
  }
}
.navbar .navbar-toggler {
  color: var(--dx-info);
  background-color: var(--dx-info-bg-subtle);
  border: 1px solid var(--dx-info-border-subtle);
  height: 41px;
  width: 41px;
  border-radius: 50rem;
}
.navbar .navbar-toggler:focus {
  outline: none;
  box-shadow: none;
}
.navbar .navbar-toggler .ri-close-line {
  display: none;
}
.navbar .navbar-toggler[aria-expanded=true] .ri-menu-2-line {
  display: none;
}
.navbar .navbar-toggler[aria-expanded=true] .ri-close-line {
  display: block;
}
.navbar .navbar-nav .nav-item .nav-link {
  font-size: 1rem;
  line-height: 1.5;
  padding: 0.75rem;
  color: var(--dx-body-color);
}
.navbar .navbar-nav .nav-item .nav-link:is(:hover, .active) {
  color: var(--dx-primary);
}
@media (max-width: 991.98px) {
  .navbar .navbar-collapse {
    position: fixed;
    top: 80px;
    right: 0;
    left: 0;
    position: absolute;
    background-color: var(--dx-secondary-bg);
    box-shadow: var(--dx-box-shadow);
  }
}
.navbar.scroll-sticky {
  box-shadow: var(--dx-box-shadow);
  background-color: var(--dx-secondary-bg);
}

.navbar-ecommerce {
  background-color: var(--dx-secondary-bg);
  max-width: 1301px;
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  box-shadow: var(--dx-box-shadow);
}
.navbar-ecommerce.scroll-sticky {
  max-width: 100%;
  width: 100%;
  border-radius: 0;
}

.navbar-invoice .navbar-toggler {
  color: var(--dx-secondary);
  background-color: var(--dx-secondary-bg-subtle);
  border: 1px solid var(--dx-secondary-border-subtle);
}
.navbar-invoice .navbar-nav .nav-item .nav-link {
  padding: 0.5rem 1.25rem;
  color: var(--dx-secondary-color);
}
.navbar-invoice .navbar-nav .nav-item .nav-link:is(:hover, .active) {
  color: var(--dx-secondary);
}
[data-bs-theme=dark] .navbar-invoice.scroll-sticky {
  background-color: var(--dx-body-bg);
  box-shadow: 0 10px 15px -3px color-mix(in oklab, #f3e8ff 5%, transparent), 0 4px 6px -4px color-mix(in oklab, #f3e8ff 5%, transparent);
}

.navbar-school {
  top: 40px;
}
.navbar-school .navbar-nav .nav-item .nav-link:is(:hover, .active) {
  color: var(--dx-orange);
}
.navbar-school.scroll-sticky {
  top: 0;
}

.navbar-doctor .navbar-nav .nav-item .nav-link {
  padding: 12px;
}
.navbar-doctor .navbar-nav .nav-item .nav-link:is(:hover, .active) {
  color: var(--dx-info);
}

.ecommerce-home {
  padding: 320px 0 192px;
  background: url("../images/ecommerce/landing/home.jpg");
  background-size: cover;
  background-position: center;
}
.ecommerce-home .title {
  position: absolute;
  right: 0;
  bottom: 8.75rem;
  left: 0;
  line-height: 0;
  font-size: 36px;
}
@media (min-width: 768px) {
  .ecommerce-home .title {
    font-size: 80px;
  }
}
@media (min-width: 1200px) {
  .ecommerce-home .title {
    font-size: 140px;
  }
}
@media (min-width: 1536px) {
  .ecommerce-home .title {
    font-size: 176px;
  }
}

.product-section .product-toolbar a {
  color: var(--dx-secondary-color);
  transition: all 0.5s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .product-section .product-toolbar a {
    transition: none;
  }
}
.product-section .product-toolbar a:is(:hover, .active) {
  color: var(--dx-primary);
}

.product-card .product-card-wrapper {
  position: relative;
}
.product-card .product-card-wrapper .bookmark {
  position: absolute;
  right: 1rem;
  top: 1rem;
  opacity: 0;
  transition: all 0.5s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .product-card .product-card-wrapper .bookmark {
    transition: none;
  }
}
.product-card .product-card-wrapper:hover .bookmark {
  opacity: 1;
  top: 20px;
}
.product-card .product-card-wrapper .discount-label {
  position: absolute;
  color: var(--dx-white);
  text-align: center;
  background-color: var(--dx-danger);
  top: 0.5rem;
  left: 0;
}
.product-card .product-card-wrapper .discount-label::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid var(--dx-danger);
  border-bottom: 10px solid transparent;
  bottom: -7px;
  right: 0;
  margin-top: auto;
  margin-bottom: auto;
}

.animate-marquee {
  white-space: nowrap;
  animation: marquee 20s linear infinite;
  color: var(--dx-body-color);
  opacity: 0.1;
}
@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

.section-title {
  position: relative;
  padding-left: 1.25rem;
  text-transform: capitalize;
  text-shadow: 0 4px 15px rgba(var(--dx-dark-rgb), 0.5);
}
.section-title::before {
  content: "";
  width: 0.25rem;
  height: 50%;
  position: absolute;
  left: 0px;
  background-color: var(--dx-primary);
}

.cta-section {
  position: relative;
  display: block;
  background-image: url("../images/ecommerce/landing/cta-01.jpg");
  background-position: center;
  padding-top: 15rem;
  padding-bottom: 15rem;
}
.cta-section .cta-title-left {
  left: 16px;
}
.cta-section .cta-title-right {
  right: 16px;
  text-align: end;
}
.cta-section :is(.cta-title-left, .cta-title-right) {
  font-size: 96px;
  position: absolute;
  top: 50%;
  text-transform: uppercase;
  font-weight: 700;
}
@media (max-width: 767.98px) {
  .cta-section :is(.cta-title-left, .cta-title-right) {
    position: static;
    text-align: center;
  }
}
@media (max-width: 991.98px) {
  .cta-section :is(.cta-title-left, .cta-title-right) {
    font-size: 4rem;
  }
}

.edition-section .edition-dot {
  position: absolute;
}
.edition-section .edition-dot span {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  background-color: var(--dx-secondary-bg);
  border-radius: 50rem;
  width: 12px;
  height: 12px;
}
.edition-section .edition-dot-1 {
  top: 20%;
  left: 38%;
}
.edition-section .edition-dot-2 {
  bottom: 26%;
  left: 32%;
}
.edition-section .edition-dot-3 {
  bottom: 40%;
  left: 48%;
}

.text-shadow {
  text-shadow: 0 4px 15px rgba(var(--dx-dark-rgb), 0.5);
}

@media (max-width: 576px) {
  .service-section .service-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
  }
  .service-section .service-grid .custom-grid-item {
    grid-column: span 12;
  }
  .service-section .service-grid .custom-grid-title {
    grid-column: span 12;
  }
}
@media (min-width: 768px) {
  .service-section .service-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
  }
  .service-section .service-grid .custom-grid-item {
    grid-column: span 6;
  }
  .service-section .service-grid .custom-grid-title {
    grid-column: span 10;
  }
}
@media (min-width: 992px) {
  .service-section .service-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
  }
  .service-section .service-grid .custom-grid-item {
    grid-column: span 3;
  }
  .service-section .service-grid .custom-grid-item.row-span-2 {
    grid-row: span 2;
  }
  .service-section .service-grid .custom-grid-title {
    grid-column: span 6;
  }
}

.follow-section .follow-card {
  position: relative;
  display: block;
}
.follow-section .follow-card :is(.follow-overlay, .instagram-icon) {
  position: absolute;
  transition: all 0.5s ease-in-out;
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .follow-section .follow-card :is(.follow-overlay, .instagram-icon) {
    transition: none;
  }
}
.follow-section .follow-card .follow-overlay {
  inset: 0;
  background-color: rgba(3, 7, 18, 0.15);
}
.follow-section .follow-card .instagram-icon {
  top: 45%;
  left: 50%;
  transform: translate(-45%, -50%);
}
.follow-section .follow-card:hover .instagram-icon {
  top: 50%;
  opacity: 1;
}
.follow-section .follow-card:hover .follow-overlay {
  opacity: 1;
}

.email-home-section {
  padding: 110px 0 80px;
}
@media (min-width: 1200px) {
  .email-home-section img {
    top: -25px;
    transform: scale(1.8);
    right: -22rem;
  }
}
@media (min-width: 1200px) and (min-width: 1200px) and (max-width: 1535.98px) {
  .email-home-section img {
    top: 96px;
    transform: scale(2.1);
  }
}
.email-home-section .title {
  font-size: 1.875rem;
}
@media (min-width: 992px) {
  .email-home-section .title {
    font-size: 3rem;
  }
}
@media (min-width: 1200px) and (max-width: 1535.98px) {
  .email-home-section {
    padding: 180px 0 138px;
  }
}
@media (min-width: 1536px) {
  .email-home-section {
    padding: 320px 0 192px;
  }
}

.pricing-card {
  overflow: hidden;
}
.pricing-card .pricing-circle {
  position: absolute;
  bottom: -4rem;
  right: -4rem;
  border: 40px solid var(--dx-tertiary-bg);
  border-radius: 50rem;
}

.email-cta-section {
  padding-top: 5rem;
  color: var(--dx-white);
  background-color: color-mix(in srgb, var(--dx-primary) 100%, black 75%);
}
.email-cta-section .title {
  font-size: 3rem;
}
@media (min-width: 992px) {
  .email-cta-section .title {
    font-size: 48px;
  }
}

.email-footer {
  background-color: var(--dx-gray-900);
}
.email-footer .social-media-list a {
  position: relative;
}
.email-footer .social-media-list a::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(var(--dx-dark-rgb), 0.1);
  border-radius: 0.5rem;
  transform: rotate(-45deg);
}
[data-bs-theme=dark] .email-footer {
  background-color: var(--dx-secondary-bg);
}

.email-img .img-light {
  display: block;
}
.email-img .img-dark {
  display: none;
}
[data-bs-theme=dark] .email-img .img-light {
  display: none;
}
[data-bs-theme=dark] .email-img .img-dark {
  display: block;
}

[data-bs-theme=dark] .invoice-body {
  --dx-body-bg: #04021d;
  --dx-secondary-color: #7e779b;
  --dx-border-color: rgba(202, 213, 226, 0.1);
}

.invoice-header.fixed {
  box-shadow: 0 10px 15px -3px var(--dx-secondary-bg), 0 4px 6px -4px var(--dx-secondary-bg);
  transition: all 0.5s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .invoice-header.fixed {
    transition: none;
  }
}

.invoice-home-section {
  position: relative;
  overflow: hidden;
  padding: 144px 0 80px;
}
.invoice-home-section .title {
  font-size: 36px;
}
@media (min-width: 1200px) {
  .invoice-home-section .title {
    font-size: 60px;
  }
}
.invoice-home-section .invoice-input {
  padding: 0.5625rem 9rem 0.5625rem 1.5rem;
  background-color: transparent;
}
.invoice-home-section .invoice-input.form-control:focus {
  border-color: var(--dx-secondary);
}
.invoice-home-section .form-select:focus {
  border-color: var(--dx-secondary);
  outline: 0;
  box-shadow: none;
}

.invoice-sub-title {
  font-size: 30px;
  line-height: 1.5;
  text-transform: capitalize;
}
@media (min-width: 576px) {
  .invoice-sub-title {
    font-size: 36px;
  }
}

[data-bs-theme=dark] .invoice-card, [data-bs-theme=dark] .invoice-home-section {
  background: linear-gradient(to bottom, rgba(var(--dx-secondary-rgb), 0.04), rgba(var(--dx-secondary-rgb), 0));
}

.invoice-case .thumbnails {
  position: absolute;
  right: 0;
  bottom: -6rem;
  z-index: -1;
}
@media (min-width: 1441px) {
  .invoice-case .thumbnails {
    position: absolute;
    right: -6rem;
    bottom: -6rem;
  }
}

.trial-section {
  background: url("../images/invoice/cta.jpg");
  background-size: cover;
  position: relative;
}
.trial-section .trial-title {
  position: absolute;
  inset: 0;
  top: 6rem;
  color: rgba(var(--dx-dark-rgb), 0.2);
}

.invoice-contact .form-control {
  background-color: var(--dx-body-bg);
}
.invoice-contact .form-control:focus {
  border-color: var(--dx-secondary);
}
.invoice-contact .form-floating > .form-control:focus ~ label::after,
.invoice-contact .form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.invoice-contact .form-floating > .form-control-plaintext ~ label::after,
.invoice-contact .form-floating > .form-select ~ label::after {
  background-color: var(--dx-body-bg);
}

.school-home {
  padding: 192px 0 96px;
  background: linear-gradient(to bottom, rgba(var(--dx-orange-rgb), 0.1), rgba(var(--dx-orange-rgb), 0));
}
.school-home .student-card {
  position: relative;
  max-height: 24rem;
  background-color: var(--dx-secondary-bg);
}
.school-home .student-card::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(var(--dx-info-rgb), 0.1);
  border-top-left-radius: 624.9375rem;
  border-top-right-radius: 624.9375rem;
  height: 66.666667%;
}
.school-home .student-card.warning::before {
  background-color: rgba(var(--dx-warning-rgb), 0.1);
}
.school-home .student-card.success::before {
  background-color: rgba(var(--dx-success-rgb), 0.1);
}
.school-home .student-card.secondary::before {
  background-color: rgba(var(--dx-secondary-rgb), 0.1);
}

.school-about .about-img {
  position: relative;
}
.school-about .about-img::before {
  content: "";
  position: absolute;
  inset: 0px;
  top: 5rem;
  border-radius: 0.375rem;
  background-color: rgba(var(--dx-orange-rgb), 0.1);
}
.school-about .about-img .title {
  transform: rotate(-90deg);
  position: absolute;
  bottom: 3rem;
  left: -0.625rem;
}
.school-about .square-wrapper {
  position: absolute;
  width: 400px;
  height: 400px;
  border: 1px solid var(--dx-orange);
  filter: blur(4px);
  border-radius: 8px;
}
@media (min-width: 992px) {
  .school-about .square-wrapper {
    width: 30rem;
    height: 30rem;
  }
}
@media (min-width: 1200px) {
  .school-about .square-wrapper {
    width: 40.625rem;
    height: 40.625rem;
  }
}

.mentors-section .mentors-card .mentors-wrapper {
  position: relative;
}
.mentors-section .mentors-card .mentors-wrapper::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 80% !important;
  background-color: rgba(var(--dx-light-rgb), 0.75);
  border-top-left-radius: 999px;
  border-top-right-radius: 999px;
}

.client-section {
  background: linear-gradient(to bottom, var(--dx-orange-bg-subtle), rgba(var(--dx-orange-rgb), 0));
}

.courses .courses-card {
  background: linear-gradient(to bottom, var(--dx-orange-bg-subtle), rgba(var(--dx-orange-rgb), 0));
}
.courses .courses-card .course-number {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  color: rgba(var(--dx-orange-rgb), 0.1);
}
@media (min-width: 576px) {
  .courses:before, .courses::after {
    content: "";
    position: absolute;
    border: 1px solid var(--dx-light);
    z-index: -1;
    top: 50%;
  }
  .courses::after {
    height: calc(100% + 2rem);
  }
  .courses.course-firstCol::before {
    width: 66.66%;
  }
  .courses.course-firstCol::after {
    left: 66.66%;
  }
  .courses.course-secondCol::before {
    right: 0;
    width: 66.66%;
  }
  .courses.course-secondCol::after {
    right: 66.66%;
  }
  .courses:last-child::before {
    right: 0;
    width: 33.3%;
  }
  .courses:last-child::after {
    display: none;
  }
}

.footer-social-toolbar a {
  position: relative;
  transition: all 0.5s ease-in-out;
  color: var(--dx-primary);
}
@media (prefers-reduced-motion: reduce) {
  .footer-social-toolbar a {
    transition: none;
  }
}
.footer-social-toolbar a::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--dx-primary-bg-subtle);
  border-radius: 0.5rem;
  transform: rotate(-45deg);
}
.footer-social-toolbar a.dribbble {
  color: var(--dx-pink);
}
.footer-social-toolbar a.dribbble::after {
  background-color: var(--dx-pink-bg-subtle);
}
.footer-social-toolbar a.twitter {
  color: var(--dx-info);
}
.footer-social-toolbar a.twitter::after {
  background-color: var(--dx-info-bg-subtle);
}
.footer-social-toolbar a.youtube {
  color: var(--dx-danger);
}
.footer-social-toolbar a.youtube::after {
  background-color: var(--dx-danger-bg-subtle);
}
.footer-social-toolbar a:hover {
  transform: translateY(-5px);
}

.doctor-head-title {
  font-size: 36px;
}
@media (min-width: 992px) {
  .doctor-head-title {
    font-size: 48px;
  }
}

.doctor-home-section {
  background: linear-gradient(to bottom, rgba(var(--dx-info-rgb), 0.2), rgba(var(--dx-info-rgb), 0.1));
}
.doctor-home-section .clip-path-plus {
  position: absolute;
  clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
}
.doctor-home-section .clip-path-plus.plus-1 {
  top: 16rem;
  right: 16rem;
}
.doctor-home-section .clip-path-plus.plus-2 {
  top: 54%;
  right: 40%;
  rotate: 45deg;
}
.doctor-home-section .title {
  font-size: 36px;
}
@media (min-width: 768px) {
  .doctor-home-section .title {
    font-size: 48px;
  }
}
@media (min-width: 1200px) {
  .doctor-home-section .title {
    font-size: 60px;
  }
}
.doctor-home-section .contact-widget {
  position: absolute;
  right: 0;
  bottom: 20.3125rem;
}
.doctor-home-section .main-title {
  position: relative;
}
.doctor-home-section .main-title::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0px;
  background-color: var(--dx-info);
  width: 2rem;
  height: 2px;
}

.highlight-text {
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
  text-decoration-style: dashed;
  color: var(--dx-info);
  text-decoration-color: rgb(var(--dx-info-rgb), 0.5);
  text-decoration-line: underline;
  font-family: "Roboto Slab", sans-serif;
}

.doctors-about .about-img::before, .doctors-about .about-img::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  border: 1px solid rgba(var(--dx-info-rgb), 0.5);
}
.doctors-about .about-img::before {
  right: -1rem;
  bottom: -1rem;
}
.doctors-about .about-img::after {
  right: -1.25rem;
  bottom: -1.25rem;
}

.doctor-services .service-card {
  background-color: transparent;
  box-shadow: none;
  transition: all 0.5s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .doctor-services .service-card {
    transition: none;
  }
}
.doctor-services .service-card:hover {
  background-color: var(--dx-body-bg);
  transform: translateY(-0.5rem);
  box-shadow: 0 10px 15px -3px var(--dx-secondary-bg);
}

.doctor-team .card img {
  border: 1px solid var(--dx-border-color);
  outline: 1px solid var(--dx-info-border-subtle);
  outline-offset: 2px;
  box-shadow: 0 10px 15px -3px #f3f4f6, 0 4px 6px -4px #f3f4f6;
}
.doctor-team .card .doctor-rate {
  position: absolute;
  top: 1.5rem;
  left: -0.125rem;
}

.doctor-footer li a {
  position: relative;
}
.doctor-footer li a::before {
  content: "";
  background-color: var(--dx-info);
  width: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  transition: all 0.5s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .doctor-footer li a::before {
    transition: none;
  }
}
.doctor-footer li a:hover::before {
  width: 100%;
}