vaadin-context-menu-overlay {
    z-index: 10000;
}

:root {
    font-size: 16px;

    --loader-bg-start: hsl(219, 27%, 97.5%);
    --loader-bg-stop: hsl(219, 27%, 92.5%);
    --loader: hsla(225, 48%, 39%, 0.85);
    --loader-line: hsla(225, 48%, 39%, 0.25);
    --loader-dots: hsla(225, 48%, 39%, 0.85);
    --loader-logo-w: 480px;
    --font-family: 'Open Sans', -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: 296px;
    --logo-h: 56px;
    --logo-bg: transparent;
    --logo-margin-l: 0.35rem;
    --logo-margin-r: 0.5rem;

    --brand: #334a92;
    --primary: #334a92;

    --lumo-primary-color: var(--brand, #334a92);
    --lumo-primary-color-50pct: hsla(225, 48%, 39%, 0.5);
    --lumo-primary-color-10pct: hsla(225, 48%, 39%, 0.1);
    --lumo-primary-contrast-color: #fff;

    /* navbar */
    --navbar-h: 80px;
    --navbar-bg: #fff;
    --navbar-txt: var(--lumo-shade-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-shade-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: #334a92;
    --tabs-underline: var(--lumo-tint-5pct);
    --tabs-underline-selected: #334a92;
    --tabs-underline-hover: #334a92;
    --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: #707070;
    --sidebar-button-bg: transparent;
    --sidebar-button-txt: #707070;
    --sidebar-button-active-bg: rgba(51, 74, 146, 0.08);
    --sidebar-button-active-txt: #334a92;

    --toolbar-button-radius: 0;
    --toolbar-bg: transparent;

    --map-widget-bg: transparent;
    --map-widget-single-bg: var(--map-widget-bg);
    --map-widget-collapsible-bg: var(--map-widget-bg);
    /* --map-widget-bg: rgba(255, 255, 255, 0.8); */

    --wg-map-zoom-bg:  rgba(255, 255, 255, 0.8);
    /* --wg-map-zoom-buttons-bg:  rgba(255, 255, 255, 0.8); */

    --widget-header-h: 44px;

    /* custom button border radius */
    --custom-button-border-radius: calc(var(--lumo-size-m) / 2);
    --toolbar-button-radius: var(--custom-button-border-radius);
    /* --toolbar-border-radius: var(--custom-button-border-radius); */
}

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

body {
    min-height: 100vh;
    font-size: 16px;
    font-family: 'Open Sans', -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 {
    height: auto;
    width: var(--loader-logo-w, 320px);
    margin: 0 auto 2rem;
    /* 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 {
        width: 260px;
    }
}

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

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

    #main[unresolved] .logo {
        width: 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;
    }
}