[data-bs-theme=light] {
    --a8-primary: #724EA6;
    --a8-primary-rgb: rgba(114, 78, 166, 1);
    --a8-secondary: #4E208B;
    --a8-secondary-rgb: rgba(78, 32, 139, 1);
    --a8-tertiary: #9656C0;
    --a8-tertiary-rgb: rgba(150, 86, 192, 1);
    --a8-dark-variation-01: #252144;
    --a8-dark-variation-01-rgb: rgb(37, 33, 68);
    --a8-dark-variation-02: #140d27;
    --a8-light-variation-01: #FBF8FF;
    --a8-body-bg: #FBF8FF;
    --a8-body-primary: #252144;
    --a8-card-color: var(--a8-body-bg);
    --a8-root-card-box-shadow: var(--a8-light-variation-01);
    --a8-root-card-border-color: color-mix(in srgb, var(--a8-secondary-rgb) 30%, transparent);
    --a8-card-border-color: color-mix(in srgb, var(--a8-primary-rgb) 10%, transparent);
    --a8-card-cap-color: var(--a8-light-variation-01);
    --a8-card-cap-bg: var(--a8-light-variation-01);
}

[data-bs-theme=dark] {
    --a8-primary: #724EA6;
    --a8-primary-rgb: rgba(114, 78, 166, 1);
    --a8-secondary: #4E208B;
    --a8-secondary-rgb: rgb(78, 32, 139);
    --a8-tertiary: #9656C0;
    --a8-tertiary-rgb: rgba(150, 86, 192, 1);
    --a8-dark-variation-01: #252144;
    --a8-dark-variation-01-rgb: rgb(37, 33, 68);
    --a8-dark-variation-02: #140d27;
    --a8-light-variation-01: #FBF8FF;
    --a8-body-bg: #140d27;
    --a8-body-primary: #FBF8FF;
    --a8-card-color: var(--a8-dark-variation-01);
    --a8-root-card-box-shadow: var(--a8-light-variation-01);
    --a8-root-card-border-color: color-mix(in srgb, var(--a8-secondary-rgb) 30%, transparent);
    --a8-card-border-color: color-mix(in srgb, var(--a8-primary-rgb) 20%, transparent);
    --a8-card-cap-color: var(--a8-light-variation-01);
    --a8-card-cap-bg: var(--a8-light-variation-01);
}

body,
.app-default {
    background-color: var(--a8-body-bg);
}

body, html, .form-text {
    font-size: 14px!important;
}

.header-fixed .header {
    background-color: var(--a8-body-bg);
    box-shadow: 0 10px 30px 0 rgba(82,63,105,.05);
}

.footer {
    background-color: var(--a8-body-bg);
}

.toolbar {
    background-color: var(--a8-body-bg);
}

.aside.aside-dark {
    background-color: var(--a8-dark-variation-01) !important;
}
.aside.aside-dark .aside-logo {
    background-color: var(--a8-dark-variation-01) !important;
}

.aside-dark .menu .menu-item .menu-link.active {
    background-color: color-mix(in srgb, var(--a8-secondary-rgb) 30%, transparent);
    color: #fff;
}
.aside-dark .menu .menu-item .menu-link:hover:not(.disabled):not(.active), .aside-dark .menu .menu-item.hover>.menu-link:not(.disabled):not(.active) {
    transition: color .2s ease,background-color .2s ease;
    background-color: color-mix(in srgb, var(--a8-secondary-rgb) 90%, transparent);
    color: #fff;
}

 /*BUTTONS */
.bg-blue-madison {
    background: var(--a8-primary) !important;
}
.btn.blue-madison:not(.btn-outline):active, .btn.blue-madison:not(.btn-outline).active, .open > .btn.blue-madison:not(.btn-outline).dropdown-toggle {
    background-color: var(--a8-primary);
    border-color: var(--a8-primary);
}
.btn.blue-madison:not(.btn-outline):active:hover, .btn.blue-madison:not(.btn-outline):active:focus, .btn.blue-madison:not(.btn-outline):active.focus, .btn.blue-madison:not(.btn-outline).active:hover, .btn.blue-madison:not(.btn-outline).active:focus, .btn.blue-madison:not(.btn-outline).active.focus, .open > .btn.blue-madison:not(.btn-outline).dropdown-toggle:hover, .open > .btn.blue-madison:not(.btn-outline).dropdown-toggle:focus, .open > .btn.blue-madison:not(.btn-outline).dropdown-toggle.focus {
    background-color: var(--a8-secondary);
    border-color: var(--a8-secondary);
}

.btn.btn-primary {
    color: var(--a8-light-variation-01);
    border-color: var(--a8-primary);
    background-color: var(--a8-primary);
}
.btn.btn-light-primary {
    color: var(--a8-light-variation-01);
    border-color: var(--a8-primary);
    background-color: var(--a8-primary);
}
.btn-check:active+.btn.btn-light-primary, .btn-check:checked+.btn.btn-light-primary, .btn.btn-light-primary.active, .btn.btn-light-primary.show, .btn.btn-light-primary:active:not(.btn-active), .btn.btn-light-primary:focus:not(.btn-active), .btn.btn-light-primary:hover:not(.btn-active), .show>.btn.btn-light-primary {
    color: var(--a8-light-variation-01);
    border-color: var(--a8-secondary);
    background-color: var(--a8-secondary) !important;
}

.bg-primary {
    --bs-bg-rgb-color: var(--a8-primary-rgb);
    background-color: var(--a8-primary) !important;
}
.bg-secondary {
    --bs-bg-rgb-color: var(--a8-secondary-rgb);
    background-color: var(--a8-secondary) !important;
}
.text-primary {
    color: var(--a8-primary) !important;
}
.daterangepicker .ranges li.active {
    background-color: var(--a8-primary);
}

.alert-warning {
    background-color: var(--bs-warning-clarity);
    border-color: var(--bs-warning-clarity);
}

.btn-check:active+.btn.btn-primary, .btn-check:checked+.btn.btn-primary, .btn.btn-primary.active, .btn.btn-primary.show, .btn.btn-primary:active:not(.btn-active), .btn.btn-primary:focus:not(.btn-active), .btn.btn-primary:hover:not(.btn-active), .show>.btn.btn-primary {
    color: #fff;
    border-color: var(--a8-dark-variation-01);
    background-color: var(--a8-dark-variation-01) !important;
}

.aside-dark .menu .menu-item .menu-link .menu-title {
    color: #eae4e4 !important;
    font-size: 14px !important;
}
.svg-icon svg [fill]:not(.permanent):not(g) {
    fill: #ffffff !important;
}


/*.card {*/
/*    --bs-card-box-shadow: var(--a8-root-card-box-shadow);*/
/*    !*--bs-card-border-color: var(--a8-root-card-border-color);*!*/
/*    border: 1px solid var(--a8-card-border-color);*/
/*}*/

/*.card .card-body {*/
/*    color: var(--a8-body-primary) !important;*/
/*    background-color: var(--a8-card-color) !important;*/
/*}*/
/*.card .card-footer {*/
/*    color: var(--a8-body-primary) !important;*/
/*    background-color: var(--a8-card-color) !important;*/
/*    border-top: 1px solid var(--a8-card-border-color);*/
/*}*/
/*.card .card-header {*/
/*    color: var(--a8-body-primary) !important;*/
/*    background-color: var(--a8-card-color) !important;*/
/*}*/

/*.portlet, .portlet.light {*/
/*    color: var(--bs-body-color);*/
/*    background-color: var(--a8-card-color);*/
/*    !*border: var(--bs-card-border-width) solid var(--bs-card-border-color);*!*/
/*    box-shadow: var(--bs-card-box-shadow);*/
/*}*/
/*.portlet.light > .portlet-title > .caption {*/
/*    color: var(--a8-body-primary);*/
/*}*/


@media (max-width: 768px) {
    .a8_translate_box {
        display: none !important;
    }
}
.drawer {
    display: flex!important;
    overflow: auto;
    z-index: 110;
    position: fixed;
    top: 0;
    bottom: 0;
    background-color: #fff;
    transition: transform 0.3s ease-in-out;
    transform: translateX(-100%); /* Hide offscreen by default */
}

/* When the drawer is toggled on, add a class (e.g. drawer-on) */
.drawer.drawer-on {
    transform: translateX(0);
}