: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: #fafafa;
    --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: #f3f3f3;
}

#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: 70px;
    background-color: #0088ff;
    padding-left: 15px;
}

.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: inherit;
    border-radius: 0;
    z-index: 2;
}

/* User Menu */
.initials-avatar {
    width: 40px;
    height: 40px;
    background-color: var(--bs-primary);
    color: White;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    line-height: 50px;
}

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

.notoggle svg {
    display: none;
}

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

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

/* Footer */
.footer-container {
    background-color: var(--footer-bg);
    color: var(--footer-text);
    padding: 10px 0;
    text-align: center;
    position: relative;
    width: 100%;
}

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

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

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

/* Card View */
.card-view-wrapper {
    background-color: var(--card-bg);
    color: var(--card-text);
    border-radius: 25px;
    padding: 60px;
}