*,
*::before,
*::after {
    box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
    :root {
        scroll-behavior: smooth;
    }
}

html {
    -webkit-text-size-adjust: none !important;
    touch-action: manipulation !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

body {
    margin: 0;
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
    font-weight: var(--bs-body-font-weight);
    line-height: var(--bs-body-line-height);
    color: var(--bs-body-color);
    text-align: var(--bs-body-text-align);
    background-color: var(--bs-body-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    touch-action: pan-x pan-y;
    overflow-x: hidden;
    overscroll-behavior-y: none;
}

hr {
    margin: 1rem 0;
    color: inherit;
    border: 0;
    border-top: 2px solid;
    opacity: 1;
}

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.2;
}

h1, .h1 {
    font-size: calc(1.375rem + 1.5vw);
}

@media (min-width: 1200px) {
    h1, .h1 {
        font-size: 2.5rem;
    }
}

h2, .h2 {
    font-size: calc(1.325rem + 0.9vw);
}

@media (min-width: 1200px) {
    h2, .h2 {
        font-size: 2rem;
    }
}

h3, .h3 {
    font-size: calc(1.3rem + 0.6vw);
}

@media (min-width: 1200px) {
    h3, .h3 {
        font-size: 1.75rem;
    }
}

h4, .h4 {
    font-size: calc(1.275rem + 0.3vw);
}

@media (min-width: 1200px) {
    h4, .h4 {
        font-size: 1.5rem;
    }
}

h5, .h5 {
    font-size: 1.25rem;
}

h6, .h6 {
    font-size: 1rem;
}

p {
    margin-top: 0;
    margin-bottom: 1rem;
}

.container-fluid {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-right: auto;
    margin-left: auto;
}

abbr[title] {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
    cursor: help;
    -webkit-text-decoration-skip-ink: none;
    text-decoration-skip-ink: none;
}

address {
    margin-bottom: 1rem;
    font-style: normal;
    line-height: inherit;
}

ol,
ul {
    padding-left: 2rem;
}

ol,
ul,
dl {
    margin-top: 0;
    margin-bottom: 1rem;
}

    ol ol,
    ul ul,
    ol ul,
    ul ol {
        margin-bottom: 0;
    }

dt {
    font-weight: 700;
}

dd {
    margin-bottom: 0.5rem;
    margin-left: 0;
}

blockquote {
    margin: 0 0 1rem;
}

b,
strong {
    font-weight: bolder;
}

small, .small {
    font-size: 0.875em;
}

mark, .mark {
    padding: 0.1875em;
    background-color: var(--bs-highlight-bg);
}

sub,
sup {
    position: relative;
    font-size: 0.75em;
    line-height: 0;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}



pre,
code,
kbd,
samp {
    font-family: var(--bs-font-monospace);
    font-size: 1em;
}

pre {
    display: block;
    margin-top: 0;
    margin-bottom: 1rem;
    overflow: auto;
    font-size: 0.875em;
}

    pre code {
        font-size: inherit;
        color: inherit;
        word-break: normal;
    }

code {
    font-size: 0.875em;
    color: var(--bs-code-color);
    word-wrap: break-word;
}

a > code {
    color: inherit;
}

kbd {
    padding: 0.1875rem 0.375rem;
    font-size: 0.875em;
    color: var(--bs-body-bg);
    background-color: var(--bs-body-color);
    border-radius: 0.25rem;
}

    kbd kbd {
        padding: 0;
        font-size: 1em;
    }

figure {
    margin: 0 0 1rem;
}

img,
svg {
    vertical-align: middle;
}

table {
    caption-side: bottom;
    border-collapse: collapse;
}

caption {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    color: #6c757d;
    text-align: left;
}

th {
    text-align: inherit;
    text-align: -webkit-match-parent;
}

thead,
tbody,
tfoot,
tr,
td,
th {
    border-color: inherit;
    border-style: solid;
    border-width: 0;
}

label {
    display: inline-block;
}

button {
    border-radius: 0;
}

    button:focus:not(:focus-visible) {
        outline: 0;
    }

input,
button,
select,
optgroup,
textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

button,
select {
    text-transform: none;
}

[role=button] {
    cursor: pointer;
}

select {
    word-wrap: normal;
}

    select:disabled {
        opacity: 1;
    }

[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator {
    display: none !important;
}

button,
[type=button],
[type=reset],
[type=submit] {
    appearance: button;
    -webkit-appearance: button;
}

    button:not(:disabled),
    [type=button]:not(:disabled),
    [type=reset]:not(:disabled),
    [type=submit]:not(:disabled) {
        cursor: pointer;
    }

::-moz-focus-inner {
    padding: 0;
    border-style: none;
}

textarea {
    resize: vertical;
}

fieldset {
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
}

legend {
    float: left;
    width: 100%;
    padding: 0;
    margin-bottom: 0.5rem;
    font-size: calc(1.275rem + 0.3vw);
    line-height: inherit;
}

@media (min-width: 1200px) {
    legend {
        font-size: 1.5rem;
    }
}

legend + * {
    clear: left;
}

::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-minute,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-year-field {
    padding: 0;
}

::-webkit-inner-spin-button {
    height: auto;
}

[type=search] {
    outline-offset: -2px;
    -webkit-appearance: textfield;
}

::-webkit-search-decoration {
    -webkit-appearance: none;
}

::-webkit-color-swatch-wrapper {
    padding: 0;
}

::-webkit-file-upload-button {
    font: inherit;
    -webkit-appearance: button;
}

::file-selector-button {
    font: inherit;
    -webkit-appearance: button;
}

output {
    display: inline-block;
}

iframe {
    border: 0;
}

summary {
    display: list-item;
    cursor: pointer;
}

progress {
    vertical-align: baseline;
}

[hidden] {
    display: none !important;
}

.lead {
    font-size: 1.25rem;
    font-weight: 300;
}

.btn {
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.375rem;
    --bs-btn-font-size: 1rem;
    --bs-btn-font-weight: 400;
    --bs-btn-line-height: 1.5;
    --bs-btn-color: #212529;
    --bs-btn-bg: transparent;
    --bs-btn-border-width: 1px;
    --bs-btn-border-color: transparent;
    --bs-btn-border-radius: 0.375rem;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
    --bs-btn-disabled-opacity: 0.65;
    --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
    display: inline-block;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    font-family: var(--bs-btn-font-family);
    font-size: var(--bs-btn-font-size);
    font-weight: var(--bs-btn-font-weight);
    line-height: var(--bs-btn-line-height);
    color: var(--bs-btn-color);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
    border-radius: var(--bs-btn-border-radius);
    background-color: var(--bs-btn-bg);
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
    .btn {
        transition: none;
    }
}

:not(.btn-check) + .btn:hover, .btn:first-child:hover {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
}

.btn:focus-visible {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
    outline: 0;
    box-shadow: var(--bs-btn-focus-box-shadow);
}

.btn-check:focus-visible + .btn {
    border-color: var(--bs-btn-hover-border-color);
    outline: 0;
    box-shadow: var(--bs-btn-focus-box-shadow);
}

.btn-check:checked + .btn, :not(.btn-check) + .btn:active, .btn:first-child:active, .btn.active, .btn.show {
    color: var(--bs-btn-active-color);
    background-color: var(--bs-btn-active-bg);
    border-color: var(--bs-btn-active-border-color);
}

    .btn-check:checked + .btn:focus-visible, :not(.btn-check) + .btn:active:focus-visible, .btn:first-child:active:focus-visible, .btn.active:focus-visible, .btn.show:focus-visible {
        box-shadow: var(--bs-btn-focus-box-shadow);
    }

.btn:disabled, .btn.disabled, fieldset:disabled .btn {
    color: var(--bs-btn-disabled-color);
    pointer-events: none;
    background-color: var(--bs-btn-disabled-bg);
    border-color: var(--bs-btn-disabled-border-color);
    opacity: var(--bs-btn-disabled-opacity);
}

:root {
    font-size: 90%;
    --primary-margin: 3rem;
    --border-space: 26px;
    --primary-color: #0a9dff;
    --secondary-color: #fcbe3f;
    --font-color: rgba(26, 26, 55, 1);
    --bg-color: #fff;
    --heading-color: #7f7f7f;
    --saturation: 1;
    --margin: 30px;
    --procenter: 100vh;
    --slide-height: 200px;
    --bg-color-tile: rgb(249, 251, 253);
    /*    --gray: rgba(127, 127, 127, 1);
--blue: rgba(94, 196, 255, 1);
--orange: rgba(255, 129, 25, 1);
--green: rgba(90, 193, 142, 1);*/
    --top: 112px;
    --top-mobile: 71px;
    --top-alt: 30px;
    --top-mobile-alt: 10px;
    /*    --top: 112px;
--top-mobile: 71px;*/
    --bd-filter: 20px;
    /*    --border-style: solid 0px rgba(0, 0, 0, .4);*/
    --border-style: none;
    --border-style2: solid 2px rgba(0, 0, 0, .4);
    --blue: #0a9dff;
    /* --yellow: #fcbe3f; */
    --yellow: #fcbe3f;
    --yellow-lighter: rgba(255, 195, 72, .25);
    --green: #1ce3d4;
    --red: #f6777b;
    /*    --gray: #90a3ad;*/
    /*    --gray: #81929b;*/
    --gray: #738a96;
    /*    --gray-light: #D3DAE7;*/
    --gray-light: #c6cdda;
    --gray-light-7: #D3DAE7;
    --gray-light-6: color-mix(in srgb, var(--gray-light) 60%, transparent);
    --gray-light-5: color-mix(in srgb, var(--gray-light) 50%, transparent);
    --gray-light-4: color-mix(in srgb, var(--gray-light) 40%, transparent);
    --gray-light-3: color-mix(in srgb, var(--gray-light) 30%, transparent);
    --gray-light-2: color-mix(in srgb, var(--gray-light) 20%, transparent);
    --gray-dark: #7795a5;
    --gray-dark-8: color-mix(in srgb, var(--gray-dark) 80%, transparent);
    /*    --gray-light: #e1e7f2;*/
    --border-width-small: 1px;
    --border-width: 1.5px;
    --border-width-mid: 2px;
    --dark: rgba(26, 26, 55, 1);
    --dark-shadow: rgba(146, 166, 176, .3);
    --shadow: rgba(146, 166, 176, .15);
    --light-shadow: rgba(146, 166, 176, .1);
    --super-light-shadow: rgba(146, 166, 176, .05);
    --dark-shadow-increase: rgba(26, 26, 55, .4);
    --border-color: rgba(0,0,0,0);
    /*    --blue-bg: #F2F9FF;*/
    --primary-color-trans-low: color-mix(in srgb, var(--blue) 20%, transparent);
    --primary-color-trans-very-low: color-mix(in srgb, var(--blue) 5%, transparent);
    --blue-bg: #e9f1f7;
    --blue-bg-3: rgba(233, 241, 247, .3);
    --blue-bg-5: rgba(233, 241, 247, .5);
    --blue-bg-6: rgba(233, 241, 247, .6);
    --blue-soft: rgba(10, 155, 255, .8);
    --blue-trans: rgba(10, 155, 255, .5);
    --blue-supertrans: rgba(10, 155, 255, .01);
    --blue-moretrans: rgba(10, 155, 255, .05);
    --yellow-soft: rgba(255, 195, 72, .8);
    --green-soft: rgba(28, 227, 212, .8);
    --red-soft: rgba(246, 119, 123, .8);
    --gray-soft: rgba(146, 166, 176, .8);
    --gray-semitrans: rgba(146, 166, 176, .15);
    --gray-trans: rgba(146, 166, 176, .05);
    --dark-soft: rgba(146, 166, 176, .5);
    --blue-increase: rgba(10, 155, 255, 1);
    --yellow-increase: rgba(255, 195, 72, 1);
    --green-increase: rgba(28, 227, 212, 1);
    --red-increase: rgba(246, 119, 123, 1);
    --gray-increase: rgba(144, 163, 173, 1);
    --dark-increase: rgba(19, 3, 90, 1);
    --border-line: solid 1px rgba(0,0,0,.8);
    /*    --edit-color-light: rgba(5, 235, 235, .75);
    --edit-color: rgba(5, 235, 235, 1);*/
    --edit-color-lighter: rgba(28, 227, 212, .5);
    --edit-color-light: rgba(28, 227, 212, .75);
    --edit-color: rgba(28, 227, 212, 1);
    --white-up: rgba(255,255,255,.8);
    --white-down: rgba(255,255,255,.7);
    --white-up-increase: rgba(255,255,255,.8);
    --white-down-increase: rgba(255,255,255,.7);
    --popup-width: 550px;
    --panel-width: calc(100% - 30px);
    --editorjs-hover-border: unset;
    --editorjs-hover-background: unset;
    --editorjs-background: unset;
    --editorjs-outline-transition: unset;

    --list_tile_map_bar_height: 45px;
    --max-btn-width: 267px;

    --border-width-2: 1.5px;
    --border-width-1: 1px;
    --border-radius-2: 20px;
    --border-radius-1: 15px;
    --gap-1: .5rem;
    --gap-2: 1rem;
    --gap-3: 1.5rem;
}

@media screen and (max-width: 500px) {

    :root {
        font-size: 90%;
        --list_tile_map_bar_height: 63px;
    }
}

* {
    font-family: 'Ubuntu';
    color: var(--dark);
    font-size: var(--font-size);
    line-height: inherit;
    /*    padding: 0px;
    margin: 0px;*/
    /*    color: rgba(54, 60, 64, 1);*/
    /*    font-size: 15px;*/
    /*    line-height: 1.3;*/
}

a {
    color: var(--dark);
    text-decoration: underline;
    font-size: inherit;
    line-height: inherit;
}

    a:hover {
        color: var(--green);
    }

    a:not([href]):not([class]), a:not([href]):not([class]):hover {
        color: inherit;
        text-decoration: none;
    }

r {
    line-height: inherit;
    font-size: inherit;
}


.tile-logo {
    width: 100%;
    height: 100%;
    transition: all .2s ease-in-out;
    transform: scale(.7);
    object-fit: contain;
}

@media (min-width: 1000px) {

    .yellowButtonAlt:hover .tile-logo {
        transform: scale(.75);
    }
}

.yellowButtonAlt.clicked .tile-logo {
    transform: scale(.75);
}

::-webkit-resizer {
    border-width: 8px;
    border-style: solid;
    border-color: transparent rgba(146, 166, 176, .5) rgba(146, 166, 176, .5) transparent;
}

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-thumb {
    height: 6px;
    border: 2px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
    -webkit-border-radius: 3px;
    background-color: var(--gray-light-5);
}

    ::-webkit-scrollbar-thumb:hover {
        background-color: var(--blue);
        border: 1px solid rgba(0, 0, 0, 0);
    }

::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none;
}

::-webkit-scrollbar-corner {
    background-color: transparent;
}

::-webkit-scrollbar-track {
    margin: 16px;
}

/** {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}*/

/*    html, *:fullscreen, *:-webkit-full-screen, *:-moz-full-screen {
        background-color: white !important;
        z-index: 1;
    }*/

::backdrop {
    z-index: 0;
    background-color: white !important;
}

.disclaim {
    transition: all .15s ease-in-out;
    position: fixed;
    bottom: 80px;
    right: 0px;
    z-index: 1000;
    opacity: .9;
    margin: 0px 10px;
/*    right: 0rem;*/
    pointer-events: none;
    touch-action: none;
}

    .disclaim:hover {
        opacity: 1
    }

    @media (max-width: 500px) {

        .disclaim {
            opacity: 1;
            right: 0px;
            bottom: 70px;
        }


        .disclaim:hover {
            opacity: 1;
        }
    }

#CookielawBanner {
    pointer-events: all;
    touch-action: auto;
}

body {
    /*    height: 50px !important;*/
    position: fixed !important;
    overflow: hidden !important;
    margin: 0px !important;
    padding: 0px !important;
    background: white !important;
    width: 100% !important;
    height: 100% !important;
/*    width: 100vw !important;
    height: 100vh !important;*/
}

#map {
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
/*    width: 100vw !important;
    height: 100vh !important;*/
    overflow: hidden !important;
    /*    background: white;*/
}

.ol-viewport {
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
/*    width: 100vw !important;
    height: 100vh !important;*/
    overflow: hidden !important;
    /* filter: blur(.5px) !important; */
}

.mousePosition {
    position: fixed;
    right: 4px;
    bottom: 0px;
    border-radius: 10px;
    padding: 5px;
    font-family: 'Ubuntu';
    font-size: 12px;
    font-weight: bolder;
    color: var(--gray);
}

#popup-content, #extra-content {
    transition: transform .075s ease-in-out, opacity .15s ease-in-out;
    transform: scale(.98);
    opacity: 0;
}

#popup-content.popup-content-extended, #extra-content.popup-content-extended {
    transform: scale(1);
    opacity: 1;
}

.ol-popup {
    position: absolute !important;
    padding: 0px !important;
/*    background: none !important;
    background-color: transparent !important;*/
    backdrop-filter: none !important;
    margin: 0px;
    top: -20px;
    right: 70px;
    width: var(--popup-width);
    max-height: calc(100vh + 20px) !important;
    transform-origin: top !important;
    -webkit-transform-origin: top !important;
    -ms-transform-origin: top !important;
    -moz-transform-origin: top !important;
    overflow: auto !important;
    z-index: 6 !important;
    display: none;
}

.ol-popup-center {
    right: 10% !important;
    left: 10% !important;
    margin: auto !important;
    width: 800px !important;
}

/*.popup-map {
    position: absolute;
    padding: 0px;
    background: none;
    background-color: transparent;
    backdrop-filter: none;
    margin: 50px !important;*/
    /*top: unset !important;
    right: unset !important;*/
    /*max-height: 400px !important;*/
    /*    transform-origin: unset !important;*/
    /*overflow: auto !important;
    border: none;
    outline: none;*/
    /*    box-shadow: none;*/
    /*border-radius: 20px;
}

    .popup-map .ol-popup-content {*/
/*        margin: -21px;*/
        /*margin-top: -42px;*/
/*        overflow: hidden;
        -webkit-box-shadow: 0px 0px 16px rgba(0,0,0,.1);
        -moz-box-shadow: 0px 0px 16px rgba(0,0,0,.1);
        box-shadow: 0px 0px 16px rgba(0,0,0,.1);*/
    /*}*/

.single-popup {
    margin: 50px !important;
    max-height: 400px !important;
    overflow-x: hidden !important;
    -webkit-box-shadow: 0px 0px 16px rgba(0,0,0,.1) !important;
    -moz-box-shadow: 0px 0px 16px rgba(0,0,0,.1) !important;
    box-shadow: 0px 0px 16px rgba(0,0,0,.1) !important;
    border-radius: 20px !important;
}

    .single-popup .ol-popup-content {
        padding: 0px;
/*        margin: -21px;*/
        margin-top: -20px;
    }

    .single-popup .selectorTable {
        border-collapse: separate;
        border-spacing: 0px 0px;
        z-index: 2000;
        animation-name: popin;
        animation-duration: .1s;
    }

/*/* Hide scrollbar for Chrome, Safari and Opera */
.single-popup::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.single-popup {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

/*.selectorTable {
    border-collapse: separate;
    border-spacing: 20px 20px;
    z-index: 2000;
    animation-name: popin;
    animation-duration: .1s;
}

    .selectorTable .contentSelect {
        transition: all .2s ease-in-out;
        padding: 22px;*/
        /*        padding-right: 40px;*/
        /*border-radius: 20px;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        background-color: rgba(255,255,255,.8);
        -webkit-box-shadow: 0px 0px 16px rgba(0,0,0,.1);
        -moz-box-shadow: 0px 0px 16px rgba(0,0,0,.1);
        box-shadow: 0px 0px 16px rgba(0,0,0,.1);*/
        /*        pointer-events: all !important;*/
    /*}

        .selectorTable .contentSelect:hover {
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            background-color: rgba(255, 255, 255, .9);
        }*/

.closeBox {
    border: none !important;
}

@keyframes shift-right {
    0% {
        right: 20vw;
/*        left: 60vw;*/
    }
    100% {
        right: 70px;
/*        left: 80vw;*/
    }
}



/*.ol-popup {
    position: absolute !important;
    transform-origin: top !important;*/
    /*    transition: all 3s ease-in-out !important;*/
    /*min-height: 125px !important;
    max-height: calc(100vh - 60px) !important;
    min-width: 200px !important;
    max-width: 30vw !important;
    overflow: auto !important;
    margin: 0px !important;
    padding: 17px !important;
    padding-bottom: 5px !important;
    border: none !important;*/
    /*    backdrop-filter: blur(5px) !important;*/
    /*    -webkit-backdrop-filter: blur(5px) !important;*/
/*    background-color: rgba(255,255,255,.8) !important;*/
    /*background-color: none !important;*/
    /*    -webkit-box-shadow: 0px 0px 16px rgba(0,0,0,.1) !important;
    -moz-box-shadow: 0px 0px 16px rgba(0,0,0,.1) !important;
    box-shadow: 0px 0px 16px rgba(0,0,0,.1) !important;*/
    /*top: 16px;
    right: 73px;
    animation-name: popin;
    animation-duration: .1s;
    cursor: default !important;
    border-radius: 20px !important;*/
    /*    pointer-events: none !important;*/
    /*    opacity: .9 !important;*/
    /*    transform: scale(1, 1) translateY(-150px) translateX(-100px);*/
/*}*/

/*    .ol-popup:hover {
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        background-color: rgba(255, 255, 255, .9);
    }*/

@keyframes occo {
    from {
        opacity: .5;
        transform: scale(0, 0);
        -moz-transform: scale(0, 0);
        -webkit-transform: scale(0, 0);
        -ms-transform: scale(0, 0);
        /*        top: 0px;
        right: -100px;*/
    }

    to {
        opacity: 1;
        transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        /*        top: 30px;
        right: 30px;*/
    }
}

/* Hide scrollbar for Chrome, Safari and Opera */
.ol-popup::-webkit-scrollbar, .popup-map::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.ol-popup, .popup-map {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

#open-table {
    display: none;
    padding: 0px;
    margin: 0px;
    font-weight: 700;
    color: var(--dark);
}

@media (min-width: 1000px) {
    .ol-popup {
        transition: right .5s ease-in-out !important;
    }
}

@media screen and (max-width: 1300px) {
    .ol-popup {
        pointer-events: all;
    }
}



@media screen and (max-width: 1000px) {

    .ol-popup-closer-mobile {
        top: 29px !important;
        right: 23px !important;
    }

    .ol-popup {
        z-index: 1050 !important;
        margin: auto !important;
        max-width: 450px !important;
        min-width: 150px !important;
        right: 0px !important;
        left: 0px !important;
        top: 65%;
        bottom: 0px !important;
        height: 35%;
        transform-origin: bottom !important;
        -webkit-transform-origin: bottom !important;
        -ms-transform-origin: bottom !important;
        -moz-transform-origin: bottom !important;
        border-radius: 0px 0px 0px 0px !important;
        /*        background: red !important;*/
    }
}

@media screen and (max-width: 500px) {

    .ol-popup-closer-mobile {
        top: 29px !important;
        right: 23px !important;
    }

    .ol-popup {
        max-width: 100% !important;
        min-width: 150px !important;
        right: 0px !important;
        left: 0px !important;
        top: 60%;
        bottom: 0px !important;
        height: 40%;
        transform-origin: bottom !important;
        -webkit-transform-origin: bottom !important;
        -ms-transform-origin: bottom !important;
        -moz-transform-origin: bottom !important;
        border-radius: 0px 0px 0px 0px !important;
    }
}

.extra-content {
    padding-top: 50px !important;
}


a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

a:active {
    text-decoration: none;
}

/*.ol-popup {
    position: absolute;
    background-color: white;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #cccccc;
    bottom: 12px;
    left: -50px;
    min-width: 280px;
}

    .ol-popup:after, .ol-popup:before {
        top: 100%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

    .ol-popup:after {
        border-top-color: white;
        border-width: 10px;
        left: 48px;
        margin-left: -10px;
    }

    .ol-popup:before {
        border-top-color: #cccccc;
        border-width: 11px;
        left: 48px;
        margin-left: -11px;
    }*/


/*.collapse-panel-open,
.collapse-panel-close {
    margin: 0 2px;
    background-color: transparent;
    height: 4px;
    width: 4px;
}

    .collapse-panel-open:before,
    .collapse-panel-close:before {
        content: "";*/
/*        position: absolute;*/
        /*top: 50%;
        left: 0;
        margin-top: -2px;
        background: #369;
        border-radius: 20%;
    }

.collapse-panel-open:after {
    content: "";*/
/*    position: absolute;*/
    /*left: 50%;
    top: 0;
    margin-left: -2px;
    background: #369;
    border-radius: 20%;
}*/

.emptyattQueryDiv {
    display: none;
    width: 230px;
    height: 35px;
}

.collapse-panel {
    pointer-events: all !important;
    transition: all .2s ease-in-out;
    text-decoration: none;
    position: absolute;
    color: rgba(146, 166, 176, .5) !important;
    z-index: 3000 !important;
    animation-name: popin;
    animation-duration: .1s;
    top: 15px;
    right: 40px;
    font-weight: 700;
    font-size: 17px;
    vertical-align: middle;
    content: "";
    /*    position: absolute;*/
    /*    top: 50%;
    left: 0;*/
    /* height: 2px;
    width: 10px;
    background: rgba(146, 166, 176, .5); */
/*    border-radius: 20%;*/
    /*    display: none;*/
}

/*    .collapse-panel:after {
        content: "\2576";
    }*/

    .collapse-panel:hover {
        color: var(--blue) !important;
    }

    .collapse-panel.clicked:hover {
        color: var(--blue) !important;
    }

.cesium-credit-expand-link {
    display: none !important;
}

.ol-popup-closer {
    pointer-events: all !important;
    transition: all .2s ease-in-out;
    text-decoration: none;
    position: absolute;
    color: var(--gray-light) !important;
    z-index: 2 !important;
    /*    animation-name: popin;
    animation-duration: .1s;*/
    top: 3px;
    right: 9px;
    /*    background: red;*/
    width: 20px;
    font-size: 30px;
    font-weight: 400;
    /*    display: none;*/
}

    .ol-popup-closer:after {
        content: "×";
    }

    .ol-popup-closer:hover {
        color: var(--red) !important;
        font-weight: 400 !important;
    }

.ol-popup-closer-color {
    pointer-events: all !important;
    transition: all .1s ease-in-out;
    text-decoration: none;
    position: fixed;
    color: var(--gray-light) !important;
    z-index: 2 !important;
    /*    animation-name: popin;
    animation-duration: .1s;*/
    top: 17px !important;
    right: 83px !important;
/*    background: white;*/
    border-radius: 50%;
    width: 22px;
    height: 22px;
    padding-top: 3.5px;
    padding-left: 2px;
    line-height: 10px;
    font-size: 27px;
    display: none;
/*    transform: scale(.6);*/
    border: solid var(--border-width) transparent;
    /*    display: none;*/
}

    .ol-popup-closer-color:after {
        content: "×";
    }

    .ol-popup-closer-color:hover {
        color: var(--red) !important;
/*        font-weight: bold !important;*/
    }

.ol-popup-infoer {
    pointer-events: all !important;
    transition: all .2s ease-in-out;
    text-decoration: none;
    /*    position: absolute;*/
    color: rgba(146, 166, 176, .5) !important;
    z-index: 2 !important;
    /*    animation-name: popin;
    animation-duration: .1s;*/
    /*    bottom: 40px;*/
    /*    left: 50px;*/
    /*    background: red;*/
    /*    width: 20px;*/
    font-size: 15px;
    margin-left: 5px;
    vertical-align: bottom;
    line-height: 0;
    /*    transform: translateY(-12px);*/
    /*    display: none;*/
}

    .ol-popup-infoer:hover {
        color: var(--green) !important;
    }

.ol-popup-infoer-clicked {
    color: rgba(146, 166, 176, .5) !important;
}

    .ol-popup-infoer-clicked:hover {
        color: rgba(146, 166, 176, .6) !important;
    }

.helpLayerPanel {
    color: rgba(146, 166, 176, .5);
    display: none;
}

.topper {
    margin-top: 2px;
}

.myButton {
    transition: all .2s ease-in-out;
    color: var(--blue);
    text-align: center;
    height: 50px;
    width: 50px;
    border-radius: 20%;
    -webkit-border-radius: 20%;
    border: solid var(--border-width-small) var(--gray-light-7);
    margin-bottom: 10px;
    padding: 0px;
    padding-top: 10px;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    background: rgba(255,255,255,.95);
    -webkit-box-shadow: 0px 0px 4px var(--light-shadow);
    -moz-box-shadow: 0px 0px 4px var(--light-shadow);
    box-shadow: 0px 0px 4px var(--light-shadow);
}

    .myButton:hover {
        background: var(--blue);
        transition: all .05s ease-in-out;
        color: white;
        cursor: pointer;
        border: solid var(--border-width-small) var(--blue);
    }

    .myButton:focus {
        outline: none;
        box-shadow: none;
    }

    .myButton.clicked {
        background: var(--blue);
        border: solid var(--border-width-small) var(--blue);
        color: white;
        box-shadow: unset;
    }

        .myButton.clicked:hover {
            background: var(--blue);
        }

.yellowButton {
    color: var(--yellow);
}

    .yellowButton:hover {
        color: white;
        background: var(--yellow);
        border-color: var(--yellow);
    }

    .yellowButton.clicked {
        color: white;
        background: var(--yellow);
        border-color: var(--yellow);
    }

        .yellowButton.clicked:hover {
            background: var(--yellow);
        }

.yellowButtonAlt {
    color: var(--yellow);
}

    .yellowButtonAlt:hover {
        color: white;
        background: rgba(255,255,255,.95);
        border-color: var(--blue);
    }

    .yellowButtonAlt.clicked {
        color: white;
        background: rgba(255,255,255,.95);
        border-color: var(--blue);
    }

        .yellowButtonAlt.clicked:hover {
            background: rgba(255,255,255,.95);
        }

.redButton {
    color: var(--red);
}

    .redButton:hover {
        color: white;
        background: var(--red);
        border-color: var(--red);
    }

    .redButton.clicked {
        color: white;
        background: var(--red);
        border-color: var(--red);
    }

        .redButton.clicked:hover {
            background: var(--red);
        }

.saveButton {
    transition: all .2s ease-in-out;
    background: rgba(26,26,55,.2);
    color: white;
    font-weight: 700;
    text-align: center;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    border: none;
    margin-left: 6px;
    margin-bottom: 3px;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

    .saveButton:hover {
        background: var(--yellow);
        transition: all .05s ease-in-out;
        transform: scale(.95);
        -webkit-transform: scale(.95);
        -moz-transform: scale(.95);
        -ms-transform: scale(.95);
    }

    .saveButton:focus {
        outline: none;
        box-shadow: none;
    }

    .saveButton.clicked {
        background: var(--yellow);
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
    }

.deletevertex {
    background: var(--red) !important;
}

#filter-knoppen {
    display: none;
}

.postedit.clicked {
    background: rgba(255, 255, 255, 1);
    border-color: var(--secondary-color);
    color: var(--secondary-color);
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    animation: blinker2 1s linear infinite;
}

    .postedit.clicked:hover {
        background: var(--blue) !important;
        border-color: var(--blue) !important;
        color: white;
        /*        transform: scale(.95);
        -webkit-transform: scale(.95);
        -moz-transform: scale(.95);
        -ms-transform: scale(.95);*/
        animation: unset;
    }

.postedit-green.clicked {
    background: var(--edit-color-light);
    border-color: var(--edit-color-light);
    color: white;
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    animation: blinker2 .5s linear infinite;
}

    .postedit-green.clicked:hover {
        background: var(--edit-color) !important;
        border-color: var(--edit-color) !important;
        color: white;
        transform: scale(.95);
        -webkit-transform: scale(.95);
        -moz-transform: scale(.95);
        -ms-transform: scale(.95);
    }

.postedit-blue {
/*    background: var(--blue-bg);*/
    border-color: var(--blue);
/*    color: var(--blue);*/
    animation: blinker-blue2 1s linear infinite;
}

.postedit-blue:hover {
    background: var(--blue) !important;
    border-color: var(--blue) !important;
    color: white !important;
}

@keyframes blinker-blue2 {
    50% {
/*        background: var(--blue-bg);*/
/*        color: var(--blue);*/
        border-color: var(--blue-bg);
    }
}

.tourflash-txt-blue {
    animation: blinker-txt-tour 1s linear infinite;
}

.tourflash-bg-blue {
    animation: blinker-bg-tour 1s linear infinite;
}

@keyframes blinker-bg-tour {
    50% {
        background: rgba(10, 155, 255, .08);
    }
}

@keyframes blinker-txt-tour {
    50% {
        color: rgba(10, 155, 255, 1);
    }
}

@keyframes blinker2 {
    50% {
        background: rgba(255, 255, 255, 1);
        /* color: var(--yellow); */
        border-color: white;
    }
}

.uploading-green {
    color: var(--edit-color);
    opacity: 1;
    display: inline-block !important;
    animation: blinker3 .5s linear infinite;
}

@keyframes blinker3 {
    50% {
        opacity: 0;
    }
}

.screengrab-green {
    -webkit-box-shadow: inset 10px 10px 0px var(--edit-color), inset -10px -10px 0px var(--edit-color);
    -moz-box-shadow: inset 10px 10px 0px var(--edit-color), inset -10px -10px 0px var(--edit-color);
    box-shadow: inset 10px 10px 0px var(--edit-color), inset -10px -10px 0px var(--edit-color);
    background: var(--edit-color-lighter);
    /*    opacity: .2;*/
    animation: blinker4 .5s linear infinite;
}

@keyframes blinker4 {
    50% {
        background: none;
    }
}

/*#addFeatureButton2 {
    animation: blinker3 1s linear infinite;
}

    #addFeatureButton2:hover {
        background-color: rgba(19, 3, 90, .9);
        animation: none;
    }

    #addFeatureButton2.clicked {
        background-color: rgba(19, 3, 90, .9);
        animation: none;
    }

@keyframes blinker3 {
    50% {
        background-color: rgba(19, 3, 90, .9);
    }
}*/

.toolbarDiv {
    position: absolute;
    display: block;
    top: 20px;
    left: 20px;
    z-index: 1;
    /*    background: red;*/
    height: calc(100vh - 150px);
    overflow: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    pointer-events: none !important;
    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 2%, rgba(0, 0, 0, 1) 7%, rgba(0, 0, 0, 1) 100%);
    /*    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 13%, rgba(0, 0, 0, 1) 87%, rgba(0, 0, 0, 0) 100%);*/
}

    .toolbarDiv::-webkit-scrollbar {
        display: none;
    }

.toolbarDiv-3d {
    position: absolute;
    display: none;
    top: 15px;
    left: 20px;
    z-index: 9999;
}

.top-icons-3d {
    font-size: 2rem !important;
}

.name-in-button {
    font-size: 1.4rem !important;
    line-height: 26px !important;
}

@media screen and (max-width: 500px) {

    .top-icons-3d {
        font-size: 30px !important;
    }

    .name-in-button {
        font-size: 1.2rem !important;
    }

    .topper {
        margin-top: 3px;
    }

    .myButton {
        height: 40px;
        width: 40px;
        padding-top: 6px;
    }

    .toolbarDiv {
        position: absolute;
        display: block;
        top: 10px;
        left: 10px;
        height: calc(100vh - 105px);
    }
}

@media screen and (max-width: 1200px) {
    .myButton:hover {
        background: rgba(255,255,255,.95);
        color: var(--blue);
        border-color: var(--gray-light);
    }

    .myButton.clicked:hover {
        background: var(--blue);
        color: white;
        border-color: var(--blue);
    }

    .yellowButton:hover {
        background: rgba(255,255,255,.95);
        color: var(--yellow);
        border-color: var(--gray-light);
    }

    .yellowButton.clicked:hover {
        background: var(--yellow);
        color: white;
        border-color: var(--yellow);
    }

    .yellowButtonAlt:hover {
        background: rgba(255,255,255,.95);
        color: var(--yellow);
        border-color: var(--gray-light);
    }

    .yellowButtonAlt.clicked:hover {
        background: rgba(255,255,255,.95);
        color: white;
        border-color: var(--blue);
    }

    .myButton2 {
        height: 40px;
        width: 40px;
        padding-top: 7px;
        border: none;
        border-radius: 50% !important;
    }

        .myButton2:hover {
            /*            background-color: var(--dark);
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            -ms-transform: scale(1);*/
            border: none;
            padding-top: 7px;
            background: linear-gradient(145deg, rgba(26,26,55,.7), rgba(26,26,55,.5));
        }
}
.deleteButton {
    background: rgba(246, 119, 123, .75);
    border-color: white;
    color: white;
}

    .deleteButton:hover {
        background: rgba(246, 119, 123, 1);
        border-color: rgba(246, 119, 123, 1);
        color: white;
    }

.cancelButton {
    background: rgba(146, 166, 176, .75);
    color: white;
    border-color: white;
}

    .cancelButton:hover {
        background: var(--gray);
        border-color: var(--gray);
    }

.greenButton:hover {
    background: var(--green);
}

.editButton {
    background: var(--edit-color-light);
}

    .editButton:hover {
        background: var(--edit-color);
    }

.editButton-alt {
/*    background: var(--blue);*/
}

    .editButton-alt:hover {
/*        background: var(--edit-color-light);*/
    }

/*    .editButton-alt.clicked {
        background-color: rgba(21, 153, 54, 1);
    }*/

    .editButton-alt.clicked:hover {
        background: var(--edit-color);
    }


/*.otherButton {
    background-color: rgba(10, 155, 255, .4);
}*/

/*.otherButton:hover {
    background: rgba(10, 155, 255, 1);
}

.otherButton.clicked {
    background: rgba(10, 155, 255, 1);
}

.otherButton.clicked:hover {
    background: rgba(10, 155, 255, 1);
}*/


/*.otherButton-alt {
    background-color: rgba(10, 155, 255, .4);
}*/

.otherButton-alt:hover {
    background: rgba(10, 155, 255, 1);
}

.otherButton-alt.clicked {
    background: rgba(10, 155, 255, 1);
}

    .otherButton-alt.clicked:hover {
        background: rgba(10, 155, 255, 1);
    }

/* .homeButtonDiv{
  position: relative;
  display: block;
  margin: 10px auto auto 10px;
} */



.homeButtonDiv {
    /* position: absolute; */
    display: block;
    /* margin: 10px auto auto 10px; */
    /* top: 10px;
  left: 10px; */
}

.fsButtonDiv {
    /* position: absolute; */
    display: block;
    /* margin: 1px auto auto 10px; */
}

.featureInfoDiv {
    position: relative;
    display: block;
    margin: 1px auto auto 10px;
}

.lengthButtonDiv {
    position: relative;
    display: block;
    margin: 1px auto auto 10px;
}

.areaButtonDiv {
    position: relative;
    display: block;
    margin: 1px auto auto 10px;
}

/* start : Measure styling */

.ol-selectable {
    pointer-events: none !important;
}

.ol-tooltip {
    position: relative;
    background: rgba(146, 166, 176, .8);
    border-radius: 20px;
    border: solid 2px;
    color: white;
    padding: 5px 10px;
    opacity: 1;
    white-space: nowrap;
    transform: scale(.9);
    -webkit-transform: scale(.9);
    -moz-transform: scale(.9);
    -ms-transform: scale(.9);
    pointer-events: none !important;
    cursor: pointer;
}

.ol-tooltip-measure {
    opacity: 1;
    font-weight: 700;
    pointer-events: none !important;
}

.ol-tooltip-static {
    /*    border-top: 6px solid transparent;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;*/
    transition: all .2s ease-in-out;
    background: rgba(10, 155, 255, .8);
    border: solid 2px;
    color: white;
    font-weight: 700;
    padding: 5px 10px;
    transform: translateY(-5px) scale(1);
    -webkit-transform: translateY(-5px) scale(1);
    -moz-transform: translateY(-5px) scale(1);
    -ms-transform: translateY(-5px) scale(1);
    pointer-events: none !important;
    /*    border: 1px solid white;*/
}

    /*.ol-tooltip-measure:before,
    .ol-tooltip-static:before {*/
/*        border-top: 6px solid transparent;
        border-right: 6px solid transparent;
        border-left: 6px solid transparent;*/
/*        content: "";
        position: absolute;
        bottom: -6px;
        margin-left: -7px;
        left: 50%;*/
    /*}*/

/*    .ol-tooltip-static:before {
        border-top-color: rgba(10, 155, 255, 1);
    }*/

/* end : Measure styling */

.ziButtonDiv {
    position: relative;
    display: block;
    margin: 1px auto auto 10px;
}

.zoButtonDiv {
    position: relative;
    display: block;
    margin: 1px auto auto 10px;
}

.myButtonDiv {
    position: relative;
    display: block;
    pointer-events: auto !important;
/*    padding: 0px !important;
    margin: 0px !important;*/
}

.ol-dragbox {
    border: 2px dashed grey;
    background-color: rgba(200, 200, 200, 0.6);
}

.toggleAttQueryDiv {
    display: block;
    position: absolute;
}

.toggleAttributeListDiv {
    display: block;
    position: absolute;
}



.panel-menu {
    position: absolute;
    text-align: center;
    border-radius: 20px;
    padding: 5px 20px;
    padding-bottom: 15px !important;
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    -webkit-box-shadow: 0px 0px 8px var(--dark-shadow);
    -moz-box-shadow: 0px 0px 8px var(--dark-shadow);
    box-shadow: 0px 0px 8px var(--dark-shadow);
    border: solid var(--border-width-small) var(--gray-light-7);
    z-index: 8;
    top: 20px;
    left: 90px;
    max-height: calc(100% - 40px);
    min-width: 260px !important;
    overflow-y: scroll;
    background: rgba(255,255,255,.95);
    overflow-x: hidden;
}

.expanded-panel-menu {
    /* width: 50vw !important; */
    max-width: calc(100vw - 516px - 95px) !important;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

@media screen and (min-width: 1400px) {
    .expanded-panel-menu {
        width: 50vw !important;
        max-width: calc(100vw) !important;
    }
}



/*    .panel-menu:hover {
        background: rgba(255,255,255,.9);
    }*/

/*/* Hide scrollbar for Chrome, Safari and Opera */
    /* .panel-menu::-webkit-scrollbar { */
/*        display: none;*/
    /* } */

.panel-menu-scroll {
    transition: all .2s ease-in-out;
    position: absolute;
    background-color: transparent;
    text-align: center;
    margin: 0px 5px;
    z-index: 1900;
    max-height: calc(100% - 0px);
}

.panel-menu-right {
/*    transition: all .3s ease-in-out;*/
    position: absolute;
    text-align: center;
    border-radius: 20px;
    padding: 5px 20px;
    padding-bottom: 0px;
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    -webkit-box-shadow: 0px 0px 8px var(--dark-shadow) !important;
    -moz-box-shadow: 0px 0px 8px var(--dark-shadow) !important;
    box-shadow: 0px 0px 8px var(--dark-shadow) !important;
    /*    border: solid 3px var(--gray);*/
    z-index: 1900;
    top: 20px;
    right: 90px;
/*    animation-name: popin;
    animation-duration: .1s;*/
    max-height: calc(100% - 20px);
    border: solid var(--border-width-small) var(--gray-light-7);
    overflow: scroll;
    /*-ms-overflow-style: none;*/ /* IE and Edge */
    /*scrollbar-width: none;*/ /* Firefox */
    /*    opacity: .9 !important;*/
    /*    overflow: scroll;*/
    /*    font-family: 'Ubuntu';
    font-size: 1em;
    line-height: 1.45;*/
    background: rgba(255,255,255,.95);
}

/*    .panel-menu-right:hover {
        background: rgba(255,255,255,.9);
    }*/

/*/* Hide scrollbar for Chrome, Safari and Opera */
/* .panel-menu-right::-webkit-scrollbar { */
/*    display: none;*/
/* } */


@keyframes popin {
    from {
        opacity: .5;
/*        transform-origin: center;*/
/*        transform: scale(.5);*/
    }

    to {
        opacity: 1;
/*        transform: scale(1);*/
    }
}

@keyframes popdown {
    from {
        transform: translateY(-5vh);
        -webkit-transform: translateY(-5vh);
        -moz-transform: translateY(-5vh);
        -ms-transform: translateY(-5vh);
        opacity: .5;
        /*        transform-origin: center;*/
        /*        transform: scale(.5);*/
    }

    to {
        transform: translateY(0vh);
        -webkit-transform: translateY(0vh);
        -moz-transform: translateY(0vh);
        -ms-transform: translateY(0vh);
        opacity: 1;
        /*        transform: scale(1);*/
    }
}



.layersDiv {
    display: none;
    max-width: 300px;
    min-width: 230px;
    padding-top: 12px;
    padding-bottom: 5px;
    
}

    .layersDiv:empty {
        display: none;
    }

@media screen and (max-width: 500px) {


    .panel-menu {
        top: 10px;
        left: 60px;
        right: 60px;
        max-height: calc(100% - 20px);
        /* width: calc(100vw - 200px) !important;
        min-width: calc(100vw - 200px) !important;
        max-width: calc(100vw - 200px) !important; */
        z-index: 8;
        /*        min-width: 300px !important;*/
    }

        /*.panel-menu:hover {*/
/*            -webkit-backdrop-filter: blur(7px);
            backdrop-filter: blur(7px);*/
            /*background: rgba(255,255,255,.85);
        }

    .panel-menu-right:hover {*/
/*        -webkit-backdrop-filter: blur(7px);
        backdrop-filter: blur(7px);*/
        /*background: rgba(255,255,255,.85);
    }*/

/*    .panel-menu-scroll {
        top: 10px;
        left: 60px;
    }*/
}

.editDiv {
    display: none;
    max-width: 300px;
    padding-top: 12px;
    padding-bottom: 5px;
}

    .editDiv:empty {
        display: none;
    }

/*.layer-switcher {
    position: initial;
    top: 0px;
    right: 0px;
}

    .layer-switcher ul {*/
/*        margin: 1em 0.4em;*/
/*        background: red;*/
        /*line-height: .9;*/
/*        padding: 10px 0px;*/
        /*margin: 10px 0px;
    }

    .layer-switcher .layer {
        margin: 15px 0px;
    }

    .layer-switcher .group button {*/
/*        background-color: rgba(0,0,0,0);*/
    /*}

    .layer-switcher .group button:focus {
        outline: none;
        border: none;
    }*/

/*.layerswitcher-opacity, .layerswitcher-opacity-label {
    display: none;
    height: 0px;
}*/
/*input[type=radio],
input[type=checkbox] {
    opacity: .6;
}*/
/*input[type="checkbox"] {*/ /* change "blue" browser chrome to yellow */
/*filter: invert(80%) hue-rotate(18deg) brightness(1.3);
    opacity: .8;
}*/
/*input[type="checkbox"] {*/ /* change "blue" browser chrome to yellow */
    /*filter: invert(0%) hue-rotate(18deg) brightness(1.4);
    opacity: .9;
}

input[type="checkbox"]:checked {*/ /* change "blue" browser chrome to yellow */
    /*filter: invert(0%) hue-rotate(18deg) brightness(1.5);
    opacity: .9;
}

input[type="radio"] {*/ /* change "blue" browser chrome to yellow */
    /*filter: invert(0%) hue-rotate(18deg) brightness(1.3);
    opacity: .9;
}

input[type="radio"]:checked {*/ /* change "blue" browser chrome to yellow */
    /*filter: invert(0%) hue-rotate(18deg) brightness(1.3);
    opacity: .9;
}*/

/*.ol-layerswitcher .panel li.ol-layer-group > .ol-layerswitcher-buttons {
    position: absolute;
    width: 100%;
    color: red !important;
    background-color: red !important;
}

.ol-layer-group > .li-content {
    left: 1.5em;
    color: red !important;
    background-color: red !important;
}

.ol-layerswitcher .expend-layers, .ol-layerswitcher .collapse-layers {
    float: right !important;
    color: red !important;
    background-color: red !important;
}*/

/*.radio label:before {
    border-radius: 8px;
}*/

/*.checkbox {
    border-radius: 50% !important;
}

.checkbox:before {
    border-radius: 50% !important;
}*/

/*input[type=radio]:checked {
    content: "\2022";
    color: #f3f3f3;
    font-size: 30px;
    text-align: center;
    line-height: 18px;
}*/

/*input[type=checkbox]:checked {
    content: "\2713";
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
    font-size: 15px;
    color: #f3f3f3;
    text-align: center;
    line-height: 15px;
}*/


/*.myinput[type="checkbox"]:before {
    position: relative;
    display: block;
    width: 11px;
    height: 11px;
    border: 1px solid #808080;
    content: "";
    background: #FFF;
}

.myinput[type="checkbox"]:after {
    position: relative;
    display: block;
    left: 2px;
    top: -11px;
    width: 7px;
    height: 7px;
    border-width: 1px;
    border-style: solid;
    border-color: #B3B3B3 #dcddde #dcddde #B3B3B3;
    content: "";
    background-image: linear-gradient(135deg, #B1B6BE 0%,#FFF 100%);
    background-repeat: no-repeat;
    background-position: center;
}*/


.attQueryDiv {
    position: absolute;
    display: none;
    max-width: 230px;
    min-width: 230px;
    padding-top: 15px;
    padding-bottom: 21px;
    z-index: 0;
}

@media screen and (max-width: 500px) {

    .layersDiv {
        max-width: calc(100% - 120px) !important;
        min-width: 230px !important;
    }

    .attQueryDiv {
        max-width: calc(100% - 120px) !important;
        min-width: calc(100% - 120px) !important;
    }
}

    .attQueryDiv input {
        width: 225px;
        height: 35px;
        border: 1px solid lightgrey;
        border-radius: 3px;
        margin: 0px auto 20px 10px;
    }

    .attQueryDiv label {
        font-weight: 700;
    }

.attQryRun {
    color: white;
    background-color: green;
    border-radius: 3px;
    border: 1px solid black;
}

.attListDiv {
    display: none;
    top: 70vh;
    right: calc(var(--popup-width) + 66px);
    width: 50vw;
    max-width: 1000px;
    bottom: 20px;
    /* left: calc(85px + 270px); */
    left: 85px;
    overflow: auto;
    overflow-y: scroll;
    padding: 0px;
    background: var(--bg-color-tile);
    /* -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px); */
    margin-top: -5px;
    border: solid var(--border-width-small) var(--gray-light-7);
    /* border-width: var(--border-width) var(--border-width) 0 var(--border-width); */
    border-radius: 20px;
    z-index: 1;
    -webkit-box-shadow: 0px 0px 8px var(--dark-shadow);
    -moz-box-shadow: 0px 0px 8px var(--dark-shadow);
    box-shadow: 0px 0px 8px var(--dark-shadow);
}

.fullscreen-table {
    /* position: fixed; */
    /* width: 100vw;
    min-width: 100vw;
    height: 100vh;
    min-height: 100vh; */
    width: unset;
    max-width: unset;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    z-index: 10 !important;
    margin: 0;
    padding: 0;
    border-radius: 0 !important;
}

.table_actions {
    transition: all .15s ease-in-out;
    font-size: 30px;
    height: 0px;
    cursor: pointer;
    margin: 0;
    margin-top: -16.5px;
    padding: 0;
    color: var(--gray);
}

#table_closer:hover {
    cursor: pointer;
    color: var(--red);
}

.table_actions:hover {
    color: var(--blue);
}

/* #table_higher:hover {
    color: var(--blue);
}

#table_lower:hover {
    color: var(--blue);
} */


.icon_text {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 3px 7px;
    cursor: pointer;
    transition: all .2s ease-in-out;
}

.icon_text:hover {
    color: var(--blue) !important;
    opacity: .8;
}

@media screen and (max-width: 1400px) {
    .attListDiv {
        left: 85px;
        z-index: 5;
        width: unset;
        max-width: unset;
    }
}

@media screen and (max-width: 1000px) {
    .attListDiv {
        left: 85px;
        right: 16px;
    }
}

@media screen and (max-width: 500px) {
    .attListDiv {
        position: page;
        display: none;
        top: 0px;
        bottom: 0px;
        right: 0px;
        left: 0px;
        max-height: 100%;
        overflow: auto;
        overflow-y: scroll;
        padding: 0px;
        padding-top: 0px;
        border-radius: 0;
        border: none;
        z-index: 10000 !important;
        background: #F9F9FB !important;
    }
}

#attQryTable td:nth-child(1) {
    display: none;
}

#attQryTable th:nth-child(1) {
    display: none;
}

#attQryTable tr:nth-child(1) {
    background: #fff;
    position: sticky;
    top: 2px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    outline: solid var(--border-width-small) #fff;
    border-radius: 3px;
    display: none;
}

/* #attQryTable tr:nth-child(even) {
    background: rgba(245,245,245,1);
} */

#attQryTable tr {
    background: none;
}

#attQryTable td {
    padding: 15px 15px !important;
    border-radius: 0px;
    vertical-align: middle;
    height: 75px !important;
    line-height: 1.5;
}

    #attQryTable td:nth-child(2) {
        border-left-style: solid;
/*        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;*/
    }

    #attQryTable td:last-child {
        border-right-style: solid;
        width: 100%;
/*        border-bottom-right-radius: 10px;
        border-top-right-radius: 10px;*/
    }

.active-row {
    /* scroll-margin: calc((35vh - 50px) * -1) !important; */
    background-color: #d7e8f5 !important;
}

#attQryTable {
    border-collapse: separate;
    border-spacing: 0px 10px;
    border: none;
    margin-top: -1px;
    margin-bottom: 0px;
    padding: 1px 0px;
    font-size: .65rem;
}

    #attQryTable th {
        font-weight: 500;
        pointer-events: none;
        background-color: white;
        vertical-align: middle;
        padding: 10px 15px;
        font-size: .75rem;
        display: none;
    }

    #attQryTable tr {
        /* outline: solid 1.5px var(--gray-light-2) !important; */
        background-color: rgba(255,255,255,.9);
        border-radius: 0px;
        transition: background-color .15s ease-in-out, border-color .15s ease-in-out;
        
    }

/*    #attQryTable tr:hover td {
        color: white !important;
    }*/

    #attQryTable tr:hover {
        background-color: var(--blue-bg);
        cursor: pointer;
        border-color: var(--blue);
    }

    .table-grid-light {
        display: grid;
        border: 0;
    }

    .table-grid-light tbody {
        display: grid; 
        grid-template-columns: repeat(auto-fit, minmax(200px, auto));
        grid-gap: 20px 20px;
        /* padding: 15px; */
        margin: 5px 0;
        margin-top: 15px;
    }

    .table-grid-light > tbody > tr {
        display: grid;
        /* justify-items: flex-start;
        justify-content: flex-start;
        align-items: flex-start; */
        align-content: flex-start;
        margin: 0;
        padding: 20px;
        padding-top: 15px;
        grid-gap: 5px;
        line-height: 0;
        border: solid var(--border-width-small) var(--gray-light-2);
        /* background-color: var(--gray-light-2); */
        border-radius: 10px;
        -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,.03);
        -moz-box-shadow: 0px 0px 8px rgba(0,0,0,.03);
        box-shadow: 0px 0px 8px rgba(0,0,0,.03);
    }

    .table-grid-light > tbody > tr > td {
        line-height: 0;
        margin: 0;
        padding: 0;
    }

    .table-grid { 
        display:grid;
        border:0;
    }
    .table-grid tbody {
        display:grid; 
        /* grid-template-columns: repeat(auto-fit, minmax(calc(50vw / 3.4), auto)); */
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-gap: 12px;
        padding: 15px;
        margin: 0;
    }
    
    .table-grid > tbody > tr:not(:first-child) {
        display:grid;
        border: solid var(--border-width-small) var(--gray-light-7);
        border-radius: 15px !important;
        -webkit-box-shadow: 0px 0px 8px var(--dark-shadow);
        -moz-box-shadow: 0px 0px 8px var(--dark-shadow);
        box-shadow: 0px 0px 8px var(--dark-shadow);
        /* transition: all .2s ease-in-out !important; */
    }

    .table-grid > tbody > tr:first-child {display:none;}
    .table-grid > tbody > tr > td:last-child {display:none;}
    .table-grid > tbody > tr > td:nth-child(2) {max-width: calc(100%) !important; width: 100% !important; padding: 0 !important; margin: 0 !important; min-height: 115px !important; }
    .table-grid > tbody > tr > td:nth-child(2) img {width: calc(100% + 31.5px) !important; margin: 0; margin-top: -16px; margin-left: -15.5px; height: 120px !important; object-fit: contain; pointer-events: none; touch-action: none; border-radius: 15px 15px 0 0 !important; border: solid 1px var(--gray-light-2); background-color: rgba(0,0,0,.01);}

    .fullscreen-table .table-grid > tbody {
        grid-gap: 18px;
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .fullscreen-table .table-grid > tbody > tr {
        padding: 5px !important;
    }
    .fullscreen-table .table-grid > tbody > tr > td:nth-child(2) {
        min-height: 180px !important;
    }
    /* .fullscreen-table .table-grid > tbody > tr > td:nth-child(2) img {
        height: 170px;
        min-height: 170px;
    } */

    .fullscreen-table .table-grid > tbody > tr > td:nth-child(2) img {width: calc(100% + 42px) !important; height: 185px !important; pointer-events: none; touch-action: none; border-radius: 15px 15px 0 0 !important; margin-left: -21px; margin-top: -21px; border: solid 1px var(--gray-light-2); background-color: rgba(0,0,0,.01);}

    .fullscreen-table .table-grid > tbody > tr > td:nth-child(3) { overflow: hidden; max-height: 6rem; font-size: 1.3rem !important;}
    .fullscreen-table .table-grid > tbody > tr > td:nth-child(4) { 
        display: flex;
        align-items: center;
        font-size: 1.1rem !important;
    }
    .fullscreen-table .table-grid > tbody > tr > td:nth-child(4) div {
        width: 100%;
    }
    .fullscreen-table .table-grid > tbody > tr > td:nth-child(4) img { 
        height: 2.1rem !important;
        min-height: 2.1rem !important;
        margin-right: .5rem !important;
    }

    .table-grid > tbody > tr > td:nth-child(3) { overflow: hidden; max-height: 55px; }
    .table-grid > tbody > tr > td:nth-child(4) { max-height: 52px !important; }
    .table-grid > tbody > tr > td:nth-child(5) { display: none; }
    .table-grid > tbody > tr > td:nth-child(6) { display: none; }
    .table-grid > tbody > tr > td:nth-child(7) { display: none; }
    .table-grid > tbody > tr > td:nth-child(8) { display: none; }
    /* .table-grid > tbody > tr > td:nth-child(8) {display: none;} */
    /* .table-grid > tbody > tr > td {border: solid 2px black} */

    /* .attListDiv {
        transition: all .5s ease-in-out;
    } */
    .hidden-attListDiv {
        height: 59px;
        /* background-color: none !important;
        background: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        touch-action: none !important;
        pointer-events: none !important;
        border: none !important; */
    }
    .hidden-attListDiv .attQryTable {
        display: none !important;
    }

    .location-table-wrapper {
        display: none;
    }

    .table-grid .location-table-wrapper {
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 10px;
        z-index: 1;
        transform: translateY(-35px);
        max-width: 125px;
    }

    .location-table {
        display: none;
    }

    .table-grid .location-table {
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: .8rem;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        background-color: rgba(255,255,255,.85);
        padding: 3px 10px;
        padding-left: 7px;
        border-radius: 20px;
        width: fit-content;
        overflow: hidden;
        max-width: 100%;
        transition: all .2s ease-in-out;
        text-overflow: ellipsis;
        white-space: nowrap; /* important to show ellipsis, or words will just be broken off */
    }

    .table-grid .location-table-smaller {
        max-width: 115px !important;
    }

    .location-table-3d {
        display: none;
    }

    .table-grid .location-table-3d {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        font-size: .8rem;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        background-color: var(--secondary-color);
        font-weight: 700;
        padding: 1px 4px;
        border-radius: 50%;
        aspect-ratio: 1;
    }

    /* .location-table:hover {
        color: white;
        background-color: var(--blue);
    } */

#list_tile_map_bar {
    position: sticky;
    top: 0px;
    border-bottom: solid 1.5px var(--gray-light-2);
    border-right: solid 1.5px var(--gray-light-2);
    /* border-bottom-right-radius: 15px; */
    background-color: rgba(255,255,255,.95);
    padding: 20px 12px;
    padding-right: 7px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
    font-weight: 500;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    pointer-events: all;
    touch-action: auto;
    z-index: 2;
}

#quick-search-bar {
    width: 30%;
    font-size: 16px;
    display: flex;
    justify-self: flex-start;
    position: relative;
}

#quick-view-switch {
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

#quick-close-view {
    width: 30%;
    display: flex;
    justify-content: flex-end;
}

.shorten-text {
    width: fit-content;
    overflow: hidden;
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap; /* important to show ellipsis, or words will just be broken off */
}

@media screen and (min-width: 1450px) {
    .table-grid tbody {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .fullscreen-table .table-grid > tbody {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }
}

@media screen and (min-width: 1920px) {
    .table-grid tbody {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .fullscreen-table .table-grid > tbody {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }
}



@media screen and (max-width: 1200px) {
    .table-grid tbody {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fullscreen-table .table-grid > tbody {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media screen and (max-width: 1100px) {
    /* .table-grid tbody {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    } */

    .fullscreen-table .table-grid > tbody {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media screen and (max-width: 1000px) {
    .table-grid tbody {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .fullscreen-table .table-grid > tbody {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media screen and (max-width: 850px) {
    .table-grid tbody {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .fullscreen-table .table-grid > tbody {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media screen and (max-width: 700px) {
    .table-grid tbody {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fullscreen-table .table-grid > tbody {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .table-grid .location-table {
        max-width: 125px;
    }

    .table-grid .location-table-smaller {
        max-width: 100px !important;
    }
}

@media screen and (max-width: 500px) {
    #list_tile_map_bar {
        overflow: hidden;
        padding: 20px 5px;
        padding-bottom: 30px;
        padding-left: 15px;
        flex-wrap: wrap;
        flex-direction: column-reverse;
        gap: 20px;
    }

    #quick-search-bar {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        margin: 0px;
        margin-bottom: 10px;
    }

    #quick-view-switch {
        width: unset;
        max-width: 150px;
        margin-top: -25px;
    }

    #quick-close-view {
        width: 100%;
    }

    .hidden-attListDiv {
        height: unset;
        /* height: 63px; */
        background-color: none !important;
        background: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        touch-action: none !important;
        pointer-events: none !important;
    }

    .table-grid {
        overflow-x: hidden;
    }

    .table-grid tbody {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-gap: 12px;
        padding: 5px;
        padding-left: 10px;
    }

    .fullscreen-table .table-grid > tbody {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .active-row {
        background-color: var(--blue-bg) !important;
    }

    .panel-menu-scroll {
        transition: all .2s ease-in-out;
        position: absolute;
        background-color: rgba(0,0,0,.1);
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
        text-align: center;
        margin: 0px 0px;
        z-index: 2;
        max-height: calc(100% - 0px);
    }

    

    #attQryTable td {
        
        font-size: .8rem;
    }

    #attQryTable td:nth-child(2) {
        border-radius: 10px 0 0 10px !important;
    }

    #attQryTable td:nth-child(3) {
        font-size: 1rem !important;
    }

    #attQryTable td:last-child {
        border-radius: 0 10px 10px 0 !important;
    }

    /*#attQryTable {*/
        /*    padding: 0;*/
        /*border-collapse: separate;
        border-spacing: 0px 10px;*/
        /*    border-collapse: collapse;*/
        /*border: none;
        margin-top: -20px;
        margin-bottom: 0px;
        padding: 10px;*/
        /*    padding: 15px !important;*/
        /*    table-layout: fixed;
    width: 100%;*/
        /*    overflow-x: auto;*/
    /*}*/

/*    #attQryTable tr {
        border-radius: 0px !important;
    }*/

    #attQryTable {
        padding: 3px;
        border-spacing: 0px 3px;
    }

    #attQryTable th {
        background-color: #fff;
        color: white;
    }

    #attQryTable tr {
        -webkit-box-shadow: 0px 0px 8px var(--dark-shadow);
        -moz-box-shadow: 0px 0px 8px var(--dark-shadow);
        box-shadow: 0px 0px 8px var(--dark-shadow);
        background-color: white;
    }

    #attQryTable tr:hover td {
        color: unset !important;
    }

    #attQryTable tr:hover {
        background-color: white;
    }
}

@media screen and (max-width: 350px) {
    .table-grid tbody {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .fullscreen-table .table-grid > tbody {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

#headerDiv {
    background-color: rgba(19, 3, 90, .5);
    /*    height: 35px;*/
    /*    margin: 0px 0px 10px 0px;*/
    width: 100%;
    border-radius: 20px;
}

    #headerDiv label {
        color: white;
/*        margin: 10px;*/
/*        font-weight: bold;*/
    }

.spQueryDiv {
    position: absolute;
    display: none;
    top: 10px;
    left: 80px;
    /* margin: 65px auto auto 45px; */
    width: 250px;
    /* height: 250px; */
    background-color: rgba(255, 255, 255, 0.9);
    font-family: 'Ubuntu';
/*    font-size: 1em;*/
    line-height: 1.45;
    border-radius: 2px;
    border: 1px solid #d1d1d1;
    box-shadow: 0px 0px 15px rgba(100, 100, 100, 0.5);
    /* z-index: 4; */
    /* overflow: scroll; */
}

    .spQueryDiv select {
        width: 225px;
        height: 35px;
        border: 1px solid lightgrey;
        border-radius: 3px;
        margin: 0px auto 20px 10px;
    }

    .spQueryDiv input {
        width: 225px;
        height: 35px;
        border: 1px solid lightgrey;
        border-radius: 3px;
        margin: 0px auto 20px 10px;
    }

    .spQueryDiv label {
        color: grey;
        margin: 10px 10px 0px 10px;
    }

/* .attQueryDiv label:nth-child(1) {
    margin: 10px;
    font-weight: bold;
   } */

.spQryRun {
    color: white;
    background-color: green;
    border-radius: 3px;
    border: 1px solid black;
    height: 35px;
    width: 50px;
    margin: 10px 22px 10px 22px;
}

.spQryClear {
    /* position: absolute; */
    color: white;
    background-color: slategrey;
    border-radius: 3px;
    border: 1px solid black;
    height: 35px;
    width: 50px;
    margin: 10px;
}

.attQryClear {
    color: white;
    background-color: slategrey;
    border-radius: 3px;
    border: 1px solid black;
/*    height: 35px;
    width: 50px;*/
    margin: 0px 20px !important;
}

.spUserInput {
    color: white;
    background-color: rgb(95, 125, 207);
    border-radius: 3px;
    border: 1px solid rgb(0, 0, 0);
    height: 35px;
    width: 50px;
    margin: 10px;
}

#bufferDistance {
    width: 100px;
}

#distanceUnits {
    width: 100px;
    margin: 0px auto 0px 20px;
}

.spUserInput.clicked {
    background-color: rgb(230, 107, 107);
}

.ol-scale-bar {
    font-family: 'Ubuntu';
/*    font-size: 8px;*/
}

.ol-scale-text {
/*    font-size: 12px;*/
}

.settingsDiv {
    position: absolute;
    display: none;
    max-width: 230px;
    min-width: 230px;
}

    .settingsDiv select {
        width: 225px;
        height: 35px;
        border: 1px solid lightgrey;
        border-radius: 3px;
        margin: 0px auto 20px 10px;
    }

    .settingsDiv label {
        color: grey;
        margin: 10px 10px 0px 10px;
    }

.editingControlsDiv {
    position: absolute;
    display: none;
    top: 20px;
    right: 20px;
}

.editingControlsDivGlobal {
    position: absolute;
    display: none;
    top: 292px;
    left: 10px;
}

.editingControlsDivSolo {
    position: absolute;
    display: none;
    top: 20px;
    right: 20px;
}

.editingControlsDiv3D {
    position: absolute;
    display: block;
    top: 20px;
    right: 20px;
}

@media screen and (max-width: 500px) {
    .settingsDiv {
        max-width: calc(100% - 120px) !important;
        min-width: 230px !important;
    }

    .editingControlsDiv {
        top: 10px;
        right: 10px;
    }

    .editingControlsDivSolo {
        top: 10px;
        right: 10px;
    }

    .editingControlsDiv3D {
        top: 10px;
        right: 10px;
    }
}

div#addFeatureButtonDiv.myButtonDiv {
    padding-top: 0px;
}

i {
    color: inherit;
}

.myImg {
    width: 26px;
    height: 26px;
    filter: invert(58%) sepia(59%) saturate(5283%) hue-rotate(182deg) brightness(99%) contrast(105%);
}

.myButton:hover .myImg {
    transition: all .05s ease-in-out;
    text-align: center;
    filter: brightness(0) invert(1);
}

.myButton.clicked .myImg {
    filter: brightness(0) invert(1);
}


.inner-icon {
    transition: all .05s ease-in-out;
    -webkit-transition: all .05s ease-in-out;
    vertical-align: middle;
    line-height: 26px;
    font-size: 26px;
    color: inherit;
}


.edit-icon {
    position: absolute;
    top: -5px;
    right: -5px;
    font-size: 17px;
    background: var(--green);
    border-radius: 50%;
    line-height: 0px;
    color: white;
}

/*.myButton:hover .inner-icon {
    line-height: 27px;
    font-size: 27px;
}*/

.inner-icon-smaller {
    transition: all .05s ease-in-out;
    vertical-align: middle;
    line-height: 26px;
    font-size: 28px;
    color: inherit;
}

/*.myButton:hover .inner-icon-smaller {
    line-height: 29px;
    font-size: 29px;
}*/

.inner-icon-tiny {
    transition: all .05s ease-in-out;
    vertical-align: middle;
    line-height: 26px;
    font-size: 26px;
    color: inherit;
}

/*.myButton:hover .inner-icon-tiny {
    line-height: 27px;
    font-size: 27px;
}*/

@media screen and (max-width: 1100px) {
    .ol-popup-closer-color {
        top: 40px !important;
        right: 33px !important;
    }
}

@media screen and (max-width: 500px) {

    

    .inner-icon {
        line-height: 26px;
        font-size: 26px;
    }

/*    .myButton:hover .inner-icon {
        line-height: 26px;
        font-size: 26px;
    }*/

    .inner-icon-smaller {
        line-height: 26.5px;
        font-size: 25px;
    }

/*    .myButton:hover .inner-icon-smaller {
        line-height: 27px;
        font-size: 25px;
    }*/

    .inner-icon-tiny {
        line-height: 26px;
        font-size: 22px;
    }

/*    .myButton:hover .inner-icon-tiny {
        line-height: 26px;
        font-size: 22px;
    }*/

    .myImg {
        margin-top: 2px;
        margin-left: 2px;
        width: 22px;
        height: 22px;
    }
}

.myButton .tooltiptext {
    visibility: visible;
    width: 120px;
    background-color: #000;
    color: #fff;
    text-align: center;
    border-radius: 9px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    /* bottom: 125%; */
    left: 125%;
    /* margin-left: -60px; */
    opacity: 0;
    transition: opacity 0.3s;
    /* font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */
    font-style: normal;
}

    .myButton .tooltiptext::after {
        content: '';
        position: absolute;
        top: 50%;
        right: 100%;
        margin-top: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent #000 transparent transparent;
    }

.myButton:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/*** start : CSS for search bar ***/

/* html,body{height:100%;margin:0;}body{background:#913D88;font:13px monospace;color:#FFFFFF}p{margin-top:30px}.cntr{display:table;width:100%;height:100%;.cntr-innr{display:table-cell;text-align:center;vertical-align:middle}} */

/*** STYLES ***/
/*** STYLES ***/
.search {
    display: inline-block;
    position: absolute;
    top: 10px;
    left: 100%;
    height: 30px;
    width: 30px;
    box-sizing: border-box;
    /* margin: 0px 8px 7px 0px; */
    margin-left: -35px;
    padding: 7px 9px 0px 9px;
    border: 3px solid rgba(60, 116, 189, 0.3);
    background-color: rgba(155, 192, 241, 0.3);
    border-radius: 25px;
    transition: all 200ms ease;
    cursor: text;
}

    .search:after {
        content: "";
        position: absolute;
        width: 3px;
        height: 20px;
        right: -5px;
        top: 21px;
        background: #FFFFFF;
        border-radius: 3px;
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transition: all 200ms ease;
    }

    .search.active,
    .search:hover {
        width: 300px;
        margin-right: 0px;
        margin-left: -305px;
        background-color: rgba(155, 192, 241, 0.7);
    }

    .search:after {
        height: 0px;
    }

#inpt_search {
    position: absolute;
    top: 3px;
    width: 100%;
    border: none;
    box-sizing: border-box;
    font-family: Helvetica;
/*    font-size: 15px;*/
    color: inherit;
    background: transparent;
    outline-width: 0px;
}
/*** start : CSS for search bar ***/

.liveDataDiv {
    position: fixed;
    left: 100%;
    top: 45px;
    margin-left: -305px;
    width: 300px;
    background-color: rgba(155, 192, 241, 0.7);
    font-family: 'Ubuntu';
/*    font-size: 1em;*/
    line-height: 1.45;
    border-radius: 5px;
    border: 3px solid rgba(60, 116, 189, 0.4);
    box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.07);
}

    .liveDataDiv:empty {
        display: none;
    }

/* #assetSearchTableID {
  background-color: rgba(245, 245, 245, 0.6);
} */

#assetSearchTableID td th {
    padding-left: 5px;
}

#assetSearchTableID th {
    color: black;
}

    /* #assetSearchTableID tr:hover { font-weight: bolder; background-color: rgb(225, 225, 225); } */
    /* #assetSearchTableID tr:hover { font-weight: bolder; background-color: rgb(225, 225, 225); } */

    #assetSearchTableID th:nth-child(1),
    #assetSearchTableID td:nth-child(1) {
        width: 75px;
    }

    #assetSearchTableID th:nth-child(2),
    #assetSearchTableID td:nth-child(2) {
        width: auto;
    }

        #assetSearchTableID td:nth-child(2):hover
        /* {font-weight: bolder; background-color: rgb(225, 225, 225);} */ {
            font-weight: bolder;
            color: red;
        }

#assetSearchTableID, td, th {
    /* padding: 0px 5px 0px 5px; */
    border: 0px;
}

#assetSearchTableID, tr {
    text-align: left;
    vertical-align: top;
}

/*** start : CSS for search bar ***/

/*#btnCrosshair {
    z-index: 3;
    position: absolute;
    background-color: rgba(255,255,255,.95);
    width: 50px;
    height: 50px;
    left: 20px;
    bottom: 80px;
    border-radius: 20%;
    -webkit-border-radius: 20%;
    border: solid var(--border-width) var(--gray-light);
    -webkit-box-shadow: 0px 0px 4px var(--light-shadow);
    -moz-box-shadow: 0px 0px 4px var(--light-shadow);
    box-shadow: 0px 0px 4px var(--light-shadow);
    color: var(--blue);
    font-size: 28px;
}

    #btnCrosshair.clicked {
        color: white;
        background: var(--blue);
        border-color: var(--blue);
    }

    #btnCrosshair:hover {
        color: white;
        background: var(--blue);
        border-color: var(--blue);
    }*/

/*    #btnCrosshair.clicked:hover {
        
    }*/

    /*#btnCrosshair:focus {
        outline: none;
        box-shadow: none;
    }*/

.maptool {
    /*    transition: all .01s ease-in-out !important;*/
    /*    margin-left: 72px;
    margin-right: 72px;*/
    pointer-events: none;
    background: rgba(255, 255, 255, .8) !important;
    text-align: center !important;
    font-weight: bold !important;
    border-radius: 15px !important;
    padding: 7px 15px !important;
    box-shadow: 0px 0px 16px rgba(0,0,0,.1) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    backdrop-filter: blur(5px) !important;
    border: solid var(--border-width-small) var(--gray-light-7) !important;
    z-index: 9999 !important;
    padding: 10px 20px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
}

@media screen and (max-width: 1200px) {
    .maptool {
        display: none !important;
    }
}

#tooltip {
    text-align: center;
    color: var(--dark);
    /*    background: rgba(26,26,55,.9);*/
    background: rgba(255,255,255,.95);
    position: absolute;
    z-index: 10002;
    padding: 15px 20px;
    border-radius: 15px;
    -webkit-backdrop-filter: blur(5px) !important;
    backdrop-filter: blur(5px) !important;
    max-width: 200px;
    border: solid var(--border-width) var(--gray-light-5);
    line-height: 1.5rem;
    -webkit-box-shadow: 0px 0px 16px var(--shadow) !important;
    -moz-box-shadow: 0px 0px 16px var(--shadow) !important;
    box-shadow: 0px 0px 16px var(--shadow) !important;
    pointer-events: none;
    touch-action: none;
}

    #tooltip:after /* triangle decoration */ {
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid rgba(26,26,55,.9);
        content: '';
        position: absolute;
        left: 50%;
        bottom: -10px;
        margin-left: -10px;
        display: none;
    }

    #tooltip.top:after {
        border-top-color: transparent;
        border-bottom: 10px solid rgba(26,26,55,.9);
        top: -20px;
        bottom: auto;
        display: none;
    }

    #tooltip.left:after {
        left: 10px;
        margin: 0;
        display: none;
    }

    #tooltip.right:after {
        right: 10px;
        left: auto;
        margin: 0;
        display: none;
    }


#confirm-box {
    display: none;
    text-align: center;
    color: #fff;
    background: rgba(255,255,255,.9);
    position: absolute;
    z-index: 10002;
    padding: 15px 20px;
    border-radius: 20px;
    -webkit-backdrop-filter: blur(5px) !important;
    backdrop-filter: blur(5px) !important;
    max-width: 200px !important;
    /* min-width: 200px; */
    border: solid 1.5px var(--gray-light);
    line-height: 1.5rem;
    -webkit-box-shadow: 0px 0px 4px var(--dark-shadow);
    -moz-box-shadow: 0px 0px 4px var(--dark-shadow);
    box-shadow: 0px 0px 4px var(--dark-shadow);
}

    #confirm-box:after /* triangle decoration */ {
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid rgba(26,26,55,.9);
        content: '';
        position: absolute;
        left: 50%;
        bottom: -10px;
        margin-left: -10px;
        display: none;
    }

    #confirm-box.top:after {
        border-top-color: transparent;
        border-bottom: 10px solid rgba(26,26,55,.9);
        top: -20px;
        bottom: auto;
        display: none;
    }

    #confirm-box.left:after {
        left: 10px;
        margin: 0;
        display: none;
    }

    #confirm-box.right:after {
        right: 10px;
        left: auto;
        margin: 0;
        display: none;
    }

    #confirm-box.center {
        /*        width: 100vw;
        height: 100vh;*/
        max-width: 100vw !important;
        background: red !important;
        /*        right: 0;
        left: 0;
        top: 0;
        bottom: 0;
        text-align: center;
        vertical-align: middle;*/
        margin: auto !important;
        display: none !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        width: 0 !important;
        height: 0 !important;
        transform: translate(-50%, -50%) !important;
        -webkit-transform: translate(-50%, -50%) !important;
    }

    #confirm-box #confirm-true {
        background: var(--blue);
        color: white;
        padding: 5px 10px;
        border-radius: 10px;
        min-width: 60px;
        opacity: .8;
        margin-top: 5px;
/*        font-weight: 500 !important;*/
    }

    #confirm-box #confirm-false {
        background: none;
        color: var(--gray-light) !important;
        padding: 5px 10px;
        min-width: 60px;
        font-weight: 500 !important;
        margin-top: 5px;
    }

    #confirm-box #confirm-true:hover {
        transform: scale(1.06);
        opacity: 1;
    }

    #confirm-box #confirm-false:hover {
/*        transform: scale(1.1);*/
        color: var(--gray) !important;
    }

#dropdown-box {
    display: none;
    text-align: center;
    color: #fff;
    background: rgba(255,255,255,.9);
    position: absolute;
    z-index: 10002;
    padding: 25px 30px;
    border-radius: 20px;
    -webkit-backdrop-filter: blur(5px) !important;
    backdrop-filter: blur(5px) !important;
    max-width: 220px !important;
    /* min-width: 200px; */
    border: solid var(--border-width-small) var(--gray-light-7);
    line-height: 1.5rem;
    -webkit-box-shadow: 0px 0px 4px var(--dark-shadow);
    -moz-box-shadow: 0px 0px 4px var(--dark-shadow);
    box-shadow: 0px 0px 4px var(--dark-shadow);
}

#dropdown-box span {
    width: 100%;
}

    #dropdown-box:after /* triangle decoration */ {
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid rgba(26,26,55,.9);
        content: '';
        position: absolute;
        left: 50%;
        bottom: -10px;
        margin-left: -10px;
        display: none;
    }

    #dropdown-box.top:after {
        border-top-color: transparent;
        border-bottom: 10px solid rgba(26,26,55,.9);
        top: -20px;
        bottom: auto;
        display: none;
    }

    #dropdown-box.left:after {
        left: 10px;
        margin: 0;
        display: none;
    }

    #dropdown-box.right:after {
        right: 10px;
        left: auto;
        margin: 0;
        display: none;
    }

    #dropdown-box.center {
        /*        width: 100vw;
        height: 100vh;*/
        max-width: 100vw !important;
        background: red !important;
        /*        right: 0;
        left: 0;
        top: 0;
        bottom: 0;
        text-align: center;
        vertical-align: middle;*/
        margin: auto !important;
        display: none !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        width: 0 !important;
        height: 0 !important;
        transform: translate(-50%, -50%) !important;
        -webkit-transform: translate(-50%, -50%) !important;
    }

    .dropdown-item {
        color: var(--gray-dark);
        font-weight: 500;
        text-align: left;
        cursor: pointer;
        border-radius: 5px;
        padding: 5px 8px;
        border: solid 1.5px transparent;
        width: 100%;
        transition: all .1s ease-in-out;
        gap: 3px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .dropdown-item:hover {
        border: solid 1.5px var(--blue);
        transform: scale(1.05);
    }
    
@media screen and (max-width: 500px) {
    * {
        font-size: 14px;
    }

/*    #btnCrosshair {
        width: 40px;
        height: 40px;
        left: 10px;
        bottom: 60px;
        border-radius: 20%;
        -webkit-border-radius: 20%;
        border: solid var(--border-width) var(--gray-light);
        -webkit-box-shadow: 0px 0px 4px var(--light-shadow);
        -moz-box-shadow: 0px 0px 4px var(--light-shadow);
        box-shadow: 0px 0px 4px var(--light-shadow);
        color: var(--blue);
        font-size: 22px;
    }*/

    #tooltip {
        max-width: 90vw;
    }

    #confirm-box {
        max-width: 90vw;
    }

    #dropdown-box {
        max-width: 90vw;
    }
}

    /*.ddindent {
    padding: 20px 10px;
}

#editingLayer {
    font-weight: 700;
}*/

.backdrop-layer {
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: none;
   pointer-events: none;
   touch-action: none;
   -webkit-user-select: none !important;
    -khtml-user-select: none !important;
    -moz-user-select: none !important;
    -o-user-select: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
    -khtml-user-drag: none !important;
    -moz-user-drag: none !important;
    -o-user-drag: none !important;
}

.backdrop-layer2 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: none;
   pointer-events: none;
   touch-action: none;
   z-index: 5;
}

.backdrop-layer3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
/*    width: 300px;*/
/*    max-height: 25vh;*/
    margin: auto;
    z-index: 100000;
    background: rgba(255,255,255,.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: none;
    vertical-align: middle;
    text-align: center;
    padding: 3% 4%;
    font-size: 2rem;
    line-height: 1.5;
    pointer-events: none;
    touch-action: none;
    border-radius: var(--border-space);
    -webkit-box-shadow: 0px 0px 8px var(--dark-shadow);
    -moz-box-shadow: 0px 0px 8px var(--dark-shadow);
    box-shadow: 0px 0px 8px var(--dark-shadow);
}

.backdrop-layer5 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: block;
    pointer-events: none;
    touch-action: none;
}

@media (max-width: 1000px) {
    .backdrop-layer3 {
        padding: 6% 8%;
    }
}

nobr {
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

.select-box {
    /* box-sizing: border-box !important; */
    -webkit-appearance: none !important;
    appearance: none !important;
    -moz-appearance: none !important;
    /* background-image: url('https://www.svgrepo.com/show/80156/down-arrow.svg') !important;
    background-repeat: no-repeat !important;
    background-size: 14px 14px !important;
    background-position: calc(100% - 25px) !important; */
}

.selection_box {
    transition: all .2s ease-in-out;
    /*    border: solid 2px rgba(146, 166, 176, .5) !important;*/
    border: solid var(--border-width-small) var(--gray-light-5) !important;
    /*    border: none !important;*/
    /*    margin-left: 10px !important;*/
    margin: 0px !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    border-radius: 20px !important;
    text-align: center !important;
    /*        font-weight: 700 !important;*/
    width: 100% !important;
    /*        min-width: 150px !important;
        max-width: 230px !important;*/
    height: 40px !important;
    padding: 3px 10px !important;
    padding-top: 2px !important;
    background: #F2F9FF !important;
    /*    -webkit-box-shadow: inset 0px 0px 8px -3px rgba(0,0,0,0.05);
    -moz-box-shadow: inset 0px 0px 8px -3px rgba(0,0,0,0.05);
    box-shadow: inset 0px 0px 8px -3px rgba(0,0,0,0.05);*/
}

    .selection_box:focus {
        outline: none;
    }

    .selection_box:hover {
        background: rgba(255,255,255,.9) !important;
        border: solid var(--border-width-small) var(--blue) !important;
        /*        -webkit-box-shadow: inset 0px 0px 8px -3px rgba(0,0,0,0.25);
        -moz-box-shadow: inset 0px 0px 8px -3px rgba(0,0,0,0.25);
        box-shadow: inset 0px 0px 8px -3px rgba(0,0,0,0.25);*/
    }


.search_mini {
    transition: all .2s ease-in-out;
    border: solid var(--border-width-small) var(--gray-light-3) !important;
    margin: 0px;
    text-align: left;
    width: 100%;
    max-width: 200px;
    height: 33px;
    padding: 3px 10px;
    padding-left: 36px;
    border-radius: 20px;
    background: white !important;
}

    .search_mini:focus, .search_mini:hover {
        outline: none !important;
        border: solid 1px var(--gray-light) !important;
        -webkit-box-shadow: inset 0px 0px 8px -3px rgba(0,0,0,0.15);
        -moz-box-shadow: inset 0px 0px 8px -3px rgba(0,0,0,0.15);
        box-shadow: inset 0px 0px 8px -3px rgba(0,0,0,0.15);
    }

    .search_mini:hover { 
        border: solid 1px var(--blue) !important;
    }


@media (max-width: 500px) {
    .search_mini {
        width: calc(100% - 30px);
        max-width: unset;
    }
}

.selection_box-dark {
    transition: all .2s ease-in-out;
    /*    border: solid 2px rgba(146, 166, 176, .5) !important;*/
    border: solid 0px white !important;
    /*    border: none !important;*/
    /*    margin-left: 10px !important;*/
    margin: 0px !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    border-radius: 20px !important;
    text-align: center !important;
    /*        font-weight: 700 !important;*/
    width: 100% !important;
    /*        min-width: 150px !important;
        max-width: 230px !important;*/
    height: 33px !important;
    padding: 3px 10px !important;
    padding-top: 2px !important;
    background: rgba(255,255,255,.9) !important;
    /*    -webkit-box-shadow: inset 0px 0px 8px -3px rgba(0,0,0,0.05);
    -moz-box-shadow: inset 0px 0px 8px -3px rgba(0,0,0,0.05);
    box-shadow: inset 0px 0px 8px -3px rgba(0,0,0,0.05);*/
}

    .selection_box-dark:focus {
        outline: none;
    }

    .selection_box-dark:hover {
        background: rgba(255,255,255,1) !important;
        /*        -webkit-box-shadow: inset 0px 0px 8px -3px rgba(0,0,0,0.25);
        -moz-box-shadow: inset 0px 0px 8px -3px rgba(0,0,0,0.25);
        box-shadow: inset 0px 0px 8px -3px rgba(0,0,0,0.25);*/
    }

    /*select {
    border-radius: 20px !important;
}*/
.edit_box2 {
    transition: border .2s ease-in-out;
    min-height: 66px;
    border-radius: 20px 20px 0px 20px;
    border: solid var(--border-width-small) var(--gray-light-5);
    width: 100%;
    padding: 15px 15px;
    padding-top: 11px;
    background: #F2F9FF;
    line-height: 1.6 !important;
    field-sizing: content;
}

    .edit_box2:focus {
        outline: none;
    }

    .edit_box2:hover {
        background: rgba(255,255,255,.9) !important;
        border: solid var(--border-width-small) var(--blue) !important;
        /*        -webkit-box-shadow: inset 0px 0px 8px -3px rgba(0,0,0,0.25);
        -moz-box-shadow: inset 0px 0px 8px -3px rgba(0,0,0,0.25);
        box-shadow: inset 0px 0px 8px -3px rgba(0,0,0,0.25);*/
    }

.edit_box3 {
    min-height: 66px;
    border-radius: 20px 20px 0px 20px;
    border: solid 4px var(--blue);
    width: 100%;
    padding: 15px 20px;
    background: white;
    font-size: 1.2rem;
/*    color: white;*/
}

    .edit_box3:focus {
        outline: none;
    }

    /*.edit_box3:hover {*/
/*        background: rgba(255,255,255,.9) !important;*/
        /*border: solid 4px var(--green) !important;*/
        /*        -webkit-box-shadow: inset 0px 0px 8px -3px rgba(0,0,0,0.25);
        -moz-box-shadow: inset 0px 0px 8px -3px rgba(0,0,0,0.25);
        box-shadow: inset 0px 0px 8px -3px rgba(0,0,0,0.25);*/
    /*}*/

.hr_gtp {
    margin: auto;
    height: 4px !important;
/*    margin-left: 4px !important;
    margin-right: 4px !important;*/
    margin-top: 15px !important;
    margin-bottom: 12px !important;
    color: var(--gray) !important;
    width: 80%;
    opacity: .15;
}

.center-all {
    display: flex; align-content: center; justify-content: center; align-items: center; justify-items: center;
}


.btn {
    display: flex; justify-content: center !important; align-content: center !important;
    justify-items: center !important; align-items: center !important;
    border-radius: var(--border-space) !important;
    font-weight: 700 !important;
    border: none var(--border-width) white;
    color: white !important;
    transition: all .09s ease-in-out !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    min-height: 40px !important;
    margin: auto !important;
    max-width: var(--max-btn-width) !important;
    /* -webkit-box-shadow: 0px 0px 4px var(--light-shadow) !important;
    -moz-box-shadow: 0px 0px 4px var(--light-shadow) !important;
    box-shadow: 0px 0px 4px var(--light-shadow) !important; */
}

    .btn:focus {
        outline: none;
        box-shadow: none;
    }

.btn-dark {
    color: var(--dark) !important;
    border: solid 2px var(--dark) !important;
    background: rgba(255,255,255,.95);
}

    .btn-dark:hover, .btn-dark:focus, .btn-dark:checked, .btn-dark:before, .btn-dark.activated {
        background: var(--dark) !important;
        color: white !important;
        border: solid 2px var(--dark) !important;
        transform: scale(.95) !important;
        -webkit-transform: scale(.95) !important;
        -moz-transform: scale(.95) !important;
        -ms-transform: scale(.95) !important;
    }


.btn-default {
    color: var(--blue) !important;
    border: solid var(--border-width) var(--primary-color-trans-low) !important;
    background: white;
    transition: all .2s ease-in-out !important;
}

.btn-default-3d {
    color: var(--dark) !important;
    border: solid var(--border-width) transparent !important;
    background: color-mix(in srgb, var(--secondary-color) 80%, transparent);
    transition: all .2s ease-in-out !important;
    /* max-width: 190px !important; */
    /* text-transform: uppercase; */
    /* border-radius: 10px !important; */
    /* padding: 0 20px !important; */
    /* min-height: 38px !important; */
}
.btn-default-3d nobr {
    font-weight: 500 !important;
}

.btn-default-3d nobr i {
    line-height: 1 !important;
    font-size: 1.7rem !important;
    transform: translateY(.075rem) !important;
    /* transition: all .1s ease-in-out !important; */
}

.btn-default-icon {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    color: var(--blue) !important;
    border: solid var(--border-width) var(--primary-color-trans-low) !important;
    /* border: none !important; */
    transition: all .15s ease-in-out !important;
    /* padding: 0 !important;
    width: 40px;
    height: 100%;
    border-radius: 50% !important; */
    background-color: #fff;
    font-size: 1.3rem !important;
    line-height: 0 !important;
}

@media (max-width: 1000px) {
    .btn {
        max-width: unset !important;
    }

    .btn-default:hover, .btn-default:focus, .btn-default:checked, .btn-default:before, .btn-default.activated {
        color: var(--blue) !important;
        border: solid var(--border-width) var(--primary-color-trans-low) !important;
        background: white !important;
    }

    .btn-default-icon * {
        padding-left: 1px !important;
        padding-right: 1px !important;
        width: unset !important;
        /* padding: 0 !important; */
        font-size: 1.4rem !important;
        /* transform: scale(1.2) !important; */
    }

    .btn-default-icon {
        border: solid var(--border-width) var(--primary-color-trans-low) !important;
        padding-left: 17px !important;
        padding-right: 17px !important;
        width: unset !important;
    }
}

@media (min-width: 1000px) {
    .btn-default:hover, .btn-default:checked, .btn-default:before, .btn-default.activated {
        background: var(--blue) !important;
        color: white !important;
        border: solid var(--border-width) var(--blue) !important;
    }

    .btn-default-icon:hover, .btn-default-icon:checked, .btn-default-icon:before, .btn-default-icon.activated {
        color: white !important;
        border: solid var(--border-width) var(--blue) !important;
        background: var(--blue) !important;
        /* font-size: 1.6rem !important; */
    }

    .btn-default-3d:hover {
        background: var(--secondary-color) !important;
        color: var(--dark) !important;
        border: solid var(--border-width) var(--secondary-color) !important;
        transform: scale(1.03) !important;
        /* opacity: .9 !important; */
    }

    /* .btn-default-3d:hover nobr i {
        transform: scale(1.1) !important;
    } */
}

.btn-default-gray {
    /* font-weight: 500 !important; */
    color: var(--blue) !important;
    border: solid var(--border-width) var(--primary-color-trans-low) !important;
    background: white;
    transition: all .2s ease-in-out !important;
}

/* @media (max-width: 1000px) {
    .btn-default-gray:hover, .btn-default-gray:focus, .btn-default-gray:checked, .btn-default-gray:before, .btn-default-gray.activated {
        color: var(--blue) !important;
        border: solid 2px var(--blue-bg) !important;
        background: var(--blue-bg) !important;
    }
}

@media (min-width: 1000px) {
    .btn-default-gray:hover, .btn-default-gray:focus, .btn-default-gray:checked, .btn-default-gray:before, .btn-default-gray.activated {
        background: var(--blue) !important;
        color: white !important;
        border: solid 2px var(--blue) !important;
    }
} */

@media (max-width: 400px) {
    .btn-default-gray {
        font-size: .9rem !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

.btn-default-2 {
    color: var(--yellow) !important;
    border: solid 2px var(--blue-bg) !important;
    background: white;
    transition: all .2s ease-in-out !important;
}

@media (max-width: 1000px) {
    .btn-default-2:hover, .btn-default-2:focus, .btn-default-2:checked, .btn-default-2:before, .btn-default-2.activated {
        color: var(--yellow) !important;
        border: solid 2px var(--blue-bg);
        background: var(--blue-bg) !important;
    }
}

@media (min-width: 1000px) {
    .btn-default-2:hover, .btn-default-2:focus, .btn-default-2:checked, .btn-default-2:before, .btn-default-2.activated {
        background: var(--yellow) !important;
        color: white !important;
        border: solid 2px var(--yellow);
    }
}


.btn-default-fill {
    font-weight: 500 !important;
    color: white !important;
    border: none !important;
    background: color-mix(in srgb, var(--blue) 90%, transparent) !important;
    transition: transform .2s ease-in-out, background .2s ease-in-out, opacity .2s ease-in-out !important;
    padding-left: 25px !important;
    padding-right: 25px !important;
    scroll-margin: 100px !important;
    z-index: 6 !important;
    /* -webkit-box-shadow: 0px 0px 8px var(--primary-color-trans-low) !important;
    -moz-box-shadow: 0px 0px 8px var(--primary-color-trans-low) !important;
    box-shadow: 0px 0px 8px var(--primary-color-trans-low) !important; */
}

@media (max-width: 1000px) {
    .btn-default-fill:hover, .btn-default-fill:focus, .btn-default-fill:checked, .btn-default-fill:before, .btn-default-fill.activated {
        color: white !important;
        border: solid 1.5px var(--blue) !important;
        background: var(--blue) !important;
    }
}

@media (max-width: 400px) {
    .btn-default-fill {
        font-size: .9rem !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

@media (min-width: 1000px) {
    .btn-default-fill:hover {
        color: white !important;
        border: solid 1.5px var(--blue) !important;
        background: var(--blue) !important;
        transform: scale(1.05) !important;
        /* opacity: .9 !important; */
    }
}

.btn-default-2-fill {
    font-weight: 500 !important;
    color: white !important;
    border: solid 1.5px var(--yellow);
    background: var(--yellow);
    transition: all .2s ease-in-out !important;
}

@media (max-width: 1000px) {
    .btn-default-2-fill:hover, .btn-default-2-fill:focus, .btn-default-2-fill:checked, .btn-default-2-fill:before, .btn-default-2-fill.activated {
        color: white !important;
        border: solid 1.5px var(--yellow);
        background: var(--yellow) !important;
    }
}

@media (min-width: 1000px) {
    .btn-default-2-fill:hover {
        color: white !important;
        border: solid 1.5px var(--yellow);
        background: var(--yellow) !important;
        transform: scale(1.1);
    }
}


.btn-default-accent {
    color: var(--blue) !important;
    border: solid 1.5px var(--blue) !important;
    background: rgba(255, 255, 255, .95);
    transition: all .2s ease-in-out !important;
}

@media (max-width: 1000px) {
    .btn-default-accent:hover, .btn-default-accent:focus, .btn-default-accent:checked, .btn-default-accent:before, .btn-default-accent.activated {
        color: var(--blue) !important;
        border: solid 1.5px var(--blue-bg) !important;
        background: var(--blue-bg) !important;
    }
}

@media (min-width: 1000px) {
    .btn-default-accent:hover, .btn-default-accent:focus, .btn-default-accent:checked, .btn-default-accent:before, .btn-default-accent.activated {
        background: var(--blue) !important;
        color: white !important;
        border: solid 1.5px var(--blue) !important;
    }
}

.btn-actiebalk {
    pointer-events: all;
    color: var(--blue) !important;
    border: solid var(--border-width-small) var(--gray-light-7) !important;
    background: white;
    transition: all .2s ease-in-out !important;
    border-radius: 10px !important;
    font-weight: 500 !important;
    min-height: 30px !important;
    padding-left: 11px !important;
    padding-right: 11px !important;
    /* max-height: 30px !important; */
}

@media (max-width: 1000px) {
    .btn-actiebalk:hover, .btn-actiebalk:focus, .btn-actiebalk:checked, .btn-actiebalk:before, .btn-actiebalk.activated {
        color: var(--blue) !important;
        border-color: var(--gray-light) !important;
        background: white !important;
    }
}

@media (min-width: 1000px) {
    .btn-actiebalk:hover, .btn-actiebalk:checked, .btn-actiebalk:before, .btn-actiebalk.activated {
        background: var(--blue) !important;
        color: white !important;
        border-color: var(--blue) !important;
    }
}

.btn-actiebalk-no-hover {
    pointer-events: all;
    color: var(--blue) ;
    border: solid var(--border-width-small) var(--gray-light-7);
    background: white;
    transition: all .2s ease-in-out;
    border-radius: 10px;
    font-weight: 500;
    /* min-height: 30px; */
    padding: 10px 10px;
    /* max-height: 30px !important; */
}

.btn-actiebalk-fill {
    pointer-events: all;
    color: white !important;
    border: solid var(--border-width) var(--blue) !important;
    background: var(--blue);
    transition: all .2s ease-in-out !important;
    border-radius: 10px !important;
    min-height: 30px !important;
    padding-left: 11px !important;
    padding-right: 11px !important;
}

@media (max-width: 1000px) {
    .btn-actiebalk-fill:hover, .btn-actiebalk-fill:focus, .btn-actiebalk-fill:checked, .btn-actiebalk-fill:before, .btn-actiebalk-fill.activated {
        color: var(--blue) !important;
        border-color: var(--gray-light) !important;
        background: var(--blue) !important;
        
    }
}

@media (min-width: 1000px) {
    .btn-actiebalk-fill:hover, .btn-actiebalk-fill:checked, .btn-actiebalk-fill:before, .btn-actiebalk-fill.activated {
        background: var(--blue) !important;
        color: white !important;
        border-color: var(--blue) !important;
        transform: scale(1.1);
    }
}



.btn-dark-narrow {
    transition: all .2s ease-in-out !important;
    border-radius: var(--border-space) !important;
    color: white !important;
    border: solid var(--border-width) var(--yellow) !important;
    background: var(--yellow) !important;
    padding: 3px !important;
    padding-bottom: 4px !important;
    font-weight: bold !important;
    height: 40px !important;
}

    .btn-dark-narrow:hover, .btn-dark-narrow:focus, .btn-dark-narrow:checked, .btn-dark-narrow:before, .btn-dark-narrow.activated {
        background: var(--yellow) !important;
        opacity: .9 !important;
        color: white !important;
        border: solid var(--border-width) transparent !important;
        transform: scale(1.1) !important;
    }

.btn-green {
    transition: all .09s ease-in-out !important;
    border-radius: var(--border-space) !important;
    color: var(--green) !important;
    border: solid 2px rgba(0,0,0,0) !important;
    background: none !important;
    padding: 10px 20px !important;
    padding-bottom: 11px !important;
    font-weight: bold !important;
    /*    height: 35px !important;*/
}

    .btn-green:hover, .btn-green:focus, .btn-green:checked, .btn-green:before, .btn-green.activated {
        color: white !important;
        border: solid 2px rgba(0,0,0,0) !important;
        /*        transform: scale(.95) !important;
        -webkit-transform: scale(.95) !important;
        -moz-transform: scale(.95) !important;
        -ms-transform: scale(.95) !important;*/
    }

.btn-yellow-leer-meer {
    transition: all .09s ease-in-out !important;
    border-radius: var(--border-space) !important;
    color: var(--gray) !important;
    border: solid 3px var(--gray) !important;
    background: none !important;
    padding: 7px 20px !important;
    padding-bottom: 6px !important;
    font-weight: bold !important;
    font-size: 18px !important;
    height: 50px !important;
}

    .btn-yellow-leer-meer:hover, .btn-yellow-leer-meer:focus, .btn-yellow-leer-meer:checked, .btn-yellow-leer-meer:before, .btn-yellow-leer-meer.activated {
        /*        background: var(--yellow) !important;*/
        color: var(--green) !important;
        border: solid 3px var(--green) !important;
        /*        transform: scale(1.05) !important;*/
        /*        -webkit-transform: scale(1.05) !important;
        -moz-transform: scale(1.05) !important;
        -ms-transform: scale(1.05) !important;*/
    }

.btn-green-fill {
    transition: all .09s ease-in-out !important;
    border-radius: var(--border-space) !important;
    color: var(--dark) !important;
    border: solid 2px var(--green) !important;
    background: var(--green) !important;
    padding: 6px 20px !important;
    padding-bottom: 6px !important;
    padding-left: 17px !important;
    font-weight: bold !important;
    font-size: 18px !important;
    height: 50px !important;
}

    .btn-green-fill:hover, .btn-green-fill:focus, .btn-green-fill:checked, .btn-green-fill:before, .btn-green-fill.activated {
        background: var(--green) !important;
/*        color: white !important;*/
        border: solid 2px rgba(0,0,0,0) !important;
        transform: scale(1.05) !important;
        -webkit-transform: scale(1.05) !important;
        -moz-transform: scale(1.05) !important;
        -ms-transform: scale(1.05) !important;
    }

.btn-green-nofill {
    transition: all .09s ease-in-out !important;
    border-radius: var(--border-space) !important;
    color: var(--yellow) !important;
    border: solid 2px var(--yellow) !important;
    background: none !important;
    padding: 6px 20px !important;
    padding-bottom: 8px !important;
    font-weight: bold !important;
    font-size: 18px !important;
    height: 50px !important;
}

    .btn-green-nofill:hover, .btn-green-nofill:focus, .btn-green-nofill:checked, .btn-green-nofill:before, .btn-green-nofill.activated {
        background: var(--yellow) !important;
        color: white !important;
        border: solid 2px var(--yellow) !important;
/*        transform: scale(1.05) !important;
        -webkit-transform: scale(1.05) !important;
        -moz-transform: scale(1.05) !important;
        -ms-transform: scale(1.05) !important;*/
    }

.btn-blue-fill {
    transition: all .15s ease-in-out !important;
    border-radius: var(--border-space) !important;
    color: var(--dark) !important;
    border: solid 2px var(--blue) !important;
    background: var(--blue) !important;
    padding: 6px 20px !important;
    padding-bottom: 5px !important;
    padding-left: 17px !important;
    font-weight: bold !important;
    font-size: 18px !important;
    height: 50px !important;
}

    .btn-blue-fill:hover, .btn-blue-fill:focus, .btn-blue-fill:checked, .btn-blue-fill:before, .btn-blue-fill.activated {
        background: var(--blue) !important;
        border: solid 2px var(--blue) !important;
        transform: scale(1.05) !important;
        -webkit-transform: scale(1.05) !important;
        -moz-transform: scale(1.05) !important;
        -ms-transform: scale(1.05) !important;
    }

.btn-yellow-fill {
    transition: all .09s ease-in-out !important;
    border-radius: var(--border-space) !important;
    color: var(--dark) !important;
    border: solid 2px #fcbe3f !important;
    background: #fcbe3f !important;
    padding: 6px 20px !important;
    padding-bottom: 6px !important;
    padding-left: 17px !important;
    font-weight: bold !important;
    font-size: 18px !important;
    height: 50px !important;
}

    .btn-yellow-fill:hover, .btn-yellow-fill:focus, .btn-yellow-fill:checked, .btn-yellow-fill:before, .btn-yellow-fill.activated {
        background: #fcbe3f !important;
        /*        color: white !important;*/
        border: solid 2px rgba(0,0,0,0) !important;
        transform: scale(1.05) !important;
        -webkit-transform: scale(1.05) !important;
        -moz-transform: scale(1.05) !important;
        -ms-transform: scale(1.05) !important;
    }

.btn-orange {
    /*    background: rgba(255, 129, 25, .8) !important;*/
    color: var(--yellow) !important;
    border: solid 2px var(--yellow) !important;
    background: rgba(255,255,255,.5) !important;
}

    .btn-orange:hover, .btn-orange:focus, .btn-orange.activated {
        background: var(--edit-color) !important;
        color: white !important;
        border: solid 2px var(--edit-color) !important;
        transform: scale(.95) !important;
        -webkit-transform: scale(.95) !important;
        -moz-transform: scale(.95) !important;
        -ms-transform: scale(.95) !important;
    }

.btn-gray {
    color: var(--gray) !important;
    border: solid 2px var(--gray) !important;
    background: rgba(255,255,255,.5) !important;
}

    .btn-gray:hover, .btn-gray:focus, .btn-gray.activated {
        background: var(--gray) !important;
        color: white !important;
        border: solid 2px var(--gray) !important;
        transform: scale(.95) !important;
        -webkit-transform: scale(.95) !important;
        -moz-transform: scale(.95) !important;
        -ms-transform: scale(.95) !important;
    }


.btn-cookie {
    color: white !important;
    border: solid var(--border-width) white !important;
    max-width: 70% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

    .btn-cookie:hover, .btn-cookie:focus {
        background: var(--green) !important;
        color: white !important;
        border: solid var(--border-width) var(--green) !important;
        transform: scale(.95) !important;
        -webkit-transform: scale(.95) !important;
        -moz-transform: scale(.95) !important;
        -ms-transform: scale(.95) !important;
    }

.link {
    /*    font-weight: 700 !important;*/
    transition: all .09s ease-in-out !important;
    text-decoration: none !important;
}

.btn .checker:before {
    content: '\2022';
}

.btn:hover .checker:before, .checker.activated {
    content: '\2713';
}

.checker {
    color: inherit;
    width: 10px;
    margin-right: 5px;
    display: inline-block;
}

#incorrect {
    display: none;
}

.link-to-dark:hover {
    color: var(--dark) !important;
}

.link-to-blue:hover {
    color: var(--blue) !important;
}

.link-to-red:hover {
    color: var(--red) !important;
}

.link-red {
    color: var(--red) !important;
    cursor: pointer;
    transition: opacity .15s ease-in-out;
}

.link-red:hover {
    color: var(--red) !important;
    opacity: .7;
}

.link-yellow {
    color: var(--yellow) !important;
}

    .link-yellow:hover {
        color: var(--yellow) !important;
        opacity: .7;
    }

.link-green-demo {
    color: var(--green) !important;
    text-underline-offset: 5px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    border: solid 2px var(--green) !important;
    border-radius: 20px !important;
    padding: 3px 8px !important;
    padding-top: 1px !important;
    font-size: .9rem !important;
    position: absolute !important;
    right: -27px !important;
    bottom: -11px !important;
}

.link-tr {
    transition: all .15s ease-in-out;
    background-color: #fff !important;
    border: solid 1.5px var(--gray-light-2);
}

.link-tr:hover {
    transform: scale(1.02);
    border-color: var(--yellow);
    cursor: pointer;
}

.link-tr-active {
    background: var(--yellow);
    font-weight: bold;
}

/*.link-tr2 {
    color: white;
    background: var(--green);
    cursor: pointer;
}*/


#teamstable {
    max-width: 200px;
    margin: auto;
}

.link-tr2 {
    text-align: center;
}

.link-tr2:hover {
    /*    color: white;*/
    background: var(--gray-trans);
    cursor: pointer;
    
}

.link-tr2-active {
    /*    color: white;*/
    background: var(--gray-semitrans);
    font-weight: bold;
    cursor: default;
    text-align: center;
}

.link-tr-white {
    transition: all .15s ease-in-out;
}
.link-tr-white:hover {
    transform: scale(1.02);
    color: #fff !important;
    background: var(--yellow) !important;
}

@media screen and (max-width: 500px) {
    .link-tr:hover {
        color: var(--dark);
        background: rgba(146, 166, 176, .15);
    }

    .link-tr-white:hover {
        color: #fff !important;
        background: var(--yellow) !important;
    }

    .link-green-demo {
        position: unset !important;
        right: unset !important;
        bottom: unset !important;
    }
}

.link-tr-gray:hover {
    color: white;
    background: var(--gray);
}

.link-green-demo:hover {
/*    opacity: .9 !important;*/
    text-decoration: none !important;
    background: var(--green) !important;
    color: var(--dark) !important;
}

.link-gray {
    color: var(--gray-light) !important;
}

    .link-gray:hover {
        color: var(--green) !important;
    }

    .link-green:hover {
        color: var(--green) !important;
    }

.link-dark {
    color: var(--dark) !important;
}

.link-dark:hover {
    opacity: .8;
}

.extra-info-banner {
    position: fixed;
    bottom: 6px;
    right: 90px;
    z-index: 2;
    text-decoration: none;
    cursor: pointer;
    opacity: 1;
    display: flex;
    gap: 15px;
    background: rgba(255,255,255,.4);
    padding: 5px 8px;
    padding-right: 10px;
    border-radius: 7px;
    transition: all .15s ease-in-out;
}

.extra-info-banner:hover {
    background: rgba(255,255,255,1);
}


:root {
    --hover-slide-height: 30px;
}
.show-in-kiosk {
    display: none;
}

.reset-map-btn {
    font-size: 30px;
    border-radius: 50%;
    overflow: hidden;
    position: fixed;
    bottom: 15px;
    right: 20px;
    z-index: 99999;
    color: var(--blue);
}

.hover-slide-wrap {
    display: flex;
    flex-direction: column;
    height: var(--hover-slide-height);
    border-radius: calc(var(--hover-slide-height) / 2);
    overflow: hidden;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99999;
    pointer-events: none;
    touch-action: none;
}

.hover-slide-box {
    height: var(--hover-slide-height);
    display: flex;
    flex-direction: column;
    position: relative;
    flex: 1 0 100%;
    pointer-events: none;
    touch-action: none;
}

.hover-slide-circle {
    width: var(--hover-slide-height);
    height: var(--hover-slide-height);
    background: var(--blue);
    border-radius: 50%;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 100002;
    cursor: pointer;
    vertical-align: middle;
    text-align: center;
    /*    padding-top: 1rem;*/
    font-size: calc(.91 * var(--hover-slide-height));
    color: white;
    pointer-events: all;
    touch-action: auto;
    /*    border: solid var(--border-width) var(--gray-light);*/
}

.hover-slide-hid-box {
    display: flex;
    flex-direction: row;
    position: relative;
    align-items: center;
    gap: 15px;
    justify-content: space-around;
    flex: 1 0 100%;
    height: var(--hover-slide-height);
    overflow: auto;
    padding: 0 calc(var(--hover-slide-height) * 1.5) 0 1rem;
    border-radius: calc(var(--hover-slide-height) / 2);
    background: #fff;
    /*    border: solid var(--border-width) var(--blue);*/
    margin-left: 2rem;
    transform: translateX(101%);
    transition: .2s ease;
    -webkit-box-shadow: 0px 0px 4px var(--dark-shadow);
    -moz-box-shadow: 0px 0px 4px var(--dark-shadow);
    box-shadow: 0px 0px 4px var(--dark-shadow);
    pointer-events: all;
    touch-action: auto;
}

.hover-slide-circle:hover {
    color: white;
    background: var(--blue);
/*    border-color: var(--blue);*/
}

    .hover-slide-circle:hover ~ .hover-slide-hid-box,
    .hover-slide-hid-box:hover {
        transform: translateX(0%);
    }

@media screen and (max-width: 700px) {

    .hover-slide-wrap {
        height: calc(var(--hover-slide-height) * 4);
        max-width: 100%;
        bottom: 13px;
        right: 15px;
        left: 10px;
    }

    .hover-slide-box {
        height: calc(var(--hover-slide-height) * 4);
    }

    .hover-slide-hid-box {
        height: calc(var(--hover-slide-height) * 4);
        flex-direction: row;
        flex-wrap: wrap;
        padding: 20px;
        gap: 5px 10px;
        justify-content: center;
        align-items: center;
        border: solid var(--border-width) var(--gray-light);
        transform: translateX(101%);
    }

        .hover-slide-hid-box .link-gray-to-native-blue {
            color: var(--blue) !important;
        }

    .hover-slide-circle {
        top: calc(var(--hover-slide-height) * 3);
    }

    .hover-slide-circle r {
        font-size: 1.5rem;
        line-height: 1.4;
    }

    .hover-slide-circle:hover ~ .hover-slide-hid-box {
        transform: translateX(0%);
    }

        .hover-slide-hid-box:hover {
            transform: translateX(101%);
        }

}

.link-gray-to-native-blue {
    color: var(--gray) !important;
    opacity: 1;
}

    .link-gray-to-native-blue:hover {
/*        color: rgba(10, 155, 255, 1) !important;*/
        color: var(--blue) !important;
        opacity: 1;
    }

.link-gray-to-blue {
    color: var(--gray-dark-8) !important;
}

    .link-gray-to-blue:hover {
        color: var(--blue) !important;
        opacity: 1;
    }

    .link-gray-dark-to-blue {
        color: var(--gray-dark) !important;
    }
    
        .link-gray-dark-to-blue:hover {
            color: var(--blue) !important;
            opacity: 1;
        }

.link-gray-to-blue2 {
    transition: all .15s ease-in-out;
    color: var(--gray-dark);
    cursor: pointer;
}

    .link-gray-to-blue2:hover {
        color: var(--blue) !important;
        opacity: .8;
    }

.link-blue {
    color: var(--blue) !important;
    opacity: 1 !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: opacity .15s ease-in-out;
}

    .link-blue:hover {
        opacity: .7 !important;
        text-decoration: none !important;
    }

.link-blue2 {
    color: var(--gray) !important;
    opacity: 1 !important;
}

    .link-blue2:hover {
        color: var(--dark) !important;
        opacity: 1 !important;
    }

.link-green2 {
    color: var(--green) !important;
    opacity: 1 !important;
}

    .link-green2:hover {
        opacity: .7 !important;
    }

.profile-person {
    transition: all .09s ease-in-out !important;
    color: var(--dark);
}

.btn-gray:hover .profile-person {
    color: white !important;
}

.btn-gray:focus .profile-person {
    color: white !important;
}

.btn-blue {
    color: var(--blue) !important;
    border: solid 2px var(--blue) !important;
    background: rgba(255,255,255,.5) !important;
}

    .btn-blue:hover, .btn-blue:focus, .btn-blue.activated {
        background: var(--blue) !important;
        color: white !important;
        border: solid 2px var(--blue) !important;
        transform: scale(.95) !important;
        -webkit-transform: scale(.95) !important;
        -moz-transform: scale(.95) !important;
        -ms-transform: scale(.95) !important;
    }

.btn-blue-fill3 {
    color: white !important;
    border: solid 2px var(--blue) !important;
    background: var(--blue) !important;
    min-width: 150px !important;
}

    .btn-blue-fill3:hover, .btn-blue-fill3:focus, .btn-blue-fill3.activated {
        background: var(--blue) !important;
        color: white !important;
        border: solid 2px var(--blue) !important;
        transform: scale(1.05) !important;
        -webkit-transform: scale(1.05) !important;
        -moz-transform: scale(1.05) !important;
        -ms-transform: scale(1.05) !important;
    }

.btn-red {
    color: var(--red) !important;
    border: solid 2px var(--red) !important;
    background: rgba(255,255,255,.5) !important;
}

    .btn-red:hover, .btn-red:focus, .btn-red.activated {
        background: var(--red) !important;
        color: white !important;
        border: solid 2px var(--red) !important;
        transform: scale(.95) !important;
        -webkit-transform: scale(.95) !important;
        -moz-transform: scale(.95) !important;
        -ms-transform: scale(.95) !important;
    }

.btn-cookie {
    color: white !important;
    border: solid 2px white !important;
}

    .btn-cookie:hover, .btn-cookie:focus {
        background: var(--green) !important;
        color: white !important;
        border: solid 2px var(--green) !important;
        transform: scale(.95) !important;
        -webkit-transform: scale(.95) !important;
        -moz-transform: scale(.95) !important;
        -ms-transform: scale(.95) !important;
    }

.cookie-dough {
    float: right;
    width: 24rem;
    background: var(--gray-dark-8);
    color: #fff;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 8px;
    padding-bottom: 8px;
    border-radius: var(--border-space);
    margin-bottom: -5px;
    margin-right: 79px;
    transition: all .15s ease-in-out;
    pointer-events: all;
    touch-action: auto;
    /* backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px); */
}

    .cookie-dough:hover {
        background: var(--gray);
    }

.cookie-closer {
    font-size: 30px;
    line-height: 0;
    color: white !important;
    position: absolute;
    right: 93px;
    top: 38px;
}

.cookie-closer:hover {
    color: var(--red) !important;
}

.copyright {
    margin-bottom: 2px;
    opacity: 0;
    font-size: .8rem;
    pointer-events: none;
}

    .copyright:hover {
        opacity: 0
    }


@media screen and (max-width: 500px) {
    .link-gray-to-blue2:hover {
        color: var(--gray-dark);
        opacity: 1;
    }

    .cookie-dough {
        float: unset;
        width: 100%;
        background: rgba(146, 166, 176, 1);
        color: #fff;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 8px;
        padding-bottom: 8px;
        border-radius: var(--border-space);
        margin-bottom: -15px;
        margin-left: 0px;
        margin-right: 0px;
    }

    .cookie-closer {
        font-size: 30px;
        line-height: 0;
        color: white !important;
        position: absolute;
        right: 20px;
        top: 40px;
    }

}

.ol-layerswitcher {
    min-width: 170px !important;
}

.ol-layer-group {
    transform: translateX(-20px) !important;
    -webkit-transform: translateX(-20px) !important;
    -moz-transform: translateX(-20px) !important;
    -ms-transform: translateX(-20px) !important;
    /*    padding-left: 40px !important;*/
    /*    pointer-events: none !important;*/
}

    .ol-layer-group .li-content label span {
        margin-left: 22px !important;
        cursor: pointer !important;
    }

/*.ol-visibility {
    pointer-events: all !important;
    cursor: pointer !important;
}*/

/*.ol-layerswitcher-buttons {
    pointer-events: none !important;
}*/

/*input[type="checkbox"]*/

    .ol-layer-group .ol-layer-tile, .ol-layer-group .ol-layer-vector {
        margin-left: 20px !important;
        
    }

    /*.ol-layer-group label {
        pointer-events: none !important;*/
/*        display: none !important;*/
    /*}*/

    /*.ol-layer-group .layerup {*/
/*        pointer-events: none !important;
        display: none !important;*/
        /*background: red !important;
    }*/



    .ol-layer-group .ol-layerswitcher-buttons {
        transform: translateX(22px) translateY(-2px) !important;
        -webkit-transform: translateX(22px) translateY(-2px) !important;
        -moz-transform: translateX(22px) translateY(-2px) !important;
        -ms-transform: translateX(22px) translateY(-2px) !important;
        /*        margin-left: 50px !important;*/
        /*    pointer-events: none !important;*/
        z-index: 2 !important;
        /*    pointer-events: all !important;*/
        /*    background: red !important;*/
    }

/*    .ol-layer-group .ol-layerswitcher-buttons .expend-layers {
        pointer-events: all !important;
        z-index: 3000 !important;
        background: red !important;
    }*/


.ol-layer-group [type="checkbox"]:checked + label:after {
    pointer-events: all !important;
    display: block !important;
    margin-left: 20px !important;
/*    cursor: pointer !important;*/
}

    .ol-layer-group [type="checkbox"] + label:before {
        display: block !important;
        margin-left: 20px !important;
        pointer-events: all !important;
        /*    cursor: pointer !important;*/
    }


.ol-layer-tile [type="checkbox"]:checked + label:after, .ol-layer-vector [type="checkbox"]:checked + label:after {
    pointer-events: none !important;
    display: block !important;
    margin-left: 0px !important;
    pointer-events: none !important;
    color: var(--yellow) !important;
}

.ol-layer-tile [type="checkbox"] + label:before, .ol-layer-vector [type="checkbox"] + label:before {
    display: block !important;
    margin-left: 0px !important;
    pointer-events: none !important;
}

    .ol-layer-tile, .ol-layer-vector, .ol-layer-group {
        text-align: left !important;
        font-size: 1rem !important;
        padding: 3px 0px !important;
        /*    border: solid 1px black !important;*/
    }

        .ol-layer-tile label, .ol-layer-vector label {
            transform: translateY(4px) !important;
            -webkit-transform: translateY(4px) !important;
            -moz-transform: translateY(4px) !important;
            -ms-transform: translateY(4px) !important;
            cursor: pointer !important;
        }

        .ol-layer-tile span, .ol-layer-vector span {
            cursor: default !important;
            /*        margin-left: 20px !important;*/
            padding-left: 2px !important;
            transform: translateY(1px) !important;
            -webkit-transform: translateY(1px) !important;
            -moz-transform: translateY(1px) !important;
            -ms-transform: translateY(1px) !important;
        }

        .ol-layer-group label {
            transform: translateY(4px) !important;
            -webkit-transform: translateY(4px) !important;
            -moz-transform: translateY(4px) !important;
            -ms-transform: translateY(4px) !important;
            cursor: pointer !important;
            margin-left: 2px !important;
        }

        .ol-layer-group span {
            cursor: default !important;
            padding-left: 0px !important;
            transform: translateY(3px) !important;
            -webkit-transform: translateY(3px) !important;
            -moz-transform: translateY(3px) !important;
            -ms-transform: translateY(3px) !important;
        }

        .ol-layer-group .ol-layer-tile span, .ol-layer-group .ol-layer-vector span {
            cursor: pointer !important;
            /*            margin-left: -20px !important;*/
            transform: translateX(-20px) translateY(2px) !important;
            -webkit-transform: translateX(-20px) translateY(2px) !important;
            -moz-transform: translateX(-20px) translateY(2px) !important;
            -ms-transform: translateX(-20px) translateY(2px) !important;
        }

    .layerswitcher-opacity {
        display: none;
    }

.ol-layerswitcher-buttons {
    background-color: transparent !important;
}

/*.ol-layer-tile {
    border: solid 1px black !important;
}*/

/*.li-content label span a {
    background: red !important;
    pointer-events: all !important;
}*/

/*.ol-layer-tile {
    background: yellow !important;
    pointer-events: all;
}*/

.label_button {
    position: absolute;
    color: var(--gray);
    z-index: 9999;
    cursor: pointer;
    font-size: 10px;
    margin-top: 10px;
    margin-left: 5px;
    text-decoration: none;
    font-weight: bold;
/*    background: var(--dark);*/
/*    right: 0px;*/
/*    width: 60px;*/
}

    .label_button:hover, .label_button:focus, .label_button:checked, .label_button:before, .label_button.activated {
        outline: none;
        color: var(--gray);
    }

.label_actief {
    color: var(--dark);
}

    .label_actief:hover {
        color: var(--dark);
    }

.actief {
    position: absolute;
    color: var(--blue);
    z-index: 9999;
    cursor: default !important;
    border: solid 2px var(--blue);
    /*    border: none;*/
    border-radius: 50%;
    font-size: 14px;
    margin-right: 0px;
    margin-top: 3px;
    /*    background: var(--dark);*/
    right: 0px;
    width: 27px;
    height: 27px;
    padding: 0px 0px;
    text-align: center;
    vertical-align: middle;
    /*    border: none;*/
    /*    background: rgba(26,26,55, 0);*/
    /*    background: linear-gradient(145deg, rgba(146, 166, 176, .1), rgba(146, 166, 176, .05));
    box-shadow: inset -1px -1px 1px #d7dbdd, inset 1px 1px 1px white;
    -webkit-box-shadow: inset -1px -1px 1px #d7dbdd, inset 1px 1px 1px white;
    -moz-box-shadow: inset -1px -1px 1px #d7dbdd, inset 1px 1px 1px white;*/
    /*    box-shadow: inset 1px 1px 1px 0px rgba(255, 255, 255, 1), inset -1px -1px 1px 1px rgba(255, 255, 255, .3);
    -webkit-box-shadow: inset 1px 1px 1px 0px rgba(255, 255, 255, 1), inset -1px -1px 1px 1px rgba(255, 255, 255, .3);
    -moz-box-shadow: inset 1px 1px 1px 0px rgba(255, 255, 255, 1), inset -1px -1px 1px 1px rgba(255, 255, 255, .3);*/
    /*    background: linear-gradient(145deg, rgba(146, 166, 176, .05), rgba(146, 166, 176, .02));
    box-shadow: inset -1px -1px 2px rgba(146, 166, 176, .4), inset 1px 1px 2px white, -1px -1px 2px rgba(146, 166, 176, .4), 1px 1px 3px rgba(255,255,255,.3);
    -webkit-box-shadow: inset -1px -1px 2px rgba(146, 166, 176, .4), inset 1px 1px 2px white, -1px -1px 2px rgba(146, 166, 176, .4), 1px 1px 3px rgba(255,255,255,.3);
    -moz-box-shadow: inset -1px -1px 2px rgba(146, 166, 176, .4), inset 1px 1px 2px white, -1px -1px 2px rgba(146, 166, 176, .4), 1px 1px 3px rgba(255,255,255,.3);*/
    background: linear-gradient(145deg, rgba(245, 248, 249, 1), rgba(245, 248, 249, .8));
    /*    box-shadow: inset -1px -1px 2px white, inset 1px 1px 2px white;
    -webkit-box-shadow: inset -1px -1px 2px white, inset 1px 1px 2px white;
    -moz-box-shadow: inset -1px -1px 2px white, inset 1px 1px 2px white;*/
}

    .actief:hover, .actief:focus, .actief:checked, .actief:before, .actief.activated {
        outline: none;
    }


.inactief {
    position: absolute;
    color: rgba(146, 166, 176, .4);
    z-index: 9999;
    cursor: pointer;
    border: solid 1px rgba(0,0,0,0);
    border-radius: 50%;
    font-size: 14px;
    margin-right: 0px;
    margin-top: 3px;
    background: rgba(0,0,0,0);
    right: 0px;
    width: 27px;
    height: 27px;
    text-align: center;
    vertical-align: middle;
    transition: all .1s ease-in;
    padding: 0px;
}

    .inactief:hover, .inactief:focus, .inactief:checked, .inactief:before, .inactief.activated {
        outline: none;
        color: var(--gray);
        opacity: 1;
        border: solid 2px rgba(146, 166, 176, .4);
        /*        background: linear-gradient(145deg, rgba(146, 166, 176, .07), rgba(146, 166, 176, .03));
        box-shadow: inset 1px 1px 1px rgba(146, 166, 176, .3), inset -1px -1px 1px rgba(255,255,255,.5), 1px 1px 2px rgba(146, 166, 176, .1);
        -webkit-box-shadow: inset 1px 1px 1px rgba(146, 166, 176, .3), inset -1px -1px 1px rgba(255,255,255,.5), 1px 1px 2px rgba(146, 166, 176, .1);
        -moz-box-shadow: inset 1px 1px 1px rgba(146, 166, 176, .3), inset -1px -1px 1px rgba(255,255,255,.5), 1px 1px 2px rgba(146, 166, 176, .1);*/
    }

/*    .inactief:hover, .inactief:focus, .inactief:checked, .inactief:before, .inactief.activated {
        outline: none;
        color: var(--gray);
        opacity: 1;
        background: rgba(146, 166, 176, .01);
        box-shadow: 0px 0px 2px 0px rgba(146, 166, 176, 1), inset 1px 1px 1px 1px rgba(255, 255, 255, 1), inset -1px -1px 1px 1px rgba(255, 255, 255, .3);
        -webkit-box-shadow: 0px 0px 2px 0px rgba(146, 166, 176, 1), inset 1px 1px 1px 1px rgba(255, 255, 255, 1), inset -1px -1px 1px 1px rgba(255, 255, 255, .3);
        -moz-box-shadow: 0px 0px 2px 0px rgba(146, 166, 176, 1), inset 1px 1px 1px 1px rgba(255, 255, 255, 1), inset -1px -1px 1px 1px rgba(255, 255, 255, .3);
    }*/

/*.li-content {
    pointer-events: none;
}*/

/*.li-content label::after {
    content: "hai"
}*/


.ol-layer-tile .ol-layerswitcher-buttons .ol-noscroll, .ol-layer-vector .ol-layerswitcher-buttons .ol-noscroll {
    position: fixed !important;
    height: 25px !important;
    width: 60px !important;
    transform-origin: left !important;
    -webkit-transform-origin: left !important;
    -ms-transform-origin: left !important;
    -moz-transform-origin: left !important;
    transform: translateX(-100px) !important;
    -webkit-transform: translateX(-100px) !important;
    -moz-transform: translateX(-100px) !important;
    -ms-transform: translateX(-100px) !important;
    /*    border-radius: 10px !important;*/
    background-color: transparent !important;
    padding: 10px 0px !important;
    z-index: 2000 !important;
    pointer-events: none !important;
}

.ol-layer-group .ol-layerswitcher-buttons .ol-noscroll {
    position: fixed !important;
    height: 25px !important;
    width: 150px !important;
    transform: translateX(25px) !important;
    /*    -webkit-transform: translateX(-175px) !important;
    -moz-transform: translateX(-175px) !important;
    -ms-transform: translateX(-175px) !important;*/
    background-color: transparent !important;
    padding: 10px 0px !important;
    z-index: 2000 !important;
    pointer-events: all !important;
}

.ol-layer-group .ol-layer-tile .ol-layerswitcher-buttons .ol-noscroll, .ol-layer-group .ol-layer-vector .ol-layerswitcher-buttons .ol-noscroll {
    position: fixed !important;
    height: 25px !important;
    width: 160px !important;
    transform: translateX(-140px) !important;
    -webkit-transform: translateX(-140px) !important;
    -moz-transform: translateX(-140px) !important;
    -ms-transform: translateX(-140px) !important;
    background-color: transparent !important;
    padding: 10px 0px !important;
    z-index: 2000 !important;
    pointer-events: all !important;
}

.ol-noscroll::before, .ol-noscroll::after {
    opacity: 0 !important;
}

@media screen and (max-width: 390px) {
    .ol-layer-group .ol-layer-tile .ol-layerswitcher-buttons .ol-noscroll, .ol-layer-group .ol-layer-vector .ol-layerswitcher-buttons .ol-noscroll {
        transform: translateX(-29vw) !important;
        -webkit-transform: translateX(-29vw) !important;
        -moz-transform: translateX(-29vw) !important;
        -ms-transform: translateX(-29vw) !important;
    }
}

/*.ol-noscroll::before, .ol-noscroll::after {
    display: none !important;
    background-color: transparent !important;
    border-radius: 10px !important;
}

.ol-noscroll {
    background: none !important;
}*/

.expend-layers, .collapse-layers {
/*    transition: all .2s ease-in-out;*/
    transform: translateY(10px) scale(.9) !important;
    -webkit-transform: translateY(10px) scale(.9) !important;
    -moz-transform: translateY(10px) scale(.9) !important;
    -ms-transform: translateY(10px) scale(.9) !important;
/*    filter: brightness(0) saturate(100%) invert(9%) sepia(10%) saturate(5275%) hue-rotate(209deg) brightness(98%) contrast(95%);*/
    opacity: 1 !important;
    margin-bottom: 15px !important;
}

    .expend-layers:hover, .collapse-layers:hover, .expend-layers:focus, .collapse-layers:focus {
        opacity: .8 !important;
    }

.ol-dragover, .dropover {
    background-color: rgba(255, 195, 72, .3) !important;
    border-radius: 15px !important;
}

/*.collapse-layers {
    transform: translateY(10px) !important;
    margin-bottom: 15px !important;
}*/
.ol-layerswitcher .panel li.ol-layer-group > .ol-layerswitcher-buttons {
    position: absolute !important;
    /*    width: 100% !important;*/
}

.ol-layer-group > .li-content {
    left: 20px !important;
}

.ol-layerswitcher .expend-layers, .ol-layerswitcher .collapse-layers {
    float: left !important;
}

.ol-layerswitcher {
    padding-top: 10px !important;
}

.ol-layerswitcher .ol-layer-group {
    /* border-top: solid 1px var(--blue) !important; */
    padding-top: 0px !important;
    padding-bottom: 12px !important;
}

.ol-layerswitcher .ol-layer-group .ol-layer-group {
    border-top: none !important;
    padding-left: 20px !important;
    padding-top: 10px !important;
    padding-bottom: 5px !important;
}
.ol-layerswitcher .ol-layer-group .ol-layer-tile, .ol-layerswitcher .ol-layer-group .ol-layer-vector {
    padding-top: 7px !important;
    padding-bottom: 3px !important;
}

.ol-layerswitcher .ol-layer-tile, .ol-layerswitcher .ol-layer-vector {
    padding-top: 0px !important;
    padding-bottom: 10px !important;
}
/*.selectorTable td:hover {
    background-color: rgba(0,0,0,.01);
    border-radius: 15px;
    color: white !important;
}*/
/*.selectorTable tr {
    border-bottom: solid 2px rgba(146, 166, 176, 1);
    border-top: solid 2px rgba(146, 166, 176, 1);
}

.selectorTable tr:nth-child(1) {
    border-top: none;
    border-bottom: none;
}
    .selectorTable tr:nth-child(2) {
        border-top: none;
        border-bottom: none;
    }

    .selectorTable tr:last-child {
        border-top: none;
        border-bottom: none;
    }*/

.hr-full {
    color: var(--gray-light-7);
    border-width: var(--border-width-small);
    margin: 15px 20px;
    opacity: .6;
}

.hr-full-2 {
    color: var(--gray-light-7);
    border-width: var(--border-width-small);
    margin: 15px 0px;
    opacity: .6;
}

.hr-full-3 {
    color: var(--gray-light-7);
    border-width: var(--border-width-small);
    margin: 15px -5px;
    opacity: .6;
}

.project-title-text {
    font-size: 1.5rem !important;
    filter: drop-shadow(0 0 2px rgba(255,255,255,1));
    /* text-shadow: 1px 1px 3px #fff; */
}

@media screen and (max-width: 1000px) {

    .project-title-text {
        font-size: 1.35rem !important;
    }

    .hr-full-3 {
        margin: 15px 0px;
    }

    .selectorTable {
        border-collapse: separate;
        border-spacing: 10px 10px !important;
        z-index: 2000 !important;
        transform: translateY(0px) !important;
        -webkit-transform: translateY(0px) !important;
        -moz-transform: translateY(0px) !important;
        -ms-transform: translateY(0px) !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
/*        margin-bottom: 0 !important;*/
    }

        .contentSelect {
            z-index: 2001 !important;
            padding: 0px !important;
            padding-bottom: 15px !important;
            animation-name: popin;
            animation-duration: .1s;
            margin: auto !important;
        }
}

@media screen and (min-width: 1000px) {
    #popup {
        pointer-events: none;
    }
}


.selectorTable {
    border-collapse: separate;
    border-spacing: 20px 20px;
    animation-name: popin;
    animation-duration: .1s;
    margin-left: auto;
    margin-right: 0;
    margin-bottom: 80vh;
    margin-top: 0 !important;
    width: var(--popup-width);
    min-width: var(--popup-width);
    max-width: var(--popup-width);
    pointer-events: none;
}

.contentSelect {
    padding: 5px;
    padding-bottom: 15px;
    border-radius: 15px 15px 28px 28px;
    /* backdrop-filter: blur(7px); */
    /* -webkit-backdrop-filter: blur(7px); */
    -webkit-box-shadow: 0px 0px 8px var(--shadow);
    -moz-box-shadow: 0px 0px 8px var(--shadow);
    box-shadow: 0px 0px 8px var(--shadow);
    outline: solid 2px rgba(0,0,0,0);
    background: var(--bg-color-tile);
    border: solid var(--border-width-small) var(--gray-light-7) !important;
    pointer-events: all;
}

.contentTable {
    padding: 0px !important;
    margin: -5px 0px !important;
    /*    background: rgba(255,255,255,0) !important;*/
/*    border-radius: 20px !important;*/
    /*    outline: solid var(--border-width) var(--gray-light) !important;*/
    /*    width: calc(100% - var(--border-width) * 2) !important;*/
/*    margin-top: 15px !important;
    margin-bottom: -2px !important;*/
    /*    -webkit-box-shadow: 0px 0px 8px var(--light-shadow);
    -moz-box-shadow: 0px 0px 8px var(--light-shadow);
    box-shadow: 0px 0px 8px var(--light-shadow);*/
}

.contentTable td {
    padding: 6px 0px;
}

/*    .contentTable tr {
        background: rgba(0,0,0,0) !important;
        background-color: rgba(0,0,0,0) !important;
        -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;
        box-shadow: none !important;
    }*/

.attribute {
    color: var(--gray-light);
    /*    margin-left: 20px !important;*/
    text-align: left !important;
    line-height: 1.5 !important;
}

.value {
    padding-right: 0px !important;
    line-height: 1.5 !important;
    /*padding-top: 2.5px !important;*/
    max-width: 53vw !important;
    font-weight: 400 !important;
    min-width: 150px;
}

.opacity-on-hover:hover {
    opacity: .8;
}


/*    .selectorTable tr {
        -webkit-box-shadow: 0px 0px 16px rgba(0,0,0,.1) !important;
        -moz-box-shadow: 0px 0px 16px rgba(0,0,0,.1) !important;
        box-shadow: 0px 0px 16px rgba(0,0,0,.1) !important;
    }*/

/*    .ol-popup:hover {
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        background-color: rgba(255, 255, 255, .9);
    }*/

/*.selectorTable .select_style {*/
/*    padding: 15px 15px !important;
    border-radius: 20px;
    background-color: rgba(255,255,255,.9);
    -webkit-box-shadow: inset 0px 0px 0px 2px rgba(54, 60, 64, .3);
    -moz-box-shadow: inset 0px 0px 0px 2px rgba(54, 60, 64, .3);
    box-shadow: inset 0px 0px 0px 2px rgba(54, 60, 64, .3);*/
    /*backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    background-color: rgba(255, 255, 255, .9);
}*/

/*.selectorTable td:hover .select_style {
    background-color: rgba(255,255,255,.9);
    -webkit-box-shadow: inset 0px 0px 0px 2px rgba(54, 60, 64, .3);
    -moz-box-shadow: inset 0px 0px 0px 2px rgba(54, 60, 64, .3);
    box-shadow: inset 0px 0px 0px 2px rgba(54, 60, 64, .3);
}

    .selectorTable td:hover {
        background-color: rgba(255,255,255,.9);
        -webkit-box-shadow: inset 0px 0px 0px 2px rgba(54, 60, 64, .1);
        -moz-box-shadow: inset 0px 0px 0px 2px rgba(54, 60, 64, .1);
        box-shadow: inset 0px 0px 0px 2px rgba(54, 60, 64, .1);
    }

    .selectorTable td:focus {
        background-color: rgba(255,255,255,.9);
        -webkit-box-shadow: inset 0px 0px 0px 2px rgba(54, 60, 64, .1);
        -moz-box-shadow: inset 0px 0px 0px 2px rgba(54, 60, 64, .1);
        box-shadow: inset 0px 0px 1px 0px rgba(54, 60, 64, .1);
    }*/



/*    .selectorTable tr:hover {
        background-color: red;
        border-radius: 20px;
    }*/

/*.bi-eye-fill {
    transition: all .05s ease-in-out;
    vertical-align: middle;
    filter: invert(100%);*/
    /*    line-height: 30px;*/
/*}*/

/*    .bi-eye-fill::after {
        content: "\a";
        white-space: pre;
    }*/

/* unvisited link */
a:link {
    transition: all .2s ease-in-out;
    color: rgba(10, 155, 255, .5);
}

/* visited link */
a:visited {
    color: rgba(10, 155, 255, .75);
}

/* mouse over link */
a:hover {
    color: rgba(10, 155, 255, .75);
}

/* selected link */
a:active {
    color: rgba(10, 155, 255, .75);
}

.alt-eye {
    transition: all .05s ease-in-out;
    /*    vertical-align: middle;*/
    /*    filter: invert(100%) !important;*/
    /*    padding-right: 0px;
    padding-left: 2px;*/
    transform: translateY(-3px) translateX(-12px);
    -webkit-transform: translateY(-3px) translateX(-12px);
    -moz-transform: translateY(-3px) translateX(-12px);
    -ms-transform: translateY(-3px) translateX(-12px);
    color: rgba(146, 166, 176, .5);
    text-align: right;
    /*    border: solid;*/
    float: right;
    width: 0px;
    height: 0px;
    font-size: 18px;
    display: none;
    /*    width: 100%;*/
    /*    line-height: 30px;*/
}

.isolate-project {
    transition: all .15s ease-in-out;
    color: var(--gray-light);
    opacity: .5;
    font-size: 18px;
    margin-right: 5px;
    margin-top: 2px;
}

/* .project-title-text {
    position: absolute;
    background-color: white;
    width: calc(var(--popup-width) - 90px);
    padding: 20px;
    border-radius: 10px;
    border: solid var(--border-width-small) var(--gray-light-7);
    z-index: 2;
    margin-top: -40px;
} */

.project-title:hover .alt-eye {
    /*    filter: invert(100%);*/
    color: rgba(146, 166, 176, 1);
    animation: blinker-gray 1s linear infinite;
    width: 0px;
    height: 0px;
    /*    font-size: 20px;*/
}

.alt-eye:hover {
    color: var(--green)  !important;
    animation: unset;
}

/*.project-title:hover .isolate-project {*/
    /*    filter: invert(100%);*/
    /*color: rgba(146, 166, 176, .5);
    width: 0px;
    height: 0px;
    display: block;*/
    /*    font-size: 20px;*/
/*}*/

.isolate-project:hover {
    color: var(--blue);
    opacity: 1;
}

@keyframes blinker-gray {
    50% {
        color: rgba(146, 166, 176, .5);
    }
}

.clicked-eye {
    /*    filter: invert(0%) !important;*/
    color: var(--green) !important;
    animation: none !important;
    /*    font-size: 20px;*/
}

/*.clicked-eye2 {
    color: var(--green) !important;
    animation: none !important;
}*/

.logoscaler {
    transform: scale(1) !important;
    -webkit-transform: scale(1) !important;
    -moz-transform: scale(1) !important;
    -ms-transform: scale(1) !important;
    -webkit-transition-property: all;
    -webkit-transition-duration: .1s;
    -moz-transition-timing-function: cubic-bezier(100,50,21,6);
    -moz-transition-property: all;
    -moz-transition-timing-function: cubic-bezier(100,50,21,6);
    /*    filter: opacity(0.29) saturate(0) contrast(1) brightness(.8);*/
}

    .logoscaler:hover {
        transform: scale(.97) !important;
        -webkit-transform: scale(.97) !important;
        -moz-transform: scale(.97) !important;
        -ms-transform: scale(.97) !important;
        opacity: 1 !important;
        /*        filter: opacity(1) saturate(1) contrast(1) brightness(1);*/
    }


.featureEditor {
    display: none;
    transition: all .05s ease-in-out;
    vertical-align: middle;
    animation: blinker 1s linear infinite;
    font-size: 20px;
    line-height: 20px;
    width: 0px;
    transform: translateY(-46px) translateX(-30px);
    -webkit-transform: translateY(-46px) translateX(-30px);
    -moz-transform: translateY(-46px) translateX(-30px);
    -ms-transform: translateY(-46px) translateX(-30px);
    color: rgba(146, 166, 176, .5);
    text-align: right;
    float: right;
    height: 0px;
    width: 0px;
}

    .featureEditor:hover {
        font-size: 20px;
        color: rgba(146, 166, 176, 1);
        animation: blinker-blue .5s linear infinite;
    }

.projectSharer {
    display: inline-block !important;
    /*    visibility: hidden;*/
    transition: all .05s ease-in-out;
    vertical-align: middle;
    animation: blinker 1s linear infinite;
    font-size: 20px;
    line-height: 20px;
    transform: translateY(-20px) translateX(-30px);
    -webkit-transform: translateY(-20px) translateX(-30px);
    -moz-transform: translateY(-20px) translateX(-30px);
    -ms-transform: translateY(-20px) translateX(-30px);
    color: rgba(146, 166, 176, .5);
    text-align: right;
    float: right;
    height: 0px;
    width: 0px;
}

    .projectSharer:hover, .projectSharer:focus {
        font-size: 20px;
        color: var(--blue);
        /*        animation: blinker-dark .5s linear infinite;*/
    }

.projectDownloader {
    display: inline-block !important;
    transition: all .05s ease-in-out;
    vertical-align: middle;
    animation: blinker 1s linear infinite;
    font-size: 20px;
    line-height: 20px;
    transform: translateY(-25px) translateX(-35px);
    -webkit-transform: translateY(-25px) translateX(-35px);
    -moz-transform: translateY(-25px) translateX(-35px);
    -ms-transform: translateY(-25px) translateX(-35px);
    color: rgba(146, 166, 176, .5);
    text-align: right;
    float: right;
    height: 0px;
    width: 0px;
}

    .projectDownloader:hover, .projectDownloader:focus {
        font-size: 20px;
        color: var(--blue);
        /*        animation: blinker-dark .5s linear infinite;*/
    }

@keyframes blinker {
    50% {
        filter: invert(0%);
    }
}

@keyframes blinker-blue {
    50% {
        color: var(--yellow);
    }
}

@keyframes blinker-dark {
    50% {
        color: var(--dark);
    }
}

.focus-elem {
    transition: transform .2s ease-in-out;
    animation: blinker-scalar 1s linear infinite !important;
}

.focus-elem:hover {
    opacity: 1 !important;
}

@keyframes blinker-scalar {
    50% {
        transform: scale(1.07);
        opacity: .5;
    }
}

.superbox {
    border: none;
    outline: none;
    background-color: transparent;
    height: 87px;
    margin: 1px -5px;
    width: 130px;
    overflow: hidden;
/*    padding: 3px 0px;*/
}

/*option:checked {
    display: none;
}*/



.ddindent {
    transition: all .1s ease-in-out;
    border-radius: 15px;
    /*        width: 160px;*/
    padding: 5px 10px;
    /*        margin: 3px 0px;*/
    line-height: 20px;
    font-size: 15px;
    text-align: left;
    transform: scale(.95);
    -webkit-transform: scale(.95);
    -moz-transform: scale(.95);
    -ms-transform: scale(.95);
}

    .ddindent:checked {
        background-color: #767676;
        color: white;
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        pointer-events: none;
        cursor: default;
    }

    .ddindent:hover {
        cursor: pointer;
        background-color: rgba(146, 166, 176, .2);
        /*            color: white;*/
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
    }


.logoButton {
    transition: all .2s ease-in-out;
    background-color: transparent;
    color: white;
    font-weight: 700;
    text-align: center;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    border: none;
    margin-left: 0px;
    margin-bottom: 3px;
}

    .logoButton:hover {
        transition: all .05s ease-in-out;
        transform: scale(.95);
        -webkit-transform: scale(.95);
        -moz-transform: scale(.95);
        -ms-transform: scale(.95);
    }

    .logoButton:focus {
        outline: none;
        box-shadow: none;
    }

    .logoButton.clicked {
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
    }

        .logoButton.clicked:hover {
            transform: scale(.95);
            -webkit-transform: scale(.95);
            -moz-transform: scale(.95);
            -ms-transform: scale(.95);
        }


#editAttDiv {
    position: absolute;
    display: none;
    max-height: calc(100vh - 40px);
    /*    top: 50vh;*/
/*    right: 73px;*/
    /*    left: calc(100vw - 673px);*/
/*    bottom: 90vh;*/
    overflow: scroll;
    padding: 20px 25px;
    padding-right: 20px;
    padding-bottom: 0;
    max-width: 450px;
    /* min-width: 420px; */
    overflow-x: hidden;
}

#edit3DDiv {
    position: fixed;
    display: none;
    max-height: 40vh;
    /*    top: 50vh;*/
    /*    right: 73px;*/
    /*    left: calc(100vw - 673px);*/
    /*    bottom: 90vh;*/
    overflow: auto;
    padding: 20px;
    margin: auto;
    /*    max-width: 90vw;*/
    bottom: 20px;
    right: 90px;
    background: rgba(255,255,255,.9);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    -webkit-box-shadow: 0px 0px 8px var(--dark-shadow) !important;
    -moz-box-shadow: 0px 0px 8px var(--dark-shadow) !important;
    box-shadow: 0px 0px 8px var(--dark-shadow) !important;
    border-radius: 20px;
    text-align: center;
    border: solid var(--border-width) var(--gray-light);
    /*    overflow-x: hidden;*/
}


#attEditTable th {
    background-color: none !important;
    background: none !important;
    vertical-align: middle !important;
    padding: 0px 0px !important;
    margin: 0px 0px !important;
}

#attEditTable tr {
    background-color: none !important;
    background: none;
    vertical-align: middle !important;
    padding: 0px 0px;
    margin: 0px 0px;
}

#attEditTable td {
    background-color: none !important;
    background: none;
    vertical-align: middle !important;
    padding: 0px;
    padding-bottom: 18px;
    margin: 0px 0px;
}

#attEditTable tr:last-child td {
    padding-bottom: 5px;
    padding-top: 20px;
}

#attEditTable {
    border-collapse: collapse !important;
    border: none !important;
    background-color: none !important;
    padding: 0px 0px !important;
    margin: auto !important;
    justify-content: center !important;
    text-align: center !important;
    min-width: 400px !important;
}

    #attEditTable th {
        /*        color: white;*/
        /*        background-color: white;*/
        /*        position: sticky;*/
        /*        top: 0;*/
        /*        font-style: normal;*/
        font-weight: 700 !important;
        /*        padding: 5px 10px 5px 10px;*/
    }

    /*    #attQryTable tr {
        border: solid;
        border-width: 1px 0;
    }*/

    /*#attEditTable tr:hover {
        background-color: none !important;
        background: none !important;*/
        /*        color: white !important;*/
    /*}

    #attEditTable td:hover {
        background-color: none !important;
        background: none !important;*/
        /*        color: white !important;*/
    /*}*/


#table-3dfiles {
    border-collapse: separate;
    border-spacing: 0px 10px;
    border: none;
    background-color: none;
    padding: 0px 0px;
    margin: 0px 0px;
/*    margin-top: -30px;*/
    font-size: .8rem;
}

#table-3dfiles th {
    background-color: none;
    background: none;
    vertical-align: middle;
    padding: 10px 5px;
    margin: 0px 0px;
    text-align: center;
    font-weight: 500;
}

#table-3dfiles tr {
    background-color: none;
    background: rgba(146, 166, 176, .1);
    vertical-align: middle;
    padding: 0px 0px;
    margin: 0px 0px;
}

    #table-3dfiles tr:first-child {
        background: none;
    }

#table-3dfiles td {
    background-color: none;
    background: none;
    vertical-align: middle;
    padding: 10px 0px;
    margin: 0px 0px;
    text-align: center;
}

    #table-3dfiles td:first-child,
    #table-3dfiles th:first-child {
        border-radius: 20px 0 0 20px;
    }

    #table-3dfiles td:nth-last-child(2),
    #table-3dfiles th:nth-last-child(2) {
        border-radius: 0 20px 20px 0;
    }

    #table-3dfiles td:last-child,
    #table-3dfiles th:last-child {
/*        border-radius: 0 20px 20px 0;*/
        display: none;
    }

    #table-3dfiles tr:hover {
        background-color: none;
        background: rgba(255, 195, 72, .3);
    }

    #table-3dfiles tr:first-child:hover {
        background: none;
    }

    #table-3dfiles td:hover {
        font-weight: 700;
    }

.silent-input {
    background: none;
    border: none;
    outline: none;
    text-align: center;
    max-width: 75px;
    padding: 0px 0px;
}

    .silent-input:hover {
        color: var(--blue);
    }

#attEditTable2 th {
    background-color: none !important;
    background: none !important;
    vertical-align: middle !important;
    padding: 0px 0px !important;
    margin: 0px 0px !important;
}

#attEditTable2 tr {
    background-color: none !important;
    background: none !important;
    vertical-align: middle !important;
    padding: 0px 0px !important;
    margin: 0px 0px !important;
}

#attEditTable2 td {
    background-color: none !important;
    background: none !important;
    vertical-align: middle !important;
    padding: 5px 0px !important;
    margin: 0px 0px !important;
}

#attEditTable2 {
    border-collapse: collapse !important;
    border: none !important;
    background-color: none !important;
    padding: 0px 0px !important;
    margin: -5px 0px !important;
}

    #attEditTable2 th {
        /*        color: white;*/
        /*        background-color: white;*/
        /*        position: sticky;*/
        /*        top: 0;*/
        /*        font-style: normal;*/
        font-weight: 700 !important;
        /*        padding: 5px 10px 5px 10px;*/
    }

    /*    #attQryTable tr {
        border: solid;
        border-width: 1px 0;
    }*/

    #attEditTable2 tr:hover {
        background-color: none !important;
        background: none !important;
        /*        color: white !important;*/
    }

    #attEditTable2 td:hover {
        background-color: none !important;
        background: none !important;
        /*        color: white !important;*/
    }

.edit_box {
    transition: border-color .2s ease-in-out;
    display: inline-block !important;
    /*    border: solid 1px var(--gray) !important;*/
    border-radius: 20px !important;
    min-width: 100% !important;
    max-width: 225px !important;
    /* width: 100% !important; */
    /* max-width: 250PX !important; */
    padding: 0 10px !important;
    /*    height: 35px !important;*/
    background: #F2F9FF !important;
    text-align: center !important;
    border: solid var(--border-width-small) var(--gray-light-5) !important;
    min-height: 40px !important;
    /*    -webkit-box-shadow: inset 0px 0px 8px -3px rgba(0,0,0,0.05);
    -moz-box-shadow: inset 0px 0px 8px -3px rgba(0,0,0,0.05);
    box-shadow: inset 0px 0px 8px -3px rgba(0,0,0,0.05);*/
}
    .edit_box:focus {
        outline: none;
    }

    .edit_box:hover {
        background: rgba(146, 166, 176, .03) !important;
        border: solid var(--border-width-small) var(--blue) !important;
        /*        -webkit-box-shadow: inset 0px 0px 8px -3px rgba(0,0,0,0.25);
        -moz-box-shadow: inset 0px 0px 8px -3px rgba(0,0,0,0.25);
        box-shadow: inset 0px 0px 8px -3px rgba(0,0,0,0.25);*/
    }

.edit_box-simple {
    display: inline-block !important;
    border-radius: 20px !important;
    min-width: 100% !important;
    max-width: 225px !important;
    padding: 5px 10px !important;
    background: rgba(146, 166, 176, .03) !important;
    text-align: center !important;
    border: solid var(--border-width) rgba(146, 166, 176, 0) !important;
    min-height: 40px !important;
}

    .edit_box-simple:focus {
        outline: none;
    }

    .edit_box-simple:hover {
        background: rgba(146, 166, 176, .06) !important;
        border: solid var(--border-width) rgba(146, 166, 176, 0) !important;
    }

.edit_box-clean {
    display: inline-block !important;
    max-width: 100px;
    padding: 0px;
    background: rgba(255,255,255,0);
    border: none;
    font-weight: 700;
    padding: 5px 10px;
}

    .edit_box-clean:focus {
        outline: none;
    }

/*    .edit_box-clean:hover {
        font-weight: 700;
    }*/

.edit_box-clean2 {
    display: inline-block !important;
    max-width: 115px;
    padding: 0px;
    background: rgba(255,255,255,0);
    border: solid 1px transparent;
    padding: 5px 10px;
    border-radius: 15px;
    font-weight: 700;
    transition: all .2s ease-in-out;
}

    .edit_box-clean2:focus {
        outline: none;
    }

    .edit_box-clean2:hover {
        border: solid 1px var(--gray-light);
    }

.semitransparent {
    opacity: .5 !important;
}

@media screen and (max-width: 1000px) {


    .alt-eye {
        transform: translateY(-6px) translateX(-10px);
        -webkit-transform: translateY(-6px) translateX(-10px);
        -moz-transform: translateY(-6px) translateX(-10px);
        -ms-transform: translateY(-6px) translateX(-10px);
    }

    .featureEditor {
        transform: translateY(-50px) translateX(-35px);
        -webkit-transform: translateY(-50px) translateX(-35px);
        -moz-transform: translateY(-50px) translateX(-35px);
        -ms-transform: translateY(-50px) translateX(-35px);
    }

        .featureEditor:hover {
            color: rgba(146, 166, 176, 1);
            animation: unset;
        }

    .projectSharer {
        transform: translateY(-22px) translateX(-35px);
        -webkit-transform: translateY(-22px) translateX(-35px);
        -moz-transform: translateY(-22px) translateX(-35px);
        -ms-transform: translateY(-22px) translateX(-35px);
    }

    .projectDownloader {
        transform: translateY(-22px) translateX(-35px);
        -webkit-transform: translateY(-22px) translateX(-35px);
        -moz-transform: translateY(-22px) translateX(-35px);
        -ms-transform: translateY(-22px) translateX(-35px);
    }

    .edit_box {
        max-width: 150px !important;
    }

    .edit_box-simple {
        max-width: 150px !important;
    }


    #editAttDiv {
        max-width: 450px !important;
        min-width: 150px !important;
        right: unset !important;
        left: 10px !important;
        top: 50% !important;
        bottom: 10px !important;
        /*        max-height: calc(40% - 0px) !important;*/
        transform-origin: bottom !important;
        -webkit-transform-origin: bottom !important;
        -ms-transform-origin: bottom !important;
        -moz-transform-origin: bottom !important;
    }

    #edit3DDiv {
        max-width: 100% !important;
        min-width: 150px !important;
        right: 10px !important;
        left: 10px !important;
        top: 60% !important;
        bottom: 10px !important;
        /*        max-height: calc(40% - 0px) !important;*/
        transform-origin: bottom !important;
        -webkit-transform-origin: bottom !important;
        -ms-transform-origin: bottom !important;
        -moz-transform-origin: bottom !important;
    }

    
    
    #attEditTable td {
        max-width: 150px;
    }

}

@media screen and (max-width: 500px) {
    #editAttDiv {
        max-width: 100% !important;
        right: 10px !important;
        left: 10px !important;
        top: 40% !important;
        padding: 20px 10px !important;
        padding-right: 5px !important;
        padding-bottom: 0 !important;
    }

    .edit_box {
        max-width: 40vw !important;
    }

    /* .edit_box-simple {
        max-width: 40vw !important;
    } */

    .edit_box-clean, .edit_box-clean2 {
        font-size: .85rem !important;
        max-width: 101px !important;
    }


    #attEditTable {
        min-width: 100% !important;
    }

    #attEditTable td {
        max-width: 40vw;
    }
}

.markerImg {
    margin: 0px;
    padding: 0px;
    margin-right: 5px;
}

/*.popup-logos {
    text-align: left !important;
    float: left !important;*/
/*    padding-right: 10px !important;*/
/*}*/


/*.hidden_attribute {
    visibility: hidden
}*/

.gcd-gl-btn, .gcd-gl-reset {
    display: none !important;
}

.gcd-gl-input {
    position: fixed !important;
    transition: all .2s ease-in-out;
    left: 20px !important;
    bottom: 20px !important;
    top: calc(100% - 70px) !important;
    height: 50px !important;
    border-radius: 10px !important;
    padding: 5px 15px !important;
    padding-left: 34px !important;
    border: solid var(--border-width-small) var(--gray-light-7) !important;
    background: rgba(255,255,255,.95) !important;
    -webkit-backdrop-filter: blur(2px) !important;
    backdrop-filter: blur(2px) !important;
    max-width: 50px !important;
    z-index: 3 !important;
}

    .gcd-gl-input:hover, .gcd-gl-input:focus {
        border: solid var(--border-width-small) var(--blue) !important;
        box-shadow: none !important;
        min-width: 210px !important;
        padding-left: 45px !important;
    }

.globalSearch {
    position: fixed;
    bottom: 31px;
    left: 32.5px;
    color: var(--blue);
    touch-action: none;
    pointer-events: none;
    font-size: 25px;
}

.gcd-gl-result {
    position: fixed !important;
    border-radius: 10px !important;
    /*    max-height: 200px !important;*/
    bottom: 90px !important;
    top: calc(100% - 300px) !important;
    left: 20px !important;
    border: none !important;
    background-color: rgba(255, 255, 255, .8) !important;
/*    padding: 5px 20px !important;*/
    -webkit-backdrop-filter: blur(5px) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-box-shadow: 0px 0px 16px rgba(0,0,0,.1) !important;
    -moz-box-shadow: 0px 0px 16px rgba(0,0,0,.1) !important;
    box-shadow: 0px 0px 16px rgba(0,0,0,.1) !important;
    z-index: 5000 !important;
}

.ol-geocoder ul.gcd-gl-result > li > a:hover {
    background-color: rgba(10, 155, 255, .3) !important;
}

.ol-geocoder ul.gcd-gl-result > li:nth-child(odd) {
    background-color: rgba(10, 155, 255, .1) !important;
}

/*.legend {
    max-height: 142px;
    width: 100px;
    pointer-events: none;
    padding-top: 0px;
    margin-left: -15px;
}*/

/*.ol-legend {
    display: none !important;
}*/

#actiebalk-object-text br {
    content: "";
    display: block;
    margin: 5px;
}

#actiebalk-object-button {
    min-width: 225px;
    padding: 10px;
}

@media screen and (max-width: 500px) {
    #actiebalk-object-button {
        min-width: unset;
    }

    .gcd-gl-input {
        left: 10px !important;
        bottom: 25px !important;
        top: calc(100% - 50px) !important;
        height: 40px !important;
        width: 40px !important;
        padding: 0px !important;
        padding-left: 38px !important;
    }

        .gcd-gl-input:hover, .gcd-gl-input:focus {
            width: unset !important;
            max-width: 300px !important;
            padding-left: 40px !important;
        }

    .gcd-gl-result {
        bottom: 60px !important;
        top: calc(100% - 315px) !important;
        left: 10px !important;
    }

    .globalSearch {
        position: fixed;
        bottom: 17px;
        left: 19px;
        font-size: 23px;
    }

    .value {
        padding-right: 0px !important;
        max-width: 54vw !important;
        min-width: unset !important;
    }

/*    .gcd-gl-input:hover ~ .globalSearch {
        bottom: 37px !important;
        display: none;
    }*/
}

#loadingBar {
    position: absolute;
    /*    top: 500px;*/
    left: 50px;
    width: 0px;
    height: 43px;
    bottom: 50px;
    /*    background-color: rgba(200, 200, 200, 0.8);*/
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    opacity: 1;
    display: none;
    pointer-events: none;
    z-index: 50000;
/*    background: red;*/
}

#wrapper {
    position: relative;
    top: calc(100vh - 100px);
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 50000;
    background: red;
}

#text {
    position: absolute;
    top: 12px;
    left: 120px;
    width: 30px;
    height: 50px;
    margin: auto auto auto auto;
    color: var(--gray);
    pointer-events: none;
    z-index: 50000;
}

#border {
    position: absolute;
    top: 12px;
    left: 10px;
    width: 100px;
    height: 23px;
    margin: auto auto auto auto;
    border: solid 2px var(--gray-light);
    /*    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);*/
    border-radius: 15px;
    pointer-events: none;
    z-index: 50001;
}

#bar {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 20px;
    height: 19px;
    margin: auto auto auto auto;
    border-radius: 15px;
/*    border: solid 2px var(--gray);*/
    background: var(--blue); /* Old browsers */
    /*    box-shadow: 2px 0px 4px rgba(0, 0, 0, 0.4);*/
    pointer-events: none;
    z-index: 50000;
}


#network {
    /*    transition: all .1s ease-in-out;*/
    position: fixed;
    visibility: hidden;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
/*    background-color: rgba(255,255,255,0.7);*/
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    z-index: 1945;
    outline: none;
    pointer-events: all;
    border: none;
    background: linear-gradient(45deg, var(--white-up), var(--white-down));
    -webkit-box-shadow: 0px 0px 8px var(--dark-shadow) !important;
    -moz-box-shadow: 0px 0px 8px var(--dark-shadow) !important;
    box-shadow: 0px 0px 8px var(--dark-shadow) !important;
    /*    width: 50%;*/
    /*    float: right;*/
}

    #network:hover, #network:focus {
        outline: none;
    }

#network_closer {
    /*    transition: all .1s ease-in-out;*/
    position: fixed;
    visibility: hidden;
    top: 30px;
    right: 30px;
    font-size: 30px;
    line-height: 0;
    width: 30px;
    cursor: pointer;
    z-index: 4;
    opacity: 1;
    z-index: 10001;
    color: rgba(146, 166, 176, .75);
    z-index: 50001;
    /*    background: rgba(255,255,255,1);
    border-radius: 50%;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);*/
}



/*#network_closer:after {
    content: "✖";
}*/

#network_expander {
    /*    transition: all .1s ease-in-out;*/
    position: fixed;
    visibility: hidden;
    top: calc(50% - 10px);
    left: calc(30% - 20px);
    width: 30px;
    font-size: 30px;
    line-height: 0;
    cursor: pointer;
    z-index: 4;
    opacity: 1;
    z-index: 10001;
    color: rgba(146, 166, 176, .75);
    z-index: 50001;
    /*    background: rgba(255,255,255,1);
    border-radius: 50%;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);*/
}

#network_retracter {
    /*    transition: all .1s ease-in-out;*/
    position: fixed;
    visibility: hidden;
    top: 30px;
    right: 80px;
    width: 30px;
    font-size: 30px;
    line-height: 0;
    cursor: pointer;
    z-index: 4;
    opacity: 1;
    z-index: 10001;
    color: rgba(146, 166, 176, .75);
    z-index: 50001;
    /*    background: rgba(255,255,255,1);
    border-radius: 50%;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);*/
}

#network_closer:hover {
    color: var(--red)
}

#network_expander:hover, #network_retracter:hover {
    color: var(--dark)
}

.vis-network {
    outline: none !important;
    border-radius: 20px !important;
    border: solid var(--border-width-small) var(--gray-light-7) !important;
}



@media screen and (max-width: 500px) {

    

    #network_closer {
        top: 15px;
        right: 15px;
        left: unset;
    }

    #network_retracter, #network_extractor {
        display: none
    }

    .vis-network {
        border-radius: 0px !important;
    }

}


.popup_clicked {
    position: relative;
    display: none;
/*    cursor: pointer;*/
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    /* The actual popup */
    .popup_clicked .popuptext {
        visibility: hidden;
        max-width: 210px;
        background-color: var(--dark);
        color: #fff;
        text-align: center;
        border-radius: 20px;
        padding: 15px 20px;
        position: absolute;
        z-index: 10;
        bottom: -10px;
        right: -50%;
        margin-left: -145px;
/*        margin-top: -43px;*/
/*        -webkit-animation: blinker-popup .2s linear infinite;
        animation: blinker-popup .2s linear infinite;*/
        cursor: default;
        pointer-events: all;
    }

        /* Popup arrow */
/*        .popup_clicked .popuptext::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #555 transparent transparent transparent;
        }*/

    /* Toggle this class - hide and show the popup */
    .popup_clicked .show {
        visibility: visible;
        -webkit-animation: popIn .2s;
        animation: popIn .2s;
    }

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes popIn {
    0% {
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
    }

    25% {
        transform: scale(1.1);
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
    }

    100% {
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
    }
}

@keyframes blinker-popup {
    50% {
        background-color: var(--dark-soft);
    }
}

.downloadButton:hover {
    color: var(--green) !important;
}

.shareButton {
    margin: 0px 5px;
    color: white;
}

.shareButton:hover {
    color: var(--blue);
}

.emailButton:hover {
    color: var(--yellow);
}

.clipboardButton:hover {
    color: var(--red);
}

.nomobile {
    display: block;
}

.onlymobile {
    display: none;
}

@media screen and (max-width: 500px) {
    .shareButton {
        font-size: 20px;
    }

    .nomobile {
        display: none !important;
    }
    .onlymobile {
        display: block;
    }
}

.usertable {
    /*    border-collapse: collapse;*/
    border-radius: 30px;
    border-style: hidden;
    border-collapse: separate;
    border-spacing: 0px 5px;
    margin-top: 7px;
    margin-bottom: 7px;
    width: 100%;
}

    .usertable th {
        border-radius: 5px !important;
        padding-top: 0px;
        padding-bottom: 6px;
        /* width: 50vw !important; */
    }

    /* .usertable tr {
        border-radius: 5px !important;
        padding: 5px;
        width: 50vw !important;
        font-size: .8rem !important;
        background: var(--gray-semitrans);
    } */

    .usertable td {
        border-radius: 5px !important;
        padding: 5px;
        /* width: 50vw !important; */
        font-size: .8rem !important;
        background: var(--gray-semitrans);
    }

/*    .usertable tr:nth-child(even) {
        background: rgba(127,127,127,.1);
    }

    .usertable tr:nth-child(odd) {
        background: none;
    }*/

.count-bg {
    color: white;
    background: var(--blue);
    border-radius: 15px;
    font-weight: normal;
    padding: 4px 8px;
    padding-top: 3px;
    /* margin-left: 3px; */
    /* margin-right: -9px; */
}

.more-info {
    color: var(--dark) !important;
    transition: all .2s ease-in-out;
    font-weight: 500 !important;
    padding: 7px 15px;
    padding-right: 13px;
    min-height: 3rem;
    min-width: 100% !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    margin: -1rem 0 !important;
    border-radius: 10px;
}

.less-info {
    color: var(--blue) !important;
    transition: all .2s ease-in-out;
    font-weight: 500 !important;
    padding: 7px 15px;
    padding-right: 13px;
    min-height: 3rem;
    min-width: 100% !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    margin: -1rem 0 !important;
    border-radius: 10px;
    background-color: var(--primary-color-trans-very-low);
    transform: scale(1.03);
}

.more-info span, .less-info span {
    display: flex;
    align-items: center;
    gap: 10px;
}

.more-info span div, .less-info span div {
    display: flex;
    align-items: center;
    text-align: left;
    gap: 10px;
}

.more-info .bi-chevron-down {
    font-size: 1.25rem;
    transition: all .2s ease-in-out;
}

.less-info .bi-chevron-up {
    font-size: 1.25rem;
    transition: all .2s ease-in-out;
}

@media screen and (min-width: 1000px) {
    .more-info:hover {
        /* background: var(--blue);
        color: white !important;
        border: solid 2px var(--blue); */
        /* opacity: .8; */
        background-color: var(--gray-light-2);
        transform: scale(1.03);
    }

    /* .more-info:hover .bi-chevron-down {
        transform: scale(1.2);
    } */

    .less-info:hover {
        /* color: white !important;
        border: solid 2px var(--blue);
        background: var(--blue); */
        opacity: .8;
    }

    /* .less-info:hover .bi-chevron-up {
        transform: scale(1.2);
    } */
}

/* Style the buttons that are used to open and close the accordion panel */
.accordion {
    cursor: pointer;
    border: none !important;
    outline: none !important;
/*    transition: all .1s ease-in-out;*/
    background: none !important;
    width: 100%;
    height: 100%;
    padding: 3px 0px;
}


    /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
/*    .active-panel, .accordion:hover {
        background-color: #ccc;
    }*/

/* Style the accordion panel. Note: hidden by default */
.panel-accor {
/*    padding: 0 18px;*/
    padding: 0 5px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height .2s ease-out;
    font-size: .6rem;
    border-radius: 5px;
}


.accordion2 {
    cursor: pointer;
    transition: all .15s ease-in-out;
}

.panel-accor2 {
    max-height: 0;
    overflow: hidden;
    transition: max-height .15s ease-out;
    margin-bottom: 5px;
}

.panel-info {
    font-size: .75rem;
    line-height: 1;
}

@media screen and (max-width: 1000px) {
    .panel-accor {
        font-size: .5rem;
    }

    .panel-item {
        font-size: 12px;
    }

    .panel-info {
        font-size: 14px;
    }

    .email-small {
        font-size: 10px !important;
        margin-left: 3px;
    }


}


.tooltip-custom {
    position: relative;
    display: inline-block;
}

    .tooltip-custom .tooltiptext-custom {
        visibility: hidden;
        width: 150px;
        background-color: var(--dark);
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 3px;
        position: absolute;
        z-index: 9999;
        bottom: 110%;
        left: 50%;
        margin-left: -90px;
        opacity: 0;
        transition: opacity 0.3s;
        font-size: .55rem;
        
    }

/*        .tooltip-custom .tooltiptext-custom::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #555 transparent transparent transparent;
        }*/

    .tooltip-custom:hover .tooltiptext-custom {
        visibility: visible;
        opacity: 1;
    }

@media screen and (max-width: 500px) {
    .tooltip-custom .tooltiptext-custom {
        width: 200px;
        font-size: 11px;
    }
}


/*!
 * ol-geocoder - v4.1.2
 * A geocoder extension for OpenLayers.
 * https://github.com/jonataswalker/ol-geocoder
 * Built: Wed Jan 20 2021 10:05:07 GMT-0300 (Brasilia Standard Time)
 */
.ol-touch .ol-control.gcd-gl-control button {
    font-size: 1.14em;
}

.ol-touch .ol-geocoder.gcd-gl-container {
    font-size: 1.1em;
}

.ol-geocoder.gcd-gl-container {
    position: absolute;
    top: 4.875em;
    left: .5em;
    box-sizing: border-box;
    font-size: 0.9em;
}

    .ol-geocoder.gcd-gl-container *,
    .ol-geocoder.gcd-gl-container *::before,
    .ol-geocoder.gcd-gl-container *::after {
        box-sizing: inherit;
    }

.ol-geocoder .gcd-gl-control {
    width: 2.1875em;
    height: 2.1875em;
    overflow: hidden;
    transition: width 200ms, height 200ms;
}

.ol-geocoder .gcd-gl-expanded {
    width: 15.625em;
    height: 2.1875em;
}

.ol-geocoder {
    touch-action: none !important;
    pointer-events: none !important;
}

.ol-geocoder .gcd-gl-input {
    position: absolute;
    z-index: 99;
    top: 0.25em;
    left: 2.5em;
    width: 14.84375em;
    padding: 5px;
    border: 1px solid #ccc;
    font-family: inherit;
    font-size: 0.875em;
    background-color: #fff;
    color: #222;
    touch-action: auto !important;
    pointer-events: all !important;
    /* cursor: pointer; */
}

    .ol-geocoder .gcd-gl-input:focus {
        border: none;
        outline: none;
        box-shadow: inset 0 0 0 1px #4d90fe, inset 0 0 5px #4d90fe;
    }

.ol-geocoder .gcd-gl-reset {
    position: absolute;
    z-index: 100;
    top: 0;
    right: 0;
    width: 1.5625em;
    height: 100%;
    line-height: 1.4;
    border: none;
    background-color: transparent;
    display: inline-block;
    outline: 0;
    cursor: pointer;
}

    .ol-geocoder .gcd-gl-reset::after {
        content: "\d7";
        display: inline-block;
        color: #333;
        font-size: 1.5em;
        cursor: pointer;
    }

.ol-geocoder .gcd-gl-btn {
    position: absolute;
    width: 1.5625em;
    height: 1.5625em;
    top: 0.125em;
    left: 0.125em;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAABPUlEQVQoU41SwXHCQAzUHh58eoUOIBWEDkI6oAToIKkg7iAuwakgpAIowXRACcnrzp6BzchjMx4wE/S6kW5XK60gvQghzJIkmVoqSZI9gJ9+/fINS5Cc1HX9QXIlIr/tpwcRyb33b7cIGnAIYQdg4pxbjcfj0nJ1Xc+Px+PGObdN03Q9RIAQwgpAnqbp7FKmjQGgJLlU1d2V7BjjRkQO3vvXIXarkyxVNbsCm2QR2Q0V7XOMMReRmfd+OQQubN6hYgs22ZtbnRcAtiRfLueqqmpJ8ovko6oeBq0KIWQA3gFkzrlmMafTaUEyI/mpqmbhVTRWWbRdbClPbeobQNES5KPRqOxs7DBn8K1DsAOKMZYApiTXqlrcDe4d0XN7jWeCfzt351tVle2iGalTcBd4gGDvvZ/fDe4RmCOFLe8Pr7mvEP2N9PQAAAAASUVORK5CYII=");
    background-repeat: no-repeat;
    background-position: center center;
}

.ol-geocoder ul.gcd-gl-result {
    position: absolute;
    top: 2.1875em;
    left: 2em;
    width: 16.25em;
    max-height: 18.75em;
    white-space: normal;
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: white;
    border-radius: 4px;
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    overflow-x: hidden;
    overflow-y: auto;
    box-shadow: 0 1px 7px rgba(0, 0, 0, 0.8);
    transition: max-height 300ms ease-in;
    touch-action: auto !important;
    pointer-events: all !important;
}

    .ol-geocoder ul.gcd-gl-result > li {
        width: 100%;
        overflow: hidden;
        border-bottom: 1px solid #eee;
        padding: 0;
        line-height: 0.875rem;
    }

        .ol-geocoder ul.gcd-gl-result > li > a {
            display: block;
            text-decoration: none;
            padding: 3px 5px;
        }

            .ol-geocoder ul.gcd-gl-result > li > a:hover {
                background-color: #d4d4d4;
            }

        .ol-geocoder ul.gcd-gl-result > li:nth-child(odd) {
            background-color: #e0ffe0;
        }

    .ol-geocoder ul.gcd-gl-result:empty {
        display: none;
    }

.ol-geocoder.gcd-txt-container {
    position: absolute;
    width: 25em;
    height: 4.375em;
    top: .5em;
    left: calc(50% - 12.5em);
    box-sizing: border-box;
}

    .ol-geocoder.gcd-txt-container *,
    .ol-geocoder.gcd-txt-container *::before,
    .ol-geocoder.gcd-txt-container *::after {
        box-sizing: inherit;
    }

.ol-geocoder .gcd-txt-control {
    position: relative;
    width: 100%;
    height: 4.375em;
    border: 1px solid #ccc;
    background-color: #fff;
    overflow: hidden;
}

.ol-geocoder .gcd-txt-input {
    position: absolute;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 5px 30px 5px 40px;
    border: none;
    text-indent: 6px;
    background-color: transparent;
    font-family: inherit;
    font-size: 0.875em;
}

    .ol-geocoder .gcd-txt-input:focus {
        outline: none;
        box-shadow: inset 0 0 0 1px #4d90fe, inset 0 0 6px #4d90fe;
    }

.ol-geocoder .gcd-txt-reset {
    position: absolute;
    z-index: 100;
    top: 0;
    right: 0;
    width: 2.5em;
    height: 100%;
    line-height: 100%;
    border: none;
    background-color: transparent;
    display: inline-block;
    vertical-align: middle;
    outline: 0;
    cursor: pointer;
}

    .ol-geocoder .gcd-txt-reset::after {
        content: "\d7";
        display: inline-block;
        color: #333;
        font-size: 2em;
        cursor: pointer;
    }

.ol-geocoder .gcd-txt-glass {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    display: inline-block;
    width: 2.5em;
    height: 100%;
    background-size: 1.38889em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%23333' d='M29.156 29.961l-.709.709a2.006 2.006 0 0 1-2.838 0l-5.676-5.674c-.656-.658-.729-1.644-.281-2.412l-3.104-3.102a9.975 9.975 0 0 1-5.965 1.979C5.043 21.461.552 16.97.552 11.43S5.043 1.398 10.583 1.398c5.541 0 10.031 4.491 10.031 10.032 0 2.579-.98 4.923-2.58 6.7l3.035 3.035c.768-.447 1.754-.375 2.41.283l5.676 5.674c.784.785.784 2.056.001 2.839zM18.088 11.389c0-4.155-3.369-7.523-7.524-7.523a7.523 7.523 0 1 0-.001 15.046 7.525 7.525 0 0 0 7.525-7.523z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center center;
}

.ol-geocoder ul.gcd-txt-result {
    position: absolute;
    top: 4.575em;
    left: 0;
    width: 25em;
    max-height: 18.75em;
    white-space: normal;
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: white;
    border-radius: 4px;
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    overflow-x: hidden;
    overflow-y: auto;
    box-shadow: 0 1px 7px rgba(0, 0, 0, 0.8);
    transition: max-height 300ms ease-in;
}

    .ol-geocoder ul.gcd-txt-result > li {
        width: 100%;
        overflow: hidden;
        border-bottom: 1px solid #eee;
        padding: 0;
        line-height: 0.875rem;
    }

        .ol-geocoder ul.gcd-txt-result > li > a {
            display: block;
            text-decoration: none;
            padding: 3px 5px;
        }

            .ol-geocoder ul.gcd-txt-result > li > a:hover {
                background-color: #d4d4d4;
            }

        .ol-geocoder ul.gcd-txt-result > li:nth-child(odd) {
            background-color: #e0ffe0;
        }

    .ol-geocoder ul.gcd-txt-result:empty {
        display: none;
    }

.ol-geocoder .gcd-hidden {
    opacity: 0;
    visibility: hidden;
}

.ol-geocoder .gcd-pseudo-rotate::after {
    -webkit-animation: spin .7s linear infinite;
    animation: spin .7s linear infinite;
}

@-webkit-keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.gcd-address {
    font-size: 0.875em;
    font-weight: 500;
    color: #333;
}

.gcd-road {
    font-size: 0.875em;
    font-weight: 500;
    color: #333;
}

.gcd-city {
    font-size: 0.75em;
    font-weight: normal;
    color: #333;
}

.gcd-country {
    font-size: 0.75em;
    font-weight: lighter;
    color: #333;
}

.slider {
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    opacity: 1;
    color: white;
    display: inline-block;
    width: 100%;
    background: var(--blue-bg);
    height: 40.5px;
    border-radius: 20px;
    cursor: pointer;
    transition: all .15s ease-in-out;
    -webkit-transition: all .15s ease-in-out;
    -moz-transition: all .15s ease-in-out;
    -o-transition: all .15s ease-in-out;
}

    .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 60px;
        height: 40.5px;
        cursor: default;
        border-radius: 20px;
        border: none;
        -webkit-transition: all .15s ease-in-out;
        -moz-transition: all .15s ease-in-out;
        -o-transition: all .15s ease-in-out;
        background: none;
    }

    .slider::-moz-range-thumb {
        width: 60px;
        height: 40.5px;
        cursor: default;
        border-radius: 20px;
        border: none;
        -webkit-transition: all .15s ease-in-out;
        -moz-transition: all .15s ease-in-out;
        -o-transition: all .15s ease-in-out;
        background: none;
    }

@media screen and (max-width: 500px) {
    .slider {
        height: 42.5px;
    }
}


.slider2 {
    -webkit-appearance: none;
    /*    width: 100%;
    height: 25px;*/
    background: var(--gray-light);
    outline: none;
    /*    opacity: 0.5;*/
    /*    -webkit-transition: .2s;
    transition: opacity .2s;*/
    display: inline-block;
    width: 60px;
    margin-left: 16px;
    height: 9px;
    border-radius: 5px;
    cursor: pointer;
    transition: all .15s ease-in-out;
    -webkit-transition: all .15s ease-in-out;
    -moz-transition: all .15s ease-in-out;
    -o-transition: all .15s ease-in-out;
}

/*    .slider2:hover {
        opacity: 1;
    }*/

    .slider2::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        background: white;
        cursor: grab;
        border-radius: 50%;
        border: solid 3px var(--blue);
        -webkit-transition: all .15s ease-in-out;
        -moz-transition: all .15s ease-in-out;
        -o-transition: all .15s ease-in-out;
    }

        .slider2::-webkit-slider-thumb:hover {
            background: var(--blue);
        }

    .slider2::-moz-range-thumb {
        width: 20px;
        height: 20px;
        background: white;
        cursor: grab;
        border-radius: 50%;
        border: solid 3px var(--blue);
        -webkit-transition: all .15s ease-in-out;
        -moz-transition: all .15s ease-in-out;
        -o-transition: all .15s ease-in-out;
    }

        .slider2::-moz-range-thumb:hover {
            background: var(--blue);
        }

.level-output {
    font-weight: bold;
    font-size: 1.3rem;
    vertical-align: middle;
    color: var(--blue);
}

/*.checkmarker {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}*/
/* Hide the browser's default checkbox */
/*.checkmarker input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }*/
/* Create a custom checkbox */
/*.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
}*/
/* On mouse-over, add a grey background color */
/*.checkmarker:hover input ~ .checkmark {
    background-color: #ccc;
}*/
/* When the checkbox is checked, add a blue background */
/*.checkmarker input:checked ~ .checkmark {
    background-color: #2196F3;
}*/
/* Create the checkmark/indicator (hidden when not checked) */
/*.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}*/
/* Show the checkmark when checked */
/*.checkmarker input:checked ~ .checkmark:after {
    display: block;
}*/
/* Style the checkmark/indicator */
/*.checkmarker.checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}*/
/*#top-section {
    margin-left: 8px;
}*/
/*.border {
    border: none;
    background: white;
}*/
#items-container {
    overflow-y: scroll;
    overflow-x: hidden;
    height: 350px;
    background: none !important;
    border: none !important;
    margin-top: 10px;
    margin-right: -14px;
}


    #items-container > .list {
        background: none !important;
        padding: 0px;
    }

    #items-container .list li {
        margin-bottom: 8px;
        margin-right: 5px;
        border-radius: 5px !important;
        padding: 8px 8px;
        font-size: .8rem !important;
        background: var(--gray-semitrans);
    }


/*.input-container {
    position: relative;
    display: flex;
    background: none;
    width: 100%;
    padding: 0;
}

input[type="range"] {
    appearance: none;
    background-color: red;
    width: 100%;
    height: 20px;
    padding: 0;
}

    input[type="range"]::-webkit-slider-thumb {
        -moz-appearance: none !important;
        appearance: none !important;
        position: relative;
        height: 20px;
        width: 30px;
        background: transparent;
        cursor: pointer;*/
        /*        z-index: 2;*/
    /*}*/

/*    input[type="range"]::-moz-range-thumb {
        -moz-appearance: none !important;
        appearance: none !important;
        position: relative;
        height: 20px;
        width: 100px;
        background: transparent;
        cursor: pointer;
        z-index: 2;
    }*/

/*.range-text {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: skyblue;
    text-align: center;
    line-height: 1;
    height: 20px;
    width: 30px;
    transform: translate(0, 2px);
}*/

.level-clicked {
    color: var(--dark) !important;
}

.level_default {
    text-align: center;
    border-radius: 20px;
    padding: 6px 0;
    padding-top: 7px;
    flex-grow: 1;
    min-width: 60px;
    font-size: 1rem;
}


.closerx {
    float: right;
    cursor: pointer;
    color: white;
    border-radius: 50%;
    background: none;
    font-size: 30px;
    font-weight: normal;
    display: inline-block;
    line-height: 30px;
    padding: 0px 8px;
    padding-bottom: 4px;
    position: absolute;
    right: 2px;
    top: 1px;
    z-index: 1002;
    opacity: 1;
    transform: scale(.8);
    text-decoration: none;
}

    .closerx:before {
        content: "×";
    }

    .closerx:hover {
        transition: all .1s ease-in-out;
        transform: scale(1);
        color: var(--red) !important;
        font-weight: bold;
    }

input[type="range"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

#welcome_ea {
    position: absolute;
    right: 0;
    bottom: 30px;
    left: 0;
    z-index: 998 !important;
    display: none;
    text-align: center;
    width: 95%;
    max-width: 310px;
    min-width: 200px;
    max-height: 80%;
    padding: 22px 30px;
    padding-bottom: 22px;
    margin: auto;
    color: #fff !important;
    background: radial-gradient(rgba(26,26,55,.9) 60%, rgba(26,26,55,.85) 100%);
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px;
}

@media screen and (max-width: 500px) {
    #welcome_ea {
        right: 10px;
        bottom: 10px;
        left: 10px;
        width: unset;
        max-width: 310px;
        padding: 20px 30px;
        padding-bottom: 20px;
    }
}

.actieelement {
    display: inline-block;
    background: white;
    padding: 0px 15px;
    padding-top: 7px;
/*    padding-bottom: 9px;*/
/*    margin: 0px 10px;*/
    margin: 0px;
    border-radius: 10px;
    height: 40px;
    /*    font-weight: bold;*/
    color: var(--gray);
    font-size: 19px !important;
    pointer-events: all;
    vertical-align: middle;
    -webkit-box-shadow: 0px 0px 4px var(--dark-shadow);
    -moz-box-shadow: 0px 0px 4px var(--dark-shadow);
    box-shadow: 0px 0px 4px var(--dark-shadow);
    border: solid 2px var(--gray);
    cursor: pointer;
}

.actiebalk {
    position: fixed;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    top: 20px;
    right: 0px;
    align-items: center;
    z-index: 1;
    width: 100%;
    gap: 15px;
    pointer-events: none;
}

.actiebalk button {
    margin: unset !important;
}

.info-button {
    font-size: 17px;
    outline: none;
    border: none;
    background: none;
    transition: all .1s ease-in-out;
    height: 33px;
    padding-top: 5px;
    pointer-events: all;
}

.info-button-alt {
    position: absolute;
    top: 50px;
    padding-top: 5px;
}

/*    .info-button:hover {
        height: 31px;
        padding-top: 6px;
    }*/

.info-button-icon {
    display: inline-block;
    background: var(--blue-bg);
    border-radius: 10px 0px 0px 10px;
    margin: 0px;
    height: 32px;
    width: 38px;
    padding: 0px 5px;
    padding-top: inherit;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    border-style: solid;
    border-width: var(--border-width) 0 var(--border-width) var(--border-width);
    border-color: var(--gray-light);
    pointer-events: all;
    color: var(--blue);
    transition: all .2s ease-in-out;
}

.info-button-icon-alt2 {
    border-radius: 10px 0px 0px 10px;
    border-width: var(--border-width) 0px var(--border-width) var(--border-width);
}




.info-button-text {
    display: inline-block;
    color: var(--gray);
    background: rgba(255,255,255,.95);
    border-radius: 0px 10px 10px 0px;
    margin: 0px;
    height: 32px;
    padding: 0px 10px;
    padding-top: inherit;
    padding-right: 13px;
    margin-left: -5px;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    font-weight: bold;
    pointer-events: all;
    border-style: solid;
    border-width: var(--border-width) var(--border-width) var(--border-width) 0;
    border-color: var(--gray-light);
    transition: all .2s ease-in-out;
}

@media (min-width: 1000px) {
    .info-button:hover > .info-button-icon {
        background: var(--blue);
        color: white;
        border-color: var(--blue);
    }

    .info-button:hover > .info-button-text {
        color: white;
        background: var(--blue);
        border-color: var(--blue);
    }
}

.info-button-text-alt {
    border-radius: 0px 10px 10px 0px;
    padding-top: 5px;
}

.info-button-text-dark {
    display: inline-block;
    color: white;
    background: var(--blue);
    border-radius: 10px;
    margin: 0px;
    height: inherit;
    padding: 0px 10px;
    padding-top: inherit;
    padding-right: 13px;
    margin-left: 0px;
    font-weight: bold;
    pointer-events: all;
    border-style: solid;
    border-width: var(--border-width);
    border-color: var(--blue);
    transition: all .2s ease-in-out;
}

.info-button:hover > .info-button-text-dark {
    transform: scale(1.1);
    border-color: var(--blue);
}

.info-button-icon-alt {
    font-size: 17px !important;
}

.info-actiebalk {
    color: white;
    font-size: 17px;
    line-height: 23px;
    vertical-align: top;
    margin-right: 5px;
}

.desc-section {
    padding: 0;
    margin: -5px;
    margin-top: 0;
    padding: 20px 16px;
    padding-bottom: 7px;
    margin-bottom: 0px;
    width: 100%;
    margin: auto;
}

.note-section {
    padding: 0;
    margin: -5px;
    margin-top: 0;
/*    background: var(--red);*/
    padding: 20px 26px;
    padding-bottom: 0px;
    margin-bottom: 0px;
    margin-right: 20px;
}

@media screen and (max-width: 1000px) {

    .info-button {
        padding-top: 6px;
    }

    .desc-section {
        margin: 0px;
        padding: 20px 22px;
        padding-bottom: 15px;
    }

    .actiebalk {
        top: unset;
        right: unset;
        left: unset;
        bottom: 20px;
        padding: 0 55px;
        margin: auto;
        gap: 10px 10px;
    }

    /*.info-actiebalk {
        font-size: 14px;
        line-height: 23px;
        margin-right: 3px;
    }*/

    .info-button {
/*        padding-top: 2px;*/
        height: 31px;
    }

    /*.info-button-icon {
        border-radius: 10px 0px 0px 0px;*/
/*        border-width: var(--b 0px 0px 0px;*/
        /*width: 32px;
    }

    .info-button-icon-alt {
        font-size: 7px !important;
    }*/

    .info-button-text {
/*        border-radius: 0px 10px 0px 0px;
        padding: 0px 7px;*/
        padding-top: inherit;
/*        background: red;*/
    }

    /*.info-button-text-dark {
        border-radius: 10px 10px 0px 0px;
        padding: 0px 7px;
        padding-top: inherit;
        padding-right: 9px;
        line-height: 20px;
    }*/

    .info-button-alt {
/*        position: absolute;*/
        top: unset;
        bottom: 45px;
/*        padding-top: 3px;
        height: 29px;*/
    }

    /*.info-button-text-alt {
        border-radius: 0px 10px 10px 0px;
        padding-top: 5px;
    }

    .info-button-icon-alt2 {
        border-radius: 10px 0px 0px 10px;
        border-width: 2px 0px 2px 2px;
    }*/
}

@media screen and (max-width: 500px) {
    .actiebalk {
        bottom: 10px;
    }
}

.bi-question-circle {
    cursor: help !important;
}

.cesium-credit-logoContainer {
    opacity: .5 !important;
    left: 17px !important;
    bottom: 17px !important;
    position: absolute !important;
    display: none !important;
}

.cesium-credit-logoContainer:hover {
    opacity: 1 !important;
}

.cesium-credit-textContainer, .cesium-credit-expand-link {
    opacity: .7 !important;
    left: 43px !important;
    bottom: 7px !important;
    position: absolute !important;
}

.cesium-credit-textContainer:hover, .cesium-credit-expand-link {
    opacity: 1 !important;
}

    .cesium-credit-textContainer a {
        color: rgba(146, 166, 176, 1);
        text-shadow: -1px -1px 0 rgba(255,255,255,.5), 1px -1px 0 rgba(255,255,255,.5), -1px 1px 0 rgba(255,255,255,.5), 1px 1px 0 rgba(255,255,255,.5);
    }

    .cesium-credit-textContainer div {
        color: rgba(146, 166, 176, 1);
        text-shadow: -1px -1px 0 rgba(255,255,255,.5), 1px -1px 0 rgba(255,255,255,.5), -1px 1px 0 rgba(255,255,255,.5), 1px 1px 0 rgba(255,255,255,.5);
    }

#awaiting-3d {
    display: none;
    position: fixed;
    z-index: 2000;
    top: 10px;
    right: 10px;
    left: 10px;
    bottom: 10px;
    max-width: 120px;
    max-height: 60px;
    margin: auto;
    border-radius: 15px;
    border: solid 1.5px var(--gray-light);
    padding: 8px 10px;
    text-align: center;
    font-weight: bold;
    color: var(--dark);
    line-height: 1.5;
    background: rgba(255,255,255,.7);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    -webkit-box-shadow: 0px 0px 8px var(--dark-shadow);
    -moz-box-shadow: 0px 0px 8px var(--dark-shadow);
    box-shadow: 0px 0px 8px var(--dark-shadow);
    animation: blinker3d 1s linear infinite;
}

@keyframes blinker3d {
    50% {
        color: var(--green);
    }
}

@media screen and (max-width: 1000px) {
    .cesium-credit-logoContainer {
        display: none !important;
    }

    .cesium-credit-textContainer {
        left: calc(100vw - 18px) !important;
        right: 5px !important;
        bottom: 125px !important;
        opacity: 1 !important;
        width: 0px !important;
        height: 0px !important;
        transform: rotate(-90deg);
    }

        .cesium-credit-textContainer a {
            font-size: .6rem;
            color: rgba(146, 166, 176, .8);
            text-shadow: -1px -1px 0 rgba(255,255,255,.5), 1px -1px 0 rgba(255,255,255,.5), -1px 1px 0 rgba(255,255,255,.5), 1px 1px 0 rgba(255,255,255,.5);
        }

        .cesium-credit-textContainer div {
            font-size: .6rem;
            color: rgba(146, 166, 176, .8);
            text-shadow: -1px -1px 0 rgba(255,255,255,.5), 1px -1px 0 rgba(255,255,255,.5), -1px 1px 0 rgba(255,255,255,.5), 1px 1px 0 rgba(255,255,255,.5);
        }

    #info-about-3d {
        display: none;
        position: fixed;
        z-index: 2000;
        top: 10px;
        right: 10px;
        left: 10px;
        bottom: 10px;
        border-radius: 20px;
        padding: 40px 30px;
        text-align: center;
        background: rgba(255,255,255,.7);
        -webkit-backdrop-filter: blur(7px);
        backdrop-filter: blur(7px);
        -webkit-box-shadow: 0px 0px 8px var(--dark-shadow);
        -moz-box-shadow: 0px 0px 8px var(--dark-shadow);
        box-shadow: 0px 0px 8px var(--dark-shadow);
    }
}


/*LAYERSWITCHER*/

.ol-control.ol-layerswitcher-popup {
    position: absolute;
    right: 0.5em;
    text-align: left;
    top: 3em;
}

    .ol-control.ol-layerswitcher-popup .panel {
        clear: both;
        background: #fff;
    }

.ol-layerswitcher-popup .panel {
    list-style: none;
    padding: 0.25em;
    margin: 0;
    overflow: hidden;
}

    .ol-layerswitcher-popup .panel ul {
        list-style: none;
        padding: 0 0 0 20px;
        overflow: hidden;
    }

.ol-layerswitcher-popup.ol-collapsed .panel {
    display: none;
}

.ol-layerswitcher-popup.ol-forceopen .panel {
    display: block;
}

.ol-layerswitcher-popup button {
    background-color: white;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAACE1BMVEX///8A//8AgICA//8AVVVAQID///8rVVVJtttgv98nTmJ2xNgkW1ttyNsmWWZmzNZYxM4gWGgeU2JmzNNr0N1Rwc0eU2VXxdEhV2JqytQeVmMhVmNoydUfVGUgVGQfVGQfVmVqy9hqy9dWw9AfVWRpydVry9YhVmMgVGNUw9BrytchVWRexdGw294gVWQgVmUhVWPd4N6HoaZsy9cfVmQgVGRrytZsy9cgVWQgVWMgVWRsy9YfVWNsy9YgVWVty9YgVWVry9UgVWRsy9Zsy9UfVWRsy9YgVWVty9YgVWRty9Vsy9aM09sgVWRTws/AzM0gVWRtzNYgVWRuy9Zsy9cgVWRGcHxty9bb5ORbxdEgVWRty9bn6OZTws9mydRfxtLX3Nva5eRix9NFcXxOd4JPeINQeIMiVmVUws9Vws9Vw9BXw9BYxNBaxNBbxNBcxdJexdElWWgmWmhjyNRlx9IqXGtoipNpytVqytVryNNrytZsjZUuX210k5t1y9R2zNR3y9V4lp57zth9zdaAnKOGoaeK0NiNpquV09mesrag1tuitbmj1tuj19uktrqr2d2svcCu2d2xwMO63N+7x8nA3uDC3uDFz9DK4eHL4eLN4eIyYnDX5OM5Z3Tb397e4uDf4uHf5uXi5ePi5+Xj5+Xk5+Xm5+Xm6OY6aHXQ19fT4+NfhI1Ww89gx9Nhx9Nsy9ZWw9Dpj2abAAAAWnRSTlMAAQICAwQEBgcIDQ0ODhQZGiAiIyYpKywvNTs+QklPUlNUWWJjaGt0dnd+hIWFh4mNjZCSm6CpsbW2t7nDzNDT1dje5efr7PHy9PT29/j4+Pn5+vr8/f39/f6DPtKwAAABTklEQVR4Xr3QVWPbMBSAUTVFZmZmhhSXMjNvkhwqMzMzMzPDeD+xASvObKePPa+ffHVl8PlsnE0+qPpBuQjVJjno6pZpSKXYl7/bZyFaQxhf98hHDKEppwdWIW1frFnrxSOWHFfWesSEWC6R/P4zOFrix3TzDFLlXRTR8c0fEEJ1/itpo7SVO9Jdr1DVxZ0USyjZsEY5vZfiiAC0UoTGOrm9PZLuRl8X+Dq1HQtoFbJZbv61i+Poblh/97TC7n0neCcK0ETNUrz1/xPHf+DNAW9Ac6t8O8WH3Vp98f5lCaYKAOFZMLyHL4Y0fe319idMNgMMp+zWVSybUed/+/h7I4wRAG1W6XDy4XmjR9HnzvDRZXUAYDFOhC1S/Hh+fIXxen+eO+AKqbs+wAo30zDTDvDxKoJN88sjUzDFAvBzEUGFsnADoIvAJzoh2BZ8sner+Ke/vwECuQAAAABJRU5ErkJggg==");
    background-position: center;
    background-repeat: no-repeat;
    float: right;
    height: 38px;
    width: 38px;
}

.ol-layerswitcher-popup li {
    color: #369;
    padding: 0.25em 1em;
    font-family: "Trebuchet MS",Helvetica,sans-serif;
    cursor: pointer;
}

    .ol-layerswitcher-popup li.ol-header {
        display: none;
    }

    .ol-layerswitcher-popup li.select,
    .ol-layerswitcher-popup li.ol-visible {
        background: rgba(0, 60, 136, 0.7);
        color: #fff;
    }

    .ol-layerswitcher-popup li:hover {
        background: rgba(0, 60, 136, 0.9);
        color: #fff;
    }

.ol-control.ol-layerswitcher.ol-layer-shop {
    height: calc(100% - 4em);
    max-height: unset;
    max-width: 16em;
    background-color: transparent;
    pointer-events: none !important;
    overflow: visible;
}

.ol-control.ol-layerswitcher > * {
    pointer-events: auto;
}

.ol-control.ol-layer-shop > button,
.ol-control.ol-layer-shop .panel-container {
    -webkit-box-shadow: 0 0 0 3px rgba(255,255,255,.5);
    box-shadow: 0 0 0 3px rgba(255,255,255,.5);
}

.ol-control.ol-layerswitcher.ol-layer-shop .panel-container {
    overflow-y: scroll;
    max-height: calc(100% - 6.5em);
    border: 2px solid #369;
    border-width: 2px 0;
    padding: 0;
}

.ol-control.ol-layer-shop .panel {
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: .25em .5em;
}

.ol-control.ol-layerswitcher.ol-layer-shop .panel-container.ol-scrolldiv {
    overflow: hidden;
}

.ol-control.ol-layer-shop .ol-scroll {
    background-color: rgba(0,0,0,.3);
    opacity: .5;
}

.ol-layerswitcher.ol-layer-shop ul.panel li.ol-header {
    display: none;
}

.ol-layerswitcher.ol-layer-shop ul.panel li {
    margin-right: 0;
    padding-right: 0;
}

.ol-layerswitcher.ol-layer-shop .layerup {
    height: 1.5em;
    width: 1.4em;
    margin: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 3px;
    background-color: transparent;
    color: rgba(0,60,136,1);
}

    .ol-layerswitcher.ol-layer-shop .layerup:hover {
        background-color: rgba(0,60,136,.3);
    }

    .ol-layerswitcher.ol-layer-shop .layerup:before {
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        border: 0;
        background-color: currentColor;
        width: 1em;
        height: 2px;
        -webkit-box-shadow: 0 -4px, 0 4px;
        box-shadow: 0 -4px, 0 4px;
    }

    .ol-layerswitcher.ol-layer-shop .layerup:after {
        content: unset;
    }

.ol-control.ol-layer-shop .ol-title-bar {
    background-color: rgba(255,255,255,.5);
    font-size: .9em;
    height: calc(2.8em - 4px);
    max-width: 14.6em;
    padding: .7em .5em;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
    -webkit-transform: scaleY(1.1);
    transform: scaleY(1.1);
    -webkit-transition: width 0s, -webkit-transform .1s;
    transition: width 0s, -webkit-transform .1s;
    transition: transform .1s, width 0s;
    transition: transform .1s, width 0s, -webkit-transform .1s;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
}

.ol-control.ol-layer-shop:hover .ol-title-bar {
    background-color: rgba(255,255,255,.7);
}

.ol-control.ol-layer-shop.ol-collapsed .ol-title-bar {
    max-width: 10em;
    -webkit-transform: scale(.9, 1.1);
    transform: scale(.9, 1.1);
}

.ol-control.ol-layer-shop.ol-forceopen .ol-title-bar {
    max-width: 14.6em;
    -webkit-transform: scaleY(1.1);
    transform: scaleY(1.1);
}

.ol-control.ol-layer-shop .ol-bar {
    position: relative;
    height: 1.75em;
    clear: both;
    -webkit-box-shadow: 0 0 0 3px rgba(255,255,255,.5);
    box-shadow: 0 0 0 3px rgba(255,255,255,.5);
    background-color: #fff;
    text-align: right;
    z-index: 10;
}

.ol-control.ol-layer-shop.ol-collapsed .ol-scroll,
.ol-control.ol-layer-shop.ol-collapsed .ol-bar {
    border-width: 2px 0 0;
    display: none;
}

.ol-control.ol-layer-shop.ol-forceopen .ol-scroll,
.ol-control.ol-layer-shop.ol-forceopen .ol-bar {
    display: block;
}

.ol-control.ol-layer-shop .ol-bar > * {
    font-size: .9em;
    display: inline-block;
    vertical-align: middle;
    margin-top: .25em;
    background-color: transparent;
}

.ol-layer-shop .ol-bar .ol-button,
.ol-touch .ol-layer-shop .ol-bar .ol-button {
    position: relative;
    top: unset;
    left: unset;
    bottom: unset;
    right: unset;
    margin: 0;
}

.ol-layer-shop .ol-bar button {
    background-color: #fff;
    color: rgba(0,60,136,1)
}

    .ol-layer-shop .ol-bar button:hover {
        background-color: rgba(0,60,136,.2);
    }

/* Touch device */
.ol-touch .ol-layerswitcher.ol-layer-shop > button {
    font-size: 1.7em;
}

.ol-touch .ol-layer-shop .ol-bar {
    height: 2em;
}

.ol-touch .ol-layer-shop .ol-control button {
    font-size: 1.4em;
}

.ol-touch .ol-control.ol-layer-shop .panel {
    max-height: calc(100% - 7em);
}

    .ol-touch .ol-control.ol-layer-shop .panel label {
        height: 1.8em;
    }

        .ol-touch .ol-control.ol-layer-shop .panel label span {
            margin-left: .5em;
            padding-top: .25em;
        }

        .ol-touch .ol-control.ol-layer-shop .panel label:before,
        .ol-touch .ol-control.ol-layer-shop .panel label:after {
            font-size: 1.3em;
            z-index: 1;
        }

.ol-control.ol-layerswitcher {
    position: absolute;
    right: 0.5em;
    text-align: left;
    top: 3em;
    max-height: calc(100% - 6em);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
}

    .ol-control.ol-layerswitcher .ol-switchertopdiv,
    .ol-control.ol-layerswitcher .ol-switcherbottomdiv {
        display: block
    }

    .ol-control.ol-layerswitcher.ol-collapsed .ol-switchertopdiv,
    .ol-control.ol-layerswitcher.ol-collapsed .ol-switcherbottomdiv {
        display: none;
    }

.ol-layerswitcher.ol-forceopen.ol-collapsed .ol-switchertopdiv,
.ol-layerswitcher.ol-forceopen.ol-collapsed .ol-switcherbottomdiv {
    display: block;
}

.ol-control.ol-layerswitcher .ol-switchertopdiv,
.ol-control.ol-layerswitcher .ol-switcherbottomdiv {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 45px;
    background: #fff;
    z-index: 2;
    opacity: 1;
    cursor: pointer;
    border-top: 2px solid transparent;
    border-bottom: 2px solid #369;
    margin: 0 2px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.ol-control.ol-layerswitcher .ol-switcherbottomdiv {
    top: auto;
    bottom: 0;
    height: 2em;
    border-top: 2px solid #369;
    border-bottom: 2px solid transparent;
}

    .ol-control.ol-layerswitcher .ol-switchertopdiv:before,
    .ol-control.ol-layerswitcher .ol-switcherbottomdiv:before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        border: 10px solid transparent;
        width: 0;
        height: 0;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        opacity: 0.8;
    }

    .ol-control.ol-layerswitcher .ol-switchertopdiv:hover:before,
    .ol-control.ol-layerswitcher .ol-switcherbottomdiv:hover:before {
        opacity: 1;
    }

.ol-control.ol-layerswitcher .ol-switchertopdiv:before {
    border-bottom-color: #369;
    border-top: 0;
}

.ol-control.ol-layerswitcher .ol-switcherbottomdiv:before {
    border-top-color: #369;
    border-bottom: 0;
}

.ol-control.ol-layerswitcher .panel-container {
    background-color: #fff;
    border-radius: 0 0 2px 2px;
    clear: both;
    display: block; /* display:block to show panel on over */
    padding: 0.5em 0.5em 0;
}

.ol-layerswitcher .panel {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
    font-family: Tahoma,Geneva,sans-serif;
    font-size: 0.9em;
    -webkit-transition: top 0.3s;
    transition: top 0.3s;
    position: relative;
    top: 0;
}

    .ol-layerswitcher .panel ul {
        list-style: none;
        padding: 0 0 0 20px;
        overflow: hidden;
        clear: both;
    }

/** Customize checkbox
*/
.ol-layerswitcher input[type="radio"],
.ol-layerswitcher input[type="checkbox"] {
    display: none;
}

.ol-layerswitcher .panel li {
    /*    -weblit-transition: -webkit-transform 0.2s linear;*/
    -webkit-transition: -webkit-transform 0.2s linear;
    transition: -webkit-transform 0.2s linear;
    transition: transform 0.2s linear;
    transition: transform 0.2s linear, -webkit-transform 0.2s linear;
    clear: both;
    display: block;
    border: 1px solid transparent;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

    .ol-layerswitcher .panel li.ol-layer-select {
        background-color: rgba(0,60,136,.2);
        margin: 0 -.5em;
        padding: 0 .5em
    }
    /* drag and drop */
    .ol-layerswitcher .panel li.drag {
        opacity: 0.5;
        transform: scale(0.8);
        -webkit-transform: scale(0.8);
    }

.ol-dragover {
    background: rgba(51,102,153,0.5);
    opacity: 0.8;
}

.ol-layerswitcher .panel li.forbidden,
.forbidden .ol-layerswitcher-buttons div,
.forbidden .layerswitcher-opacity div {
    background: rgba(255,0,0,0.5);
    color: #f00 !important;
}

/* cursor management */
.ol-layerswitcher.drag,
.ol-layerswitcher.drag * {
    cursor: not-allowed !important;
    cursor: no-drop !important;
}

    .ol-layerswitcher.drag .panel li.dropover,
    .ol-layerswitcher.drag .panel li.dropover * {
        cursor: pointer !important;
        cursor: n-resize !important;
        cursor: ns-resize !important;
        cursor: -webkit-grab !important;
        cursor: grab !important;
        cursor: -webkit-grabbing !important;
        cursor: grabbing !important;
    }

.ol-layerswitcher .panel li.dropover {
    background: rgba(51, 102, 153, 0.5);
}

.ol-layerswitcher .panel li label {
    display: inline-block;
    height: 1.4em;
    max-width: 12em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 0 0 0 1.7em;
    position: relative;
}

    .ol-layerswitcher .panel li label span {
        display: inline-block;
        width: 100%;
        height: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-right: .2em;
    }

.ol-layerswitcher [type="checkbox"]:checked + label:after {
    transition: all .1s ease-in-out;
    content: '';
    position: absolute;
    left: 0.2em;
    top: 0.2em;
    width: 1.1em;
    height: 1.1em;
}

.ol-layerswitcher [type="radio"]:checked + label:after {
    transition: all .1s ease-in-out;
    content: '';
    position: absolute;
    left: 0.15em;
    top: 0.15em;
    width: 1.2em;
    height: 1.2em;
    border: none;
    color: rgba(245, 248, 249, 1);
    background: linear-gradient(145deg, rgba(245, 248, 249, 1), rgba(245, 248, 249, .8));
}

.ol-layerswitcher [type="checkbox"] + label:hover:before {
    transition: all .1s ease-in-out;
    content: '';
    position: absolute;
    left: 0.2em;
    top: 0.2em;
    width: 1.1em;
    height: 1.1em;
    /*    border: solid 2px rgba(146, 166, 176, .4);*/
    /*    border: none;*/
    /*    color: white;*/
    background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='rgba(146, 166, 176, 1)' xmlns='http://www.w3.org/2000/svg'><path d='M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z'/> <path d='M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z'/></svg>");
    background-repeat: no-repeat;
}

@media screen and (max-width: 500px) {
    .ol-layerswitcher [type="checkbox"] + label:hover:before {
        transition: all .1s ease-in-out;
        content: '';
        position: absolute;
        left: 0.2em;
        top: 0.2em;
        width: 1.1em;
        height: 1.1em;
        background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='rgba(146, 166, 176, .4)' xmlns='http://www.w3.org/2000/svg'><path d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z'/> </svg>");
        background-repeat: no-repeat;
    }
}

.ol-layerswitcher [type="radio"] + label:hover:before {
    transition: all .1s ease-in-out;
    content: '';
    position: absolute;
    left: 0.15em;
    top: 0.15em;
    width: 1.2em;
    height: 1.2em;
    border: solid 3px rgba(146, 166, 176, .4);
    /*    border: none;*/
    /*    color: white;*/
    /*    background: rgba(245, 248, 249, 1);*/
    background: linear-gradient(145deg, rgba(245, 248, 249, 1), rgba(245, 248, 249, .8));
    box-shadow: inset -1px -1px 1px white, inset 1px 1px 1px white;
    -webkit-box-shadow: inset -1px -1px 1px white, inset 1px 1px 1px white;
    -moz-box-shadow: inset -1px -1px 1px white, inset 1px 1px 1px white;
}

.ol-layerswitcher [type="checkbox"] + label:before {
    transition: all .1s ease-in-out;
    content: '';
    position: absolute;
    left: 0.2em;
    top: 0.2em;
    width: 1.1em;
    height: 1.1em;
    background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='rgba(146, 166, 176, .4)' xmlns='http://www.w3.org/2000/svg'><path d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z'/> </svg>");
    background-repeat: no-repeat;
}

.ol-layerswitcher [type="radio"] + label:before {
    transition: all .1s ease-in-out;
    content: '';
    position: absolute;
    left: 0.15em;
    top: 0.15em;
    width: 1.2em;
    height: 1.2em;
    border: solid 2px rgba(146, 166, 176, .2);
    color: rgba(245, 248, 249, 1);
    background: linear-gradient(145deg, rgba(146, 166, 176, .05), rgba(146, 166, 176, .02));
    box-shadow: inset 1px 1px 1px white, inset -1px -1px 1px white;
    -webkit-box-shadow: inset 1px 1px 1px white, inset -1px -1px 1px white;
    -moz-box-shadow: inset 1px 1px 1px white, inset -1px -1px 1px white;
}

.ol-layerswitcher [type="checkbox"] + label:before,
.ol-layerswitcher [type="checkbox"] + label:after {
    border-radius: 0% !important;
}

.ol-layerswitcher [type="radio"] + label:before,
.ol-layerswitcher [type="radio"] + label:after {
    border-radius: 50% !important;
    /*    margin-left: 20px !important;*/
}

.ol-layerswitcher [type="radio"]:checked + label:after {
    background: linear-gradient(145deg, rgba(245, 248, 249, 1), rgba(245, 248, 249, .8));
    border: solid 3px var(--dark);
    margin: 0em;
    width: 1.2em;
    height: 1.2em;
    box-shadow: inset -1px -1px 1px rgba(146, 166, 176, .2), inset 1px 1px 1px white;
    -webkit-box-shadow: inset -1px -1px 1px rgba(146, 166, 176, .2), inset 1px 1px 1px white;
    -moz-box-shadow: inset -1px -1px 1px rgba(146, 166, 176, .2), inset 1px 1px 1px white;
}

.ol-layerswitcher [type="checkbox"]:checked + label:after {
    left: 0.2em;
    top: 0.2em;
    width: 1.1em;
    height: 1.1em;
    border: none;
    text-align: center;
    vertical-align: middle;
    line-height: .9em;
    font-weight: 400;
    background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='rgba(26,26,55,1)' xmlns='http://www.w3.org/2000/svg'><path d='M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z'/> <path d='M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z'/></svg>");
    background-repeat: no-repeat;
}

.ol-layerswitcher .panel li.ol-layer-hidden {
    opacity: 0.6;
}

.ol-layerswitcher.ol-collapsed .panel-container {
    display: none;
}

.ol-layerswitcher.ol-forceopen .panel-container {
    display: block;
}

.ol-layerswitcher > button {
    background-color: white;
    float: right;
    z-index: 10;
    position: relative;
    font-size: 1.7em;
}

.ol-touch .ol-layerswitcher > button {
    font-size: 2.5em;
}

.ol-layerswitcher > button:before,
.ol-layerswitcher > button:after {
    content: "";
    position: absolute;
    width: .75em;
    height: .75em;
    border-radius: 0.15em;
    -webkit-transform: scaleY(.8) rotate(45deg);
    transform: scaleY(.8) rotate(45deg);
}

.ol-layerswitcher > button:before {
    background: #e2e4e1;
    top: .32em;
    left: .34em;
    -webkit-box-shadow: 0.1em 0.1em #325158;
    box-shadow: 0.1em 0.1em #325158;
}

.ol-layerswitcher > button:after {
    top: .22em;
    left: .34em;
    background: #83bcc5;
    background-image: radial-gradient( circle at .85em .6em, #70b3be 0, #70b3be .65em, #83bcc5 .65em);
}

.ol-layerswitcher-buttons {
    display: block;
    float: right;
    text-align: right;
}

    .ol-layerswitcher-buttons > div {
        display: inline-block;
        position: relative;
        cursor: pointer;
        height: 1em;
        width: 1em;
        margin: 2px;
        line-height: 1em;
        text-align: center;
        background: #369;
        vertical-align: middle;
        color: #fff;
    }

.ol-layerswitcher .panel li > div {
    display: inline-block;
    position: relative;
}

/* line break */
.ol-layerswitcher .ol-separator {
    display: block;
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
}

.ol-layerswitcher .layerup {
    float: right;
    height: 2.5em;
    background-color: #369;
    opacity: 0.5;
    cursor: move;
    cursor: ns-resize;
}

    .ol-layerswitcher .layerup:before,
    .ol-layerswitcher .layerup:after {
        border-color: #fff transparent;
        border-style: solid;
        border-width: 0.4em 0.4em 0;
        content: "";
        height: 0;
        position: absolute;
        bottom: 3px;
        left: 0.1em;
        width: 0;
    }

    .ol-layerswitcher .layerup:after {
        border-width: 0 0.4em 0.4em;
        top: 3px;
        bottom: auto;
    }

.ol-layerswitcher .layerInfo {
    background: #369;
    border-radius: 100%;
}

    .ol-layerswitcher .layerInfo:before {
        color: #fff;
        content: "i";
        display: block;
        font-size: 0.8em;
        font-weight: bold;
        text-align: center;
        width: 1.25em;
        position: absolute;
        left: 0;
        top: 0;
    }

.ol-layerswitcher .layerTrash {
    background: #369;
}

    .ol-layerswitcher .layerTrash:before {
        color: #fff;
        content: "\00d7";
        font-size: 1em;
        top: 50%;
        left: 0;
        right: 0;
        text-align: center;
        line-height: 1em;
        margin: -0.5em 0;
        position: absolute;
    }

.ol-layerswitcher .layerExtent {
    background: #369;
}

    .ol-layerswitcher .layerExtent:before {
        border-right: 1px solid #fff;
        border-bottom: 1px solid #fff;
        content: "";
        display: block;
        position: absolute;
        left: 6px;
        right: 2px;
        top: 6px;
        bottom: 3px;
    }

    .ol-layerswitcher .layerExtent:after {
        border-left: 1px solid #fff;
        border-top: 1px solid #fff;
        content: "";
        display: block;
        position: absolute;
        bottom: 6px;
        left: 2px;
        right: 6px;
        top: 3px;
    }

.ol-layerswitcher .expend-layers,
.ol-layerswitcher .collapse-layers {
    margin: 0 2px;
    background-color: transparent;
}

    .ol-layerswitcher .expend-layers:before,
    .ol-layerswitcher .collapse-layers:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        margin-top: -1.5px;
        height: 3px;
        width: 100%;
        background: var(--blue);
        border-radius: 20%;
    }

    .ol-layerswitcher .expend-layers:after {
        content: "";
        position: absolute;
        left: 50%;
        top: 0;
        margin-left: -1.5px;
        width: 3px;
        height: 100%;
        background: var(--blue);
        border-radius: 20%;
    }

.ol-layerswitcher .layerswitcher-opacity {
    position: relative;
    border: 2px solid var(--gray-light);
    height: 3px;
    width: 80px;
    margin-bottom: 2px;
    margin-top: 10px;
    margin-left: 25px;
    /*    margin: 5px 1em 10px 7px;*/
    /*    -webkit-box-sizing: border-box;
    box-sizing: border-box;*/
    border-radius: 2px;
    background: var(--gray-light);
    /*    background: -webkit-gradient(linear, left top, right top, from(rgba(0,60,136,0)), to(rgba(0,60,136,0.6)));
    background: linear-gradient(to right, rgba(0,60,136,0), rgba(0,60,136,0.6));*/
    cursor: pointer;
    opacity: .5;
    /*    -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
    box-shadow: 1px 1px 1px rgba(0,0,0,0.5);*/
}

.ol-layerswitcher .layerswitcher-opacity:hover {
    opacity: .8;
}

    .ol-layerswitcher .layerswitcher-opacity .layerswitcher-opacity-cursor,
    .ol-layerswitcher .layerswitcher-opacity .layerswitcher-opacity-cursor:before {
        position: absolute;
        width: 15px;
        height: 15px;
        top: 50%;
        left: 50%;
        background: var(--blue);
        border-radius: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        z-index: 1;
    }

        .ol-layerswitcher .layerswitcher-opacity .layerswitcher-opacity-cursor:before {
            content: "";
            position: absolute;
            width: 50%;
            height: 50%;
        }

/*.ol-touch .ol-layerswitcher .layerswitcher-opacity .layerswitcher-opacity-cursor {
    width: 26px;
    height: 26px;
}*/

.ol-layerswitcher .layerswitcher-opacity-label {
    display: none;
    position: absolute;
    right: -2.5em;
    bottom: 5px;
    font-size: 0.8em;
}

    .ol-layerswitcher .layerswitcher-opacity-label::after {
        content: "%";
    }

.ol-layerswitcher .layerswitcher-progress {
    display: block;
    margin: -4px 1em 2px 7px;
    width: 120px;
}

    .ol-layerswitcher .layerswitcher-progress div {
        background-color: #369;
        height: 2px;
        display: block;
        width: 0;
    }

.ol-control.ol-layerswitcher-image {
    position: absolute;
    right: 0.5em;
    text-align: left;
    top: 1em;
    transition: all 0.2s ease 0s;
    -webkit-transition: all 0.2s ease 0s;
}

    .ol-control.ol-layerswitcher-image.ol-collapsed {
        top: 3em;
        -webkit-transition: none;
        transition: none;
    }

.ol-layerswitcher-image .panel {
    list-style: none;
    padding: 0.25em;
    margin: 0;
    overflow: hidden;
}

    .ol-layerswitcher-image .panel ul {
        list-style: none;
        padding: 0 0 0 20px;
        overflow: hidden;
    }

.ol-layerswitcher-image.ol-collapsed .panel {
    display: none;
}

.ol-layerswitcher-image.ol-forceopen .panel {
    display: block;
    clear: both;
}

.ol-layerswitcher-image button {
    background-color: white;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAACE1BMVEX///8A//8AgICA//8AVVVAQID///8rVVVJtttgv98nTmJ2xNgkW1ttyNsmWWZmzNZYxM4gWGgeU2JmzNNr0N1Rwc0eU2VXxdEhV2JqytQeVmMhVmNoydUfVGUgVGQfVGQfVmVqy9hqy9dWw9AfVWRpydVry9YhVmMgVGNUw9BrytchVWRexdGw294gVWQgVmUhVWPd4N6HoaZsy9cfVmQgVGRrytZsy9cgVWQgVWMgVWRsy9YfVWNsy9YgVWVty9YgVWVry9UgVWRsy9Zsy9UfVWRsy9YgVWVty9YgVWRty9Vsy9aM09sgVWRTws/AzM0gVWRtzNYgVWRuy9Zsy9cgVWRGcHxty9bb5ORbxdEgVWRty9bn6OZTws9mydRfxtLX3Nva5eRix9NFcXxOd4JPeINQeIMiVmVUws9Vws9Vw9BXw9BYxNBaxNBbxNBcxdJexdElWWgmWmhjyNRlx9IqXGtoipNpytVqytVryNNrytZsjZUuX210k5t1y9R2zNR3y9V4lp57zth9zdaAnKOGoaeK0NiNpquV09mesrag1tuitbmj1tuj19uktrqr2d2svcCu2d2xwMO63N+7x8nA3uDC3uDFz9DK4eHL4eLN4eIyYnDX5OM5Z3Tb397e4uDf4uHf5uXi5ePi5+Xj5+Xk5+Xm5+Xm6OY6aHXQ19fT4+NfhI1Ww89gx9Nhx9Nsy9ZWw9Dpj2abAAAAWnRSTlMAAQICAwQEBgcIDQ0ODhQZGiAiIyYpKywvNTs+QklPUlNUWWJjaGt0dnd+hIWFh4mNjZCSm6CpsbW2t7nDzNDT1dje5efr7PHy9PT29/j4+Pn5+vr8/f39/f6DPtKwAAABTklEQVR4Xr3QVWPbMBSAUTVFZmZmhhSXMjNvkhwqMzMzMzPDeD+xASvObKePPa+ffHVl8PlsnE0+qPpBuQjVJjno6pZpSKXYl7/bZyFaQxhf98hHDKEppwdWIW1frFnrxSOWHFfWesSEWC6R/P4zOFrix3TzDFLlXRTR8c0fEEJ1/itpo7SVO9Jdr1DVxZ0USyjZsEY5vZfiiAC0UoTGOrm9PZLuRl8X+Dq1HQtoFbJZbv61i+Poblh/97TC7n0neCcK0ETNUrz1/xPHf+DNAW9Ac6t8O8WH3Vp98f5lCaYKAOFZMLyHL4Y0fe319idMNgMMp+zWVSybUed/+/h7I4wRAG1W6XDy4XmjR9HnzvDRZXUAYDFOhC1S/Hh+fIXxen+eO+AKqbs+wAo30zDTDvDxKoJN88sjUzDFAvBzEUGFsnADoIvAJzoh2BZ8sner+Ke/vwECuQAAAABJRU5ErkJggg==");
    background-position: center;
    background-repeat: no-repeat;
    float: right;
    height: 38px;
    width: 38px;
    display: none;
}

.ol-layerswitcher-image.ol-collapsed button {
    display: block;
    position: relative;
}

.ol-layerswitcher-image li {
    border-radius: 4px;
    border: 3px solid transparent;
    -webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
    display: inline-block;
    width: 64px;
    height: 64px;
    margin: 2px;
    position: relative;
    background-color: #fff;
    overflow: hidden;
    vertical-align: middle;
    cursor: pointer;
}

    .ol-layerswitcher-image li.ol-layer-hidden {
        opacity: 0.5;
        border-color: #555;
    }

    .ol-layerswitcher-image li.ol-header {
        display: none;
    }

    .ol-layerswitcher-image li img {
        position: absolute;
        max-width: 100%;
    }

    .ol-layerswitcher-image li.select,
    .ol-layerswitcher-image li.ol-visible {
        border: 3px solid red;
    }

    .ol-layerswitcher-image li p {
        display: none;
    }

    .ol-layerswitcher-image li:hover p {
        background-color: rgba(0, 0, 0, 0.5);
        color: #fff;
        bottom: 0;
        display: block;
        left: 0;
        margin: 0;
        overflow: hidden;
        position: absolute;
        right: 0;
        text-align: center;
        height: 1.2em;
        font-family: Verdana, Geneva, sans-serif;
        font-size: 0.8em;
    }


.feature-counts {
    /*background: rgba(255, 255, 255, .3);
    padding: 0px 5px;
    padding-bottom: 2px;
    border-radius: 7px;*/
    /*    border-style: solid;
    border-width: 0px 2px 0px 2px;
    border-color: var(--gray);*/
        /*-webkit-box-shadow: inset 0px 0px 0px 1px rgba(146, 166, 176, .3);
    -moz-box-shadow: inset 0px 0px 0px 1px rgba(146, 166, 176, .3);
    box-shadow: inset 0px 0px 0px 1px rgba(146, 166, 176, .3);*/
}

.switch-button {
    /*    background: var(--blue-bg);
    padding: 6px;
    border-radius: 20px;
    font-size: 1rem;
    border: none;
    color: var(--blue);
    line-height: 0;
    margin-left: 4px;
    outline: none;*/
    background: none;
    padding: .3rem .5rem;
    border-radius: 5px;
    font-size: 1rem;
    border: solid var(--border-width) var(--gray-light);
    color: var(--blue);
    font-weight: bold;
    line-height: 1.13rem;
    outline: none;
    margin: 6px 5px;
    vertical-align: middle;
}

    .switch-button:hover {
        background: var(--blue);
        border: solid var(--border-width) var(--blue);
        color: white;
    }

.switch-button-2 {
    /*    background: transparent;
    padding: 6px;
    border-radius: 50%;
    font-size: 1rem;
    border: none;
    color: var(--yellow);
    line-height: 0;
    margin-left: 4px;
    outline: none;*/
    background: none;
    padding: .3rem .5rem;
    border-radius: 5px;
    font-size: 1rem;
    border: solid var(--border-width) var(--gray-light);
    color: #5AC18E;
    font-weight: bold;
    line-height: 1.13rem;
    outline: none;
    margin: 6px 5px;
    vertical-align: middle;
}

    .switch-button-2:hover {
        background: #5AC18E;
        border: solid var(--border-width) #5AC18E;
        color: white;
    }

.clicked-switch {
    background: var(--blue) !important;
    border: solid var(--border-width) var(--blue);
    color: white;
    outline: none;
}

.clicked-switch-2 {
    background: #5AC18E !important;
    border: solid var(--border-width) #5AC18E;
    color: white;
    outline: none;
}


.highlight-symbol {
    background: none;
    padding: .3rem .5rem;
    border-radius: 5px;
    font-size: 1rem;
    border: solid var(--border-width) var(--gray-light);
    color: var(--blue);
    font-weight: bold;
    line-height: 1.13rem;
    outline: none;
    margin: 3px auto;
    margin-right: 10px;
    vertical-align: middle;
}

@media screen and (max-width: 500px) {
    .switch-button {
        padding: 6px;
        font-size: 1rem;
    }

        .switch-button:hover {
            background: rgba(146, 166, 176, .5);
        }

    .switch-button-2 {
        padding: 6px;
        font-size: 1rem;
    }

        .switch-button-2:hover {
            background: rgba(146, 166, 176, .5);
        }
}

#fade {
    display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 1001;
    opacity: .8;
}

#light {
    display: none;
    position: absolute;
    left: 15vw;
    top: 5%;
    z-index: 9999;
    overflow: hidden;
    border: none;
}

#video {
/*    top: 5%;
    position: fixed;*/
    width: 70vw;
    border-radius: 20px;
    z-index: 1002;
}

#boxclose {
    float: right;
    cursor: pointer;
    color: var(--dark);
    border-radius: 50%;
    background: white;
    font-size: 30px;
    font-weight: bold;
    display: inline-block;
    line-height: 0px;
    padding: 11px 4px;
    padding-bottom: 14px;
    position: absolute;
    right: 4px;
    top: 4px;
    z-index: 1003;
    opacity: 0.9;
    transform: scale(.8);
    text-decoration: none;
}

.boxclose:before {
    content: "×";
}

.boxclose:hover {
    transition: all .1s ease-in-out;
    transform: scale(1) !important;
}

#fade:hover ~ #boxclose {
    display: none;
}

#info-box {
    display: none;
    position: absolute;
    left: 5%;
    top: 20px;
    right: 5%;
    bottom: 20px;
    z-index: 10001;
    border: solid var(--border-width-small) var(--gray-light-7);
    /*    overflow: scroll;*/
    background: rgba(255,255,255,.95);
    border-radius: 20px;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    max-width: 550px;
    margin: auto;
}

    #info-box ::-webkit-scrollbar-track {
        margin-top: 30px;
        margin-bottom: 5px;
    }

#info-boxclose {
    float: right;
    cursor: pointer;
    color: var(--gray-light);
    border-radius: 50%;
    background: transparent;
    font-size: 25px;
    /*    font-weight: bold;*/
    display: inline-block;
    line-height: 0px;
    padding: 11px 4px;
    padding-bottom: 14px;
    position: absolute;
    right: 12px;
    top: 10px;
    z-index: 1000;
    opacity: 0.9;
    /*    transform: scale(.8);*/
    text-decoration: none;
    transition: all .1s ease-in-out;
}

.info-boxclose:before {
    content: "×";
}

.info-boxclose:hover {
/*    transform: scale(1) !important;*/
    color: var(--red) !important;
    font-weight: bold;
}

h2, h5 {
    font-family: Ubuntu;
    font-weight: normal;
    text-align: center;
/*    color: white;*/
}

h2 {
    margin-top: 10px;
    line-height: 3rem;
}

h5 {
    margin-top: 10px;
    line-height: 2rem;
}

@media (max-width: 500px) {
    #video {
        width: 96vw;
        border-radius: 10px;
    }

    #light {
        top: 20vh;
        left: 2vw;
        right: 2vw;
        bottom: 0;
    }

    #info-box {
        left: 10px;
        top: 10px;
        right: 10px;
        bottom: 10px;
    }

/*    h2 {
        font-size: 1.5rem;
        line-height: 2.25rem;
    }

    h5 {
        font-size: 1.15rem;
    }*/
}

#enable_pointer {
    flex-basis: calc(40%);
    align-self: center;
    pointer-events: all;
    filter: opacity(1);
    float: right;
    margin: 0px !important;
    display: inline-block;
    border-radius: 0px 30px 30px 0px;
    border-width: 3px 3px 3px 3px !important;
    height: 52px;
}

    #enable_pointer:hover {
        transform: scale(1) !important;
    }



.iconic {
    font-size: 19px;
    line-height: 0;
    padding-right: 5px;
    color: inherit;
}

.btn2 {
    border-radius: 40px;
    font-weight: 700;
    text-align: center;
    transition: all .1s ease-in-out;
    font-size: 20px;
    color: white;
    border: solid 3px var(--dark);
    background: var(--dark);
    vertical-align: middle;
}

    .btn2:hover {
        background: var(--dark);
        color: white;
        border: solid 3px var(--dark);
        transform: scale(1.15);
    }

.btn-blue2 {
    color: white !important;
    border: solid 4px var(--blue) !important;
    background: var(--blue) !important;
    padding: 7px 17px !important;
    padding-top: 8px !important;
    height: 50px !important;
}

.btn-green2:hover, .btn-green2:focus, .btn-green2:checked, .btn-green2:before, .btn-green2.activated {
    background: var(--blue) !important;
    /*        color: white;*/
    border: solid 4px var(--blue) !important;
    /*        transform: scale(.95) !important;*/
}

/* JOIN BTN */

.btn-join {
    flex-basis: 40%;
    align-self: center;
    margin: 0px !important;
    display: inline-block;
    border-radius: 0px 20px 20px 0px;
    /* border-radius: 20px; */
    color: white !important;
    opacity: .9 !important;
    border: solid 2px var(--blue) !important;
    background: var(--blue) !important;
    padding: 7px 17px !important;
    padding-top: 8px !important;
    height: 40px !important;
    font-size: 1.1rem !important;
    font-weight: 400 !important;
    transition: all .2s ease-in-out;
}

    .btn-join:hover {
        /* border-radius: 20px; */
        opacity: 1 !important;
        transform: scale(1.07) !important;
    }

.selection_box-join {
    flex-basis: 60% !important;
    transition: all .2s ease-in-out;
    border: solid 2px var(--blue-bg) !important;
    margin: 0px !important;
    border-radius: 20px 0px 0px 20px !important;
    border-width: 2px 0 2px 2px !important;
    text-align: center !important;
    width: 100% !important;
    height: 40px !important;
    padding: 3px 17px !important;
    padding-top: 2px !important;
    background: rgba(255,255,255,.9) !important;
}

    .selection_box-join:focus {
        outline: none;
    }

    .selection_box-join:hover {
        border-color: var(--blue) !important;
        background: #F2F9FF !important;
    }

    /* .btn-join:hover .selection_box-join {
        border-color: var(--blue) !important;
    } */


@media (max-width: 500px) {
    .btn-join {
        flex-basis: 40% !important;
        font-size: 1rem !important;
    }
    .selection_box-join {
        flex-basis: 60% !important;
    }
}

.btn2 .verstuur:before {
    content: 'Verstuur';
    color: white;
}

.btn2:hover .verstuur:before {
    content: 'Verstuur';
}

.btn2:hover .iconic {
    color: white !important;
}

.btn2 .verstuurd:before {
    content: 'Verstuurd';
    color: white !important;
}

.btn .verstuur-feedback:before {
    content: 'Verstuur';
    color: var(--blue);
}

.btn:hover .verstuur-feedback:before {
    content: 'Verstuur';
    color: white;
}

.btn:hover .iconic {
    color: white !important;
    font-size: .9rem !important;
}

.btn .verstuurd-feedback:before {
    content: 'Verstuurd';
    color: white !important;
}

#email_send {
    margin: 0px !important;
    padding: 7px 17px !important;
    padding-top: 7px !important;
    height: 50px !important;
    flex-basis: calc(60%) !important;
    align-self: center !important;
    border-radius: 40px 0px 0px 40px !important;
    border-width: 4px 0px 4px 4px !important;
    border-color: var(--blue) !important;
    font-weight: normal !important;
    background: rgba(255, 255, 255, 1) !important;
    color: var(--dark) !important;
    font-size: 1.2rem !important;
}

#new {
    flex-basis: calc(60%) !important;
}


details > summary {
    list-style: none;
}

    details > summary::-webkit-details-marker {
        display: none;
    }

.link-gray-to-red, .link-gray-to-green, .link-gray-to-yellow, .link-gray-to-blue, .link-gray-to-gray {
    color: var(--gray-light);
    transition: color .15s ease-in-out;
}

    .link-gray-to-red:hover {
        color: var(--red) !important;
    }
    .link-gray-to-green:hover {
        color: var(--green) !important;
    }
    .link-gray-to-yellow:hover {
        color: var(--yellow) !important;
    }
    .link-gray-to-blue:hover {
        color: var(--blue) !important;
    }
    .link-gray-to-gray:hover {
        color: var(--gray) !important;
    }

.waarom-text {
    color: white;
    font-size: 1.15rem;
    text-align: left;
    max-width: 200px;
}

@media (max-width: 500px) {
    .btn2 .verstuur:before {
        font-size: 1.2rem !important;
    }

    .btn2 .verstuurd:before {
        font-size: 1.1rem !important;
    }

    #new {
        flex-basis: calc(70%) !important;
    }

    #email_send {
        flex-basis: calc(70%) !important;
        font-size: 1.1rem !important;
    }

    #enable_pointer {
        flex-basis: calc(30%);
    }

}

/*@media (max-width: 370px) {
    .btn2 .verstuur:before {
        font-size: 1.1rem !important;
    }

    .btn2 .verstuurd:before {
        font-size: 1rem !important;
    }

    #new {
        flex-basis: calc(55%) !important;
    }

    #email_send {
        flex-basis: calc(55%) !important;
        font-size: .9rem !important;
    }

    #enable_pointer {
        flex-basis: calc(45%);
    }
}*/

.shareProject {
    color: white;
    transition: all .2s ease-in-out;
}

@media (min-width: 1000px) {

    .shareProject:hover {
/*        transform: scale(1.1) !important;*/
        color: var(--dark);
    }
}

@media (max-width: 1000px) {

    .shareProject {
        font-size: 1.5rem;
    }
}

.closePopup {
    position: absolute;
    top: 55px;
    right: 40px;
    color: rgba(0,0,0,.7);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    background-color: rgba(255,255,255,.9);
    border-radius: 50%;
    padding: 0 8.5px;
    padding-bottom: 3px;
    width: 30px;
    height: 30px;
    font-weight: normal;
    font-size: 25px;
    line-height: 0;
    transition: all .2s ease-in-out;
    margin-left: 12px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-box-shadow: 0px 0 5px var(--light-shadow);
    -moz-box-shadow: 0px 0 5px var(--light-shadow);
    box-shadow: 0px 0 5px var(--light-shadow);
}

.minmaxPopup {
    color: white;
    background: var(--blue);
    border-radius: 6px;
    padding-top: 1px;
    /* padding: 0 8.5px;
    padding-bottom: 3px; */
    width: 30px;
    height: 30px;
    font-weight: normal;
    font-size: 18px;
    line-height: 1;
    transition: all .1s ease-in-out;
    margin-left: 12px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (min-width: 1000px) {
    .closePopup:hover {
        color: white;
        background: var(--red);
    }

    .minmaxPopup:hover {
        color: white;
        background: var(--blue);
        /* transform: scale(1.1); */
        opacity: .9;
        font-size: 21px;
    }

    .hoverSmall:hover {
        font-size: 16px !important;
    }
}

@media (max-width: 1000px) {
    .minmaxPopup {
        display: none;
    }
    
    .closePopup {
        top: 33px;
        right: 25px;
    }
}

@media (max-width: 500px) {

/*    .closePopup {
        font-size: 1.5rem;
        padding: 0 8px;
        padding-bottom: 2.5px;
    }*/
}

.follow-btn {
    max-width: 190px !important;
    transition: all .2s ease-in-out;
}

.top-panel {
    min-height: 65px;
    margin-right: -5px;
    margin-left: -5px;
    margin-top: 0px;
    margin-bottom: 15px;
    padding: 15px;
    padding-right: 17px;
    padding-left: 23px;
    padding-bottom: 7px;
    vertical-align: middle;
    font-size: 1.25rem;
    /* background-color: var(--bg-color-tile) !important; */
    /* border-radius: 15px; */
    /* z-index: 2; */
    /* cursor: pointer; */
}

.second-panel {
/*    min-height: 40px;*/
    margin-right: 17px;
    margin-left: 17px;
    margin-top: 15px;
    margin-bottom: 2px;
    vertical-align: middle;
    font-size: 1.25rem;
    display: flex;
    gap: 17px;
    flex-wrap: wrap;
    justify-content: flex-start;
    /* align-content: flex-start; */
    /* justify-items: flex-start; */
    align-items: flex-start;
    scroll-margin: 40px;
}

.second-panel a {
    margin: unset !important;
}

    .second-panel table {
        border-collapse: separate;
        border-spacing: 15px 0;
/*        text-align: right;*/
/*        width: 100%;*/
/*        margin-right: 0;
        margin-left: auto;*/
    }

.project-plus-panel {
    /*    min-height: 40px;*/
    margin-right: calc(-3.5px - var(--border-width));
    margin-left: calc(-3.5px - var(--border-width));
    margin-top: -15px;
    margin-bottom: 0px;
    padding: 2px;
    padding-top: 18px;
    padding-bottom: 0;
    /*padding-right: 17px;*/
    vertical-align: middle;
    font-size: 100% !important;
    font-weight: 500;
    /*    border-radius: 0 0 20px 20px;*/
    border: solid;
    border-color: var(--gray-light-4);
    border-width: 0 0 var(--border-width-small) 0;
    overflow: auto;
    max-width: var(--popup-width);
    position: sticky;
    top: 20px;
    background-color: var(--bg-color-tile);
    z-index: 5;
    scroll-margin: 100px;
    -webkit-box-shadow: 0px 5px 5px var(--super-light-shadow);
    -moz-box-shadow: 0px 5px 5px var(--super-light-shadow);
    box-shadow: 0px 5px 5px var(--super-light-shadow);
    /* cursor: pointer; */
/*    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 1) 95%, rgba(0, 0, 0, 0) 100%);*/
    /*    -webkit-box-shadow: 0px 4px 4px var(--super-light-shadow);
    -moz-box-shadow: 0px 4px 4px var(--super-light-shadow);
    box-shadow: 0px 4px 4px var(--super-light-shadow); */
}

/*/* Hide scrollbar for Chrome, Safari and Opera */
    .project-plus-panel::-webkit-scrollbar {
        display: none;
    }

.show-map-btn {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.project-plus-panel {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
    -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

    .project-plus-panel table {
        border-collapse: separate;
        border-spacing: 25px 0;
        font-size: 100% !important;
        font-weight: 500;
    }

        .project-plus-panel table tr td {
            padding-bottom: 15px;
            font-weight: 500;
            color: var(--gray);
            transition: all .15s ease-in-out;
            border: solid;
            border-color: transparent;
            border-width: 0 0 4px 0;
            font-size: 100% !important;
            cursor: pointer;
        }

            .project-plus-panel table tr td:hover {
                padding-bottom: 15px;
                font-weight: 500;
                color: var(--dark);
                font-size: 100% !important;
            }

.active-projectplus {
    border: solid;
    border-color: var(--blue) !important;
    border-width: 0 0 4px 0;
    color: var(--dark) !important;
}

.popup-top-bg {
    background-color: var(--bg-color-tile);
    border-radius: 15px;
    /* padding-top: 15px; */
    /* margin: -5px; */
}

.popup-image-overlap {
    position: absolute;
    height: 20px;
    width: calc(var(--popup-width) - 41.5px);
    margin-left: -5px;
    margin-top: -20px;
    border-radius: 15px 15px 0 0;
    background-color: var(--bg-color-tile);
}

.popup-image {
    max-height: 175px;
    /* width: calc(100% + 8px);
    margin-left: 17px; */
    width: calc(100% + 13px);
    margin-left: -6.5px;
    margin-top: -6.5px;
    margin-bottom: 3px;
    transition: all .4s ease-in-out;
    /* pointer-events: none;
    touch-action: none; */
}

.popup-image-child {
    height: 175px;
    width: 100%;
    /*    max-width: 500px;*/
    object-fit: cover;
    margin-top: 0px;
    margin-left: 0px;
    border-radius: 15px 15px 0 0;
    border: solid var(--border-width) var(--gray-light-2);
    /*border-color: var(--gray-light);
    border-width: calc(var(--border-width) * .5);*/
    /* border-radius: 15px; */
    cursor: pointer;
    mask-image: linear-gradient(to top, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, .9) 100%);
    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, .9) 100%);

    /* -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, .2) 90%, rgba(0, 0, 0, 0) 100%); */

    /* -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%); */
    transition: all .4s ease-in-out;
    /* mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%); */
    /*    -webkit-box-shadow: 0px 0px 8px var(--dark-shadow);
    -moz-box-shadow: 0px 0px 8px var(--dark-shadow);
    box-shadow: 0px 0px 8px var(--dark-shadow);*/
    /*    padding: 7px;*/
    /*    background: rgba(255,255,255,.7) !important;*/
}

/* .popup-image:hover {
    margin-bottom: 100px;
}

.popup-image:hover .popup-image-child {
    height: 275px;
    mask-image: unset;
    -webkit-mask-image: unset;
} */

.subpanel {
    background: rgba(255,255,255,.95);
    border-radius: 20px;
    outline: solid var(--border-width) var(--gray-light);
    width: 100%;
    padding: 20px;
    -webkit-box-shadow: 0px 0px 8px var(--light-shadow);
    -moz-box-shadow: 0px 0px 8px var(--light-shadow);
    box-shadow: 0px 0px 8px var(--light-shadow);
}

.hidden-scroll-panel {
    scroll-margin: 15px;
}

@media screen and (max-width: 1000px) {

    .hidden-scroll-panel {
        scroll-margin: -10px;
    }

    .top-panel {
        margin-right: 0px;
        margin-left: 0px;
        margin-top: 0px;
        margin-bottom: 10px;
        border-radius: 26px;
        padding-bottom: 20px;
        padding-top: 25px;
    }

    .second-panel {
        margin-top: -10px;
        scroll-margin: 20px;
    }

    .project-plus-panel {
        margin-right: calc(-1.5px + var(--border-width));
        margin-left: calc(-1.5px + var(--border-width));
        padding: 0px;
        padding-top: 22px;
        padding-bottom: 0;
        max-width: calc(var(--popup-width) - 20px);
        top: 0px;
    }

    .popup-image {
        max-height: 125px;
        width: calc(100% + 3px);
        margin-left: -1.5px;
        margin-top: -1.5px;
        margin-bottom: -10px;
    }

    .popup-image-child {
        height: 120px;
        width: 100%;
        object-fit: cover;

        mask-image: linear-gradient(to top, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, .9) 100%);
        -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, .9) 100%);

        /* mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, .2) 80%, rgba(0, 0, 0, 0) 100%);
        -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, .2) 80%, rgba(0, 0, 0, 0) 100%); */

        /* mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%);
        -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%); */
    }

}

@media screen and (max-width: 500px) {

    .hidden-scroll-panel {
        scroll-margin: 0px;
    }

    .second-panel {
        /* margin-right: 15px;
        margin-left: 15px; */
        /* gap: 17px 10px; */
        scroll-margin: 25px;
    }

    .project-plus-panel {
        max-width: 94.5vw;
        top: 5px;
    }

/*    .top-panel {
        margin-right: 0;
        margin-left: 0;
        margin-top: 0;
        margin-bottom: 10px;
        border-radius: 26px;
    }*/

}


.bottom-logo {
    position: absolute;
    z-index: 3;
    max-width: 150px;
    right: 20px;
    bottom: 14px;
    opacity: .5;
    transition: all .2s ease-in-out;
}

    .bottom-logo:hover {
        opacity: 1;
    }

.ol-attribution {
    position: fixed;
    bottom: 0px;
    height: 25px;
    left: 87px;
    opacity: .5;
/*    background: rgba(255,255,255,.5);*/
    border-radius: 10px 10px 0px 0px;
/*    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);*/
}

    .ol-attribution button {
        display: none;
    }

    .ol-attribution ul {
        list-style-type: none;
        margin: 0px;
        padding: 0px;
        padding-top: 3px;
        padding-left: 6px;
        padding-right: 6px;
    }

        .ol-attribution ul li {
            color: rgba(146, 166, 176, .8);
        }

            .ol-attribution ul li a {
                color: rgba(146, 166, 176, .8);
            }

        .ol-attribution ul li a:hover {
            color: var(--blue);
        }


@media screen and (max-width: 1000px) {
    .ol-attribution {
        position: fixed;
        bottom: 130px;
        height: 0px;
        width: 0px;
        left: unset;
        right: 16px;
        border-radius: 10px 0px 0px 0px;
        background: none;
    }

        .ol-attribution ul {
            font-size: .6rem !important;
            transform: rotate(-90deg);
        }

            .ol-attribution ul li {
                font-size: .6rem !important;
                text-shadow: -1px -1px 0 rgba(255,255,255,.5), 1px -1px 0 rgba(255,255,255,.5), -1px 1px 0 rgba(255,255,255,.5), 1px 1px 0 rgba(255,255,255,.5);
            }

            .ol-attribution ul li a {
                font-size: .6rem !important;
            }

}


.flex-table {
    margin: 10px auto;
    margin-top: 15px;
    display: none;
    max-width: 450px;
}

    .flex-table .row-flex {
        display: flex; /* aligns all child elements (flex items) in a row */
        gap: 10px;
    }

    .flex-table .col-flex1 {
        color: var(--gray-light);
        margin-top: 10px;
        font-weight: 400;
        text-align: left;
        flex: 30%;
        line-height: 1.5;
        /*flex: 3 1 0px;*/ /* distributes space on the line equally among items */
    }

    .flex-table .col-flex2 {
        font-weight: 500;
        /*        max-width: 53vw;*/
        margin-top: 10px;
        text-align: left;
        flex: 70%;
        line-height: 1.5;
        /*flex: 4 1 0px;*/ /* distributes space on the line equally among items */
    }


.attention-button {
    position: fixed;
    top: 20px;
    /* right: 0px; */
    left: 90px;
    display: flex;
    justify-content: center;
    z-index: 4;
    text-decoration: none;
    font-size: 1.5rem;
}

.pin-btn {
    height: 25px;
    vertical-align: middle;
    transform: translateY(-1px);
    margin-right: 7px;
}

#timeslider-in-map {
    position: absolute;
    bottom: 6px;
    right: 87px;
    z-index: 1;
}

@media screen and (max-width: 1000px) {
    .attention-button {
        top: 20px;
        right: 20px;
        left: unset;
        bottom: unset;
    }

    .space-right {
        right: 90px;
    }

    #timeslider-in-map {
        bottom: 77px;
        right: 0px;
        width: 100%;
        top: unset;
        text-align: center;
        display: none;
    }
}

@media screen and (max-width: 500px) {
    

    .attention-button {
        position: fixed;
        top: 10px;
        right: 10px;
        left: unset;
        bottom: unset;
        display: block;
        justify-content: unset;
        font-size: 1.1rem !important;
    }

    .pin-btn {
        height: 20px;
        vertical-align: middle;
        transform: translateY(-1px);
        margin-right: 5px;
    }

    .btn-blue-fill2 {
        transition: all .09s ease-in-out !important;
        border-radius: var(--border-space) !important;
        color: var(--dark) !important;
        border: solid 2px var(--blue) !important;
        background: var(--blue) !important;
        padding: 3px 15px !important;
        padding-bottom: 2px !important;
        padding-left: 12px !important;
        font-weight: bold !important;
        font-size: 18px !important;
        height: 40px !important;
    }

        .btn-blue-fill2:hover, .btn-blue-fill2:focus, .btn-blue-fill2:checked, .btn-blue-fill2:before, .btn-blue-fill2.activated {
            background: var(--blue) !important;
            border: solid 2px rgba(0,0,0,0) !important;
            transform: scale(1.05) !important;
            -webkit-transform: scale(1.05) !important;
            -moz-transform: scale(1.05) !important;
            -ms-transform: scale(1.05) !important;
        }

    .space-right {
        right: 60px;
    }
}

.custom_legend_item {
    text-align: left;
    /*font-weight: bold;*/
/*    font-style: italic;*/
    /*font-size: .9rem;
    opacity: .5;*/
    padding-left: 3px;
    margin-bottom: 5px;
    margin-top: 10px;
}

.get-info-legend {
/*    color: var(--gray);*/
    padding-left: 3px;
}

/*.get-info-legend:hover {
    color: var(--dark);
}

.dark-info {
    color: var(--dark);
}*/

/*.subContent {
    border-spacing: 20px 0px !important;
    right: 0px !important;
    text-align: right !important;*/
/*    min-width: 400px !important;*/
/*}*/

.extra-content {
/*    top: 40px !important;*/
    border-top: solid 2px white;
}

.subContent {
    border-spacing: 20px 7px !important;
    width: 450px !important;
    max-width: 450px !important;
    min-width: 450px !important;
}

    .subContent:first-child {
        border-spacing: 20px 0px !important;
        margin-top: 20px !important;
        padding-bottom: 7px !important;
        padding-top: 20px !important;
    }
    .subContent:last-child {
        margin-bottom: 13px !important;
    }

/*    .subContent:nth-child(1) {
        border-spacing: 20px 40px !important;
        margin-top: 20px !important;
        background: red !important;
    }*/

/*    .extra-content:nth-child(2) {
        background: red !important;
    }*/

    .subContent .contentSelect {
        width: 400px !important;
        max-width: 400px !important;
        min-width: 400px !important;
    }

.top-panel-custom {
    /* background: rgba(146, 166, 176, .2); */
    padding-bottom: 19px;
}

@media screen and (max-width: 1000px) {

    .subContent {
        border-spacing: 10px 5px !important;
/*        width: 650px !important;
        max-width: 650px !important;
        min-width: 650px !important;*/
    }

        .subContent:first-child {
            border-spacing: 10px 0px !important;
            padding-top: 1px !important;
            padding-bottom: 5px !important;
        }

        .subContent:last-child {
            margin-bottom: 6px !important;
        }

/*        .subContent .contentSelect {
            width: 100px !important;
            max-width: 100px !important;
            min-width: 100px !important;
        }*/

}

@media screen and (max-width: 500px) {

    .subContent {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
    }

        .subContent .contentSelect {
            width: 90vw !important;
            max-width: 90vw !important;
            min-width: 90vw !important;
        }

}



    /*/*.subContent .contentSelect {
        padding: 15px !important;
        padding-bottom: 17px !important;
        -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,.1) !important;
        -moz-box-shadow: 0px 0px 8px rgba(0,0,0,.1) !important;
        box-shadow: 0px 0px 8px rgba(0,0,0,.1) !important;
        animation-name: popin;
        animation-duration: .1s;*/
        /*            max-width: 50px !important;*/
        /*padding-right: 20px !important;
        margin: auto !important;
    }

        .subContent .contentSelect:hover {
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            background-color: rgba(255, 255, 255, .9);
        }*/


.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


/*SLIDER SWITCHER*/

.switch {
    position: relative;
    display: inline-block;
    width: calc(60px * .7);
    height: calc(34px * .7);
    margin-top: -10px;
    -webkit-transform: translateY(13px);
    -ms-transform: translateY(13px);
    transform: translateY(13px);
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--gray-light-6);
    -webkit-transition: .2s;
    transition: .2s;
}

    .switch-slider:hover {
        background-color: var(--gray-light);
    }

    .switch-slider:before {
        position: absolute;
        content: "";
        height: calc(26px * .7);
        width: calc(26px * .7);
        left: calc(4px * .7);
        bottom: calc(4px * .7);
        background-color: white;
        -webkit-transition: .2s;
        transition: .2s;
    }

input:checked + .switch-slider {
    background-color: var(--blue);
}

/*input:focus + .switch-slider {
    box-shadow: 0 0 1px var(--blue);
}*/

input:checked + .switch-slider:before {
    -webkit-transform: translateX(calc(26px * .7));
    -ms-transform: translateX(calc(26px * .7));
    transform: translateX(calc(26px * .7));
}

/* Rounded sliders */
.switch-slider.round {
    border-radius: calc(34px * .7);
}

    .switch-slider.round:before {
        border-radius: 50%;
    }


#tour {
    text-align: center;
    background: rgba(255,255,255,.9);
    position: absolute;
    z-index: 1950;
    padding: 25px 30px;
    padding-bottom: 16px;
    border-radius: 20px;
    -webkit-backdrop-filter: blur(5px) !important;
    backdrop-filter: blur(5px) !important;
    max-width: 340px;
    border: solid var(--border-width-small) var(--gray-light-7);
    min-width: 250px;
    cursor: grab;
    -webkit-box-shadow: 0px 0px 8px var(--dark-shadow);
    -moz-box-shadow: 0px 0px 8px var(--dark-shadow);
    box-shadow: 0px 0px 8px var(--dark-shadow);
    line-height: 1.6;
    max-height: 75vh;
    overflow: auto;
}

    #tour:after {
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid rgba(26,26,55,.9);
        content: '';
        position: absolute;
        left: 50%;
        bottom: -10px;
        margin-left: -10px;
        display: none;
    }

    #tour.top:after {
        border-top-color: transparent;
        border-bottom: 10px solid rgba(26,26,55,.9);
        top: -20px;
        bottom: auto;
        display: none;
    }

    #tour.left:after {
        left: 10px;
        margin: 0;
        display: none;
    }

    #tour.right:after {
        right: 10px;
        left: auto;
        margin: 0;
        display: none;
    }

.touraccent {
    color: var(--blue);
}

.tourbutton {
    cursor: pointer;
    opacity: .9;
    font-size: 1.5rem;
    color: var(--blue);
}

.tourbutton:hover {
    opacity: 1 !important;
}

.tourblink-text {
    animation: blinkertour 1s linear infinite;
}

/*.tourstart {
    animation: blinkertour 1s linear infinite;
}*/

@keyframes blinkertour {
    50% {
        opacity: .3;
    }
}

/*.prevtour:hover, .nexttour:hover {
    color: var(--blue)
}*/

.t_toevoegen {
    position: fixed;
    right: 50px;
    top: 0px;
}

.close-tour {
    position: absolute;
    top: 4px;
    right: 10px;
    cursor: pointer;
    font-size: 20px;
    opacity: .7;
    color: var(--gray);
}

.close-tour:hover {
    opacity: 1;
    color: var(--red);
}

.t_starttour {
    position: absolute;
    z-index: 9999;
    top: 0%;
    bottom: 20%;
    left: 50%;
    margin: auto;
    pointer-events: none;
    width: 1px;
    height: 1px;
    touch-action: none
}

.t_starttour2 {
    position: absolute;
    z-index: 9999;
    top: 0%;
    bottom: 20%;
    left: 5%;
    margin: auto;
    pointer-events: none;
    width: 1px;
    height: 1px;
    touch-action: none
}

@media screen and (max-width: 1100px) {
    .t_starttour {
        top: 10%;
        bottom: unset;
    }

    .t_starttour2 {
        top: -40%;
        bottom: 20%;
        left: 50%;
    }
}

@media screen and (max-width: 500px) {
    #tour {
        max-height: 90vh;
        max-width: 90vw;
        min-width: 250px;
        font-size: .9rem;
        padding: 20px 20px;
        padding-bottom: 10px;
    }

    .t_toevoegen {
        right: 20px;
    }

    .t_starttour {
        top: 10vh;
        bottom: unset;
    }

    .t_starttour2 {
        top: 0;
        bottom: unset;
        left: 50%;
    }
}



.custom-attr-table {
    margin: auto;
    width: 100%;
}

.custom-attr-table tr td {
    margin: 0 !important;
    padding: 3px 0 !important;
}

.debouwapp-frame {
    height: 80vh;
    width: calc(100% + 10px);
    margin-left: -5px;
    margin-bottom: -14px;
/*    border-radius: 0 0 20px 20px;*/
    overflow: clip;
    margin-top: -65px;
    pointer-events: none;
    display: none;
}

@media screen and (max-width: 1100px) {
    .debouwapp-frame {
/*        height: 80vh;*/
        width: 100%;
        margin-left: 0;
    }
}

.north-arrow {
    position: fixed;
    z-index: 5000;
    bottom: 0px;
    left: 20px;
    text-align: center;
    cursor: pointer;
    transition: color .2s ease-in-out;
    color: var(--dark);
/*    transform: scaleY(.5);*/
    /*    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid black;*/
}

.source-img {
    position: relative;
    margin: 10px;
    margin-right: 52px;
    margin-top: -25px;
    float: right;
    color: white;
    font-size: .7rem;
    background: var(--gray-light-6);
    padding: 2px 6px;
    padding-top: 1px;
    border-radius: 10px;
    opacity: .75;
    display: none;
}

    .source-img:hover {
        color: var(--dark);
        background: var(--gray-light);
        opacity: 1;
    }

.location-indicator {
    /* position: absolute; */
    /* margin-top: -45px;
    margin-left: 10px; */
    /* top: -20px; */
    cursor: help;
    display: flex;
    align-items: center;
    gap: 5px;
    z-index: 1;
    transform: translateY(-155px) translateX(20px);
    font-size: .9rem;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    background-color: rgba(255,255,255,.85);
    padding: 5px 13px;
    padding-left: 8px;
    border-radius: 20px;
    width: fit-content;
    overflow: hidden;
    max-width: 225px;
    transition: all .2s ease-in-out;
    text-overflow: ellipsis;
    white-space: nowrap; /* important to show ellipsis, or words will just be broken off */
    pointer-events: all;
    touch-action: auto;
}

.max-width-overflow {
    width: fit-content;
    overflow: hidden;
    max-width: 250px;
    transition: all .2s ease-in-out;
    text-overflow: ellipsis;
    white-space: nowrap; /* important to show ellipsis, or words will just be broken off */
}

.max-width-row {
    /* max-width: 360px; */
    margin: auto;
    margin-top: 0px;
    margin-bottom: -3px;
    text-align: left;
    color: var(--gray);
    line-height: 1.5;
    padding: 0 20px;
}

.margin-left-row {
    margin-left: -50px;
}

@media screen and (max-width: 1600px) {
    .max-width-overflow {
        max-width: 200px;
    }
}

@media screen and (max-width: 1000px) {
    .location-indicator {
        transform: translateY(-104.5px) translateX(17px);
    }

    .source-img {
        margin-right: 9px;
        margin-top: -23px;
    }

    .margin-left-row {
        margin-left: -30px;
    }

    
}

@media screen and (max-width: 500px) {
    .north-arrow {
        display: none;
    }
    .max-width-overflow {
        max-width: 175px;
    }
}

@media screen and (max-width: 400px) {
    .max-width-overflow {
        max-width: 150px;
    }
}

.news-panel {
    -webkit-box-shadow: 0px 0px 10px 1px var(--light-shadow);
    -moz-box-shadow: 0px 0px 10px 1px  var(--light-shadow);
    box-shadow: 0px 0px 10px 1px  var(--light-shadow);
    /*    outline: solid 2px rgba(0,0,0,0);*/
    background: rgba(255,255,255,1);
    border: solid var(--border-width-small) var(--gray-light-5);
    border-radius: 20px;
    width: calc(100% + 20px);
    padding: 30px;
    padding-top: 27px !important;
    padding-bottom: 28px;
    margin-left: 0px;
    font-size: 1rem;
    line-height: .6;
    color: rgba(0,0,0,.95);
    text-align: left;
    max-width: var(--panel-width);
    margin: 10px auto;
}

.news-img {
    border-radius: 10px;
    width: 100%;
    max-height: 150px;
    object-fit: cover;
    margin: 5px auto;
    border: solid var(--border-width) var(--gray-light-2);
    cursor: pointer;
}

.image-block {
    width: 50%;
    height: 100%;
    flex: 1;
}

.news-img-2 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    border-radius: 10px;
    transition: all .2s ease-in-out;
}

.news-img-2:hover {
    transform: scale(.98);
    -webkit-transform: scale(.98);
    -moz-transform: scale(.98);
    -ms-transform: scale(.98);
    -o-transform: scale(.98);
    opacity: .9;
}


.page-buttons {
    /* margin-left: 0 !important; */
    max-width: 250px !important;
}

.large-panel {
    position: absolute;
    width: calc(100vw - var(--popup-width) + 66px - 340px);
    right: calc(var(--popup-width) + 66px);
    max-width: 800px;
    z-index: 9;
    padding: 20px 20px;
    padding-right: 5px;
    top: 0px;
    bottom: 0px;
    overflow: scroll;
    line-height: 1.75;
    text-align: left !important;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

    /* .large-panel h1 {
        margin: 0;
        padding: 1rem 0;
        padding-top: 1rem;
        font-size: 2rem;
        font-weight: 500;
        color: var(--blue);
    } */

    #editorjs h1 {
        margin: 0;
        padding-bottom: .5rem;
        padding-top: 1.5rem;
        font-size: 2rem;
        font-weight: 500;
        color: var(--blue);
    }

    /* .large-panel h2 {
        margin: 0;
        padding: .25rem 0;
        padding-top: 1rem;
        font-size: 1.5rem;
        font-weight: 500;
        text-align: left !important;
        color: var(--blue);
    } */

    #editorjs h2 {
        margin: 0;
        padding-bottom: .25rem;
        padding-top: 1.25rem;
        font-size: 1.5rem;
        font-weight: 500;
        text-align: left !important;
        color: var(--blue);
    }

    /* .large-panel h3 {
        margin: 0;
        padding: .75rem 0;
        padding-top: 1.5rem;
        font-size: 1.25rem;
        font-weight: 500;
        text-align: left !important;
        color: var(--blue);
    } */

    #editorjs h3 {
        margin: 0;
        padding-bottom: .25rem;
        padding-top: 1.25rem;
        font-size: 1.25rem;
        font-weight: 500;
        text-align: left !important;
        color: var(--blue);
    }

    /* .large-panel h4 {
        margin: 0;
        padding: .75rem 0;
        padding-top: 1.5rem;
        font-size: 1rem;
        font-weight: 500;
        text-align: left !important;
        color: var(--blue);
    } */

    #editorjs h4 {
        margin: 0;
        padding-bottom: .25rem;
        padding-top: 1.05rem;
        font-size: 1.15rem;
        font-weight: 500;
        text-align: left !important;
        color: var(--blue);
    }

    /* #editorjs .ce-paragraph {
        text-align: justify !important;
    } */

    .large-panel .grijs {
        color: var(--gray) !important;
    }

    .large-panel .page-edit {
        background: #fff;
        border: solid var(--border-width-small) var(--gray-light-7);
/*        padding: 125px 65px;
        padding-left: 65px;*/
        padding-bottom: 55px;
        padding-top: 65px;
        -webkit-box-shadow: 0px 0px 8px var(--dark-shadow);
        -moz-box-shadow: 0px 0px 8px var(--dark-shadow);
        box-shadow: 0px 0px 8px var(--dark-shadow);
        border-radius: 27px;
        pointer-events: all;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        min-height: calc(100vh - 40px);
/*        max-width: 900px;*/
    }

    /* .ct {
        display: none;
    } */

    .ct .ct__content {
        color: var(--dark);
        background-color: white;
        border-radius: 5px;
        font-weight: 500;
        border: solid 1px var(--gray-light-3);
        outline: none !important;
        -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;
        box-shadow: none !important;

    }

    .ct .ce-toolbar__plus-shortcut {
        display: none;
    }

    .ct .ct--bottom, .ct .ct--top {
        display: none;
    }

    #ditorjs .ce-paragraph[data-placeholder]:empty::before {
        opacity: 1 !important;
      }

.codex-editor a {
    color: var(--blue);
}

.codex-editor a:hover {
    opacity: .8;
}

.ce-popover-item__icon, .ce-popover-item__icon svg, .ce-popover-item__icon svg path, .ce-popover-item__icon svg line, .ce-popover-item__icon svg rect {
    color: var(--blue);
}

.cdx-settings-button--active, .cdx-settings-button--active svg, .cdx-settings-button--active svg path, .cdx-settings-button--active svg line, .cdx-settings-button--active svg rect {
    color: var(--blue);
}

.ce-popover-item__icon {
    border: none !important;
    outline: none !important;
}

.cdx-input {
    border: none;
    outline: none;
    box-shadow: none;
    background: none;
}

.tc-wrap {
    margin-bottom: 10px;
}

.tc-cell {
    transition: background .15s ease-in-out;
}

    .tc-cell:hover {
        background: var(--editorjs-hover-background);
    }

.cdx-nested-list.cdx-block {
    padding-top: 2px;
    padding-bottom: 2px;
}

.cdx-checklist {
    padding-top: 8px;
    padding-bottom: 8px;
}

.ce-block__content {
    padding: 0px 5px;
    border-radius: 5px !important;
}

    .ce-block__content .ce-header,
    .ce-block__content .cdx-block,
    .ce-block__content .cdx-input,
    .ce-block__content .image-upload-block {
        /*        outline: solid 1px transparent;
        transition: outline .15s ease-in-out;*/
        padding-left: 10px;
        padding-right: 10px;
        /* margin-top: 4px; */
        border-radius: 5px !important;
    }

#editorjs .ce-block__content .ce-header,
#editorjs .ce-block__content .image-upload-block,
#editorjs .ce-block__content .cdx-input,
#editorjs .ce-block__content .cdx-block {
    /*    background: var(--editorjs-background);*/
}

#editorjs .ce-block__content .ce-header,
#editorjs .ce-block__content .ce-paragraph,
#editorjs .ce-block__content .image-tool__caption,
#editorjs .ce-block__content .cdx-checklist,
#editorjs .ce-block__content .cdx-nested-list.cdx-block,
#editorjs .ce-block__content .cdx-attaches,
#editorjs .ce-block__content .image-tool,
#editorjs .ce-block__content .cdx-block,
#editorjs .ce-block__content .cdx-input,
#editorjs .ce-block__content .image-upload-block {
    transition: var(--editorjs-outline-transition);
    outline: solid 1.5px transparent;
    outline-offset: -1px;
    /* background: var(--editorjs-hover-background); */
}

#editorjs .ce-block__content:hover .ce-header,
#editorjs .ce-block__content:hover .ce-paragraph,
#editorjs .ce-block__content:hover .image-tool__caption,
#editorjs .ce-block__content:hover .cdx-checklist,
#editorjs .ce-block__content:hover .cdx-nested-list.cdx-block,
#editorjs .ce-block__content:hover .cdx-attaches,
#editorjs .ce-block__content:hover .image-tool,
#editorjs .ce-block__content:hover .cdx-block,
#editorjs .ce-block__content:hover .cdx-input,
#editorjs .ce-block__content:hover .image-upload-block {
    outline: solid 1.5px var(--editorjs-hover-border);
    background: var(--editorjs-hover-background);
}

    #editorjs .ce-block__content:hover .image-tool__caption {
        outline: dotted 2px var(--editorjs-hover-border);
        background: var(--editorjs-background);
    }

.ce-toolbar__actions {
/*    background: var(--blue-bg-5);
    border-radius: 8px;
    padding: 5px;
    margin: 0px;*/
    margin-top: -1px;
/*    opacity: 1 !important;*/
}

/*.codex-editor {
    width: 90% !important;*/
/*    margin: 0px !important;
    padding: 0px !important;*/
    /*background: rgba(0,0,0,.1);
    margin: auto;
}*/
#editorjs {
    max-width: 100%;
    width: 100%;
    padding: 0px 85px;
    margin: 20px auto;
}
/*.codex-editor {
    background: red;*/
/*    max-width: 100% !important;
    width: 100% !important;
    margin: 0px !important;
    padding: 0px !important;*/
/*}*/
/*.codex-editor__redactor:hover {
    background: red;
}*/
/*.ce-block {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0px !important;
    padding: 0px !important;
}*/
    .ce-block__content {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0px !important;
        padding: 0px !important;
    }
#editorjs .ce-toolbar {
    margin-right: 70px !important;
    padding-right: 20px;
}
/*.ce-toolbar__plus:hover, ce-toolbar__settings-btn:hover {
    background: white;
}*/

/* #editorjs .ce-toolbar__actions {
    opacity: 1 !important;
  } */

  /* #editorjs .ce-toolbar {
    display: block !important;
  } */

  #editorjs .ce-toolbox .cdx-search-field, #editorjs .ce-settings .cdx-search-field {
    display: none;
  }

  #editorjs .ce-toolbar__plus svg, #editorjs .ce-toolbar__settings-btn svg {
    transform: scale(1.1);
    transition: all .2s ease-in-out;
  }

  .subtle-shadow {
    filter: drop-shadow(0 0 8px rgba(0,0,0,.1));
  }

  .pulser {
    -webkit-animation: pulse 1.5s linear infinite;
    -moz-animation: pulse 1.5s linear infinite;
    animation: pulse 1.5s linear infinite;
    animation-timing-function: cubic-bezier(0.42,0,0.58,1);
  }

  .pulser-ultra-slow {
    /* transition: all 5s ease-in-out; */
    -webkit-animation: pulse 10s linear infinite;
    -moz-animation: pulse 10s linear infinite;
    animation: pulse 10s linear infinite;
    animation-timing-function: cubic-bezier(0.42,0,0.58,1);
  }

  .pulser-large {
    -webkit-animation: pulse-large 1.5s linear infinite;
    -moz-animation: pulse-large 1.5s linear infinite;
    animation: pulse-large 1.5s linear infinite;
    animation-timing-function: cubic-bezier(0.42,0,0.58,1);
  }

  /* #editorjs .ce-toolbar__plus svg {
    -webkit-animation: pulse 1.5s linear infinite;
    -moz-animation: pulse 1.5s linear infinite;
    animation: pulse 1.5s linear infinite;
  } */

@-moz-keyframes pulse {
    0% {
        -moz-transform: scale(1);
    }
    50% {
        -moz-transform: scale(1.05);
    }
    100% {
        -moz-transform: scale(1);
    }
}

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(1);
    }
    50% {
        -webkit-transform: scale(1.05);
    }
    100% {
        -webkit-transform: scale(1);
    }
}

@keyframes pulse {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    50% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@-moz-keyframes pulse-large {
    0% {
        -moz-transform: scale(1);
    }
    50% {
        -moz-transform: scale(1.1);
    }
    100% {
        -moz-transform: scale(1);
    }
}

@-webkit-keyframes pulse-large {
    0% {
        -webkit-transform: scale(1);
    }
    50% {
        -webkit-transform: scale(1.1);
    }
    100% {
        -webkit-transform: scale(1);
    }
}

@keyframes pulse-large {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

  #editorjs .ce-toolbar__plus svg:hover , #editorjs .ce-toolbar__settings-btn svg:hover {
    transform: scale(1.25);
    -webkit-animation: unset;
    -moz-animation: unset;
    animation: unset;
  }

/* .image-tool--withBorder, .image-tool__image {
    border-radius: 15px !important;
} */

.image-tool--withBackground, .image-tool__image {
    background: none !important;
}

.ce-popover {
    max-height: unset !important;
}

#editorjs .image-tool {
    padding-top: 20px;
}

.image-tool__image-picture {
/*    margin-top: 20px;*/
    border-radius: 15px;
    /* max-height: 400px; */
    object-fit: cover;
}

.image-tool__caption {
    border: none;
    outline: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    color: var(--gray);
}

.embed-tool__caption {
    display: none;
}
.embed-tool {
    padding-top: 20px;
    padding-bottom: 10px;
}

#editorjs-image .image-tool__caption {
    display: none;
}

#editorjs-image .ce-block__content .ce-header,
#editorjs-image .ce-block__content .cdx-block,
#editorjs-image .ce-block__content .image-upload-block {
    padding-left: 5px;
    padding-right: 5px;
}


#editorjs-image .ce-paragraph {
    border: solid var(--border-width) var(--gray-light-2);
    border-radius: 20px;
    max-width: 350px;
}

#editorjs-image .cdx-button {
    border-radius: 10px;
    box-shadow: none;
    border-width: calc(var(--border-width) * 1.3);
    padding: 13px;
    border-color: var(--blue);
    border-style: dotted;
    color: var(--blue);
    
}

    #editorjs-image .cdx-button:hover {
        border-color: var(--blue);
    }

#editorjs-image .ce-toolbar {
    display: none;
}

#editorjs-image .image-tool__image-picture {
    border: solid var(--border-width) var(--gray-light-2);
    margin-top: 0px;
}

#editorjs-image ce-toolbar__actions {
    display: block !important;
}

#editorjs-image .ce-popover__items:first-child {
    display: none;
}

.notice-section {
    background: rgba(0,0,0,.01); margin: 5px 0; margin-bottom: 12px; border: dotted 1px var(--gray-light-6); padding: 10px 15px; padding-left: 20px; color: var(--dark); border-radius: 10px; display: flex; gap: 20px; justify-content: center; align-items: center; font-weight: 500 !important; line-height: 1.6 !important
}

u {
   text-underline-offset: 5px; 
}

.rotate {
    -webkit-animation: spin 4s linear infinite;
    -moz-animation: spin 4s linear infinite;
    animation: spin 4s linear infinite;
}

@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.rotate-rev {
    -webkit-animation: spin-rev 8s linear infinite;
    -moz-animation: spin-rev 8s linear infinite;
    animation: spin-rev 8s linear infinite;
}

@-moz-keyframes spin-rev {
    100% {
        -moz-transform: rotate(-360deg);
    }
}

@-webkit-keyframes spin-rev {
    100% {
        -webkit-transform: rotate(-360deg);
    }
}

@keyframes spin-rev {
    100% {
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}

.focus-page-button {
    transition: all .2s ease-in-out;
}

.page-preview {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 5px;
    /* mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, .9) 60%, rgba(0, 0, 0, 0) 95%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, .9) 60%, rgba(0, 0, 0, 0) 95%); */
    /* margin-bottom: -5px; */
}

/* color-mix(in srgb, var(--blue) 75%, transparent) */
.page-preview-panel-open {
    border-color: color-mix(in srgb, var(--blue) 60%, transparent);
    /* border-style: dotted; */
    /* background-color: color-mix(in srgb, var(--blue) 5%, transparent); */
    -webkit-box-shadow: 0px 0px 10px color-mix(in srgb, var(--blue) 25%, transparent);
    -moz-box-shadow: 0px 0px 10px color-mix(in srgb, var(--blue) 25%, transparent);
    box-shadow: 0px 0px 10px color-mix(in srgb, var(--blue) 25%, transparent);
    transform: scale(1.02);
}

#page-navigator {
    position: fixed;
    z-index: 10001;
    bottom: 20px;
    top: unset;
    display: flex;
    justify-content: center;
    align-content: center;
    justify-items: center;
    align-items: center;
    pointer-events: none;
    touch-action: none;
/*    transform: translateX(-10px);*/
}

.prevent-select {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.nav-arrow {
    cursor: pointer;
/*    border: solid 1px var(--gray-light);*/
    border-radius: 3px;
    line-height: 0;
    vertical-align: middle;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    width: 23px;
    height: 23px;
    font-size: .9rem;
    color: var(--gray-light);
    pointer-events: none;
    touch-action: none;
    transition: all .15s ease-in-out;
}

@media screen and (min-width: 1100px) {
    .nav-arrow:hover {
        border-color: var(--blue);
        color: #fff !important;
        background: var(--blue);
    }
}

#page-header {
    position: sticky;
    top: -22px;
    background-color: #fff;
    margin-top: -60px;
    margin-left: 30px;
    margin-right: 30px;
    padding: 30px 65px;
    /* padding-right: 70px; */
    /* padding-top: 20px !important;
    padding-bottom: 20px !important; */
    /* border-radius: 50px 50px 0 0; */
    border-bottom: solid 1px var(--gray-light-3);
    z-index: 9;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

#projectPageTitle {
    /*    position: absolute;*/
    text-align: left;
    /*    left: 65px;*/
    /*    right: 0;*/
    /*    top: 75px;*/
    /*    margin: 0;*/
    /*    margin-left: 62px;*/
    z-index: 5;
    font-weight: 500;
    line-height: 1.4;
    /*    padding-left: 20px;*/
    /*    width: calc(100vw - 516px - 340px);*/
    width: 100%;
    -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
    /* pointer-events: none; */
    /* padding: 0px 95px; */
    margin: auto;
    /* background: red; */
}

#editModePageBtn {
    /* position: absolute;
    right: 95px;
    top: 112px;
    z-index: 5; */
/*    cursor: pointer;*/
    pointer-events: all;
    display: flex;
    justify-content: center;
    align-content: center;
    /*    align-items: center;
    justify-items: center;*/
    gap: 10px;
    /*    vertical-align: middle;*/
    border: solid 1.5px var(--blue);
    background: white;
    line-height: 1;
    padding: 10px;
    padding-left: 13px;
    padding-right: 5.5px;
    margin: 0;
    vertical-align: middle;
    border-radius: 20px;
    font-weight: 500;
    min-width: 200px;
    margin-right: -20px;
}

#saveEditorjs-pseudo {
    /* position: absolute;
    right: 135px;
    top: 110.5px; */
    z-index: 5;
    cursor: pointer;
    pointer-events: all;
    display: none;
}

#reset-editorjs {
    /* position: absolute;
    right: 95px;
    top: 116px; */
    z-index: 5;
    cursor: pointer;
    pointer-events: all;
    display: none;
    padding: 5px;
    font-size: 1.5rem;
    line-height: 0;
    /* margin-right: 10px; */
    color: var(--gray-light);
}

    #reset-editorjs:hover {
        color: var(--red);
    }
    /*    .editModePageBtn:hover {
        border-color: var(--blue);
    }*/
    .metaPageBtn {
        position: absolute;
        right: 65px;
        top: 65px;
        z-index: 5;
        font-weight: normal;
        color: var(--gray-light);
        /*    font-size: 25px;*/
        transition: all .2s ease-in-out;
        cursor: pointer;
        pointer-events: all;
        border: solid 2px var(--gray-light);
        background: white;
        line-height: 1;
        padding: 10px;
        margin: 0;
        vertical-align: middle;
        border-radius: 5px;
        font-weight: 500;
    }

    .metaPageBtn:hover {
        color: var(--blue);
        border-color: var(--blue);
        background: var(--blue-bg);
    }

    .metaPageBtn:focus {
        outline: none;
        box-shadow: none;
    }


.largepanelCloser {
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 5;
    font-weight: normal;
    color: var(--gray-light);
    font-size: 30px;
    transition: all .2s ease-in-out;
    cursor: pointer;
    pointer-events: all;
}

    .largepanelCloser:hover {
        color: var(--red);
        font-weight: bold;
    }

.largepanelSharer {
    position: absolute;
    right: 40px;
    top: 14.5px;
    z-index: 5;
    font-weight: normal;
    color: var(--gray-light);
    font-size: 15px;
    transition: all .2s ease-in-out;
    cursor: pointer;
    pointer-events: all;
}

    .largepanelSharer:hover {
        color: var(--blue);
        font-weight: bold;
    }

.largepanelDownloader {
    position: fixed;
    right: 35px;
    bottom: 25px;
    z-index: 10001;
    font-weight: normal;
    color: var(--gray-light);
    font-size: 20px;
    transition: all .2s ease-in-out;
    cursor: pointer;
    pointer-events: all;
}

    .largepanelDownloader:hover {
        color: var(--blue);
        font-weight: bold;
    }




.backdrop-layer4 {
    position: absolute;
    left: 0px;
    top: 0;
    right: 0;
    bottom: 0;
    /* height: 100vh; */
    z-index: 3;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: block;
    /* mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 100%);
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 100%); */
    /* touch-action: none;
    pointer-events: none; */
}

#backdrop-layer6 {
    position: fixed;
    height: 100vh;
    width: 100vw;
    z-index: 3;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: none;
    /* mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 3%, rgba(0, 0, 0, 1) 100%);
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 3%, rgba(0, 0, 0, 1) 100%); */
    touch-action: none;
    pointer-events: none;
}

.large-panel::-webkit-scrollbar {
    display: none;
}

@media screen and (max-width: 1600px) {
    .large-panel {
        width: calc(100vw - var(--popup-width) - 66px);
    }
}

@media screen and (max-width: 1400px) {
    .large-panel {
        left: 0;
    }
}


.zoomist-wrapper {
    border-radius: 20px;
    box-shadow: 0 0 50px 0 rgba(0,0,0,.3);
    background: none;
}

.zoomist-image img {
    max-width: 90vw;
    max-height: 90vh;
    background: white;
}


@media screen and (max-width: 1100px) {
    .zoomist-image img {
        height: unset;
        max-width: 90vw;
        max-height: 90vh;
        background: white;
    }

    .large-panel {
        position: fixed;
        width: 100vw;
        max-width: 100vw;
        max-height: 100vh;
        left: unset;
        right: unset;
        z-index: 9999;
        padding: 0px 10px;
        padding-bottom: 10px;
        overflow: scroll;
        -ms-overflow-style: none;
        scrollbar-width: none;
        line-height: 1.75;
        text-align: left !important;
    }
        
    .large-panel .page-edit {
        margin: auto;
        background: rgba(255,255,255,1);
        border: solid var(--border-width) var(--gray-light);
        padding: 65px 15px;
        padding-left: 15px;
        padding-bottom: 65px;
        backdrop-filter: unset;
        -webkit-backdrop-filter: unset;
        min-height: calc(100% - 10px);
        margin-top: 10px;
    }

    .backdrop-layer4 {
        position: fixed;
        left: unset;
        top: unset;
        right: unset;
        height: 100vh;
        width: 100vw;
        z-index: 9998;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        display: block;
        mask-image: unset;
        -webkit-mask-image: unset;
        touch-action: none;
        pointer-events: none;
    }

    /* .largepanelCloser {
        position: absolute;
        right: 7px;
        top: 7px;
        z-index: 10000;
    } */

    .largepanelDownloader {
        /* position: absolute; */
        right: 22px;
        bottom: 55px;
        /* top: 55px; */
        font-size: 1.2rem;
    }

    

    #page-header {
        top: -2px;
        padding-top: 25px;
        padding-bottom: 25px;
        /* padding: 20px 10px; */
        /* padding-top: 25px; */
        /* padding-bottom: 5px; */
        /* flex-wrap: wrap; */
        /* flex-direction: column-reverse;
        justify-content: flex-start;
        align-items: flex-start; */
    }

    .largepanelCloser {
        top: 0px;
        right: -20px;
        z-index: 9;
    }

    .largepanelSharer {
        right: 17px;
        z-index: 9;
    }
}

.pseudo-save-container-editorjs {
    display: flex; gap: 10px; align-items: center; margin-right: 0px;
}

@media screen and (max-width: 500px) {

    #page-header {
        top: -5px;
        padding: 25px 10px;
        /* padding-top: 25px; */
        padding-bottom: 15px;
        margin-left: -2px;
        margin-right: -2px;
        margin-top: -38px;
        flex-wrap: wrap;
        flex-direction: column-reverse;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .large-panel .page-edit {
        padding: 40px 20px;
        padding-left: 20px;
        padding-bottom: 70px;
    }
    
    #editorjs {
        padding: 0px 0px;
        margin: 10px auto;
    }

    /* #projectPageTitle {
        padding: 0px 10px;
    } */
    /* #editModePageBtn {
        position: absolute;
        top: 17px;
        right: 35px;
        transform: scale(.75);
    } */

    /* #saveEditorjs-pseudo {
        position: fixed;
        top: 17px;
        right: 65px;
        transform: scale(.9);
    } */

    /* #reset-editorjs {
        position: fixed;
        top: 20px;
        right: 40px;
    } */

    #editModePageBtn {
        margin-bottom: -12px;
    }

    .pseudo-save-container-editorjs {
        margin-bottom: 0px; margin-right: 0;
    }

    #page-navigator {
        transform: translateX(-10px);
    }

    .largepanelCloser {
        top: 5px;
        right: 10px;
    }

    .largepanelSharer {
        top: 19.5px;
        right: 45px;
    }
}

.blurrer {
    filter: blur(10px);
    -webkit-filter: blur(10px);
}

.ce-paragraph[data-placeholder-active]:empty::before { color: var(--gray); }
.ce-header[data-placeholder-active]:empty::before { color: var(--gray); }

.ce-toolbar__actions {
    pointer-events: none !important;
    touch-action: none !important;
}

.ce-toolbar__actions--opened {
    pointer-events: all !important;
    touch-action: auto !important;
}

.ce-inline-toolbar {
    pointer-events: none !important;
    touch-action: none !important;
}

.ce-inline-toolbar--showed {
    pointer-events: all !important;
    touch-action: auto !important;
}

.pnlm-sprite {
    border-radius: 5px !important;
    margin: 10px 5px !important;
    border: none;
    background-color: rgba(255,255,255,.6);
    backdrop-filter: blur(3px);
    transition: all .15s ease-in-out;
}

.pnlm-compass {
    margin: 10px !important;
    border: solid var(--border-width) var(--gray-light);
    background-color: rgba(255,255,255,.4);
    backdrop-filter: blur(3px);
}

.pnlm-zoom-controls, .pnlm-lbox, .pnlm-lmsg, .pnlm-loading {
    display: none !important;
}

.pnlm-container {
    background: none !important;
}

.pnlm-lbar-fill {
    background: var(--blue) !important;
    border-radius: 10px !important;
}

.pnlm-lbar {
    border-color: none !important;
    background: var(--gray-light-2) !important;
    border-radius: 10px !important;
}

.pnlm-load-box {
    background: none !important;
}

.pnlm-load-box p {
    visibility: hidden !important;
}

.pnlm-load-button {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    background: var(--blue-bg);
    transition: background .2s ease-in-out;
}

    .pnlm-load-button:hover {
        background: var(--gray-light-6);
    }

.image-upload-block {
    text-align: center;
    width: 100% !important;
    height: 300px !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

.image-upload-img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 15px !important;
}

.image-upload-caption {
/*    font-size: 14px;*/
    color: var(--gray);
    border: solid var(--border-width) var(--gray-light);
    border-radius: 30px;
    padding: 10px;
    cursor: pointer;
    transition: all .15s ease-in-out;
    outline: none;
}

.image-upload-caption:hover {
    color: white;
    border-color: var(--blue);
    background: var(--blue);
    transform: scale(1.02);
    outline: none;
}




/*#zoom-container {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    z-index: 99999;
}

#zoom-image {
    max-width: 100%;
    max-height: 100%;
    cursor: grab;
    user-select: none;
}*/

#zoom-container {
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    position: fixed;
    z-index: 99998;
    background: rgba(0,0,0,.7);
    backdrop-filter: blur(7px);
/*    user-select: none;*/
}

#zoom-image {
    cursor: grab;
    position: relative;
    width: 85%;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
    border-radius: 20px;
    box-shadow: 0 0 50px 0 rgba(0,0,0,.3);
/*    touch-action: none;*/
}

.panel-section-row {
    border-top: solid 1.5px var(--gray-light-6);
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
    transition: background-color .2s ease-in-out;
}

.panel-section-row td {
    cursor: pointer;
    transition: all .2s ease-in-out;
/*    color: var(--gray-light);*/
}

    .panel-section-row td:first-child {
        padding-left: 15px !important;
        border-radius: 10px 0 0 10px;
    }

    .panel-section-row td:last-child {
        padding-right: 15px !important;
        border-radius: 0 10px 10px 0;
    }

    .panel-section-row.clicked {
        background-color: var(--blue-bg-6) !important;
    }

@media screen and (min-width: 500px) {
    /* .panel-section-row:hover td {
        opacity: .8;
    } */

    .panel-section-row:hover {
        background-color: var(--blue-bg-6) !important;
    }

    /* .panel-section-row:hover td:last-child {
        transform: scale(1.1) !important;
    } */
}

.wrapper-video {
/*    display: table;*/
    position: relative;
    width: 100%;
/*    margin-bottom: 1vh;
    margin-top: .5vh;*/
    padding: 10px;
    padding-bottom: 5px;
    background: #fff;
    border-radius: 15px;
    border: solid 1px var(--gray-light);
    -webkit-box-shadow: var(--shadow);
    -moz-box-shadow: var(--shadow);
    box-shadow: var(--shadow);
}

.shadow-reg {
    -webkit-box-shadow: var(--dark-shadow);
    -moz-box-shadow: var(--dark-shadow);
    box-shadow: var(--dark-shadow);
}

.url-fake {
    background: #F7F9FD;
    padding: 3px 10px;
    padding-bottom: 7px;
    border-radius: 10px;
    font-size: calc(var(--font-size-small) * .8);
    margin-bottom: 10px;
    color: rgba(146, 166, 176, 1);
}

.video {
    border-radius: 10px;
    width: 100%;
    cursor: pointer;
    background: var(--light);
    pointer-events: none;
    border: solid var(--border-width-small) #D3DAE7;
}

@media (max-width: 1100px) {

    .wrapper-video {
        width: 90vw;
    }
}

@media (max-width: 500px) {

    .wrapper-video {
        width: 100vw;
        margin: 2vh 0;
        margin-top: 1vh;
        padding: 0;
        padding-bottom: 0;
        background: none;
        border-radius: 0;
        border: none;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }

    .url-fake {
        display: none;
    }

    .video {
        border-radius: 0;
        width: 100%;
        -webkit-box-shadow: var(--shadow);
        -moz-box-shadow: var(--shadow);
        box-shadow: var(--shadow);
        border-width: var(--border-width-small) 0 var(--border-width-small) 0;
    }
}

.img-baselayers {
    width: 40%;
    height: 40px;
    object-fit: cover;
    border-radius: 5px;
    outline: solid 1px var(--gray-light);
    cursor: pointer;
    transition: all .2s ease-in-out;
}

.img-baselayers:hover {
    transform: scale(1.1);
}

.img-baselayers.active {
    opacity: .8;
    outline: solid 1.5px var(--blue);
}

.follow-panel-closer {
    position: absolute; top: unset; margin-top: -43px; margin-right: 15px; cursor: pointer
}

.follow-panel {
    position: relative; display: none; margin-top: 5px; margin-bottom: 20px; padding-top: 20px; padding-bottom: 20px; text-align: left; margin-left: 15px; max-width: calc(100% - 30px);
}

/* @media (max-width: 500px) {
    .follow-panel {
        max-width: calc(100% - 30px) !important;
    }
} */

/* @media screen and (max-width: 500px) {
    .follow-panel-closer {
        margin-top: -43px; margin-right: 15px;
    }
} */


/* input[type="file"] {
    display: none;
} */

.custom-file-upload {
    border: 1.5px dotted var(--blue);
    padding: 6px 12px;
    cursor: pointer;
    border-radius: 10px;
    width: 100%;
    max-width: 100%;
    height: 70px;
    text-align: center;
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: center;
}

::placeholder {
    color: var(--gray-dark-8);
    opacity: .8; /* Firefox */
  }
  
  ::-ms-input-placeholder { /* Edge 12 -18 */
    color: var(--gray-dark-8);
  }

/* file upload button */
input[type="file"]::file-selector-button {
    border-radius: 5px;
    padding: 0 16px;
    height: 40px;
    cursor: pointer;
    background-color: white;
    border: 1.5px dotted var(--blue);
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05);
    margin-right: 16px;
    transition: background-color 200ms;
  }
  
  /* file upload button hover state */
  input[type="file"]::file-selector-button:hover {
    background-color: #f3f4f6;
  }
  
  /* file upload button active state */
  input[type="file"]::file-selector-button:active {
    background-color: #e5e7eb;
  }


  /* The container must be positioned relative: */
.custom-select {
    position: relative;
    font-family: 'Ubuntu';
  }
  
  .custom-select select {
    display: none; /*hide original SELECT element: */
  }
  
  .select-selected {
    background-color: none;
  }
  
  /* Style the arrow inside the select element: */
  .select-selected:after {
    position: absolute;
    content: "";
    top: 14px;
    right: 10px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-color: #fff transparent transparent transparent;
  }
  
  /* Point the arrow upwards when the select box is open (active): */
  .select-selected.select-arrow-active:after {
    border-color: transparent transparent #fff transparent;
    top: 7px;
  }
  
  /* style the items (options), including the selected item: */
  .select-items div,.select-selected {
    color: #ffffff;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
    cursor: pointer;
  }
  
  /* Style items (options): */
  .select-items {
    position: absolute;
    background-color: none;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
    border-radius: 5px;
  }
  
  /* Hide the items when the select box is closed: */
  .select-hide {
    display: none;
  }
  
  .select-items div:hover, .same-as-selected {
    background-color: rgba(0, 0, 0, 0.1);
  }

  .share-level-icon {
    /* float: right; */
    color: var(--gray-dark);
    /* opacity: .75; */
  }

  .share-level-icon:hover {
    color: var(--blue);
    /* opacity: 1; */
  }

  #global-loading-icon {
    position: fixed;
    display: none;
    height: 100vh;
    width: 100vw;
    margin: auto;
    justify-content: center;
    align-items: center;
    z-index: 10001;
    color: var(--blue);
    font-size: 100px;
    pointer-events: none !important;
    touch-action: none !important;
    -webkit-user-select: none !important;
    -khtml-user-select: none !important;
    -moz-user-select: none !important;
    -o-user-select: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
    -khtml-user-drag: none !important;
    -moz-user-drag: none !important;
    -o-user-drag: none !important;
    overflow: none;
    opacity: .7;
  }

  .rotate-fast {
        -webkit-animation: spin-pulse 2s linear infinite;
        -moz-animation: spin-pulse 2s linear infinite;
        animation: spin-pulse 2s linear infinite;
    }
    
    @-moz-keyframes spin-pulse {
        0% {
            -moz-transform: rotate(0deg) scale(1);
            opacity: 0.3;
        }
        50% {
            -moz-transform: rotate(180deg) scale(1.1);
            opacity: .7;
        }
        100% {
            -moz-transform: rotate(360deg) scale(1);
            opacity: 0.3;
        }
    }
    
    @-webkit-keyframes spin-pulse {
        0% {
            -webkit-transform: rotate(0deg) scale(1);
            opacity: 0.3;
        }
        50% {
            -webkit-transform: rotate(180deg) scale(1.1);
            opacity: .7;
        }
        100% {
            -webkit-transform: rotate(360deg) scale(1);
            opacity: 0.3;
        }
    }
    
    @keyframes spin-pulse {
        0% {
            -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1);
            opacity: 0.3;
        }
        50% {
            -webkit-transform: rotate(180deg) scale(1.1);
            transform: rotate(180deg) scale(1.1);
            opacity: .7;
        }
        100% {
            -webkit-transform: rotate(360deg) scale(1);
            transform: rotate(360deg) scale(1);
            opacity: 0.3;
        }
    }

.unclickable {
    pointer-events: none !important;
    touch-action: none !important;
    -webkit-user-select: none !important;
    -khtml-user-select: none !important;
    -moz-user-select: none !important;
    -o-user-select: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
    -khtml-user-drag: none !important;
    -moz-user-drag: none !important;
    -o-user-drag: none !important;
}

.ol-layers, .ol-layer, .ol-overlaycontainer, .ol-overlaycontainer-stopevent  {
    pointer-events: none !important;
    touch-action: none !important;
}

/* ROADMAP */

span {
    color: inherit;
}

#current-quarter {
    scroll-margin-top: 185px;
    /* padding-top: 5rem; */
}

.anchor {
    scroll-margin-top: 185px;
}

.roadmap-container {
    margin: 15px;
    max-width: calc(var(--popup-width) - 83px);
}

.roadmap-title {
    text-align: center;
    color: var(--dark);
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.5;
    word-wrap: break-word;
    padding: 5px 0;
    max-width: var(--popup-width);
    margin: auto;
    /* padding-top: 5px; */
}

.vertical-time-line {
    position: absolute;
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: inline-flex;
}

.vertical-time-line div {
    width: 2px;
    height: 100%;
    background-image: linear-gradient(to bottom, #d3dae7 50%, transparent 0%);
    background-position: left;
    background-size: 21rem 1rem;
    background-repeat: repeat-y;
    opacity: .7;
    /* border: var(--border-width-2) #d3dae7 dashed; */
    mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 1) 3%,
    rgba(0, 0, 0, 1) 97%,
    rgba(0, 0, 0, 0) 100%
    );
    -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 1) 3%,
    rgba(0, 0, 0, 1) 97%,
    rgba(0, 0, 0, 0) 100%
    );
}

.features {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    margin: 2rem auto;
    margin-top: 2.5rem;
    gap: 3rem;
}

.sticky {
    visibility: hidden;
    /* position: fixed;
    top: 2rem; */
    /* background-color: yellow; */
    /* z-index: 1000; */
}

.sticky-year-quarter {
    display: none;
    position: fixed;
    width: 500px;
    margin: auto;
    top: 0;
    left: 0;
    /* right: 0; */
    padding-top: 20px;
    padding-bottom: 5rem;
    z-index: 1000;
    background: white;
    mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 50%,
    rgba(0, 0, 0, 0) 100%
    );
    -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 50%,
    rgba(0, 0, 0, 0) 100%
    );
}

#inner-box {
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0) 98%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0) 98%);
}


/* .tr-rounded td {
    border: solid 1px #000;
    border-style: none solid solid none;
    padding: 10px;
} */

#attEditTable {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.tr-rounded td { 
    border-radius: 10px;
    border: solid var(--border-width-small) var(--gray-light-6);
}

.tr-rounded td:not(:first-child) { 
    border-radius: 0;
    border-left: none;
    border-right: none;
}

.tr-rounded td:first-child { 
    border-radius: 10px 0 0 10px;
    border-right: none;
    padding: 20px 17px !important;
    padding-right: 0 !important;
    max-width: 200px !important;
    min-width: unset !important;
    width: 200px !important;
}
.tr-rounded td:last-child { 
    border-radius: 0 10px 10px 0;
    border-left: none;
    border-right: solid var(--border-width-small) var(--gray-light-6);
    padding: 20px 0 !important;
}

.between-btns {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 17px;
}

@media screen and (max-width: 500px) {

    .between-btns {
        gap: 10px;
    }

    .tr-rounded td:first-child { 
        max-width: 40vw !important;
        min-width: unset !important;
        width: 40vw !important;
        padding: 18px 0 !important;
        padding-left: 15px !important;
    }
}


/* .tr-rounded:last-child td:first-child { border-bottom-left-radius: 10px; border: solid 1.5px var(--gray) }
.tr-rounded:last-child td:last-child { border-bottom-right-radius: 10px; border: solid 1.5px var(--gray) }

.tr-rounded:first-child td { border-top-style: solid; }
.tr-rounded td:first-child { border-left-style: solid; } */

.info-projectfase-input {
    /* padding-bottom: 5px; */
    font-weight: 400;
    text-align: left;
    font-size: .95rem;
    padding-top: 10px;
    /* line-height: 0; */
    /* margin-top: -10px; */
    /* transform: translateY(-6px) translateX(-15px); */
    /* padding-left: 15px; */
    color: var(--gray-dark);
}

.shadow-box-light {
    -webkit-box-shadow: 0px 0px 8px var(--light-shadow);
    -moz-box-shadow: 0px 0px 8px var(--light-shadow);
    box-shadow: 0px 0px 8px var(--light-shadow);
}

.project-stats {
    display: none;
    visibility: hidden;
    /* margin-top: 2rem; */
    font-size: 1rem;
    color: var(--gray-dark-8);
    /* display: flex; */
    align-items: center;
    gap: 12px;
    margin-left: 3px;
    /* margin-bottom: 20px; */
    /* margin-top: -.2rem; */
}

.project-stats > span {
    cursor: help;
    transition: all .15s ease-in-out;
}

@media screen and (min-width: 500px) {

    .project-stats > span:hover {
        color: var(--blue);
        /* transform: 1.1rem; */
    }
}

/* EDITORJS IFRAME */
.editorjs-iframe {}

.editorjs-iframe .cdx-loader {
  min-height: 200px;
}

.editorjs-iframe .cdx-input {
  margin-top: 10px;
}

.editorjs-iframe iframe {
    width: 100%;
    height: 100%;
    max-width: 100%;
    min-height: 100%;
    /* max-height: unset; */
    vertical-align: bottom;
    border-radius: 0;
    margin: 5px 0;
    padding: 0;
    border: none;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

.editorjs-iframe__caption[contentEditable=true][data-placeholder]:empty::before {
  position: absolute;
  content: attr(data-placeholder);
  color: #707684;
  font-weight: normal;
  opacity: 0;
 }

.editorjs-iframe__caption[contentEditable=true][data-placeholder]:empty::before {
  opacity: 1;
}

.editorjs-iframe__caption[contentEditable=true][data-placeholder]:empty:focus::before {
  opacity: 0;
}

.iframe-flex{
  display: flex;
  /* min-height: 500px; */
  height: 100%;
  width: 100%;
}
.iframe-justify-start {
  justify-content: flex-start;
}
.iframe-justify-end {
  justify-content: flex-end;
}
.iframe-justify-center {
  justify-content: center;
}

.embed-tool__content {
    border-radius: 15px !important;
}

.close-project-page {
    background: var(--blue);
    color: white !important;
}

.close-project-page:hover {
    opacity: .9;
}

/* KIOSK MODE */
#kiosk-start-screen {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999999;
    backdrop-filter: blur(3px);
    background-color: rgba(26, 26, 55, .05);
    pointer-events: none;
    touch-action: none;
}
#kiosk-start-screen-bg-graphic-1 {
    /* position: absolute;
    top: 0;
    left: 0; */
    width: 100vw;
    height: 100vh;
    /* background-color: red; */
    background-repeat: no-repeat;
    background-size: 40vw 100vh;
    background-image: url("data:image/svg+xml;charset=UTF8,<svg xmlns='http://www.w3.org/2000/svg' width='861' height='1197' fill='none'><path fill='%231D9BD6' d='M804 1069.5C943.705 739.53 829 635 402 205.5C329.5 132.576 270.902 59.7578 252.461 0H91.2843H0V1197C0 1197 40.7552 1197 91.2843 1197H647.473H749C749 1197 751.923 1192.5 804 1069.5Z'/></svg>");
    /* filter: drop-shadow(0 0 2rem var(--primary-color-trans-low)); */
}
#kiosk-start-screen-bg-graphic-2 {
    position: absolute;
    top: 0;
    right: 0;
    width: 18%;
    height: 42%;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml;charset=UTF8,<svg xmlns='http://www.w3.org/2000/svg' width='452' height='450' fill='none'><path fill='%232C3182' d='M360.527 0.00034523H0C24.1581 64.1846 125.585 148.104 203.96 220.219C330.652 336.783 451.811 449.475 451.811 449.475V0C451.811 0 411.056 0.00034523 360.527 0.00034523Z'/></svg>");
}

.kiosk-start-screen-finger {
    position: absolute;
    top: 2.5vw;
    left: 4.2vw;
    width: 100%;
    height: 17vw;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml;charset=UTF8,<svg xmlns='http://www.w3.org/2000/svg' width='309' height='338' fill='none'><path d='M40.4663 48.8204C40.4663 45.5921 43.0428 42.9756 46.2215 42.9756H46.6362C50.6725 42.9756 53.9432 46.2972 53.9432 50.3907L54.251 60.3975L54.9359 82.4446C55.0916 83.1249 55.1798 98.4544 55.1798 98.4544C56.4558 97.1337 57.8763 95.6225 59.1523 94.1761C62.1322 90.8011 67.6059 88.5257 71.2444 88.1064C73.1622 87.8835 74.6239 88.1503 75.5997 88.8935C75.9112 89.1355 76.2171 89.4042 76.5023 89.6958C78.3806 91.5748 79.7974 94.6087 78.4857 96.8307C77.919 97.8026 76.9451 98.4468 75.9093 99.1233C74.5376 100.027 72.2277 101.004 70.4919 103.255C67.5834 107.034 60.8506 115.48 56.7129 119.987C55.8516 120.53 54.0295 122.377 53.1701 122.844C50.5581 124.538 48.4245 126.133 47.6852 126.996C47.1072 127.669 43.6883 129.447 43.6883 129.447C40.9242 131.225 35.8934 132.887 30.0819 132.887C24.2704 132.887 19.0125 133.239 15.1188 129.761H14.9105L14.8073 129.498C10.8461 125.813 8.38226 120.707 8.38226 115.061V88.0683C8.38226 86.7458 8.66937 82.3112 12.3398 80.9791C14.1037 80.3426 15.7719 80.5827 17.1942 81.2059L17.5264 81.2211L17.6296 81.2287C18.2676 78.7933 19.8626 77.2211 22.2213 76.8037C25.0698 76.3025 27.0439 77.1677 28.2317 78.0424C29.412 75.4659 31.7782 74.1224 34.9814 74.3968C37.3833 74.6026 39.1697 75.8013 40.4663 77.3792V48.8185V48.8204Z' fill='white'/><path d='M13.8578 72.2852L10.9099 75.6164C10.3432 76.2643 9.31486 76.2243 8.81571 75.523C3.13185 67.5133 0 57.8724 0 47.7321C-0.00187683 21.4106 21.0841 0 47.0002 0C48.7791 0 50.5824 0.101002 52.3651 0.303007C73.9934 2.74993 91.3865 20.4787 93.7209 42.4609C94.9931 54.423 91.8763 66.0917 85.1885 75.523C84.6931 76.2281 83.6648 76.2643 83.0906 75.6202L80.1464 72.2909C79.7279 71.8202 79.696 71.1208 80.0507 70.5986C84.7701 63.5952 87.247 55.233 86.9993 46.5372C86.4007 25.4297 69.6681 8.12401 48.9086 7.14067C25.9555 5.99343 6.98427 24.6788 6.98427 47.7302C6.98427 55.9781 9.46122 63.9096 13.9573 70.591C14.3082 71.117 14.2763 71.8107 13.8559 72.2833L13.8578 72.2852Z' fill='white'/><path d='M27.069 57.3524L23.9485 60.878C23.3105 61.604 22.1508 61.4382 21.7229 60.573C19.7526 56.6187 18.7149 52.268 18.7149 47.7343C18.7149 34.2115 28.1687 22.3904 41.2008 19.6195C45.0026 18.802 48.9957 18.802 52.8087 19.6195C65.8334 22.3904 75.2871 34.2115 75.2871 47.7343C75.2871 52.2718 74.2494 56.6187 72.2829 60.573C71.8475 61.4401 70.6954 61.6059 70.0536 60.878L66.9349 57.3524C66.584 56.956 66.5033 56.3957 66.7003 55.906C67.7493 53.318 68.301 50.5433 68.301 47.7324C68.301 38.6899 62.6715 30.522 54.2968 27.4081C49.6187 25.6739 44.3815 25.6739 39.7071 27.4081C31.3305 30.5201 25.7048 38.6899 25.7048 47.7324C25.7048 50.5433 26.2565 53.318 27.2998 55.906C27.4988 56.3977 27.4181 56.9598 27.069 57.3524Z' fill='white'/></svg>");
}

.right-finger {
    left: calc(100vw - 7.5vw);
}

#kiosk-start-screen-content {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    gap: 2vw;
}

#kiosk-start-screen-content div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 15vw;
    padding-left: 4.5vw;
    gap: 3vw;
    min-width: 30vw;
}

#kiosk-start-screen-frame-1 button {
    /* position: absolute;
    bottom: 20%;
    left: 5%; */
    background-color: white;
    padding: 2.5vw 5vw;
    /* height: 15%;
    width: 20%; */
    outline: none;
    border: none;
    border-radius: 5vw;
    font-size: 4vw;
    font-weight: 500;
    color: var(--blue);
    transition: all .2s ease-in-out;
}

#kiosk-start-screen-frame-1 button:focus {
    outline: none;
}

#kiosk-start-screen-frame-1 button:hover {
    transform: scale(1.3) !important;
}

#kiosk-start-screen-frame-2 button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--blue);
    padding: 1.5vw 2.5vw;
    padding-right: 1.25vw;
    /* height: 15%;
    width: 20%; */
    outline: none;
    border: solid 4px white;
    border-radius: 5vw;
    font-size: 2.25vw;
    font-weight: 400;
    min-width: 27vw;
    color: white;
    transition: all .2s ease-in-out;
}

#kiosk-start-screen-frame-2 button:focus {
    outline: none;
}

#kiosk-start-screen-frame-2 button:hover {
    transform: scale(1.05) !important;
}

#kiosk-start-screen-content h1 {
    color: white;
    font-size: 3.75vw;
    font-weight: 400;
    line-height: 1.3;
}

#kiosk-start-screen-content p {
    color: white;
    font-size: 2vw;
    font-weight: 400;
    line-height: 1.3;
}

.extra-info-panel {
    display: none;
    width: calc(100% - 300px);
    /* max-width: calc(100vw - 516px - 95px - 200px); */
    /* right: 516px !important;
    max-width: calc(100vw - 516px - 350px) !important; */
    margin-top: 20px;
    margin-bottom: 5px;
    margin-right: 5px;
    margin-left: 10px;
    padding: 20px;
    padding-bottom: 0;
    border: solid var(--border-width-small) var(--gray-light-7);
    border-radius: 20px;
    -webkit-box-shadow: 0px 0px 8px var(--shadow);
    -moz-box-shadow: 0px 0px 8px var(--shadow);
    box-shadow: 0px 0px 8px var(--shadow);
}

.extra-info-panel img {
    border-radius: 10px;
    width: 100%;
    max-height: 200px;
    object-fit: cover;
}

.extra-info-panel div {
    margin: 20px 0;
    cursor: pointer;
}

.extra-info-panel div div {
    position: absolute;
    top: 30px;
    color: white;
    background-color: var(--blue);
    padding: 20px;
    border-radius: 0 10px 10px 0;
    -webkit-box-shadow: 0px 0px 8px var(--dark-shadow);
    -moz-box-shadow: 0px 0px 8px var(--dark-shadow);
    box-shadow: 0px 0px 8px var(--dark-shadow);
}

.extra-info-panel button {
    position: absolute;
    bottom: 20px;
    right: 30px;
    -webkit-box-shadow: 0px 0px 8px var(--dark-shadow);
    -moz-box-shadow: 0px 0px 8px var(--dark-shadow);
    box-shadow: 0px 0px 8px var(--dark-shadow);
}

.base-layer-btn {
    position: fixed;
    bottom: 70px;
    left: 20px;
    z-index: 1;
}

.base-layer-btn div {
    position: relative;
    height: 50px;
    width: 50px;
    padding: 0;
    color: white;
    font-size: 1.5rem;
}

.base-layer-btn img {
    width: 100%;
    height: 100%;
    border-radius: 20%;
    -webkit-border-radius: 20%;
}

.base-layer-btn div i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    touch-action: none;
}

@media screen and (max-width: 500px) {

    .base-layer-btn {
        bottom: 50px;
        left: 10px;
    }

    .base-layer-btn div {
        height: 40px;
        width: 40px;
    }
}

.btn-onboarding {
    transition: all .15s ease-in-out !important;
    border-radius: 1rem !important;
    color: white !important;
    border: solid var(--border-width) var(--red) !important;
    background: var(--red) !important;
    font-weight: 500 !important;
    font-size: 1.2rem !important;
    padding: .75rem 1.5rem !important;
    padding-right: 1rem !important;
    padding-bottom: .7rem !important;
}

.btn-onboarding-2 {
    transition: all .15s ease-in-out !important;
    border-radius: 30px !important;
    color: white !important;
    border: solid var(--border-width) var(--primary-color) !important;
    background: var(--primary-color) !important;
    font-weight: 500 !important;
    font-size: 1.2rem !important;
    padding: .75rem 1.5rem !important;
    padding-right: 1rem !important;
    padding-bottom: .7rem !important;
    margin-bottom: 4px !important;
}

.btn-info {
    transition: all .15s ease-in-out !important;
    border-radius: 1rem !important;
    color: white !important;
    border: solid var(--border-width) var(--blue) !important;
    background: var(--blue) !important;
    font-weight: 500 !important;
    font-size: 1.2rem !important;
    padding: .75rem 1.1rem !important;
    padding-right: 1rem !important;
    padding-bottom: .7rem !important;
}

.btn-start-onboarding {
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    z-index: 1;
    font-size: 1.2rem;
    line-height: 1.6;
    font-weight: 500;
    color: white;
    border: solid var(--border-width) var(--red);
    background: var(--red);
    transition: all .2s ease-in-out;
    outline: none;
    border-radius: 1rem;
    padding: .75rem 1.5rem;
    padding-right: 1.25rem;
    -webkit-box-shadow: 0px 0px 8px var(--dark-shadow);
    -moz-box-shadow: 0px 0px 8px var(--dark-shadow);
    box-shadow: 0px 0px 8px var(--dark-shadow);
}

.btn-start-onboarding:focus, .btn-start-onboarding:hover {
    outline: none;
}

.btn-start-onboarding-retracted {
    padding: 0;
    left: unset;
    right: 20px;
    bottom: 60px;
    transform: unset;
    border-radius: 1.5rem;
}

.btn-start-onboarding span, .btn-onboarding span, .btn-onboarding-2 span, .btn-info span {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}


.btn-start-onboarding span span:nth-child(2), .btn-onboarding span span:nth-child(2), .btn-onboarding-2 span span:nth-child(2), .btn-info span span:nth-child(2) {
    font-size: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    line-height: 0;
    background-color: rgba(255, 255, 255, .2);
    padding: 0 1rem;
    aspect-ratio: 1 / 1;
    width: 2rem;
    border-radius: 20%;
    transition: all .2s ease-in-out;
}

.btn-info span span:nth-child(2) {
    font-size: 1.3rem;
}

.btn-start-onboarding span span:last-child {
    font-size: 1.4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    line-height: 0;
    aspect-ratio: 1 / 1;
    width: 1rem;
    border-radius: 20%;
    transition: all .2s ease-in-out;
}

.btn-start-onboarding-retracted span span:last-child {
    display: none;
}

.btn-start-onboarding-retracted span span:first-child {
    transition: all .2s ease-in-out;
    padding-left: 1rem;
    display: none;
}

.btn-start-onboarding-retracted span span:nth-child(2) {
    /* transform: rotate(180deg); */
    background-color: transparent;
}

@media (min-width: 500px) {
    .btn-start-onboarding:hover {
        color: white;
        border: solid var(--border-width) var(--red);
        background: var(--red);
        filter: brightness(1.1);
        transform: translateX(-50%) scale(1.1);
    }

    .btn-start-onboarding:hover span span:nth-child(2), .btn-onboarding:hover span span:nth-child(2) {
        color: var(--red);
        background-color: rgba(255, 255, 255, 1);
        transform: scale(1.1);
    }

    .btn-onboarding-2:hover span span:nth-child(2) {
        color: var(--primary-color);
        background-color: rgba(255, 255, 255, 1);
        transform: scale(1.1);
    }

    .btn-info:hover span span:nth-child(2) {
        color: var(--blue);
        background-color: rgba(255, 255, 255, 1);
        transform: scale(1.1);
    }

    /* .btn-start-onboarding-retracted span span:nth-child(2):hover {
        background-color: transparent;
        color: white;
        transform: scale(1);
    } */

    /* .btn-start-onboarding-retracted:hover span span:nth-child(2):hover {
        padding: 1rem 2rem;
    } */

    .btn-start-onboarding-retracted:hover span span:first-child {
        /* padding: 1rem 2rem; */
        display: block;
    }

    .btn-start-onboarding-retracted:hover {
        padding: 1rem 1rem;
        transform: unset;
    }

    /* .btn-start-onboarding span span:last-child:hover {
        font-size: 1.7rem;
    } */

    .btn-onboarding:hover, .btn-onboarding:focus, .btn-onboarding:checked, .btn-onboarding:before, .btn-onboarding.activated {
        background: var(--red) !important;
        border: solid var(--border-width) var(--red) !important;
        transform: scale(1.05) !important;
        -webkit-transform: scale(1.05) !important;
        -moz-transform: scale(1.05) !important;
        -ms-transform: scale(1.05) !important;
        opacity: .95;
    }

    .btn-onboarding-2:hover, .btn-onboarding-2:focus, .btn-onboarding-2:checked, .btn-onboarding-2:before, .btn-onboarding-2.activated {
        background: var(--primary-color) !important;
        border: solid var(--border-width) var(--primary-color) !important;
        transform: scale(1.05) !important;
        -webkit-transform: scale(1.05) !important;
        -moz-transform: scale(1.05) !important;
        -ms-transform: scale(1.05) !important;
        opacity: .95;
    }

    .btn-info:hover, .btn-info:focus, .btn-info:checked, .btn-info:before, .btn-info.activated {
        background: var(--blue) !important;
        border: solid var(--border-width) var(--blue) !important;
        transform: scale(1.1) !important;
        -webkit-transform: scale(1.1) !important;
        -moz-transform: scale(1.1) !important;
        -ms-transform: scale(1.1) !important;
        opacity: .95;
    }

}

@media (max-width: 500px) {
    .btn-start-onboarding {
        bottom: 70px;
    }
    .btn-start-onboarding-retracted {
        right: 14px;
        bottom: 50px;
        top: unset;
    }
}


.btn-geom {
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all .15s ease-in-out;
    border-radius: 1rem;
    color: var(--blue);
    border: solid var(--border-width-small) var(--gray-light);
    background: white;
    font-weight: 500;
    font-size: 1rem;
    padding: .25rem 1rem;
    width: 95%;
    cursor: pointer;
}

@media (min-width: 500px) {
    .btn-geom:hover {
        color: white;
        background: var(--blue);
        border: solid var(--border-width-small) var(--blue);
    }
}


.has-soft-borders {
    border-radius: 10px;
    padding: 15px 10px;
    border: solid var(--border-width-small) var(--primary-color-trans-low);
}

.show-in-basic {
    display: none;
}

.checkout-project {
    display: block;
    padding: 15px 20px;
    border: solid var(--border-width-small) var(--gray-light-3);
    border-radius: 10px;
    background-color: white;
    margin: 5px 5px;
    margin-bottom: 0;
    width: auto;
    text-align: center !important;
}

/* 3D OBJECTEN LAYER MENU */
.layer-menu-container {
    position: absolute;
    top: 20px;
    right: 90px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    max-width: 300px;
    width: 300px;
    max-height: calc(100vh - 40px);
    overflow: auto;
    z-index: 1000;
    padding: 15px 20px;
    /* padding-left: 20px; */
    padding-top: 20px;
}

.layer-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0px;
    margin-bottom: 15px;
}
.layer-menu-header h3 {
    margin: 0;
    color: var(--dark);
    font-size: 1.3rem;
    display: flex;
    gap: 10px;
    padding-left: 4px;
    align-items: center;
}
.layer-menu-header h3 i {
    color: var(--blue);
}
.layer-menu-content {
    max-height: calc(100% - 50px);
    overflow-y: auto;
}

@media screen and (max-width: 500px) {
    .layer-menu-container {
        top: unset;
        bottom: 10px;
        right: 10px;
        left: 10px;
        max-width: unset;
        width: calc(100vw - 20px);
        max-height: unset;
        height: 40vh;
    }

    .layer-menu-content {
        max-height: calc(100% - 40px);
        overflow-y: auto;
        padding: 5px;
        border-radius: 5px;
        border: solid var(--border-width-small) var(--gray-light-6);
    }
}

.model-item {
    display: flex;
    align-items: center;
    padding: 0;
    padding-right: 5px;
    padding-left: 5px;
    border-bottom: 1px solid var(--gray-light-3);
    max-width: 100%;
}
.model-item:last-child {
    border-bottom: none;
}
.model-checkbox {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--gray-light-7);
    border-radius: 4px;
    margin-right: 10px;
    position: relative;
    cursor: pointer;
    transition: all 0.1s ease;
    outline: none;
}
.model-checkbox:checked {
    background-color: var(--blue);
    border-color: var(--blue);
}
.model-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.model-checkbox:hover {
    border-color: var(--blue);
}

.model-checkbox-red {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--gray-light-7);
    border-radius: 4px;
    margin-right: 10px;
    position: relative;
    cursor: pointer;
    transition: all 0.1s ease;
    outline: none;
}
.model-checkbox-red:checked {
    background-color: var(--red);
    border-color: var(--red);
}
.model-checkbox-red:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.model-checkbox-red:hover {
    border-color: var(--red);
}

.model-name {
    flex-grow: 1;
    font-size: 14px;
    color: var(--dark);
    cursor: pointer;
    max-width: 80%;
    padding: 12px 0;
    padding-right: 10px;
}
.zoom-to-model {
    font-size: 1.2rem;
    cursor: pointer;
}

.not-clickable {
    touch-action: none !important;
    pointer-events: none !important;
}