/* The browser canvas and device safe areas share the site's existing background. */
:root {
    --site-browser-background: #00141f;
    --site-safe-top: env(safe-area-inset-top, 0px);
    --site-safe-right: env(safe-area-inset-right, 0px);
    --site-safe-bottom: env(safe-area-inset-bottom, 0px);
    --site-safe-left: env(safe-area-inset-left, 0px);
    color-scheme: dark;
}
html, body {
    background-color: var(--site-browser-background);
    min-height: 100%;
}
body { min-height: 100vh; min-height: 100dvh; }
#appLoadingScreen { background-color: var(--site-browser-background) !important; }

@media (max-width: 1023px) {
    #root {
        padding-top: var(--site-safe-top);
        padding-right: var(--site-safe-right);
        padding-left: var(--site-safe-left);
    }
    #headerInclude header {
        left: 0;
        right: 0;
        padding-top: var(--site-safe-top);
        padding-right: calc(8px + var(--site-safe-right));
        padding-left: calc(8px + var(--site-safe-left));
        background-color: var(--site-browser-background);
    }
    #mobileInclude > div {
        padding-right: calc(24px + var(--site-safe-right));
        padding-bottom: calc(12px + var(--site-safe-bottom));
        padding-left: calc(24px + var(--site-safe-left));
        background-color: var(--site-browser-background);
    }
    #pageContainer { padding-bottom: calc(80px + var(--site-safe-bottom)); }
    #leftMenuPanel {
        bottom: calc(67px + var(--site-safe-bottom)) !important;
        height: calc(100vh - 141px - var(--site-safe-top) - var(--site-safe-bottom)) !important;
        height: calc(100dvh - 141px - var(--site-safe-top) - var(--site-safe-bottom)) !important;
    }
}
@media (max-width: 639px) {
    #leftMenuPanel { top: calc(66px + var(--site-safe-top)) !important; }
    #cookieConsent > div { bottom: calc(64px + var(--site-safe-bottom)); }
}
@media (min-width: 640px) and (max-width: 1023px) {
    #leftMenuPanel { top: calc(74px + var(--site-safe-top)) !important; }
}