@layer customSiteCSS, highlight, reset, bootstrap, devexpress, customDxDemoCSS, customDxDemoPagesCSS, dxGantt, dxLight, bootstrapIcons, variables, components, appComponents;
@import url("./components/_index.css") layer(components);
@import url("./variables/_index.css") layer(variables);
@import url("./reset.css") layer(reset);

/*Third Parties*/
@import url("../css/site.css") layer(customSiteCSS);
@import url("/_content/DevExpress.Blazor.Themes/bootstrap-external.bs5.min.css") layer(devexpress);
@import url("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css") layer(highlight);
@import url("../css/switcher-resources/themes/cerulean/bootstrap.min.css") layer(bootstrap);
@import url("https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.3/font/bootstrap-icons.min.css") layer(bootstrapIcons);

@import url("https://cdn3.devexpress.com/jslib/24.2.3/css/dx-gantt.min.css") layer(dxGantt);

@import url("https://cdn3.devexpress.com/jslib/24.2.3/css/dx.light.css") layer(dxLight);

/* Custom css (old)*/

@import url("../css/dx-demo.css") layer(customDxDemoCSS);
@import url("../css/dx-demo-pages.css") layer(customDxDemoPagesCSS);

@import url("./app-components/_index.css") layer(appComponents);

@layer base {
    html body {
        overflow-y: auto;
    }

    #root {
        display: flex;
        align-items: start;
    }

    main {
        background-color: var(--s-color-surface);
        min-height: 100vh;
        width: 100%;
        padding-bottom: var(--s-space-32);
        overflow-y: unset !important;
        height: auto !important;
    }

    .s-app-header {
        padding: var(--s-space-8);
        height: calc(var(--rem-scale) * 4.9rem);
        border-bottom-width: 1px;
        display: flex;
    }

    .s-app-header-icon-button {
        width: calc(var(--rem-scale) * 3.6rem);
        height: calc(var(--rem-scale) * 3.6rem);
        margin-block: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        background-color: transparent;
        border-radius: var(--s-border-radius-default);
    }

    .s-app-header-icon-button:hover {
        background-color: var(--s-color-secondary);
    }

    .s-app-header-actions {
        display: flex;
        gap: var(--s-space-8);
    }

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

    [data-theme="dark"] .dark-mode-button {
        display: none;
    }

    [data-theme="dark"] .light-mode-button {
        display: flex;
    }

    .s-app-header .s-app-header-actions {
        margin-left: auto;
    }

    .s-app-header-nav-button {
        margin-right: var(--s-space-12);
    }

    .s-app-header-nav-button:hover {
        cursor: e-resize;
    }

    #root:not(.s-app-sidebar-active) .s-app-header-nav-button:hover {
        cursor: w-resize;
    }

    .app-header-search-wrapper {
        padding-left: var(--s-space-12);
        border-left-width: 1px;
        flex-grow: 1;
    }

    .app-header-search-button {
        background-color: transparent;
        padding-left: var(--s-space-6);
        padding-right: var(--s-space-48);
        font-weight: var(--s-font-weight-normal);
        color: var(--s-color-muted-foreground);
        justify-content: start;
        width: 100%;
        position: relative
    }

    .app-header-search-button kbd {
        display: none;
    }

    @media screen and (min-width:425px) {
        .app-header-search-button {
            max-width: calc(var(--rem-scale) * 20rem);
        }
    }

    @media screen and (min-width:1024px) {
        .app-header-search-button {
            max-width: calc(var(--rem-scale) * 26rem);
        }

        .app-header-search-button kbd {
            display: flex;
        }
    }

    .app-header-search-button:hover {
        color: var(--s-color-accent-foreground);
    }

    kbd {
        height: calc(var(--rem-scale) * 2);
        background-color: var(--s-color-white);
        color: var(--s-color-body-text);
        font-size: var(--s-font-size-11);
        padding-block: 0;
        padding-inline: var(--s-space-6);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
        position: absolute;
        right: var(--s-space-6);
        font-family: inherit;
    }

    .s-app-content {
        padding: var(--s-space-16);
    }

    @media screen and (min-width: 1440px) {
        .s-app-content:not(.main-full-width) {
            max-width: 1440px;
            margin-inline: auto;
        }
    }

    .s-app-content .s-page-header {
        margin-bottom: var(--s-space-16);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .s-app-content .s-page-header .s-page-header-buttons {
        display: flex;
        align-items: center;
        gap: var(--s-space-8);
    }

    .s-app-content .s-page-header .s-page-header-buttons button span {
        display: none;
    }

    @media screen and (min-width: 990px) {
        .s-app-content .s-page-header .s-page-header-buttons button span {
            display: inline;
        }
    }

    .s-blocks-vertical {
        display: flex;
        flex-direction: column;
        gap: var(--s-space-24);
    }

    @media screen and (min-width: 990px) {
        .s-blocks-vertical {
            gap: var(--s-space-32);
        }
    }

    .s-home-report-cards {
        display: flex;
        gap: var(--s-space-16);
        overflow: auto;
        margin-left: -1rem;
        padding-inline: 1rem;
        width: calc(100% + 32px)
    }

    .s-home-report-cards .s-card {
        flex-shrink: 0;
        max-width: 70%;
        width: 100%;
    }

    @media screen and (min-width: 500px) {
        .s-home-report-cards .s-card {
            max-width: 50%;
        }
    }

    @media screen and (min-width: 768px) {
        .s-home-report-cards {
            display: grid;
            margin-left: 0;
            padding-inline: 0;
            width: 100%;
            grid-template-columns: repeat(2, 1fr);
        }

        .s-home-report-cards .s-card {
            max-width: 100%;
            flex-shrink: unset;
        }
    }

    @media screen and (min-width: 1284px) {
        .s-home-report-cards {
            grid-template-columns: repeat(4, 1fr);
        }
    }

    .s-home-report-cards .s-home-report-card-title {
        margin-bottom: var(--s-space-16);
        display: flex;
        align-items: center;
        gap: var(--s-space-8);
    }

    .s-home-report-cards .s-home-report-card-value {
        display: flex;
        align-items: end;
        gap: var(--s-space-4);
    }

    .s-home-report-cards .s-home-report-card-value p {
        padding-bottom: var(--s-space-3);
    }

    .s-home-report-cards .s-card-footer {
        display: flex;

        justify-content: end;
    }

    :is(.s-home-report-cards, .home-report-blocks) .s-card-footer a {
        padding: 0;
        text-decoration: none;
        background-color: transparent;
        line-height: calc(var(--rem-scale) * 2rem);
    }

    .home-report-blocks {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: var(--s-space-16);
    }

    @media screen and (min-width: 990px) {
        .home-report-blocks {
            flex-direction: row;
        }

        .home-report-orders-card {
            width: 60%;
        }
    }

    .home-report-orders-card .home-report-empty-state {
        padding: var(--s-space-48);
        display: flex;
        flex-direction: column;
        gap: var(--s-space-8);
        align-items: center;
    }

    .home-report-empty-state .home-report-empty-state-icon {
        margin-bottom: var(--s-space-8);
        width: calc(var(--rem-scale) * 4rem);
        height: calc(var(--rem-scale) * 4rem);
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--s-color-accent);
        border-radius: var(--s-border-radius-default);
    }

    .home-report-empty-state .home-report-empty-state-icon svg {
        width: calc(var(--rem-scale) * 2.4rem);
        height: calc(var(--rem-scale) * 2.4rem);
    }

    .home-report-orders-card .home-report-empty-state button {
        margin-top: var(--s-space-16);
    }

    @media screen and (min-width: 990px) {
        .home-report-limits-card {
            width: 50%;
        }
    }

    @media screen and (min-width: 1284px) {
        .home-report-limits-card {
            width: 40%;
        }
    }

    .home-report-limits {
        display: flex;
        flex-direction: column;
    }

    .home-report-limits .home-report-limit-item {
        display: flex;
        justify-content: space-between;
        padding-block: var(--s-space-4);
        border-bottom-width: 1px;
    }

    .home-report-limits .home-report-limit-item:last-child {
        border-width: 0;
    }

    @media screen and (min-width: 990px) {
        .home-report-statements-card {
            width: 50%;
        }

        .home-report-campaigns-card {
            width: 50%;
        }
    }

    @media screen and (min-width: 1284px) {
        .home-report-statements-card {
            width: 70%;
        }

        .home-report-campaigns-card {
            width: 40%;
        }
    }

    .dxbl-loading-panel-indicator-area {
        margin-block: calc(var(--rem-scale) * 1rem);
        background-color: var(--s-color-white);
        padding-block: calc(var(--rem-scale) * 1.2rem);
        padding-inline: calc(var(--rem-scale) * 1.6rem);
    }

    .dxbl-loading-panel-indicator-area .dxbl-loading-panel-message {
        font-size: var(--s-font-size-14);
    }

    .language-selector {
        width: calc(var(--rem-scale) * 13rem);
    }
}


.dxbl-modal {
    --dxbl-popup-border-radius: var(--s-border-radius-default)
}

.dxbl-modal>.dxbl-modal-back,
.offcanvas-backdrop {
    --tw-enter-opacity: 0;
    animation-name: enter;
    animation-duration: .15s;
}

dxbl-modal-dialog {
    animation-name: enter;
    animation-duration: .15s;
    --tw-enter-scale: .95;
    --tw-enter-opacity: 0;
}

@media screen and (max-width:768px) {
    dxbl-modal-dialog[style] {
        max-width: 90% !important;
        min-width: 90% !important;
        width: 90% !important;
        margin: auto;
    }
}

dxbl-modal-dialog .button-container {
    margin-block: var(--s-space-4) !important;
}

dxbl-modal-dialog dxbl-popup-header,
dxbl-modal-dialog .dxbl-modal-body,
dxbl-modal-dialog .dxbl-modal-footer {
    background-color: var(--s-color-white);
    color: var(--s-color-body-text);
    --dxbl-popup-footer-bg: var(--s-color-white);
}

dxbl-modal-dialog .dxbl-modal-body {
    border-bottom-left-radius: var(--s-border-radius-default);
    border-bottom-right-radius: var(--s-border-radius-default);
}

dxbl-modal-dialog .dxbl-modal-footer {
    border-bottom-left-radius: var(--s-border-radius-default);
    border-bottom-right-radius: var(--s-border-radius-default);
}

dxbl-modal-dialog dxbl-popup-header {
    padding-block: var(--s-space-12);
    padding-inline: var(--s-space-16);
}

dxbl-modal-dialog dxbl-popup-header .dxbl-popup-header-button[data-dismiss] {
    width: calc(var(--rem-scale) * 2.8rem);
    height: calc(var(--rem-scale) * 2.8rem);
    border-radius: var(--s-border-radius-default);
}

dxbl-modal-dialog dxbl-popup-header .dxbl-modal-title {
    font-size: var(--s-font-size-18);
    font-weight: var(--s-font-weight-semibold);
}

.custom-offcanvas {
    --tw-enter-translate-x: 100%;
    animation-name: enter;
    animation-duration: .1s;
}

@keyframes enter {
    0% {
        opacity: var(--tw-enter-opacity, 1);
        transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
    }
}


.dxbl-tabs>.dxbl-tabs-tablist .dxbl-tabs-item {
    color: var(--s-color-body-text)
}

.toast-body {
    color: #171717
}

.dxbl-window {
    --dxbl-window-color: var(--s-color-body-text);
    --dxbl-window-bg: var(--s-color-white)
}

.card {
    --bs-card-bg: var(--s-color-white);
    color: var(--s-color-body-text);
}

.dxbl-list-box,
.dxbl-list-box-render-container {
    background-color: var(--s-color-white);
    color: var(--s-color-body-text);
}

.offcanvas {
    color: var(--s-color-body-text);
}