@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Funnel+Sans:ital,wght@0,300..800;1,300..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Zalando+Sans:ital,wght@0,200..900;1,200..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Saira:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Strichpunkt+Sans:wght@400..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Chivo:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap");
.bg-orange-subtle {
    background-color: var(--dx-orange-bg-subtle) !important;
}
.border-orange-subtle {
    border-color: var(--dx-orange-border-subtle) !important;
}
.text-orange-emphasis {
    color: var(--dx-orange-text-emphasis) !important;
}
.bg-indigo-subtle {
    background-color: var(--dx-indigo-bg-subtle) !important;
}
.border-indigo-subtle {
    border-color: var(--dx-indigo-border-subtle) !important;
}
.text-indigo-emphasis {
    color: var(--dx-indigo-text-emphasis) !important;
}
.bg-pink-subtle {
    background-color: var(--dx-pink-bg-subtle) !important;
}
.border-pink-subtle {
    border-color: var(--dx-pink-border-subtle) !important;
}
.text-pink-emphasis {
    color: var(--dx-pink-text-emphasis) !important;
}
:root {
    --dx-font-family-base: Funnel Sans, sans-serif;
    --dx-font-family-heading: Funnel Sans, sans-serif;
    --dx-font-weight-medium: 500;
    --dx-font-weight-semibold: 600;
    --dx-custom-bg: #fff;
    --dx-custom-color: #7484a5;
    --dx-indigo-text-emphasis: #5e61e5;
    --dx-pink-text-emphasis: #e04491;
    --dx-orange-text-emphasis: #ed6d15;
    --dx-indigo-bg-subtle: rgba(var(--dx-indigo-rgb), 0.15);
    --dx-pink-bg-subtle: rgba(var(--dx-pink-rgb), 0.15);
    --dx-orange-bg-subtle: rgba(var(--dx-orange-rgb), 0.15);
    --dx-indigo-border-subtle: rgba(var(--dx-indigo-rgb), 0.3);
    --dx-pink-border-subtle: rgba(var(--dx-pink-rgb), 0.3);
    --dx-orange-border-subtle: rgba(var(--dx-orange-rgb), 0.3);
    --dx-link-color: var(--dx-primary);
    --dx-primary-text-emphasis: color-mix(
        in srgb,
        var(--dx-primary) 75%,
        #000 25%
    );
    --dx-primary-bg-subtle: color-mix(
        in srgb,
        var(--dx-primary) 10%,
        transparent
    );
    --dx-primary-border-subtle: color-mix(
        in srgb,
        var(--dx-primary) 30%,
        transparent
    );
    --dx-spacer: 1.25rem;
    --dx-sidebar: 15rem;
    --dx-sidebar-md: 10rem;
    --dx-sidebar-sm: 4.6875rem;
    --dx-sidebar-padding-y: 0.625rem;
    --dx-sidebar-padding-x: 1rem;
    --dx-sidebar-font-size: 1rem;
    --dx-sidebar-menu-title-font-size: 0.8438rem;
    --dx-sidebar-bg: var(--dx-secondary-bg);
    --dx-topbar: 4.6875rem;
    --dx-boxed-bg: url(../images/others/boxed-bg.html);
    --dx-boxed-space: 48px;
    --dx-boxed-width: 1510px;
    --dx-boxed-width-sm: 1250px;
    --dx-neo-line: 1.125rem;
    --dx-semibox-width: 0.75rem;
    --dx-page-wrapper-width: 0.6875rem;
}
:root[data-colors="teal"] {
    --dx-primary: #0f828c;
    --dx-primary-rgb: 15, 130, 140;
}
:root[data-colors="purple"] {
    --dx-primary: #ba57e9;
    --dx-primary-rgb: 186, 87, 233;
}
:root[data-colors="rose"] {
    --dx-primary: #d75959;
    --dx-primary-rgb: 215, 89, 89;
}
:root[data-colors="slate"] {
    --dx-primary: #7198a7;
    --dx-primary-rgb: 113, 152, 167;
}
:root[data-colors="amber"] {
    --dx-primary: #dfa235;
    --dx-primary-rgb: 223, 162, 53;
}
:root[data-colors="orchid"] {
    --dx-primary: #c564c1;
    --dx-primary-rgb: 197, 100, 193;
}
:root[data-colors="olive"] {
    --dx-primary: #9eaf5d;
    --dx-primary-rgb: 158, 175, 93;
}
:root[data-colors="orange"] {
    --dx-primary: #e18c52;
    --dx-primary-rgb: 225, 140, 82;
}
:root[data-colors="indigo"] {
    --dx-primary: #7b71db;
    --dx-primary-rgb: 123, 113, 219;
}
:root[data-sidebar-image="image-1"] {
    --dx-sidebar-image: url(../images/sidebar-img/img-1.html);
}
:root[data-sidebar-image="image-2"] {
    --dx-sidebar-image: url(../images/sidebar-img/img-2.html);
}
:root[data-sidebar-image="image-3"] {
    --dx-sidebar-image: url(../images/sidebar-img/img-3.html);
}
:root[data-sidebar-image="image-4"] {
    --dx-sidebar-image: url(../images/sidebar-img/img-4.html);
}
:root[data-sidebar-image="image-5"] {
    --dx-sidebar-image: url(../images/sidebar-img/img-5.html);
}
:root[data-sidebar-colors="dark"] {
    --dx-sidebar-bg: #25293d;
}
:root[data-sidebar-colors="brand"] {
    --dx-sidebar-bg: #4056af;
}
:root[data-sidebar-colors="wine"] {
    --dx-sidebar-bg: #7e2929;
}
:root[data-sidebar-colors="green"] {
    --dx-sidebar-bg: #28464b;
}
:root[data-sidebar-colors="light"] {
    --dx-sidebar-bg: var(--dx-secondary-bg);
    --dx-sidebar-border: var(--dx-border-color);
    --dx-sidebar-menu-title: var(--dx-secondary-color);
    --dx-sidebar-link-color: var(--dx-secondary-color);
    --dx-sidebar-dropdown-shadow: rgba(149, 157, 165, 0.1) 0px 8px 24px;
    --dx-sidebar-link-hover-color: var(--dx-primary);
    --dx-sidebar-link-bg-hover-color: var(--dx-primary-bg-subtle);
    --dx-sidebar-link-active-color: var(--dx-primary);
    --dx-sidebar-link-bg-active-color: var(--dx-primary-bg-subtle);
    --dx-sidebar-link-sub-color: var(--dx-secondary-color);
    --dx-sidebar-link-sub-hover-color: var(--dx-primary);
    --dx-sidebar-link-sub-active-color: var(--dx-primary);
    --dx-sidebar-effect-color: var(--dx-border-color);
    --dx-sidebar-effect-hover-color: var(--dx-primary);
}
:root:is(
    [data-sidebar-colors="dark"],
    [data-sidebar-colors="brand"],
    [data-sidebar-colors="wine"],
    [data-sidebar-colors="green"]
) {
    --dx-sidebar-border: var(--dx-sidebar-bg);
    --dx-sidebar-menu-title: color-mix(
        in srgb,
        var(--dx-sidebar-bg) 100%,
        #fff 95%
    );
    --dx-sidebar-link-color: color-mix(
        in srgb,
        var(--dx-sidebar-bg) 100%,
        #fff 95%
    );
    --dx-sidebar-dropdown-shadow:
        0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --dx-sidebar-link-hover-color: #fff;
    --dx-sidebar-link-bg-hover-color: color-mix(
        in srgb,
        var(--dx-sidebar-bg) 100%,
        #fff 5%
    );
    --dx-sidebar-link-active-color: #fff;
    --dx-sidebar-link-bg-active-color: color-mix(
        in srgb,
        var(--dx-sidebar-bg) 100%,
        #fff 5%
    );
    --dx-sidebar-link-sub-color: color-mix(
        in srgb,
        var(--dx-sidebar-bg) 100%,
        #fff 95%
    );
    --dx-sidebar-link-sub-hover-color: #fff;
    --dx-sidebar-link-sub-active-color: #fff;
    --dx-sidebar-effect-color: color-mix(
        in srgb,
        var(--dx-sidebar-bg) 100%,
        #fff 12%
    );
    --dx-sidebar-effect-hover-color: color-mix(
        in srgb,
        var(--dx-sidebar-bg) 100%,
        #fff 70%
    );
}
:root:is(
        [data-sidebar-colors="dark"],
        [data-sidebar-colors="brand"],
        [data-sidebar-colors="wine"],
        [data-sidebar-colors="green"]
    )
    .main-sidebar
    .simplebar-scrollbar:before {
    background-color: color-mix(
        in srgb,
        var(--dx-sidebar-bg) 100%,
        #fff 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-icon-bg-color: var(--dx-tertiary-bg);
    --dx-topbar-icon-bg-hover-color: color-mix(
        in srgb,
        var(--dx-tertiary-bg) 100%,
        #000 1.3%
    );
}
:root[data-nav-type="pattern"] {
    --dx-topbar-border: rgba(var(--dx-white-rgb), 0.18);
    --dx-topbar-color: rgba(var(--dx-white-rgb), 0.85);
    --dx-topbar-icon-bg-color: rgba(var(--dx-white-rgb), 0.08);
    --dx-topbar-icon-bg-hover-color: rgba(var(--dx-white-rgb), 0.14);
    --dx-topbar-bg: color-mix(in srgb, var(--dx-primary) 75%, #000 25%);
}
:root[data-topbar-colors="dark"] {
    --dx-topbar-bg: color-mix(in srgb, #272b3e 100%, #fff 1%);
    --dx-topbar-border: color-mix(in srgb, var(--dx-topbar-bg) 100%, #fff 10%);
    --dx-topbar-color: color-mix(in srgb, var(--dx-topbar-bg) 40%, #fff 60%);
    --dx-topbar-icon-bg-color: color-mix(
        in srgb,
        var(--dx-topbar-bg) 100%,
        #fff 5%
    );
    --dx-topbar-icon-bg-hover-color: color-mix(
        in srgb,
        var(--dx-topbar-bg) 100%,
        #fff 9%
    );
}
:root[data-topbar-colors="dark"] .main-topbar .profile-dropdown .admin-name {
    color: var(--dx-white);
}
:root[data-topbar-colors="dark"]
    .main-topbar
    .profile-dropdown
    .admin-designation {
    color: rgba(var(--dx-white-rgb), 0.5);
}
:root[data-topbar-colors="dark"][data-nav-type="pattern"] {
    --dx-topbar-border: rgba(var(--dx-white-rgb), 0.18);
    --dx-topbar-color: rgba(var(--dx-white-rgb), 0.85);
    --dx-topbar-icon-bg-color: rgba(var(--dx-white-rgb), 0.08);
    --dx-topbar-icon-bg-hover-color: rgba(var(--dx-white-rgb), 0.14);
    --dx-topbar-bg: color-mix(in srgb, var(--dx-primary) 75%, #000 25%);
}
:root[data-topbar-colors="brand"] {
    --dx-topbar-bg: color-mix(in srgb, #4056af 100%, #fff 1%);
    --dx-topbar-border: color-mix(in srgb, var(--dx-topbar-bg) 100%, #fff 10%);
    --dx-topbar-color: color-mix(in srgb, var(--dx-topbar-bg) 40%, #fff 60%);
    --dx-topbar-icon-bg-color: color-mix(
        in srgb,
        var(--dx-topbar-bg) 100%,
        #fff 5%
    );
    --dx-topbar-icon-bg-hover-color: color-mix(
        in srgb,
        var(--dx-topbar-bg) 100%,
        #fff 9%
    );
}
:root[data-topbar-colors="brand"] .main-topbar .profile-dropdown .admin-name {
    color: var(--dx-white);
}
:root[data-topbar-colors="brand"]
    .main-topbar
    .profile-dropdown
    .admin-designation {
    color: rgba(var(--dx-white-rgb), 0.5);
}
:root[data-topbar-colors="brand"][data-nav-type="pattern"] {
    --dx-topbar-border: rgba(var(--dx-white-rgb), 0.18);
    --dx-topbar-color: rgba(var(--dx-white-rgb), 0.85);
    --dx-topbar-icon-bg-color: rgba(var(--dx-white-rgb), 0.08);
    --dx-topbar-icon-bg-hover-color: rgba(var(--dx-white-rgb), 0.14);
    --dx-topbar-bg: color-mix(in srgb, var(--dx-primary) 75%, #000 25%);
}
:root[data-topbar-colors="wine"] {
    --dx-topbar-bg: color-mix(in srgb, #7e2929 100%, #fff 1%);
    --dx-topbar-border: color-mix(in srgb, var(--dx-topbar-bg) 100%, #fff 10%);
    --dx-topbar-color: color-mix(in srgb, var(--dx-topbar-bg) 40%, #fff 60%);
    --dx-topbar-icon-bg-color: color-mix(
        in srgb,
        var(--dx-topbar-bg) 100%,
        #fff 5%
    );
    --dx-topbar-icon-bg-hover-color: color-mix(
        in srgb,
        var(--dx-topbar-bg) 100%,
        #fff 9%
    );
}
:root[data-topbar-colors="wine"] .main-topbar .profile-dropdown .admin-name {
    color: var(--dx-white);
}
:root[data-topbar-colors="wine"]
    .main-topbar
    .profile-dropdown
    .admin-designation {
    color: rgba(var(--dx-white-rgb), 0.5);
}
:root[data-topbar-colors="wine"][data-nav-type="pattern"] {
    --dx-topbar-border: rgba(var(--dx-white-rgb), 0.18);
    --dx-topbar-color: rgba(var(--dx-white-rgb), 0.85);
    --dx-topbar-icon-bg-color: rgba(var(--dx-white-rgb), 0.08);
    --dx-topbar-icon-bg-hover-color: rgba(var(--dx-white-rgb), 0.14);
    --dx-topbar-bg: color-mix(in srgb, var(--dx-primary) 75%, #000 25%);
}
:root[data-topbar-colors="sky"] {
    --dx-topbar-bg: color-mix(in srgb, #28464b 100%, #fff 1%);
    --dx-topbar-border: color-mix(in srgb, var(--dx-topbar-bg) 100%, #fff 10%);
    --dx-topbar-color: color-mix(in srgb, var(--dx-topbar-bg) 40%, #fff 60%);
    --dx-topbar-icon-bg-color: color-mix(
        in srgb,
        var(--dx-topbar-bg) 100%,
        #fff 5%
    );
    --dx-topbar-icon-bg-hover-color: color-mix(
        in srgb,
        var(--dx-topbar-bg) 100%,
        #fff 9%
    );
}
:root[data-topbar-colors="sky"] .main-topbar .profile-dropdown .admin-name {
    color: var(--dx-white);
}
:root[data-topbar-colors="sky"]
    .main-topbar
    .profile-dropdown
    .admin-designation {
    color: rgba(var(--dx-white-rgb), 0.5);
}
:root[data-topbar-colors="sky"][data-nav-type="pattern"] {
    --dx-topbar-border: rgba(var(--dx-white-rgb), 0.18);
    --dx-topbar-color: rgba(var(--dx-white-rgb), 0.85);
    --dx-topbar-icon-bg-color: rgba(var(--dx-white-rgb), 0.08);
    --dx-topbar-icon-bg-hover-color: rgba(var(--dx-white-rgb), 0.14);
    --dx-topbar-bg: color-mix(in srgb, var(--dx-primary) 75%, #000 25%);
}
: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: #303547;
    --dx-light-rgb: 48, 53, 71;
}
:root[data-bs-theme="dark"]:is(
        [data-theme="default"],
        [data-theme="minimal"],
        [data-theme="elegant"],
        [data-theme="material"],
        [data-theme="sparkle"],
        [data-theme="flat"],
        [data-theme="creative"],
        [data-theme="corporate"],
        [data-theme="retro"],
        [data-theme="modern"],
        [data-theme="edge"],
        [data-theme="vertex"],
        [data-theme="vision"],
        [data-theme="prime"]
    ) {
    --dx-body-bg: #191e33;
    --dx-secondary-bg: #25293d;
    --dx-secondary-bg-rgb: 37, 41, 61;
    --dx-tertiary-bg: #303547;
    --dx-tertiary-bg-rgb: 48, 53, 71;
    --dx-light: #303547;
    --dx-light-rgb: 48, 53, 71;
    --dx-border-color: #35394b;
    --dx-dark: #474c69;
    --dx-dark-bg-subtle: rgba(to-rgb($dark-custom-dark), 0.3);
    --dx-dark-rgb: 71, 76, 105;
    --dx-custom-bg: #303547;
}
:root[data-bs-theme="dark"]:is(
        [data-theme="default"],
        [data-theme="minimal"],
        [data-theme="elegant"],
        [data-theme="material"],
        [data-theme="sparkle"],
        [data-theme="flat"],
        [data-theme="creative"],
        [data-theme="corporate"],
        [data-theme="retro"],
        [data-theme="modern"],
        [data-theme="edge"],
        [data-theme="vertex"],
        [data-theme="vision"],
        [data-theme="prime"]
    )
    .card {
    --dx-card-bg: var(--dx-secondary-bg);
}
:root[data-bs-theme="dark"]:is(
        [data-theme="default"],
        [data-theme="minimal"],
        [data-theme="elegant"],
        [data-theme="material"],
        [data-theme="sparkle"],
        [data-theme="flat"],
        [data-theme="creative"],
        [data-theme="corporate"],
        [data-theme="retro"],
        [data-theme="modern"],
        [data-theme="edge"],
        [data-theme="vertex"],
        [data-theme="vision"],
        [data-theme="prime"]
    )
    .modal {
    --dx-modal-bg: var(--dx-secondary-bg);
}
:root[data-bs-theme="dark"] .modal {
    --dx-modal-box-shadow: 0 10px 15px -3px #151f35, 0 4px 6px -4px #151f35;
    --dx-modal-border-color: var(--dx-border-color);
}
:root[data-bs-theme="dark"] .offcanvas {
    --dx-offcanvas-box-shadow: 0 10px 15px -3px #151f35, 0 4px 6px -4px #151f35;
    --dx-offcanvas-border-color: var(--dx-border-color);
}
:root[data-bs-theme="dark"] .dropdown-menu {
    --dx-dropdown-box-shadow: 0 0 3px rgba(var(--dx-dark-rgb), 0.65);
}
:root[data-bs-theme="black"] {
    --dx-body-color: #f3f3f3;
    --dx-body-color-rgb: 243, 243, 243;
    --dx-emphasis-color: #fff;
    --dx-emphasis-color-rgb: 255, 255, 255;
    --dx-secondary-color: #adadad;
    --dx-secondary-color-rgb: 173, 173, 173;
    --dx-tertiary-color: #adadad;
    --dx-tertiary-color-rgb: 173, 173, 173;
    --dx-primary-text-emphasis: #5f78dc;
    --dx-secondary-text-emphasis: #9358da;
    --dx-success-text-emphasis: #06ba54;
    --dx-info-text-emphasis: #00abcd;
    --dx-warning-text-emphasis: #e9c213;
    --dx-danger-text-emphasis: #f2494a;
    --dx-light-text-emphasis: #f9fafb;
    --dx-dark-text-emphasis: #f6f7fb;
    --dx-primary-bg-subtle: rgba(var(--dx-primary-rgb), 0.15);
    --dx-secondary-bg-subtle: rgba(var(--dx-secondary-rgb), 0.15);
    --dx-success-bg-subtle: rgba(var(--dx-success-rgb), 0.15);
    --dx-info-bg-subtle: rgba(var(--dx-info-rgb), 0.15);
    --dx-warning-bg-subtle: rgba(var(--dx-warning-rgb), 0.15);
    --dx-danger-bg-subtle: rgba(var(--dx-danger-rgb), 0.15);
    --dx-light-bg-subtle: #2c2c2c;
    --dx-dark-bg-subtle: #0d1123;
    --dx-primary-border-subtle: rgba(var(--dx-primary-rgb), 0.3);
    --dx-secondary-border-subtle: rgba(var(--dx-secondary-rgb), 0.3);
    --dx-success-border-subtle: rgba(var(--dx-success-rgb), 0.3);
    --dx-info-border-subtle: rgba(var(--dx-info-rgb), 0.3);
    --dx-warning-border-subtle: rgba(var(--dx-warning-rgb), 0.3);
    --dx-danger-border-subtle: rgba(var(--dx-danger-rgb), 0.3);
    --dx-light-border-subtle: #052a40;
    --dx-dark-border-subtle: #181c2f;
    --dx-heading-color: #fff;
    --dx-link-color: #a2b2f1;
    --dx-link-hover-color: #abbaf2;
    --dx-link-color-rgb: 162, 178, 241;
    --dx-link-hover-color-rgb: 171, 186, 242;
    --dx-code-color: #f491c2;
    --dx-highlight-color: #f3f3f3;
    --dx-highlight-bg: #664d03;
    --dx-border-color: #383838;
    --dx-border-color-translucent: #383838;
    --dx-form-valid-color: #75b798;
    --dx-form-valid-border-color: #75b798;
    --dx-form-invalid-color: #ea868f;
    --dx-form-invalid-border-color: #ea868f;
    --dx-box-shadow: none;
}
:root[data-bs-theme="black"]:is(
        [data-theme="default"],
        [data-theme="minimal"],
        [data-theme="elegant"],
        [data-theme="material"],
        [data-theme="sparkle"],
        [data-theme="flat"],
        [data-theme="creative"],
        [data-theme="corporate"],
        [data-theme="retro"],
        [data-theme="modern"],
        [data-theme="edge"],
        [data-theme="vertex"],
        [data-theme="vision"],
        [data-theme="prime"]
    ) {
    --dx-body-bg: #151515;
    --dx-body-bg-rgb: 21, 21, 21;
    --dx-secondary-bg: #212121;
    --dx-secondary-bg-rgb: 33, 33, 33;
    --dx-tertiary-bg: #2c2c2c;
    --dx-tertiary-bg-rgb: 44, 44, 44;
    --dx-light: #2c2c2c;
    --dx-light-rgb: 44, 44, 44;
    --dx-dark: #1e293b;
    --dx-dark-bg-subtle: rgba(to-rgb($black-custom-dark), 0.3);
    --dx-dark-rgb: 30, 41, 59;
    --dx-custom-bg: #2c2c2c;
}
:root[data-bs-theme="black"]:is(
        [data-theme="default"],
        [data-theme="minimal"],
        [data-theme="elegant"],
        [data-theme="material"],
        [data-theme="sparkle"],
        [data-theme="flat"],
        [data-theme="creative"],
        [data-theme="corporate"],
        [data-theme="retro"],
        [data-theme="modern"],
        [data-theme="edge"],
        [data-theme="vertex"],
        [data-theme="vision"],
        [data-theme="prime"]
    )
    .card {
    --dx-card-bg: var(--dx-secondary-bg);
}
:root[data-bs-theme="black"]:is(
        [data-theme="default"],
        [data-theme="minimal"],
        [data-theme="elegant"],
        [data-theme="material"],
        [data-theme="sparkle"],
        [data-theme="flat"],
        [data-theme="creative"],
        [data-theme="corporate"],
        [data-theme="retro"],
        [data-theme="modern"],
        [data-theme="edge"],
        [data-theme="vertex"],
        [data-theme="vision"],
        [data-theme="prime"]
    )
    .modal {
    --dx-modal-bg: var(--dx-secondary-bg);
}
.font-base {
    font-family: var(--dx-font-sans-serif);
}
.bg-body-custom {
    background-color: var(--dx-custom-bg);
}
.text-body-custom {
    color: var(--dx-custom-text);
}
.cursor-pointer {
    cursor: pointer;
}
.top-24 {
    top: 6rem;
}
h6 {
    line-height: 1.5;
}
.logos .logo-light {
    display: none;
}
.logos .logo-dark {
    display: inline-block;
}
:is([data-bs-theme="dark"], [data-bs-theme="black"]) .logos .logo-light {
    display: inline-block;
}
:is([data-bs-theme="dark"], [data-bs-theme="black"]) .logos .logo-dark {
    display: none;
}
ol,
ul {
    padding-right: 1.3rem;
}
.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;
    left: 5px;
    bottom: 5px;
}
.modal-backdrop,
.offcanvas-backdrop {
    backdrop-filter: blur(4px);
}
.jvm-tooltip {
    display: none;
}
:is(.text-truncate-2, .text-truncate-3) {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
.text-truncate-2 {
    -webkit-line-clamp: 2;
}
.text-truncate-3 {
    -webkit-line-clamp: 3;
}
.letter-spacing-md {
    letter-spacing: 1.3px;
}
.letter-spacing-lg {
    letter-spacing: 3px;
}
.size-7-5 {
    width: 1.875rem !important;
    height: 1.875rem !important;
}
.size-1-5 {
    height: 6px;
    width: 6px;
}
.accordion-primary,
.accordion-primary.accordion-boxed {
    --dx-accordion-active-color: var(--dx-primary);
    --dx-accordion-active-bg: var(--dx-primary-bg-subtle);
}
.accordion-primary.accordion-boxed [aria-expanded="true"] {
    --dx-accordion-border-color: var(--dx-primary-border-subtle);
}
.accordion-solid-primary {
    --dx-accordion-active-bg: var(--dx-primary);
    --dx-accordion-active-color: #fff;
}
.accordion-solid-primary [aria-expanded="true"] {
    --dx-accordion-border-color: var(--dx-primary);
}
.accordion-secondary,
.accordion-secondary.accordion-boxed {
    --dx-accordion-active-color: var(--dx-secondary);
    --dx-accordion-active-bg: var(--dx-secondary-bg-subtle);
}
.accordion-secondary.accordion-boxed [aria-expanded="true"] {
    --dx-accordion-border-color: var(--dx-secondary-border-subtle);
}
.accordion-solid-secondary {
    --dx-accordion-active-bg: var(--dx-secondary);
    --dx-accordion-active-color: #fff;
}
.accordion-solid-secondary [aria-expanded="true"] {
    --dx-accordion-border-color: var(--dx-secondary);
}
.accordion-success,
.accordion-success.accordion-boxed {
    --dx-accordion-active-color: var(--dx-success);
    --dx-accordion-active-bg: var(--dx-success-bg-subtle);
}
.accordion-success.accordion-boxed [aria-expanded="true"] {
    --dx-accordion-border-color: var(--dx-success-border-subtle);
}
.accordion-solid-success {
    --dx-accordion-active-bg: var(--dx-success);
    --dx-accordion-active-color: #fff;
}
.accordion-solid-success [aria-expanded="true"] {
    --dx-accordion-border-color: var(--dx-success);
}
.accordion-info,
.accordion-info.accordion-boxed {
    --dx-accordion-active-color: var(--dx-info);
    --dx-accordion-active-bg: var(--dx-info-bg-subtle);
}
.accordion-info.accordion-boxed [aria-expanded="true"] {
    --dx-accordion-border-color: var(--dx-info-border-subtle);
}
.accordion-solid-info {
    --dx-accordion-active-bg: var(--dx-info);
    --dx-accordion-active-color: #fff;
}
.accordion-solid-info [aria-expanded="true"] {
    --dx-accordion-border-color: var(--dx-info);
}
.accordion-warning,
.accordion-warning.accordion-boxed {
    --dx-accordion-active-color: var(--dx-warning);
    --dx-accordion-active-bg: var(--dx-warning-bg-subtle);
}
.accordion-warning.accordion-boxed [aria-expanded="true"] {
    --dx-accordion-border-color: var(--dx-warning-border-subtle);
}
.accordion-solid-warning {
    --dx-accordion-active-bg: var(--dx-warning);
    --dx-accordion-active-color: #020617;
}
.accordion-solid-warning [aria-expanded="true"] {
    --dx-accordion-border-color: var(--dx-warning);
}
.accordion-danger,
.accordion-danger.accordion-boxed {
    --dx-accordion-active-color: var(--dx-danger);
    --dx-accordion-active-bg: var(--dx-danger-bg-subtle);
}
.accordion-danger.accordion-boxed [aria-expanded="true"] {
    --dx-accordion-border-color: var(--dx-danger-border-subtle);
}
.accordion-solid-danger {
    --dx-accordion-active-bg: var(--dx-danger);
    --dx-accordion-active-color: #fff;
}
.accordion-solid-danger [aria-expanded="true"] {
    --dx-accordion-border-color: var(--dx-danger);
}
.accordion-light,
.accordion-light.accordion-boxed {
    --dx-accordion-active-color: var(--dx-secondary-color);
    --dx-accordion-active-bg: var(--dx-light);
}
.accordion-light.accordion-boxed [aria-expanded="true"] {
    --dx-accordion-border-color: var(--dx-border-color);
}
.accordion-solid-light {
    --dx-accordion-active-bg: var(--dx-light);
    --dx-accordion-active-color: #020617;
}
.accordion-solid-light [aria-expanded="true"] {
    --dx-accordion-border-color: var(--dx-light);
}
.accordion-dark,
.accordion-dark.accordion-boxed {
    --dx-accordion-active-color: var(--dx-dark);
    --dx-accordion-active-bg: var(--dx-dark-bg-subtle);
}
.accordion-dark.accordion-boxed [aria-expanded="true"] {
    --dx-accordion-border-color: var(--dx-dark-border-subtle);
}
.accordion-solid-dark {
    --dx-accordion-active-bg: var(--dx-dark);
    --dx-accordion-active-color: #fff;
}
.accordion-solid-dark [aria-expanded="true"] {
    --dx-accordion-border-color: var(--dx-dark);
}
.accordion-pink,
.accordion-pink.accordion-boxed {
    --dx-accordion-active-color: var(--dx-pink);
    --dx-accordion-active-bg: var(--dx-pink-bg-subtle);
}
.accordion-pink.accordion-boxed [aria-expanded="true"] {
    --dx-accordion-border-color: var(--dx-pink-border-subtle);
}
.accordion-solid-pink {
    --dx-accordion-active-bg: var(--dx-pink);
    --dx-accordion-active-color: #fff;
}
.accordion-solid-pink [aria-expanded="true"] {
    --dx-accordion-border-color: var(--dx-pink);
}
.accordion-orange,
.accordion-orange.accordion-boxed {
    --dx-accordion-active-color: var(--dx-orange);
    --dx-accordion-active-bg: var(--dx-orange-bg-subtle);
}
.accordion-orange.accordion-boxed [aria-expanded="true"] {
    --dx-accordion-border-color: var(--dx-orange-border-subtle);
}
.accordion-solid-orange {
    --dx-accordion-active-bg: var(--dx-orange);
    --dx-accordion-active-color: #fff;
}
.accordion-solid-orange [aria-expanded="true"] {
    --dx-accordion-border-color: var(--dx-orange);
}
.accordion-indigo,
.accordion-indigo.accordion-boxed {
    --dx-accordion-active-color: var(--dx-indigo);
    --dx-accordion-active-bg: var(--dx-indigo-bg-subtle);
}
.accordion-indigo.accordion-boxed [aria-expanded="true"] {
    --dx-accordion-border-color: var(--dx-indigo-border-subtle);
}
.accordion-solid-indigo {
    --dx-accordion-active-bg: var(--dx-indigo);
    --dx-accordion-active-color: #fff;
}
.accordion-solid-indigo [aria-expanded="true"] {
    --dx-accordion-border-color: var(--dx-indigo);
}
.btn-primary {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-primary);
    --dx-btn-border-color: var(--dx-primary);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-primary-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-primary-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-primary-text-emphasis);
    --dx-btn-active-border-color: var(--dx-primary-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-primary-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-primary-text-emphasis);
}
[data-theme="material"] .btn-primary {
    box-shadow: var(--dx-box-shadow);
}
.btn-outline-primary {
    --dx-btn-color: var(--dx-primary);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-primary);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-primary-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-primary-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-primary-text-emphasis);
    --dx-btn-active-border-color: var(--dx-primary-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-primary-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-primary-text-emphasis);
}
.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);
}
[data-theme="material"] .btn-outline-primary {
    box-shadow: var(--dx-box-shadow);
}
.btn-sub-primary {
    --dx-btn-color: var(--dx-primary);
    --dx-btn-bg: var(--dx-primary-bg-subtle);
    --dx-btn-border-color: transparent;
    --dx-btn-hover-color: var(--dx-primary);
    --dx-btn-hover-bg: var(--dx-primary-border-subtle);
    --dx-btn-hover-border-color: transparent;
    --dx-btn-active-color: var(--dx-primary);
    --dx-btn-active-bg: var(--dx-primary-border-subtle);
    --dx-btn-active-border-color: transparent;
    --dx-btn-disabled-color: var(--dx-primary);
    --dx-btn-disabled-bg: var(--dx-primary-border-subtle);
    --dx-btn-disabled-border-color: transparent;
}
.btn-dashed-primary {
    --dx-btn-color: var(--dx-primary);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-primary);
    --dx-btn-hover-color: var(--dx-primary);
    --dx-btn-hover-bg: var(--dx-primary-bg-subtle);
    --dx-btn-hover-border-color: var(--dx-primary);
    --dx-btn-active-color: var(--dx-primary);
    --dx-btn-active-bg: var(--dx-primary-bg-subtle);
    --dx-btn-active-border-color: var(--dx-primary);
    --dx-btn-disabled-color: var(--dx-primary);
    --dx-btn-disabled-bg: var(--dx-primary-bg-subtle);
    --dx-btn-disabled-border-color: var(--dx-primary);
}
.btn-active-primary {
    --dx-btn-color: var(--dx-primary);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: transparent;
    --dx-btn-hover-color: var(--dx-primary);
    --dx-btn-hover-bg: var(--dx-primary-bg-subtle);
    --dx-btn-hover-border-color: transparent;
    --dx-btn-active-color: var(--dx-primary);
    --dx-btn-active-bg: var(--dx-primary-bg-subtle);
    --dx-btn-active-border-color: transparent;
    --dx-btn-disabled-color: var(--dx-primary);
    --dx-btn-disabled-bg: var(--dx-primary-bg-subtle);
    --dx-btn-disabled-border-color: transparent;
    --dx-element-shadow: none;
}
.btn-3d-primary {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-primary);
    --dx-btn-border-color: var(--dx-primary);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-primary-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-primary-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-primary-text-emphasis);
    --dx-btn-active-border-color: var(--dx-primary-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-primary-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-primary-text-emphasis);
    --dx-btn-shadow-color: var(--dx-primary-text-emphasis);
}
.navigation-primary a:is(:hover, .active) {
    color: var(--dx-primary);
}
.navigation-primary.navigation-bottom-animation a:is(:hover, .active):before {
    background-color: var(--dx-primary);
}
.navigation-primary.navigation-border-animation a:before {
    background-color: var(--dx-primary);
}
.btn-secondary {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-secondary);
    --dx-btn-border-color: var(--dx-secondary);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-secondary-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-secondary-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-secondary-text-emphasis);
    --dx-btn-active-border-color: var(--dx-secondary-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-secondary-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-secondary-text-emphasis);
}
[data-theme="material"] .btn-secondary {
    box-shadow: var(--dx-box-shadow);
}
.btn-outline-secondary {
    --dx-btn-color: var(--dx-secondary);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-secondary);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-secondary-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-secondary-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-secondary-text-emphasis);
    --dx-btn-active-border-color: var(--dx-secondary-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-secondary-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-secondary-text-emphasis);
}
.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);
}
[data-theme="material"] .btn-outline-secondary {
    box-shadow: var(--dx-box-shadow);
}
.btn-sub-secondary {
    --dx-btn-color: var(--dx-secondary);
    --dx-btn-bg: var(--dx-secondary-bg-subtle);
    --dx-btn-border-color: transparent;
    --dx-btn-hover-color: var(--dx-secondary);
    --dx-btn-hover-bg: var(--dx-secondary-border-subtle);
    --dx-btn-hover-border-color: transparent;
    --dx-btn-active-color: var(--dx-secondary);
    --dx-btn-active-bg: var(--dx-secondary-border-subtle);
    --dx-btn-active-border-color: transparent;
    --dx-btn-disabled-color: var(--dx-secondary);
    --dx-btn-disabled-bg: var(--dx-secondary-border-subtle);
    --dx-btn-disabled-border-color: transparent;
}
.btn-dashed-secondary {
    --dx-btn-color: var(--dx-secondary);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-secondary);
    --dx-btn-hover-color: var(--dx-secondary);
    --dx-btn-hover-bg: var(--dx-secondary-bg-subtle);
    --dx-btn-hover-border-color: var(--dx-secondary);
    --dx-btn-active-color: var(--dx-secondary);
    --dx-btn-active-bg: var(--dx-secondary-bg-subtle);
    --dx-btn-active-border-color: var(--dx-secondary);
    --dx-btn-disabled-color: var(--dx-secondary);
    --dx-btn-disabled-bg: var(--dx-secondary-bg-subtle);
    --dx-btn-disabled-border-color: var(--dx-secondary);
}
.btn-active-secondary {
    --dx-btn-color: var(--dx-secondary);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: transparent;
    --dx-btn-hover-color: var(--dx-secondary);
    --dx-btn-hover-bg: var(--dx-secondary-bg-subtle);
    --dx-btn-hover-border-color: transparent;
    --dx-btn-active-color: var(--dx-secondary);
    --dx-btn-active-bg: var(--dx-secondary-bg-subtle);
    --dx-btn-active-border-color: transparent;
    --dx-btn-disabled-color: var(--dx-secondary);
    --dx-btn-disabled-bg: var(--dx-secondary-bg-subtle);
    --dx-btn-disabled-border-color: transparent;
    --dx-element-shadow: none;
}
.btn-3d-secondary {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-secondary);
    --dx-btn-border-color: var(--dx-secondary);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-secondary-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-secondary-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-secondary-text-emphasis);
    --dx-btn-active-border-color: var(--dx-secondary-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-secondary-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-secondary-text-emphasis);
    --dx-btn-shadow-color: var(--dx-secondary-text-emphasis);
}
.navigation-secondary a:is(:hover, .active) {
    color: var(--dx-secondary);
}
.navigation-secondary.navigation-bottom-animation a:is(:hover, .active):before {
    background-color: var(--dx-secondary);
}
.navigation-secondary.navigation-border-animation a:before {
    background-color: var(--dx-secondary);
}
.btn-success {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-success);
    --dx-btn-border-color: var(--dx-success);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-success-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-success-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-success-text-emphasis);
    --dx-btn-active-border-color: var(--dx-success-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-success-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-success-text-emphasis);
}
[data-theme="material"] .btn-success {
    box-shadow: var(--dx-box-shadow);
}
.btn-outline-success {
    --dx-btn-color: var(--dx-success);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-success);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-success-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-success-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-success-text-emphasis);
    --dx-btn-active-border-color: var(--dx-success-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-success-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-success-text-emphasis);
}
.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);
}
[data-theme="material"] .btn-outline-success {
    box-shadow: var(--dx-box-shadow);
}
.btn-sub-success {
    --dx-btn-color: var(--dx-success);
    --dx-btn-bg: var(--dx-success-bg-subtle);
    --dx-btn-border-color: transparent;
    --dx-btn-hover-color: var(--dx-success);
    --dx-btn-hover-bg: var(--dx-success-border-subtle);
    --dx-btn-hover-border-color: transparent;
    --dx-btn-active-color: var(--dx-success);
    --dx-btn-active-bg: var(--dx-success-border-subtle);
    --dx-btn-active-border-color: transparent;
    --dx-btn-disabled-color: var(--dx-success);
    --dx-btn-disabled-bg: var(--dx-success-border-subtle);
    --dx-btn-disabled-border-color: transparent;
}
.btn-dashed-success {
    --dx-btn-color: var(--dx-success);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-success);
    --dx-btn-hover-color: var(--dx-success);
    --dx-btn-hover-bg: var(--dx-success-bg-subtle);
    --dx-btn-hover-border-color: var(--dx-success);
    --dx-btn-active-color: var(--dx-success);
    --dx-btn-active-bg: var(--dx-success-bg-subtle);
    --dx-btn-active-border-color: var(--dx-success);
    --dx-btn-disabled-color: var(--dx-success);
    --dx-btn-disabled-bg: var(--dx-success-bg-subtle);
    --dx-btn-disabled-border-color: var(--dx-success);
}
.btn-active-success {
    --dx-btn-color: var(--dx-success);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: transparent;
    --dx-btn-hover-color: var(--dx-success);
    --dx-btn-hover-bg: var(--dx-success-bg-subtle);
    --dx-btn-hover-border-color: transparent;
    --dx-btn-active-color: var(--dx-success);
    --dx-btn-active-bg: var(--dx-success-bg-subtle);
    --dx-btn-active-border-color: transparent;
    --dx-btn-disabled-color: var(--dx-success);
    --dx-btn-disabled-bg: var(--dx-success-bg-subtle);
    --dx-btn-disabled-border-color: transparent;
    --dx-element-shadow: none;
}
.btn-3d-success {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-success);
    --dx-btn-border-color: var(--dx-success);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-success-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-success-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-success-text-emphasis);
    --dx-btn-active-border-color: var(--dx-success-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-success-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-success-text-emphasis);
    --dx-btn-shadow-color: var(--dx-success-text-emphasis);
}
.navigation-success a:is(:hover, .active) {
    color: var(--dx-success);
}
.navigation-success.navigation-bottom-animation a:is(:hover, .active):before {
    background-color: var(--dx-success);
}
.navigation-success.navigation-border-animation a:before {
    background-color: var(--dx-success);
}
.btn-info {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-info);
    --dx-btn-border-color: var(--dx-info);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-info-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-info-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-info-text-emphasis);
    --dx-btn-active-border-color: var(--dx-info-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-info-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-info-text-emphasis);
}
[data-theme="material"] .btn-info {
    box-shadow: var(--dx-box-shadow);
}
.btn-outline-info {
    --dx-btn-color: var(--dx-info);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-info);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-info-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-info-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-info-text-emphasis);
    --dx-btn-active-border-color: var(--dx-info-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-info-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-info-text-emphasis);
}
.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);
}
[data-theme="material"] .btn-outline-info {
    box-shadow: var(--dx-box-shadow);
}
.btn-sub-info {
    --dx-btn-color: var(--dx-info);
    --dx-btn-bg: var(--dx-info-bg-subtle);
    --dx-btn-border-color: transparent;
    --dx-btn-hover-color: var(--dx-info);
    --dx-btn-hover-bg: var(--dx-info-border-subtle);
    --dx-btn-hover-border-color: transparent;
    --dx-btn-active-color: var(--dx-info);
    --dx-btn-active-bg: var(--dx-info-border-subtle);
    --dx-btn-active-border-color: transparent;
    --dx-btn-disabled-color: var(--dx-info);
    --dx-btn-disabled-bg: var(--dx-info-border-subtle);
    --dx-btn-disabled-border-color: transparent;
}
.btn-dashed-info {
    --dx-btn-color: var(--dx-info);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-info);
    --dx-btn-hover-color: var(--dx-info);
    --dx-btn-hover-bg: var(--dx-info-bg-subtle);
    --dx-btn-hover-border-color: var(--dx-info);
    --dx-btn-active-color: var(--dx-info);
    --dx-btn-active-bg: var(--dx-info-bg-subtle);
    --dx-btn-active-border-color: var(--dx-info);
    --dx-btn-disabled-color: var(--dx-info);
    --dx-btn-disabled-bg: var(--dx-info-bg-subtle);
    --dx-btn-disabled-border-color: var(--dx-info);
}
.btn-active-info {
    --dx-btn-color: var(--dx-info);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: transparent;
    --dx-btn-hover-color: var(--dx-info);
    --dx-btn-hover-bg: var(--dx-info-bg-subtle);
    --dx-btn-hover-border-color: transparent;
    --dx-btn-active-color: var(--dx-info);
    --dx-btn-active-bg: var(--dx-info-bg-subtle);
    --dx-btn-active-border-color: transparent;
    --dx-btn-disabled-color: var(--dx-info);
    --dx-btn-disabled-bg: var(--dx-info-bg-subtle);
    --dx-btn-disabled-border-color: transparent;
    --dx-element-shadow: none;
}
.btn-3d-info {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-info);
    --dx-btn-border-color: var(--dx-info);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-info-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-info-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-info-text-emphasis);
    --dx-btn-active-border-color: var(--dx-info-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-info-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-info-text-emphasis);
    --dx-btn-shadow-color: var(--dx-info-text-emphasis);
}
.navigation-info a:is(:hover, .active) {
    color: var(--dx-info);
}
.navigation-info.navigation-bottom-animation a:is(:hover, .active):before {
    background-color: var(--dx-info);
}
.navigation-info.navigation-border-animation a:before {
    background-color: var(--dx-info);
}
.btn-warning {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-warning);
    --dx-btn-border-color: var(--dx-warning);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-warning-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-warning-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-warning-text-emphasis);
    --dx-btn-active-border-color: var(--dx-warning-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-warning-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-warning-text-emphasis);
}
[data-theme="material"] .btn-warning {
    box-shadow: var(--dx-box-shadow);
}
.btn-outline-warning {
    --dx-btn-color: var(--dx-warning);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-warning);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-warning-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-warning-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-warning-text-emphasis);
    --dx-btn-active-border-color: var(--dx-warning-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-warning-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-warning-text-emphasis);
}
.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);
}
[data-theme="material"] .btn-outline-warning {
    box-shadow: var(--dx-box-shadow);
}
.btn-sub-warning {
    --dx-btn-color: var(--dx-warning);
    --dx-btn-bg: var(--dx-warning-bg-subtle);
    --dx-btn-border-color: transparent;
    --dx-btn-hover-color: var(--dx-warning);
    --dx-btn-hover-bg: var(--dx-warning-border-subtle);
    --dx-btn-hover-border-color: transparent;
    --dx-btn-active-color: var(--dx-warning);
    --dx-btn-active-bg: var(--dx-warning-border-subtle);
    --dx-btn-active-border-color: transparent;
    --dx-btn-disabled-color: var(--dx-warning);
    --dx-btn-disabled-bg: var(--dx-warning-border-subtle);
    --dx-btn-disabled-border-color: transparent;
}
.btn-dashed-warning {
    --dx-btn-color: var(--dx-warning);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-warning);
    --dx-btn-hover-color: var(--dx-warning);
    --dx-btn-hover-bg: var(--dx-warning-bg-subtle);
    --dx-btn-hover-border-color: var(--dx-warning);
    --dx-btn-active-color: var(--dx-warning);
    --dx-btn-active-bg: var(--dx-warning-bg-subtle);
    --dx-btn-active-border-color: var(--dx-warning);
    --dx-btn-disabled-color: var(--dx-warning);
    --dx-btn-disabled-bg: var(--dx-warning-bg-subtle);
    --dx-btn-disabled-border-color: var(--dx-warning);
}
.btn-active-warning {
    --dx-btn-color: var(--dx-warning);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: transparent;
    --dx-btn-hover-color: var(--dx-warning);
    --dx-btn-hover-bg: var(--dx-warning-bg-subtle);
    --dx-btn-hover-border-color: transparent;
    --dx-btn-active-color: var(--dx-warning);
    --dx-btn-active-bg: var(--dx-warning-bg-subtle);
    --dx-btn-active-border-color: transparent;
    --dx-btn-disabled-color: var(--dx-warning);
    --dx-btn-disabled-bg: var(--dx-warning-bg-subtle);
    --dx-btn-disabled-border-color: transparent;
    --dx-element-shadow: none;
}
.btn-3d-warning {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-warning);
    --dx-btn-border-color: var(--dx-warning);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-warning-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-warning-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-warning-text-emphasis);
    --dx-btn-active-border-color: var(--dx-warning-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-warning-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-warning-text-emphasis);
    --dx-btn-shadow-color: var(--dx-warning-text-emphasis);
}
.navigation-warning a:is(:hover, .active) {
    color: var(--dx-warning);
}
.navigation-warning.navigation-bottom-animation a:is(:hover, .active):before {
    background-color: var(--dx-warning);
}
.navigation-warning.navigation-border-animation a:before {
    background-color: var(--dx-warning);
}
.btn-danger {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-danger);
    --dx-btn-border-color: var(--dx-danger);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-danger-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-danger-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-danger-text-emphasis);
    --dx-btn-active-border-color: var(--dx-danger-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-danger-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-danger-text-emphasis);
}
[data-theme="material"] .btn-danger {
    box-shadow: var(--dx-box-shadow);
}
.btn-outline-danger {
    --dx-btn-color: var(--dx-danger);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-danger);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-danger-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-danger-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-danger-text-emphasis);
    --dx-btn-active-border-color: var(--dx-danger-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-danger-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-danger-text-emphasis);
}
.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);
}
[data-theme="material"] .btn-outline-danger {
    box-shadow: var(--dx-box-shadow);
}
.btn-sub-danger {
    --dx-btn-color: var(--dx-danger);
    --dx-btn-bg: var(--dx-danger-bg-subtle);
    --dx-btn-border-color: transparent;
    --dx-btn-hover-color: var(--dx-danger);
    --dx-btn-hover-bg: var(--dx-danger-border-subtle);
    --dx-btn-hover-border-color: transparent;
    --dx-btn-active-color: var(--dx-danger);
    --dx-btn-active-bg: var(--dx-danger-border-subtle);
    --dx-btn-active-border-color: transparent;
    --dx-btn-disabled-color: var(--dx-danger);
    --dx-btn-disabled-bg: var(--dx-danger-border-subtle);
    --dx-btn-disabled-border-color: transparent;
}
.btn-dashed-danger {
    --dx-btn-color: var(--dx-danger);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-danger);
    --dx-btn-hover-color: var(--dx-danger);
    --dx-btn-hover-bg: var(--dx-danger-bg-subtle);
    --dx-btn-hover-border-color: var(--dx-danger);
    --dx-btn-active-color: var(--dx-danger);
    --dx-btn-active-bg: var(--dx-danger-bg-subtle);
    --dx-btn-active-border-color: var(--dx-danger);
    --dx-btn-disabled-color: var(--dx-danger);
    --dx-btn-disabled-bg: var(--dx-danger-bg-subtle);
    --dx-btn-disabled-border-color: var(--dx-danger);
}
.btn-active-danger {
    --dx-btn-color: var(--dx-danger);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: transparent;
    --dx-btn-hover-color: var(--dx-danger);
    --dx-btn-hover-bg: var(--dx-danger-bg-subtle);
    --dx-btn-hover-border-color: transparent;
    --dx-btn-active-color: var(--dx-danger);
    --dx-btn-active-bg: var(--dx-danger-bg-subtle);
    --dx-btn-active-border-color: transparent;
    --dx-btn-disabled-color: var(--dx-danger);
    --dx-btn-disabled-bg: var(--dx-danger-bg-subtle);
    --dx-btn-disabled-border-color: transparent;
    --dx-element-shadow: none;
}
.btn-3d-danger {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-danger);
    --dx-btn-border-color: var(--dx-danger);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-danger-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-danger-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-danger-text-emphasis);
    --dx-btn-active-border-color: var(--dx-danger-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-danger-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-danger-text-emphasis);
    --dx-btn-shadow-color: var(--dx-danger-text-emphasis);
}
.navigation-danger a:is(:hover, .active) {
    color: var(--dx-danger);
}
.navigation-danger.navigation-bottom-animation a:is(:hover, .active):before {
    background-color: var(--dx-danger);
}
.navigation-danger.navigation-border-animation a:before {
    background-color: var(--dx-danger);
}
.btn-light {
    --dx-btn-color: var(--dx-secondary-color);
    --dx-btn-bg: var(--dx-light);
    --dx-btn-border-color: var(--dx-light);
    --dx-btn-hover-color: var(--dx-body-color);
    --dx-btn-hover-bg: var(--dx-tertiary-bg);
    --dx-btn-hover-border-color: var(--dx-tertiary-bg);
    --dx-btn-active-color: var(--dx-body-color);
    --dx-btn-active-bg: var(--dx-tertiary-bg);
    --dx-btn-active-border-color: var(--dx-tertiary-bg);
    --dx-btn-disabled-color: var(--dx-secondary-color);
    --dx-btn-disabled-bg: var(--dx-light);
    --dx-btn-disabled-border-color: var(--dx-light);
}
[data-theme="material"] .btn-light {
    box-shadow: var(--dx-box-shadow);
}
.btn-outline-light {
    --dx-btn-color: var(--dx-secondary-color);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-border-color);
    --dx-btn-hover-color: var(--dx-body-color);
    --dx-btn-hover-bg: var(--dx-tertiary-bg);
    --dx-btn-hover-border-color: var(--dx-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);
}
[data-theme="material"] .btn-outline-light {
    box-shadow: var(--dx-box-shadow);
}
.navigation-light a:is(:hover, .active) {
    color: var(--dx-light);
}
.navigation-light.navigation-bottom-animation a:is(:hover, .active):before {
    background-color: var(--dx-light);
}
.navigation-light.navigation-border-animation a:before {
    background-color: var(--dx-light);
}
.btn-dark {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-dark);
    --dx-btn-border-color: var(--dx-dark);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-dark-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-dark-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-dark-text-emphasis);
    --dx-btn-active-border-color: var(--dx-dark-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-dark-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-dark-text-emphasis);
}
[data-theme="material"] .btn-dark {
    box-shadow: var(--dx-box-shadow);
}
.btn-outline-dark {
    --dx-btn-color: var(--dx-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);
}
[data-theme="material"] .btn-outline-dark {
    box-shadow: var(--dx-box-shadow);
}
.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;
    --dx-element-shadow: none;
}
.btn-3d-dark {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-dark);
    --dx-btn-border-color: var(--dx-dark);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-dark);
    --dx-btn-hover-border-color: var(--dx-dark);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-dark);
    --dx-btn-active-border-color: var(--dx-dark);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-dark);
    --dx-btn-disabled-border-color: var(--dx-dark);
}
.navigation-dark a:is(:hover, .active) {
    color: var(--dx-dark);
}
.navigation-dark.navigation-bottom-animation a:is(:hover, .active):before {
    background-color: var(--dx-dark);
}
.navigation-dark.navigation-border-animation a:before {
    background-color: var(--dx-dark);
}
.btn-pink {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-pink);
    --dx-btn-border-color: var(--dx-pink);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-pink-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-pink-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-pink-text-emphasis);
    --dx-btn-active-border-color: var(--dx-pink-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-pink-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-pink-text-emphasis);
}
[data-theme="material"] .btn-pink {
    box-shadow: var(--dx-box-shadow);
}
.btn-outline-pink {
    --dx-btn-color: var(--dx-pink);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-pink);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-pink-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-pink-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-pink-text-emphasis);
    --dx-btn-active-border-color: var(--dx-pink-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-pink-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-pink-text-emphasis);
}
.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);
}
[data-theme="material"] .btn-outline-pink {
    box-shadow: var(--dx-box-shadow);
}
.btn-sub-pink {
    --dx-btn-color: var(--dx-pink);
    --dx-btn-bg: var(--dx-pink-bg-subtle);
    --dx-btn-border-color: transparent;
    --dx-btn-hover-color: var(--dx-pink);
    --dx-btn-hover-bg: var(--dx-pink-border-subtle);
    --dx-btn-hover-border-color: transparent;
    --dx-btn-active-color: var(--dx-pink);
    --dx-btn-active-bg: var(--dx-pink-border-subtle);
    --dx-btn-active-border-color: transparent;
    --dx-btn-disabled-color: var(--dx-pink);
    --dx-btn-disabled-bg: var(--dx-pink-border-subtle);
    --dx-btn-disabled-border-color: transparent;
}
.btn-dashed-pink {
    --dx-btn-color: var(--dx-pink);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-pink);
    --dx-btn-hover-color: var(--dx-pink);
    --dx-btn-hover-bg: var(--dx-pink-bg-subtle);
    --dx-btn-hover-border-color: var(--dx-pink);
    --dx-btn-active-color: var(--dx-pink);
    --dx-btn-active-bg: var(--dx-pink-bg-subtle);
    --dx-btn-active-border-color: var(--dx-pink);
    --dx-btn-disabled-color: var(--dx-pink);
    --dx-btn-disabled-bg: var(--dx-pink-bg-subtle);
    --dx-btn-disabled-border-color: var(--dx-pink);
}
.btn-active-pink {
    --dx-btn-color: var(--dx-pink);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: transparent;
    --dx-btn-hover-color: var(--dx-pink);
    --dx-btn-hover-bg: var(--dx-pink-bg-subtle);
    --dx-btn-hover-border-color: transparent;
    --dx-btn-active-color: var(--dx-pink);
    --dx-btn-active-bg: var(--dx-pink-bg-subtle);
    --dx-btn-active-border-color: transparent;
    --dx-btn-disabled-color: var(--dx-pink);
    --dx-btn-disabled-bg: var(--dx-pink-bg-subtle);
    --dx-btn-disabled-border-color: transparent;
    --dx-element-shadow: none;
}
.btn-3d-pink {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-pink);
    --dx-btn-border-color: var(--dx-pink);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-pink-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-pink-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-pink-text-emphasis);
    --dx-btn-active-border-color: var(--dx-pink-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-pink-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-pink-text-emphasis);
    --dx-btn-shadow-color: var(--dx-pink-text-emphasis);
}
.navigation-pink a:is(:hover, .active) {
    color: var(--dx-pink);
}
.navigation-pink.navigation-bottom-animation a:is(:hover, .active):before {
    background-color: var(--dx-pink);
}
.navigation-pink.navigation-border-animation a:before {
    background-color: var(--dx-pink);
}
.btn-orange {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-orange);
    --dx-btn-border-color: var(--dx-orange);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-orange-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-orange-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-orange-text-emphasis);
    --dx-btn-active-border-color: var(--dx-orange-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-orange-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-orange-text-emphasis);
}
[data-theme="material"] .btn-orange {
    box-shadow: var(--dx-box-shadow);
}
.btn-outline-orange {
    --dx-btn-color: var(--dx-orange);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-orange);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-orange-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-orange-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-orange-text-emphasis);
    --dx-btn-active-border-color: var(--dx-orange-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-orange-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-orange-text-emphasis);
}
.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);
}
[data-theme="material"] .btn-outline-orange {
    box-shadow: var(--dx-box-shadow);
}
.btn-sub-orange {
    --dx-btn-color: var(--dx-orange);
    --dx-btn-bg: var(--dx-orange-bg-subtle);
    --dx-btn-border-color: transparent;
    --dx-btn-hover-color: var(--dx-orange);
    --dx-btn-hover-bg: var(--dx-orange-border-subtle);
    --dx-btn-hover-border-color: transparent;
    --dx-btn-active-color: var(--dx-orange);
    --dx-btn-active-bg: var(--dx-orange-border-subtle);
    --dx-btn-active-border-color: transparent;
    --dx-btn-disabled-color: var(--dx-orange);
    --dx-btn-disabled-bg: var(--dx-orange-border-subtle);
    --dx-btn-disabled-border-color: transparent;
}
.btn-dashed-orange {
    --dx-btn-color: var(--dx-orange);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-orange);
    --dx-btn-hover-color: var(--dx-orange);
    --dx-btn-hover-bg: var(--dx-orange-bg-subtle);
    --dx-btn-hover-border-color: var(--dx-orange);
    --dx-btn-active-color: var(--dx-orange);
    --dx-btn-active-bg: var(--dx-orange-bg-subtle);
    --dx-btn-active-border-color: var(--dx-orange);
    --dx-btn-disabled-color: var(--dx-orange);
    --dx-btn-disabled-bg: var(--dx-orange-bg-subtle);
    --dx-btn-disabled-border-color: var(--dx-orange);
}
.btn-active-orange {
    --dx-btn-color: var(--dx-orange);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: transparent;
    --dx-btn-hover-color: var(--dx-orange);
    --dx-btn-hover-bg: var(--dx-orange-bg-subtle);
    --dx-btn-hover-border-color: transparent;
    --dx-btn-active-color: var(--dx-orange);
    --dx-btn-active-bg: var(--dx-orange-bg-subtle);
    --dx-btn-active-border-color: transparent;
    --dx-btn-disabled-color: var(--dx-orange);
    --dx-btn-disabled-bg: var(--dx-orange-bg-subtle);
    --dx-btn-disabled-border-color: transparent;
    --dx-element-shadow: none;
}
.btn-3d-orange {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-orange);
    --dx-btn-border-color: var(--dx-orange);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-orange-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-orange-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-orange-text-emphasis);
    --dx-btn-active-border-color: var(--dx-orange-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-orange-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-orange-text-emphasis);
    --dx-btn-shadow-color: var(--dx-orange-text-emphasis);
}
.navigation-orange a:is(:hover, .active) {
    color: var(--dx-orange);
}
.navigation-orange.navigation-bottom-animation a:is(:hover, .active):before {
    background-color: var(--dx-orange);
}
.navigation-orange.navigation-border-animation a:before {
    background-color: var(--dx-orange);
}
.btn-indigo {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-indigo);
    --dx-btn-border-color: var(--dx-indigo);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-indigo-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-indigo-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-indigo-text-emphasis);
    --dx-btn-active-border-color: var(--dx-indigo-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-indigo-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-indigo-text-emphasis);
}
[data-theme="material"] .btn-indigo {
    box-shadow: var(--dx-box-shadow);
}
.btn-outline-indigo {
    --dx-btn-color: var(--dx-indigo);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-indigo);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-indigo-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-indigo-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-indigo-text-emphasis);
    --dx-btn-active-border-color: var(--dx-indigo-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-indigo-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-indigo-text-emphasis);
}
.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);
}
[data-theme="material"] .btn-outline-indigo {
    box-shadow: var(--dx-box-shadow);
}
.btn-sub-indigo {
    --dx-btn-color: var(--dx-indigo);
    --dx-btn-bg: var(--dx-indigo-bg-subtle);
    --dx-btn-border-color: transparent;
    --dx-btn-hover-color: var(--dx-indigo);
    --dx-btn-hover-bg: var(--dx-indigo-border-subtle);
    --dx-btn-hover-border-color: transparent;
    --dx-btn-active-color: var(--dx-indigo);
    --dx-btn-active-bg: var(--dx-indigo-border-subtle);
    --dx-btn-active-border-color: transparent;
    --dx-btn-disabled-color: var(--dx-indigo);
    --dx-btn-disabled-bg: var(--dx-indigo-border-subtle);
    --dx-btn-disabled-border-color: transparent;
}
.btn-dashed-indigo {
    --dx-btn-color: var(--dx-indigo);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: var(--dx-indigo);
    --dx-btn-hover-color: var(--dx-indigo);
    --dx-btn-hover-bg: var(--dx-indigo-bg-subtle);
    --dx-btn-hover-border-color: var(--dx-indigo);
    --dx-btn-active-color: var(--dx-indigo);
    --dx-btn-active-bg: var(--dx-indigo-bg-subtle);
    --dx-btn-active-border-color: var(--dx-indigo);
    --dx-btn-disabled-color: var(--dx-indigo);
    --dx-btn-disabled-bg: var(--dx-indigo-bg-subtle);
    --dx-btn-disabled-border-color: var(--dx-indigo);
}
.btn-active-indigo {
    --dx-btn-color: var(--dx-indigo);
    --dx-btn-bg: transparent;
    --dx-btn-border-color: transparent;
    --dx-btn-hover-color: var(--dx-indigo);
    --dx-btn-hover-bg: var(--dx-indigo-bg-subtle);
    --dx-btn-hover-border-color: transparent;
    --dx-btn-active-color: var(--dx-indigo);
    --dx-btn-active-bg: var(--dx-indigo-bg-subtle);
    --dx-btn-active-border-color: transparent;
    --dx-btn-disabled-color: var(--dx-indigo);
    --dx-btn-disabled-bg: var(--dx-indigo-bg-subtle);
    --dx-btn-disabled-border-color: transparent;
    --dx-element-shadow: none;
}
.btn-3d-indigo {
    --dx-btn-color: var(--dx-white);
    --dx-btn-bg: var(--dx-indigo);
    --dx-btn-border-color: var(--dx-indigo);
    --dx-btn-hover-color: var(--dx-white);
    --dx-btn-hover-bg: var(--dx-indigo-text-emphasis);
    --dx-btn-hover-border-color: var(--dx-indigo-text-emphasis);
    --dx-btn-active-color: var(--dx-white);
    --dx-btn-active-bg: var(--dx-indigo-text-emphasis);
    --dx-btn-active-border-color: var(--dx-indigo-text-emphasis);
    --dx-btn-disabled-color: var(--dx-white);
    --dx-btn-disabled-bg: var(--dx-indigo-text-emphasis);
    --dx-btn-disabled-border-color: var(--dx-indigo-text-emphasis);
    --dx-btn-shadow-color: var(--dx-indigo-text-emphasis);
}
.navigation-indigo a:is(:hover, .active) {
    color: var(--dx-indigo);
}
.navigation-indigo.navigation-bottom-animation a:is(:hover, .active):before {
    background-color: var(--dx-indigo);
}
.navigation-indigo.navigation-border-animation a:before {
    background-color: var(--dx-indigo);
}
.alert-outline-primary {
    --dx-alert-color: var(--dx-primary);
    --dx-alert-bg: var(--dx-secondary-bg);
    --dx-alert-border-color: var(--dx-primary);
    --dx-alert-link-color: var(--dx-primary);
}
.alert-sub-primary {
    --dx-alert-color: var(--dx-primary-text-emphasis);
    --dx-alert-bg: var(--dx-primary-bg-subtle);
    --dx-alert-link-color: var(--dx-primary);
}
.alert-solid-primary {
    --dx-alert-color: #fff;
    --dx-alert-bg: var(--dx-primary);
    --dx-alert-border-color: var(--dx-primary);
    --dx-alert-link-color: var(--dx-primary-bg-subtle);
}
.icon-alert-primary {
    border-top: 4px solid var(--dx-primary) !important;
}
.icon-alert-primary .icon {
    border: 1px solid var(--dx-primary-bg-subtle);
}
.alert-outline-secondary {
    --dx-alert-color: var(--dx-secondary);
    --dx-alert-bg: var(--dx-secondary-bg);
    --dx-alert-border-color: var(--dx-secondary);
    --dx-alert-link-color: var(--dx-secondary);
}
.alert-sub-secondary {
    --dx-alert-color: var(--dx-secondary-text-emphasis);
    --dx-alert-bg: var(--dx-secondary-bg-subtle);
    --dx-alert-link-color: var(--dx-secondary);
}
.alert-solid-secondary {
    --dx-alert-color: #fff;
    --dx-alert-bg: var(--dx-secondary);
    --dx-alert-border-color: var(--dx-secondary);
    --dx-alert-link-color: var(--dx-secondary-bg-subtle);
}
.icon-alert-secondary {
    border-top: 4px solid var(--dx-secondary) !important;
}
.icon-alert-secondary .icon {
    border: 1px solid var(--dx-secondary-bg-subtle);
}
.alert-outline-success {
    --dx-alert-color: var(--dx-success);
    --dx-alert-bg: var(--dx-secondary-bg);
    --dx-alert-border-color: var(--dx-success);
    --dx-alert-link-color: var(--dx-success);
}
.alert-sub-success {
    --dx-alert-color: var(--dx-success-text-emphasis);
    --dx-alert-bg: var(--dx-success-bg-subtle);
    --dx-alert-link-color: var(--dx-success);
}
.alert-solid-success {
    --dx-alert-color: #fff;
    --dx-alert-bg: var(--dx-success);
    --dx-alert-border-color: var(--dx-success);
    --dx-alert-link-color: var(--dx-success-bg-subtle);
}
.icon-alert-success {
    border-top: 4px solid var(--dx-success) !important;
}
.icon-alert-success .icon {
    border: 1px solid var(--dx-success-bg-subtle);
}
.alert-outline-info {
    --dx-alert-color: var(--dx-info);
    --dx-alert-bg: var(--dx-secondary-bg);
    --dx-alert-border-color: var(--dx-info);
    --dx-alert-link-color: var(--dx-info);
}
.alert-sub-info {
    --dx-alert-color: var(--dx-info-text-emphasis);
    --dx-alert-bg: var(--dx-info-bg-subtle);
    --dx-alert-link-color: var(--dx-info);
}
.alert-solid-info {
    --dx-alert-color: #fff;
    --dx-alert-bg: var(--dx-info);
    --dx-alert-border-color: var(--dx-info);
    --dx-alert-link-color: var(--dx-info-bg-subtle);
}
.icon-alert-info {
    border-top: 4px solid var(--dx-info) !important;
}
.icon-alert-info .icon {
    border: 1px solid var(--dx-info-bg-subtle);
}
.alert-outline-warning {
    --dx-alert-color: var(--dx-warning);
    --dx-alert-bg: var(--dx-secondary-bg);
    --dx-alert-border-color: var(--dx-warning);
    --dx-alert-link-color: var(--dx-warning);
}
.alert-sub-warning {
    --dx-alert-color: var(--dx-warning-text-emphasis);
    --dx-alert-bg: var(--dx-warning-bg-subtle);
    --dx-alert-link-color: var(--dx-warning);
}
.alert-solid-warning {
    --dx-alert-color: #020617;
    --dx-alert-bg: var(--dx-warning);
    --dx-alert-border-color: var(--dx-warning);
    --dx-alert-link-color: var(--dx-warning-bg-subtle);
}
.icon-alert-warning {
    border-top: 4px solid var(--dx-warning) !important;
}
.icon-alert-warning .icon {
    border: 1px solid var(--dx-warning-bg-subtle);
}
.alert-outline-danger {
    --dx-alert-color: var(--dx-danger);
    --dx-alert-bg: var(--dx-secondary-bg);
    --dx-alert-border-color: var(--dx-danger);
    --dx-alert-link-color: var(--dx-danger);
}
.alert-sub-danger {
    --dx-alert-color: var(--dx-danger-text-emphasis);
    --dx-alert-bg: var(--dx-danger-bg-subtle);
    --dx-alert-link-color: var(--dx-danger);
}
.alert-solid-danger {
    --dx-alert-color: #fff;
    --dx-alert-bg: var(--dx-danger);
    --dx-alert-border-color: var(--dx-danger);
    --dx-alert-link-color: var(--dx-danger-bg-subtle);
}
.icon-alert-danger {
    border-top: 4px solid var(--dx-danger) !important;
}
.icon-alert-danger .icon {
    border: 1px solid var(--dx-danger-bg-subtle);
}
.icon-alert-light {
    border-top: 4px solid var(--dx-light) !important;
}
.icon-alert-light .icon {
    border: 1px solid var(--dx-light-bg-subtle);
}
.alert-outline-dark {
    --dx-alert-color: var(--dx-dark);
    --dx-alert-bg: var(--dx-secondary-bg);
    --dx-alert-border-color: var(--dx-border-color);
    --dx-alert-link-color: var(--dx-dark);
}
.alert-sub-dark {
    --dx-alert-color: var(--dx-secondary-color);
    --dx-alert-bg: var(--dx-tertiary-bg);
    --dx-alert-link-color: var(--dx-dark);
}
.alert-solid-dark {
    --dx-alert-color: #fff;
    --dx-alert-bg: var(--dx-dark);
    --dx-alert-border-color: var(--dx-dark);
    --dx-alert-link-color: var(--dx-dark-bg-subtle);
}
.icon-alert-dark {
    border-top: 4px solid var(--dx-dark) !important;
}
.icon-alert-dark .icon {
    border: 1px solid var(--dx-dark-bg-subtle);
}
.alert-outline-pink {
    --dx-alert-color: var(--dx-pink);
    --dx-alert-bg: var(--dx-secondary-bg);
    --dx-alert-border-color: var(--dx-pink);
    --dx-alert-link-color: var(--dx-pink);
}
.alert-sub-pink {
    --dx-alert-color: var(--dx-pink-text-emphasis);
    --dx-alert-bg: var(--dx-pink-bg-subtle);
    --dx-alert-link-color: var(--dx-pink);
}
.alert-solid-pink {
    --dx-alert-color: #fff;
    --dx-alert-bg: var(--dx-pink);
    --dx-alert-border-color: var(--dx-pink);
    --dx-alert-link-color: var(--dx-pink-bg-subtle);
}
.icon-alert-pink {
    border-top: 4px solid var(--dx-pink) !important;
}
.icon-alert-pink .icon {
    border: 1px solid var(--dx-pink-bg-subtle);
}
.alert-outline-orange {
    --dx-alert-color: var(--dx-orange);
    --dx-alert-bg: var(--dx-secondary-bg);
    --dx-alert-border-color: var(--dx-orange);
    --dx-alert-link-color: var(--dx-orange);
}
.alert-sub-orange {
    --dx-alert-color: var(--dx-orange-text-emphasis);
    --dx-alert-bg: var(--dx-orange-bg-subtle);
    --dx-alert-link-color: var(--dx-orange);
}
.alert-solid-orange {
    --dx-alert-color: #fff;
    --dx-alert-bg: var(--dx-orange);
    --dx-alert-border-color: var(--dx-orange);
    --dx-alert-link-color: var(--dx-orange-bg-subtle);
}
.icon-alert-orange {
    border-top: 4px solid var(--dx-orange) !important;
}
.icon-alert-orange .icon {
    border: 1px solid var(--dx-orange-bg-subtle);
}
.alert-outline-indigo {
    --dx-alert-color: var(--dx-indigo);
    --dx-alert-bg: var(--dx-secondary-bg);
    --dx-alert-border-color: var(--dx-indigo);
    --dx-alert-link-color: var(--dx-indigo);
}
.alert-sub-indigo {
    --dx-alert-color: var(--dx-indigo-text-emphasis);
    --dx-alert-bg: var(--dx-indigo-bg-subtle);
    --dx-alert-link-color: var(--dx-indigo);
}
.alert-solid-indigo {
    --dx-alert-color: #fff;
    --dx-alert-bg: var(--dx-indigo);
    --dx-alert-border-color: var(--dx-indigo);
    --dx-alert-link-color: var(--dx-indigo-bg-subtle);
}
.icon-alert-indigo {
    border-top: 4px solid var(--dx-indigo) !important;
}
.icon-alert-indigo .icon {
    border: 1px solid var(--dx-indigo-bg-subtle);
}
.card-border-primary {
    --dx-card-border-color: var(--dx-primary-border-subtle);
    box-shadow:
        0 10px 15px -3px var(--dx-primary-bg-subtle),
        0 4px 6px -4px var(--dx-primary-bg-subtle);
    --dx-link-color-rgb: var(--dx-primary-rgb);
    --prefixlink-hover-color-rgb: var(--dx-primary-rgb);
}
.card-primary {
    --dx-link-color-rgb: var(--dx-primary-rgb);
}
.card-primary .icon-bg {
    background-color: var(--dx-primary);
    color: #fff;
}
.card-primary:hover {
    --dx-card-border-color: var(--dx-primary-border-subtle);
    color: #fff;
    --dx-link-color-rgb: #fff;
}
.card-primary:hover .icon-bg {
    background-color: hsla(0, 0%, 100%, 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: hsla(0, 0%, 100%, 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: hsla(0, 0%, 100%, 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: hsla(0, 0%, 100%, 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: #020617;
}
.card-warning:hover {
    --dx-card-border-color: var(--dx-warning-border-subtle);
    color: #020617;
    --dx-link-color-rgb: #020617;
}
.card-warning:hover .icon-bg {
    background-color: hsla(0, 0%, 100%, 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: hsla(0, 0%, 100%, 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: hsla(0, 0%, 100%, 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: hsla(0, 0%, 100%, 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: hsla(0, 0%, 100%, 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: hsla(0, 0%, 100%, 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: hsla(0, 0%, 100%, 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-sub-primary {
    --dx-nav-pills-link-active-bg: var(--dx-primary-bg-subtle);
    --dx-nav-pills-link-active-color: var(--dx-primary);
    --dx-nav-underline-link-active-color: var(--dx-primary);
    --dx-nav-link-hover-color: var(--dx-primary);
}
.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-sub-secondary {
    --dx-nav-pills-link-active-bg: var(--dx-secondary-bg-subtle);
    --dx-nav-pills-link-active-color: var(--dx-secondary);
    --dx-nav-underline-link-active-color: var(--dx-secondary);
    --dx-nav-link-hover-color: var(--dx-secondary);
}
.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-sub-success {
    --dx-nav-pills-link-active-bg: var(--dx-success-bg-subtle);
    --dx-nav-pills-link-active-color: var(--dx-success);
    --dx-nav-underline-link-active-color: var(--dx-success);
    --dx-nav-link-hover-color: var(--dx-success);
}
.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-sub-info {
    --dx-nav-pills-link-active-bg: var(--dx-info-bg-subtle);
    --dx-nav-pills-link-active-color: var(--dx-info);
    --dx-nav-underline-link-active-color: var(--dx-info);
    --dx-nav-link-hover-color: var(--dx-info);
}
.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-sub-warning {
    --dx-nav-pills-link-active-bg: var(--dx-warning-bg-subtle);
    --dx-nav-pills-link-active-color: var(--dx-warning);
    --dx-nav-underline-link-active-color: var(--dx-warning);
    --dx-nav-link-hover-color: var(--dx-warning);
}
.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-sub-danger {
    --dx-nav-pills-link-active-bg: var(--dx-danger-bg-subtle);
    --dx-nav-pills-link-active-color: var(--dx-danger);
    --dx-nav-underline-link-active-color: var(--dx-danger);
    --dx-nav-link-hover-color: var(--dx-danger);
}
.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-sub-light {
    --dx-nav-pills-link-active-bg: var(--dx-light-bg-subtle);
    --dx-nav-pills-link-active-color: var(--dx-light);
    --dx-nav-underline-link-active-color: var(--dx-light);
    --dx-nav-link-hover-color: var(--dx-light);
    --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-sub-dark {
    --dx-nav-pills-link-active-bg: var(--dx-dark-bg-subtle);
    --dx-nav-pills-link-active-color: var(--dx-dark);
    --dx-nav-underline-link-active-color: var(--dx-dark);
    --dx-nav-link-hover-color: var(--dx-dark);
}
.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-sub-pink {
    --dx-nav-pills-link-active-bg: var(--dx-pink-bg-subtle);
    --dx-nav-pills-link-active-color: var(--dx-pink);
    --dx-nav-underline-link-active-color: var(--dx-pink);
    --dx-nav-link-hover-color: var(--dx-pink);
}
.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-sub-orange {
    --dx-nav-pills-link-active-bg: var(--dx-orange-bg-subtle);
    --dx-nav-pills-link-active-color: var(--dx-orange);
    --dx-nav-underline-link-active-color: var(--dx-orange);
    --dx-nav-link-hover-color: var(--dx-orange);
}
.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;
}
.nav-sub-indigo {
    --dx-nav-pills-link-active-bg: var(--dx-indigo-bg-subtle);
    --dx-nav-pills-link-active-color: var(--dx-indigo);
    --dx-nav-underline-link-active-color: var(--dx-indigo);
    --dx-nav-link-hover-color: var(--dx-indigo);
}
.pagination-primary {
    --dx-pagination-hover-color: var(--dx-primary);
    --dx-pagination-active-bg: var(--dx-primary);
    --dx-pagination-active-border-color: var(--dx-primary);
    --dx-pagination-focus-color: var(--dx-primary);
}
.pagination-solid-primary .page-link {
    background-color: var(--dx-primary);
}
.pagination-secondary {
    --dx-pagination-hover-color: var(--dx-secondary);
    --dx-pagination-active-bg: var(--dx-secondary);
    --dx-pagination-active-border-color: var(--dx-secondary);
    --dx-pagination-focus-color: var(--dx-secondary);
}
.pagination-solid-secondary .page-link {
    background-color: var(--dx-secondary);
}
.pagination-success {
    --dx-pagination-hover-color: var(--dx-success);
    --dx-pagination-active-bg: var(--dx-success);
    --dx-pagination-active-border-color: var(--dx-success);
    --dx-pagination-focus-color: var(--dx-success);
}
.pagination-solid-success .page-link {
    background-color: var(--dx-success);
}
.pagination-info {
    --dx-pagination-hover-color: var(--dx-info);
    --dx-pagination-active-bg: var(--dx-info);
    --dx-pagination-active-border-color: var(--dx-info);
    --dx-pagination-focus-color: var(--dx-info);
}
.pagination-solid-info .page-link {
    background-color: var(--dx-info);
}
.pagination-warning {
    --dx-pagination-hover-color: var(--dx-warning);
    --dx-pagination-active-bg: var(--dx-warning);
    --dx-pagination-active-border-color: var(--dx-warning);
    --dx-pagination-focus-color: var(--dx-warning);
}
.pagination-solid-warning .page-link {
    background-color: var(--dx-warning);
}
.pagination-danger {
    --dx-pagination-hover-color: var(--dx-danger);
    --dx-pagination-active-bg: var(--dx-danger);
    --dx-pagination-active-border-color: var(--dx-danger);
    --dx-pagination-focus-color: var(--dx-danger);
}
.pagination-solid-danger .page-link {
    background-color: var(--dx-danger);
}
.pagination-light {
    --dx-pagination-hover-color: var(--dx-light);
    --dx-pagination-active-bg: var(--dx-light);
    --dx-pagination-active-border-color: var(--dx-light);
    --dx-pagination-focus-color: var(--dx-light);
}
.pagination-solid-light .page-link {
    background-color: var(--dx-light);
}
.pagination-dark {
    --dx-pagination-hover-color: var(--dx-dark);
    --dx-pagination-active-bg: var(--dx-dark);
    --dx-pagination-active-border-color: var(--dx-dark);
    --dx-pagination-focus-color: var(--dx-dark);
}
.pagination-solid-dark .page-link {
    background-color: var(--dx-dark);
}
.pagination-pink {
    --dx-pagination-hover-color: var(--dx-pink);
    --dx-pagination-active-bg: var(--dx-pink);
    --dx-pagination-active-border-color: var(--dx-pink);
    --dx-pagination-focus-color: var(--dx-pink);
}
.pagination-solid-pink .page-link {
    background-color: var(--dx-pink);
}
.pagination-orange {
    --dx-pagination-hover-color: var(--dx-orange);
    --dx-pagination-active-bg: var(--dx-orange);
    --dx-pagination-active-border-color: var(--dx-orange);
    --dx-pagination-focus-color: var(--dx-orange);
}
.pagination-solid-orange .page-link {
    background-color: var(--dx-orange);
}
.pagination-indigo {
    --dx-pagination-hover-color: var(--dx-indigo);
    --dx-pagination-active-bg: var(--dx-indigo);
    --dx-pagination-active-border-color: var(--dx-indigo);
    --dx-pagination-focus-color: var(--dx-indigo);
}
.pagination-solid-indigo .page-link {
    background-color: var(--dx-indigo);
}
.tooltip-primary {
    --dx-tooltip-bg: var(--dx-primary);
    --dx-tooltip-color: var(--dx-white);
}
.tooltip-secondary {
    --dx-tooltip-bg: var(--dx-secondary);
    --dx-tooltip-color: var(--dx-white);
}
.tooltip-success {
    --dx-tooltip-bg: var(--dx-success);
    --dx-tooltip-color: var(--dx-white);
}
.tooltip-info {
    --dx-tooltip-bg: var(--dx-info);
    --dx-tooltip-color: var(--dx-white);
}
.tooltip-warning {
    --dx-tooltip-bg: var(--dx-warning);
    --dx-tooltip-color: var(--dx-white);
}
.tooltip-danger {
    --dx-tooltip-bg: var(--dx-danger);
    --dx-tooltip-color: var(--dx-white);
}
.tooltip-light {
    --dx-tooltip-bg: var(--dx-light);
    --dx-tooltip-color: var(--dx-white);
    --dx-tooltip-color: #000;
}
.tooltip-dark {
    --dx-tooltip-bg: var(--dx-dark);
    --dx-tooltip-color: var(--dx-white);
}
.tooltip-pink {
    --dx-tooltip-bg: var(--dx-pink);
    --dx-tooltip-color: var(--dx-white);
}
.tooltip-orange {
    --dx-tooltip-bg: var(--dx-orange);
    --dx-tooltip-color: var(--dx-white);
}
.tooltip-indigo {
    --dx-tooltip-bg: var(--dx-indigo);
    --dx-tooltip-color: var(--dx-white);
}
.link-primary {
    color: var(--dx-primary) !important;
}
.link-primary:hover {
    color: var(--dx-primary-text-emphasis) !important;
}
.link-custom-primary {
    color: var(--dx-secondary-color) !important;
}
.link-custom-primary:hover {
    color: var(--dx-primary) !important;
}
.link-secondary {
    color: var(--dx-secondary) !important;
}
.link-secondary:hover {
    color: var(--dx-secondary-text-emphasis) !important;
}
.link-custom-secondary {
    color: var(--dx-secondary-color) !important;
}
.link-custom-secondary:hover {
    color: var(--dx-secondary) !important;
}
.link-success {
    color: var(--dx-success) !important;
}
.link-success:hover {
    color: var(--dx-success-text-emphasis) !important;
}
.link-custom-success {
    color: var(--dx-secondary-color) !important;
}
.link-custom-success:hover {
    color: var(--dx-success) !important;
}
.link-info {
    color: var(--dx-info) !important;
}
.link-info:hover {
    color: var(--dx-info-text-emphasis) !important;
}
.link-custom-info {
    color: var(--dx-secondary-color) !important;
}
.link-custom-info:hover {
    color: var(--dx-info) !important;
}
.link-warning {
    color: var(--dx-warning) !important;
}
.link-warning:hover {
    color: var(--dx-warning-text-emphasis) !important;
}
.link-custom-warning {
    color: var(--dx-secondary-color) !important;
}
.link-custom-warning:hover {
    color: var(--dx-warning) !important;
}
.link-danger {
    color: var(--dx-danger) !important;
}
.link-danger:hover {
    color: var(--dx-danger-text-emphasis) !important;
}
.link-custom-danger {
    color: var(--dx-secondary-color) !important;
}
.link-custom-danger:hover {
    color: var(--dx-danger) !important;
}
.link-light {
    color: var(--dx-light) !important;
}
.link-light:hover {
    color: var(--dx-light-text-emphasis) !important;
}
.link-custom-light {
    color: var(--dx-secondary-color) !important;
}
.link-custom-light:hover {
    color: var(--dx-light) !important;
}
.link-dark {
    color: var(--dx-dark) !important;
}
.link-dark:hover {
    color: var(--dx-dark-text-emphasis) !important;
}
.link-custom-dark {
    color: var(--dx-secondary-color) !important;
}
.link-custom-dark:hover {
    color: var(--dx-dark) !important;
}
.link-pink {
    color: var(--dx-pink) !important;
}
.link-pink:hover {
    color: var(--dx-pink-text-emphasis) !important;
}
.link-custom-pink {
    color: var(--dx-secondary-color) !important;
}
.link-custom-pink:hover {
    color: var(--dx-pink) !important;
}
.link-orange {
    color: var(--dx-orange) !important;
}
.link-orange:hover {
    color: var(--dx-orange-text-emphasis) !important;
}
.link-custom-orange {
    color: var(--dx-secondary-color) !important;
}
.link-custom-orange:hover {
    color: var(--dx-orange) !important;
}
.link-indigo {
    color: var(--dx-indigo) !important;
}
.link-indigo:hover {
    color: var(--dx-indigo-text-emphasis) !important;
}
.link-custom-indigo {
    color: var(--dx-secondary-color) !important;
}
.link-custom-indigo:hover {
    color: var(--dx-indigo) !important;
}
.switch-outline-primary input:checked + label:after,
.switch-soft-primary input:checked + label:after {
    background-color: var(--dx-primary);
}
.switch-light-primary input:checked + label {
    background: var(--dx-primary-bg-subtle);
    border: 1px solid var(--dx-primary-bg-subtle);
}
.switch-light-primary input:checked + label:after {
    background-color: var(--dx-primary);
}
.switch-solid-primary input:checked + label {
    background: var(--dx-primary);
    border: 1px solid var(--dx-primary);
}
.switch-effect-primary input:checked + label:after {
    background-color: var(--dx-primary);
}
.switch-outline-secondary input:checked + label:after,
.switch-soft-secondary input:checked + label:after {
    background-color: var(--dx-secondary);
}
.switch-light-secondary input:checked + label {
    background: var(--dx-secondary-bg-subtle);
    border: 1px solid var(--dx-secondary-bg-subtle);
}
.switch-light-secondary input:checked + label:after {
    background-color: var(--dx-secondary);
}
.switch-solid-secondary input:checked + label {
    background: var(--dx-secondary);
    border: 1px solid var(--dx-secondary);
}
.switch-effect-secondary input:checked + label:after {
    background-color: var(--dx-secondary);
}
.switch-outline-success input:checked + label:after,
.switch-soft-success input:checked + label:after {
    background-color: var(--dx-success);
}
.switch-light-success input:checked + label {
    background: var(--dx-success-bg-subtle);
    border: 1px solid var(--dx-success-bg-subtle);
}
.switch-light-success input:checked + label:after {
    background-color: var(--dx-success);
}
.switch-solid-success input:checked + label {
    background: var(--dx-success);
    border: 1px solid var(--dx-success);
}
.switch-effect-success input:checked + label:after {
    background-color: var(--dx-success);
}
.switch-outline-info input:checked + label:after,
.switch-soft-info input:checked + label:after {
    background-color: var(--dx-info);
}
.switch-light-info input:checked + label {
    background: var(--dx-info-bg-subtle);
    border: 1px solid var(--dx-info-bg-subtle);
}
.switch-light-info input:checked + label:after {
    background-color: var(--dx-info);
}
.switch-solid-info input:checked + label {
    background: var(--dx-info);
    border: 1px solid var(--dx-info);
}
.switch-effect-info input:checked + label:after {
    background-color: var(--dx-info);
}
.switch-outline-warning input:checked + label:after,
.switch-soft-warning input:checked + label:after {
    background-color: var(--dx-warning);
}
.switch-light-warning input:checked + label {
    background: var(--dx-warning-bg-subtle);
    border: 1px solid var(--dx-warning-bg-subtle);
}
.switch-light-warning input:checked + label:after {
    background-color: var(--dx-warning);
}
.switch-solid-warning input:checked + label {
    background: var(--dx-warning);
    border: 1px solid var(--dx-warning);
}
.switch-effect-warning input:checked + label:after {
    background-color: var(--dx-warning);
}
.switch-outline-danger input:checked + label:after,
.switch-soft-danger input:checked + label:after {
    background-color: var(--dx-danger);
}
.switch-light-danger input:checked + label {
    background: var(--dx-danger-bg-subtle);
    border: 1px solid var(--dx-danger-bg-subtle);
}
.switch-light-danger input:checked + label:after {
    background-color: var(--dx-danger);
}
.switch-solid-danger input:checked + label {
    background: var(--dx-danger);
    border: 1px solid var(--dx-danger);
}
.switch-effect-danger input:checked + label:after {
    background-color: var(--dx-danger);
}
.switch-outline-light input:checked + label:after,
.switch-soft-light input:checked + label:after {
    background-color: var(--dx-light);
}
.switch-light-light input:checked + label {
    background: var(--dx-light-bg-subtle);
    border: 1px solid var(--dx-light-bg-subtle);
}
.switch-light-light input:checked + label:after {
    background-color: var(--dx-light);
}
.switch-solid-light input:checked + label {
    background: var(--dx-light);
    border: 1px solid var(--dx-light);
}
.switch-effect-light input:checked + label:after {
    background-color: var(--dx-light);
}
.switch-outline-dark input:checked + label:after,
.switch-soft-dark input:checked + label:after {
    background-color: var(--dx-dark);
}
.switch-light-dark input:checked + label {
    background: var(--dx-dark-bg-subtle);
    border: 1px solid var(--dx-dark-bg-subtle);
}
.switch-light-dark input:checked + label:after {
    background-color: var(--dx-dark);
}
.switch-solid-dark input:checked + label {
    background: var(--dx-dark);
    border: 1px solid var(--dx-dark);
}
.switch-effect-dark input:checked + label:after {
    background-color: var(--dx-dark);
}
.switch-outline-pink input:checked + label:after,
.switch-soft-pink input:checked + label:after {
    background-color: var(--dx-pink);
}
.switch-light-pink input:checked + label {
    background: var(--dx-pink-bg-subtle);
    border: 1px solid var(--dx-pink-bg-subtle);
}
.switch-light-pink input:checked + label:after {
    background-color: var(--dx-pink);
}
.switch-solid-pink input:checked + label {
    background: var(--dx-pink);
    border: 1px solid var(--dx-pink);
}
.switch-effect-pink input:checked + label:after {
    background-color: var(--dx-pink);
}
.switch-outline-orange input:checked + label:after,
.switch-soft-orange input:checked + label:after {
    background-color: var(--dx-orange);
}
.switch-light-orange input:checked + label {
    background: var(--dx-orange-bg-subtle);
    border: 1px solid var(--dx-orange-bg-subtle);
}
.switch-light-orange input:checked + label:after {
    background-color: var(--dx-orange);
}
.switch-solid-orange input:checked + label {
    background: var(--dx-orange);
    border: 1px solid var(--dx-orange);
}
.switch-effect-orange input:checked + label:after {
    background-color: var(--dx-orange);
}
.switch-outline-indigo input:checked + label:after,
.switch-soft-indigo input:checked + label:after {
    background-color: var(--dx-indigo);
}
.switch-light-indigo input:checked + label {
    background: var(--dx-indigo-bg-subtle);
    border: 1px solid var(--dx-indigo-bg-subtle);
}
.switch-light-indigo input:checked + label:after {
    background-color: var(--dx-indigo);
}
.switch-solid-indigo input:checked + label {
    background: var(--dx-indigo);
    border: 1px solid var(--dx-indigo);
}
.switch-effect-indigo input:checked + label:after {
    background-color: var(--dx-indigo);
}
.check-primary .form-check-input:checked {
    background-color: var(--dx-primary);
    border-color: var(--dx-primary);
}
.check-soft-primary .form-check-input {
    --dx-border-color: rgba(var(--dx-primary-rgb), 0.2);
    --dx-form-check-bg: var(--dx-primary-bg-subtle);
}
.check-soft-primary .form-check-input:checked,
.radio-primary .form-check-input:checked {
    background-color: var(--dx-primary);
    border-color: var(--dx-primary);
}
.radio-soft-primary .form-check-input {
    --dx-border-color: rgba(var(--dx-primary-rgb), 0.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), 0.2);
    --dx-form-check-bg: var(--dx-secondary-bg-subtle);
}
.check-soft-secondary .form-check-input:checked,
.radio-secondary .form-check-input:checked {
    background-color: var(--dx-secondary);
    border-color: var(--dx-secondary);
}
.radio-soft-secondary .form-check-input {
    --dx-border-color: rgba(var(--dx-secondary-rgb), 0.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), 0.2);
    --dx-form-check-bg: var(--dx-success-bg-subtle);
}
.check-soft-success .form-check-input:checked,
.radio-success .form-check-input:checked {
    background-color: var(--dx-success);
    border-color: var(--dx-success);
}
.radio-soft-success .form-check-input {
    --dx-border-color: rgba(var(--dx-success-rgb), 0.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), 0.2);
    --dx-form-check-bg: var(--dx-info-bg-subtle);
}
.check-soft-info .form-check-input:checked,
.radio-info .form-check-input:checked {
    background-color: var(--dx-info);
    border-color: var(--dx-info);
}
.radio-soft-info .form-check-input {
    --dx-border-color: rgba(var(--dx-info-rgb), 0.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), 0.2);
    --dx-form-check-bg: var(--dx-warning-bg-subtle);
}
.check-soft-warning .form-check-input:checked,
.radio-warning .form-check-input:checked {
    background-color: var(--dx-warning);
    border-color: var(--dx-warning);
}
.radio-soft-warning .form-check-input {
    --dx-border-color: rgba(var(--dx-warning-rgb), 0.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), 0.2);
    --dx-form-check-bg: var(--dx-danger-bg-subtle);
}
.check-soft-danger .form-check-input:checked,
.radio-danger .form-check-input:checked {
    background-color: var(--dx-danger);
    border-color: var(--dx-danger);
}
.radio-soft-danger .form-check-input {
    --dx-border-color: rgba(var(--dx-danger-rgb), 0.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), 0.2);
    --dx-form-check-bg: var(--dx-light-bg-subtle);
}
.check-soft-light .form-check-input:checked,
.radio-light .form-check-input:checked {
    background-color: var(--dx-light);
    border-color: var(--dx-light);
}
.radio-soft-light .form-check-input {
    --dx-border-color: rgba(var(--dx-light-rgb), 0.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), 0.2);
    --dx-form-check-bg: var(--dx-dark-bg-subtle);
}
.check-soft-dark .form-check-input:checked,
.radio-dark .form-check-input:checked {
    background-color: var(--dx-dark);
    border-color: var(--dx-dark);
}
.radio-soft-dark .form-check-input {
    --dx-border-color: rgba(var(--dx-dark-rgb), 0.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), 0.2);
    --dx-form-check-bg: var(--dx-pink-bg-subtle);
}
.check-soft-pink .form-check-input:checked,
.radio-pink .form-check-input:checked {
    background-color: var(--dx-pink);
    border-color: var(--dx-pink);
}
.radio-soft-pink .form-check-input {
    --dx-border-color: rgba(var(--dx-pink-rgb), 0.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), 0.2);
    --dx-form-check-bg: var(--dx-orange-bg-subtle);
}
.check-soft-orange .form-check-input:checked,
.radio-orange .form-check-input:checked {
    background-color: var(--dx-orange);
    border-color: var(--dx-orange);
}
.radio-soft-orange .form-check-input {
    --dx-border-color: rgba(var(--dx-orange-rgb), 0.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), 0.2);
    --dx-form-check-bg: var(--dx-indigo-bg-subtle);
}
.check-soft-indigo .form-check-input:checked,
.radio-indigo .form-check-input:checked {
    background-color: var(--dx-indigo);
    border-color: var(--dx-indigo);
}
.radio-soft-indigo .form-check-input {
    --dx-border-color: rgba(var(--dx-indigo-rgb), 0.2);
    --dx-form-check-bg: var(--dx-indigo-bg-subtle);
}
.radio-soft-indigo .form-check-input:focus {
    box-shadow: none;
}
.radio-soft-indigo .form-check-input:checked {
    background-color: var(--dx-indigo);
    border-color: var(--dx-indigo);
}
.input-spin-primary button:hover svg {
    color: var(--dx-primary);
}
.input-solid-primary .input-spin-minus,
.input-solid-primary .input-spin-plus {
    background-color: var(--dx-primary) !important;
    color: #fff;
}
.input-spin-secondary button:hover svg {
    color: var(--dx-secondary);
}
.input-solid-secondary .input-spin-minus,
.input-solid-secondary .input-spin-plus {
    background-color: var(--dx-secondary) !important;
    color: #fff;
}
.input-spin-success button:hover svg {
    color: var(--dx-success);
}
.input-solid-success .input-spin-minus,
.input-solid-success .input-spin-plus {
    background-color: var(--dx-success) !important;
    color: #fff;
}
.input-spin-info button:hover svg {
    color: var(--dx-info);
}
.input-solid-info .input-spin-minus,
.input-solid-info .input-spin-plus {
    background-color: var(--dx-info) !important;
    color: #fff;
}
.input-spin-warning button:hover svg {
    color: var(--dx-warning);
}
.input-solid-warning .input-spin-minus,
.input-solid-warning .input-spin-plus {
    background-color: var(--dx-warning) !important;
    color: #fff;
}
.input-spin-danger button:hover svg {
    color: var(--dx-danger);
}
.input-solid-danger .input-spin-minus,
.input-solid-danger .input-spin-plus {
    background-color: var(--dx-danger) !important;
    color: #fff;
}
.input-spin-light button:hover svg {
    color: var(--dx-light);
}
.input-solid-light .input-spin-minus,
.input-solid-light .input-spin-plus {
    background-color: var(--dx-light) !important;
    color: #fff;
    color: var(--dx-secondary-color);
}
.input-spin-dark button:hover svg {
    color: var(--dx-dark);
}
.input-solid-dark .input-spin-minus,
.input-solid-dark .input-spin-plus {
    background-color: var(--dx-dark) !important;
    color: #fff;
}
.input-spin-pink button:hover svg {
    color: var(--dx-pink);
}
.input-solid-pink .input-spin-minus,
.input-solid-pink .input-spin-plus {
    background-color: var(--dx-pink) !important;
    color: #fff;
}
.input-spin-orange button:hover svg {
    color: var(--dx-orange);
}
.input-solid-orange .input-spin-minus,
.input-solid-orange .input-spin-plus {
    background-color: var(--dx-orange) !important;
    color: #fff;
}
.input-spin-indigo button:hover svg {
    color: var(--dx-indigo);
}
.input-solid-indigo .input-spin-minus,
.input-solid-indigo .input-spin-plus {
    background-color: var(--dx-indigo) !important;
    color: #fff;
}
.toast-primary {
    --dx-toast-bg: var(--dx-primary);
    --dx-toast-color: var(--dx-white);
    --dx-toast-header-bg: var(--dx-primary);
    --dx-toast-border-color: var(--dx-primary);
    --dx-toast-header-color: rgba(var(--dx-white-rgb), 0.75);
    --dx-toast-header-border-color: rgba(var(--dx-white-rgb), 0.15);
}
.toast-primary .btn-close {
    --dx-btn-close-color: rgba(var(--dx-white-rgb), 0.75);
}
.toast-secondary {
    --dx-toast-bg: var(--dx-secondary);
    --dx-toast-color: var(--dx-white);
    --dx-toast-header-bg: var(--dx-secondary);
    --dx-toast-border-color: var(--dx-secondary);
    --dx-toast-header-color: rgba(var(--dx-white-rgb), 0.75);
    --dx-toast-header-border-color: rgba(var(--dx-white-rgb), 0.15);
}
.toast-secondary .btn-close {
    --dx-btn-close-color: rgba(var(--dx-white-rgb), 0.75);
}
.toast-success {
    --dx-toast-bg: var(--dx-success);
    --dx-toast-color: var(--dx-white);
    --dx-toast-header-bg: var(--dx-success);
    --dx-toast-border-color: var(--dx-success);
    --dx-toast-header-color: rgba(var(--dx-white-rgb), 0.75);
    --dx-toast-header-border-color: rgba(var(--dx-white-rgb), 0.15);
}
.toast-success .btn-close {
    --dx-btn-close-color: rgba(var(--dx-white-rgb), 0.75);
}
.toast-info {
    --dx-toast-bg: var(--dx-info);
    --dx-toast-color: var(--dx-white);
    --dx-toast-header-bg: var(--dx-info);
    --dx-toast-border-color: var(--dx-info);
    --dx-toast-header-color: rgba(var(--dx-white-rgb), 0.75);
    --dx-toast-header-border-color: rgba(var(--dx-white-rgb), 0.15);
}
.toast-info .btn-close {
    --dx-btn-close-color: rgba(var(--dx-white-rgb), 0.75);
}
.toast-warning {
    --dx-toast-bg: var(--dx-warning);
    --dx-toast-color: var(--dx-white);
    --dx-toast-header-bg: var(--dx-warning);
    --dx-toast-border-color: var(--dx-warning);
    --dx-toast-header-color: rgba(var(--dx-white-rgb), 0.75);
    --dx-toast-header-border-color: rgba(var(--dx-white-rgb), 0.15);
}
.toast-warning .btn-close {
    --dx-btn-close-color: rgba(var(--dx-white-rgb), 0.75);
}
.toast-danger {
    --dx-toast-bg: var(--dx-danger);
    --dx-toast-color: var(--dx-white);
    --dx-toast-header-bg: var(--dx-danger);
    --dx-toast-border-color: var(--dx-danger);
    --dx-toast-header-color: rgba(var(--dx-white-rgb), 0.75);
    --dx-toast-header-border-color: rgba(var(--dx-white-rgb), 0.15);
}
.toast-danger .btn-close {
    --dx-btn-close-color: rgba(var(--dx-white-rgb), 0.75);
}
.toast-pink {
    --dx-toast-bg: var(--dx-pink);
    --dx-toast-color: var(--dx-white);
    --dx-toast-header-bg: var(--dx-pink);
    --dx-toast-border-color: var(--dx-pink);
    --dx-toast-header-color: rgba(var(--dx-white-rgb), 0.75);
    --dx-toast-header-border-color: rgba(var(--dx-white-rgb), 0.15);
}
.toast-pink .btn-close {
    --dx-btn-close-color: rgba(var(--dx-white-rgb), 0.75);
}
.toast-orange {
    --dx-toast-bg: var(--dx-orange);
    --dx-toast-color: var(--dx-white);
    --dx-toast-header-bg: var(--dx-orange);
    --dx-toast-border-color: var(--dx-orange);
    --dx-toast-header-color: rgba(var(--dx-white-rgb), 0.75);
    --dx-toast-header-border-color: rgba(var(--dx-white-rgb), 0.15);
}
.toast-orange .btn-close {
    --dx-btn-close-color: rgba(var(--dx-white-rgb), 0.75);
}
.toast-indigo {
    --dx-toast-bg: var(--dx-indigo);
    --dx-toast-color: var(--dx-white);
    --dx-toast-header-bg: var(--dx-indigo);
    --dx-toast-border-color: var(--dx-indigo);
    --dx-toast-header-color: rgba(var(--dx-white-rgb), 0.75);
    --dx-toast-header-border-color: rgba(var(--dx-white-rgb), 0.15);
}
.toast-indigo .btn-close {
    --dx-btn-close-color: rgba(var(--dx-white-rgb), 0.75);
}
[data-theme="minimal"] {
    --dx-font-family-base: "Poppins", sans-serif;
    --dx-font-family-heading: "Poppins", sans-serif;
    --dx-body-font-size: 0.875rem;
    --dx-body-bg: #fff;
    --dx-secondary-bg: #fff;
    --dx-tertiary-bg: #f6f6f6;
    --dx-light: #f6f6f6;
    --dx-light-rgb: 246, 246, 246;
    --dx-custom-bg: var(--dx-tertiary-bg);
    --dx-custom-color: #7484a5;
    --dx-box-shadow: rgba(149, 157, 165, 0.13) 0px 8px 24px;
    --dx-sidebar-font-size: 0.9375rem;
    --dx-sidebar-menu-title-font-size: 0.75rem;
    --dx-element-shadow: none;
    --dx-primary: #0061ff;
    --dx-primary-rgb: 0, 97, 255;
    --dx-primary-text-emphasis: color-mix(
        in srgb,
        var(--dx-primary) 75%,
        #000 25%
    );
    --dx-primary-bg-subtle: color-mix(
        in srgb,
        var(--dx-primary) 10%,
        transparent
    );
    --dx-primary-border-subtle: color-mix(
        in srgb,
        var(--dx-primary) 30%,
        transparent
    );
    --dx-success: #26c14f;
    --dx-success-rgb: 38, 193, 79;
    --dx-success-text-emphasis: color-mix(
        in srgb,
        var(--dx-success) 75%,
        #000 25%
    );
    --dx-success-bg-subtle: color-mix(
        in srgb,
        var(--dx-success) 10%,
        transparent
    );
    --dx-success-border-subtle: color-mix(
        in srgb,
        var(--dx-success) 30%,
        transparent
    );
    --dx-danger: #fe6363;
    --dx-danger-rgb: 254, 99, 99;
    --dx-danger-text-emphasis: color-mix(
        in srgb,
        var(--dx-danger) 75%,
        #000 25%
    );
    --dx-danger-bg-subtle: color-mix(
        in srgb,
        var(--dx-danger) 10%,
        transparent
    );
    --dx-danger-border-subtle: color-mix(
        in srgb,
        var(--dx-danger) 30%,
        transparent
    );
    --dx-secondary: #33ca8e;
    --dx-secondary-rgb: 51, 202, 142;
    --dx-secondary-text-emphasis: color-mix(
        in srgb,
        var(--dx-secondary) 75%,
        #000 25%
    );
    --dx-secondary-bg-subtle: color-mix(
        in srgb,
        var(--dx-secondary) 10%,
        transparent
    );
    --dx-secondary-border-subtle: color-mix(
        in srgb,
        var(--dx-secondary) 30%,
        transparent
    );
    --dx-info: #60baef;
    --dx-info-rgb: 96, 186, 239;
    --dx-info-text-emphasis: color-mix(in srgb, var(--dx-info) 75%, #000 25%);
    --dx-info-bg-subtle: color-mix(in srgb, var(--dx-info) 10%, transparent);
    --dx-info-border-subtle: color-mix(
        in srgb,
        var(--dx-info) 30%,
        transparent
    );
    --dx-warning: #f4d640;
    --dx-warning-rgb: 244, 214, 64;
    --dx-warning-text-emphasis: color-mix(
        in srgb,
        var(--dx-warning) 75%,
        #000 25%
    );
    --dx-warning-bg-subtle: color-mix(
        in srgb,
        var(--dx-warning) 10%,
        transparent
    );
    --dx-warning-border-subtle: color-mix(
        in srgb,
        var(--dx-warning) 30%,
        transparent
    );
    --dx-pink: #f17cd8;
    --dx-pink-rgb: 241, 124, 216;
    --dx-pink-text-emphasis: color-mix(in srgb, var(--dx-pink) 75%, #000 25%);
    --dx-pink-bg-subtle: color-mix(in srgb, var(--dx-pink) 10%, transparent);
    --dx-pink-border-subtle: color-mix(
        in srgb,
        var(--dx-pink) 30%,
        transparent
    );
    --dx-indigo: #6d6ce1;
    --dx-indigo-rgb: 109, 108, 225;
    --dx-indigo-text-emphasis: color-mix(
        in srgb,
        var(--dx-indigo) 75%,
        #000 25%
    );
    --dx-indigo-bg-subtle: color-mix(
        in srgb,
        var(--dx-indigo) 10%,
        transparent
    );
    --dx-indigo-border-subtle: color-mix(
        in srgb,
        var(--dx-indigo) 30%,
        transparent
    );
    --dx-orange: #ff9a47;
    --dx-orange-rgb: 255, 154, 71;
    --dx-orange-text-emphasis: color-mix(
        in srgb,
        var(--dx-orange) 75%,
        #000 25%
    );
    --dx-orange-bg-subtle: color-mix(
        in srgb,
        var(--dx-orange) 10%,
        transparent
    );
    --dx-orange-border-subtle: color-mix(
        in srgb,
        var(--dx-orange) 30%,
        transparent
    );
}
[data-theme="minimal"] .card {
    --dx-card-box-shadow: none;
    --dx-card-border-width: 1px;
    --dx-card-border-color: var(--dx-border-color);
}
[data-theme="minimal"] .modal {
    --dx-modal-bg: var(--dx-secondary-bg);
}
[data-theme="minimal"][data-topbar-colors="light"] {
    --dx-topbar-border: var(--dx-light);
}
[data-theme="minimal"][data-sidebar-colors="light"] {
    --dx-sidebar-border: var(--dx-light);
    --dx-sidebar-bg: #f7faff;
    --dx-sidebar-link-bg-hover-color: #fff;
    --dx-sidebar-link-bg-active-color: #fff;
}
[data-theme="minimal"] .card-title {
    font-size: calc(var(--dx-body-font-size) * 1.1);
}
[data-theme="elegant"] {
    --dx-font-family-base: "Zalando Sans", sans-serif;
    --dx-font-family-heading: "Zalando Sans", sans-serif;
    --dx-body-font-size: 0.9688rem;
    --dx-body-bg: #fff;
    --dx-secondary-bg: #fff;
    --dx-tertiary-bg: #f6f6f6;
    --dx-light: #f6f6f6;
    --dx-light-rgb: 246, 246, 246;
    --dx-custom-bg: var(--dx-tertiary-bg);
    --dx-custom-color: #7484a5;
    --dx-border-radius: 0.625rem;
    --dx-border-radius-sm: 3px;
    --dx-sidebar-font-size: 0.9375rem;
    --dx-sidebar-menu-title-font-size: 0.75rem;
    --dx-primary: #6e4f61;
    --dx-primary-rgb: 110, 79, 97;
    --dx-primary-text-emphasis: color-mix(
        in srgb,
        var(--dx-primary) 75%,
        #000 25%
    );
    --dx-primary-bg-subtle: color-mix(
        in srgb,
        var(--dx-primary) 10%,
        transparent
    );
    --dx-primary-border-subtle: color-mix(
        in srgb,
        var(--dx-primary) 30%,
        transparent
    );
    --dx-secondary: #51448c;
    --dx-secondary-rgb: 81, 68, 140;
    --dx-secondary-text-emphasis: color-mix(
        in srgb,
        var(--dx-secondary) 75%,
        #000 25%
    );
    --dx-secondary-bg-subtle: color-mix(
        in srgb,
        var(--dx-secondary) 10%,
        transparent
    );
    --dx-secondary-border-subtle: color-mix(
        in srgb,
        var(--dx-secondary) 30%,
        transparent
    );
    --dx-success: #2fc59c;
    --dx-success-rgb: 47, 197, 156;
    --dx-success-text-emphasis: color-mix(
        in srgb,
        var(--dx-success) 75%,
        #000 25%
    );
    --dx-success-bg-subtle: color-mix(
        in srgb,
        var(--dx-success) 10%,
        transparent
    );
    --dx-success-border-subtle: color-mix(
        in srgb,
        var(--dx-success) 30%,
        transparent
    );
    --dx-danger: #dc5454;
    --dx-danger-rgb: 220, 84, 84;
    --dx-danger-text-emphasis: color-mix(
        in srgb,
        var(--dx-danger) 75%,
        #000 25%
    );
    --dx-danger-bg-subtle: color-mix(
        in srgb,
        var(--dx-danger) 10%,
        transparent
    );
    --dx-danger-border-subtle: color-mix(
        in srgb,
        var(--dx-danger) 30%,
        transparent
    );
    --dx-warning: #ebb648;
    --dx-warning-rgb: 235, 182, 72;
    --dx-warning-text-emphasis: color-mix(
        in srgb,
        var(--dx-warning) 75%,
        #000 25%
    );
    --dx-warning-bg-subtle: color-mix(
        in srgb,
        var(--dx-warning) 10%,
        transparent
    );
    --dx-warning-border-subtle: color-mix(
        in srgb,
        var(--dx-warning) 30%,
        transparent
    );
    --dx-info: #43a7c4;
    --dx-info-rgb: 67, 167, 196;
    --dx-info-text-emphasis: color-mix(in srgb, var(--dx-info) 75%, #000 25%);
    --dx-info-bg-subtle: color-mix(in srgb, var(--dx-info) 10%, transparent);
    --dx-info-border-subtle: color-mix(
        in srgb,
        var(--dx-info) 30%,
        transparent
    );
    --dx-pink: #d86ca0;
    --dx-pink-rgb: 216, 108, 160;
    --dx-pink-text-emphasis: color-mix(in srgb, var(--dx-pink) 75%, #000 25%);
    --dx-pink-bg-subtle: color-mix(in srgb, var(--dx-pink) 10%, transparent);
    --dx-pink-border-subtle: color-mix(
        in srgb,
        var(--dx-pink) 30%,
        transparent
    );
    --dx-indigo: #5968c9;
    --dx-indigo-rgb: 89, 104, 201;
    --dx-indigo-text-emphasis: color-mix(
        in srgb,
        var(--dx-indigo) 75%,
        #000 25%
    );
    --dx-indigo-bg-subtle: color-mix(
        in srgb,
        var(--dx-indigo) 10%,
        transparent
    );
    --dx-indigo-border-subtle: color-mix(
        in srgb,
        var(--dx-indigo) 30%,
        transparent
    );
    --dx-orange: #ff8f3f;
    --dx-orange-rgb: 255, 143, 63;
    --dx-orange-text-emphasis: color-mix(
        in srgb,
        var(--dx-orange) 75%,
        #000 25%
    );
    --dx-orange-bg-subtle: color-mix(
        in srgb,
        var(--dx-orange) 10%,
        transparent
    );
    --dx-orange-border-subtle: color-mix(
        in srgb,
        var(--dx-orange) 30%,
        transparent
    );
}
[data-theme="elegant"] .card {
    --dx-card-border-width: 1px;
    --dx-card-border-color: var(--dx-border-color);
    --dx-card-bg: #fff;
    --dx-card-box-shadow: none;
}
[data-theme="elegant"] .modal {
    --dx-modal-bg: var(--dx-secondary-bg);
}
[data-theme="elegant"][data-topbar-colors="light"] {
    --dx-topbar-border: var(--dx-border-color);
    --dx-topbar-bg: rgba(var(--dx-sidebar-bg-rgb), 0.5);
}
[data-theme="elegant"][data-sidebar-colors="light"] {
    --dx-sidebar-bg: #f0f1f5;
}
[data-theme="elegant"][data-topbar-colors="dark"] {
    --dx-topbar-bg: #1f242e;
}
[data-theme="elegant"][data-sidebar-colors="dark"] {
    --dx-sidebar-bg: #2a364e;
}
[data-theme="elegant"] .card-title {
    font-size: calc(var(--dx-body-font-size) * 1.1);
}
@media (min-width: 1536px) {
    [data-theme="elegant"][data-layout="neo"]
        body:not(.auth-wrapper)
        .page-wrapper {
        padding-inline: 5rem;
    }
}
@media (min-width: 1200px) {
    [data-theme="elegant"][data-layout="neo"]
        body:not(.auth-wrapper)
        .main-topbar:not(.nav-sticky) {
        margin-inline: 1.625rem;
    }
}
@media (min-width: 1536px) {
    [data-theme="elegant"][data-layout="neo"]
        body:not(.auth-wrapper)
        .main-topbar:not(.nav-sticky) {
        margin-inline: 4.625rem;
    }
}
[data-theme="material"] {
    --dx-font-family-base: "Rubik", sans-serif;
    --dx-font-family-heading: "Rubik", sans-serif;
    --dx-body-font-size: 0.9063rem;
    --dx-body-bg: #eef2f6;
    --dx-secondary-bg: #fff;
    --dx-secondary-color: #627383;
    --dx-tertiary-bg: #f4f6f8;
    --dx-tertiary-bg-rgb: 244, 246, 248;
    --dx-custom-bg: var(--dx-tertiary-bg);
    --dx-custom-color: #7484a5;
    --dx-border-radius: 0.75rem;
    --dx-border-radius-sm: 0.5rem;
    --dx-font-weight-semibold: 500;
    --dx-element-shadow: rgba(0, 0, 0, 0.08) 1.95px 1.95px 13px;
    --dx-spacer: 1.375rem;
    --dx-sidebar-font-size: 0.9063rem;
    --dx-sidebar-menu-title-font-size: 0.75rem;
    --dx-box-shadow:
        0px 3px 3px -2px rgba(145, 158, 171, 0.2),
        0px 3px 4px 0px rgba(145, 158, 171, 0.14),
        0px 1px 8px 0px rgba(145, 158, 171, 0.12);
    --dx-primary: #047263;
    --dx-primary-rgb: 4, 114, 99;
    --dx-primary-text-emphasis: color-mix(
        in srgb,
        var(--dx-primary) 75%,
        #000 25%
    );
    --dx-primary-bg-subtle: color-mix(
        in srgb,
        var(--dx-primary) 10%,
        transparent
    );
    --dx-primary-border-subtle: color-mix(
        in srgb,
        var(--dx-primary) 30%,
        transparent
    );
    --dx-secondary: #5e61d9;
    --dx-secondary-rgb: 94, 97, 217;
    --dx-secondary-text-emphasis: color-mix(
        in srgb,
        var(--dx-secondary) 75%,
        #000 25%
    );
    --dx-secondary-bg-subtle: color-mix(
        in srgb,
        var(--dx-secondary) 10%,
        transparent
    );
    --dx-secondary-border-subtle: color-mix(
        in srgb,
        var(--dx-secondary) 30%,
        transparent
    );
    --dx-success: #08a14a;
    --dx-success-rgb: 8, 161, 74;
    --dx-success-text-emphasis: color-mix(
        in srgb,
        var(--dx-success) 75%,
        #000 25%
    );
    --dx-success-bg-subtle: color-mix(
        in srgb,
        var(--dx-success) 10%,
        transparent
    );
    --dx-success-border-subtle: color-mix(
        in srgb,
        var(--dx-success) 30%,
        transparent
    );
    --dx-danger: #e55556;
    --dx-danger-rgb: 229, 85, 86;
    --dx-danger-text-emphasis: color-mix(
        in srgb,
        var(--dx-danger) 75%,
        #000 25%
    );
    --dx-danger-bg-subtle: color-mix(
        in srgb,
        var(--dx-danger) 10%,
        transparent
    );
    --dx-danger-border-subtle: color-mix(
        in srgb,
        var(--dx-danger) 30%,
        transparent
    );
    --dx-warning: #ebc724;
    --dx-warning-rgb: 235, 199, 36;
    --dx-warning-text-emphasis: color-mix(
        in srgb,
        var(--dx-warning) 75%,
        #000 25%
    );
    --dx-warning-bg-subtle: color-mix(
        in srgb,
        var(--dx-warning) 10%,
        transparent
    );
    --dx-warning-border-subtle: color-mix(
        in srgb,
        var(--dx-warning) 30%,
        transparent
    );
    --dx-info: #30aac3;
    --dx-info-rgb: 48, 170, 195;
    --dx-info-text-emphasis: color-mix(in srgb, var(--dx-info) 75%, #000 25%);
    --dx-info-bg-subtle: color-mix(in srgb, var(--dx-info) 10%, transparent);
    --dx-info-border-subtle: color-mix(
        in srgb,
        var(--dx-info) 30%,
        transparent
    );
    --dx-pink: #e3569c;
    --dx-pink-rgb: 227, 86, 156;
    --dx-pink-text-emphasis: color-mix(in srgb, var(--dx-pink) 75%, #000 25%);
    --dx-pink-bg-subtle: color-mix(in srgb, var(--dx-pink) 10%, transparent);
    --dx-pink-border-subtle: color-mix(
        in srgb,
        var(--dx-pink) 30%,
        transparent
    );
    --dx-orange: #e57a30;
    --dx-orange-rgb: 229, 122, 48;
    --dx-orange-text-emphasis: color-mix(
        in srgb,
        var(--dx-orange) 75%,
        #000 25%
    );
    --dx-orange-bg-subtle: color-mix(
        in srgb,
        var(--dx-orange) 10%,
        transparent
    );
    --dx-orange-border-subtle: color-mix(
        in srgb,
        var(--dx-orange) 30%,
        transparent
    );
    --dx-indigo: #793cb5;
    --dx-indigo-rgb: 121, 60, 181;
    --dx-indigo-text-emphasis: color-mix(
        in srgb,
        var(--dx-indigo) 75%,
        #000 25%
    );
    --dx-indigo-bg-subtle: color-mix(
        in srgb,
        var(--dx-indigo) 10%,
        transparent
    );
    --dx-indigo-border-subtle: color-mix(
        in srgb,
        var(--dx-indigo) 30%,
        transparent
    );
    --dx-light: #f4f6f8;
    --dx-light-rgb: 244, 246, 248;
    --dx-light-text-emphasis: color-mix(in srgb, var(--dx-light) 75%, #000 25%);
    --dx-light-bg-subtle: color-mix(in srgb, var(--dx-light) 10%, transparent);
    --dx-light-border-subtle: color-mix(
        in srgb,
        var(--dx-light) 30%,
        transparent
    );
    --dx-light-bg-subtle: color-mix(in srgb, var(--dx-light) 80%, #fff 20%);
}
[data-theme="material"] .card {
    --dx-card-border-color: transparent;
    --dx-card-border-width: 0;
    --dx-card-box-shadow: rgba(0, 0, 0, 0.08) 1.95px 1.95px 13px;
}
[data-theme="material"] .modal {
    --dx-modal-bg: var(--dx-secondary-bg);
}
[data-theme="material"][data-topbar-colors="light"] {
    --dx-topbar-border: var(--dx-border-color);
    --dx-topbar-bg: var(--dx-secondary-bg);
}
[data-theme="material"][data-sidebar-colors="light"] {
    --dx-sidebar-border: var(--dx-border-color);
    --dx-sidebar-bg: var(--dx-secondary-bg);
}
[data-theme="material"][data-topbar-colors="dark"] {
    --dx-topbar-bg: #021412;
}
[data-theme="material"][data-sidebar-colors="dark"] {
    --dx-sidebar-bg: #021412;
}
[data-theme="material"] .dropdown-menu {
    --dx-dropdown-border-width: 1px;
}
[data-theme="material"] .profile-widget {
    margin-inline: -1.25rem;
}
[data-theme="material"] .card-title {
    font-size: calc(var(--dx-body-font-size) * 1.07);
}
[data-theme="sparkle"] {
    --dx-font-family-base: "Chivo", sans-serif;
    --dx-font-family-heading: "Chivo", sans-serif;
    --dx-body-font-size: 0.9375rem;
    --dx-body-bg: #f2eeed;
    --dx-secondary-bg: #fff;
    --dx-secondary-bg-rgb: 255, 255, 255;
    --dx-tertiary-bg: #f9f9f9;
    --dx-tertiary-bg-rgb: 246, 246, 246;
    --dx-light: #f9f9f9;
    --dx-light-rgb: 246, 246, 246;
    --dx-border-color: #e5e1e0;
    --dx-border-radius: 6px;
    --dx-border-radius-sm: 3px;
    --dx-custom-bg: var(--dx-tertiary-bg);
    --dx-custom-color: #7484a5;
    --dx-page-wrapper-width: 112px;
    --dx-sidebar-font-size: 0.9375rem;
    --dx-sidebar-menu-title-font-size: 0.75rem;
    --dx-primary: #d92e58;
    --dx-primary-rgb: 217, 46, 88;
    --dx-primary-text-emphasis: color-mix(
        in srgb,
        var(--dx-primary) 75%,
        #000 25%
    );
    --dx-primary-bg-subtle: color-mix(
        in srgb,
        var(--dx-primary) 10%,
        transparent
    );
    --dx-primary-border-subtle: color-mix(
        in srgb,
        var(--dx-primary) 30%,
        transparent
    );
    --dx-success: #0a994e;
    --dx-success-rgb: 10, 153, 78;
    --dx-success-text-emphasis: color-mix(
        in srgb,
        var(--dx-success) 75%,
        #000 25%
    );
    --dx-success-bg-subtle: color-mix(
        in srgb,
        var(--dx-success) 10%,
        transparent
    );
    --dx-success-border-subtle: color-mix(
        in srgb,
        var(--dx-success) 30%,
        transparent
    );
    --dx-danger: #e5353f;
    --dx-danger-rgb: 229, 53, 63;
    --dx-danger-text-emphasis: color-mix(
        in srgb,
        var(--dx-danger) 75%,
        #000 25%
    );
    --dx-danger-bg-subtle: color-mix(
        in srgb,
        var(--dx-danger) 10%,
        transparent
    );
    --dx-danger-border-subtle: color-mix(
        in srgb,
        var(--dx-danger) 30%,
        transparent
    );
    --dx-secondary: #2667b5;
    --dx-secondary-rgb: 38, 103, 181;
    --dx-secondary-text-emphasis: color-mix(
        in srgb,
        var(--dx-secondary) 75%,
        #000 25%
    );
    --dx-secondary-bg-subtle: color-mix(
        in srgb,
        var(--dx-secondary) 10%,
        transparent
    );
    --dx-secondary-border-subtle: color-mix(
        in srgb,
        var(--dx-secondary) 30%,
        transparent
    );
    --dx-info: #1bb0c9;
    --dx-info-rgb: 27, 176, 201;
    --dx-info-text-emphasis: color-mix(in srgb, var(--dx-info) 75%, #000 25%);
    --dx-info-bg-subtle: color-mix(in srgb, var(--dx-info) 10%, transparent);
    --dx-info-border-subtle: color-mix(
        in srgb,
        var(--dx-info) 30%,
        transparent
    );
    --dx-warning: #e7bc28;
    --dx-warning-rgb: 231, 188, 40;
    --dx-warning-text-emphasis: color-mix(
        in srgb,
        var(--dx-warning) 75%,
        #000 25%
    );
    --dx-warning-bg-subtle: color-mix(
        in srgb,
        var(--dx-warning) 10%,
        transparent
    );
    --dx-warning-border-subtle: color-mix(
        in srgb,
        var(--dx-warning) 30%,
        transparent
    );
    --dx-pink: #dd2db0;
    --dx-pink-rgb: 221, 45, 176;
    --dx-pink-text-emphasis: color-mix(in srgb, var(--dx-pink) 75%, #000 25%);
    --dx-pink-bg-subtle: color-mix(in srgb, var(--dx-pink) 10%, transparent);
    --dx-pink-border-subtle: color-mix(
        in srgb,
        var(--dx-pink) 30%,
        transparent
    );
    --dx-indigo: #5034c7;
    --dx-indigo-rgb: 80, 52, 199;
    --dx-indigo-text-emphasis: color-mix(
        in srgb,
        var(--dx-indigo) 75%,
        #000 25%
    );
    --dx-indigo-bg-subtle: color-mix(
        in srgb,
        var(--dx-indigo) 10%,
        transparent
    );
    --dx-indigo-border-subtle: color-mix(
        in srgb,
        var(--dx-indigo) 30%,
        transparent
    );
    --dx-orange: #e77b23;
    --dx-orange-rgb: 231, 123, 35;
    --dx-orange-text-emphasis: color-mix(
        in srgb,
        var(--dx-orange) 75%,
        #000 25%
    );
    --dx-orange-bg-subtle: color-mix(
        in srgb,
        var(--dx-orange) 10%,
        transparent
    );
    --dx-orange-border-subtle: color-mix(
        in srgb,
        var(--dx-orange) 30%,
        transparent
    );
    --dx-light: #f5f4f4;
    --dx-light-rgb: 245, 244, 244;
    --dx-light-text-emphasis: color-mix(in srgb, var(--dx-light) 75%, #000 25%);
    --dx-light-bg-subtle: color-mix(in srgb, var(--dx-light) 10%, transparent);
    --dx-light-border-subtle: color-mix(
        in srgb,
        var(--dx-light) 30%,
        transparent
    );
    --dx-dark: #3c0f1a;
    --dx-dark-rgb: 60, 15, 26;
    --dx-dark-text-emphasis: color-mix(in srgb, var(--dx-dark) 75%, #000 25%);
    --dx-dark-bg-subtle: color-mix(in srgb, var(--dx-dark) 10%, transparent);
    --dx-dark-border-subtle: color-mix(
        in srgb,
        var(--dx-dark) 30%,
        transparent
    );
}
[data-theme="sparkle"] .card {
    --dx-card-border-width: 0;
    --dx-card-border-color: var(--dx-border-color);
    --dx-card-bg: #fff;
    --dx-card-box-shadow: none;
}
[data-theme="sparkle"] .modal {
    --dx-modal-bg: var(--dx-secondary-bg);
}
[data-theme="sparkle"][data-topbar-colors="light"] {
    --dx-topbar-border: var(--dx-border-color);
    --dx-topbar-bg: var(--dx-secondary-bg);
}
[data-theme="sparkle"][data-sidebar-colors="light"] {
    --dx-sidebar-border: var(--dx-border-color);
    --dx-sidebar-bg: var(--dx-secondary-bg);
}
[data-theme="sparkle"][data-topbar-colors="dark"] {
    --dx-topbar-bg: #25252d;
}
[data-theme="sparkle"][data-sidebar-colors="dark"] {
    --dx-sidebar-bg: #1a1c1b;
}
[data-theme="sparkle"] .dropdown-menu {
    --dx-dropdown-border-width: 1px;
    box-shadow: none;
}
[data-theme="sparkle"] .card-title {
    font-size: calc(var(--dx-body-font-size) * 1.1);
}
@media (min-width: 1536px) {
    [data-theme="sparkle"] .profile-widget {
        margin: -15px calc(var(--dx-page-wrapper-width) * -1.085) 0
            calc(var(--dx-page-wrapper-width) * -1.085);
    }
}
[data-theme="flat"] {
    --dx-font-family-base: "Saira", sans-serif;
    --dx-font-family-heading: "Saira", sans-serif;
    --dx-body-font-size: 1rem;
    --dx-body-bg: #efefef;
    --dx-secondary-bg: #fff;
    --dx-tertiary-bg: #f6f6f6;
    --dx-light: #f6f6f6;
    --dx-light-rgb: 246, 246, 246;
    --dx-custom-bg: var(--dx-tertiary-bg);
    --dx-custom-color: #7484a5;
    --dx-spacer: 1.5rem;
    --dx-box-shadow: 0 4px 6px -1px rgba(220, 233, 249, 0.4);
    --dx-font-weight-medium: 600;
    --dx-sidebar-font-size: 0.9688rem;
    --dx-sidebar-menu-title-font-size: 0.8125rem;
    --dx-primary: #2042c7;
    --dx-primary-rgb: 32, 66, 199;
    --dx-primary-text-emphasis: color-mix(
        in srgb,
        var(--dx-primary) 75%,
        #000 25%
    );
    --dx-primary-bg-subtle: color-mix(
        in srgb,
        var(--dx-primary) 10%,
        transparent
    );
    --dx-primary-border-subtle: color-mix(
        in srgb,
        var(--dx-primary) 30%,
        transparent
    );
    --dx-success: #5dc235;
    --dx-success-rgb: 93, 194, 53;
    --dx-success-text-emphasis: color-mix(
        in srgb,
        var(--dx-success) 75%,
        #000 25%
    );
    --dx-success-bg-subtle: color-mix(
        in srgb,
        var(--dx-success) 10%,
        transparent
    );
    --dx-success-border-subtle: color-mix(
        in srgb,
        var(--dx-success) 30%,
        transparent
    );
    --dx-danger: #e56666;
    --dx-danger-rgb: 229, 102, 102;
    --dx-danger-text-emphasis: color-mix(
        in srgb,
        var(--dx-danger) 75%,
        #000 25%
    );
    --dx-danger-bg-subtle: color-mix(
        in srgb,
        var(--dx-danger) 10%,
        transparent
    );
    --dx-danger-border-subtle: color-mix(
        in srgb,
        var(--dx-danger) 30%,
        transparent
    );
    --dx-secondary: #8f76eb;
    --dx-secondary-rgb: 143, 118, 235;
    --dx-secondary-text-emphasis: color-mix(
        in srgb,
        var(--dx-secondary) 75%,
        #000 25%
    );
    --dx-secondary-bg-subtle: color-mix(
        in srgb,
        var(--dx-secondary) 10%,
        transparent
    );
    --dx-secondary-border-subtle: color-mix(
        in srgb,
        var(--dx-secondary) 30%,
        transparent
    );
    --dx-info: #27b8d3;
    --dx-info-rgb: 39, 184, 211;
    --dx-info-text-emphasis: color-mix(in srgb, var(--dx-info) 75%, #000 25%);
    --dx-info-bg-subtle: color-mix(in srgb, var(--dx-info) 10%, transparent);
    --dx-info-border-subtle: color-mix(
        in srgb,
        var(--dx-info) 30%,
        transparent
    );
    --dx-warning: #f1d745;
    --dx-warning-rgb: 241, 215, 69;
    --dx-warning-text-emphasis: color-mix(
        in srgb,
        var(--dx-warning) 75%,
        #000 25%
    );
    --dx-warning-bg-subtle: color-mix(
        in srgb,
        var(--dx-warning) 10%,
        transparent
    );
    --dx-warning-border-subtle: color-mix(
        in srgb,
        var(--dx-warning) 30%,
        transparent
    );
    --dx-pink: #e374ad;
    --dx-pink-rgb: 227, 116, 173;
    --dx-pink-text-emphasis: color-mix(in srgb, var(--dx-pink) 75%, #000 25%);
    --dx-pink-bg-subtle: color-mix(in srgb, var(--dx-pink) 10%, transparent);
    --dx-pink-border-subtle: color-mix(
        in srgb,
        var(--dx-pink) 30%,
        transparent
    );
    --dx-indigo: #9d71e7;
    --dx-indigo-rgb: 157, 113, 231;
    --dx-indigo-text-emphasis: color-mix(
        in srgb,
        var(--dx-indigo) 75%,
        #000 25%
    );
    --dx-indigo-bg-subtle: color-mix(
        in srgb,
        var(--dx-indigo) 10%,
        transparent
    );
    --dx-indigo-border-subtle: color-mix(
        in srgb,
        var(--dx-indigo) 30%,
        transparent
    );
    --dx-orange: #f7bc4d;
    --dx-orange-rgb: 247, 188, 77;
    --dx-orange-text-emphasis: color-mix(
        in srgb,
        var(--dx-orange) 75%,
        #000 25%
    );
    --dx-orange-bg-subtle: color-mix(
        in srgb,
        var(--dx-orange) 10%,
        transparent
    );
    --dx-orange-border-subtle: color-mix(
        in srgb,
        var(--dx-orange) 30%,
        transparent
    );
    --dx-dark: #312f2e;
    --dx-dark-rgb: 49, 47, 46;
    --dx-dark-text-emphasis: color-mix(in srgb, var(--dx-dark) 75%, #000 25%);
    --dx-dark-bg-subtle: color-mix(in srgb, var(--dx-dark) 10%, transparent);
    --dx-dark-border-subtle: color-mix(
        in srgb,
        var(--dx-dark) 30%,
        transparent
    );
}
[data-theme="flat"] .card {
    --dx-card-border-width: 0;
    --dx-card-bg: #fff;
    --dx-card-box-shadow: var(--dx-box-shadow);
}
[data-theme="flat"] .modal {
    --dx-modal-bg: var(--dx-secondary-bg);
}
[data-theme="flat"][data-topbar-colors="light"] {
    --dx-topbar-border: var(--dx-border-color);
    --dx-topbar-bg: var(--dx-secondary-bg);
}
[data-theme="flat"][data-sidebar-colors="light"] {
    --dx-sidebar-bg: var(--dx-secondary-bg);
}
[data-theme="flat"][data-topbar-colors="dark"] {
    --dx-topbar-bg: #2a2929;
}
[data-theme="flat"][data-sidebar-colors="dark"] {
    --dx-sidebar-bg: #2a2929;
}
[data-theme="flat"][data-bs-theme="dark"] {
    --dx-box-shadow: 0 4px 6px -1px #10162c;
}
[data-theme="flat"] .card-title {
    font-size: calc(var(--dx-body-font-size) * 1.1);
}
@media (min-width: 1536px) {
    [data-theme="flat"][data-layout="neo"]
        body:not(.auth-wrapper)
        .page-wrapper {
        padding-inline: 4rem;
    }
}
@media (min-width: 1200px) {
    [data-theme="flat"][data-layout="neo"]
        body:not(.auth-wrapper)
        .main-topbar:not(.nav-sticky) {
        margin-inline: 1.625rem;
    }
}
@media (min-width: 1536px) {
    [data-theme="flat"][data-layout="neo"]
        body:not(.auth-wrapper)
        .main-topbar:not(.nav-sticky) {
        margin-inline: 4.625rem;
    }
}
[data-theme="creative"] {
    --dx-font-family-base: "Nunito", sans-serif;
    --dx-font-family-heading: "Nunito", sans-serif;
    --dx-body-font-size: 0.9688rem;
    --dx-body-bg: #ffffff66;
    --dx-secondary-bg: #fff;
    --dx-secondary-bg-rgb: 255, 255, 255;
    --dx-tertiary-bg: #ffffff66;
    --dx-tertiary-bg-rgb: 255, 255, 255;
    --dx-light: #fff;
    --dx-light-rgb: 255, 255, 255;
    --dx-custom-bg: var(--dx-tertiary-bg);
    --dx-custom-color: #7484a5;
    --dx-box-shadow: none;
    --dx-font-weight-semibold: 700;
    --dx-primary: #5d87ff;
    --dx-primary-rgb: 93, 135, 255;
    --dx-primary-text-emphasis: color-mix(
        in srgb,
        var(--dx-primary) 75%,
        #000 25%
    );
    --dx-primary-bg-subtle: color-mix(
        in srgb,
        var(--dx-primary) 10%,
        transparent
    );
    --dx-primary-border-subtle: color-mix(
        in srgb,
        var(--dx-primary) 30%,
        transparent
    );
    --dx-secondary: #8b7cf6;
    --dx-secondary-rgb: 139, 124, 246;
    --dx-secondary-text-emphasis: color-mix(
        in srgb,
        var(--dx-secondary) 75%,
        #000 25%
    );
    --dx-secondary-bg-subtle: color-mix(
        in srgb,
        var(--dx-secondary) 10%,
        transparent
    );
    --dx-secondary-border-subtle: color-mix(
        in srgb,
        var(--dx-secondary) 30%,
        transparent
    );
    --dx-success: #38d6a3;
    --dx-success-rgb: 56, 214, 163;
    --dx-success-text-emphasis: color-mix(
        in srgb,
        var(--dx-success) 75%,
        #000 25%
    );
    --dx-success-bg-subtle: color-mix(
        in srgb,
        var(--dx-success) 10%,
        transparent
    );
    --dx-success-border-subtle: color-mix(
        in srgb,
        var(--dx-success) 30%,
        transparent
    );
    --dx-danger: #ff6b6b;
    --dx-danger-rgb: 255, 107, 107;
    --dx-danger-text-emphasis: color-mix(
        in srgb,
        var(--dx-danger) 75%,
        #000 25%
    );
    --dx-danger-bg-subtle: color-mix(
        in srgb,
        var(--dx-danger) 10%,
        transparent
    );
    --dx-danger-border-subtle: color-mix(
        in srgb,
        var(--dx-danger) 30%,
        transparent
    );
    --dx-info: #42c5f5;
    --dx-info-rgb: 66, 197, 245;
    --dx-info-text-emphasis: color-mix(in srgb, var(--dx-info) 75%, #000 25%);
    --dx-info-bg-subtle: color-mix(in srgb, var(--dx-info) 10%, transparent);
    --dx-info-border-subtle: color-mix(
        in srgb,
        var(--dx-info) 30%,
        transparent
    );
    --dx-warning: #ffbe55;
    --dx-warning-rgb: 255, 190, 85;
    --dx-warning-text-emphasis: color-mix(
        in srgb,
        var(--dx-warning) 75%,
        #000 25%
    );
    --dx-warning-bg-subtle: color-mix(
        in srgb,
        var(--dx-warning) 10%,
        transparent
    );
    --dx-warning-border-subtle: color-mix(
        in srgb,
        var(--dx-warning) 30%,
        transparent
    );
    --dx-pink: #ff7eb6;
    --dx-pink-rgb: 255, 126, 182;
    --dx-pink-text-emphasis: color-mix(in srgb, var(--dx-pink) 75%, #000 25%);
    --dx-pink-bg-subtle: color-mix(in srgb, var(--dx-pink) 10%, transparent);
    --dx-pink-border-subtle: color-mix(
        in srgb,
        var(--dx-pink) 30%,
        transparent
    );
    --dx-indigo: #6f73ff;
    --dx-indigo-rgb: 111, 115, 255;
    --dx-indigo-text-emphasis: color-mix(
        in srgb,
        var(--dx-indigo) 75%,
        #000 25%
    );
    --dx-indigo-bg-subtle: color-mix(
        in srgb,
        var(--dx-indigo) 10%,
        transparent
    );
    --dx-indigo-border-subtle: color-mix(
        in srgb,
        var(--dx-indigo) 30%,
        transparent
    );
    --dx-orange: #ff9f43;
    --dx-orange-rgb: 255, 159, 67;
    --dx-orange-text-emphasis: color-mix(
        in srgb,
        var(--dx-orange) 75%,
        #000 25%
    );
    --dx-orange-bg-subtle: color-mix(
        in srgb,
        var(--dx-orange) 10%,
        transparent
    );
    --dx-orange-border-subtle: color-mix(
        in srgb,
        var(--dx-orange) 30%,
        transparent
    );
    --dx-dark: #393552;
    --dx-dark-rgb: 57, 53, 82;
    --dx-dark-text-emphasis: color-mix(in srgb, var(--dx-dark) 75%, #000 25%);
    --dx-dark-bg-subtle: color-mix(in srgb, var(--dx-dark) 10%, transparent);
    --dx-dark-border-subtle: color-mix(
        in srgb,
        var(--dx-dark) 30%,
        transparent
    );
}
[data-theme="creative"] .card {
    backdrop-filter: blur(10px);
}
[data-theme="creative"] .body-effect-img {
    position: fixed;
    inset: 0;
    z-index: 0;
    background-image: url(https://srbthemes.kcubeinfotech.com/alloce/images/body-bg-light.webp);
    background-size: cover;
    background-attachment: scroll;
    background-position: 50%;
    background-repeat: no-repeat;
    opacity: 0.5;
}
[data-theme="creative"]:is([data-bs-theme="dark"], [data-bs-theme="black"])
    .body-effect-img {
    background-image: url(https://srbthemes.kcubeinfotech.com/alloce/images/body-bg-dark.webp);
    opacity: 0.5;
}
[data-theme="creative"] .card {
    --dx-card-box-shadow: var(--dx-box-shadow);
    --dx-card-bg: rgba(var(--dx-secondary-bg-rgb), 0.4);
}
[data-theme="creative"][data-bs-theme="light"] .card {
    --dx-card-border-color: var(--dx-white);
}
[data-theme="creative"]:is([data-bs-theme="dark"], [data-bs-theme="black"])
    .card {
    --dx-card-bg: rgba(var(--dx-secondary-bg-rgb), 0.4) !important;
}
[data-theme="creative"][data-topbar-colors="light"] {
    --dx-topbar-bg: rgba(var(--dx-secondary-bg-rgb), 0.3);
    --dx-topbar-border: var(--dx-border-color);
}
[data-theme="creative"][data-sidebar-colors="light"] {
    --dx-sidebar-bg: rgba(var(--dx-secondary-bg-rgb), 0.3);
    --dx-sidebar-border: var(--dx-border-color);
}
[data-theme="creative"] .main-sidebar {
    border-color: var(--dx-secondary-bg);
}
[data-theme="default"] {
    --dx-element-shadow: none;
    --dx-page-wrapper-width: 5rem;
}
@media (min-width: 1536px) {
    [data-theme="default"] .profile-widget {
        margin: -15px calc(var(--dx-page-wrapper-width) * -1.12) 0
            calc(var(--dx-page-wrapper-width) * -1.12);
    }
}
[data-theme="corporate"] {
    --dx-font-family-base: "DM Sans", sans-serif;
    --dx-font-family-heading: "DM Sans", sans-serif;
    --dx-body-font-size: 0.9375rem;
    --dx-body-bg: #fefaf2;
    --dx-secondary-bg: #fff;
    --dx-tertiary-bg: #f6f6f6;
    --dx-light: #f6f6f6;
    --dx-light-rgb: 246, 246, 246;
    --dx-custom-bg: var(--dx-tertiary-bg);
    --dx-custom-color: #7484a5;
    --dx-spacer: 1.5rem;
    --dx-box-shadow: #efefef 0px 8px 24px;
    --dx-border-radius: 1.125rem;
    --dx-body-font-size: 0.9688rem;
    --dx-sidebar-font-size: 1rem;
    --dx-sidebar-menu-title-font-size: 0.8125rem;
    --dx-primary: #f78a42;
    --dx-primary-rgb: 247, 138, 66;
    --dx-primary-text-emphasis: color-mix(
        in srgb,
        var(--dx-primary) 75%,
        #000 25%
    );
    --dx-primary-bg-subtle: color-mix(
        in srgb,
        var(--dx-primary) 10%,
        transparent
    );
    --dx-primary-border-subtle: color-mix(
        in srgb,
        var(--dx-primary) 30%,
        transparent
    );
    --dx-success: #25c17c;
    --dx-success-rgb: 37, 193, 124;
    --dx-success-text-emphasis: color-mix(
        in srgb,
        var(--dx-success) 75%,
        #000 25%
    );
    --dx-success-bg-subtle: color-mix(
        in srgb,
        var(--dx-success) 10%,
        transparent
    );
    --dx-success-border-subtle: color-mix(
        in srgb,
        var(--dx-success) 30%,
        transparent
    );
    --dx-danger: #f96060;
    --dx-danger-rgb: 249, 96, 96;
    --dx-danger-text-emphasis: color-mix(
        in srgb,
        var(--dx-danger) 75%,
        #000 25%
    );
    --dx-danger-bg-subtle: color-mix(
        in srgb,
        var(--dx-danger) 10%,
        transparent
    );
    --dx-danger-border-subtle: color-mix(
        in srgb,
        var(--dx-danger) 30%,
        transparent
    );
    --dx-secondary: #a951a7;
    --dx-secondary-rgb: 169, 81, 167;
    --dx-secondary-text-emphasis: color-mix(
        in srgb,
        var(--dx-secondary) 75%,
        #000 25%
    );
    --dx-secondary-bg-subtle: color-mix(
        in srgb,
        var(--dx-secondary) 10%,
        transparent
    );
    --dx-secondary-border-subtle: color-mix(
        in srgb,
        var(--dx-secondary) 30%,
        transparent
    );
    --dx-info: #10c5e7;
    --dx-info-rgb: 16, 197, 231;
    --dx-info-text-emphasis: color-mix(in srgb, var(--dx-info) 75%, #000 25%);
    --dx-info-bg-subtle: color-mix(in srgb, var(--dx-info) 10%, transparent);
    --dx-info-border-subtle: color-mix(
        in srgb,
        var(--dx-info) 30%,
        transparent
    );
    --dx-warning: #ebc02a;
    --dx-warning-rgb: 235, 192, 42;
    --dx-warning-text-emphasis: color-mix(
        in srgb,
        var(--dx-warning) 75%,
        #000 25%
    );
    --dx-warning-bg-subtle: color-mix(
        in srgb,
        var(--dx-warning) 10%,
        transparent
    );
    --dx-warning-border-subtle: color-mix(
        in srgb,
        var(--dx-warning) 30%,
        transparent
    );
    --dx-pink: #e76aaa;
    --dx-pink-rgb: 231, 106, 170;
    --dx-pink-text-emphasis: color-mix(in srgb, var(--dx-pink) 75%, #000 25%);
    --dx-pink-bg-subtle: color-mix(in srgb, var(--dx-pink) 10%, transparent);
    --dx-pink-border-subtle: color-mix(
        in srgb,
        var(--dx-pink) 30%,
        transparent
    );
    --dx-indigo: #347ec5;
    --dx-indigo-rgb: 52, 126, 197;
    --dx-indigo-text-emphasis: color-mix(
        in srgb,
        var(--dx-indigo) 75%,
        #000 25%
    );
    --dx-indigo-bg-subtle: color-mix(
        in srgb,
        var(--dx-indigo) 10%,
        transparent
    );
    --dx-indigo-border-subtle: color-mix(
        in srgb,
        var(--dx-indigo) 30%,
        transparent
    );
    --dx-orange: #f1833e;
    --dx-orange-rgb: 241, 131, 62;
    --dx-orange-text-emphasis: color-mix(
        in srgb,
        var(--dx-orange) 75%,
        #000 25%
    );
    --dx-orange-bg-subtle: color-mix(
        in srgb,
        var(--dx-orange) 10%,
        transparent
    );
    --dx-orange-border-subtle: color-mix(
        in srgb,
        var(--dx-orange) 30%,
        transparent
    );
    --dx-light: #f3f3f3;
    --dx-light-rgb: 243, 243, 243;
    --dx-light-text-emphasis: color-mix(in srgb, var(--dx-light) 75%, #000 25%);
    --dx-light-bg-subtle: color-mix(in srgb, var(--dx-light) 10%, transparent);
    --dx-light-border-subtle: color-mix(
        in srgb,
        var(--dx-light) 30%,
        transparent
    );
    --dx-dark: #4c4b49;
    --dx-dark-rgb: 76, 75, 73;
    --dx-dark-text-emphasis: color-mix(in srgb, var(--dx-dark) 75%, #000 25%);
    --dx-dark-bg-subtle: color-mix(in srgb, var(--dx-dark) 10%, transparent);
    --dx-dark-border-subtle: color-mix(
        in srgb,
        var(--dx-dark) 30%,
        transparent
    );
}
[data-theme="corporate"] .card {
    --dx-card-border-width: 0;
    --dx-card-border-color: var(--dx-border-color);
    --dx-card-bg: #fff;
    --dx-card-box-shadow: var(--dx-box-shadow);
}
[data-theme="corporate"] .modal {
    --dx-modal-bg: var(--dx-secondary-bg);
}
[data-theme="corporate"][data-topbar-colors="light"] {
    --dx-topbar-border: var(--dx-border-color);
    --dx-topbar-bg: var(--dx-secondary-bg);
}
[data-theme="corporate"][data-sidebar-colors="light"] {
    --dx-sidebar-border: var(--dx-border-color);
    --dx-sidebar-bg: var(--dx-secondary-bg);
}
[data-theme="corporate"][data-topbar-colors="dark"] {
    --dx-topbar-bg: #2a2929;
}
[data-theme="corporate"][data-sidebar-colors="dark"] {
    --dx-sidebar-bg: #2a2929;
}
[data-theme="corporate"][data-bs-theme="dark"] {
    --dx-box-shadow: #12121231 0px 8px 24px;
}
[data-theme="corporate"] .card-title {
    font-size: calc(var(--dx-body-font-size) * 1.1);
}
[data-theme="retro"] {
    --dx-font-family-base: "Montserrat", sans-serif;
    --dx-font-family-heading: "Montserrat", sans-serif;
    --dx-body-font-size: 0.9375rem;
    --dx-body-bg: #cee9e0;
    --dx-secondary-bg: #fff;
    --dx-tertiary-bg: #f6f6f6;
    --dx-light: #f6f6f6;
    --dx-light-rgb: 246, 246, 246;
    --dx-custom-bg: var(--dx-tertiary-bg);
    --dx-custom-color: #7484a5;
    --dx-spacer: 1.5rem;
    --dx-box-shadow: #f3f2f0 0px 8px 24px;
    --dx-border-color: var(--dx-dark);
    --dx-border-radius: 0.8125rem;
    --dx-body-font-size: 1rem;
    --dx-sidebar-font-size: 1rem;
    --dx-sidebar-menu-title-font-size: 0.8125rem;
    --dx-primary: #8ec503;
    --dx-primary-rgb: 142, 197, 3;
    --dx-primary-text-emphasis: color-mix(
        in srgb,
        var(--dx-primary) 75%,
        #000 25%
    );
    --dx-primary-bg-subtle: color-mix(
        in srgb,
        var(--dx-primary) 10%,
        transparent
    );
    --dx-primary-border-subtle: color-mix(
        in srgb,
        var(--dx-primary) 30%,
        transparent
    );
    --dx-success: #4db380;
    --dx-success-rgb: 77, 179, 128;
    --dx-success-text-emphasis: color-mix(
        in srgb,
        var(--dx-success) 75%,
        #000 25%
    );
    --dx-success-bg-subtle: color-mix(
        in srgb,
        var(--dx-success) 10%,
        transparent
    );
    --dx-success-border-subtle: color-mix(
        in srgb,
        var(--dx-success) 30%,
        transparent
    );
    --dx-danger: #d74863;
    --dx-danger-rgb: 215, 72, 99;
    --dx-danger-text-emphasis: color-mix(
        in srgb,
        var(--dx-danger) 75%,
        #000 25%
    );
    --dx-danger-bg-subtle: color-mix(
        in srgb,
        var(--dx-danger) 10%,
        transparent
    );
    --dx-danger-border-subtle: color-mix(
        in srgb,
        var(--dx-danger) 30%,
        transparent
    );
    --dx-secondary: #a951a7;
    --dx-secondary-rgb: 169, 81, 167;
    --dx-secondary-text-emphasis: color-mix(
        in srgb,
        var(--dx-secondary) 75%,
        #000 25%
    );
    --dx-secondary-bg-subtle: color-mix(
        in srgb,
        var(--dx-secondary) 10%,
        transparent
    );
    --dx-secondary-border-subtle: color-mix(
        in srgb,
        var(--dx-secondary) 30%,
        transparent
    );
    --dx-info: #43e3e9;
    --dx-info-rgb: 67, 227, 233;
    --dx-info-text-emphasis: color-mix(in srgb, var(--dx-info) 75%, #000 25%);
    --dx-info-bg-subtle: color-mix(in srgb, var(--dx-info) 10%, transparent);
    --dx-info-border-subtle: color-mix(
        in srgb,
        var(--dx-info) 30%,
        transparent
    );
    --dx-warning: #edc93a;
    --dx-warning-rgb: 237, 201, 58;
    --dx-warning-text-emphasis: color-mix(
        in srgb,
        var(--dx-warning) 75%,
        #000 25%
    );
    --dx-warning-bg-subtle: color-mix(
        in srgb,
        var(--dx-warning) 10%,
        transparent
    );
    --dx-warning-border-subtle: color-mix(
        in srgb,
        var(--dx-warning) 30%,
        transparent
    );
    --dx-pink: #cd62b0;
    --dx-pink-rgb: 205, 98, 176;
    --dx-pink-text-emphasis: color-mix(in srgb, var(--dx-pink) 75%, #000 25%);
    --dx-pink-bg-subtle: color-mix(in srgb, var(--dx-pink) 10%, transparent);
    --dx-pink-border-subtle: color-mix(
        in srgb,
        var(--dx-pink) 30%,
        transparent
    );
    --dx-indigo: #514a87;
    --dx-indigo-rgb: 81, 74, 135;
    --dx-indigo-text-emphasis: color-mix(
        in srgb,
        var(--dx-indigo) 75%,
        #000 25%
    );
    --dx-indigo-bg-subtle: color-mix(
        in srgb,
        var(--dx-indigo) 10%,
        transparent
    );
    --dx-indigo-border-subtle: color-mix(
        in srgb,
        var(--dx-indigo) 30%,
        transparent
    );
    --dx-orange: #eda25d;
    --dx-orange-rgb: 237, 162, 93;
    --dx-orange-text-emphasis: color-mix(
        in srgb,
        var(--dx-orange) 75%,
        #000 25%
    );
    --dx-orange-bg-subtle: color-mix(
        in srgb,
        var(--dx-orange) 10%,
        transparent
    );
    --dx-orange-border-subtle: color-mix(
        in srgb,
        var(--dx-orange) 30%,
        transparent
    );
    --dx-light: #f3f3f3;
    --dx-light-rgb: 243, 243, 243;
    --dx-light-text-emphasis: color-mix(in srgb, var(--dx-light) 75%, #000 25%);
    --dx-light-bg-subtle: color-mix(in srgb, var(--dx-light) 10%, transparent);
    --dx-light-border-subtle: color-mix(
        in srgb,
        var(--dx-light) 30%,
        transparent
    );
    --dx-dark: #4c4b49;
    --dx-dark-rgb: 76, 75, 73;
    --dx-dark-text-emphasis: color-mix(in srgb, var(--dx-dark) 75%, #000 25%);
    --dx-dark-bg-subtle: color-mix(in srgb, var(--dx-dark) 10%, transparent);
    --dx-dark-border-subtle: color-mix(
        in srgb,
        var(--dx-dark) 30%,
        transparent
    );
}
[data-theme="retro"] .card {
    --dx-card-border-width: 3px;
    --dx-card-border-color: var(--dx-dark);
    --dx-card-bg: #fff;
    --dx-card-box-shadow: none;
}
[data-theme="retro"] .modal {
    --dx-modal-bg: var(--dx-secondary-bg);
}
[data-theme="retro"][data-topbar-colors="light"] {
    --dx-topbar-border: var(--dx-border-color);
    --dx-topbar-bg: var(--dx-secondary-bg);
}
[data-theme="retro"][data-sidebar-colors="light"] {
    --dx-sidebar-border: var(--dx-border-color);
    --dx-sidebar-bg: var(--dx-secondary-bg);
}
[data-theme="retro"][data-topbar-colors="dark"] {
    --dx-topbar-bg: #2a2929;
}
[data-theme="retro"][data-sidebar-colors="dark"] {
    --dx-sidebar-bg: #2a2929;
}
[data-theme="retro"] .card-title {
    font-size: calc(var(--dx-body-font-size) * 1.1);
}
[data-theme="modern"] {
    --dx-font-family-base: "Inter", sans-serif;
    --dx-font-family-heading: "Inter", sans-serif;
    --dx-body-font-size: 0.9375rem;
    --dx-body-bg: #f5f5f5;
    --dx-secondary-bg: #fff;
    --dx-tertiary-bg: #f6f6f6;
    --dx-light: #f6f6f6;
    --dx-light-rgb: 246, 246, 246;
    --dx-custom-bg: var(--dx-tertiary-bg);
    --dx-custom-color: #7484a5;
    --dx-spacer: 1.5rem;
    --dx-box-shadow: #e3e0e0 1.95px 1.95px 2.6px;
    --dx-body-font-size: 0.9688rem;
    --dx-sidebar-font-size: 1rem;
    --dx-sidebar-menu-title-font-size: 0.8125rem;
    --dx-primary: #8ab5e9;
    --dx-primary-rgb: 138, 181, 233;
    --dx-primary-text-emphasis: color-mix(
        in srgb,
        var(--dx-primary) 75%,
        #000 25%
    );
    --dx-primary-bg-subtle: color-mix(
        in srgb,
        var(--dx-primary) 10%,
        transparent
    );
    --dx-primary-border-subtle: color-mix(
        in srgb,
        var(--dx-primary) 30%,
        transparent
    );
    --dx-secondary: #6fafa3;
    --dx-secondary-rgb: 111, 175, 163;
    --dx-secondary-text-emphasis: color-mix(
        in srgb,
        var(--dx-secondary) 75%,
        #000 25%
    );
    --dx-secondary-bg-subtle: color-mix(
        in srgb,
        var(--dx-secondary) 10%,
        transparent
    );
    --dx-secondary-border-subtle: color-mix(
        in srgb,
        var(--dx-secondary) 30%,
        transparent
    );
    --dx-success: #52b788;
    --dx-success-rgb: 82, 183, 136;
    --dx-success-text-emphasis: color-mix(
        in srgb,
        var(--dx-success) 75%,
        #000 25%
    );
    --dx-success-bg-subtle: color-mix(
        in srgb,
        var(--dx-success) 10%,
        transparent
    );
    --dx-success-border-subtle: color-mix(
        in srgb,
        var(--dx-success) 30%,
        transparent
    );
    --dx-danger: #ff758f;
    --dx-danger-rgb: 255, 117, 143;
    --dx-danger-text-emphasis: color-mix(
        in srgb,
        var(--dx-danger) 75%,
        #000 25%
    );
    --dx-danger-bg-subtle: color-mix(
        in srgb,
        var(--dx-danger) 10%,
        transparent
    );
    --dx-danger-border-subtle: color-mix(
        in srgb,
        var(--dx-danger) 30%,
        transparent
    );
    --dx-warning: #ffc903;
    --dx-warning-rgb: 255, 201, 3;
    --dx-warning-text-emphasis: color-mix(
        in srgb,
        var(--dx-warning) 75%,
        #000 25%
    );
    --dx-warning-bg-subtle: color-mix(
        in srgb,
        var(--dx-warning) 10%,
        transparent
    );
    --dx-warning-border-subtle: color-mix(
        in srgb,
        var(--dx-warning) 30%,
        transparent
    );
    --dx-info: #4cc9f0;
    --dx-info-rgb: 76, 201, 240;
    --dx-info-text-emphasis: color-mix(in srgb, var(--dx-info) 75%, #000 25%);
    --dx-info-bg-subtle: color-mix(in srgb, var(--dx-info) 10%, transparent);
    --dx-info-border-subtle: color-mix(
        in srgb,
        var(--dx-info) 30%,
        transparent
    );
    --dx-pink: #fd7eac;
    --dx-pink-rgb: 253, 126, 172;
    --dx-pink-text-emphasis: color-mix(in srgb, var(--dx-pink) 75%, #000 25%);
    --dx-pink-bg-subtle: color-mix(in srgb, var(--dx-pink) 10%, transparent);
    --dx-pink-border-subtle: color-mix(
        in srgb,
        var(--dx-pink) 30%,
        transparent
    );
    --dx-indigo: #927ee3;
    --dx-indigo-rgb: 146, 126, 227;
    --dx-indigo-text-emphasis: color-mix(
        in srgb,
        var(--dx-indigo) 75%,
        #000 25%
    );
    --dx-indigo-bg-subtle: color-mix(
        in srgb,
        var(--dx-indigo) 10%,
        transparent
    );
    --dx-indigo-border-subtle: color-mix(
        in srgb,
        var(--dx-indigo) 30%,
        transparent
    );
    --dx-orange: #f9ab53;
    --dx-orange-rgb: 249, 171, 83;
    --dx-orange-text-emphasis: color-mix(
        in srgb,
        var(--dx-orange) 75%,
        #000 25%
    );
    --dx-orange-bg-subtle: color-mix(
        in srgb,
        var(--dx-orange) 10%,
        transparent
    );
    --dx-orange-border-subtle: color-mix(
        in srgb,
        var(--dx-orange) 30%,
        transparent
    );
    --dx-dark: #2b2d42;
    --dx-dark-rgb: 43, 45, 66;
    --dx-dark-text-emphasis: color-mix(in srgb, var(--dx-dark) 75%, #000 25%);
    --dx-dark-bg-subtle: color-mix(in srgb, var(--dx-dark) 10%, transparent);
    --dx-dark-border-subtle: color-mix(
        in srgb,
        var(--dx-dark) 30%,
        transparent
    );
}
[data-theme="modern"] .card {
    --dx-card-border-width: 0;
    --dx-card-border-color: var(--dx-border-color);
    --dx-card-bg: #fff;
    --dx-card-box-shadow: var(--dx-box-shadow);
}
[data-theme="modern"] .modal {
    --dx-modal-bg: var(--dx-secondary-bg);
}
[data-theme="modern"][data-topbar-colors="light"] {
    --dx-topbar-border: var(--dx-border-color);
    --dx-topbar-bg: var(--dx-secondary-bg);
}
[data-theme="modern"][data-sidebar-colors="light"] {
    --dx-sidebar-border: var(--dx-border-color);
    --dx-sidebar-bg: var(--dx-secondary-bg);
}
[data-theme="modern"][data-topbar-colors="dark"] {
    --dx-topbar-bg: #2a2929;
}
[data-theme="modern"][data-sidebar-colors="dark"] {
    --dx-sidebar-bg: #2a2929;
}
[data-theme="modern"][data-bs-theme="dark"] {
    --dx-box-shadow: #11151a70 1.95px 1.95px 2.6px;
}
[data-theme="modern"] .card-title {
    font-size: calc(var(--dx-body-font-size) * 1.1);
}
[data-theme="modern"] .profile-widget {
    margin-inline: calc(var(--dx-spacer) * -0.85);
}
[data-theme="edge"] {
    --dx-font-family-base: "IBM Plex Sans", sans-serif;
    --dx-font-family-heading: "IBM Plex Sans", sans-serif;
    --dx-body-font-size: 0.9375rem;
    --dx-body-bg: #e4edf7;
    --dx-secondary-bg: #e4edf7;
    --dx-secondary-bg-rgb: 228, 237, 247;
    --dx-tertiary-bg: #d9e4f1;
    --dx-tertiary-bg-rgb: 217, 228, 241;
    --dx-light: #f6f6f6;
    --dx-light-rgb: 246, 246, 246;
    --dx-custom-bg: var(--dx-tertiary-bg);
    --dx-custom-color: #7484a5;
    --dx-spacer: 1.5rem;
    --dx-box-shadow:
        8px 8px 9px 0px rgba(0, 0, 0, 0.07),
        -3px -3px 6px 0px rgba(243, 248, 255, 0.9);
    --dx-border-color: #d5e0eb;
    --dx-border-radius: 8px;
    --dx-body-font-size: 0.9688rem;
    --dx-page-wrapper-width: 4rem;
    --dx-sidebar-font-size: 1rem;
    --dx-sidebar-menu-title-font-size: 0.8125rem;
    --dx-primary: #6346eb;
    --dx-primary-rgb: 99, 70, 235;
    --dx-primary-text-emphasis: color-mix(
        in srgb,
        var(--dx-primary) 75%,
        #000 25%
    );
    --dx-primary-bg-subtle: color-mix(
        in srgb,
        var(--dx-primary) 10%,
        transparent
    );
    --dx-primary-border-subtle: color-mix(
        in srgb,
        var(--dx-primary) 30%,
        transparent
    );
    --dx-secondary: #20c9f9;
    --dx-secondary-rgb: 32, 201, 249;
    --dx-secondary-text-emphasis: color-mix(
        in srgb,
        var(--dx-secondary) 75%,
        #000 25%
    );
    --dx-secondary-bg-subtle: color-mix(
        in srgb,
        var(--dx-secondary) 10%,
        transparent
    );
    --dx-secondary-border-subtle: color-mix(
        in srgb,
        var(--dx-secondary) 30%,
        transparent
    );
    --dx-success: #0bcb8b;
    --dx-success-rgb: 11, 203, 139;
    --dx-success-text-emphasis: color-mix(
        in srgb,
        var(--dx-success) 75%,
        #000 25%
    );
    --dx-success-bg-subtle: color-mix(
        in srgb,
        var(--dx-success) 10%,
        transparent
    );
    --dx-success-border-subtle: color-mix(
        in srgb,
        var(--dx-success) 30%,
        transparent
    );
    --dx-danger: #f75c5c;
    --dx-danger-rgb: 247, 92, 92;
    --dx-danger-text-emphasis: color-mix(
        in srgb,
        var(--dx-danger) 75%,
        #000 25%
    );
    --dx-danger-bg-subtle: color-mix(
        in srgb,
        var(--dx-danger) 10%,
        transparent
    );
    --dx-danger-border-subtle: color-mix(
        in srgb,
        var(--dx-danger) 30%,
        transparent
    );
    --dx-warning: #f5c11f;
    --dx-warning-rgb: 245, 193, 31;
    --dx-warning-text-emphasis: color-mix(
        in srgb,
        var(--dx-warning) 75%,
        #000 25%
    );
    --dx-warning-bg-subtle: color-mix(
        in srgb,
        var(--dx-warning) 10%,
        transparent
    );
    --dx-warning-border-subtle: color-mix(
        in srgb,
        var(--dx-warning) 30%,
        transparent
    );
    --dx-info: #18d0d5;
    --dx-info-rgb: 24, 208, 213;
    --dx-info-text-emphasis: color-mix(in srgb, var(--dx-info) 75%, #000 25%);
    --dx-info-bg-subtle: color-mix(in srgb, var(--dx-info) 10%, transparent);
    --dx-info-border-subtle: color-mix(
        in srgb,
        var(--dx-info) 30%,
        transparent
    );
    --dx-pink: #e74da3;
    --dx-pink-rgb: 231, 77, 163;
    --dx-pink-text-emphasis: color-mix(in srgb, var(--dx-pink) 75%, #000 25%);
    --dx-pink-bg-subtle: color-mix(in srgb, var(--dx-pink) 10%, transparent);
    --dx-pink-border-subtle: color-mix(
        in srgb,
        var(--dx-pink) 30%,
        transparent
    );
    --dx-indigo: #9267f5;
    --dx-indigo-rgb: 146, 103, 245;
    --dx-indigo-text-emphasis: color-mix(
        in srgb,
        var(--dx-indigo) 75%,
        #000 25%
    );
    --dx-indigo-bg-subtle: color-mix(
        in srgb,
        var(--dx-indigo) 10%,
        transparent
    );
    --dx-indigo-border-subtle: color-mix(
        in srgb,
        var(--dx-indigo) 30%,
        transparent
    );
    --dx-orange: #ed8e43;
    --dx-orange-rgb: 237, 142, 67;
    --dx-orange-text-emphasis: color-mix(
        in srgb,
        var(--dx-orange) 75%,
        #000 25%
    );
    --dx-orange-bg-subtle: color-mix(
        in srgb,
        var(--dx-orange) 10%,
        transparent
    );
    --dx-orange-border-subtle: color-mix(
        in srgb,
        var(--dx-orange) 30%,
        transparent
    );
    --dx-light: #d9e4f1;
    --dx-light-rgb: 217, 228, 241;
    --dx-light-text-emphasis: color-mix(in srgb, var(--dx-light) 75%, #000 25%);
    --dx-light-bg-subtle: color-mix(in srgb, var(--dx-light) 10%, transparent);
    --dx-light-border-subtle: color-mix(
        in srgb,
        var(--dx-light) 30%,
        transparent
    );
    --dx-dark: #36277c;
    --dx-dark-rgb: 54, 39, 124;
    --dx-dark-text-emphasis: color-mix(in srgb, var(--dx-dark) 75%, #000 25%);
    --dx-dark-bg-subtle: color-mix(in srgb, var(--dx-dark) 10%, transparent);
    --dx-dark-border-subtle: color-mix(
        in srgb,
        var(--dx-dark) 30%,
        transparent
    );
}
[data-theme="edge"] .card {
    --dx-card-border-width: 0;
    --dx-card-border-color: var(--dx-border-color);
    --dx-card-bg: var(--dx-body-bg);
    --dx-card-box-shadow: var(--dx-box-shadow);
}
[data-theme="edge"] .modal {
    --dx-modal-bg: var(--dx-secondary-bg);
}
[data-theme="edge"][data-topbar-colors="light"] {
    --dx-topbar-border: var(--dx-border-color);
    --dx-topbar-bg: var(--dx-body-bg);
}
[data-theme="edge"][data-sidebar-colors="light"] {
    --dx-sidebar-border: var(--dx-border-color);
    --dx-sidebar-bg: var(--dx-body-bg);
}
[data-theme="edge"][data-topbar-colors="dark"] {
    --dx-topbar-bg: #2a2929;
}
[data-theme="edge"][data-sidebar-colors="dark"] {
    --dx-sidebar-bg: #2a2929;
}
[data-theme="edge"]:is([data-bs-theme="dark"], [data-bs-theme="black"]) {
    --dx-box-shadow:
        8px 8px 18px 0px rgba(0, 0, 0, 0.05),
        -3px -3px 10px 0px hsla(0, 0%, 100%, 0.02);
}
[data-theme="edge"] .card-title {
    font-size: calc(var(--dx-body-font-size) * 1.1);
}
[data-theme="edge"] .navbar-search .form-control {
    background-color: rgba(var(--dx-light-rgb), 0.8);
}
[data-theme="edge"] .main-sidebar {
    box-shadow: var(--dx-box-shadow);
}
@media (min-width: 1536px) {
    [data-theme="edge"] .profile-widget {
        margin: -15px calc(var(--dx-page-wrapper-width) * -1.15) 0
            calc(var(--dx-page-wrapper-width) * -1.15);
    }
}
[data-theme="edge"] .main-topbar .navbar-search .form-control,
[data-theme="edge"] .main-topbar .topbar-link .topbar-icon {
    background-color: transparent;
    box-shadow: var(--dx-box-shadow) !important;
}
[data-theme="vertex"] {
    --dx-font-family-base: "Outfit", sans-serif;
    --dx-font-family-heading: "Outfit", sans-serif;
    --dx-body-font-size: 0.9375rem;
    --dx-body-bg: #f2f2f2;
    --dx-secondary-bg: #fff;
    --dx-secondary-bg-rgb: 255, 255, 255;
    --dx-tertiary-bg: #f6f6f6;
    --dx-tertiary-bg-rgb: 246, 246, 246;
    --dx-light: #f6f6f6;
    --dx-light-rgb: 246, 246, 246;
    --dx-custom-bg: var(--dx-tertiary-bg);
    --dx-custom-color: #7484a5;
    --dx-box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px;
    --dx-border-radius: 0.5rem;
    --dx-body-font-size: 1.0313rem;
    --dx-sidebar-font-size: 1rem;
    --dx-sidebar-menu-title-font-size: 0.8125rem;
    --dx-primary: #8b19cd;
    --dx-primary-rgb: 139, 25, 205;
    --dx-primary-text-emphasis: color-mix(
        in srgb,
        var(--dx-primary) 75%,
        #000 25%
    );
    --dx-primary-bg-subtle: color-mix(
        in srgb,
        var(--dx-primary) 10%,
        transparent
    );
    --dx-primary-border-subtle: color-mix(
        in srgb,
        var(--dx-primary) 30%,
        transparent
    );
    --dx-secondary: #2c8ebf;
    --dx-secondary-rgb: 44, 142, 191;
    --dx-secondary-text-emphasis: color-mix(
        in srgb,
        var(--dx-secondary) 75%,
        #000 25%
    );
    --dx-secondary-bg-subtle: color-mix(
        in srgb,
        var(--dx-secondary) 10%,
        transparent
    );
    --dx-secondary-border-subtle: color-mix(
        in srgb,
        var(--dx-secondary) 30%,
        transparent
    );
    --dx-success: #45b511;
    --dx-success-rgb: 69, 181, 17;
    --dx-success-text-emphasis: color-mix(
        in srgb,
        var(--dx-success) 75%,
        #000 25%
    );
    --dx-success-bg-subtle: color-mix(
        in srgb,
        var(--dx-success) 10%,
        transparent
    );
    --dx-success-border-subtle: color-mix(
        in srgb,
        var(--dx-success) 30%,
        transparent
    );
    --dx-danger: #db4066;
    --dx-danger-rgb: 219, 64, 102;
    --dx-danger-text-emphasis: color-mix(
        in srgb,
        var(--dx-danger) 75%,
        #000 25%
    );
    --dx-danger-bg-subtle: color-mix(
        in srgb,
        var(--dx-danger) 10%,
        transparent
    );
    --dx-danger-border-subtle: color-mix(
        in srgb,
        var(--dx-danger) 30%,
        transparent
    );
    --dx-warning: #f8c630;
    --dx-warning-rgb: 248, 198, 48;
    --dx-warning-text-emphasis: color-mix(
        in srgb,
        var(--dx-warning) 75%,
        #000 25%
    );
    --dx-warning-bg-subtle: color-mix(
        in srgb,
        var(--dx-warning) 10%,
        transparent
    );
    --dx-warning-border-subtle: color-mix(
        in srgb,
        var(--dx-warning) 30%,
        transparent
    );
    --dx-info: #44cfa4;
    --dx-info-rgb: 68, 207, 164;
    --dx-info-text-emphasis: color-mix(in srgb, var(--dx-info) 75%, #000 25%);
    --dx-info-bg-subtle: color-mix(in srgb, var(--dx-info) 10%, transparent);
    --dx-info-border-subtle: color-mix(
        in srgb,
        var(--dx-info) 30%,
        transparent
    );
    --dx-pink: #ff6392;
    --dx-pink-rgb: 255, 99, 146;
    --dx-pink-text-emphasis: color-mix(in srgb, var(--dx-pink) 75%, #000 25%);
    --dx-pink-bg-subtle: color-mix(in srgb, var(--dx-pink) 10%, transparent);
    --dx-pink-border-subtle: color-mix(
        in srgb,
        var(--dx-pink) 30%,
        transparent
    );
    --dx-indigo: #748ffc;
    --dx-indigo-rgb: 116, 143, 252;
    --dx-indigo-text-emphasis: color-mix(
        in srgb,
        var(--dx-indigo) 75%,
        #000 25%
    );
    --dx-indigo-bg-subtle: color-mix(
        in srgb,
        var(--dx-indigo) 10%,
        transparent
    );
    --dx-indigo-border-subtle: color-mix(
        in srgb,
        var(--dx-indigo) 30%,
        transparent
    );
    --dx-orange: #eb8258;
    --dx-orange-rgb: 235, 130, 88;
    --dx-orange-text-emphasis: color-mix(
        in srgb,
        var(--dx-orange) 75%,
        #000 25%
    );
    --dx-orange-bg-subtle: color-mix(
        in srgb,
        var(--dx-orange) 10%,
        transparent
    );
    --dx-orange-border-subtle: color-mix(
        in srgb,
        var(--dx-orange) 30%,
        transparent
    );
    --dx-light: #f4f7fe;
    --dx-light-rgb: 244, 247, 254;
    --dx-light-text-emphasis: color-mix(in srgb, var(--dx-light) 75%, #000 25%);
    --dx-light-bg-subtle: color-mix(in srgb, var(--dx-light) 10%, transparent);
    --dx-light-border-subtle: color-mix(
        in srgb,
        var(--dx-light) 30%,
        transparent
    );
    --dx-dark: #25291c;
    --dx-dark-rgb: 37, 41, 28;
    --dx-dark-text-emphasis: color-mix(in srgb, var(--dx-dark) 75%, #000 25%);
    --dx-dark-bg-subtle: color-mix(in srgb, var(--dx-dark) 10%, transparent);
    --dx-dark-border-subtle: color-mix(
        in srgb,
        var(--dx-dark) 30%,
        transparent
    );
}
[data-theme="vertex"] .card {
    --dx-card-border-width: 1px;
    --dx-card-border-color: var(--dx-border-color);
    --dx-card-bg: #fff;
    --dx-card-box-shadow: var(--dx-box-shadow);
}
[data-theme="vertex"] .modal {
    --dx-modal-bg: var(--dx-secondary-bg);
}
[data-theme="vertex"][data-topbar-colors="light"] {
    --dx-topbar-border: var(--dx-border-color);
    --dx-topbar-bg: var(--dx-secondary-bg);
}
[data-theme="vertex"][data-sidebar-colors="light"] {
    --dx-sidebar-border: var(--dx-border-color);
    --dx-sidebar-bg: var(--dx-secondary-bg);
}
[data-theme="vertex"][data-topbar-colors="dark"] {
    --dx-topbar-bg: #2a2929;
}
[data-theme="vertex"][data-sidebar-colors="dark"] {
    --dx-sidebar-bg: #2a2929;
}
[data-theme="vertex"] .card-title {
    font-size: calc(var(--dx-body-font-size) * 1.1);
}
[data-theme="prime"] {
    --dx-font-family-base: "Strichpunkt Sans", sans-serif;
    --dx-font-family-heading: "Strichpunkt Sans", sans-serif;
    --dx-body-font-size: 0.9375rem;
    --dx-body-bg: #faf6f5;
    --dx-secondary-bg: #fff;
    --dx-secondary-bg-rgb: 255, 255, 255;
    --dx-tertiary-bg: #f6f6f6;
    --dx-tertiary-bg-rgb: 246, 246, 246;
    --dx-light: #f6f6f6;
    --dx-light-rgb: 246, 246, 246;
    --dx-custom-bg: var(--dx-tertiary-bg);
    --dx-custom-color: #7484a5;
    --dx-spacer: 1.5rem;
    --dx-box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.08), 0 2px 10px rgba(0, 0, 0, 0.04);
    --dx-border-radius: 0.5rem;
    --dx-font-weight-semibold: 700;
    --dx-font-weight-medium: 600;
    --dx-page-wrapper-width: 4rem;
    --dx-sidebar-font-size: 0.9688rem;
    --dx-sidebar-menu-title-font-size: 0.7813rem;
    --dx-primary: #874883;
    --dx-primary-rgb: 135, 72, 131;
    --dx-primary-text-emphasis: color-mix(
        in srgb,
        var(--dx-primary) 75%,
        #000 25%
    );
    --dx-primary-bg-subtle: color-mix(
        in srgb,
        var(--dx-primary) 10%,
        transparent
    );
    --dx-primary-border-subtle: color-mix(
        in srgb,
        var(--dx-primary) 30%,
        transparent
    );
    --dx-secondary: #240018;
    --dx-secondary-rgb: 36, 0, 24;
    --dx-secondary-text-emphasis: color-mix(
        in srgb,
        var(--dx-secondary) 75%,
        #000 25%
    );
    --dx-secondary-bg-subtle: color-mix(
        in srgb,
        var(--dx-secondary) 10%,
        transparent
    );
    --dx-secondary-border-subtle: color-mix(
        in srgb,
        var(--dx-secondary) 30%,
        transparent
    );
    --dx-success: #42c3a1;
    --dx-success-rgb: 66, 195, 161;
    --dx-success-text-emphasis: color-mix(
        in srgb,
        var(--dx-success) 75%,
        #000 25%
    );
    --dx-success-bg-subtle: color-mix(
        in srgb,
        var(--dx-success) 10%,
        transparent
    );
    --dx-success-border-subtle: color-mix(
        in srgb,
        var(--dx-success) 30%,
        transparent
    );
    --dx-danger: #e96b60;
    --dx-danger-rgb: 233, 107, 96;
    --dx-danger-text-emphasis: color-mix(
        in srgb,
        var(--dx-danger) 75%,
        #000 25%
    );
    --dx-danger-bg-subtle: color-mix(
        in srgb,
        var(--dx-danger) 10%,
        transparent
    );
    --dx-danger-border-subtle: color-mix(
        in srgb,
        var(--dx-danger) 30%,
        transparent
    );
    --dx-warning: #edd843;
    --dx-warning-rgb: 237, 216, 67;
    --dx-warning-text-emphasis: color-mix(
        in srgb,
        var(--dx-warning) 75%,
        #000 25%
    );
    --dx-warning-bg-subtle: color-mix(
        in srgb,
        var(--dx-warning) 10%,
        transparent
    );
    --dx-warning-border-subtle: color-mix(
        in srgb,
        var(--dx-warning) 30%,
        transparent
    );
    --dx-info: #5db5e5;
    --dx-info-rgb: 93, 181, 229;
    --dx-info-text-emphasis: color-mix(in srgb, var(--dx-info) 75%, #000 25%);
    --dx-info-bg-subtle: color-mix(in srgb, var(--dx-info) 10%, transparent);
    --dx-info-border-subtle: color-mix(
        in srgb,
        var(--dx-info) 30%,
        transparent
    );
    --dx-pink: #ff6392;
    --dx-pink-rgb: 255, 99, 146;
    --dx-pink-text-emphasis: color-mix(in srgb, var(--dx-pink) 75%, #000 25%);
    --dx-pink-bg-subtle: color-mix(in srgb, var(--dx-pink) 10%, transparent);
    --dx-pink-border-subtle: color-mix(
        in srgb,
        var(--dx-pink) 30%,
        transparent
    );
    --dx-indigo: #748ffc;
    --dx-indigo-rgb: 116, 143, 252;
    --dx-indigo-text-emphasis: color-mix(
        in srgb,
        var(--dx-indigo) 75%,
        #000 25%
    );
    --dx-indigo-bg-subtle: color-mix(
        in srgb,
        var(--dx-indigo) 10%,
        transparent
    );
    --dx-indigo-border-subtle: color-mix(
        in srgb,
        var(--dx-indigo) 30%,
        transparent
    );
    --dx-orange: #eb8258;
    --dx-orange-rgb: 235, 130, 88;
    --dx-orange-text-emphasis: color-mix(
        in srgb,
        var(--dx-orange) 75%,
        #000 25%
    );
    --dx-orange-bg-subtle: color-mix(
        in srgb,
        var(--dx-orange) 10%,
        transparent
    );
    --dx-orange-border-subtle: color-mix(
        in srgb,
        var(--dx-orange) 30%,
        transparent
    );
    --dx-light: #f4f7fe;
    --dx-light-rgb: 244, 247, 254;
    --dx-light-text-emphasis: color-mix(in srgb, var(--dx-light) 75%, #000 25%);
    --dx-light-bg-subtle: color-mix(in srgb, var(--dx-light) 10%, transparent);
    --dx-light-border-subtle: color-mix(
        in srgb,
        var(--dx-light) 30%,
        transparent
    );
    --dx-dark: #25291c;
    --dx-dark-rgb: 37, 41, 28;
    --dx-dark-text-emphasis: color-mix(in srgb, var(--dx-dark) 75%, #000 25%);
    --dx-dark-bg-subtle: color-mix(in srgb, var(--dx-dark) 10%, transparent);
    --dx-dark-border-subtle: color-mix(
        in srgb,
        var(--dx-dark) 30%,
        transparent
    );
}
[data-theme="prime"] .card {
    --dx-card-border-width: 0px;
    --dx-card-border-color: var(--dx-border-color);
    --dx-card-bg: #fff;
    --dx-card-box-shadow: var(--dx-box-shadow);
}
[data-theme="prime"] .modal {
    --dx-modal-bg: var(--dx-secondary-bg);
}
[data-theme="prime"][data-topbar-colors="light"] {
    --dx-topbar-border: var(--dx-border-color);
    --dx-topbar-bg: var(--dx-secondary-bg);
}
[data-theme="prime"][data-sidebar-colors="light"] {
    --dx-sidebar-border: var(--dx-border-color);
    --dx-sidebar-bg: var(--dx-secondary-bg);
}
[data-theme="prime"][data-topbar-colors="dark"] {
    --dx-topbar-bg: #21071e;
}
[data-theme="prime"][data-sidebar-colors="dark"] {
    --dx-sidebar-bg: #21071e;
}
[data-theme="prime"] .card-title {
    font-size: calc(var(--dx-body-font-size) * 1.1);
}
@media (min-width: 1536px) {
    [data-theme="prime"] .profile-widget {
        margin: -15px calc(var(--dx-page-wrapper-width) * -1.15) 0
            calc(var(--dx-page-wrapper-width) * -1.15);
    }
}
[data-theme="vision"] {
    --dx-font-family-base: "Rethink Sans", sans-serif;
    --dx-font-family-heading: "Rethink Sans", sans-serif;
    --dx-body-font-size: 1rem;
    --dx-body-bg: #f2f7fa;
    --dx-secondary-bg: #fff;
    --dx-tertiary-bg: #f6f6f6;
    --dx-light: #f6f6f6;
    --dx-light-rgb: 246, 246, 246;
    --dx-custom-bg: var(--dx-tertiary-bg);
    --dx-custom-color: #7484a5;
    --dx-spacer: 18px;
    --dx-box-shadow: rgba(149, 157, 165, 0.02) 0px 6px 8px;
    --dx-border-radius: 0.875rem;
    --dx-border-radius-sm: 0.625rem;
    --dx-body-font-size: 0.9375rem;
    --dx-sidebar-font-size: 16px;
    --dx-sidebar-menu-title-font-size: 12px;
    --dx-primary: #3b8ae9;
    --dx-primary-rgb: 59, 138, 233;
    --dx-primary-text-emphasis: color-mix(
        in srgb,
        var(--dx-primary) 75%,
        #000 25%
    );
    --dx-primary-bg-subtle: color-mix(
        in srgb,
        var(--dx-primary) 10%,
        transparent
    );
    --dx-primary-border-subtle: color-mix(
        in srgb,
        var(--dx-primary) 30%,
        transparent
    );
    --dx-success: #2bab75;
    --dx-success-rgb: 43, 171, 117;
    --dx-success-text-emphasis: color-mix(
        in srgb,
        var(--dx-success) 75%,
        #000 25%
    );
    --dx-success-bg-subtle: color-mix(
        in srgb,
        var(--dx-success) 10%,
        transparent
    );
    --dx-success-border-subtle: color-mix(
        in srgb,
        var(--dx-success) 30%,
        transparent
    );
    --dx-danger: #eb6565;
    --dx-danger-rgb: 235, 101, 101;
    --dx-danger-text-emphasis: color-mix(
        in srgb,
        var(--dx-danger) 75%,
        #000 25%
    );
    --dx-danger-bg-subtle: color-mix(
        in srgb,
        var(--dx-danger) 10%,
        transparent
    );
    --dx-danger-border-subtle: color-mix(
        in srgb,
        var(--dx-danger) 30%,
        transparent
    );
    --dx-secondary: #d98a54;
    --dx-secondary-rgb: 217, 138, 84;
    --dx-secondary-text-emphasis: color-mix(
        in srgb,
        var(--dx-secondary) 75%,
        #000 25%
    );
    --dx-secondary-bg-subtle: color-mix(
        in srgb,
        var(--dx-secondary) 10%,
        transparent
    );
    --dx-secondary-border-subtle: color-mix(
        in srgb,
        var(--dx-secondary) 30%,
        transparent
    );
    --dx-info: #52b6c9;
    --dx-info-rgb: 82, 182, 201;
    --dx-info-text-emphasis: color-mix(in srgb, var(--dx-info) 75%, #000 25%);
    --dx-info-bg-subtle: color-mix(in srgb, var(--dx-info) 10%, transparent);
    --dx-info-border-subtle: color-mix(
        in srgb,
        var(--dx-info) 30%,
        transparent
    );
    --dx-warning: #e1ca61;
    --dx-warning-rgb: 225, 202, 97;
    --dx-warning-text-emphasis: color-mix(
        in srgb,
        var(--dx-warning) 75%,
        #000 25%
    );
    --dx-warning-bg-subtle: color-mix(
        in srgb,
        var(--dx-warning) 10%,
        transparent
    );
    --dx-warning-border-subtle: color-mix(
        in srgb,
        var(--dx-warning) 30%,
        transparent
    );
    --dx-pink: #d16ebd;
    --dx-pink-rgb: 209, 110, 189;
    --dx-pink-text-emphasis: color-mix(in srgb, var(--dx-pink) 75%, #000 25%);
    --dx-pink-bg-subtle: color-mix(in srgb, var(--dx-pink) 10%, transparent);
    --dx-pink-border-subtle: color-mix(
        in srgb,
        var(--dx-pink) 30%,
        transparent
    );
    --dx-indigo: #7974d7;
    --dx-indigo-rgb: 121, 116, 215;
    --dx-indigo-text-emphasis: color-mix(
        in srgb,
        var(--dx-indigo) 75%,
        #000 25%
    );
    --dx-indigo-bg-subtle: color-mix(
        in srgb,
        var(--dx-indigo) 10%,
        transparent
    );
    --dx-indigo-border-subtle: color-mix(
        in srgb,
        var(--dx-indigo) 30%,
        transparent
    );
    --dx-orange: #e78b30;
    --dx-orange-rgb: 231, 139, 48;
    --dx-orange-text-emphasis: color-mix(
        in srgb,
        var(--dx-orange) 75%,
        #000 25%
    );
    --dx-orange-bg-subtle: color-mix(
        in srgb,
        var(--dx-orange) 10%,
        transparent
    );
    --dx-orange-border-subtle: color-mix(
        in srgb,
        var(--dx-orange) 30%,
        transparent
    );
    --dx-dark: #312f2e;
    --dx-dark-rgb: 49, 47, 46;
    --dx-dark-text-emphasis: color-mix(in srgb, var(--dx-dark) 75%, #000 25%);
    --dx-dark-bg-subtle: color-mix(in srgb, var(--dx-dark) 10%, transparent);
    --dx-dark-border-subtle: color-mix(
        in srgb,
        var(--dx-dark) 30%,
        transparent
    );
}
[data-theme="vision"] .card {
    --dx-card-border-width: 1px;
    --dx-card-box-shadow: var(--dx-box-shadow);
    --dx-card-border-color: var(--dx-border-color);
}
[data-theme="vision"] .modal {
    --dx-modal-bg: var(--dx-secondary-bg);
}
[data-theme="vision"][data-topbar-colors="light"] {
    --dx-topbar-border: var(--dx-border-color);
    --dx-topbar-bg: var(--dx-secondary-bg);
}
[data-theme="vision"][data-sidebar-colors="light"] {
    --dx-sidebar-bg: var(--dx-secondary-bg);
}
[data-theme="vision"][data-topbar-colors="dark"] {
    --dx-topbar-bg: #2a2929;
}
[data-theme="vision"][data-sidebar-colors="dark"] {
    --dx-sidebar-bg: #2a2929;
}
[data-theme="vision"] .card-title {
    font-size: calc(var(--dx-body-font-size) * 1.1);
}
[data-theme="vision"] .main-topbar {
    border-bottom: 1px solid var(--dx-border-color);
}
.page-wrapper {
    padding-inline: 0.25rem;
    padding-bottom: 3.5rem;
    padding-block: calc(var(--dx-topbar) * 1.1) 3.5rem;
}
@media (min-width: 992px) {
    .page-wrapper {
        margin-right: var(--dx-sidebar);
    }
}
@media (min-width: 1536px) {
    .page-wrapper {
        padding-inline: var(--dx-page-wrapper-width);
    }
}
.main-sidebar {
    position: fixed;
    bottom: 0;
    right: 0;
    transition: all 0.3s ease-in-out;
    z-index: 1005;
    top: var(--dx-topbar);
    width: var(--dx-sidebar);
    border-left: 1px solid var(--dx-sidebar-border);
    background: var(--dx-sidebar-bg);
    backdrop-filter: blur(14px);
}
@media (prefers-reduced-motion: reduce) {
    .main-sidebar {
        transition: none;
    }
}
.main-sidebar .navbar-brand {
    display: none;
    align-items: center;
    justify-content: center;
    height: var(--dx-topbar);
    width: var(--dx-sidebar);
}
@media (max-width: 991.98px) {
    .main-sidebar {
        top: 0;
    }
}
.main-sidebar .profile-dropdown {
    background-image: url(https://srbthemes.kcubeinfotech.com/alloce/images/others/profile-bg.webp);
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    display: none;
}
.main-sidebar .profile-dropdown:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        var(--dx-sidebar-bg) 0,
        transparent 50%,
        var(--dx-sidebar-bg) 100%
    );
}
.main-sidebar .profile-dropdown .btn {
    color: var(--dx-sidebar-link-active-color) !important;
}
.main-sidebar .profile-dropdown .btn:active {
    border-color: transparent;
}
.main-sidebar .profile-dropdown .btn .profile-version {
    padding-block: 2px;
    right: -1.25rem;
}
.main-sidebar .profile-dropdown .admin-name {
    color: var(--dx-sidebar-link-active-color);
}
.main-sidebar .profile-dropdown .admin-id {
    color: var(--dx-sidebar-link-sub-color);
}
.main-sidebar .profile-dropdown .profile-dropdown-menu .profile-link {
    display: block;
    transition: all 0.3s ease-in-out;
    padding: 0.5rem;
    color: var(--dx-secondary-color);
}
@media (prefers-reduced-motion: reduce) {
    .main-sidebar .profile-dropdown .profile-dropdown-menu .profile-link {
        transition: none;
    }
}
.main-sidebar .profile-dropdown .profile-dropdown-menu .profile-link:hover {
    color: var(--dx-primary);
}
[data-profile-sidebar] .main-sidebar .profile-dropdown {
    display: block;
}
.navbar-menu {
    height: calc(100vh - 5rem);
}
[data-profile-sidebar] .navbar-menu {
    height: calc(100vh - 14.5rem);
}
@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: var(--dx-sidebar-menu-title-font-size);
    line-height: 1.25rem;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--dx-sidebar-menu-title);
}
.navbar-menu .nav-item {
    margin: 2px 14px;
}
.navbar-menu .nav-item > .nav-link {
    border-right: 1.5px solid transparent;
}
.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.3s 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-right: 0.45rem;
}
.navbar-menu .nav-item .nav-menu-sub li {
    position: relative;
}
.navbar-menu .nav-item .nav-menu-sub .nav-link {
    padding: 0.5rem 2rem 0.5rem 1.5rem;
    font-size: var(--dx-body-font-size);
    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:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0.875rem;
    transform: translateY(-50%);
    height: 0.3125rem;
    width: 0.3125rem;
    background-color: var(--dx-sidebar-effect-color);
    border-radius: 50%;
    transition: all 0.3s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
    .navbar-menu .nav-item .nav-menu-sub .nav-link:after {
        transition: none;
    }
}
.navbar-menu .nav-item .nav-menu-sub .nav-link:is(:hover, .active):after {
    background-color: var(--dx-sidebar-effect-hover-color);
}
.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.active {
    color: var(--dx-sidebar-link-sub-active-color);
    background-color: transparent;
}
.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 {
        right: calc(var(--dx-sidebar-sm) * -1.1);
    }
    .sidebar-hidden .main-topbar {
        right: 0 !important;
    }
    .sidebar-hidden .page-wrapper {
        margin-right: 0 !important;
    }
}
@media (max-width: 991.98px) {
    .sidebar-hidden .main-sidebar {
        right: calc(var(--dx-sidebar) * -1.1);
    }
    .sidebar-hidden .main-sidebar.show {
        right: 0;
    }
}
[data-sidebar="medium"] .main-sidebar,
[data-sidebar="medium"] .main-sidebar .navbar-brand {
    width: var(--dx-sidebar-md);
}
[data-sidebar="medium"] .profile-dropdown :is(.arrow) {
    display: none;
}
[data-sidebar="medium"] .navbar-menu .nav-menu-title {
    text-align: center;
}
[data-sidebar="medium"] .navbar-menu .nav-item {
    margin-inline: 0;
}
[data-sidebar="medium"] .navbar-menu .nav-item :is(.menu-arrow) {
    display: none;
}
[data-sidebar="medium"] .navbar-menu .nav-item .nav-link {
    flex-direction: column;
    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-right: 0;
}
[data-sidebar="medium"] .navbar-menu .nav-item .nav-menu-sub li:before {
    display: none;
}
[data-sidebar="medium"] .navbar-menu .nav-item .nav-menu-sub .nav-link {
    margin: 0;
    padding: 0.5rem 1.5rem;
    width: 100%;
}
[data-sidebar="medium"] .navbar-menu .nav-item .nav-menu-sub .nav-link:after {
    display: none;
}
[data-sidebar="medium"] .navbar-menu .nav-item .nav-menu-sub .nav-link.active {
    background-color: transparent;
}
@media (min-width: 992px) {
    [data-sidebar="medium"] .page-wrapper {
        margin-right: var(--dx-sidebar-md);
    }
    [data-sidebar="medium"] .main-footer {
        right: var(--dx-sidebar-md);
    }
}
[data-sidebar="small"] .main-sidebar,
[data-sidebar="small"] .main-sidebar .navbar-brand {
    width: var(--dx-sidebar-sm);
}
[data-sidebar="small"] .profile-dropdown :is(.content, .arrow) {
    display: none;
}
[data-sidebar="small"] .navbar-menu .nav-menu-title {
    display: none;
}
[data-sidebar="small"] .navbar-menu .nav-item :is(.content, .menu-arrow) {
    display: none;
}
[data-sidebar="small"] .navbar-menu .nav-item .nav-link {
    width: calc(var(--dx-sidebar-sm) - 24px);
    margin-inline: auto;
    padding-block: 0.75rem;
}
[data-sidebar="small"] .navbar-menu .nav-item .nav-link .icons {
    font-size: 1.125rem;
}
[data-sidebar="small"] .navbar-menu .nav-item .nav-link.active {
    background-color: var(--dx-sidebar-link-bg-active-color);
}
[data-sidebar="small"] .navbar-menu .nav-item .nav-menu-sub {
    position: fixed;
    right: var(--dx-sidebar-sm);
    background-color: var(--dx-sidebar-bg);
    box-shadow: var(--dx-sidebar-dropdown-shadow);
    margin-right: 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 li:before {
    display: none !important;
}
[data-sidebar="small"] .navbar-menu .nav-item .nav-menu-sub .nav-link {
    margin: 0;
    padding: 0.5rem 2rem 0.5rem 1.5rem;
    width: 100%;
}
[data-sidebar="small"] .navbar-menu .nav-item .nav-menu-sub .nav-link:after {
    right: 0.875rem;
}
[data-sidebar="small"] .navbar-menu .nav-item .nav-menu-sub .nav-link.active {
    background-color: transparent;
}
@media (min-width: 992px) {
    [data-sidebar="small"] .page-wrapper {
        margin-right: var(--dx-sidebar-sm);
    }
    [data-sidebar="small"] .main-footer {
        right: var(--dx-sidebar-sm);
    }
}
[data-sidebar="offcanvas"] .main-topbar {
    right: 0;
}
[data-sidebar="offcanvas"] .main-sidebar {
    right: calc(var(--dx-sidebar) * -1.1);
}
[data-sidebar="offcanvas"] .main-sidebar.show {
    right: 0;
}
[data-sidebar="offcanvas"] .page-wrapper {
    margin-right: 0;
}
[data-sidebar="offcanvas"] .main-footer {
    right: 0;
}
.main-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--dx-topbar);
    display: flex;
    z-index: 1003;
    padding-inline-end: 1rem;
    border-bottom: 1px solid transparent;
    background-color: var(--dx-topbar-bg);
    transition: all 0.3s ease-in-out;
    backdrop-filter: blur(14px);
}
@media (prefers-reduced-motion: reduce) {
    .main-topbar {
        transition: none;
    }
}
.main-topbar.nav-sticky {
    border-color: var(--dx-topbar-border);
}
.main-topbar .navbar-brand {
    width: var(--dx-sidebar);
    padding-inline-start: 1rem;
}
.main-topbar .navbar-brand,
.main-topbar .topbar-link {
    height: var(--dx-topbar);
    display: flex;
    align-items: center;
}
.main-topbar .topbar-link {
    justify-content: center;
    padding: 0;
    width: 2.25rem;
    color: var(--dx-topbar-color) !important;
    border: none;
    box-shadow: none;
}
.main-topbar .topbar-link .topbar-icon {
    height: 2.25rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50rem;
    background-color: var(--dx-topbar-icon-bg-color);
}
.main-topbar .topbar-link .topbar-icon:hover {
    background-color: var(--dx-topbar-icon-bg-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-inline-start: 0.5rem;
    color: var(--dx-topbar-color);
}
.main-topbar .profile-dropdown {
    display: block;
    background-image: none;
}
.main-topbar .profile-dropdown:before {
    display: none;
}
.main-topbar .profile-dropdown .admin-name {
    color: var(--dx-body-color);
}
.main-topbar .profile-dropdown .admin-designation {
    color: rgba(var(--dx-body-color-rgb), 0.5);
}
.main-topbar .profile-dropdown .profile-border-color {
    border-color: var(--dx-topbar-bg) !important;
}
.main-topbar .profile-dropdown .profile-version {
    padding-block: 2px;
}
.main-topbar .profile-dropdown .btn {
    color: var(--dx-topbar-color) !important;
}
[data-profile-sidebar] .main-topbar .profile-dropdown {
    display: none;
}
.profile-dropdown-menu {
    width: 17rem;
}
@media (max-width: 767.98px) {
    .profile-dropdown-menu {
        min-width: 18rem;
        width: auto;
    }
}
.profile-dropdown-menu .dropdown-item:hover {
    background-color: transparent;
}
.topbar-mode .light {
    display: none;
}
:is([data-bs-theme="dark"], [data-bs-theme="black"]) .topbar-mode .light {
    display: inline-block;
}
:is([data-bs-theme="dark"], [data-bs-theme="black"]) .topbar-mode .dark {
    display: none;
}
.navbar-search .icon {
    position: absolute;
    top: 14px;
    left: 15px;
    color: var(--dx-topbar-color);
}
.navbar-search .form-control {
    background-color: var(--dx-topbar-icon-bg-color);
    width: 20rem;
    padding-inline-end: 39px;
    color: var(--dx-topbar-color);
}
.navbar-search .form-control::-moz-placeholder {
    color: var(--dx-topbar-color);
    opacity: 0.75;
}
.navbar-search .form-control::placeholder {
    color: var(--dx-topbar-color);
    opacity: 0.75;
}
.dropdown-menu-topbar {
    max-height: calc(100vh - var(--dx-topbar) - 26px);
    overflow-y: auto;
}
.notification-animate {
    position: absolute;
    top: 25px;
    left: 7px;
}
.topbar-notification {
    max-height: calc(100vh - 205px);
}
.topbar-notification .notification-item {
    position: relative;
    color: currentColor;
    transition: all 0.3s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
    .topbar-notification .notification-item {
        transition: none;
    }
}
.topbar-notification .notification-item .unread-dot {
    display: none;
}
.topbar-notification .notification-item:not(:last-child) {
    border-bottom: 1px solid var(--dx-border-color);
}
.topbar-notification .notification-item:is(.unread, :hover) .unread-dot {
    display: block;
}
#toolAppsModal .app-card {
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    overflow: hidden;
    border: 1px solid var(--dx-border-color) !important;
}
@media (prefers-reduced-motion: reduce) {
    #toolAppsModal .app-card {
        transition: none;
    }
}
#toolAppsModal .app-card:hover {
    border-color: var(--dx-primary) !important;
}
#toolAppsModal .app-card.active {
    transform: translateY(-2px);
}
#toolAppsModal .form-check-input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    margin: 8px;
}
#toolAppsModal .app-item {
    transition: all 0.3s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
    #toolAppsModal .app-item {
        transition: none;
    }
}
#toolAppsModal .app-item.filtered-out {
    display: none !important;
}
#toolAppsModal .app-item.selected-app .app-card {
    border-color: var(--dx-primary) !important;
    position: relative;
}
#toolAppsModal .app-item.selected-app .app-card .form-check-input {
    opacity: 1;
}
#toolAppsModal .app-item {
    animation: fadeInUp 0.5s ease forwards;
    opacity: 0;
    transform: translateY(20px);
}
#toolAppsModal .app-item:first-child {
    animation-delay: 0.1s;
}
#toolAppsModal .app-item:nth-child(2) {
    animation-delay: 0.2s;
}
#toolAppsModal .app-item:nth-child(3) {
    animation-delay: 0.3s;
}
#toolAppsModal .app-item:nth-child(4) {
    animation-delay: 0.4s;
}
#toolAppsModal .app-item:nth-child(5) {
    animation-delay: 0.5s;
}
#toolAppsModal .app-item:nth-child(6) {
    animation-delay: 0.6s;
}
#toolAppsModal .app-item:nth-child(7) {
    animation-delay: 0.7s;
}
#toolAppsModal .app-item:nth-child(8) {
    animation-delay: 0.8s;
}
#toolAppsModal .app-item:nth-child(9) {
    animation-delay: 0.9s;
}
#toolAppsModal .app-item:nth-child(10) {
    animation-delay: 1s;
}
#toolAppsModal .app-item:nth-child(11) {
    animation-delay: 1.1s;
}
#toolAppsModal .app-item:nth-child(12) {
    animation-delay: 1.2s;
}
#toolAppsModal .app-item:nth-child(13) {
    animation-delay: 1.3s;
}
#toolAppsModal .app-item:nth-child(14) {
    animation-delay: 1.4s;
}
#toolAppsModal .app-item:nth-child(15) {
    animation-delay: 1.5s;
}
#toolAppsModal .app-item:nth-child(16) {
    animation-delay: 1.6s;
}
#toolAppsModal .app-item:nth-child(17) {
    animation-delay: 1.7s;
}
#toolAppsModal .app-item:nth-child(18) {
    animation-delay: 1.8s;
}
#toolAppsModal .app-item:nth-child(19) {
    animation-delay: 1.9s;
}
#toolAppsModal .app-item:nth-child(20) {
    animation-delay: 2s;
}
#toolAppsModal #noResults {
    animation: fadeIn 0.5s ease;
}
#toolAppsModal #noResults.d-none {
    display: none !important;
}
#toolAppsModal #noResults:not(.d-none) {
    display: block !important;
}
.dropdown-menu-lg {
    width: 25rem;
}
@media (max-width: 767.98px) {
    .dropdown-menu-lg {
        min-width: 18rem;
        width: auto;
    }
}
.dropdown-menu-md {
    width: 13rem;
}
:is(
        [data-topbar-colors="dark"],
        [data-topbar-colors="brand"],
        [data-topbar-colors="wine"],
        [data-topbar-colors="sky"],
        [data-nav-type="pattern"],
        [data-bs-theme="black"]
    )
    .logos
    .logo-light {
    display: block;
}
:is(
        [data-topbar-colors="dark"],
        [data-topbar-colors="brand"],
        [data-topbar-colors="wine"],
        [data-topbar-colors="sky"],
        [data-nav-type="pattern"],
        [data-bs-theme="black"]
    )
    .logos
    .logo-dark {
    display: none;
}
.main-footer {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 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 {
        right: var(--dx-sidebar);
    }
}
@media (min-width: 1200px) {
    .main-footer {
        padding-inline: 1rem;
    }
}
@media (min-width: 1536px) {
    .main-footer {
        margin-inline: 1.25rem;
    }
}
:is([data-layout="modern"], [data-layout="boxed"])[data-nav-type="floating"]
    .main-topbar {
    position: absolute;
}
:is([data-layout="modern"], [data-layout="boxed"])[data-nav-type="boxed"]
    .main-topbar {
    border: 1px solid var(--dx-topbar-border);
    margin: 0.75rem 1.25rem;
    border-radius: 7px;
}
:is([data-layout="modern"], [data-layout="boxed"])[data-nav-type="boxed"]
    .main-topbar.nav-sticky {
    margin-top: 0;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}
:is([data-layout="modern"], [data-layout="boxed"])[data-nav-type="boxed"]
    .page-wrapper {
    padding-top: calc(var(--dx-topbar) * 1.3);
}
:is([data-layout="modern"], [data-layout="boxed"])[data-nav-type="pattern"]:not(
        [data-layout="boxed"]
    )
    .main-topbar {
    border-color: rgba(var(--dx-white-rgb), 0.2);
    background-color: transparent;
}
:is([data-layout="modern"], [data-layout="boxed"])[data-nav-type="pattern"]:not(
        [data-layout="boxed"]
    )
    .main-topbar.nav-sticky {
    background-color: color-mix(in srgb, var(--dx-secondary) 85%, #000 15%);
}
:is([data-layout="modern"], [data-layout="boxed"])[data-nav-type="pattern"]:not(
        [data-layout="boxed"]
    )
    .main-topbar
    .admin-name {
    color: var(--dx-white);
}
:is([data-layout="modern"], [data-layout="boxed"])[data-nav-type="pattern"]:not(
        [data-layout="boxed"]
    )
    .main-topbar
    .admin-designation {
    color: rgba(var(--dx-white-rgb), 0.5);
}
:is([data-layout="modern"], [data-layout="boxed"])[data-nav-type="pattern"]:not(
        [data-layout="boxed"]
    )
    .welcome-title {
    background: linear-gradient(
        -90deg,
        var(--dx-white) 0,
        var(--dx-white) 40%,
        var(--dx-danger) 55%,
        var(--dx-white) 70%,
        var(--dx-white) 100%
    );
    background-size: 150% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textShine 4s linear infinite;
}
:is([data-layout="modern"], [data-layout="boxed"])[data-nav-type="pattern"]:not(
        [data-layout="boxed"]
    )
    .nav-pattern {
    position: absolute;
    inset: 0;
    display: inline-block;
    height: 13rem;
    background-color: color-mix(in srgb, var(--dx-secondary) 85%, #000 15%);
}
:is([data-layout="modern"], [data-layout="boxed"])[data-nav-type="pattern"]:not(
        [data-layout="boxed"]
    )
    .nav-pattern
    svg {
    width: 100%;
    height: auto;
}
:is([data-layout="modern"], [data-layout="boxed"])[data-nav-type="pattern"]:not(
        [data-layout="boxed"]
    )
    .page-heading {
    color: #fff;
}
:is([data-layout="modern"], [data-layout="boxed"])[data-nav-type="pattern"]:not(
        [data-layout="boxed"]
    )
    .page-heading
    .breadcrumb {
    --dx-breadcrumb-divider-color: #fff;
    --dx-breadcrumb-item-active-color: #fff;
}
:is([data-layout="modern"], [data-layout="boxed"])[data-nav-type="pattern"]:not(
        [data-layout="boxed"]
    )
    .page-heading
    .breadcrumb
    .breadcrumb-item
    a {
    color: rgba(var(--dx-white-rgb), 0.75);
}
.nav-pattern {
    display: none;
}
@media (min-width: 1200px) {
    [data-layout="boxed"] body:not(.auth-wrapper) {
        background-image: var(--dx-boxed-bg);
        background-size: cover;
        background-position: 50%;
        background-repeat: no-repeat;
        margin: var(--dx-boxed-space) auto;
        max-width: var(--dx-boxed-width-sm);
        overflow: hidden;
        position: relative;
    }
}
@media (min-width: 1200px) and (min-width: 1536px) {
    [data-layout="boxed"] body:not(.auth-wrapper) {
        max-width: var(--dx-boxed-width);
    }
}
@media (min-width: 1200px) {
    [data-layout="boxed"] body:not(.auth-wrapper):before {
        content: "";
        position: fixed;
        top: 50%;
        right: 50%;
        transform: translate(50%, -50%);
        height: calc(100vh - var(--dx-boxed-space) * 1.23);
        width: calc(var(--dx-boxed-width-sm) + 34px);
        border-radius: 0.875rem;
        box-shadow: var(--dx-box-shadow-lg);
        background-color: rgba(var(--dx-secondary-bg-rgb), 0.1);
        backdrop-filter: blur(6px);
        border: 1px solid rgba(var(--dx-secondary-bg-rgb), 0.4);
        z-index: -1;
    }
}
@media (min-width: 1200px) and (min-width: 1536px) {
    [data-layout="boxed"] body:not(.auth-wrapper):before {
        width: calc(var(--dx-boxed-width) + 34px);
    }
}
@media (min-width: 1200px) {
    [data-layout="boxed"] body:not(.auth-wrapper) .main-topbar {
        margin-top: var(--dx-boxed-space);
        max-width: var(--dx-boxed-width-sm);
        margin-inline: auto;
        border-radius: 0.75rem 0.75rem 0 0;
        right: 0 !important;
    }
}
@media (min-width: 1200px) and (min-width: 1536px) {
    [data-layout="boxed"] body:not(.auth-wrapper) .main-topbar {
        max-width: var(--dx-boxed-width);
    }
}
@media (min-width: 1200px) and (max-width: 991.98px) {
    [data-layout="boxed"] body:not(.auth-wrapper) .main-sidebar {
        top: 0;
        right: 0;
    }
}
@media (min-width: 1200px) {
    [data-layout="boxed"] body:not(.auth-wrapper) .main-footer {
        position: relative;
        margin-top: auto;
        right: auto;
        margin-inline: 0;
    }
    [data-layout="boxed"] body:not(.auth-wrapper) .page-wrapper {
        background-color: var(--dx-body-bg);
        margin-top: var(--dx-boxed-space);
        padding-inline: 1rem;
        padding-bottom: 0;
        height: calc(100vh - var(--dx-boxed-space) * 2);
        overflow: auto;
        clip-path: inset(0 round 0 0.75rem 0.75rem 0);
    }
    [data-layout="boxed"]
        body:not(.auth-wrapper)
        .page-wrapper
        > .container-fluid {
        display: flex;
        flex-direction: column;
        min-height: 100%;
    }
    [data-layout="boxed"] body:not(.auth-wrapper) .profile-widget {
        margin-inline: -26px;
    }
}
[data-layout="semibox"] .main-sidebar {
    top: var(--dx-semibox-width) !important;
    border: 1px solid var(--dx-sidebar-border);
    border-radius: 7px;
    inset: var(--dx-semibox-width);
}
[data-layout="semibox"] .main-topbar {
    border: 1px solid var(--dx-border-color);
    border-radius: 7px;
    top: var(--dx-semibox-width);
    right: calc(
        var(--dx-sidebar) + var(--dx-semibox-width) + var(--dx-semibox-width)
    ) !important;
    left: var(--dx-semibox-width);
}
[data-layout="semibox"] .main-topbar.nav-sticky {
    top: 0;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}
@media (max-width: 1199.98px) {
    [data-layout="semibox"] .main-topbar {
        right: var(--dx-semibox-width) !important;
    }
}
[data-layout="semibox"] .page-wrapper {
    padding-top: calc(
        var(--dx-topbar) + var(--dx-semibox-width) + var(--dx-semibox-width)
    );
    padding-inline: var(--dx-semibox-width);
}
@media (min-width: 1200px) {
    [data-layout="semibox"] .page-wrapper {
        margin-right: calc(var(--dx-sidebar) + 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 {
        right: calc(
            var(--dx-sidebar-md) + var(--dx-semibox-width) +
                var(--dx-semibox-width) + 8px
        ) !important;
        left: calc(var(--dx-semibox-width) + 8px);
    }
    [data-layout="semibox"][data-sidebar="medium"] .page-wrapper {
        margin-right: calc(var(--dx-sidebar-md) + var(--dx-semibox-width));
    }
    [data-layout="semibox"][data-sidebar="small"] .main-topbar {
        right: calc(
            var(--dx-sidebar-sm) + var(--dx-semibox-width) +
                var(--dx-semibox-width) + 8px
        ) !important;
        left: calc(var(--dx-semibox-width) + 8px);
    }
    [data-layout="semibox"][data-sidebar="small"] .page-wrapper {
        margin-right: calc(var(--dx-sidebar-sm) + var(--dx-semibox-width));
    }
}
[data-layout="semibox"][data-sidebar="offcanvas"] .main-topbar {
    right: var(--dx-semibox-width) !important;
}
[data-layout="semibox"][data-sidebar="offcanvas"] .page-wrapper {
    margin-right: 0;
}
[data-layout="semibox"][data-sidebar="offcanvas"] .main-sidebar {
    right: calc(var(--dx-sidebar) * -1.1);
}
[data-layout="semibox"][data-sidebar="offcanvas"] .main-sidebar.show {
    right: var(--dx-semibox-width);
}
@media (min-width: 768px) and (max-width: 1199.98px) {
    [data-layout="semibox"]:not([data-sidebar="offcanvas"])
        .sidebar-hidden
        .main-sidebar {
        right: calc(var(--dx-sidebar-sm) * -1.1);
    }
    [data-layout="semibox"]:not([data-sidebar="offcanvas"])
        .sidebar-hidden
        .main-topbar {
        right: var(--dx-semibox-width) !important;
    }
    [data-layout="semibox"]:not([data-sidebar="offcanvas"])
        .sidebar-hidden
        .page-wrapper {
        margin-right: 0 !important;
    }
}
@media (max-width: 991.98px) {
    [data-layout="semibox"]:not([data-sidebar="offcanvas"])
        .sidebar-hidden
        .main-sidebar {
        right: calc(var(--dx-sidebar) * -1.1);
    }
    [data-layout="semibox"]:not([data-sidebar="offcanvas"])
        .sidebar-hidden
        .main-sidebar.show {
        display: block;
        right: 0;
    }
}
[data-layout="horizontal"] .main-sidebar {
    left: 0;
    width: 100%;
    bottom: auto;
    right: 0;
    border-bottom: 1px solid var(--dx-sidebar-border);
}
@media (max-width: 991.98px) {
    [data-layout="horizontal"] .main-sidebar {
        top: -316px;
        right: 0;
    }
    [data-layout="horizontal"] .main-sidebar.show {
        display: block;
        top: var(--dx-topbar);
    }
}
[data-layout="horizontal"] .main-sidebar .profile-dropdown {
    display: none;
}
[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-right: 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(.main-topbar .sidebar-toggle) {
    display: none;
}
[data-layout="horizontal"][data-profile-sidebar]
    .main-topbar
    .profile-dropdown {
    display: block;
}
[data-layout="horizontal"] .main-topbar {
    z-index: 1006;
}
@media (min-width: 992px) {
    [data-layout="horizontal"] .page-wrapper {
        padding-top: calc(var(--dx-topbar) * 1.8);
    }
}
@media (min-width: 992px) and (min-width: 992px) {
    [data-layout="horizontal"] .page-wrapper {
        margin-right: 0;
    }
}
[data-layout="horizontal"] .main-footer {
    right: 0;
}
@media (max-width: 991.98px) {
    [data-layout="horizontal"] .main-topbar .sidebar-toggle {
        display: flex;
    }
    [data-layout="horizontal"] .main-sidebar {
        height: 316px;
    }
    [data-layout="horizontal"] .navbar-menu {
        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;
}
[data-layout="neo"] body:not(.auth-wrapper) {
    position: relative;
    border-left: var(--dx-neo-line) solid var(--dx-sidebar-bg);
}
[data-layout="neo"]
    body:not(.auth-wrapper)
    :is(.body-top-line, .body-bottom-line) {
    position: fixed;
    height: var(--dx-neo-line);
    right: var(--dx-sidebar);
    left: var(--dx-neo-line);
    background: var(--dx-sidebar-bg);
    transition: all 0.3s ease-in-out;
    z-index: 1004;
}
@media (prefers-reduced-motion: reduce) {
    [data-layout="neo"]
        body:not(.auth-wrapper)
        :is(.body-top-line, .body-bottom-line) {
        transition: none;
    }
}
[data-layout="neo"]
    body:not(.auth-wrapper)
    :is(.body-top-line, .body-bottom-line):after,
[data-layout="neo"]
    body:not(.auth-wrapper)
    :is(.body-top-line, .body-bottom-line):before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    z-index: -1;
}
[data-layout="neo"] body:not(.auth-wrapper) .body-top-line {
    top: 0;
}
[data-layout="neo"] body:not(.auth-wrapper) .body-top-line:before {
    top: calc(var(--dx-neo-line) - 4px);
    right: -4px;
    background: radial-gradient(
        circle at left bottom,
        transparent 15px,
        var(--dx-sidebar-bg) 17px
    );
}
[data-layout="neo"] body:not(.auth-wrapper) .body-top-line:after {
    top: calc(var(--dx-neo-line) - 4px);
    left: -4px;
    background: radial-gradient(
        circle at right bottom,
        transparent 15px,
        var(--dx-sidebar-bg) 17px
    );
}
[data-layout="neo"] body:not(.auth-wrapper) .body-bottom-line {
    bottom: 0;
}
[data-layout="neo"] body:not(.auth-wrapper) .body-bottom-line:before {
    bottom: calc(var(--dx-neo-line) - 4px);
    right: -4px;
    background: radial-gradient(
        circle at left top,
        transparent 15px,
        var(--dx-sidebar-bg) 17px
    );
}
[data-layout="neo"] body:not(.auth-wrapper) .body-bottom-line:after {
    bottom: calc(var(--dx-neo-line) - 4px);
    left: -4px;
    background: radial-gradient(
        circle at right top,
        transparent 15px,
        var(--dx-sidebar-bg) 17px
    );
}
@media (max-width: 1199.98px) {
    [data-layout="neo"] body:not(.auth-wrapper) {
        border-right: var(--dx-neo-line) solid var(--dx-sidebar-bg);
    }
    [data-layout="neo"]
        body:not(.auth-wrapper).sidebar-hidden
        :is(.body-top-line, .body-bottom-line, .main-topbar, .main-footer) {
        right: var(--dx-neo-line) !important;
    }
    [data-layout="neo"] body:not(.auth-wrapper).sidebar-hidden .main-footer {
        margin-inline: 0;
    }
}
[data-layout="neo"] body:not(.auth-wrapper) .main-topbar {
    top: calc(var(--dx-neo-line) * 1.9);
    left: var(--dx-neo-line);
}
[data-layout="neo"] body:not(.auth-wrapper) .main-topbar:not(.nav-sticky) {
    --dx-topbar: 4.25rem;
    border-radius: 7px;
    margin-inline: 0.875rem;
}
@media (min-width: 1200px) {
    [data-layout="neo"] body:not(.auth-wrapper) .main-topbar:not(.nav-sticky) {
        margin-inline: 5.625rem;
    }
}
@media (min-width: 1536px) {
    [data-layout="neo"] body:not(.auth-wrapper) .main-topbar:not(.nav-sticky) {
        margin-inline: 7.625rem;
    }
}
[data-layout="neo"] body:not(.auth-wrapper) .main-topbar.nav-sticky {
    top: var(--dx-neo-line);
}
[data-layout="neo"] body:not(.auth-wrapper) .main-sidebar {
    border-left: none;
}
[data-layout="neo"] body:not(.auth-wrapper) .main-footer {
    bottom: var(--dx-neo-line);
    left: var(--dx-neo-line);
}
[data-layout="neo"] body:not(.auth-wrapper) .page-wrapper {
    padding-block: calc(var(--dx-topbar) * 1.4 + var(--dx-neo-line))
        calc(var(--dx-neo-line) + 3.5rem);
}
@media (min-width: 1536px) {
    [data-layout="neo"] body:not(.auth-wrapper) .page-wrapper {
        padding-inline: 7rem;
    }
}
@media (min-width: 992px) {
    [data-layout="neo"][data-sidebar="medium"]
        body:not(.auth-wrapper)
        :is(.body-top-line, .body-bottom-line) {
        right: var(--dx-sidebar-md);
    }
}
[data-layout="neo"][data-sidebar="small"]
    body:not(.auth-wrapper)
    :is(.body-top-line, .body-bottom-line) {
    right: var(--dx-sidebar-sm);
}
@media (min-width: 1200px) {
    [data-layout="neo"][data-sidebar="offcanvas"] body:not(.auth-wrapper) {
        border-right: var(--dx-neo-line) solid var(--dx-sidebar-bg);
    }
}
[data-layout="neo"][data-sidebar="offcanvas"] .main-topbar {
    right: 0;
}
[data-layout="neo"][data-sidebar="offcanvas"] .main-topbar.nav-sticky {
    right: var(--dx-neo-line);
}
[data-layout="neo"][data-sidebar="offcanvas"]
    body:not(.auth-wrapper)
    :is(.body-top-line, .body-bottom-line) {
    right: var(--dx-neo-line);
}
[data-layout="neo"][data-sidebar="offcanvas"] .page-wrapper {
    margin-right: 0 !important;
}
[data-layout="neo"][data-sidebar="offcanvas"] .main-sidebar {
    right: calc(var(--dx-sidebar) * -1.1);
}
[data-layout="neo"][data-sidebar="offcanvas"] .main-sidebar.show {
    right: 0;
}
[data-sidebar-image]:not([data-sidebar-image="none"]) .main-sidebar {
    background: var(--dx-sidebar-image);
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    transition: none;
}
[data-sidebar-image]:not([data-sidebar-image="none"]) .main-sidebar:before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--dx-sidebar-bg);
    opacity: 0.87;
    z-index: -1;
}
:is(
        [data-layout="modern"],
        [data-layout="neo"],
        [data-layout="semibox"],
        [data-layout="boxed"]
    )
    .main-sidebar {
    top: 0;
}
:is(
        [data-layout="modern"],
        [data-layout="neo"],
        [data-layout="semibox"],
        [data-layout="boxed"]
    )
    .main-sidebar
    .navbar-brand {
    display: flex;
}
:is(
        [data-layout="modern"],
        [data-layout="neo"],
        [data-layout="semibox"],
        [data-layout="boxed"]
    )
    .main-sidebar
    .navbar-brand
    .logo-lg
    .logo-light {
    display: none;
}
:is(
        [data-layout="modern"],
        [data-layout="neo"],
        [data-layout="semibox"],
        [data-layout="boxed"]
    )
    .main-sidebar
    .navbar-brand
    .logo-sm {
    display: none;
}
:is(
        [data-layout="modern"],
        [data-layout="neo"],
        [data-layout="semibox"],
        [data-layout="boxed"]
    ):is([data-bs-theme="dark"], [data-bs-theme="black"]):not(
        [data-theme="minimal"],
        [data-theme="elegant"]
    )
    .main-sidebar
    .navbar-brand
    .logo-lg
    .logo-light {
    display: block;
}
:is(
        [data-layout="modern"],
        [data-layout="neo"],
        [data-layout="semibox"],
        [data-layout="boxed"]
    ):is([data-bs-theme="dark"], [data-bs-theme="black"]):not(
        [data-theme="minimal"],
        [data-theme="elegant"]
    )
    .main-sidebar
    .navbar-brand
    .logo-lg
    .logo-dark {
    display: none;
}
@media (min-width: 992px) {
    :is(
            [data-layout="modern"],
            [data-layout="neo"],
            [data-layout="semibox"],
            [data-layout="boxed"]
        ):not([data-sidebar="offcanvas"])
        .main-topbar {
        right: var(--dx-sidebar);
    }
    :is(
            [data-layout="modern"],
            [data-layout="neo"],
            [data-layout="semibox"],
            [data-layout="boxed"]
        ):not([data-sidebar="offcanvas"])
        .main-topbar
        .navbar-brand {
        width: auto;
    }
    :is(
            [data-layout="modern"],
            [data-layout="neo"],
            [data-layout="semibox"],
            [data-layout="boxed"]
        ):not([data-sidebar="offcanvas"])
        .main-topbar
        .navbar-brand
        .logos {
        display: none;
    }
}
@media (min-width: 992px) {
    :is(
            [data-layout="modern"],
            [data-layout="neo"],
            [data-layout="semibox"],
            [data-layout="boxed"]
        )[data-sidebar="medium"]
        .main-topbar {
        right: var(--dx-sidebar-md);
    }
}
:is(
        [data-layout="modern"],
        [data-layout="neo"],
        [data-layout="semibox"],
        [data-layout="boxed"]
    )[data-sidebar="small"]
    .main-sidebar
    .navbar-brand {
    display: flex;
}
:is(
        [data-layout="modern"],
        [data-layout="neo"],
        [data-layout="semibox"],
        [data-layout="boxed"]
    )[data-sidebar="small"]
    .main-sidebar
    .navbar-brand
    .logo-lg {
    display: none;
}
:is(
        [data-layout="modern"],
        [data-layout="neo"],
        [data-layout="semibox"],
        [data-layout="boxed"]
    )[data-sidebar="small"]
    .main-sidebar
    .navbar-brand
    .logo-sm {
    display: block;
}
:is(
        [data-layout="modern"],
        [data-layout="neo"],
        [data-layout="semibox"],
        [data-layout="boxed"]
    )[data-sidebar="small"]
    .main-sidebar
    .navbar-brand
    .logo-sm
    .logo-light {
    display: none;
}
:is(
        [data-layout="modern"],
        [data-layout="neo"],
        [data-layout="semibox"],
        [data-layout="boxed"]
    )[data-sidebar="small"]
    .main-topbar {
    right: var(--dx-sidebar-sm);
}
:is(
        [data-layout="modern"],
        [data-layout="neo"],
        [data-layout="semibox"],
        [data-layout="boxed"]
    ):is(
        [data-sidebar-colors="dark"],
        [data-sidebar-colors="brand"],
        [data-sidebar-colors="wine"],
        [data-sidebar-colors="green"]
    )
    .navbar-brand
    .logo-lg
    .logo-light {
    display: block;
}
:is(
        [data-layout="modern"],
        [data-layout="neo"],
        [data-layout="semibox"],
        [data-layout="boxed"]
    ):is(
        [data-sidebar-colors="dark"],
        [data-sidebar-colors="brand"],
        [data-sidebar-colors="wine"],
        [data-sidebar-colors="green"]
    )
    .navbar-brand
    .logo-lg
    .logo-dark {
    display: none;
}
:is(
        [data-layout="modern"],
        [data-layout="neo"],
        [data-layout="semibox"],
        [data-layout="boxed"]
    ):is(
        [data-sidebar-colors="dark"],
        [data-sidebar-colors="brand"],
        [data-sidebar-colors="wine"],
        [data-sidebar-colors="green"]
    )
    .navbar-brand
    .logo-sm {
    display: none;
}
:is(
        [data-layout="modern"],
        [data-layout="neo"],
        [data-layout="semibox"],
        [data-layout="boxed"]
    ):is(
        [data-sidebar-colors="dark"],
        [data-sidebar-colors="brand"],
        [data-sidebar-colors="wine"],
        [data-sidebar-colors="green"]
    )[data-sidebar="small"]
    .navbar-brand
    .logo-sm
    .logo-light {
    display: block;
}
:is(
        [data-layout="modern"],
        [data-layout="neo"],
        [data-layout="semibox"],
        [data-layout="boxed"]
    ):is(
        [data-sidebar-colors="dark"],
        [data-sidebar-colors="brand"],
        [data-sidebar-colors="wine"],
        [data-sidebar-colors="green"]
    )[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: "\ea6e";
    font-family: remixicon;
}
.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;
    border-color: var(--dx-border-color);
    box-shadow: none;
}
.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-right: 0;
}
.setting-modal .form-check-label.system-mode:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 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: #25293d;
}
.setting-modal .sidebar-color-3 {
    background-color: #4056af;
}
.setting-modal .sidebar-color-4 {
    background-color: #7e2929;
}
.setting-modal .sidebar-color-5 {
    background-color: #28464b;
}
.setting-modal .sidebar-image-1 {
    background: url(../images/sidebar-img/img-1.html);
}
.setting-modal .sidebar-image-2 {
    background: url(../images/sidebar-img/img-2.html);
}
.setting-modal .sidebar-image-3 {
    background: url(../images/sidebar-img/img-3.html);
}
.setting-modal .sidebar-image-4 {
    background: url(../images/sidebar-img/img-4.html);
}
.setting-modal .sidebar-image-5 {
    background: url(../images/sidebar-img/img-5.html);
}
.setting-modal .theme-color-1 {
    background-color: #d2202c;
}
.setting-modal .theme-color-2 {
    background-color: #0f828c;
}
.setting-modal .theme-color-3 {
    background-color: #ba57e9;
}
.setting-modal .theme-color-4 {
    background-color: #d75959;
}
.setting-modal .theme-color-5 {
    background-color: #7198a7;
}
.setting-modal .theme-color-6 {
    background-color: #dfa235;
}
.setting-modal .theme-color-7 {
    background-color: #c564c1;
}
.setting-modal .theme-color-8 {
    background-color: #9eaf5d;
}
.setting-modal .theme-color-9 {
    background-color: #e18c52;
}
.setting-modal .theme-color-10 {
    background-color: #7b71db;
}
.border-elegant {
    border: 1px solid var(--dx-border-color);
}
.btn-close:after {
    content: "\eb98" !important;
    font-size: 20px;
    line-height: 15px;
    color: var(--dx-btn-close-color);
    font-family: remixicon !important;
}
.alert {
    box-shadow: var(--dx-element-shadow);
}
.alert-live-backdrop {
    backdrop-filter: blur(20px);
}
.alert-dismissible .btn-close:after {
    color: var(--dx-alert-color);
}
.alert-icon {
    position: relative;
    padding-right: 4rem;
}
.alert-icon,
.alert-icon .icon {
    display: flex;
    align-items: center;
}
.alert-icon .icon {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    justify-content: center;
    width: 2.75rem;
    border-left: 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 left,
        var(--dx-primary),
        var(--dx-primary-text-emphasis)
    );
}
.secondary-gradient {
    background: linear-gradient(270deg, #a855f7, #7e22ce);
}
.success-gradient {
    background: linear-gradient(270deg, #358ffc, #22c55e);
}
.danger-gradient {
    background: linear-gradient(270deg, #152956, #450a0a);
}
#liveAlert {
    position: fixed;
    top: 1.25rem;
    z-index: 1030;
}
#liveAlert,
.basic-alert {
    right: 50%;
    transform: translateX(50%);
}
.basic-alert {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid var(--dx-secondary-bg);
    position: absolute;
    top: -1.25rem;
}
.breadcrumb-item {
    font-weight: var(--dx-font-weight-medium);
}
.breadcrumb-item a {
    color: var(--dx-secondary-color);
}
:is(.double-arrow, .single-arrow, .dash-arrow)
    .breadcrumb-item
    + .breadcrumb-item:before {
    float: right;
    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: 7px;
}
.btn-navigation a {
    color: var(--dx-secondary-color);
    padding: 1.5rem 1rem;
    position: relative;
    flex-grow: 1;
    text-align: center;
    transition: all 0.3s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
    .btn-navigation a {
        transition: none;
    }
}
.navigation-bottom-animation a:before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50rem;
    transform: translateX(50%);
    transition: all 0.3s 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;
    right: 50%;
    width: 0;
    height: 0.125rem;
    transform: translateX(50%);
    transition: all 0.3s 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;
    right: 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;
    left: -8px;
}
.notification.top-start {
    position: absolute;
    top: -8px;
    right: -8px;
}
.notification.bottom-start {
    position: absolute;
    bottom: -8px;
    right: -8px;
}
.notification.bottom-end {
    position: absolute;
    left: -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;
}
.badge {
    box-shadow: var(--dx-element-shadow);
}
.spin {
    height: 2rem;
    width: 2rem;
    border-radius: 50rem;
}
.modern-spinner {
    border: 2px solid;
    border-right-color: transparent !important;
    border-left-color: transparent !important;
}
.gradient-loader .bg-gradient {
    border-color: var(--dx-primary) var(--dx-danger) var(--dx-warning)
        var(--dx-success) !important;
}
.gradient-loader .bg-gradient2 {
    border-color: var(--dx-info) var(--dx-primary) var(--dx-secondary)
        var(--dx-pink) !important;
}
.gradient-loader .bg-sub-gradient {
    border-color: var(--dx-primary-bg-subtle) var(--dx-danger-bg-subtle)
        var(--dx-warning-bg-subtle) var(--dx-success-bg-subtle) !important;
}
.animation-button .circle {
    margin-top: -0.25rem;
    margin-left: -0.25rem;
}
.animation-button .loader-button-animation {
    position: absolute;
    top: -0.2188rem;
    left: -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: calc(var(--dx-spacer) * 0.7);
}
.accordion.accordion-boxed .accordion-button {
    border: 1px solid var(--dx-accordion-border-color);
    border-radius: 7px;
}
.accordion .accordion-button {
    padding-left: 1.6rem;
}
.accordion .accordion-button:after {
    content: "\ea4e";
    font-family: remixicon !important;
    position: absolute;
    top: 50%;
    left: 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);
}
.edit-icon-btn.accordion-button:not(.collapsed) {
    background-color: var(--dx-primary);
    color: var(--dx-white) !important;
    border-color: var(--dx-primary);
}
.edit-icon-btn.accordion-button:after {
    left: 3px !important;
}
.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);
    --dx-modal-bg: var(--dx-secondary-bg);
}
.modal-title {
    font-size: calc(var(--dx-body-font-size) * 1.03);
}
.modal-footer {
    padding: var(--dx-spacer);
}
.modal-dialog-start {
    margin-right: var(--dx-spacer);
}
.modal-dialog-end {
    margin-left: var(--dx-spacer);
}
.modal-dialog-bottom-end {
    position: absolute;
    left: var(--dx-spacer);
    bottom: 0;
}
.modal-dialog-bottom-start {
    position: absolute;
    right: var(--dx-spacer);
    bottom: 0;
}
.modal-xs {
    width: 20rem;
}
.modal-2xl {
    max-width: 64rem;
}
@media (max-width: 1024px) {
    .modal-2xl {
        max-width: 61.5rem;
    }
}
@media (max-width: 768px) {
    .modal-2xl {
        max-width: 45.5rem;
    }
}
@media (max-width: 575.98px) {
    .modal-2xl,
    .modal-lg,
    .modal-sm,
    .modal-xl,
    .modal-xs {
        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-pink)
    );
}
.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;
    right: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}
.progress-circle .progress-text-inner {
    text-align: center;
    line-height: 1.2;
}
.progress-circle .animate-count {
    transition: all 0.3s 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: var(--dx-spacer) var(--dx-spacer);
    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;
}
.toast {
    box-shadow: var(--dx-element-shadow);
}
.basic-gallery img {
    transition: transform 5s ease-in-out;
}
.basic-gallery:hover > img {
    transform: scale(1.25);
}
@media (min-width: 992px) {
    .item-4 {
        margin-top: -9rem;
    }
    .item-6 {
        margin-top: -7rem;
    }
    .item-7 {
        margin-top: -17rem;
    }
}
@media (min-width: 768px) and (max-width: 992px) {
    .item-3 {
        margin-top: -9rem;
    }
    .item-5,
    .item-7 {
        margin-top: -3rem;
    }
}
.timeline {
    display: flex;
    flex-direction: column;
    position: relative;
    list-style: none;
}
.timeline.timeline-square > :after {
    border-radius: 0.125rem;
}
.timeline-basic {
    list-style: none;
    margin-bottom: 0;
    padding-right: 0;
}
.timeline-basic .timeline-item {
    position: relative;
    padding-right: 1.25rem;
    padding-bottom: 0.75rem;
}
.timeline-basic .timeline-item:not(:last-child):before {
    content: "";
    position: absolute;
    top: 0.5rem;
    bottom: -0.5rem;
    right: 0.125rem;
    width: 2px;
    background-color: var(--dx-tertiary-bg);
}
.timeline-basic .timeline-item:after {
    content: "";
    position: absolute;
    top: 0.5rem;
    right: 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-right: 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;
    right: 1rem;
    width: 0.125rem;
    margin: 1.875rem 0 1rem;
    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;
    right: 16px;
    width: 0.0625rem;
    background-color: var(--dx-tertiary-bg);
    z-index: -1;
}
.timeline-modern .timeline-item:last-child:before {
    content: none;
}
.order-timeline {
    position: relative;
}
.order-timeline .timeline-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    padding-right: 2rem;
}
.order-timeline .timeline-item:not(:last-child):before {
    content: "";
    position: absolute;
    top: 0.5rem;
    bottom: -0.5rem;
    right: 0.75rem;
    width: 2px;
    background-color: var(--dx-tertiary-bg);
    z-index: 1;
}
.order-timeline .timeline-item:not(:last-child) {
    padding-bottom: 1.5rem;
}
.order-timeline .timeline-item.completed .timeline-marker,
.order-timeline .timeline-item.completed:before {
    background-color: var(--dx-success);
}
.order-timeline .timeline-item.active .timeline-marker,
.order-timeline .timeline-item.active:before {
    background-color: var(--dx-primary);
}
.order-timeline .timeline-item.pending .timeline-marker {
    background-color: var(--dx-tertiary-bg);
    color: var(--dx-tertiary-color);
}
.order-timeline .timeline-marker {
    top: 0.25rem;
    right: 0;
    position: absolute;
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 50%;
    border: 2px solid var(--dx-secondary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    flex-shrink: 0;
    font-size: 0.75rem;
    color: #fff;
}
.order-timeline .timeline-content {
    flex: 1;
}
.shipment-timeline {
    position: relative;
}
.shipment-timeline .timeline-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    padding-right: 2rem;
    margin-bottom: 1.5rem;
}
.shipment-timeline .timeline-item:not(:last-child):before {
    content: "";
    position: absolute;
    top: 0.5rem;
    bottom: -0.5rem;
    right: 0.75rem;
    width: 2px;
    background-color: var(--dx-tertiary-bg);
    z-index: 1;
}
.shipment-timeline .timeline-item:last-child {
    margin-bottom: 0;
}
.shipment-timeline .timeline-item.completed .timeline-marker {
    background-color: var(--dx-success);
    border-color: var(--dx-success);
}
.shipment-timeline .timeline-item.completed:before {
    background-color: var(--dx-success);
}
.shipment-timeline .timeline-item.active .timeline-marker {
    background-color: var(--dx-primary);
    border-color: var(--dx-primary);
}
.shipment-timeline .timeline-item.active:before {
    background-color: var(--dx-primary);
}
.shipment-timeline .timeline-item.pending .timeline-marker {
    background-color: var(--dx-light);
    border-color: var(--dx-tertiary-bg);
    color: var(--dx-tertiary-color);
}
.shipment-timeline .timeline-marker {
    top: 0.25rem;
    right: 0;
    position: absolute;
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 50%;
    border: 2px solid var(--dx-secondary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    flex-shrink: 0;
    font-size: 0.75rem;
    color: #fff;
    transition: all 0.3s ease;
}
.shipment-timeline .timeline-content {
    flex: 1;
    padding-right: 0.5rem;
}
.shipment-timeline .timeline-content .timeline-title {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--dx-body-color);
}
.shipment-timeline .timeline-content p {
    font-size: 0.8125rem;
    margin-bottom: 0.25rem;
}
.shipment-timeline .timeline-content small {
    font-size: 0.75rem;
}
.horizontal-timeline {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0;
}
@media (max-width: 991px) {
    .horizontal-timeline {
        overflow-x: auto;
        padding-bottom: 1.5rem;
    }
    .horizontal-timeline::-webkit-scrollbar {
        height: 4px;
    }
    .horizontal-timeline::-webkit-scrollbar-thumb {
        background: var(--dx-tertiary-bg);
        border-radius: 4px;
    }
}
.horizontal-timeline .timeline-item {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
}
.horizontal-timeline .timeline-item:last-child {
    flex: 0 0 auto;
}
.horizontal-timeline .timeline-item .timeline-marker {
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.875rem;
    background-color: var(--dx-tertiary-bg);
    color: var(--dx-secondary-color);
    border: 1px solid var(--dx-border-color);
    transition: all 0.3s ease-in-out;
    flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
    .horizontal-timeline .timeline-item .timeline-marker {
        transition: none;
    }
}
.horizontal-timeline .timeline-item .timeline-content {
    margin-right: 0.75rem;
}
.horizontal-timeline .timeline-item .timeline-content h6 {
    color: var(--dx-secondary-color);
    white-space: nowrap;
}
.horizontal-timeline .timeline-item:not(:last-child):after {
    content: "";
    height: 2px;
    flex-grow: 1;
    min-width: 1.5rem;
    margin: 0 1rem;
    border-bottom: 2px dotted var(--dx-border-color);
}
.horizontal-timeline .timeline-item.completed .timeline-marker {
    background-color: var(--dx-success);
    border-color: var(--dx-success);
    color: #fff;
}
.horizontal-timeline .timeline-item.completed .timeline-content h6 {
    color: var(--dx-success);
}
.horizontal-timeline .timeline-item.completed:not(:last-child):after {
    border-bottom: 1px solid var(--dx-success);
}
.horizontal-timeline .timeline-item.active .timeline-marker {
    background-color: var(--dx-indigo);
    border-color: var(--dx-indigo);
    color: #fff;
}
.horizontal-timeline .timeline-item.active .timeline-content h6 {
    color: var(--dx-indigo);
}
.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;
    box-shadow: var(--dx-element-shadow);
}
[dir="rtl"] .pagination .page-item .page-link i,
[dir="rtl"] .pagination .page-item .page-link svg {
    transform: scaleX(-1);
}
.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-right-radius: var(--dx-pagination-border-radius);
    border-bottom-right-radius: var(--dx-pagination-border-radius);
}
.pagination.pagination-modern .page-item:last-child .page-link {
    border-top-left-radius: var(--dx-pagination-border-radius);
    border-bottom-left-radius: var(--dx-pagination-border-radius);
}
.pagination.pagination-modern.pagination-rounded
    .page-item:first-child
    .page-link {
    border-top-right-radius: 50rem;
    border-bottom-right-radius: 50rem;
}
.pagination.pagination-modern.pagination-rounded
    .page-item:last-child
    .page-link {
    border-top-left-radius: 50rem;
    border-bottom-left-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.3s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
    .link {
        transition: none;
    }
}
.link.link-custom {
    color: var(--dx-body-color);
}
.link.link-custom:hover {
    color: var(--dx-primary);
}
.list-borderless {
    --dx-list-group-border-width: none;
    --dx-list-group-item-padding-x: 0px;
    --dx-list-group-item-padding-y: 4px;
}
.list-arrow {
    list-style-image: url(https://srbthemes.kcubeinfotech.com/alloce/images/others/arrow-right.webp);
}
.list-boxed .list-group-item {
    border: var(--dx-list-group-border-width) solid
        var(--dx-list-group-border-color);
    border-radius: 7px;
}
.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-pills .nav-item .nav-link.active {
    box-shadow: var(--dx-element-shadow);
}
.nav-underline .nav-link {
    padding: 0.5rem 1rem;
    position: relative;
    border: 0;
}
.nav-underline .nav-link:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    margin: 0 auto;
    height: 1px;
    width: 0;
    border-radius: 50rem;
    transition: all 0.3s 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: var(--dx-font-weight-medium);
}
.tabs-animation .nav-link {
    position: relative;
    overflow: hidden;
    height: 2.75rem;
    text-align: center;
    width: 8rem;
}
.tabs-animation .nav-link .icon {
    transition: all 0.3s 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.3s 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 {
    to {
        transform: rotate(-1turn);
    }
}
: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;
}
.animate-ping {
    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes ping {
    75%,
    to {
        content: var(--tw-content);
        transform: scale(2);
        opacity: 0;
    }
}
.animate-rotate {
    animation: rotate 1s linear infinite;
}
.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes shimmer {
    to {
        transform: translate(0);
        opacity: 0;
    }
}
@keyframes timerPulse {
    0%,
    to {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
}
@keyframes timeUpdate {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    to {
        transform: scale(1);
    }
}
@keyframes slideInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes slideIn {
    0% {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes slideInFromRight {
    0% {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.avatar {
    justify-content: center;
}
.avatar,
.avatar-group {
    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 div {
    color: #fff;
    background-color: var(--dx-primary);
}
.avatar-group .avatar-group-item:not(:first-child) {
    margin-right: -10px;
}
.avatar-group .avatar-group-item:hover {
    z-index: 10;
}
:is(.btn.show) {
    border-color: transparent;
}
[class*="btn-dashed-"] {
    border-style: dashed;
}
[class*="btn-3d-"] {
    box-shadow: inset 0 2px 4px 0 var(--dx-btn-shadow-color);
}
.btn.btn-xs {
    padding: 0.125rem 0.5rem;
    font-size: 0.6875rem;
    border-radius: 5px;
}
.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-right: 4rem;
}
.btn-icon-overlay.right {
    padding-inline: 1.5rem 4rem;
}
.btn-icon-overlay.right .icon {
    left: 0;
    right: auto;
}
.btn-icon-overlay .icon {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.375rem;
    background-color: rgba(var(--dx-white-rgb), 0.1);
}
.btn {
    box-shadow: var(--dx-element-shadow);
}
.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: 1;
}
.btn-translate-up {
    transform: translateY(0);
    transition: all 0.3s 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.3s 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.3s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
    .btn-scale {
        transition: none;
    }
}
.btn-scale:hover {
    transform: scale(1.1);
}
.card {
    margin-bottom: var(--dx-spacer);
}
.card .card-header {
    padding-bottom: 0;
    border: none;
}
.card .card-title {
    font-size: calc(var(--dx-body-font-size) * 1.03);
}
.card.card-h-100 {
    height: calc(100% - var(--dx-spacer));
}
.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;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
}
.basic-card .user {
    height: 120px;
    width: 120px;
    margin-top: -4rem;
}
.card-hover-effect {
    transition: all 0.3s 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;
    right: 30px;
    transition: all 0.3s 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: #052a40;
    opacity: 0.2;
}
.dropdown-menu {
    animation-name: slideDownIn;
    animation-duration: 0.3s;
    animation-fill-mode: both;
}
.dropdown-menu .dropdown-item {
    border-radius: 7px;
    transition: all 0.3s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
    .dropdown-menu .dropdown-item {
        transition: none;
    }
}
@keyframes slideDownIn {
    to {
        margin-top: -1px;
    }
    0% {
        margin-top: 5px;
    }
}
:is(.dropdown .dropdown-toggle, .dropdown-toggle-split.dropdown-toggle):after {
    content: "\ea4e";
    font-family: remixicon !important;
    border: none;
    font-size: 20px;
    line-height: 0.8;
    margin-top: 0;
    margin-right: 0;
    vertical-align: -3px;
}
: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 {
    transform: rotate(-90deg);
}
.dropstart .dropdown-toggle:before,
.dropup .dropdown-toggle:after {
    content: "\ea4e";
    font-family: remixicon !important;
    border: none;
    font-size: 20px;
    line-height: 0.8;
    margin-top: 3.2px;
}
.dropup .dropdown-toggle:after {
    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;
}
@media (max-width: 575.98px) {
    .square {
        height: 15rem;
        width: 15rem;
    }
}
.simplebar-scrollbar:before {
    background: var(--dx-border-color) !important;
}
.simplebar-primary .simplebar-scrollbar:before {
    background-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,
::-webkit-scrollbar-track {
    background-color: var(--dx-secondary-bg);
}
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: var(--dx-border-color);
}
.custom-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-color: var(--dx-border-color) transparent;
}
.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;
}
.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;
    right: 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: #fff;
    --deckgo-highlight-code-token-atrule: #ec4899;
    --deckgo-highlight-code-token-function: #eab308;
    --deckgo-highlight-code-carbon-header-button-red-background: #ef4444;
    --deckgo-highlight-code-token-selector: #4ade80;
    --deckgo-highlight-code-font-size: 0.9063rem;
    --deckgo-highlight-code-carbon-header-button-width: 0.68rem;
    --deckgo-highlight-code-carbon-header-button-height: 0.68rem;
}
.chatbot-one {
    background: linear-gradient(
        to bottom left,
        rgba(var(--dx-primary-rgb), 0.2),
        rgba(var(--dx-success-rgb), 0.2),
        rgba(var(--dx-secondary-rgb), 0.2)
    );
}
.chatbot-two {
    background: linear-gradient(to top left, var(--dx-success), var(--dx-info));
}
.chatbot-three {
    background: linear-gradient(
        to top left,
        var(--dx-primary),
        var(--dx-secondary)
    );
}
.treeview-scrollable {
    max-height: 70vh;
}
.treeview {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
.treeview ul {
    transition: all 0.3s 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;
    right: -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.3s 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 {
    color: var(--dx-primary) !important;
}
.treeview i {
    margin-left: 0.5rem;
    transition: all 0.3s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
    .treeview i {
        transition: none;
    }
}
.treeview [aria-expanded="true"] {
    font-weight: 500;
    color: var(--dx-primary) !important;
    background-color: var(--dx-light);
}
.treeview [data-node] {
    cursor: pointer;
}
@keyframes slideDown {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.icon-box {
    height: 2.5rem;
    width: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--dx-border-color);
    border-radius: 7px;
}
.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);
}
.icon-hover-primary,
.icon-primary {
    color: var(--dx-primary);
}
.icon-hover-primary:hover {
    fill: var(--dx-primary-bg-subtle);
}
.icon-secondary {
    fill: rgba(var(--dx-secondary-rgb), 0.1);
}
.icon-hover-secondary,
.icon-secondary {
    color: var(--dx-secondary);
}
.icon-hover-secondary:hover {
    fill: var(--dx-secondary-bg-subtle);
}
.icon-success {
    fill: rgba(var(--dx-success-rgb), 0.1);
}
.icon-hover-success,
.icon-success {
    color: var(--dx-success);
}
.icon-hover-success:hover {
    fill: var(--dx-success-bg-subtle);
}
.icon-info {
    fill: rgba(var(--dx-info-rgb), 0.1);
}
.icon-hover-info,
.icon-info {
    color: var(--dx-info);
}
.icon-hover-info:hover {
    fill: var(--dx-info-bg-subtle);
}
.icon-warning {
    fill: rgba(var(--dx-warning-rgb), 0.1);
}
.icon-hover-warning,
.icon-warning {
    color: var(--dx-warning);
}
.icon-hover-warning:hover {
    fill: var(--dx-warning-bg-subtle);
}
.icon-danger {
    fill: rgba(var(--dx-danger-rgb), 0.1);
}
.icon-danger,
.icon-hover-danger {
    color: var(--dx-danger);
}
.icon-hover-danger:hover {
    fill: var(--dx-danger-bg-subtle);
}
.icon-light {
    fill: rgba(var(--dx-light-rgb), 0.1);
}
.icon-hover-light,
.icon-light {
    color: var(--dx-light);
}
.icon-hover-light:hover {
    fill: var(--dx-light-bg-subtle);
}
.icon-dark {
    fill: rgba(var(--dx-dark-rgb), 0.1);
}
.icon-dark,
.icon-hover-dark {
    color: var(--dx-dark);
}
.icon-hover-dark:hover {
    fill: var(--dx-dark-bg-subtle);
}
.icon-pink {
    fill: rgba(var(--dx-pink-rgb), 0.1);
}
.icon-hover-pink,
.icon-pink {
    color: var(--dx-pink);
}
.icon-hover-pink:hover {
    fill: var(--dx-pink-bg-subtle);
}
.icon-orange {
    fill: rgba(var(--dx-orange-rgb), 0.1);
}
.icon-hover-orange,
.icon-orange {
    color: var(--dx-orange);
}
.icon-hover-orange:hover {
    fill: var(--dx-orange-bg-subtle);
}
.icon-indigo {
    fill: rgba(var(--dx-indigo-rgb), 0.1);
}
.icon-hover-indigo,
.icon-indigo {
    color: var(--dx-indigo);
}
.icon-hover-indigo:hover {
    fill: var(--dx-indigo-bg-subtle);
}
.fill-primary {
    fill: var(--dx-primary);
}
.fill-secondary {
    fill: var(--dx-secondary);
}
.fill-success {
    fill: var(--dx-success);
}
.fill-info {
    fill: var(--dx-info);
}
.fill-warning {
    fill: var(--dx-warning);
}
.fill-danger {
    fill: var(--dx-danger);
}
.fill-light {
    fill: var(--dx-light);
}
.fill-dark {
    fill: var(--dx-dark);
}
.fill-pink {
    fill: var(--dx-pink);
}
.fill-orange {
    fill: var(--dx-orange);
}
.fill-indigo {
    fill: var(--dx-indigo);
}
.form-label {
    font-weight: var(--dx-font-weight-medium);
}
.form-control {
    line-height: 1.4;
}
.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: var(--dx-font-weight-medium);
    border-radius: 6px;
    border: none;
}
.vscomp-ele {
    max-width: 100% !important;
}
.vscomp-ele .vscomp-wrapper {
    color: var(--dx-body-color);
    font-family: var(--dx-font-sans-serif);
    font-size: var(--dx-font-size-base);
}
.vscomp-ele .vscomp-wrapper .vscomp-toggle-button {
    background-color: var(--dx-secondary-bg);
    border: 1px solid var(--dx-border-color);
}
.vscomp-ele .vscomp-wrapper.focused .vscomp-toggle-button,
.vscomp-ele .vscomp-wrapper:focus .vscomp-toggle-button {
    border-color: var(--dx-primary);
    box-shadow: var(--dx-box-shadow) !important;
}
.vscomp-ele .vscomp-wrapper:not(.has-value) .vscomp-value {
    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-left-color: var(--dx-emphasis-color);
    border-right-color: transparent;
}
.vscomp-ele .vscomp-wrapper .checkbox-icon {
    margin-left: 10px;
    margin-right: 0;
}
.vscomp-ele .vscomp-wrapper .checkbox-icon:after {
    border: 1px solid var(--dx-tertiary-bg);
}
.vscomp-ele
    .vscomp-wrapper.multiple
    .vscomp-option.selected
    .checkbox-icon:after {
    border: 1px solid var(--dx-primary);
    border-top-color: transparent !important;
    border-right-color: transparent !important;
}
.vscomp-ele .vscomp-wrapper .vscomp-no-search-results,
.vscomp-ele .vscomp-wrapper .vscomp-options {
    background-color: var(--dx-secondary-bg);
}
.vscomp-ele .vscomp-wrapper .vscomp-no-search-results .vscomp-option,
.vscomp-ele .vscomp-wrapper .vscomp-options .vscomp-option {
    text-align: right;
}
.vscomp-ele .vscomp-wrapper .vscomp-no-search-results .vscomp-option.focused,
.vscomp-ele .vscomp-wrapper .vscomp-no-search-results .vscomp-option.selected,
.vscomp-ele .vscomp-wrapper .vscomp-options .vscomp-option.focused,
.vscomp-ele .vscomp-wrapper .vscomp-options .vscomp-option.selected {
    background-color: var(--dx-tertiary-bg) !important;
}
.vscomp-ele .vscomp-wrapper .vscomp-search-container {
    background-color: var(--dx-secondary-bg);
    border-bottom: 1px solid var(--dx-tertiary-bg);
}
.vscomp-ele .vscomp-wrapper .pop-comp-wrapper {
    box-shadow:
        0 10px 15px -3px var(--dx-tertiary-bg),
        0 4px 6px -4px var(--dx-tertiary-bg);
    color: var(--dx-emphasis-color);
}
.vscomp-ele .vscomp-wrapper .vscomp-search-wrapper {
    box-shadow: none !important;
}
.vscomp-ele .vscomp-wrapper.has-clear-button .vscomp-toggle-button {
    padding-left: 3.375rem !important;
}
.vscomp-ele .vscomp-wrapper .vscomp-dropbox-container {
    z-index: 9999 !important;
}
.vscomp-ele .vscomp-wrapper.show-value-as-tags .vscomp-arrow {
    height: 100%;
}
.vscomp-ele .vscomp-wrapper.show-value-as-tags .vscomp-value {
    min-height: 100%;
}
.vscomp-ele .vscomp-wrapper.show-value-as-tags .vscomp-value-tag {
    padding: 2px 8px 2px 3px;
    border: 1px solid var(--dx-border-color);
}
.vscomp-ele .vscomp-wrapper.show-value-as-tags.has-value .vscomp-clear-button {
    left: 2px;
    right: auto;
}
.vscomp-ele .vscomp-search-input::-moz-placeholder {
    color: var(--dx-secondary-color);
}
.vscomp-ele .vscomp-search-input::placeholder {
    color: var(--dx-secondary-color);
}
.vscomp-ele .vscomp-toggle-button {
    padding: 0.5625rem 0.625rem 0.5625rem 1.875rem !important;
    border-radius: 7px !important;
}
.vscomp-ele .vscomp-clear-button {
    left: 30px;
    right: auto;
}
.vscomp-ele .vscomp-arrow {
    left: 0;
    right: auto;
}
.form-range.range-primary::-webkit-slider-thumb {
    background: var(--dx-primary);
}
.form-range.range-secondary::-webkit-slider-thumb {
    background: var(--dx-secondary);
}
.form-range.range-success::-webkit-slider-thumb {
    background: var(--dx-success);
}
.form-range.range-info::-webkit-slider-thumb {
    background: var(--dx-info);
}
.form-range.range-warning::-webkit-slider-thumb {
    background: var(--dx-warning);
}
.form-range.range-danger::-webkit-slider-thumb {
    background: var(--dx-danger);
}
.form-range.range-light::-webkit-slider-thumb {
    background: var(--dx-light);
}
.form-range.range-dark::-webkit-slider-thumb {
    background: var(--dx-dark);
}
.form-range.range-pink::-webkit-slider-thumb {
    background: var(--dx-pink);
}
.form-range.range-orange::-webkit-slider-thumb {
    background: var(--dx-orange);
}
.form-range.range-indigo::-webkit-slider-thumb {
    background: var(--dx-indigo);
}
.form-switch input[type="checkbox"] {
    height: 0;
    width: 0;
    visibility: hidden;
}
.form-switch input:checked + label:after {
    right: 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;
    right: 0.1875rem;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 5.625rem;
    transition: all 0.3s 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-light"] label,
[class*="switch-soft"] label {
    background-color: var(--dx-border-color);
    border: 1px solid var(--dx-border-color);
}
[class*="switch-light"] label:after,
[class*="switch-soft"] label:after {
    background: var(--dx-secondary-bg);
}
[class*="switch-solid"] input:checked + label:after {
    background-color: var(--dx-secondary-bg);
}
[class*="switch-solid"] label {
    border: 1px solid var(--dx-border-color);
}
[class*="switch-solid"] label:after {
    background: var(--dx-border-color);
}
[class*="switch-effect"] label {
    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,
.switch-square label:after {
    border-radius: 7px;
}
.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,
.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%;
    background-color: transparent;
    border: 1px solid var(--dx-border-color);
}
.input-spin-group .input-spin-minus,
.input-spin-group .input-spin-plus {
    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.3s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
    .input-spin-group .input-spin-minus,
    .input-spin-group .input-spin-plus {
        transition: none;
    }
}
.input-spin-group .input-spin-minus svg,
.input-spin-group .input-spin-plus svg {
    transition: all 0.3s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
    .input-spin-group .input-spin-minus svg,
    .input-spin-group .input-spin-plus svg {
        transition: none;
    }
}
.input-spin-group .input-spin-minus:where([dir="ltr"], [dir="ltr"] *) {
    border-top-right-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
    border-left-width: 0;
}
.input-spin-group .input-spin-plus:where([dir="ltr"], [dir="ltr"] *) {
    border-top-left-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
    border-right-width: 0;
}
.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 {
    border-radius: var(--dx-border-radius) var(--dx-border-radius) 0 0;
}
.ql-container {
    border-radius: 0 0 var(--dx-border-radius) var(--dx-border-radius);
}
.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: var(--dx-font-weight-medium);
}
.table.table-hover tbody tr {
    transition: all 0.3s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
    .table.table-hover tbody tr {
        transition: none;
    }
}
.table.table-hover tbody tr:hover {
    box-shadow: 0 8px 24px rgba(149, 157, 165, 0.1);
}
.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;
}
.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-right-radius: 7px;
    border-bottom-right-radius: 7px;
    border-right: 1px solid var(--dx-border-color);
}
.table-separate td:last-child {
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
    border-left: 1px solid var(--dx-border-color);
}
.table-striped-even > tbody > tr:nth-child(2n) > td {
    background-color: var(--dx-tertiary-bg);
}
.table-color-primary {
    --dx-table-striped-bg: var(--dx-primary-bg-subtle);
}
.table-primary {
    --dx-table-color: var(--dx-body-color);
    --dx-table-bg: rgba(var(--dx-primary-rgb), 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-right: calc(var(--dx-spacer) * -1);
    margin-left: calc(var(--dx-spacer) * -1);
}
.table-card :is(th, td):first-child {
    padding-right: var(--dx-spacer) !important;
}
.table-card :is(th, td):last-child {
    padding-left: var(--dx-spacer) !important;
}
.form-wizard .step-indicators {
    display: flex;
    gap: 1rem;
}
.form-wizard .step-dot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}
.form-wizard .step-dot .step-number {
    background: var(--dx-tertiary-bg);
    color: var(--dx-secondary-color);
    font-weight: var(--dx-font-weight-semibold);
    transition: all 0.3s ease-in-out;
    font-size: 0.875rem;
}
@media (prefers-reduced-motion: reduce) {
    .form-wizard .step-dot .step-number {
        transition: none;
    }
}
.form-wizard .step-dot.active .step-number {
    background: linear-gradient(
        -135deg,
        var(--dx-primary) 0,
        var(--dx-secondary) 100%
    );
    color: #fff;
}
.form-wizard .step-dot.completed .step-number {
    background: var(--dx-success-bg-subtle);
    color: var(--dx-success);
}
.form-wizard .requirement-item.valid {
    color: var(--dx-success);
}
.form-wizard .requirement-item.invalid {
    color: var(--dx-danger);
}
.form-wizard .success-animation {
    animation: bounceIn 0.8s ease-out;
}
@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    to {
        transform: scale(1);
    }
}
.apexcharts-tooltip.apexcharts-theme-light {
    border: 1px solid var(--dx-border-color) !important;
    background: var(--dx-secondary-bg) !important;
    border-radius: 0.375rem;
    box-shadow: var(--dx-box-shadow);
}
.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
    font-family: var(--dx-font-sans-serif) !important;
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
    background-color: var(--dx-secondary-bg) !important;
    font-weight: 600;
}
.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-text {
    font-size: 0.75rem;
}
.apexcharts-datalabel {
    font-family: var(--dx-font-sans-serif) !important;
}
:is(.apexcharts-text, .apexcharts-title-text, .apexcharts-xaxis-label) {
    font-family: var(--dx-font-sans-serif) !important;
    fill: var(--dx-body-color) !important;
}
.apexcharts-legend-text {
    font-size: 0.7813rem !important;
    color: var(--dx-body-color) !important;
    font-family: var(--dx-font-sans-serif) !important;
}
.apexcharts-tooltip-rangebar .category {
    color: var(--dx-secondary-color) !important;
}
:is(.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;
}
:is(.apexcharts-gridline, .apexcharts-xcrosshairs, .apexcharts-xaxis-tick) {
    stroke: var(--dx-border-color) !important;
}
.apexcharts-grid-borders line,
.apexcharts-xaxis line {
    stroke: var(--dx-light-bg-subtle);
}
.apexcharts-series-markers :is(circle, path) {
    stroke: var(--dx-secondary-bg);
}
.apexcharts-bar-series path {
    stroke: var(--dx-secondary-bg);
}
.apexcharts-boxPlot-series path {
    stroke: var(--dx-light-bg-subtle);
}
:is(.apexcharts-heatmap, .apexcharts-treemap) rect {
    stroke: var(--dx-secondary-bg);
}
.apexcharts-pie-series path {
    stroke: var(--dx-secondary-bg);
}
.apexcharts-pie-label {
    fill: #fff !important;
}
.apexcharts-pie :is(line, circle) {
    stroke: var(--dx-border-color);
}
.apexcharts-radar-series :is(polygon, line) {
    stroke: var(--dx-border-color);
}
.apexcharts-radialbar-track path {
    stroke: var(--dx-light);
}
.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"] *) {
    right: 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: #fff;
}
.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: rtl;
}
.air-datepicker {
    box-shadow: var(--dx-box-shadow-sm) !important;
}
.air-datepicker .air-datepicker-body--day-names {
    margin: 0 0 3px;
    padding: 3px 0;
    background-color: var(--dx-tertiary-bg);
    font-weight: var(--dx-font-weight-semibold);
}
.air-datepicker .air-datepicker--pointer:after {
    background: var(--dx-secondary-bg);
}
.air-datepicker-global-container {
    z-index: 1056;
}
html * {
    unicode-bidi: bidi-override;
}
.filepond--drip-blob,
.filepond--panel-root {
    background: var(--dx-tertiary-bg) !important;
    border: 1px solid var(--dx-border-color);
}
.filepond--drop-label {
    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: 7px;
    box-shadow: none;
}
.filepond--file .filepond--image-preview-overlay {
    display: none;
}
.filepond--file .filepond--file-action-button {
    background-color: var(--dx-tertiary-bg);
    color: var(--dx-secondary-color);
}
.filepond--item-panel {
    background-color: transparent !important;
}
.filepond--item > .filepond--panel .filepond--panel-bottom {
    box-shadow: none !important;
}
.file-upload-invoice .filepond--root,
.file-upload-invoice .filepond--root .filepond--drop-label {
    height: 152px !important;
}
.file-upload-invoice .filepond--image-preview-wrapper {
    height: 120px !important;
}
.gridjs-container {
    color: var(--dx-body-color);
}
.gridjs-container .gridjs-wrapper {
    box-shadow: none;
    border: 1px solid var(--dx-border-color);
    border-radius: 0;
}
.gridjs-container th.gridjs-th {
    background-color: var(--dx-tertiary-bg);
    color: var(--dx-secondary-color);
}
.gridjs-container td.gridjs-td,
.gridjs-container th.gridjs-th {
    border-color: var(--dx-border-color);
    padding: 0.875rem 0.75rem;
}
.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: var(--dx-body-font-size);
}
.gridjs-container input.gridjs-input:focus {
    box-shadow: none;
    border-color: var(--dx-primary);
}
.gridjs-container input.gridjs-input::-moz-placeholder {
    color: var(--dx-secondary-color);
}
.gridjs-container input.gridjs-input::placeholder {
    color: var(--dx-secondary-color);
}
:root {
    --swal2-background: var(--dx-secondary-bg);
    --swal2-color: var(--dx-body-color);
    --swal2-footer-border-color: var(--dx-border-color);
    --swal2-close-button-color: var(--dx-secondary-color);
}
div:where(.swal2-icon).swal2-success {
    border-color: var(--dx-success-border-subtle);
    color: var(--dx-success);
}
div:where(.swal2-icon).swal2-success .swal2-success-ring {
    border-color: var(--dx-success-border-subtle);
}
div:where(.swal2-icon).swal2-success [class^="swal2-success-line"] {
    background-color: var(--dx-success);
}
div:where(.swal2-icon).swal2-error {
    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-file),
div:where(.swal2-container) input:where(.swal2-input),
div:where(.swal2-container) textarea:where(.swal2-textarea) {
    border-color: var(--dx-border-color);
    box-shadow: none;
    border-radius: var(--dx-border-radius);
    background: var(--dx-secondary-bg);
    font-size: var(--dx-body-font-size);
    color: var(--dx-body-color);
}
div:where(.swal2-container) input:where(.swal2-file):focus,
div:where(.swal2-container) input:where(.swal2-input):focus,
div:where(.swal2-container) textarea:where(.swal2-textarea):focus {
    border-color: var(--dx-primary);
    box-shadow: none;
}
div:where(.swal2-container) h2:where(.swal2-title) {
    font-size: calc(var(--dx-body-font-size) * 1.75);
    margin-bottom: 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 {
    left: -0.25rem;
    height: 1.5rem;
    width: 0.5rem;
    top: -8px;
}
.noUi-handle {
    box-shadow: none;
}
.noUi-handle:after,
.noUi-handle:before {
    display: none;
}
.noUi-marker {
    background-color: var(--dx-tertiary-bg);
}
.noUi-value-sub {
    color: var(--dx-text-muted);
}
.noUi-handle {
    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;
}
#blue,
#green,
#red {
    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: #7f7f7f;
    background: #7f7f7f;
    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);
}
.tippy-box {
    background-color: var(--dx-body-color);
    font-size: 0.8477rem;
    color: var(--dx-secondary-bg);
}
.tippy-arrow {
    color: var(--dx-body-color);
}
.vis-panel.vis-bottom,
.vis-panel.vis-center,
.vis-panel.vis-left,
.vis-panel.vis-right,
.vis-panel.vis-top,
.vis-timeline {
    border-color: var(--dx-border-color);
}
:is(.vis-labelset .vis-label, .vis-foreground .vis-group) {
    border-color: var(--dx-border-color);
}
.vis-item {
    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 table.dataTable td.dt-empty,
.dt-container table.dataTable td.dt-type-date,
.dt-container table.dataTable th.dt-type-date,
.dt-container table.dataTable th.dt-type-numeric,
.dt-container td.dt-type-numeric {
    text-align: right !important;
}
.dt-container table.dataTable thead:hover > tr > th.dt-orderable-asc:hover,
.dt-container table.dataTable thead > tr > th.dt-orderable-desc:hover {
    outline: none;
}
.dt-container .table-striped-even > tbody > tr:nth-child(2n) > td,
.dt-container .table.hovered tr:hover {
    background-color: var(--dx-tertiary-bg);
}
.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 8px 24px rgba(149, 157, 165, 0.1);
    background-color: var(--dx-secondary-bg) !important;
}
.timeline-horizontal {
    position: relative;
}
.timeline-horizontal .timeline-line {
    position: absolute;
    top: 15px;
    inset-inline: 0;
    background-color: var(--dx-border-color);
    border-radius: 7px;
}
.timeline-horizontal .timeline-box {
    min-width: 120px;
}
.timeline-horizontal .timeline-box .dot {
    position: absolute;
    top: 16px;
    right: 50%;
}
@media (min-width: 1200px) and (max-width: 1535.98px) {
    .profile-container .page-wrapper {
        padding-inline: 0;
    }
}
.profile-widget {
    background-image: url(https://srbthemes.kcubeinfotech.com/alloce/images/gallery/profile.webp);
    background-size: cover;
    background-position: top;
    height: 230px;
    margin: -15px -14px 0;
    position: relative;
}
@media (min-width: 1200px) {
    .profile-widget {
        margin: -15px -10px 0;
    }
}
@media (min-width: 1536px) {
    .profile-widget {
        margin: -15px calc(var(--dx-page-wrapper-width) * -1.9) 0
            calc(var(--dx-page-wrapper-width) * -1.9);
    }
}
.profile-widget:after {
    content: "";
    position: absolute;
    inset: 0;
    backdrop-filter: blur(2px);
    background-color: rgba(var(--dx-body-color-rgb), 0.5);
}
.profile-section {
    margin-top: -47px;
}
@media (min-width: 1200px) and (max-width: 1535.98px) {
    .profile-section {
        padding-inline: 1.25rem;
    }
}
.progress-circle .progress-text-inner img.progress-circle-img {
    width: 84%;
    height: 84%;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover;
}
@media (min-width: 992px) {
    .profile-nav-card {
        background-color: transparent;
    }
    .profile-nav-card .card-body {
        padding-inline: 0;
        padding-top: 0;
    }
}
.profile-nav {
    margin-bottom: -20px;
}
@media (max-width: 1199.98px) {
    .profile-nav {
        margin-inline: -14px;
    }
}
.profile-nav .nav-item .nav-link {
    padding: 13px 27px;
    position: relative;
    font-weight: 400;
    border-radius: var(--dx-border-radius-lg) var(--dx-border-radius-lg) 0 0;
    backdrop-filter: blur(4px);
    background-color: var(--dx-light);
}
.profile-nav
    .nav-item
    .nav-link
    :is(.profile-effect-left, .profile-effect-right) {
    position: absolute;
    bottom: 0;
    height: 12px;
    width: 12px;
}
.profile-nav .nav-item .nav-link .profile-effect-left {
    background: radial-gradient(
        circle at right top,
        transparent 11px,
        var(--dx-light) 12px
    );
    right: -12px;
}
.profile-nav .nav-item .nav-link .profile-effect-right {
    background: radial-gradient(
        circle at left top,
        transparent 11px,
        var(--dx-light) 12px
    );
    left: -12px;
}
@media (min-width: 992px) {
    .profile-nav .nav-item .nav-link {
        background-color: rgba(var(--dx-white-rgb), 0.14);
        color: #fff;
    }
    .profile-nav .nav-item .nav-link .profile-effect-left {
        background: radial-gradient(
            circle at right top,
            transparent 11px,
            rgba(var(--dx-white-rgb), 0.14) 12px
        );
    }
    .profile-nav .nav-item .nav-link .profile-effect-right {
        background: radial-gradient(
            circle at left top,
            transparent 11px,
            rgba(var(--dx-white-rgb), 0.14) 12px
        );
    }
}
.profile-nav .nav-item .nav-link:hover {
    background-color: rgba(var(--dx-white-rgb), 0.2);
}
.profile-nav .nav-item .nav-link.active {
    background-color: var(--dx-primary);
    font-weight: 500;
    color: #fff;
}
.profile-nav .nav-item .nav-link.active .profile-effect-left {
    background: radial-gradient(
        circle at right top,
        transparent 11px,
        var(--dx-primary) 12px
    );
}
.profile-nav .nav-item .nav-link.active .profile-effect-right {
    background: radial-gradient(
        circle at left top,
        transparent 11px,
        var(--dx-primary) 12px
    );
}
.img-scale-skew {
    transition: all 0.3s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
    .img-scale-skew {
        transition: none;
    }
}
.img-scale-skew:hover {
    transform: scale(1.05) skewX(-3deg);
}
.friends-card .avatar {
    display: inline-block;
    box-shadow: var(--dx-shadow);
    border: 3px solid var(--dx-secondary-bg);
    overflow: hidden;
}
.rounded-modern {
    border-radius: 70% 30% 30% 70%/30% 30% 70% 70%;
}
.bg-gradient-b-primary {
    background-image: linear-gradient(
        to top,
        rgba(var(--dx-primary-rgb), 0.15),
        rgba(var(--dx-primary-rgb), 0)
    );
}
.bg-gradient-b-secondary {
    background-image: linear-gradient(
        to top,
        rgba(var(--dx-secondary-rgb), 0.15),
        rgba(var(--dx-secondary-rgb), 0)
    );
}
.bg-gradient-b-success {
    background-image: linear-gradient(
        to top,
        rgba(var(--dx-success-rgb), 0.15),
        rgba(var(--dx-success-rgb), 0)
    );
}
.bg-gradient-b-info {
    background-image: linear-gradient(
        to top,
        rgba(var(--dx-info-rgb), 0.15),
        rgba(var(--dx-info-rgb), 0)
    );
}
.bg-gradient-b-warning {
    background-image: linear-gradient(
        to top,
        rgba(var(--dx-warning-rgb), 0.15),
        rgba(var(--dx-warning-rgb), 0)
    );
}
.bg-gradient-b-danger {
    background-image: linear-gradient(
        to top,
        rgba(var(--dx-danger-rgb), 0.15),
        rgba(var(--dx-danger-rgb), 0)
    );
}
.bg-gradient-b-light {
    background-image: linear-gradient(
        to top,
        rgba(var(--dx-light-rgb), 0.15),
        rgba(var(--dx-light-rgb), 0)
    );
}
.bg-gradient-b-dark {
    background-image: linear-gradient(
        to top,
        rgba(var(--dx-dark-rgb), 0.15),
        rgba(var(--dx-dark-rgb), 0)
    );
}
.bg-gradient-b-pink {
    background-image: linear-gradient(
        to top,
        rgba(var(--dx-pink-rgb), 0.15),
        rgba(var(--dx-pink-rgb), 0)
    );
}
.bg-gradient-b-orange {
    background-image: linear-gradient(
        to top,
        rgba(var(--dx-orange-rgb), 0.15),
        rgba(var(--dx-orange-rgb), 0)
    );
}
.bg-gradient-b-indigo {
    background-image: linear-gradient(
        to top,
        rgba(var(--dx-indigo-rgb), 0.15),
        rgba(var(--dx-indigo-rgb), 0)
    );
}
.blur-2xl {
    filter: blur(40px);
}
.pricing-gradient {
    background: conic-gradient(
        from -120deg,
        rgba(var(--dx-secondary-rgb), 0.5),
        rgba(var(--dx-primary-rgb), 0.5),
        rgba(var(--dx-orange-rgb), 0.5),
        rgba(var(--dx-primary-rgb), 0.5),
        rgba(var(--dx-orange-rgb), 0.5),
        rgba(var(--dx-secondary-rgb), 0.5)
    );
}
.pricing-tag {
    position: absolute;
    top: 4px;
    left: 50px;
    transform: rotate(-26deg);
    z-index: 1;
    padding: 7px 12px;
    font-size: 13.3px;
}
.font-cambria {
    font-family:
        Cambria,
        Cochin,
        Georgia,
        Times,
        Times New Roman,
        serif;
}
.pricing-col-bg {
    background-color: rgba(var(--dx-primary-rgb), 0.06) !important;
}
@keyframes orbit-spin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(-1turn);
    }
}
@keyframes orbit-spin-reverse {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(1turn);
    }
}
@keyframes counter-spin {
    0% {
        transform: translate(50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(50%, -50%) rotate(1turn);
    }
}
@keyframes counter-spin-reverse {
    0% {
        transform: translate(50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(50%, -50%) rotate(-1turn);
    }
}
.contact-user-wrapper {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.contact-user-wrapper .orbit {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
    border: 1.5px dashed rgba(var(--dx-white-rgb), 0.25);
    border-radius: 50%;
}
.contact-user-wrapper .orbit .server {
    position: absolute;
    border-radius: 50%;
    transform: translate(50%, -50%);
}
.contact-user-wrapper .orbit-1 {
    width: 200px;
    height: 200px;
    animation: orbit-spin 60s linear infinite;
}
.contact-user-wrapper .orbit-1 .server {
    animation: counter-spin 60s linear infinite;
}
.contact-user-wrapper .orbit-1 .avatar-1 {
    top: 50%;
    right: 0;
}
.contact-user-wrapper .orbit-1 .avatar-2 {
    top: 95.36%;
    left: 20.64%;
}
.contact-user-wrapper .orbit-1 .avatar-3 {
    top: 14.64%;
    left: 2.64%;
}
.contact-user-wrapper .orbit-2 {
    width: 400px;
    height: 400px;
    animation: orbit-spin-reverse 100s linear infinite;
}
.contact-user-wrapper .orbit-2 .server {
    animation: counter-spin-reverse 100s linear infinite;
}
.contact-user-wrapper .orbit-2 .avatar-4 {
    top: 84.94%;
    right: 13.7%;
}
.contact-user-wrapper .orbit-2 .avatar-5 {
    top: 7.06%;
    right: 24.7%;
}
.contact-user-wrapper .orbit-2 .avatar-6 {
    top: 76.3%;
    left: 2%;
}
.contact-user-wrapper .orbit-2 .avatar-7 {
    top: 6.7%;
    left: 16%;
}
.contact-user-wrapper .orbit-3 {
    width: 600px;
    height: 600px;
    animation: orbit-spin 120s linear infinite;
}
.contact-user-wrapper .orbit-3 .server {
    animation: counter-spin 120s linear infinite;
}
.contact-user-wrapper .orbit-3 .avatar-8 {
    top: 50%;
    right: 0;
}
.contact-user-wrapper .orbit-3 .avatar-9 {
    top: 96%;
    right: 31.7%;
}
.contact-user-wrapper .orbit-3 .avatar-10 {
    top: 2%;
    right: 62.7%;
}
.contact-user-wrapper .orbit-3 .avatar-11 {
    top: 96.98%;
    left: 28.9%;
}
.contact-user-wrapper .orbit-3 .avatar-12 {
    top: 42.02%;
    left: -4.1%;
}
.contact-user-wrapper .orbit-4 {
    width: 800px;
    height: 800px;
    animation: orbit-spin-reverse 140s linear infinite;
}
.contact-user-wrapper .orbit-4 .server {
    animation: counter-spin-reverse 140s linear infinite;
}
.contact-user-wrapper .orbit-4 .avatar-13 {
    top: 73.94%;
    left: 2.7%;
}
.contact-user-wrapper .orbit-4 .avatar-14 {
    top: 0;
    left: 45.3%;
}
.contact-user-wrapper .orbit-4 .avatar-15 {
    top: 85.36%;
    right: 14.64%;
}
.contact-user-wrapper .orbit-4 .avatar-16 {
    top: 31.64%;
    right: 3.64%;
}
.contact-user-wrapper .orbit-4 .avatar-17 {
    top: 98.3%;
    left: 35.06%;
}
.contact-user-wrapper .orbit-4 .avatar-18 {
    top: 20.3%;
    left: 5.06%;
}
.contact-info-card {
    position: relative;
}
.contact-info-card :is(.circle-1, .circle-2) {
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: rgba(var(--dx-white-rgb), 0.05);
    border-radius: 50rem;
    z-index: 0;
}
.contact-info-card .circle-1 {
    bottom: -50px;
    left: -50px;
}
.contact-info-card .circle-2 {
    bottom: -100px;
    left: 30px;
}
.contact-info-card .circle-3 {
    position: absolute;
    width: 30px;
    height: 30px;
    bottom: 30px;
    border: 1px solid rgba(var(--dx-white-rgb), 0.15);
    left: 85px;
    border-radius: 0.4rem;
    transform: rotate(-45deg);
}
.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.15),
        rgba(var(--dx-primary-rgb), 0)
    );
}
.bg-gradient-t-secondary {
    background-image: linear-gradient(
        to bottom,
        rgba(var(--dx-secondary-rgb), 0.15),
        rgba(var(--dx-secondary-rgb), 0)
    );
}
.bg-gradient-t-success {
    background-image: linear-gradient(
        to bottom,
        rgba(var(--dx-success-rgb), 0.15),
        rgba(var(--dx-success-rgb), 0)
    );
}
.bg-gradient-t-info {
    background-image: linear-gradient(
        to bottom,
        rgba(var(--dx-info-rgb), 0.15),
        rgba(var(--dx-info-rgb), 0)
    );
}
.bg-gradient-t-warning {
    background-image: linear-gradient(
        to bottom,
        rgba(var(--dx-warning-rgb), 0.15),
        rgba(var(--dx-warning-rgb), 0)
    );
}
.bg-gradient-t-danger {
    background-image: linear-gradient(
        to bottom,
        rgba(var(--dx-danger-rgb), 0.15),
        rgba(var(--dx-danger-rgb), 0)
    );
}
.bg-gradient-t-light {
    background-image: linear-gradient(
        to bottom,
        rgba(var(--dx-light-rgb), 0.15),
        rgba(var(--dx-light-rgb), 0)
    );
}
.bg-gradient-t-dark {
    background-image: linear-gradient(
        to bottom,
        rgba(var(--dx-dark-rgb), 0.15),
        rgba(var(--dx-dark-rgb), 0)
    );
}
.bg-gradient-t-pink {
    background-image: linear-gradient(
        to bottom,
        rgba(var(--dx-pink-rgb), 0.15),
        rgba(var(--dx-pink-rgb), 0)
    );
}
.bg-gradient-t-orange {
    background-image: linear-gradient(
        to bottom,
        rgba(var(--dx-orange-rgb), 0.15),
        rgba(var(--dx-orange-rgb), 0)
    );
}
.bg-gradient-t-indigo {
    background-image: linear-gradient(
        to bottom,
        rgba(var(--dx-indigo-rgb), 0.15),
        rgba(var(--dx-indigo-rgb), 0)
    );
}
.coming-soon-wrapper {
    background-image: url(https://srbthemes.kcubeinfotech.com/alloce/images/pages/coming-soon.webp);
    background-position: 50%;
    background-size: cover;
    position: relative;
}
.coming-soon-wrapper:before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(var(--dx-black-rgb), 0.45);
    z-index: 0;
}
.coming-soon-input {
    max-width: 30rem;
    margin: 0 auto;
    position: relative;
}
.coming-soon-input .form-control {
    padding-left: 126px;
    height: 48px;
}
.coming-soon-input button {
    position: absolute;
    top: 50%;
    left: 0.3125rem;
    transform: translateY(-50%);
}
.backdrop-blur {
    backdrop-filter: blur(5px);
    background-color: rgba(var(--dx-secondary-bg-rgb), 0.08);
}
.mt-n32 {
    margin-top: -8rem;
}
.pages-main-title {
    letter-spacing: 35px;
}
@media (max-width: 991.98px) {
    .pages-main-title {
        letter-spacing: 10px;
    }
}
.pages-sub-title {
    letter-spacing: 12px;
}
@media (max-width: 767.98px) {
    .pages-sub-title {
        letter-spacing: 6px;
    }
}
@keyframes bounceFloat {
    0%,
    to {
        transform: translateY(-10%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: none;
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}
.bounce-animation {
    animation: bounceFloat 3s ease-in-out infinite;
}
@media (min-width: 768px) {
    .error-vector {
        max-width: 37rem;
    }
}
.help-center-categories {
    height: calc(100vh - 360px);
}
.help-center-categories .nav .nav-item .nav-link {
    padding: 0.75rem 1rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    border-radius: 0.5rem;
    transition: all 0.3s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
    .help-center-categories .nav .nav-item .nav-link {
        transition: none;
    }
}
.help-center-categories .nav .nav-item .nav-link i {
    font-size: 1.1rem;
}
.help-center-categories .nav .nav-item .nav-link .badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}
.help-center-categories .nav .nav-item .nav-link.active .badge {
    background-color: hsla(0, 0%, 100%, 0.2) !important;
    color: var(--dx-white) !important;
}
.ticket-comments .comment-item {
    border-inline-start: 3px solid var(--dx-primary) !important;
    border: 1px solid var(--dx-border-color);
    border-radius: 0.5rem;
    margin-block-end: 1rem;
}
.ticket-comments .comment-item.internal {
    border-right-color: var(--dx-warning) !important;
    background-color: var(--dx-custom-bg);
}
.ticket-comments .comment-item .comment-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-block-end: 0.5rem;
}
.ticket-comments .comment-item .comment-header .comment-type {
    background-color: var(--dx-primary-bg-subtle);
    color: var(--dx-primary);
}
@media (max-width: 768px) {
    .help-center-categories {
        height: auto;
        max-height: 20rem;
    }
    .ticket-list-wrapper {
        height: calc(100vh - 15rem);
    }
    .ticket-card .ticket-footer .ticket-info {
        flex-direction: column;
        align-items: flex-start;
    }
    .ticket-card .ticket-footer .ticket-info .ticket-actions {
        align-self: flex-end;
    }
    .stats-card {
        margin-block-end: 1rem;
    }
}
.card-slide:before {
    top: auto;
    bottom: 0;
    right: 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:before {
    height: 100%;
    top: 0;
    bottom: auto;
}
.card-slide:hover a {
    color: #fff;
    border-color: hsla(0, 0%, 100%, 0.26);
}
[class*="icon-outline"] {
    outline: 1px;
    outline-style: dashed;
    border: 2px solid var(--dx-light-border-subtle);
}
.card-slide-primary .badge,
.card-slide-primary.card-slide:before {
    background-color: var(--dx-primary);
}
.card-slide-primary.card-slide .badge {
    background-color: var(--dx-primary-text-emphasis);
}
.icon-outline-primary {
    background-color: var(--dx-primary);
    outline-color: var(--dx-primary);
}
.card-slide-secondary .badge,
.card-slide-secondary.card-slide:before {
    background-color: var(--dx-secondary);
}
.card-slide-secondary.card-slide .badge {
    background-color: var(--dx-secondary-text-emphasis);
}
.icon-outline-secondary {
    background-color: var(--dx-secondary);
    outline-color: var(--dx-secondary);
}
.card-slide-success .badge,
.card-slide-success.card-slide:before {
    background-color: var(--dx-success);
}
.card-slide-success.card-slide .badge {
    background-color: var(--dx-success-text-emphasis);
}
.icon-outline-success {
    background-color: var(--dx-success);
    outline-color: var(--dx-success);
}
.card-slide-info .badge,
.card-slide-info.card-slide:before {
    background-color: var(--dx-info);
}
.card-slide-info.card-slide .badge {
    background-color: var(--dx-info-text-emphasis);
}
.icon-outline-info {
    background-color: var(--dx-info);
    outline-color: var(--dx-info);
}
.card-slide-warning .badge,
.card-slide-warning.card-slide:before {
    background-color: var(--dx-warning);
}
.card-slide-warning.card-slide .badge {
    background-color: var(--dx-warning-text-emphasis);
}
.icon-outline-warning {
    background-color: var(--dx-warning);
    outline-color: var(--dx-warning);
}
.card-slide-danger .badge,
.card-slide-danger.card-slide:before {
    background-color: var(--dx-danger);
}
.card-slide-danger.card-slide .badge {
    background-color: var(--dx-danger-text-emphasis);
}
.icon-outline-danger {
    background-color: var(--dx-danger);
    outline-color: var(--dx-danger);
}
.card-slide-light .badge,
.card-slide-light.card-slide:before {
    background-color: var(--dx-light);
}
.card-slide-light.card-slide .badge {
    background-color: var(--dx-light-text-emphasis);
}
.icon-outline-light {
    background-color: var(--dx-light);
    outline-color: var(--dx-light);
}
.card-slide-dark .badge,
.card-slide-dark.card-slide:before {
    background-color: var(--dx-dark);
}
.card-slide-dark.card-slide .badge {
    background-color: var(--dx-dark-text-emphasis);
}
.icon-outline-dark {
    background-color: var(--dx-dark);
    outline-color: var(--dx-dark);
}
.card-slide-pink .badge,
.card-slide-pink.card-slide:before {
    background-color: var(--dx-pink);
}
.card-slide-pink.card-slide .badge {
    background-color: var(--dx-pink-text-emphasis);
}
.icon-outline-pink {
    background-color: var(--dx-pink);
    outline-color: var(--dx-pink);
}
.card-slide-orange .badge,
.card-slide-orange.card-slide:before {
    background-color: var(--dx-orange);
}
.card-slide-orange.card-slide .badge {
    background-color: var(--dx-orange-text-emphasis);
}
.icon-outline-orange {
    background-color: var(--dx-orange);
    outline-color: var(--dx-orange);
}
.card-slide-indigo .badge,
.card-slide-indigo.card-slide:before {
    background-color: var(--dx-indigo);
}
.card-slide-indigo.card-slide .badge {
    background-color: var(--dx-indigo-text-emphasis);
}
.icon-outline-indigo {
    background-color: var(--dx-indigo);
    outline-color: var(--dx-indigo);
}
.schedule-tabs {
    display: flex;
    gap: 0.75rem;
}
.schedule-tabs a {
    position: relative;
    color: var(--dx-secondary-color);
    transition: all 0.3s 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;
    left: 0;
    right: 0;
    bottom: -0.75rem;
    width: 0.25rem;
    height: 0.25rem;
    transition: all 0.3s 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.active,
.schedule-tabs a:hover {
    color: var(--dx-primary);
}
.schedule-tabs a.active:after,
.schedule-tabs a:hover:after {
    bottom: -0.375rem;
    opacity: 1;
}
.img-opacity {
    opacity: 0.03;
}
[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);
}
.rounded-20px {
    border-radius: 1.25rem;
}
.auth-modern {
    height: 100%;
}
@media (min-width: 1200px) {
    .auth-modern {
        height: 100vh;
    }
}
@media (max-width: 1199.98px) {
    .auth-modern-row {
        min-height: 100vh;
    }
}
@media (min-width: 1200px) {
    .auth-modern-row {
        height: 100%;
    }
}
.swiper-navigation-custom :is(.swiper-button-prev, .swiper-button-next) {
    width: 4.75rem;
    height: 4.75rem;
    border: 10px solid var(--dx-secondary-bg);
    background-color: var(--dx-secondary-bg);
}
.swiper-navigation-custom :is(.swiper-button-prev, .swiper-button-next):after,
.swiper-navigation-custom :is(.swiper-button-prev, .swiper-button-next):before {
    content: "";
    height: 30px;
    width: 30px;
    background-color: transparent;
}
.swiper-navigation-custom .swiper-button-prev {
    top: 16px !important;
    right: -6px !important;
    border-radius: 0 0 0 37px !important;
}
.swiper-navigation-custom .swiper-button-prev:after,
.swiper-navigation-custom .swiper-button-prev:before {
    box-shadow: 2.8992px -3.08px 0 2.92px var(--dx-secondary-bg);
}
.swiper-navigation-custom .swiper-button-prev:before {
    border-top-right-radius: 18px;
    position: absolute;
    top: 66px;
    right: -4px;
}
.swiper-navigation-custom .swiper-button-prev:after {
    border-top-right-radius: 18px;
    position: absolute;
    top: -4px;
    right: 66px;
}
.swiper-navigation-custom .swiper-button-next {
    top: auto !important;
    bottom: 28px;
    left: -6px !important;
    border-radius: 0 37px 0 0 !important;
}
.swiper-navigation-custom .swiper-button-next:after,
.swiper-navigation-custom .swiper-button-next:before {
    box-shadow: -2.8992px 3.08px 0 2.92px var(--dx-secondary-bg);
}
.swiper-navigation-custom .swiper-button-next:before {
    border-bottom-left-radius: 18px;
    position: absolute;
    left: -4px;
    bottom: 66px;
}
.swiper-navigation-custom .swiper-button-next:after {
    border-bottom-left-radius: 18px;
    position: absolute;
    left: 66px;
    bottom: 2px;
}
.swiper-navigation-custom .swiper-navigation-icon {
    display: none;
}
.auth-wrapper .logo-sm-light {
    opacity: 0.06;
    transform: rotate(20deg);
}
.text-gradient {
    background: linear-gradient(
        -90deg,
        var(--dx-pink),
        var(--dx-primary),
        var(--dx-success)
    );
    -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;
}
@media (min-width: 576px) {
    .otp-box {
        height: 56px;
        width: 56px;
    }
}
.auth-wrapper {
    background-color: var(--dx-secondary-bg);
}
.gradient-dark-danger {
    background: linear-gradient(
        -145deg,
        var(--dx-danger),
        color-mix(in srgb, var(--dx-danger) 75%, #000 27%)
    );
}
.gradient-dark-primary {
    background: linear-gradient(
        -145deg,
        var(--dx-primary),
        color-mix(in srgb, var(--dx-primary) 75%, #000 27%)
    );
}
.gradient-dark-indigo {
    background: linear-gradient(
        -145deg,
        var(--dx-indigo),
        color-mix(in srgb, var(--dx-indigo) 75%, #000 27%)
    );
}
.gradient-dark-dark {
    background: linear-gradient(
        -145deg,
        var(--dx-dark),
        color-mix(in srgb, var(--dx-dark) 75%, #000 27%)
    );
}
.gradient-dark-info {
    background: linear-gradient(
        -145deg,
        var(--dx-info),
        color-mix(in srgb, var(--dx-info) 75%, #000 27%)
    );
}
.gradient-dark-secondary {
    background: linear-gradient(
        -145deg,
        var(--dx-secondary),
        color-mix(in srgb, var(--dx-secondary) 75%, #000 27%)
    );
}
.auth-basic-vector {
    width: 35rem;
}
@media (min-width: 1536px) {
    .auth-basic-vector {
        width: 39rem;
    }
}
.pattern-1 {
    top: 10%;
    left: 50%;
    rotate: -20deg;
}
@media (min-width: 1536px) {
    .pattern-1 {
        right: 55%;
    }
}
.auth-square-shape {
    width: 500px;
    height: 88%;
    left: 7.5%;
    overflow: hidden;
}
.auth-square-shape:after,
.auth-square-shape:before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    background-color: rgba(var(--dx-white-rgb), 0.1);
    border-radius: 7px;
}
.auth-square-shape:before {
    bottom: 0;
    left: 0;
}
.auth-square-shape:after {
    bottom: -80px;
    left: 100px;
}
.main-faq-search {
    height: 16.5rem;
    background-color: rgba(var(--dx-primary-rgb), 0.65);
}
.main-faq-search .faq-banner-img {
    position: absolute;
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}
.privacy-banner {
    clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
    background-image:
        linear-gradient(
            to bottom left,
            hsla(0, 0%, 100%, 0.07) 25%,
            transparent 0,
            transparent 50%,
            hsla(0, 0%, 100%, 0.07) 0,
            hsla(0, 0%, 100%, 0.07) 75%,
            transparent 0,
            transparent
        ),
        linear-gradient(
            to top left,
            hsla(0, 0%, 100%, 0.07) 25%,
            transparent 0,
            transparent 50%,
            hsla(0, 0%, 100%, 0.07) 0,
            hsla(0, 0%, 100%, 0.07) 75%,
            transparent 0,
            transparent
        );
    background-size: 80px 80px;
}
.progress-gradient-secondary {
    background: linear-gradient(
        -90deg,
        var(--dx-primary),
        var(--dx-secondary),
        var(--dx-pink)
    );
}
.h-6px {
    height: 6px;
}
.border-6 {
    border-width: 6px !important;
}
.star-label {
    position: absolute;
    top: -3px;
    left: -27px;
    transform: rotate(-45deg);
    z-index: 1;
}
.timeline-month:before {
    content: "";
    width: 0.5rem;
    height: calc(100% - 0.3125rem);
    background-color: var(--dx-tertiary-bg);
    position: absolute;
    top: 0.5rem;
    right: 0.875rem;
    border-radius: 0.375rem;
}
.timeline-section {
    position: relative;
}
.timeline-section:before {
    content: "";
    height: 1px;
    width: 1.75rem;
    position: absolute;
    top: 0.875rem;
    right: 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;
    right: 0.75rem;
    background-color: var(--dx-primary);
    border: 2px solid var(--dx-secondary-bg);
    border-radius: 3.125rem;
}
.call-center-nav {
    margin-bottom: -20px;
}
@media (max-width: 1199.98px) {
    .call-center-nav {
        margin-inline: -14px;
    }
}
.call-center-nav .nav-item .nav-link {
    padding: 8px 28px 10px;
    position: relative;
    color: var(--dx-secondary-color);
    transition: none;
}
.call-center-nav
    .nav-item
    .nav-link
    :is(.call-center-effect-left, .call-center-effect-right) {
    position: absolute;
    inset: 0;
}
.call-center-nav
    .nav-item
    .nav-link
    :is(.call-center-effect-left, .call-center-effect-right):after,
.call-center-nav
    .nav-item
    .nav-link
    :is(.call-center-effect-left, .call-center-effect-right):before {
    content: "";
    position: absolute;
    bottom: 0;
    opacity: 0;
}
.call-center-nav
    .nav-item
    .nav-link
    :is(.call-center-effect-left, .call-center-effect-right):before {
    width: 35px;
    height: 35px;
    background-color: var(--dx-secondary-bg);
    z-index: 1;
}
.call-center-nav
    .nav-item
    .nav-link
    :is(.call-center-effect-left, .call-center-effect-right):after {
    width: 32px;
    height: 16px;
    border-radius: 0;
    background-color: var(--dx-primary);
}
.call-center-nav .nav-item .nav-link .call-center-effect-left:before {
    border-radius: 0 30%;
    right: -35px;
}
.call-center-nav .nav-item .nav-link .call-center-effect-left:after {
    right: -21px;
}
.call-center-nav .nav-item .nav-link .call-center-effect-right:before {
    border-radius: 30% 0;
    left: -35px;
}
.call-center-nav .nav-item .nav-link .call-center-effect-right:after {
    left: -21px;
}
.call-center-nav .nav-item .nav-link.active {
    color: var(--dx-white);
    background-color: var(--dx-primary);
}
.call-center-nav .nav-item .nav-link.active .call-center-effect-left:after,
.call-center-nav .nav-item .nav-link.active .call-center-effect-left:before,
.call-center-nav .nav-item .nav-link.active .call-center-effect-right:after,
.call-center-nav .nav-item .nav-link.active .call-center-effect-right:before {
    opacity: 1;
}
.modal-gradient-bg {
    background: linear-gradient(
        to left,
        rgba(var(--dx-primary-rgb), 0.2),
        rgba(var(--dx-indigo-rgb), 0.2),
        rgba(var(--dx-secondary-rgb), 0.2)
    );
}
.deal-simplebar {
    max-height: calc(100vh - 23.5rem);
}
.deal-column {
    width: 297px;
    flex-shrink: 0;
}
.crm-widget {
    clip-path: polygon(
        0 0,
        calc(100% - 18px) 0,
        100% 50%,
        calc(100% - 18px) 100%,
        0 100%,
        18px 50%
    );
}
.crm-widget.last {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 18px 50%);
}
.crm-widget.first {
    clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%);
}
.crm-lead-widget {
    min-width: 181px;
}
.product-card {
    position: relative;
}
.product-card .discount-label {
    position: absolute;
    top: 14px;
    right: -30px;
    transform: rotate(45deg);
    z-index: 1;
}
.products-colors .form-check .form-check-input {
    box-shadow: var(--dx-box-shadow);
    border: 2px solid var(--dx-secondary-bg) !important;
}
.products-colors .form-check .form-check-label {
    color: var(--dx-secondary-color);
}
.products-colors .form-check .form-check-input:checked + .form-check-label {
    color: var(--dx-white);
    background-color: var(--dx-primary) !important;
}
.productMainSlider {
    border-radius: 0 0.5rem 0.5rem 0;
    overflow: hidden;
}
.productMainSlider .swiper-button-next svg,
.productMainSlider .swiper-button-prev svg {
    display: none;
}
.productThumbSlider {
    border-radius: 0.5rem 0 0 0.5rem;
    overflow: hidden;
}
:is(.productMainSlider, .productThumbSlider) .swiper-slide {
    position: relative;
}
:is(.productMainSlider, .productThumbSlider) .swiper-slide img {
    transition: all 0.3s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
    :is(.productMainSlider, .productThumbSlider) .swiper-slide img {
        transition: none;
    }
}
:is(.productMainSlider, .productThumbSlider) .swiper-slide:hover img {
    transform: scale(1.02);
}
:is(.swiper-button-next, .swiper-button-prev).swiper-button-white {
    width: 24px;
    height: 24px;
    background-color: rgba(var(--dx-secondary-bg-rgb), 0.9);
    border-radius: 50%;
    color: var(--dx-primary);
    font-size: 16px;
}
.managar-reviews-sticky {
    position: sticky;
    top: calc(var(--dx-topbar) + var(--dx-spacer));
    z-index: 1001;
}
.filter-accordion .accordion-button {
    box-shadow: none !important;
}
.filter-accordion .accordion-button:after {
    content: "";
}
.filter-accordion .accordion-button:before {
    content: "";
    font-family: remixicon !important;
    position: absolute;
    display: inline-block;
    margin-right: auto;
    font-size: 18px;
    transition: content 0.3s ease-in-out;
    left: 6.4px;
    top: 50%;
    transform: translateY(-50%);
}
.filter-accordion .accordion-button.collapsed:before {
    content: "\ea12";
}
.filter-accordion .accordion-button:not(.collapsed):before {
    content: "\f1af";
}
.filter-accordion .accordion-button:not(.collapsed) {
    background-color: var(--dx-secondary-bg);
    color: var(--dx-body-color);
}
.size-filter-btn {
    transition: all 0.3s ease-in-out;
}
.size-filter-btn.active,
.size-filter-btn:active,
.size-filter-btn:hover {
    background-color: var(--dx-primary) !important;
    border-color: var(--dx-primary) !important;
    color: var(--dx-white) !important;
}
.add-product-header .main-topbar.nav-sticky {
    border-bottom: 1px solid var(--dx-border-color);
    background-color: var(--dx-secondary-bg);
}
#Additional,
#Basic,
#Images,
#Pricing,
#SEO {
    scroll-margin-top: 160px;
}
@media (max-width: 767.98px) {
    .order-timeline {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
    }
}
.top-20 {
    top: var(--dx-topbar);
}
.payment-success-modal {
    background-image: url(https://srbthemes.kcubeinfotech.com/alloce/images/others/payment-modal.webp);
    background-position: 50%;
    background-size: cover;
}
.mailbox-wrapper {
    display: flex;
    flex-direction: row;
    min-height: calc(100vh - 200px);
}
.mailbox-wrapper .mailbox-left {
    width: 17rem;
}
.mailbox-wrapper .mailbox-left .card-header {
    background: linear-gradient(
        -135deg,
        var(--dx-light) 0,
        var(--dx-light-dark) 100%
    );
    border-bottom: 1px solid var(--dx-border-color);
}
.mailbox-wrapper .mailbox-left .mailbox-nav .nav-link {
    padding-inline: 12px;
    border-radius: 0.375rem;
    font-weight: 400;
    transition: all 0.3s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
    .mailbox-wrapper .mailbox-left .mailbox-nav .nav-link {
        transition: none;
    }
}
.mailbox-wrapper .mailbox-left .mailbox-nav .nav-link:hover {
    background-color: var(--dx-primary-bg-subtle);
    color: var(--dx-primary);
}
.mailbox-wrapper .mailbox-left .mailbox-nav .nav-link.active {
    background-color: var(--dx-primary);
    color: #fff;
}
.mailbox-wrapper .mailbox-left .mailbox-labels .price-tag {
    transform: scaleX(-100%);
}
.mailbox-wrapper .mailbox-left .mailbox-labels a {
    transition: all 0.3s ease-in-out;
    padding: 0.5rem;
    border-radius: 0.5rem;
}
@media (prefers-reduced-motion: reduce) {
    .mailbox-wrapper .mailbox-left .mailbox-labels a {
        transition: none;
    }
}
.mailbox-wrapper .mailbox-left .mailbox-labels a:hover {
    background-color: var(--dx-light);
}
@media (max-width: 1535.98px) {
    .mailbox-wrapper .mailbox-left {
        position: fixed;
        inset-block: 0;
        left: 0;
        z-index: 1045;
        margin-bottom: 0;
        border-radius: 0;
        display: none;
        overflow-y: auto;
        width: 20rem;
        background-color: var(--dx-custom-bg);
    }
}
.mailbox-wrapper .mailbox-list {
    overflow: hidden;
}
.mailbox-wrapper .mailbox-list .quick-contacts .quick-contact-item {
    overflow: hidden;
    width: 350px;
    transition: all 0.3s ease-in-out;
    position: relative;
}
@media (prefers-reduced-motion: reduce) {
    .mailbox-wrapper .mailbox-list .quick-contacts .quick-contact-item {
        transition: none;
    }
}
.mailbox-wrapper .mailbox-list .quick-contacts .quick-contact-item:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 100%;
    background: var(--dx-primary);
    transform: scaleY(0);
    transition: all 0.3s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
    .mailbox-wrapper .mailbox-list .quick-contacts .quick-contact-item:before {
        transition: none;
    }
}
.mailbox-wrapper
    .mailbox-list
    .quick-contacts
    .quick-contact-item
    .contact-actions {
    display: flex;
    gap: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
    .mailbox-wrapper
        .mailbox-list
        .quick-contacts
        .quick-contact-item
        .contact-actions {
        transition: none;
    }
}
.mailbox-wrapper .mailbox-list .quick-contacts .quick-contact-item:hover {
    border-color: var(--dx-primary);
}
.mailbox-wrapper
    .mailbox-list
    .quick-contacts
    .quick-contact-item:hover:before {
    transform: scaleY(1);
}
.mailbox-wrapper
    .mailbox-list
    .quick-contacts
    .quick-contact-item:hover
    .contact-actions {
    opacity: 1;
    visibility: visible;
}
.mailbox-wrapper
    .mailbox-list
    .quick-contacts
    .quick-contact-item
    .contact-avatar {
    position: relative;
    flex-shrink: 0;
}
.mailbox-wrapper
    .mailbox-list
    .quick-contacts
    .quick-contact-item
    .contact-avatar
    .unread-count {
    position: absolute;
    top: -4px;
    left: -4px;
    background: var(--dx-danger);
    color: #fff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    border: 2px solid var(--dx-secondary-bg);
    z-index: 3;
}
.mailbox-wrapper .mailbox-list .email-list-container {
    height: 673px;
}
.mailbox-wrapper
    .mailbox-list
    .email-list-container
    .email-list
    .mailbox-list-item {
    transition: all 0.2s ease;
    border-bottom: 1px solid var(--dx-border-color);
    padding: 1rem 1.5rem;
}
.mailbox-wrapper
    .mailbox-list
    .email-list-container
    .email-list
    .mailbox-list-item:hover {
    background-color: var(--dx-light);
    transform: translateX(-4px);
}
.mailbox-wrapper
    .mailbox-list
    .email-list-container
    .email-list
    .mailbox-list-item:last-child {
    border-bottom: none;
}
.mailbox-wrapper
    .mailbox-list
    .email-list-container
    .email-list
    .mailbox-list-item
    .unread-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    border: 2px solid #fff;
    z-index: 1;
}
@media (max-width: 1535.98px) {
    .mailbox-wrapper .mailbox-list {
        border-radius: 1rem;
    }
}
@media (min-width: 1200px) {
    .mailbox-wrapper.show .mailbox-list {
        max-width: 0;
    }
}
.mailbox-wrapper .mail-overview {
    overflow: hidden;
}
.mailbox-wrapper .mail-overview .card-header {
    background: linear-gradient(
        -135deg,
        var(--dx-light) 0,
        var(--dx-light-dark) 100%
    );
    border-bottom: 1px solid var(--dx-border-color);
}
.mailbox-wrapper .mail-overview textarea {
    resize: none;
}
.mailbox-wrapper .mail-overview .email-compose .form-control {
    border: 1px solid var(--dx-border-color);
    border-radius: 0.5rem;
}
.mailbox-wrapper .mail-overview .email-compose .form-control:focus {
    border-color: var(--dx-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--dx-primary-rgb), 0.25);
}
@media (max-width: 1199.98px) {
    .mailbox-wrapper {
        flex-direction: column;
        gap: 1rem;
    }
    .mailbox-wrapper .mailbox-list {
        order: 1;
    }
    .mailbox-wrapper .mail-overview {
        order: 3;
    }
}
@media (max-width: 767.98px) {
    .mailbox-wrapper .mailbox-list .quick-contacts .quick-contact-item {
        padding: 0.75rem;
        gap: 0.75rem;
    }
    .mailbox-wrapper
        .mailbox-list
        .quick-contacts
        .quick-contact-item
        .contact-avatar
        .unread-count {
        width: 18px;
        height: 18px;
        font-size: 9px;
    }
    .mailbox-wrapper .mailbox-list .email-list-container .mailbox-list-item {
        padding: 0.75rem 1rem;
    }
    .mailbox-wrapper
        .mailbox-list
        .email-list-container
        .mailbox-list-item
        .d-flex {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.5rem;
    }
    .mailbox-wrapper .mail-overview .email-content {
        padding: 1rem;
    }
    .mailbox-wrapper .mail-overview .email-compose .p-4,
    .mailbox-wrapper .mail-overview .email-reply .p-4 {
        padding: 1rem !important;
    }
}
@media (max-width: 575.98px) {
    .mailbox-header {
        padding: 1rem;
        margin-bottom: 1rem;
    }
    .mailbox-header .mailbox-title h4 {
        font-size: 1.25rem;
    }
    .mailbox-header .mailbox-title p {
        font-size: 0.875rem;
    }
    .mailbox-wrapper {
        gap: 0.75rem;
    }
}
.mailbox-transition {
    transition: all 0.3s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
    .mailbox-transition {
        transition: none;
    }
}
.fc {
    --dx-link-color-rgb: var(--dx-emphasis-color);
    --fc-small-font-size: 0.85em;
    --fc-page-bg-color: var(--dx-secondary-bg);
    --fc-neutral-bg-color: var(--dx-tertiary-bg);
    --fc-neutral-text-color: var(--dx-secondary-color);
    --fc-border-color: var(--dx-border-color);
    --fc-event-bg-color: var(--dx-primary);
    --fc-event-border-color: var(--dx-primary);
    --fc-event-text-color: var(--dx-emphasis-color);
    --fc-event-selected-overlay-color: rgba(0, 0, 0, 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%, 0.3);
    --fc-bg-event-color: #8fdf82;
    --fc-bg-event-opacity: 0.3;
    --fc-highlight-color: rgba(188, 232, 241, 0.3);
    --fc-today-bg-color: rgba(var(--dx-primary-rgb), 0.1);
    --fc-now-indicator-color: var(--dx-danger);
    --fc-list-event-hover-bg-color: var(--dx-tertiary-bg);
    --fc-highlight-color: rgba(var(--dx-primary-rgb), 0.05);
}
.fc .fc-col-header-cell-cushion {
    padding: 10px;
}
.fc .fc-toolbar-title {
    font-size: 1rem;
}
.fc .fc-toolbar {
    display: flex;
    flex-wrap: wrap;
}
.fc .fc-multimonth-title {
    background-color: var(--fc-page-bg-color);
}
.fc .fc-header-toolbar {
    gap: 0.5rem;
}
.fc .fc-toolbar-chunk .fc-today-button {
    text-transform: capitalize;
    color: var(--dx-white);
    background-color: var(--dx-primary);
    border-color: var(--dx-primary);
    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;
    border-radius: 7px;
    font-size: 0.87192rem;
    padding: 0.375rem 0.875rem;
}
@media (prefers-reduced-motion: reduce) {
    .fc .fc-toolbar-chunk .fc-today-button {
        transition: none;
    }
}
.fc .fc-toolbar-chunk .fc-today-button:focus,
.fc .fc-toolbar-chunk .fc-today-button:hover {
    color: var(--dx-white);
    background-color: var(--dx-primary);
    border-color: var(--dx-primary);
}
.fc-button-group {
    border-radius: 7px;
    padding: 4px;
    background-color: rgba(var(--dx-primary-rgb), 0.2);
    border-color: rgba(var(--dx-primary-rgb), 0.2);
}
.fc-button-group .fc-button-primary {
    text-transform: capitalize;
    color: var(--dx-secondary-color);
    background-color: transparent;
    border-color: transparent;
    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;
    border-radius: 7px;
    font-size: 0.87192rem;
    padding: 0.375rem 0.875rem;
}
@media (prefers-reduced-motion: reduce) {
    .fc-button-group .fc-button-primary {
        transition: none;
    }
}
.fc-button-group .fc-button-primary:hover {
    color: var(--dx-primary);
    background-color: transparent;
    border-color: transparent;
}
.fc-button-group
    .fc-button-primary:is(
        :not(:disabled).fc-button-active,
        :not(:disabled):active
    ) {
    color: var(--dx-white);
    background-color: var(--dx-primary);
    border-color: var(--dx-primary);
}
.fc-button-primary:is(
    :not(:disabled).fc-button-active:focus,
    :not(:disabled):active:focus,
    :focus
) {
    box-shadow: none !important;
}
.fc-license-message {
    display: none;
}
.fc-daygrid-event {
    font-size: var(--dx-body-font-size);
}
.see-more-btn {
    overflow: hidden;
    position: relative;
    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;
    background-color: var(--dx-secondary-bg);
    color: var(--dx-secondary-color);
    border-color: var(--dx-secondary-bg);
}
@media (prefers-reduced-motion: reduce) {
    .see-more-btn {
        transition: none;
    }
}
.see-more-btn .arrow-icon {
    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) {
    .see-more-btn .arrow-icon {
        transition: none;
    }
}
.see-more-btn:focus,
.see-more-btn:hover {
    border-color: var(--dx-primary) !important;
    background-color: var(--dx-primary) !important;
    color: #fff !important;
}
.see-more-btn:focus .arrow-icon,
.see-more-btn:hover .arrow-icon {
    transform: translateX(-5px);
}
.see-more-btn:focus:after,
.see-more-btn:hover:after {
    content: "";
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
        circle,
        hsla(0, 0%, 100%, 0.3) 0,
        hsla(0, 0%, 100%, 0) 70%
    );
    opacity: 0;
    animation: ripple 1.5s ease-out infinite;
}
@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    to {
        transform: scale(1);
        opacity: 0;
    }
}
.fc-h-event {
    border: none;
    border-top: 1px solid var(--dx-primary);
}
.fc-h-event .fc-event-main {
    color: currentColor;
}
.chat-profile-card .chat-sidebar-nav a {
    color: var(--dx-body-color);
    padding: 7px 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    transition: all 0.3s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
    .chat-profile-card .chat-sidebar-nav a {
        transition: none;
    }
}
.chat-profile-card .chat-sidebar-nav a.active,
.chat-profile-card .chat-sidebar-nav a:hover {
    color: var(--dx-primary);
}
.chat-profile-card .chat-profile-height {
    max-height: calc(100vh - 634px);
    margin-inline: calc(var(--dx-spacer) * -1);
    padding-inline: var(--dx-spacer);
}
.chat-profile-card
    .chat-profile-height
    .chat-sidebar-nav
    .chat-sidebar-nav-sub
    a {
    position: relative;
    padding-inline-start: 0.69rem;
}
.chat-profile-card
    .chat-profile-height
    .chat-sidebar-nav
    .chat-sidebar-nav-sub
    a:before {
    content: "";
    position: absolute;
    top: 0;
    z-index: 10;
    bottom: -14px;
    border-right: 1px solid var(--dx-border-color);
    right: -0.35rem;
}
.chat-profile-card
    .chat-profile-height
    .chat-sidebar-nav
    .chat-sidebar-nav-sub
    a:after {
    content: "";
    position: absolute;
    height: 6px;
    width: 10px;
    border-width: 0 1px 1px 0;
    border-style: solid;
    border-radius: 0 0 5.25rem 0;
    border-color: var(--dx-border-color);
    right: -0.35rem;
    top: 14px;
}
.chat-profile-card
    .chat-profile-height
    .chat-sidebar-nav
    .chat-sidebar-nav-sub
    li:last-child
    a:before {
    display: none;
}
#threadWidgetChat textarea,
.meassages textarea {
    resize: none;
}
.chat-message-widget .avatar img {
    outline: 1px solid var(--dx-border-color);
    outline-offset: 2px;
}
.chat-message-widget .chat-message-widget-body {
    padding-inline-start: calc(var(--dx-spacer) * 2);
}
.chat-message-widget.right .chat-message-widget-body {
    padding-inline: 0 calc(var(--dx-spacer) * 2);
}
.thread-chat-widget {
    max-height: calc(100vh - 434px);
    min-height: calc(100vh - 435px);
}
.meassages .chat-height {
    max-height: calc(100vh - 383px);
    min-height: calc(100vh - 435px);
}
.meassages .chat-toolbar {
    background-color: rgba(var(--dx-secondary-bg-rgb), 0.65);
    backdrop-filter: blur(16px);
    z-index: 50;
}
.invoice-wrapper {
    border-bottom-right-radius: 50rem;
}
.invoice-circle {
    position: absolute;
    top: -200px;
    right: -200px;
    width: 490px;
    height: 490px;
    background-color: rgba(var(--dx-secondary-bg-rgb), 0.6);
    border-radius: 50%;
    z-index: -1;
}
.accordion.to-do-accordion .accordion-button:after {
    top: 53%;
    left: -2px;
}
.cursor-move {
    cursor: move;
}
.to-do-checkbox .form-check-input:checked + .form-check-label {
    text-decoration: line-through;
    color: var(--dx-secondary-color);
}
.todo-item:has(.form-check-input:checked) {
    background-color: var(--dx-light);
    border-color: transparent !important;
}
.note-gradient {
    background: linear-gradient(
        to bottom,
        transparent 65%,
        var(--dx-secondary-bg) 95%
    );
}
.recent-note-card {
    border-top: 2px solid var(--dx-success) !important;
}
.work-note-card {
    border-top: 2px solid var(--dx-info) !important;
}
.execution-note-card {
    border-top: 2px solid var(--dx-orange) !important;
}
.kanban-column {
    min-width: 347px;
}
.card-gradient-border {
    border: 2px solid transparent !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
}
.card-gradient-border.border-primary {
    background-image:
        linear-gradient(var(--dx-card-bg), var(--dx-card-bg)),
        linear-gradient(to top, var(--dx-border-color), var(--dx-primary)) !important;
}
.card-gradient-border.border-yellow {
    background-image:
        linear-gradient(var(--dx-card-bg), var(--dx-card-bg)),
        linear-gradient(to top, var(--dx-border-color), var(--dx-yellow)) !important;
}
.card-gradient-border.border-pink {
    background-image:
        linear-gradient(var(--dx-card-bg), var(--dx-card-bg)),
        linear-gradient(to top, var(--dx-border-color), var(--dx-pink)) !important;
}
.card-gradient-border.border-danger {
    background-image:
        linear-gradient(var(--dx-card-bg), var(--dx-card-bg)),
        linear-gradient(to top, var(--dx-border-color), var(--dx-danger)) !important;
}
.insights-widget {
    border-right: 1px solid;
    border-bottom: 7px solid;
}
.wallet-overview-card {
    background-image: url(https://srbthemes.kcubeinfotech.com/alloce/images/crypto/wallet-bg.webp);
    background-position: 50%;
    background-size: cover;
    position: relative;
}
.wallet-overview-card:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(var(--dx-secondary-bg-rgb), 0.8),
        rgba(var(--dx-secondary-bg-rgb), 0.6)
    );
    z-index: 0;
}
.crypto-nav.nav-pills .nav-item .nav-link {
    background-color: var(--dx-primary-bg-subtle);
}
.crypto-nav.nav-pills .nav-item:is(.show, .active) .nav-link {
    background-color: var(--dx-primary);
    color: var(--dx-white) !important;
}
.progress-marketcap.progress-wrapper {
    position: relative;
    width: 100%;
    min-width: 180px;
    height: 13px;
    background: rgba(var(--dx-danger-rgb), 0.4);
    cursor: pointer;
}
.progress-marketcap:before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        -90deg,
        transparent,
        transparent 1px,
        #fff 6px,
        #fff 0
    );
    z-index: 2;
    pointer-events: none;
}
.progress-marketcap .progress-buy {
    height: 100%;
    background: rgba(var(--dx-success-rgb), 0.8);
    transition: all 0.3s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
    .progress-marketcap .progress-buy {
        transition: none;
    }
}
.nav-pills.nav-white {
    padding: 5px;
}
.nav-pills.nav-white .nav-link.active {
    background-color: var(--dx-secondary-bg);
    color: var(--dx-body-color);
    box-shadow: var(--dx-box-shadow-sm);
}
.nav-pills.nav-white .nav-link:hover {
    color: var(--dx-body-color);
}
.coins-select.vscomp-ele
    .vscomp-wrapper.has-clear-button
    .vscomp-toggle-button {
    padding-left: 30px !important;
    padding-block: 7px !important;
}
.coins-select .vscomp-clear-button.toggle-button-child {
    display: none !important;
}
.security-logs .nav-link {
    background-color: transparent !important;
    padding: 0;
}
.security-logs .nav-link .avatar {
    border: 1px solid var(--dx-border-color);
}
.security-logs .nav-link.active .avatar {
    background-color: var(--dx-primary);
    border-color: var(--dx-primary);
    color: var(--dx-white);
}
.role-icon {
    rotate: 45deg;
}
.role-icon svg {
    rotate: -45deg;
}
.email-logo-bg {
    position: relative;
    background-color: #052a40;
}
.email-logo-bg:before {
    right: 0;
    background: radial-gradient(
        circle at left bottom,
        transparent 18px,
        #052a40 20px
    );
}
.email-logo-bg:after,
.email-logo-bg:before {
    content: "";
    position: absolute;
    bottom: -1.1875rem;
    width: 20px;
    height: 20px;
}
.email-logo-bg:after {
    left: 0;
    background: radial-gradient(
        circle at right bottom,
        transparent 18px,
        #052a40 20px
    );
}
@media only screen and (max-width: 600px) {
    .p-responsive {
        padding: 30px !important;
    }
    .b-responsive {
        padding: 25px !important;
    }
}
.folder-sidebar-wrapper {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    width: 19rem;
    margin-bottom: 0;
    border-radius: 0;
    display: none;
}
.folder-sidebar-wrapper.show {
    display: flex;
}
@media (max-width: 1199.98px) {
    .folder-sidebar-wrapper {
        z-index: 1051;
    }
}
@media (min-width: 1200px) {
    .folder-sidebar-wrapper {
        position: sticky;
        top: 6rem;
        width: 100%;
        border-radius: 7px;
        display: flex;
    }
}
.background-overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(16, 24, 40, 0.4);
    backdrop-filter: blur(4px);
    z-index: 1050;
    display: none;
}
.background-overlay.show {
    display: block;
}
.progress-vertical {
    transform: rotate(91deg);
}
.rounded-xs {
    border-radius: 0.125rem;
}
.ecommerce-widget .avatar .blur-circle {
    filter: blur(4px);
    position: absolute;
    top: -8px;
    right: -10px;
    opacity: 0.3;
}
@media (min-width: 768px) {
    .girl-vector {
        position: absolute;
        left: 0;
        bottom: 0;
    }
    .upgrade-img {
        position: absolute;
        top: -2rem;
        left: 0.5rem;
    }
}
.progress {
    padding: 0;
}
.progress.custom-progress {
    position: relative;
    overflow: visible;
}
.progress.custom-progress:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 68%;
    border-radius: 50rem;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background-color: var(--dx-secondary);
    border: 3px solid var(--dx-secondary-bg);
}
.bg-server-gradient {
    background: linear-gradient(
        -135deg,
        rgba(var(--dx-primary-rgb), 0.2),
        rgba(var(--dx-orange-rgb), 0.12),
        rgba(var(--dx-pink-rgb), 0.15)
    );
}
.orbit-wrapper {
    position: relative;
    width: 270px;
    height: 270px;
    margin: auto;
}
.orbit-wrapper .orbit {
    position: absolute;
    top: 15px;
    width: 100%;
    height: 100%;
    border: 1px dashed rgba(var(--dx-secondary-rgb), 0.25);
    border-radius: 50%;
}
.orbit-wrapper .orbit-1 {
    animation: rotate 85s linear infinite;
}
.orbit-wrapper .orbit-2 {
    width: 180px;
    height: 180px;
    top: 60px;
    right: 46px;
    animation-duration: 15s;
    animation: rotate-reverse 85s linear infinite;
}
.orbit-wrapper .orbit .server {
    position: absolute;
    border-radius: 50%;
    background: var(--dx-secondary-bg);
    padding: 3px;
}
.orbit-wrapper .orbit.orbit-1 .server:first-child {
    top: -17px;
    right: 50%;
    transform: translateX(50%);
}
.orbit-wrapper .orbit.orbit-1 .server:nth-child(2) {
    left: -17px;
    top: 50%;
    transform: translateY(-50%);
}
.orbit-wrapper .orbit.orbit-1 .server:nth-child(3) {
    bottom: -17px;
    right: 50%;
    transform: translateX(50%);
}
.orbit-wrapper .orbit.orbit-1 .server:nth-child(4) {
    right: -17px;
    top: 50%;
    transform: translateY(-50%);
}
.orbit-wrapper .orbit.orbit-2 .server:first-child {
    top: 5px;
    right: 20%;
    transform: translateX(50%);
}
.orbit-wrapper .orbit.orbit-2 .server:nth-child(2) {
    left: 12px;
    top: 16%;
    transform: translateY(-50%);
}
.orbit-wrapper .orbit.orbit-2 .server:nth-child(3) {
    bottom: 5px;
    left: 0;
    transform: translateX(50%);
}
.orbit-wrapper .orbit.orbit-2 .server:nth-child(4) {
    right: 5px;
    bottom: 0;
    transform: translateY(-50%);
}
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-1turn);
    }
}
@keyframes rotate-reverse {
    0% {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(1turn);
    }
}
.nav.nav-pills.traffic-tab .nav-item {
    border: 1px solid var(--dx-border-color);
}
.nav.nav-pills.traffic-tab .nav-item:has(.nav-link.active) {
    border-color: var(--dx-primary);
}
.nav.nav-pills.traffic-tab .nav-item .nav-link {
    color: var(--dx-body-color);
}
.nav.nav-pills.traffic-tab .nav-item .nav-link.active,
.nav.nav-pills.traffic-tab .nav-item .nav-link:hover {
    background-color: var(--dx-secondary-bg);
    color: var(--dx-body-color);
}
#lowStockChart .apexcharts-legend.apx-legend-position-right {
    top: 7px !important;
    gap: 6px;
}
.welcome-title {
    background: linear-gradient(
        -90deg,
        var(--dx-body-color) 0,
        var(--dx-body-color) 40%,
        var(--dx-danger) 55%,
        var(--dx-body-color) 70%,
        var(--dx-body-color) 100%
    );
    background-size: 150% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textShine 4s linear infinite;
}
@keyframes textShine {
    0% {
        background-position: -50%;
    }
    to {
        background-position: 250%;
    }
}
.crm-bg-pattern {
    background-image: url(https://srbthemes.kcubeinfotech.com/alloce/images/dashboards/dashboard-patterm.webp);
}
:is([data-bs-theme="dark"], [data-bs-theme="black"]) .crm-bg-pattern {
    background-image: none;
}
.crm-revenue {
    position: relative;
    height: 270px;
}
.crm-revenue .revenue-border {
    position: absolute;
    bottom: 17px;
    right: 4px;
    width: 100%;
    border-right: 1px dashed var(--dx-border-color);
}
.crm-revenue .revenue-border .revenue-dot {
    position: absolute;
    top: 0;
    right: -3.1px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--dx-primary);
}
.crm-revenue .revenue-border .revenue-badge {
    position: absolute;
    top: -28px;
    right: -7px;
}
.bg-gradient-s-primary {
    background-image: linear-gradient(
        to left,
        rgba(var(--dx-primary-rgb), 0.15),
        rgba(var(--dx-primary-rgb), 0)
    );
}
.bg-gradient-s-secondary {
    background-image: linear-gradient(
        to left,
        rgba(var(--dx-secondary-rgb), 0.15),
        rgba(var(--dx-secondary-rgb), 0)
    );
}
.bg-gradient-s-success {
    background-image: linear-gradient(
        to left,
        rgba(var(--dx-success-rgb), 0.15),
        rgba(var(--dx-success-rgb), 0)
    );
}
.bg-gradient-s-info {
    background-image: linear-gradient(
        to left,
        rgba(var(--dx-info-rgb), 0.15),
        rgba(var(--dx-info-rgb), 0)
    );
}
.bg-gradient-s-warning {
    background-image: linear-gradient(
        to left,
        rgba(var(--dx-warning-rgb), 0.15),
        rgba(var(--dx-warning-rgb), 0)
    );
}
.bg-gradient-s-danger {
    background-image: linear-gradient(
        to left,
        rgba(var(--dx-danger-rgb), 0.15),
        rgba(var(--dx-danger-rgb), 0)
    );
}
.bg-gradient-s-light {
    background-image: linear-gradient(
        to left,
        rgba(var(--dx-light-rgb), 0.15),
        rgba(var(--dx-light-rgb), 0)
    );
}
.bg-gradient-s-dark {
    background-image: linear-gradient(
        to left,
        rgba(var(--dx-dark-rgb), 0.15),
        rgba(var(--dx-dark-rgb), 0)
    );
}
.bg-gradient-s-pink {
    background-image: linear-gradient(
        to left,
        rgba(var(--dx-pink-rgb), 0.15),
        rgba(var(--dx-pink-rgb), 0)
    );
}
.bg-gradient-s-orange {
    background-image: linear-gradient(
        to left,
        rgba(var(--dx-orange-rgb), 0.15),
        rgba(var(--dx-orange-rgb), 0)
    );
}
.bg-gradient-s-indigo {
    background-image: linear-gradient(
        to left,
        rgba(var(--dx-indigo-rgb), 0.15),
        rgba(var(--dx-indigo-rgb), 0)
    );
}
.size-4-5 {
    width: 1.125rem;
    height: 1.125rem;
}
.fs-28 {
    font-size: 1.75rem;
}
@media (min-width: 768px) {
    .overview-vector {
        position: absolute;
        left: 0;
        bottom: 0;
    }
}
.annual-leave {
    border-top-right-radius: var(--dx-border-radius);
}
.sick-leave {
    border-top-left-radius: var(--dx-border-radius);
}
.main-task-list .form-check {
    padding-right: 0;
    padding-left: 1.88em;
}
.main-task-list .form-check .form-check-input {
    float: left;
    margin-left: -1.88em;
}
#schedule-calendar .air-datepicker.-inline- {
    --adp-width: 262px;
    border: 0;
    box-shadow: none !important;
}
#schedule-calendar .air-datepicker-nav {
    border-bottom: 0;
    padding: 0;
    margin-bottom: 18px;
}
#schedule-calendar .air-datepicker-nav .air-datepicker-nav--action {
    background-color: var(--dx-primary-bg-subtle);
    border-radius: 50%;
}
#schedule-calendar .air-datepicker-nav .air-datepicker-nav--action svg path {
    stroke: var(--dx-primary);
    stroke-width: 1.5px;
}
#schedule-calendar .air-datepicker-nav .air-datepicker-nav--title {
    font-size: 17px;
    font-weight: 600;
    color: var(--dx-body-color);
}
#schedule-calendar .air-datepicker-nav .air-datepicker-nav--title i {
    color: var(--dx-body-color);
}
#schedule-calendar .air-datepicker--content {
    padding: 0;
}
#schedule-calendar .air-datepicker--content .air-datepicker-body--day-names {
    background-color: transparent;
    padding: 0;
    margin-bottom: 12px;
}
#schedule-calendar
    .air-datepicker--content
    .air-datepicker-body--day-names
    .air-datepicker-body--day-name {
    font-size: 14px;
    font-weight: 500;
    text-transform: capitalize;
}
#schedule-calendar .air-datepicker--content .air-datepicker-body--cells {
    -moz-column-gap: 6.3px;
    column-gap: 6.3px;
    row-gap: 12px;
}
#schedule-calendar
    .air-datepicker--content
    .air-datepicker-body--cells
    .air-datepicker-cell {
    line-height: 1;
    border-radius: 50%;
}
#schedule-calendar
    .air-datepicker--content
    .air-datepicker-body--cells
    .air-datepicker-cell.-day- {
    color: var(--dx-body-color);
}
#schedule-calendar
    .air-datepicker--content
    .air-datepicker-body--cells
    .air-datepicker-cell.-day-.-other-month- {
    color: var(--dx-tertiary-color);
}
#schedule-calendar
    .air-datepicker--content
    .air-datepicker-body--cells
    .air-datepicker-cell.-current-,
#schedule-calendar
    .air-datepicker--content
    .air-datepicker-body--cells
    .air-datepicker-cell.-selected- {
    color: #fff;
    background-color: var(--dx-primary);
}
.schedule-list:before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 75px;
    background: linear-gradient(to bottom, transparent, var(--dx-secondary-bg));
    z-index: 1;
}
.schedule-list .schedule-item {
    background-color: rgba(var(--dx-primary-rgb), 0.06);
}
#discussionSwiper {
    width: 100%;
    max-width: 380px;
    height: 190px;
    margin: 0 auto;
}
#discussionSwiper .bg-light-primary {
    background-color: color-mix(in srgb, var(--dx-primary) 30%, #fff 100%);
}
#discussionSwiper .bg-light-success {
    background-color: color-mix(in srgb, var(--dx-success) 30%, #fff 100%);
}
#discussionSwiper .bg-light-secondary {
    background-color: color-mix(in srgb, var(--dx-secondary) 30%, #fff 100%);
}
#discussionSwiper .bg-light-danger {
    background-color: color-mix(in srgb, var(--dx-danger) 30%, #fff 100%);
}
.project-widget .project-frame {
    position: absolute;
    left: -26px;
    bottom: -18px;
    width: 110px;
    opacity: 0.55;
}
.project-widget.bg-primary-gradient {
    background: linear-gradient(
        -160deg,
        var(--dx-secondary-bg) 30%,
        rgba(var(--dx-primary-rgb), 0.3) 100%
    );
}
.project-widget.bg-orange-gradient {
    background: linear-gradient(
        -160deg,
        var(--dx-secondary-bg) 30%,
        rgba(var(--dx-orange-rgb), 0.3) 100%
    );
}
.project-widget.bg-secondary-gradient {
    background: linear-gradient(
        -160deg,
        var(--dx-secondary-bg) 30%,
        rgba(var(--dx-secondary-rgb), 0.3) 100%
    );
}
.project-widget.bg-success-gradient {
    background: linear-gradient(
        -160deg,
        var(--dx-secondary-bg) 30%,
        rgba(var(--dx-success-rgb), 0.3) 100%
    );
}
.project-widget.bg-info-gradient {
    background: linear-gradient(
        -160deg,
        var(--dx-secondary-bg) 30%,
        rgba(var(--dx-info-rgb), 0.3) 100%
    );
}
[data-bs-theme="dark"] .project-frame {
    opacity: 0.15;
}
.productivity-vector {
    bottom: -25px;
    left: -38px;
}
.crypto-card {
    background: radial-gradient(
        circle at top,
        color-mix(in srgb, var(--dx-primary) 75%, #000 15%) 40%,
        color-mix(in srgb, var(--dx-primary) 90%, #000 90%) 80%
    );
}
.crypto-card .gradient-line {
    bottom: 180px;
    left: 30px;
    width: 80px;
    height: 2px;
    background: linear-gradient(
        -90deg,
        rgba(var(--dx-white-rgb), 0.5),
        transparent
    );
    transform: rotate(40deg);
}
.crypto-card .white-gradient-btn {
    background: radial-gradient(
        circle at top,
        rgba(var(--dx-white-rgb), 0.1) 36%,
        rgba(var(--dx-white-rgb), 0.35) 98%
    );
    border-color: rgba(var(--dx-white-rgb), 0.1) !important;
}
.hrm-widget-card .hrm-widget-curve {
    width: 3.375rem;
    height: 3.375rem;
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    border: 7px solid var(--dx-body-bg);
    background-color: var(--dx-body-bg);
}
.hrm-widget-card .hrm-widget-curve .avatar {
    border-radius: 14px;
}
.hrm-widget-card .hrm-widget-curve:before {
    top: 3rem;
    right: 0.0625rem;
}
.hrm-widget-card .hrm-widget-curve:after,
.hrm-widget-card .hrm-widget-curve:before {
    content: "";
    height: 0.75rem;
    width: 0.75rem;
    background-color: var(--dx-secondary-bg);
    border-top-right-radius: 10px;
    box-shadow: 0.1812rem -0.1925rem 0 0.1825rem var(--dx-body-bg);
    position: absolute;
}
.hrm-widget-card .hrm-widget-curve:after {
    top: 0.0625rem;
    right: 3rem;
}
.hrm-widget-card .square-1 {
    left: 32px;
    opacity: 0.15;
}
.hrm-widget-card .square-2 {
    left: 0;
    top: 32px;
}
.employee-prf-card {
    position: relative;
    height: 270px;
}
.employee-prf-card .performer-line {
    border-radius: 4px;
}
.employee-prf-card:before {
    content: "";
    position: absolute;
    top: 0;
    right: -1px;
    width: 100%;
    height: 91%;
    border-right: 1px dashed rgba(var(--dx-body-color-rgb), 0.3);
}
.event-date-box .event-box-stand {
    top: -4px;
}
.event-date-box .event-box-stand .event-stand {
    height: 10px;
    width: 3px;
}
.attachment-card {
    background-image: url(https://srbthemes.kcubeinfotech.com/alloce/images/dashboards/personal/ribbon-bg.webp);
    background-position: 100% -150px;
    background-size: cover;
    background-repeat: no-repeat;
}
.attachment-card .ribbon-img {
    width: 210px;
}
.schedule-dates
    .simplebar-track.simplebar-horizontal
    .simplebar-scrollbar:before {
    height: 3px;
}
.schedule-dates a {
    color: var(--dx-body-color);
    border-radius: 50rem;
    transition: all 0.3s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
    .schedule-dates a {
        transition: none;
    }
}
.schedule-dates a:hover {
    background-color: var(--dx-primary-bg-subtle);
    color: var(--dx-primary);
}
.schedule-dates a.active {
    background-color: var(--dx-primary);
    color: var(--dx-white);
}
.border-opacity-50 {
    border-color: rgba(var(--dx-white-rgb), 0.5) !important;
}
.text-opacity-60 {
    color: rgba(var(--dx-white-rgb), 0.6);
}
.w-3px {
    width: 3px;
}
.table.table-md > :not(caption) > * > * {
    padding: 9px 12px;
    font-size: 14px;
}
#customerSatisfaction .apexcharts-radialbar-hollow {
    transform: translateY(-70px);
}
.activity-timeline {
    position: relative;
}
.activity-timeline .activity-item {
    display: flex;
    align-items: flex-start;
    margin-block-end: 16px;
    position: relative;
}
.activity-timeline .activity-item:last-child {
    margin-block-end: 0;
}
.activity-timeline .activity-item .activity-content {
    position: relative;
}
.activity-timeline .activity-item .activity-content:before {
    content: "";
    position: absolute;
    top: 12px;
    right: 0;
    width: 12px;
    height: 12px;
    background: var(--dx-secondary-bg);
    border: 2px solid var(--dx-border-color);
    border-radius: 50%;
    z-index: 2;
}
.activity-timeline .activity-item .activity-card {
    background: var(--dx-secondary-bg);
    border: 1px dashed var(--dx-border-color);
    border-radius: var(--dx-border-radius);
    padding: 10px 12px;
    transition: all 0.3s ease-in-out;
    position: relative;
    margin-right: 26px;
}
@media (prefers-reduced-motion: reduce) {
    .activity-timeline .activity-item .activity-card {
        transition: none;
    }
}
.activity-timeline .activity-item .activity-card:hover {
    border-color: var(--dx-primary-border-subtle);
    box-shadow: var(--dx-box-shadow);
}
.activity-timeline .timeline-connector {
    position: absolute;
    top: 14px;
    bottom: 63px;
    right: 5px;
    width: 2px;
    z-index: 1;
}
.activity-timeline .timeline-connector .connector-line {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 50%;
    width: 2px;
    background: var(--dx-border-color);
    transform: translateX(50%);
}
.activity-timeline .timeline-connector .connector-dot {
    position: absolute;
    right: 50%;
    width: 8px;
    height: 8px;
    background: var(--dx-border-color);
    border-radius: 50%;
    transform: translateX(50%);
}
.activity-timeline .timeline-connector .connector-dot:first-child {
    top: 0;
}
.activity-timeline .timeline-connector .connector-dot:last-child {
    bottom: 0;
}
.sales-alert {
    background-image: url(https://srbthemes.kcubeinfotech.com/alloce/images/dashboards/sales/alert-bg.webp);
    background-position: 50%;
    background-size: cover;
    position: relative;
}
.size-30px {
    width: 30px;
    height: 30px;
}
.main-flow-chart {
    width: 131px;
    height: 131px;
}
.main-flow-chart .device-chart-circle {
    border: 26px solid color-mix(in srgb, var(--dx-light) 75%, #000 3%);
    width: 100%;
    height: 100%;
}
.social-account-bg {
    height: 112px;
}
.profile-avatar .profile-avatar-wrapper {
    position: relative;
    padding: 0.25rem;
    border-radius: 50rem;
    background: linear-gradient(
        to top left,
        rgba(var(--dx-primary-rgb), 0.5),
        rgba(var(--dx-pink-rgb), 0.5),
        rgba(var(--dx-warning-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;
    left: 0.625rem;
    bottom: 0.625rem;
}
.fs-9 {
    font-size: 9px;
}
#ticketsByChannel .apexcharts-pie circle {
    display: none;
}
.helpdesk-overview {
    background-image: url(https://srbthemes.kcubeinfotech.com/alloce/images/dashboards/helpdesk/3.webp);
    background-position: 100% 34%;
    background-size: cover;
    position: relative;
}
.helpdesk-overview .card {
    border-radius: 10px;
    background-color: rgba(var(--dx-white-rgb), 0.2);
    backdrop-filter: blur(6px);
}
.bg-opacity-40 {
    opacity: 0.4;
}
.min-h-69px {
    min-height: 69px;
}
.saas-pattern {
    top: -91px;
    left: -56px;
    rotate: -170deg;
}
.upgrade-card {
    border-radius: 10px;
    background: linear-gradient(
        -135deg,
        rgba(var(--dx-indigo-rgb), 0.45),
        rgba(var(--dx-info-rgb), 0.2),
        rgba(var(--dx-secondary-rgb), 0.45)
    );
}
.upgrade-card .upgrade-vector {
    left: -30px;
    top: 50px;
    opacity: 0.2;
    rotate: 25deg;
}
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transition: all 0.3s 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-primary);
    background-color: var(--dx-primary-bg-subtle);
    border: 1px solid var(--dx-primary-border-subtle);
    height: 41px;
    width: 41px;
    border-radius: 50rem;
}
.navbar .navbar-toggler:focus {
    outline: none;
    box-shadow: none;
}
.navbar .navbar-toggler .ri-close-line,
.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;
        left: 0;
        right: 0;
        position: absolute;
        background-color: var(--dx-secondary-bg);
        box-shadow: var(--dx-box-shadow);
    }
}
.navbar.scroll-sticky {
    backdrop-filter: blur(20px);
}
.navbar-ecommerce,
.navbar.scroll-sticky {
    box-shadow: var(--dx-box-shadow-sm);
    background-color: var(--dx-secondary-bg);
}
.navbar-ecommerce {
    max-width: 1536px;
    border-bottom-right-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
}
.navbar-ecommerce.scroll-sticky {
    max-width: 100%;
    width: 100%;
    border-radius: 0;
}
.navbar-crypto .navbar-toggler {
    color: var(--dx-white);
    background-color: var(--dx-dark);
    border-color: var(--dx-dark);
    height: 38px;
    width: 38px;
}
.navbar-crypto .navbar-nav .nav-item .nav-link {
    padding: 0.5rem 1.25rem;
}
.navbar-crypto .navbar-nav .nav-item .nav-link:is(:hover, .active) {
    color: var(--dx-success);
}
[data-bs-theme="dark"] .navbar-crypto.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-business {
    top: 15px;
}
.navbar-business .navbar-toggler {
    color: var(--dx-white);
    background-color: var(--dx-primary);
}
.navbar-business .navbar-nav .nav-item .nav-link:is(:hover, .active) {
    color: var(--dx-primary);
}
.navbar-business .navbar-collapse {
    border-radius: 1rem;
}
.navbar-business .container {
    background-color: rgba(var(--dx-secondary-bg-rgb), 0.5);
}
.navbar-business.scroll-sticky {
    top: 5px;
    background-color: transparent;
    box-shadow: none;
}
.navbar-business.scroll-sticky .container {
    background-color: rgba(var(--dx-primary-rgb), 0.1);
    transition: all 0.3s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
    .navbar-business.scroll-sticky .container {
        transition: none;
    }
}
@media (min-width: 1200px) {
    .navbar-business.scroll-sticky .container {
        max-width: 1240px;
    }
}
@media (min-width: 1536px) {
    .navbar-business.scroll-sticky .container {
        max-width: 1650px;
    }
}
.navbar-saas .logos .logo-light {
    display: block;
}
.navbar-saas .logos .logo-dark {
    display: none;
}
.navbar-saas .navbar-nav .nav-item .nav-link {
    color: rgba(var(--dx-white-rgb), 0.9);
}
.navbar-saas .navbar-nav .nav-item .nav-link:is(:hover, .active) {
    color: var(--dx-orange);
}
.navbar-saas .navbar-collapse {
    padding-block: 0.8rem;
}
.navbar-saas .navbar-collapse.collapse.show .nav-item .nav-link {
    color: var(--dx-body-color);
}
.navbar-saas
    .navbar-collapse.collapse.show
    .nav-item
    .nav-link:is(:hover, .active) {
    color: var(--dx-orange);
}
.navbar-saas.scroll-sticky {
    background-color: color-mix(in srgb, var(--dx-dark) 70%, #000 30%);
}
.navbar-saas .navbar-toggler {
    color: var(--dx-white);
    background-color: var(--dx-orange);
    border-color: var(--dx-orange);
}
.navbar-hrm {
    top: 58px;
    background-color: color-mix(in srgb, var(--dx-light) 95%, #000 2%);
    border-radius: 8px;
}
.navbar-hrm .navbar-toggler {
    color: var(--dx-white);
    background-color: var(--dx-dark);
    border-color: var(--dx-dark);
}
.navbar-hrm.scroll-sticky {
    top: -3px;
    border-radius: 0 0 10px 10px;
    background-color: var(--dx-dark);
    backdrop-filter: none;
}
.navbar-hrm.scroll-sticky .logo-dark {
    display: none;
}
.navbar-hrm.scroll-sticky .logo-light {
    display: block;
}
.navbar-hrm.scroll-sticky .navbar-nav .nav-item .nav-link {
    font-weight: 400;
}
@media (min-width: 992px) {
    .navbar-hrm.scroll-sticky .navbar-nav .nav-item .nav-link {
        color: var(--dx-white);
    }
}
.navbar-hrm.scroll-sticky .navbar-nav .nav-item .nav-link.active {
    color: var(--dx-indigo);
}
.font-playfair {
    font-family: Playfair, serif;
}
.text-animation {
    letter-spacing: -3.5px;
}
@media (min-width: 992px) {
    .text-animation {
        letter-spacing: -5.5px;
    }
}
.text-animation span {
    font-weight: 700;
    display: inline-block;
    animation: rotateLetter 3.5s ease-in-out infinite;
}
@keyframes rotateLetter {
    0%,
    70%,
    to {
        transform: rotateY(0deg);
    }
    80% {
        transform: rotateY(-90deg);
    }
    90% {
        transform: rotateY(0deg);
    }
}
.bg-light-title {
    position: absolute;
    top: 50%;
    right: -90px;
    transform: translateY(-50%);
    font-weight: 900;
}
.business-btn-link i {
    background-color: var(--dx-primary);
    height: 30px;
    width: 30px;
    display: inline-flex !important;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-left: 0.5rem;
    border-radius: 50rem;
    transition: all 0.3s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
    .business-btn-link i {
        transition: none;
    }
}
.business-btn-link i:before {
    transition: all 0.3s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
    .business-btn-link i:before {
        transition: none;
    }
}
.business-btn-link i:after {
    content: "";
    border: 1px solid var(--dx-primary);
    border-radius: 50rem;
    position: absolute;
    top: 0;
    right: -10px;
    transition: all 0.3s ease-in-out;
    height: 30px;
    width: 30px;
    z-index: -1;
}
@media (prefers-reduced-motion: reduce) {
    .business-btn-link i:after {
        transition: none;
    }
}
.marquee-ten {
    display: flex;
    width: -moz-fit-content;
    width: fit-content;
}
@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }
    to {
        transform: translateX(50%);
    }
}
@keyframes scroll-right {
    0% {
        transform: translateX(50%);
    }
    to {
        transform: translateX(0);
    }
}
.business-blur-effect {
    filter: blur(240px);
}
.business-hero-section {
    padding: 170px 0 0;
}
.business-hero-section:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 45rem;
    background-image:
        linear-gradient(var(--dx-light) 1px, transparent 1px),
        linear-gradient(-90deg, var(--dx-light) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}
.business-hero-section .hero-swiper .swiper-wrapper {
    transition-timing-function: linear;
}
.business-hero-section .hero-swiper:before {
    top: -60px;
}
.business-hero-section .hero-swiper:after,
.business-hero-section .hero-swiper:before {
    content: "";
    position: absolute;
    right: -10%;
    width: 120%;
    height: 100px;
    background: var(--dx-secondary-bg);
    border-radius: 100%;
    z-index: 1000;
}
.business-hero-section .hero-swiper:after {
    bottom: -52px;
}
.features-section .features-card .feature-img {
    transition: all 0.3s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
    .features-section .features-card .feature-img {
        transition: none;
    }
}
.features-section .features-card:hover .feature-img {
    transform: scaleX(-1);
}
.features-section .features-card:hover .business-btn-link i {
    margin-left: 0.75rem;
}
.features-section .features-card:hover .business-btn-link i:before {
    transform: rotate(-45deg);
}
.features-section .features-card:hover .business-btn-link i:after {
    right: -5px;
}
.process-section .process-elements2 {
    transform: translateX(50%) rotate(-30deg);
}
.process-section .third-process-img .avatar span:first-child {
    transform: rotate(5deg);
}
.process-section .third-process-img .avatar span:nth-child(2) {
    transform: rotate(-5deg);
}
.process-section .third-process-img .avatar span:nth-child(3) {
    transform: rotate(4deg);
}
.stats-section .stats-wrapper {
    background-image: linear-gradient(
        -180deg,
        rgba(var(--dx-secondary-bg-rgb), 0) 0,
        rgba(var(--dx-secondary-bg-rgb), 0.75),
        var(--dx-secondary-bg)
    );
}
.stats-section .marquee-ten.marquee-rtl {
    animation: scroll-left 150s linear infinite;
}
.stats-section .marquee-ten span {
    font-size: 250px;
    line-height: 0.8;
    color: transparent;
    background: linear-gradient(
        -120deg,
        rgba(var(--dx-secondary-rgb), 0.4) 0,
        rgba(var(--dx-orange-rgb), 0.4) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
}
@media (min-width: 992px) {
    .stats-section .marquee-ten span {
        font-size: 300px;
    }
}
.impact-section .impact-Sales-card {
    background-image: url(https://srbthemes.kcubeinfotech.com/alloce/images/landing/business/lead-team.webp);
    background-position: 50%;
    background-size: cover;
}
.impact-section .reviewSwiper-pagination .swiper-pagination-bullet {
    width: 0.5625rem;
    height: 0.5625rem;
    background: var(--dx-danger);
    transition: all 0.3s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
    .impact-section .reviewSwiper-pagination .swiper-pagination-bullet {
        transition: none;
    }
}
.impact-section .reviewSwiper-pagination .swiper-pagination-bullet-active {
    width: 40px;
    border-radius: 50rem;
}
.impact-section .marquee-rtl {
    animation: scroll-left 15s linear infinite;
}
.impact-section .marquee-ltr {
    animation: scroll-right 15s linear infinite;
}
.pricing-section .plan-starter-card {
    border-top-right-radius: 1rem;
}
.pricing-section .plan-enterprise-card {
    border-top-left-radius: 1rem;
}
.pricing-section .feature-starter-card {
    border-bottom-right-radius: 1rem;
}
.pricing-section .feature-enterprise-card {
    border-bottom-left-radius: 1rem;
}
.pricing-section .pricing-scroll-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.pricing-section .pricing-scroll-wrapper .pricing-table {
    min-width: 1430px;
}
.faq-section .accordion .accordion-button:after {
    left: 1.25rem;
}
.cta-section .cta-img {
    position: relative;
}
.cta-section .cta-img:before {
    content: "";
    position: absolute;
    bottom: -34%;
    right: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(
        -180deg,
        rgba(var(--dx-secondary-bg-rgb), 0) 0,
        var(--dx-secondary-bg) 50%
    );
    z-index: 1;
}
.cta-section .cta-img img {
    filter: grayscale(1);
    width: 70rem;
}
.main-title span {
    transform: translate(50%, -50%) rotate(25deg);
    background-color: color-mix(in srgb, var(--dx-secondary) 84%, #000 16%);
}
.max-w-650px {
    max-width: 650px;
}
.saas-body-bg {
    background-color: rgba(var(--dx-orange-rgb), 0.06);
}
.saas-hero-section {
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--dx-dark) 75%, #000 62%) 10%,
        color-mix(in srgb, var(--dx-dark) 75%, #000 58%) 20%,
        color-mix(in srgb, rgba(var(--dx-orange-rgb), 0.7) 75%, #000 10%) 70%,
        rgba(var(--dx-orange-rgb), 0.1) 90%,
        rgba(var(--dx-orange-rgb), 0)
    );
}
.saas-hero-section .badge-1 {
    position: absolute;
    top: 35%;
    right: 12%;
}
.saas-hero-section .badge-2 {
    position: absolute;
    top: 14%;
    left: 13%;
}
.saas-hero-section .badge-2 svg {
    transform: scale(-1);
}
.saas-outline-light:hover {
    color: var(--dx-orange) !important;
}
.saas-brand-section .marquee-ten.marquee-rtl {
    animation: scroll-left 30s linear infinite;
}
[data-bs-theme="dark"] .saas-brand-section .marquee-ten.marquee-rtl img {
    filter: brightness(0) invert(1);
}
.saas-brand-section .fire-heart {
    animation: bounce 5s infinite;
}
@keyframes bounce {
    0%,
    to {
        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);
    }
}
.saas-work-section h3 {
    background: linear-gradient(
        to bottom,
        var(--dx-orange),
        rgba(var(--dx-orange-rgb), 0)
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-mask-image: linear-gradient(180deg, #000 0, transparent 90%);
    mask-image: linear-gradient(180deg, #000 0, transparent 90%);
    mask-mode: alpha;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
.saas-features-section .nav .nav-item .nav-link {
    background-color: var(--dx-orange-bg-subtle);
    color: var(--dx-body-color);
}
.saas-features-section .nav .nav-item .nav-link.active {
    color: var(--dx-white);
    background-color: var(--dx-orange);
}
.saas-features-section .coming-soon-badge {
    transform: rotate(-30deg);
}
.saas-features-section .automation-card .automation-card-3 {
    position: absolute;
    left: -25%;
    bottom: -25%;
}
.saas-features-section .automation-card .automation-arrow {
    position: absolute;
    top: 38%;
    right: 46%;
    animation: bounce 10s infinite;
}
.saas-features-section .dashboard-img-2 {
    position: absolute;
    top: 10%;
    left: -7%;
}
.saas-use-case-section .main-use-case-content .progress-wrapper {
    max-width: 340px;
    aspect-ratio: 1/1;
}
.saas-use-case-section
    .main-use-case-content
    .progress-wrapper
    .progress-bg-circle {
    fill: none;
    stroke: rgba(var(--dx-orange-rgb), 0.3);
    stroke-width: 3;
}
.saas-use-case-section .main-use-case-content .progress-wrapper .progress-bar {
    stroke-linecap: round;
    transition: stroke-dashoffset 0.5s ease;
}
.saas-use-case-section
    .main-use-case-content
    .progress-wrapper
    .progress-complete {
    transform: rotate(90deg);
}
.saas-testimonial-section .testimonial-card {
    transition: all 0.3s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
    .saas-testimonial-section .testimonial-card {
        transition: none;
    }
}
.saas-testimonial-section .testimonial-card .testimonial-image {
    opacity: 0;
    transition: all 0.3s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
    .saas-testimonial-section .testimonial-card .testimonial-image {
        transition: none;
    }
}
.saas-testimonial-section .testimonial-card .testimonial-content {
    transition: all 0.3s ease-in-out;
    background-color: var(--dx-orange-bg-subtle);
}
@media (prefers-reduced-motion: reduce) {
    .saas-testimonial-section .testimonial-card .testimonial-content {
        transition: none;
    }
}
.saas-testimonial-section .testimonial-card .quote-size {
    font-size: 8.5rem;
    color: rgba(var(--dx-orange-rgb), 0.06);
}
.saas-testimonial-section .testimonial-card:hover .testimonial-content {
    transform: translateY(75px) rotate(10deg);
    background-color: var(--dx-orange);
    color: var(--dx-white);
}
.saas-testimonial-section .testimonial-card:hover .testimonial-image {
    opacity: 100%;
    transform: translateY(-100px) rotate(0deg);
}
.saas-testimonial-section .testimonial-card:hover .quote-size {
    color: rgba(var(--dx-white-rgb), 0.1);
}
.saas-footer-section {
    background-color: color-mix(in srgb, var(--dx-dark) 50%, #000 50%);
}
.saas-footer-section .saas-v1-footer-logo {
    font-size: 18rem;
    line-height: 0.8;
}
.saas-footer-section .newsletter-section input::-moz-placeholder {
    color: rgba(var(--dx-white-rgb), 0.4);
}
.saas-footer-section .newsletter-section input::placeholder {
    color: rgba(var(--dx-white-rgb), 0.4);
}
.saas-footer-section .border-gradient {
    border-image-slice: 1;
    border-image-source: linear-gradient(
        hsla(0, 0%, 100%, 0.251),
        hsla(0, 0%, 100%, 0.251),
        hsla(0, 0%, 100%, 0)
    );
}
.saas-footer-section .footer-logo-text {
    background: linear-gradient(
        to bottom,
        rgba(var(--dx-orange-rgb), 0.7),
        rgba(var(--dx-orange-rgb), 0.1)
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 0.8;
    font-size: 6.3rem;
}
@media (min-width: 992px) {
    .saas-footer-section .footer-logo-text {
        font-size: 12rem;
    }
}
@media (min-width: 1200px) {
    .saas-footer-section .footer-logo-text {
        font-size: 240px;
    }
}
@media (min-width: 1536px) {
    .saas-footer-section .footer-logo-text {
        font-size: 18rem;
    }
}
.animation-rotate {
    animation: rotate 8s linear infinite;
}
.crypto-page {
    --dx-font-family-base: Rubik, sans-serif;
    --dx-font-family-heading: Rubik, sans-serif;
}
.crypto-bg-success {
    background-color: rgba(var(--dx-success-rgb), 0.08);
}
.crypto-hero {
    background-image: url(https://srbthemes.kcubeinfotech.com/alloce/images/landing/crypto/crypto-bg.webp);
    background-size: cover;
    position: relative;
    padding: 170px 0;
}
@media (min-width: 992px) {
    .crypto-hero {
        padding: 260px 0 200px;
    }
}
@media (min-width: 1200px) {
    .crypto-hero {
        padding: 260px 0 200px;
    }
}
@media (min-width: 1536px) {
    .crypto-hero {
        padding: 310px 0 260px;
    }
}
.crypto-hero .sub-title {
    line-height: 2;
}
.crypto-hero .crypto-icon-1 {
    top: 0;
    right: 10%;
}
.crypto-hero .crypto-icon-2 {
    bottom: -200px;
    right: 20%;
}
.crypto-hero .crypto-icon-3 {
    top: -115px;
    left: -14%;
}
.crypto-hero .crypto-icon-4 {
    bottom: 130px;
    left: 23%;
}
.crypto-hero .crypto-icon-5 {
    bottom: 0;
    left: -30%;
}
.crypto-contribution .progress-wrap .list-wrap li {
    position: relative;
}
.crypto-contribution .progress-wrap .list-wrap li:before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 50%;
    transform: translate(50%);
    width: 2px;
    height: 15px;
    background-color: rgba(var(--dx-body-color-rgb), 0.4);
}
.crypto-contribution .progress-wrap .crypto-progress-gradient {
    background-image: linear-gradient(
        to left,
        rgba(var(--dx-success-rgb), 0),
        var(--dx-success)
    );
}
@keyframes bounceX {
    0%,
    to {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-40px);
    }
}
.bounce-x {
    animation: bounceX 10s infinite;
}
.flip-horizontal {
    transform: scaleX(-1);
}
.crypto-top-partner .-rotate-4 {
    transform: rotate(3deg);
}
.crypto-top-partner .marquee-ten.marquee-rtl {
    animation: scroll-left 30s linear infinite;
}
[data-bs-theme="dark"] .crypto-top-partner .marquee-ten.marquee-rtl img {
    filter: invert(1);
}
.crypto-why-choose .line {
    width: 140px;
}
@media (min-width: 1536px) {
    .crypto-why-choose .line {
        width: 192px;
    }
}
.crypto-why-choose .line.line-1 {
    position: absolute;
    top: 12%;
    right: -10%;
    transform: scaleX(-1);
}
.crypto-why-choose .line.line-2 {
    position: absolute;
    top: 12%;
    left: -10%;
}
.crypto-why-choose .line.line-3 {
    position: absolute;
    left: -10%;
    bottom: 12%;
    transform: scaleY(-1);
}
.crypto-why-choose .line.line-4 {
    position: absolute;
    bottom: 12%;
    right: -10%;
    transform: scale(-1);
}
.crypto-why-choose .bitcoin-img {
    padding: 80px;
}
@media (min-width: 992px) {
    .crypto-why-choose .bitcoin-img {
        padding: 58px;
    }
}
@media (min-width: 1200px) {
    .crypto-why-choose .bitcoin-img {
        padding: 69px;
    }
}
.crypto-buy-sell {
    background-image: url(https://srbthemes.kcubeinfotech.com/alloce/images/landing/crypto/4PiBm.webp);
    background-position: 50%;
    background-size: cover;
    background-attachment: fixed;
}
.crypto-buy-sell .buy-sell-card {
    background-color: rgba(var(--dx-success-rgb), 0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(var(--dx-success-rgb), 0.1);
    border-radius: 12px;
}
.crypto-buy-sell .buy-sell-card .circle {
    width: 64px;
    height: 64px;
    background: linear-gradient(
        to left,
        rgba(var(--dx-success-rgb), 0.8),
        rgba(var(--dx-success-rgb), 0.04)
    );
    border-radius: var(--dx-border-radius) 0 50px 0;
    transition: all 0.6s;
}
.crypto-buy-sell .buy-sell-card:hover .circle {
    height: 100%;
    width: 100%;
    border-radius: var(--dx-border-radius) 0 10px 0;
}
.crypto-buy-sell .buy-sell-card:hover a {
    color: #fff !important;
}
@media (min-width: 992px) {
    .crypto-how-it-work .learn-card img {
        position: absolute;
        left: 0;
        bottom: 0;
    }
}
.crypto-how-it-work .gradient-badge {
    border-radius: 50px;
    border: 1px solid transparent;
    background-image:
        linear-gradient(var(--dx-light)),
        linear-gradient(
            -20deg,
            rgba(var(--dx-success-rgb), 0.03),
            var(--dx-success),
            rgba(var(--dx-success-rgb), 0.03)
        );
    background-origin: border-box;
    background-clip: padding-box, border-box;
}
.crypto-roadmap .roadmap-line {
    transform: translateY(3px);
}
.crypto-roadmap .roadmap-line:before {
    content: "";
    position: absolute;
    bottom: 31px;
    right: 50%;
    transform: translateX(50%);
    width: 1px;
    height: 101px;
    background-color: rgba(var(--dx-success-rgb), 0.4);
}
.crypto-roadmap .roadmap-line:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: linear-gradient(
        30deg,
        rgba(var(--dx-success-rgb), 0.7) 35%,
        var(--dx-body-color) 98.23%
    );
}
.lh-xl {
    line-height: 1.75;
}
@media (min-width: 992px) {
    .crypto-experience .main-card {
        transform: perspective(200px) rotateX(3deg);
    }
}
@media (max-width: 991.98px) {
    .crypto-experience .main-card {
        overflow: hidden;
    }
}
.crypto-experience .circle-1 {
    top: 12%;
    left: 20%;
    background: linear-gradient(
        -136deg,
        rgba(var(--dx-success-rgb), 0.25) 10%,
        transparent 70%
    );
}
.crypto-experience .circle-2 {
    bottom: -6%;
    left: 3%;
    background: linear-gradient(
        -200deg,
        rgba(var(--dx-success-rgb), 0.18) 10%,
        transparent 70%
    );
}
.crypto-experience .circle-3 {
    bottom: -6%;
    right: -2%;
    background: linear-gradient(
        -200deg,
        rgba(var(--dx-success-rgb), 0.25) 10%,
        transparent 70%
    );
}
.crypto-top-Veneers .user-img {
    width: 235px;
    height: 235px;
}
.crypto-footer {
    margin-top: -320px;
    position: relative;
    background-image: url(https://srbthemes.kcubeinfotech.com/alloce/images/landing/crypto/footer-pattern.webp);
    background-position: bottom bottom;
    background-repeat: no-repeat;
    background-size: cover;
}
.crypto-footer:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(var(--dx-success-rgb), 0.2) 0,
        rgba(var(--dx-black-rgb), 0.4) 70%
    );
}
.crypto-footer .footer-padding {
    padding-top: 420px;
}
.crypto-footer input::-moz-placeholder {
    color: rgba(var(--dx-white-rgb), 0.3);
}
.crypto-footer input::placeholder {
    color: rgba(var(--dx-white-rgb), 0.3);
}
.font-zalando {
    --dx-font-family-heading: Zalando Sans, sans-serif;
    font-family:
        Zalando Sans,
        sans-serif;
}
.lh-13px {
    line-height: 15px;
}
.hrm-topbar .topbar-wrapper {
    padding-block: 0.875rem;
}
.hrm-bg-light {
    background-color: color-mix(in srgb, var(--dx-light) 95%, #000 2%);
}
.hrm-hero-section {
    padding-top: 107px;
}
.hrm-hero-section .hero-content {
    background-size: cover;
    background-position: 0 0;
    background-repeat: no-repeat;
}
.hrm-hero-section .hero-content.hero-img-1 {
    background-image: url(https://srbthemes.kcubeinfotech.com/alloce/images/landing/hrm/img-2.webp);
}
.hrm-hero-section .hero-content.hero-img-2 {
    background-image: url(https://srbthemes.kcubeinfotech.com/alloce/images/landing/hrm/img-1.webp);
}
.hrm-hero-section .hero-content:before {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to left,
        rgba(var(--dx-black-rgb), 0.85),
        rgba(var(--dx-black-rgb), 0.75),
        transparent
    );
}
.hrm-hero-section .hero-content .hero-text {
    padding: 70px 28px 90px;
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .hrm-hero-section .hero-content .hero-text {
        padding: 100px 40px;
    }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .hrm-hero-section .hero-content .hero-text {
        padding: 150px 40px;
    }
}
@media (min-width: 1200px) and (max-width: 1535.98px) {
    .hrm-hero-section .hero-content .hero-text {
        padding: 184px 40px 152px;
    }
}
@media (min-width: 1536px) {
    .hrm-hero-section .hero-content .hero-text {
        padding: 184px 80px 152px 0;
    }
}
.swiper-navigation-blur :is(.swiper-button-prev, .swiper-button-next) {
    background-color: rgba(var(--dx-secondary-bg-rgb), 0.25);
    backdrop-filter: blur(3px);
    transition: all 0.3s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
    .swiper-navigation-blur :is(.swiper-button-prev, .swiper-button-next) {
        transition: none;
    }
}
.swiper-navigation-blur :is(.swiper-button-prev, .swiper-button-next):hover {
    background-color: var(--dx-primary);
}
.swiper-navigation-blur :is(.swiper-button-prev, .swiper-button-next):after,
.swiper-navigation-blur :is(.swiper-button-prev, .swiper-button-next):before {
    content: "";
    height: 30px;
    width: 30px;
    background-color: transparent;
}
.swiper-navigation-blur .swiper-navigation-icon {
    display: none;
}
.hrm-brand-section .brand-main-title:before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 100%;
    border: 1px solid var(--dx-light);
    z-index: -1;
    display: none;
}
@media (min-width: 768px) {
    .hrm-brand-section .brand-main-title:before {
        display: block;
    }
}
.hrm-brand-section .marquee-ten.marquee-rtl {
    animation: scroll-left 30s linear infinite;
}
[data-bs-theme="dark"] .hrm-brand-section .marquee-ten.marquee-rtl img {
    filter: invert(1);
}
.hrm-brand-section .brand-marquee {
    position: relative;
}
.hrm-brand-section .brand-marquee:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 250px;
    height: 100%;
    background: linear-gradient(to left, var(--dx-secondary-bg), transparent);
    z-index: 1;
}
.hrm-brand-section .brand-marquee:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 250px;
    height: 100%;
    background: linear-gradient(to right, var(--dx-secondary-bg), transparent);
    z-index: 1;
}
.hrm-about-section .hrm-certified {
    background-image: url(https://srbthemes.kcubeinfotech.com/alloce/images/landing/hrm/shape-1.webp);
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    background-color: rgba(var(--dx-indigo-rgb), 0.08);
}
.hrm-service-section {
    background-image: url(https://srbthemes.kcubeinfotech.com/alloce/images/landing/hrm/shape-2.webp);
    background-size: cover;
    background-position: center -11px;
    background-repeat: no-repeat;
}
.hrm-service-section .serice-img:before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 100%;
    border: 1px solid rgba(var(--dx-dark-rgb), 0.08);
}
.hrm-service-section
    #hrmServiceSlider
    .swiper-pagination
    .swiper-pagination-bullet {
    height: 10px;
    width: 10px;
    background-color: var(--dx-indigo);
    margin-inline: 6px;
    transition: all 0.3s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
    .hrm-service-section
        #hrmServiceSlider
        .swiper-pagination
        .swiper-pagination-bullet {
        transition: none;
    }
}
.hrm-service-section
    #hrmServiceSlider
    .swiper-pagination
    .swiper-pagination-bullet.swiper-pagination-bullet-active {
    width: 45px;
    border-radius: 50rem;
}
[data-bs-theme="dark"] .hrm-service-section #hrmServiceSlider .service-img {
    filter: invert(1);
}
@media (min-width: 1536px) {
    .work-steps {
        margin-top: -300px;
    }
}
.card-slide {
    position: relative;
    transition: all 0.3s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
    .card-slide {
        transition: none;
    }
}
.card-slide:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    height: 100%;
    width: 0;
    transition: width 0.4s ease-in-out;
}
.card-slide .avatar {
    background-color: rgba(var(--dx-indigo-rgb), 0.1);
}
.card-slide:hover {
    color: #fff;
}
.card-slide:hover:before {
    width: 100%;
    right: 0;
    left: auto;
}
.card-slide:hover p {
    color: rgba(var(--dx-white-rgb), 0.6) !important;
}
.card-slide:hover .avatar {
    background-color: rgba(var(--dx-secondary-bg-rgb), 1);
    color: var(--dx-indigo);
}
.feature-slide .bg-layer {
    background-color: color-mix(
        in srgb,
        rgba(var(--dx-indigo-rgb), 0.42) 85%,
        #000 15%
    );
}
.feature-slide .feature-arrow {
    opacity: 0;
    scale: 0;
    transition: all 0.5s ease-in-out;
}
.feature-slide:hover .feature-arrow {
    opacity: 1;
    scale: 1.5;
}
.pricing-card {
    background-image: url(https://srbthemes.kcubeinfotech.com/alloce/images/landing/hrm/shape-3.svg);
    background-size: contain;
    background-position: bottom;
    background-repeat: no-repeat;
}
.pricing-card .curve-btn {
    position: relative;
    padding: 11px 25px;
    margin-bottom: -72px;
}
.pricing-card .curve-btn:before {
    right: -17px;
    background: radial-gradient(
        circle at right top,
        transparent 15px,
        var(--dx-indigo) 16px
    );
}
.pricing-card .curve-btn:after,
.pricing-card .curve-btn:before {
    content: "";
    position: absolute;
    bottom: -2.5px;
    width: 18px;
    height: 18px;
}
.pricing-card .curve-btn:after {
    left: -17px;
    background: radial-gradient(
        circle at left top,
        transparent 15px,
        var(--dx-indigo) 16px
    );
}
.pricing-card .curve-btn.popular-plan-btn:before {
    background: radial-gradient(
        circle at right top,
        transparent 15px,
        var(--dx-secondary-bg) 16px
    );
}
.pricing-card .curve-btn.popular-plan-btn:after {
    background: radial-gradient(
        circle at left top,
        transparent 15px,
        var(--dx-secondary-bg) 16px
    );
}
.hrm-team-section {
    background-color: color-mix(in srgb, var(--dx-indigo) 90%, #000 10%);
}
.hrm-team-section .hrm-team-bg {
    background-image: url(https://srbthemes.kcubeinfotech.com/alloce/images/landing/hrm/shape-5.webp);
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
}
.hrm-team-section .team-1 {
    position: absolute;
    top: 21%;
    right: 6%;
}
.hrm-team-section .team-2 {
    position: absolute;
    top: 32%;
    right: 18%;
}
.hrm-team-section .team-3 {
    position: absolute;
    bottom: 20%;
    right: 12%;
}
.hrm-team-section .team-4 {
    position: absolute;
    top: 20%;
    left: 23%;
}
.hrm-team-section .team-5 {
    position: absolute;
    top: 32%;
    left: 4%;
}
.hrm-team-section .team-6 {
    position: absolute;
    left: 13%;
    bottom: 23%;
}
.blog-card .animate-shine {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to left,
        rgba(var(--dx-black-rgb), 0) 0,
        rgba(var(--dx-white-rgb), 0.8) 50%,
        rgba(var(--dx-black-rgb), 0) 100%
    );
    opacity: 0;
    transform: skew(-30deg);
    animation: shine 0.75s linear 1;
}
.blog-card:hover .animate-shine {
    display: block;
}
.blog-card .entry-list:after,
.blog-card .entry-list:before {
    content: "";
    width: 18px;
    height: 18px;
    background: radial-gradient(
        circle at right top,
        transparent 15px,
        color-mix(in srgb, var(--dx-body-color) 5%, #fff 95%) 16px
    );
}
.blog-card .entry-list:before {
    position: absolute;
    bottom: -2.5px;
    right: -15px;
}
.blog-card .entry-list:after {
    position: absolute;
    top: -16px;
    left: -1.5px;
}
@keyframes shine {
    0% {
        right: -50%;
        opacity: 0;
    }
    50% {
        right: 25%;
        opacity: 0.5;
    }
    to {
        right: 100%;
        opacity: 0;
    }
}
.hrm-footer {
    background-color: color-mix(in srgb, var(--dx-indigo) 90%, #000 10%);
}
.hrm-footer .email-input::-moz-placeholder {
    color: rgba(var(--dx-white-rgb), 0.4);
}
.hrm-footer .email-input::placeholder {
    color: rgba(var(--dx-white-rgb), 0.4);
}
.hrm-footer .border-opacity-25 {
    border-color: rgba(var(--dx-white-rgb), 0.25) !important;
}
.ecommerce-hero-section {
    background-image: url(https://srbthemes.kcubeinfotech.com/alloce/images/landing/ecommerce/cloud.webp);
    background-size: cover;
}
@media (min-width: 768px) {
    .ecommerce-hero-section {
        min-height: 700px;
    }
}
.ecommerce-hero-section .marquee-ten {
    top: 20%;
}
.ecommerce-hero-section .marquee-ten.marquee-rtl {
    animation: scroll-left 60s linear infinite;
}
.ecommerce-hero-section .marquee-ten span {
    font-family: Nunito, sans-serif;
    font-weight: 900;
    font-size: 7rem;
    color: transparent;
    background: linear-gradient(
        to bottom,
        var(--dx-white) 0,
        rgba(var(--dx-white-rgb), 0.5) 40%,
        rgba(var(--dx-white-rgb), 0.1) 70%,
        transparent 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
}
@media (min-width: 768px) {
    .ecommerce-hero-section .marquee-ten span {
        font-size: 13.5rem;
    }
}
.product-card .product-img img {
    scale: 1;
    transition: all 1.5s ease-in-out;
}
.product-card .product-img .cart-btn {
    transition: all 0.5s ease-in-out;
    transform: translateY(59px);
}
@media (prefers-reduced-motion: reduce) {
    .product-card .product-img .cart-btn {
        transition: none;
    }
}
.product-card .product-img .like-btn {
    transition: all 0.5s ease-in-out;
    transform: translateX(-34px);
}
@media (prefers-reduced-motion: reduce) {
    .product-card .product-img .like-btn {
        transition: none;
    }
}
.product-card .color-btn {
    transition: all 0.2s ease-in-out;
    scale: 0.95;
}
@media (prefers-reduced-motion: reduce) {
    .product-card .color-btn {
        transition: none;
    }
}
.product-card .color-btn a {
    transition: all 0.3s ease-in-out;
    scale: 1;
}
@media (prefers-reduced-motion: reduce) {
    .product-card .color-btn a {
        transition: none;
    }
}
.product-card .color-btn:hover {
    scale: 1;
    border: 1px solid rgba(var(--dx-body-color-rgb), 0.7);
}
.product-card .color-btn:hover a {
    border: none;
    scale: 0.6;
}
.product-card:hover .product-img img {
    scale: 1.15;
}
.product-card:hover .product-img .cart-btn {
    transform: translateY(0);
}
.product-card:hover .product-img .like-btn {
    transform: translateX(0);
}
.ecommerce-testimonial-section {
    background-image: url(https://srbthemes.kcubeinfotech.com/alloce/images/landing/ecommerce/product-testimonial-bg.webp);
    background-size: cover;
    background-position: 50%;
    background-attachment: fixed;
}
.ecommerce-testimonial-section .testimonial-item {
    max-width: 900px;
    margin: 0 auto;
}
.ecommerce-cta-section .product-cta-img-wrapper .product-cta-img-text {
    background-image: url(https://srbthemes.kcubeinfotech.com/alloce/images/landing/ecommerce/product-review-1.webp);
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 90px;
    animation: textanimation 10s linear infinite;
}
@media (min-width: 768px) {
    .ecommerce-cta-section .product-cta-img-wrapper .product-cta-img-text {
        font-size: 110px;
    }
}
@media (min-width: 992px) {
    .ecommerce-cta-section .product-cta-img-wrapper .product-cta-img-text {
        font-size: 140px;
    }
}
@media (min-width: 1200px) {
    .ecommerce-cta-section .product-cta-img-wrapper .product-cta-img-text {
        font-size: 170px;
    }
}
@keyframes textanimation {
    0% {
        background-position: 50% 0;
    }
    to {
        background-position: 50% 100%;
    }
}
.ecommerce-cta-section .cta-content {
    max-width: 800px;
}
.ecommerce-summer-arrivals .summer-arrivals-text {
    rotate: 90deg;
    position: absolute;
    bottom: 25.6%;
    right: -14%;
}
.ecommerce-summer-arrivals .outline-text {
    top: -88px;
    left: -25px;
    position: absolute;
    font-size: 125px;
    color: transparent;
    -webkit-text-stroke: 2px var(--dx-secondary-color);
    font-family:
        Segoe UI,
        Tahoma,
        Geneva,
        Verdana,
        sans-serif;
}
@media (min-width: 1536px) {
    .ecommerce-summer-arrivals .outline-text {
        left: -48px;
    }
}
@media (min-width: 1200px) {
    .ecommerce-summer-arrivals .offer-text {
        position: absolute;
        left: 0;
        bottom: 0;
    }
    .ecommerce-summer-arrivals .summer-collection-row {
        height: 100%;
    }
}
.follow-slider .swiper-slide:nth-child(odd) .follow-us-card {
    transform: rotate(2deg);
}
.follow-slider .swiper-slide:nth-child(2n) .follow-us-card {
    transform: rotate(-2deg);
    margin-top: 35px;
}