:root {
    --footer-bg-light: #f8f9fa;
    --footer-text-light: #212529;
    --footer-bg-dark: #343a40;
    --footer-text-dark: #f8f9fa;
    --topbar-bg-light: #f8f9fa;
    --topbar-text-light: #212529;
    --topbar-bg-dark: #343a40;
    --topbar-text-dark: #f8f9fa;
    --card-bg-light: white;
    --card-text-light: black;
    --card-bg-dark: #282828;
    --card-text-dark: #f8f9fa;
}

[data-bs-theme="light"] {
    --footer-bg: var(--footer-bg-light);
    --footer-text: var(--footer-text-light);
    --topbar-bg: var(--topbar-bg-light);
    --topbar-text: var(--topbar-text-light);
    --card-bg: var(--card-bg-light);
    --card-text: var(--card-text-light);
}

[data-bs-theme="dark"] {
    --footer-bg: var(--footer-bg-dark);
    --footer-text: var(--footer-text-dark);
    --topbar-bg: var(--topbar-bg-dark);
    --topbar-text: var(--topbar-text-dark);
    --card-bg: var(--card-bg-dark);
    --card-text: var(--card-text-dark);
}

html,
body,
#app {
    padding: 0;
    margin: 0;
    overflow: hidden;
    overscroll-behavior: none;
    background-color: var(--bs-tertiary-bg) !important;
}
.main {
    background-color: var(--bs-tertiary-bg) !important;
    width: 100%;
    padding:0.5rem;
    overflow: auto;
}

#app,
.content-container,
.content-container > .layout-content,
.layout-content > div:not(.modal-backdrop) {
    background: inherit;
}

    #app.root {
        min-width: 375px;
    }

/* Header */
.nav-header, /*navigation header*/
.nav-header .dxbl-menu-nav, /*navigation header menu*/
.nav-header .dxbl-menu ul, /*navigation header menu list*/
.nav-header .dxbl-menu a, /*navigation header menu link*/
/*.nav-header .dxbl-menu .dxbl-menu-bar,*/ /*navigation header menu bar*/
/*.nav-header .dxbl-menu .dxbl-menu-bar .dxbl-menu-title,*/ /*navigation header title*/
.menu-dropdown, /*navigation header menu adaptive dropdown*/
.menu-dropdown ul, /*navigation header menu adaptive list*/
.menu-dropdown a, /*navigation header menu adaptive link*/
/*.nav-menu-dropdown,*/ /*user menu dropdown*/
/*.nav-menu-dropdown ul,*/ /*user menu dropdown list*/
/*.nav-menu-dropdown a,*/ /*user menu dropdown link*/
.nav-menu-dropdown .dxbl-dropdown-body .dxbl-text-edit, /*user menu dropdown edit input*/
.nav-menu-dropdown .dxbl-dropdown-body .dxbl-text-edit button, /*user menu dropdown edit button*/
.theme-switcher-dropdown, /*theme switcher dropdown*/
.theme-switcher-dropdown ul, /*theme switcher dropdown list*/
.theme-switcher-dropdown a /*theme switcher dropdown link*/ {
    background-color: var(--topbar-bg) !important;
    color: var(--topbar-text) !important;
}

.dxmenu-container {
    background-color: inherit;
    color: inherit;
}

.topbar-banner {
    display: flex;
    align-items: center;
    height: 100%;
    background-color: #02145C;
/*    background-color: #0082C8;*/
    padding-left: 15px;
        width: 100%;
}

.topbar-banner-img {
    height: 40px;
    width: 40px;
    margin-right: 20px;
    object-fit: contain;
}

.topbar-banner-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: white;
    gap: 2px;
}

    .topbar-banner-text h4 {
        margin: 0 0 2px 0;
        color: white;
    }

    .topbar-banner-text span {
        color: white;
        font-size: 0.95em;
    }

.nav-header.navbar {
    margin: 0 auto;
    position: relative;
    height: 3.5rem;
    flex-wrap: nowrap;
/*    justify-content: flex-start;*/
    border: none;
    background-color: var(--topbar-bg);
    border-radius: 0;
    box-shadow: none;
    z-index: 1029;
}

.nav-header .menu-stretch {
    flex: 1 1 auto;
    min-width: 0;
}

/* User Menu */
.initials-avatar {
    width: 40px;
    height: 40px;
    color: White;
    border-radius: 50%;
    background-color: #02145C;
/*    background-color: #0082C8;*/
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    line-height: 50px;
}

.navbar-initials-profile .dxbl-menu-item {
/*    background-color: #0082C8;*/
    background-color: #02145C;
}
.dxbl-menu.dxbl-menu-horizontal > .dxbl-menu-bar > .dxbl-menu-item-list > .dxbl-menu-separator {
   border:none;
}

.user-menu-container {
    padding: 0.815rem;
}

.notoggle svg {
    display: none;
}

/* Body */
.content-container {
    display: flex;
    overflow-y: auto;
    height: 100vh;
    width: 100%;
}

.layout-content {
    width: 1140px;
    margin: 0 auto;
    padding-top: 10px;
}
 
    .layout-content > :last-child {
        padding-bottom: 10px;
    }

.sidebar-container {
    flex: 1 1 auto;
    width: 100%;
}

.sidebar-container
.dxbl-splitter-pane-content {
    display: flex;
    flex-direction: column;
    padding: 0px !important;
    background-color: var(--bs-tertiary-bg) !important;
}

.sidebar-container .dxbl-splitter {
    width: 100%;
}

.sidebar-panel .dxbl-menu-item {
    background-color: var(--footer-bg);
}
/* Footer */
.footer-container {
/*    background-color: var(--footer-bg);*/
/*    color: var(--footer-text);*/
    /*    padding: 10px 0;*/
    text-align: center;
    /*position: relative;*/
    /*    width: 100%;*/
    margin-top: auto;
}

    .footer-container .info-wrapper {
/*        display: flex;
        flex-direction: column;
        align-items: flex-end;*/
        justify-content: center;
    }

.splitter-sidebar {
    padding: 0.5rem !important;
}

/* Status Legend Div */
.legend-flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end
}

.legend-item {
    display: flex;
    align-items: center;
}

/* Card View */
.card-view-wrapper {
    background-color: var(--DS-color-surface-neutral-default-rest);
    /*color: var(--card-text);
    border-radius: 25px;
    padding: 60px;*/
    border-radius: 8px;
    padding: 0.5rem;
    /* margin-bottom: 1rem; */
    border: 1px solid var(--DS-color-border-neutral-default-rest);
    box-shadow: var(--bs-box-shadow-sm);
}