:root {
    font-size: 16px;

    --loader-bg-start: hsl(219, 27%, 97.5%);
    --loader-bg-stop: hsl(219, 27%, 92.5%);
    --loader: hsla(232, 100%, 8%, 0.85);
    --loader-line: hsla(232, 100%, 8%, 0.25);
    --loader-dots: hsla(232, 100%, 25%, 0.85);
    --font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    --lumo-font-family: var(--font-family);

    --logo-w: 148px;
    --logo-h: 48px;
    --logo-bg: transparent;
    --logo-margin-l: 0.35rem;
    --logo-margin-r: 0.5rem;

    --brand: hsl(232, 100%, 8%);
    --primary: hsl(232, 100%, 8%);

    --lumo-primary-color: var(--brand, hsl(232, 100%, 8%));
    --lumo-primary-color-50pct: hsla(232, 100%, 8%, 0.5);
    --lumo-primary-color-10pct: hsla(232, 100%, 8%, 0.1);
    --lumo-primary-contrast-color: #fff;
    --lumo-primary-text-color: var(--brand, hsl(232, 100%, 8%));

    /* navbar */
    --navbar-h: 80px;
    --navbar-gradient-start: hsla(235, 24%, 19%, 1);
    --navbar-gradient-stop: hsla(232, 100%, 8%, 1);
    --navbar-image: linear-gradient(to bottom, var(--navbar-gradient-start), var(--navbar-gradient-stop));
    --navbar-bg: hsl(232, 100%, 8%) var(--navbar-image);
    /* --navbar-bg: #fff; */
    --navbar-txt: var(--lumo-tint-90pct);
    --navbar-zindex: 10;
    --navbar-shadow: var(
        --lumo-box-shadow-s,
        0 2px 4px -1px var(--lumo-shade-20pct),
        0 3px 12px -1px var(--lumo-shade-30pct)
    );
    --navbar-title-font-weight: 400;

    /* navbar login */
    --login-txt: var(--navbar-txt);
    --login-button-txt: var(--lumo-tint-80pct);
    --login-button-bg: transparent;

    /* menubar */
    --menubar-h: 64px;
    --menubar-bg: #f8f9fa;
    --menubar-txt: #707070;
    --tabs-txt: #707070;
    --tabs-hover-txt: #606060;
    --tabs-selected-txt: #505050;
    --tabs-focus-ring: var(--primary);
    --tabs-underline: var(--lumo-tint-5pct);
    --tabs-underline-selected: var(--primary);
    --tabs-underline-hover: var(--primary);
    --tab-underline-width: 100%;
    /* --tab-underline-height: 4px; */

    /* main content */
    --maincontent-bg: #fff;

    /* widgets area bg */
    --widgets-bg: #fff;

    /* main content window bg */
    --content-bg: #f8f9fa;

    /* sidebar */
    --sidebar-w: 64px;
    --sidebar-padding: 0;
    --sidebar-bg: #fff;
    --sidebar-txt: #192739e7;
    --sidebar-button-bg: transparent;
    --sidebar-button-txt: #192739e7;
    --sidebar-button-active-bg: hsla(214, 100%, 60%, 0.129);
    --sidebar-button-active-txt: var(--primary);

    /* --toolbar-button-w: 64px; */
    /* --toolbar-button-h: 64px; */
    --toolbar-bg: transparent;
    --toolbar-single-bg: transparent;
    --toolbar-collapsible-bg: transparent;
    --toolbar-tabs-item-gap: var(--lumo-space-xs, 0.25rem);

    --widget-header-h: 44px;

    --map-background: var(--lumo-contrast-5pct, #fff);

    /* --toolbar-padding: var(--lumo-space-s) var(--lumo-space-s) calc(var(--lumo-space-s) + 2px) var(--lumo-space-s); */
    /* --toolbar-padding: var(--lumo-space-s); */
    /* --toolbar-margin: 0 var(--lumo-space-s) calc(var(--lumo-space-s) + 2px) var(--lumo-space-s); */
    /* --toolbar-button-box-shadow: var(--lumo-box-shadow-s); */
    /* --map-widget-spacing: 0px; */
    /* --widget-margin: 2px; */

    --map-widget-text: var(--lumo-primary-color);
    --map-widget-border-color: transparent;
    --map-widget-border-color-hover: transparent;

    --custom-button-color: var(--primary);
    --toolbar-button-bg: var(--lumo-primary-contrast-color, #fff);
    --map-wg-coords-bg: var(--lumo-primary-contrast-color, #fff);
    --wg-map-zoom-buttons-bg: transparent;
    --wg-map-zoom-divider-color: var(--lumo-contrast-20pct);
    --wg-map-zoom-focus-outline: 2px solid var(--lumo-primary-color-50pct);
    --wg-map-zoom-focus-outline-offset: 0;
    --zoom-btn-bg: var(--lumo-primary-contrast-color, #fff);
    --gp-toolbar-padding-h: 0px;
    --gp-toolbar-padding-v: 0px;
    
    /* buttons */
    --custom-button-bg: transparent;
    --custom-button-border: 1px solid;

    /* custom button border radius */
    --toolbar-button-radius: var(--lumo-border-radius-m);
    --wg-map-zoom-btn-radius: var(--lumo-border-radius-m);
    --custom-button-border-radius: calc(var(--lumo-size-m) / 2);
    --custom-dialog-border-radius: var(--lumo-border-radius-l);

    /* text-field input, text-area, date-picker, combo-box */
    --custom-input-container-bg: #fff;
    --custom-input-container-bg-hover: #fff;
    --custom-input-container-border: 1px solid hsla(214, 53%, 23%, 0.16);
    --custom-input-container-bg-focus: #fff;
    --custom-input-container-border-focus: 1px solid hsla(214, 47%, 21%, 0.38);
    --custom-input-container-bg-disabled: hsla(0, 0%, 0%, 0.05);
    --custom-input-container-border-disabled: 1px solid hsla(214, 53%, 23%, 0.16);
    --custom-input-container-bg-invalid: hsla(0, 0%, 0%, 0.05);
    --custom-input-container-border-invalid: 1px solid var(--lumo-primary-color);
    --custom-input-container-focus-border: 0 0 0 0px hsla(214, 47%, 21%, 0.38);
}

html,
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
}

body {
    min-height: 100dvh;
    font-size: 16px;
    font-family: var(--font-family);
    /* font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; */
    line-height: 1.5;
}

#preloader,
#preloader h1,
#preloader .logo,
#preloader .preloader-dots {
    display: none;
}

#main[unresolved] #preloader,
#main[unresolved] #preloader h1,
#main[unresolved] #preloader .logo,
#main[unresolved] #preloader .preloader-dots {
    display: block;
}

#main[unresolved] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 0 1rem;

    height: 100vh;
    line-height: 68px;
    text-align: center;
    font-size: 2rem;
    font-weight: 300;
    color: var(--loader, #fff);
    background: linear-gradient(135deg, var(--loader-bg-start, #3b4252) 18%, var(--loader-bg-stop, #2e3440) 100%);

    overflow: hidden;
}

#main[unresolved] h1 {
    margin: 0 0 1em 0;
    font-weight: 300;
    font-size: 1.25em;
    line-height: 3;
}

#main[unresolved] h1 span {
    display: inline-block;
    font-weight: normal;
}

#main[unresolved] .logo {
    width: auto;
    height: 320px;
    margin: 0 auto;
    fill: var(--logo, rgba(0, 0, 0, 0.75));
}

@media (orientation: landscape) {
    #main[unresolved] h1 span {
        margin-left: 0.5em;
        padding-left: 0.5em;
        border-left: 1px solid var(--loader-line, #fff);
    }
}

@media (orientation: portrait) {
    #main[unresolved] h1 span {
        margin-top: 0.5em;
        padding-top: 0.5em;
        border-top: 1px solid var(--loader-line, #fff);
    }
}

@media (max-height: 768px) {
    #main[unresolved] {
        font-size: 2rem;
    }

    #main[unresolved] h1 {
        font-size: 2rem;
    }

    #main[unresolved] .logo {
        height: 260px;
    }
}

@media (max-width: 768px) {
    #main[unresolved] {
        font-size: 2rem;
    }

    #main[unresolved] h1 {
        font-size: 2rem;
    }

    #main[unresolved] .logo {
        height: 260px;
    }
}

.preloader-dots,
.preloader-dots:before,
.preloader-dots:after {
    border-radius: 50%;
    width: 2.5em;
    height: 2.5em;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation: pageLoader 1.8s infinite ease-in-out;
    animation: pageLoader 1.8s infinite ease-in-out;
}

.preloader-dots {
    color: var(--loader-dots, rgba(255, 255, 255, 0.75));
    font-size: 10px;
    margin: 0 auto;
    position: relative;
    text-indent: -9999em;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

.preloader-dots:before,
.preloader-dots:after {
    content: '';
    position: absolute;
    top: 0;
}

.preloader-dots:before {
    left: -3.5em;
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.preloader-dots:after {
    left: 3.5em;
}

@-webkit-keyframes pageLoader {
    0%,
    80%,
    100% {
        box-shadow: 0 2.5em 0 -1.3em;
    }

    40% {
        box-shadow: 0 2.5em 0 0;
    }
}

@keyframes pageLoader {
    0%,
    80%,
    100% {
        box-shadow: 0 2.5em 0 -1.3em;
    }

    40% {
        box-shadow: 0 2.5em 0 0;
    }
}

vaadin-dialog-overlay,
vaadin-combo-box-overlay,
vaadin-context-menu-overlay,
vaadin-date-picker-overlay {
    z-index: 10000;
}