* { 
    box-sizing: border-box; 
}

body, html { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    overflow: hidden;
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 11pt;
}

.workspace {
    gap: 0;
    padding: var(--ws-paddings) 0 0 var(--ws-paddings);
    display: flex;
    width: 100%;
    max-width: 100vw;
    min-height: 500px;
    overflow: hidden;
}

.no-select {
    -webkit-user-select: none; 
    -ms-user-select: none;     
    user-select: none;         
}

.main-nav { 
    min-width: var(--min-nav-width); max-width: var(--max-nav-width);
    flex: 0 0 clamp(var(--min-nav-width), 7.5vw, var(--max-nav-width));
    flex-direction: column;
    justify-content: space-between;
    display: flex;
    transition: var(--trans-ease);
    transition-property: transform, opacity;
    opacity: 1;
    transform: translateX(0);
    padding-bottom: var(--ws-paddings);
}

.main-nav.prepared {
    opacity: 0;
    transform: translateX(-20px)
}

.r-panel.prepared { opacity: 0; transform: translateY(20px); }

.menu-group {
    display: flex;
    flex-direction: column;
    gap: var(--ws-gap);
    padding: var(--menu-group-paddings);
}

.menu-item, button.iconic {
    width: var(--menu-item-width);
    height: var(--menu-item-height);
    min-width: var(--menu-item-width);
    min-height: var(--menu-item-height);
    border-radius: var(--menu-item-border-radius);
    display: flex;
    align-items: center;
    justify-content: center;    
    align-self: center;
    transition: var(--trans-ease);
    transition-property: background-color, color;
    color: var(--c-black-00);
    background-color: transparent;
    border: none;
    flex: 0 0
}
.menu-item.clickable, button.iconic { cursor: pointer; }
.menu-item.active, button.iconic.active {
    background-color: var(--c-olive-04);
    color: var(--c-olive-02);
}
.menu-item.switchable .outlined, .menu-item.grouped-switchable .outlined, button.iconic.grouped-switchable .outlined { display: block; }
.menu-item.switchable .solid, .menu-item.grouped-switchable .solid, button.iconic.grouped-switchable .solid { display: none; }
.menu-item.switchable.active .solid, .menu-item.grouped-switchable.active .solid, button.iconic.grouped-switchable.active .solid { display: block; }
.menu-item.switchable.active .outlined, .menu-item.grouped-switchable.active .outlined, button.iconic.grouped-switchable.active .outlined { display: none; }

.menu-item svg, button.iconic svg { width: var(--menu-icon-width); height: var(--menu-icon-height); }
.menu-item svg.outlined, button.iconic svg.outlined {
    stroke-width: 1.5;
    stroke: currentColor; 
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.menu-item svg.solid, button.iconic svg.solid, #mmPan svg.outlined {
    fill: currentColor;
    fill-rule: evenodd;
}
#mmPan svg.outlined { stroke-width: 0; }

.menu-item .gis-sign {
    width: var(--menu-gis-width);
    height: var(--menu-gis-height);
}
.menu-item .gis-sign img { aspect-ratio: 93/92; width: 100%; height: auto; }
.menu-item.divider { background-color: var(--c-grey-04); width: 100%; height: 1px; padding: 0; min-width: unset; min-height: 1px; }
.menu-item.disabled { pointer-events: none; opacity: 0.3; }

.app { position: relative; }

.logo { padding: clamp( 3px, 1vw, var(--app-logo-paddings) ); }
.app .logo img { width: 100%; object-fit: contain; object-position: left center; margin-top: 10px; }

.map-view {
    flex: 1 1;
    position: relative;
    transition: var(--trans-ease);
    transition-property: opacity, transform;
    opacity: 1;
    transform: translateY(0);
    overflow: hidden;
    padding: var(--ws-paddings);
    padding-top: 0;
}

.map-holder {
    flex: 1 1;
    border: 1px solid var(--c-grey-03);
    border-radius: var(--dialog-border-radius);
    padding: var(--map-paddings);
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
    display: block;
    height: 100%;
}

.map-view.prepared {
    opacity: 0;
    transform: translateY(20px);
}

.map-view:before {
    content: '';
    top: var(--map-paddings); left: calc( var(--map-paddings) + var(--ws-paddings)); width: calc(100% - 2*var(--map-paddings) - 2*var(--ws-paddings)); height: calc(100% - 2*var(--map-paddings) - var(--ws-paddings));
    position: absolute;
    background-color: var(--c-grey-05);
    z-index: 0;
}

.main-map {
    width: 100%;
    height: 100%;
    background-color: var(--c-grey-05);
    transition: var(--trans-ease);
    transition-property: opacity;
    transition-duration: 0.5s;
    opacity: 1;
    z-index: 1;
}

.map-container { width: 100%; height: 100%; position: relative; overflow: hidden; }

.main-map.initialising {
    opacity: 0;
}

.dialog-box {
    position: absolute;
    top: 20px;
    left: 65px;
    z-index: 1;
    /*max-height: 1000px;*/
    opacity: 1;
    transition: var(--trans-ease);
    transition-property: opacity, transform, max-height;
    font-size: 10pt
}

.dialog-box.closed {
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    max-height: 0;
}

.dialog-container {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.4);
    
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px); /* Safari support */

    border: 1px solid var(--c-grey-03);
    border-radius: var(--dialog-border-radius);
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
    padding: var(--dialog-paddings);
    min-width: 270px;
    transition: var(--trans-ease);
    transition-property: box-shadow;
}

.dialog-body::-webkit-scrollbar { width: 3px; }
.dialog-body::-webkit-scrollbar-track { background:rgba(0,0,0,0.1); }
.dialog-body::-webkit-scrollbar-thumb { background:rgba(0,0,0,0.2); }
.dialog-body::-webkit-scrollbar-thumb:hover { background:rgba(0,0,0,0.4); }
.dialog-body::-webkit-scrollbar-thumb:window-inactive { background:rgba(0,0,0,0.05); }

.suggestions::-webkit-scrollbar { width: 3px; }
.suggestions::-webkit-scrollbar-track { background:rgba(0,0,0,0.1); }
.suggestions::-webkit-scrollbar-thumb { background:rgba(0,0,0,0.2); }
.suggestions::-webkit-scrollbar-thumb:hover { background:rgba(0,0,0,0.4); }
.suggestions::-webkit-scrollbar-thumb:window-inactive { background:rgba(0,0,0,0.05); }

.schools-list::-webkit-scrollbar { width: 3px; }
.schools-list::-webkit-scrollbar-track { background:rgba(0,0,0,0.1); }
.schools-list::-webkit-scrollbar-thumb { background:rgba(0,0,0,0.2); }
.schools-list::-webkit-scrollbar-thumb:hover { background:rgba(0,0,0,0.4); }
.schools-list::-webkit-scrollbar-thumb:window-inactive { background:rgba(0,0,0,0.05); }

.directions::-webkit-scrollbar { width: 3px; }
.directions::-webkit-scrollbar-track { background:rgba(0,0,0,0.1); }
.directions::-webkit-scrollbar-thumb { background:rgba(0,0,0,0.2); }
.directions::-webkit-scrollbar-thumb:hover { background:rgba(0,0,0,0.4); }
.directions::-webkit-scrollbar-thumb:window-inactive { background:rgba(0,0,0,0.05); }

.dialog-box.active { z-index: 2; }
.dialog-box.active .dialog-container {
    box-shadow: 4px 4px 10px rgba(0,0,0,0.2);
}
.dialog-box-holder {
    display: flex;
    flex-direction: column;
    gap: 0; min-height: 100%;
    background-color: white;
    padding: 1px;
    position: relative;
    transition: var(--trans-ease); transition-property: background-color;
}

.dialog-box.pending .dialog-box-holder { overflow: hidden; }
.dialog-box.pending .dialog-box-holder:before {
    content: ''; position: absolute;
    top: -100%; left: -100%; width: 300%; height: 300%; z-index: 3;
    background: linear-gradient(
        45deg,
        transparent 0%,
        transparent 29%,
        rgba(255, 255, 255, 0) 30%,
        rgba(255, 255, 255, 0.45) 50%,
        rgba(255, 255, 255, 0) 70%,
        transparent 71%,
        transparent 100%
    );
    animation: shinePendingLine 2s linear infinite;
    transform-origin: center;
}
@keyframes shinePendingLine {
    0% {
        transform: translate(-50%, 0);
    }
    30% {
        transform: translate(100%, 0);
    }
    100% {
        transform: translate(100%, 0);
    }
}
.dialog-box-holder:after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 2;
    background-color: var(--c-olive-02);
    transition: var(--trans-ease);
    transition-property: opacity;
    will-change: opacity;
    max-height: 0; opacity: 0;
    overflow: hidden;
}
.dialog-box.pending .dialog-box-holder:after {
    max-height: 100%; opacity: 0.15;
}
.searchBox.dialog-box { width: 474px; }
.searchBox .dialog-box-holder {
    flex-direction: row;
    padding: 2px;
}
#dlgLegends .dialog-body { max-height: 300px; overflow-y: auto; }
.dialog-title-bar {
    display: flex;
    align-items: center;
    flex: 1 1 100%;
    background-color: var(--c-sand-04);
    font-size: 10pt;
    user-select: none;
}
.dialog-title-bar .dialog-title {
    flex: 1 1 100%;
    padding-left: 5px;
    font-weight: 700;
}
.dialog-icon {
    flex: 0 0 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50px;
    position: relative;
}
.dialog-icon:before {
    content: '';
    position: absolute;
    top: 50%; left: 50%; width: 0; height: 0;
    border-radius: 50px;
    max-width: 30px; max-height: 30px; min-width: 30px; min-height: 30px;
    transform: translate(-50%, -50%);
    transition: var(--trans-ease);
    transition-property: background-color, width, height;
    background-color: transparent;

}
.dialog-icon svg {
    z-index: 1;
    transition: var(--trans-ease);
    transition-property: transform;
}
.dialog-close svg { 
    width: 16px; 
    height: 16px; 
    stroke: currentColor;
    stroke-width: 1.5;
}
.input-box {
    position: relative;
    flex: 1 1;
    display: flex;
    gap: 2px;
}
.input-box .hint {
    position: absolute;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
    z-index: 0;
    pointer-events: none;
    user-select: none;
    font-size: 10pt;
    transition: var(--trans-ease);
    transition-property: opacity;
}
.input-box .hint.hidden { opacity: 0; }
.input-box input { border-radius: 3px; }
.input-box #btnCancelSearch { display: none }
.executed .input-box #btnCancelSearch { display: flex }
.input-box .pending-status, .dialog-title-bar .pending-status { 
    position: absolute; 
    width: 40px; height: 38px;
    top: 1px; right: 30px;
    padding: 9px 10px;
    display: none;
    align-items: center; justify-content: center;
    z-index: 3;
}
.input-box .pending-status { top: 0; right: 126px; }
.pending .input-box .pending-status, .pending .dialog-title-bar .pending-status { display: flex; }

.dragger { 
    padding-left: 3px; 
    width: 25px; min-width: 25px; height: 40px; 
    align-self: center; cursor: grab !important; 
    display: flex; align-items: center; 
    justify-content: center; 
}
.dragging .dragger { 
    cursor: grabbing !important; 
}
.dragger svg { width: 100%; height: 18px; }
.searchBox .dragger { height: 38px; }
.searchBox { --menu-item-height: 38px; }

input { border: none; outline: none; font-size: 11pt; flex: 1 1; padding: 5px; }

.esri-attribution { display: none !important; }

.layer-item {
    padding: 8px 30px;
    border-bottom: 1px solid var(--c-grey-04);
    cursor: pointer !important;
    transition: var(--trans-ease);
    transition-property: background-color;
    display: flex;
    gap: 8px;
    align-items: center;
    user-select: none;
}
.layer-item .shown, .layer-item .hidden, .layer-item.hidden .hidden { 
    display: flex;
    width: 14px; height: 14px;
    min-width: 14px;
}
.layer-item { transition: var(--trans-ease); transition-property: color, background-color; }
.layer-item svg { width: 100%; height: 100%; fill: currentColor; transition: var(--trans-ease); transition-property: fill; }
.layer-item .hidden, .layer-item.hidden .shown { display: none }
.layer-item.hidden { color: var(--c-grey-03); }

.legend-item { max-height: 50px; overflow: hidden; flex-shrink: 0; transition: var(--trans-ease); transition-property: max-height, opacity; opacity: 1; }
.legend-container { padding: 5px 20px 5px 30px; display: flex; font-size: 9pt; gap: 12px; position: relative; }
.legend-item.category .legend-container { padding: 15px 20px 8px 30px; font-weight: 700; font-size: 9.5pt; }
.legend-item.label .legend-container { align-items: center; padding-top: 3px; padding-bottom: 3px; gap: 7px; }
.legend-item.hidden { max-height: 0; opacity: 0; }
.legend-item .icon { position: relative; }
.legend-item.boundary .icon { max-width: 14px; max-height: 14px; min-width: 14px; min-height: 14px; background-color: currentColor; border-radius: 2px; }
.legend-item.label .icon { max-width: 14px; max-height: 14px; min-width: 20px; min-height: 20px; } 
.legend-item.label .icon img { position: absolute; top: 50%; left: 50%; transform: translate(calc(-50% - 3px), -50%); width: calc(100% + 4px); height: calc(100% + 4px); }

#dlgLegends .dialog-body { padding-bottom: 10px; }
#dlgLegends .dialog-container { max-width: 270px; }

.modal-view {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    height: 100dvh;
    align-items: center;
    justify-content: center;
    z-index: 10;
    display: none;
}

.modal-view:before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.4);
    transition: var(--trans-ease);
    transition-property: opacity;
    opacity: 0;
}

.modal-view.active:before {
    opacity: 1;
}

.modal-view.shown {
    display: block;
}

.gis-logo, .hcs-logo {
    transition-property: opacity, transform;
    opacity: 1;
    transform: translateY(0);
    transition: var(--trans-ease);
}
.closed .gis-logo, .closed .hcs-logo {
    opacity: 0;
    transform: translateY(20px);
}
.gis-logo { max-width: 93px; transition-delay: 0.2s; }
.hcs-logo { max-width: 115px; margin-top: 30px; transition-delay: 0.1s; }
#dlgIntro.dialog-intro {
    max-width: min(800px,calc(100vw - 30px)) !important;
    max-height: calc(100% - 30px ) !important;
    width: 100%; min-width: 290px;
    top: 50%; left: 50%; 
    transform: translate(-50%, -50%);
    transition-duration: 0.3s;
    overflow: hidden;
    /* max-height: 100% !important;*/
}
.dialog-intro.closed {
    transform: translate(-50%, calc(-50% + 40px));
    opacity: 0;
}

.dialog-intro .dialog-body {
    display: flex;
}
.dialog-intro .intro-logos {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    background-color: var(--c-sand-04);
    min-width: 250px;
}
.dialog-intro .intro-body {
    flex: 1 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 35px 0 25px;
    overflow: hidden;
}
.dialog-intro .intro-welcome {
    display: flex;
    flex-direction: column;
    padding-bottom: 20px;
    gap: 5px;
}
.dialog-intro .intro-welcome h1 {
    margin: 0;
    font-size: 12pt;
    font-weight: 700;
    transition: var(--trans-ease);
    transition-property: opacity, transform;
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s;
    padding-left: clamp(20px, 6vw, 40px);
    padding-right: clamp(20px, 6vw, 40px);
}
.dialog-intro.closed .intro-welcome h1, .dialog-intro.closed .intro-text {
    opacity: 0;
    transform: translateY(20px);
}

.dialog-intro .intro-text {
    font-size: 9pt;
    line-height: 1.3;
    /*max-height: 320px;*/
    overflow-y: auto;
    transition: var(--trans-ease);
    transition-property: opacity, transform;
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
    padding-left: clamp(20px, 6vw, 40px);
    padding-right: clamp(20px, 6vw, 40px);
}

.control-bar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    transition: var(--trans-ease);
    transition-property: opacity, transform;
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.3s;
}

.closed .control-bar {
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
}

.dialog-intro .control-bar {
    height: 32px;
    padding-left: clamp(20px, 6vw, 40px);
    padding-right: clamp(20px, 6vw, 40px);
}

.interface-field {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 9pt;
}

.interface-panel {
    display: flex;
    flex: 1 1 100%;
    align-items: center;
    justify-content: space-between;
    transition: var(--trans-ease);
    transition-property: opacity, transform;
}

.interface-panel.message-panel {
    width: 100%;
}

.message-box { display: flex; align-items: center; gap: 8px; font-size: 9pt; font-weight: 600; }
.message-box .icon { width: 18px; height: 18px; color: var(--c-warning-red); }
.message-box .icon svg { width: 100%; height: 100%; fill: currentColor; }

.interface-panel.preloader {
    flex-direction: column;
    min-width: 100%;
    gap: 8px;
    max-height: 100px;
    transition-property: opacity, transform, max-height;
}
.interface-panel.preloader.hidden { max-height: 0; transform: translateY(-20px); }
.interface-panel.continue-panel { min-width: 100%; }

.interface-panel.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    max-height: 0;
}

.preloader-status {
    display: flex;
    flex: 1 1 100%;
    align-items: center;
    justify-content: space-between;
    font-size: 8pt;
    font-weight: 600;
    min-width: 100%;
}

.progress-bar {
    width: 100%;
    height: 5px;
    background-color: var(--c-grey-05);
    border: 1px solid var(--c-grey-04);
    border-radius: 2px;
    position: relative;
}

.progress-bar .progress-bar-fill {
    position: absolute;
    top: -1px; left: -1px;
    height: calc(100% + 2px);
    background-color: var(--c-olive-02);
    transition: var(--trans-ease);
    transition-property: width;
    border-radius: 2px;
    overflow: hidden;
}

.progress-bar-fill:after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 100%; height: 100%;
    width: 300%;
    min-width: 150px;
    background: linear-gradient( 90deg, rgba(107, 117, 56, 0) 0%, rgba(107, 117, 56, 0) 33%, rgba(255, 255, 56, 0.8) 50%, rgba(107, 117, 56, 0) 67%, rgba(107, 117, 56, 0) 100% );
    animation: gradientSlide 3s ease-in-out infinite;
    pointer-events: none;
}
@keyframes gradientSlide {
    0% { transform: translateX(0); }
  100% { transform: translateX(66.666%); }
}

button.btn {
    padding: 7px 25px;
    border: none;
    border-radius: 50px;
    font-size: 10pt;
    font-weight: 600;
    background-color: var(--c-white-05);
    color: var(--c-olive-02);
    border: 1px solid var(--c-olive-02);
    cursor: pointer;
    transition: var(--trans-ease);
    transition-property: background-color, color;
    user-select: none; white-space: nowrap;
}

label { user-select: none; cursor: pointer}

input[type="checkbox"].switch {
    width: 35px; min-width: 35px;
    height: 16px;
    cursor: pointer;
    appearance: none;
    border-radius: 50px;
    background-color: var(--c-grey-05);
    border: 1px solid var(--c-grey-03);
    position: relative;
    transition: var(--trans-ease);
    transition-property: background-color, border-color;
    margin: 0;
    overflow: hidden;
}
input[type="checkbox"].switch:before {
    content: '';
    position: absolute;
    top: 1px; left: 1px;
    width: 0; height: calc(100% - 2px);
    border-radius: 50px;
    background-color: var(--c-olive-02);
    transition: var(--trans-ease);
    transition-property: width, opacity;
    opacity: 0;
} 
input[type="checkbox"].switch:after {
    content: '';
    position: absolute;
    top: 1px; left: 1px;
    width: 10px; height: 10px;
    border-radius: 50px;
    background-color: white;
    border: 1px solid var(--c-grey-03);
    transition: var(--trans-ease);
    transition-property: transform;
    transform: translateX(0);
}

input[type="checkbox"].switch:checked::after {
    transform: translateX(19px);
    border-color: var(--c-olive-02);
}
input[type="checkbox"].switch:checked::before {
    width: calc(100% - 2px);
    opacity: 1;
}

.esri-view {
    --esri-view-outline: none;
}

.loader { 
    width: 48px; height: 48px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    border: 3px solid;
    border-color: var(--c-gisOrange) var(--c-gisOrange) transparent transparent;
    box-sizing: border-box;
    animation: rotation 2s linear infinite;
}
.loader::after,
.loader::before {
    content: ''; box-sizing: border-box;
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    margin: auto;
    border: 3px solid;
    border-color: transparent transparent var(--c-gisGreen) var(--c-gisGreen);
    width: 40px; height: 40px;
    border-radius: 50%; 
    animation: rotationBack 1s linear infinite;
    transform-origin: center center;
}
.loader::before {
    width: 32px; height: 32px;
    border-color: var(--c-gisBlue) var(--c-gisBlue) transparent transparent;
    animation: rotation 3s linear infinite;
}
.dialog-title .loader, .pending-status .loader { width: 16px; height: 16px; border-width: 1px; margin-left: 8px; }
.dialog-title .loader:after, .pending-status .loader:after { width: 13px; height: 13px; border-width: 1px; }
.dialog-title .loader:before, .pending-status .loader:before { width: 10px; height: 10px; border-width: 1px; }
.pending-status .loader { margin-left: 0; }
    
@keyframes rotation {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
} 
@keyframes rotationBack {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}

#dlgSearchResults { top: 92px; left: 19px; width: 520px; }
#dlgSearchResults, #dlgDirections { min-width: 520px; }
#dlgDirections { width: 520px; }

.directions { 
    overflow-y: auto; 
    max-height: 250px; 
    padding: 5px;
    position: relative;
}
.directions-container {
    position: relative;
    width: 100%;
    min-height: fit-content;
}
.directions-container:before {
    content: ''; position: absolute; z-index: 0;
    left: 30px; top: 15px; width: 1px; height: calc( 100% - 70px );
    border-left: 1px dashed var(--c-grey-04);
}
.direction-item { 
    position: relative; z-index: 1;
    padding: 5px 20px;
    display: flex; border-radius: 2px;
    gap: 8px; cursor: pointer;
    transition: var(--trans-ease);
    transition-property: background-color;
    will-change: background-color;
    background-color: transparent;
}
.direction-item.active { background-color: var(--c-olive-04); }
.direction-item .icon {
    flex: 0 0 11px;
    width: 11px; height: 11px;
    background-color: white;
    border: 1px solid var(--c-grey-03); border-radius: 50px;
    position: relative;
    margin: 5px; 
}
.direction-item:first-child .icon, .direction-item:last-child .icon { flex: 0 0 21px; width: 21px; height: 21px; margin: 0; }
.direction-item:first-child .icon:before, .direction-item:last-child .icon:before { width: 12px; height: 12px; }
.direction-item:first-child .icon:before { background-color: var(--c-gisOrange) }
.direction-item:last-child .icon:before { background-color: var(--c-gisBlue) }
.direction-item .icon:before {
    content: ''; position: absolute;
    width: 6px; height: 6px;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    background-color: var(--c-gisGreen);
    border-radius: 50px;
}
.direction-item .text {
    flex: 1 1 100%;
    padding-top: 2px;
    position: relative;
}
.direction-item .dist { font-size: 0.9em; }
.direction-item:before {
    z-index: 0; content: ''; 
    width: 1px; height: 100%; 
    position: absolute; 
    border-left: 1px dashed transparent; 
    left: 30px; top: 0;
}
.direction-item.active:before { border-color: var(--c-grey-03); }
.direction-item:first-child:before { top: 10px; height: calc(100% - 10px); }
.direction-item:last-child:before { height: 10px; }

.esri-zoom { border-radius: 5px; border: 1px solid var(--c-grey-03); overflow: hidden; }
.esri-zoom .esri-widget--button { width: 30px; height: 29px; }
.esri-zoom calcite-button button:focus { outline: none !important; }

#dlgSearchResults .control-bar { 
    border-bottom: 1px solid var(--c-grey-03); 
    flex-direction: row;
    display: flex; 
    flex: 1 1 100%;
    justify-content: space-between;
    padding-left: 28px;
}
#dlgSearchResults .control-bar.hidden { display: none }
#dlgSearchResults .control-bar .location {
    display: flex;
    flex: 1 1 100%;
    flex-direction: column;
    gap: 3px;
    padding: 10px 10px 10px 0;
}
.schools-footer {
    background-color: var(--c-grey-05);
    border-top: 1px solid var(--c-grey-04);
    padding: 8px 20px;
    font-size: 8pt;
}
.schools-footer span { 
    max-width: 350px; 
    display: block; 
    margin: 0 auto;
    text-align: center;
}

.loc-head { 
    display: flex;
    gap: 10px;
}
.loc-head .icon { width: 15px; height: 15px; flex: 0 0 15px; color: var(--c-grey-02); }
.loc-head .icon svg { width: 100%; height: 100%; fill: currentColor; }
.location .hint { 
    font-size: 8pt; 
    padding-left: 25px; 
    transition: var(--trans-ease); 
    transition-property: opacity, max-height; will-change: opacity, max-height; 
    opacity: 1; max-height: 15px; 
}
.location .hint.hidden { opacity: 0; max-height: 0; }

.route-bar {
    display: flex;
    flex: 0 0;
    gap: 2px;
    padding: 6px 5px;
}
.route-icon { 
    width: 48px; height: 48px; border-radius: 4px; 
    transition: var(--trans-ease); 
    transition-property: background-color, color, border-color;
    will-change: background-color, color, border-color;
    cursor: pointer;
    pointer-events: all;
}
.route-icon.disabled { 
    pointer-events: none;
    color: var(--c-grey-03);
}
.route-icon.active {
    background-color: var(--c-olive-04); color: var(--c-olive-02); border-color: var(--c-olive-02);
}
.route-icon svg { width: 100%; height: 100%; fill: currentColor; }

.dialog-title {
    display: flex;
    flex: 1 1 100%;
    flex-direction: column;
    gap: 0;
    height: 40px;
    overflow: hidden;
    justify-content: center;
}
.dialog-title .title-line {
    transition: var(--trans-ease);
    transition-property: opacity, transform, max-height;
    opacity: 1; max-height: 100px;
    transform: translateY(0);
}
.title-line.hiding {
    transform: traslateY(-10px);
    opacity: 0; max-height: 0;
}
.title-line.added {
    transform: translateY(10px);
    opacity: 0; max-height: 0;
}

.schools-holder { 
    display: flex; flex-direction: column; gap: 0; flex: 1; overflow: auto; justify-content: space-between;
}

.schools-list {
    transition: 5s linear; /*var(--trans-ease);*/
    transition-property: height;
}
.school-item {
    position: relative;
    max-height: 75px;
    height: 75px;
    opacity: 1;
    transition: .3s linear; 
    transition-property: opacity, max-height, background-color, transform;
    background-color: transparent;
    cursor: pointer;
    overflow: hidden;
}
.school-item.active { background-color: var(--c-olive-04); }
.school-item-container {
    display: flex; position: relative;
    border-bottom: 1px solid var(--c-grey-04);
    padding: 10px 8px 10px 15px; gap: 8px;
    height: 100%;
}
.school-item.hiding { 
    opacity: 0;
    max-height: 0;
    transform: translateY(-20px);
}
.school-item.added {
    opacity: 0;
    max-height: 0;
    transform: translateY(-20px);
}

.school-item:last-child .school-item-container { border-bottom: none; }

.school-icon { width: 24px; height: 24px; flex: 0 0 24px; }
.school-icon img { width: 100%; height: 100%; }
.school-info { 
    flex-direction: column; 
    display: flex; 
    flex: 1 1 100%;
    gap: 8px;
}
.school-info .icon { width: 12px; height: 12px; color: var(--c-grey-02); flex: 0 0 12px; display: flex; }
.school-info .icon svg { width: 100%; height: 100%; fill: currentColor; }
.school-info .row-1 { display: flex; flex-direction: column; gap: 3px; }
.school-info .row-2 { display: flex; flex-direction: row; gap: 10px; }
.school-link { display: flex; align-items: center; padding-right: 10px; }
.school-link svg { width: 25px; aspect-ratio: 36/33; fill: currentColor; transition: var(--trans-ease); transition-property: fill; will-change: fill; }
.school-link a { 
    text-decoration: none; color: black; 
    display: flex; flex-direction: column; gap: 5px; 
    justify-content: center; align-items: center;
    transition: var(--trans-ease);
    transition-property: color, background-color; 
    will-change: color, background-color;
    padding: 7px 7px 4px; border-radius: 4px;
}
.school-link span { font-size: 5.5pt; text-transform: uppercase; white-space: nowrap; font-weight: 500; }

.school-item .school-info .phone, .school-item .school-info .address { display: flex; gap: 5px; font-size: 8.5pt; font-weight: 600; }
.school-item .school-info .phone { min-width: 120px; align-items: center; }
.school-general { padding-top: 3px; font-weight: 600; }
.route-info {
    font-size: 0.9em;
    transition: var(--trans-ease);
    transition-property: max-height, opacity;
    will-change: max-height, opacity;
    max-height: 12px; opacity: 1;
}
.route-info.hidden { max-height: 0; opacity: 0; }

.suggestions { 
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 120px;
    transition: var(--trans-ease);
    transition-property: max-height;
    will-change: max-height;
    background-color: rgba(255,255,255,0.3);
}

.suggestions.hidden, .executed .suggestions { max-height: 0; }

.suggest-item {
    padding: 7px 10px 7px 31px;
    border-bottom: 1px solid var(--c-grey-04);
    transition: var(--trans-ease);
    transition-property: background-color, color;
    will-change: background-color, color;
}
.suggest-item.active { 
    background-color: var(--c-olive-04); 
}
.suggest-item:last-child { border-bottom: none; }

.featureBox { 
    width: 320px; pointer-events: none; 
    z-index: 0 !important; 
    /* top: 45%; left: 45%;
    transition-property: transform, top, left, opacity, max-height;
    will-change: transform, top, left, opacity, max-height; */
}
.featureBox .dialog-container { box-shadow: none !important; }
.featureBox.closed { overflow: hidden }
.featureBox .dialog-close, .featureBox .school-link { pointer-events: all; }
.featureBox .dragger { display: none; }
.featureBox .dialog-title-bar .dialog-title { padding-left: 10px; flex-direction: row; align-items: center; justify-content: start; gap: 5px; }
.featureBox .dialog-title .icon { width: 24px; height: 24px; min-width: 24px; }
.featureBox .dialog-title .icon img { width: 100%; height: 100%; }

.featureBox .r1 { display: flex; flex-direction: row; align-items: start; }
.featureBox .school-info { padding: 10px 10px 10px 16px; gap: 3px; }
.featureBox .school-link { padding-top: 7px; padding-right: 7px; }
.featureBox .address, .featureBox .phone { display: flex; gap: 7px; font-size: 9pt; font-weight: 600; align-items: center; }
.featureBox .address { padding-top: 5px; }
.featureBox .control-bar button.hidden { display: none; }

.featureBox .control-bar { display: flex; gap: 3px; padding: 5px; border-top: 1px solid var(--c-grey-04); flex-direction: row; justify-content: left; }
.featureBox .control-bar button { 
    border-radius: 3px; font-size: 9pt; 
    display: flex; gap: 5px; align-items: center; 
    color: black; pointer-events: all; 
    white-space: nowrap;
    width: fit-content; height: fit-content;
    background-color: transparent;
    transition: var(--trans-ease);
    transition-property: background-color, color;
    border: none;
    will-change: background-color, color;
    flex: 0 0 fit-content;
    padding: 5px 10px; color: var(--c-olive-02);
}
.featureBox .control-bar button svg { flex: 0 0 16px; width: 16px; height: 16px; fill: none; stroke: currentColor; }

.popup-pin {
    position: absolute;
    width: 7px; height: 7px;
    border: 1px solid rgba(255,255,255,0.9);
    border-radius: 5px;
    background-color: black;
    bottom: -20px; left: calc( 50% - 2.5px);
    pointer-events: none;
}
.popup-pin:before {
    position: absolute;
    width: 1px; height: 14px;
    background: linear-gradient(to bottom, var(--c-grey-03), #000000);
    left: 2px; bottom: 100%;
    content: ''; pointer-events: none;
}

.interface-hint {
    position: fixed; z-index: 100; 
    max-height: fit-content;
    transition: var(--trans-ease);
    transition-property: opacity, transform;
    will-change: opacity, transform;
    font-size: 9pt;
    overflow: hidden;
    opacity: 1;
}
.interface-hint.prepared {
    max-height: 0;
    opacity: 0; transform: translate(20px,0);
}
.interface-hint.prepared.bottom { transform: translate(0,20px); }
.interface-hint .hint-container {
    background-color: var(--c-black-00);
    border-radius: 5px;
    color: var(--c-white-05);
    padding: 10px 15px;
    max-width: 250px;
    position: relative;
    margin-left: 4px; margin-top: 0;
}
.interface-hint.bottom .hint-container {
    margin-left: 0; margin-top: 4px;
}
.interface-hint .hint-container:before {
    position: absolute;
    transform: rotate(45deg);
    background-color: var(--c-black-00);
    top: calc(50% - 5px); left: -1px;
    width: 10px; height: 10px;
    z-index: 0; content: '';
}
.interface-hint.bottom .hint-container:before {
    top: -1px; left: calc(50% - 5px);
}
.hint-container .hint-body {
    display: flex; flex-direction: column;
    gap: 5px;
    position: relative;
    z-index: 1;
}
.hint-container .hint-title { 
    font-weight: 600; font-size: 1.1em;
}
.hint-container .hint-title.hidden, .hint-container .hint-text.hidden { display: none }

.route-shown .dialog-box:not(.searchBox) .dialog-container { 
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.route-shown .dialog-box:not(.searchBox) .dialog-box-holder { background-color: rgba(255,255,255,0.3); }
.route-shown .schools-footer { background-color: transparent; border-color: rgba(0,0,0,0.1) }
.route-shown .dialog-box:not(.searchBox) .dialog-title-bar { background-color: rgba(251, 249, 243, 0.5); }
.route-shown .layer-item.hidden { color: rgba(0,0,0,0.3) }
.route-shown .school-item-container, .route-shown #dlgResultsBox .control-bar { border-color: rgba(0,0,0,0.1) }


.preload {
    transition: var(--trans-func);
    transition-property: opacity, transform;
    opacity: 1;
}
.preload.initialising {
    opacity: 0;
}

.legend-item { position: relative; }
.legend-item.single {
    display: flex;
    gap: 14px;
    padding-left: 30px;
    align-items: center;
    flex-direction: row-reverse;
}
.legend-item.single.category { margin-top: 10px; }
.legend-item:not(.single) + .legend-item.single { margin-top: 10px; }
.legend-item.hidden { margin-top: 0 !important; }
.legend-item.single .legend-container { padding: 5px 0; flex: 1; }
.color-legend {
    width: 14px;
    height: 14px;
    z-index: 1;
    border-radius: 2px;
}

.r-panel { 
    display: flex;
    max-width: 0;
    padding-bottom: var(--ws-paddings);
    transition: var(--trans-ease);
    transition-property: max-width, max-height, padding-left, transform, opacity;
    will-change: max-width, max-height, padding-left, transform, opacity; overflow: hidden;
}

.r-panel.shown { width: 100%; max-width: var(--max-rpanel-width); opacity: 1; padding-left: var(--ws-paddings); }
.r-panel .tabs:before { display: none; }
.r-panel.shown .tabs:before { display: block; }

.r-panel-holder {
    display: flex; flex: 1 1 100%; 
    border: 1px solid var(--c-grey-03); border-radius: 5px; flex-direction: column;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

.r-panel .dialog-box { position: relative; top: 0 !important; left: 0 !important; min-width: unset !important; width: 100% !important; flex: 1 1 50%; overflow: hidden;}
.r-panel .dialog-box .dialog-container { box-shadow: none !important; border: none !important; flex: 1; height: 100%; padding: var(--map-paddings); }
.r-panel .dialog-box .dragger, .r-panel .dialog-box .dialog-close { display: none; }
.r-panel .dialog-box .school-item { min-height: unset; height: unset; min-height: fit-content; }
.r-panel .dialog-box .school-item.hiding { min-height: unset !important; }
.r-panel .dialog-box .school-item-container { padding-left: 6px; padding-top: 6px; gap: 5px; }
.r-panel .dialog-box .control-bar { padding-left: 11px !important; }
.r-panel .dialog-box .school-info .row-2 { flex-direction: row; gap: 10px; }
.r-panel .dialog-box .dialog-title-bar { padding-left: 12px !important; flex: 0; padding-right: 10px !important; }
.r-panel .school-contacts { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.r-panel .school-link a { flex-direction: row; gap: 10px; align-items: center; padding: 7px 12px; font-size: 6.5pt; border: 1px solid transparent; }
.r-panel .school-link svg { width: 18px; aspect-ratio: 18 / 16; }

.r-panel .dialog-box .dialog-box-holder { height: 100%; }
.r-panel .dialog-box .dialog-container .dialog-body { height: 100%; overflow: auto; flex-direction: column; display: flex; }
.r-panel .dialog-box .dialog-container .dialog-body .control-bar, .r-panel .dialog-box .dialog-container .dialog-body .schools-footer { flex: 0 !important; }
.r-panel .dialog-box .dialog-container .dialog-body .schools-list { overflow: auto; }


.r-panel .dialog-box .dialog-title-bar .pending-status { right: 10px; }
.r-panel .directions { max-height: 100%; padding: 0; }
.r-panel .location .hint, .r-panel .route-info { max-height: fit-content; }
.r-panel .school-general { padding-top: 5px; }
.r-panel .school-link { padding-right: 2px; align-items: flex-start; --c-website: var(--c-olive-04); }
.r-panel .school-link span { font-size: 6.5pt;}
.r-panel .direction-item { padding-left: 13px; padding-right: 10px; }
.r-panel .direction-item:before, .r-panel .directions-container:before { left: 23px; }

.no-search-message {
    max-height: 200px; overflow: hidden;
    transition: var(--trans-ease);  width: 100%;
    transition-property: max-height; will-change: max-height;
}
.no-search-message.hided {
    max-height: 0;
}
.no-search-container {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 30px; padding: 35px 30px; text-align: center; min-width: calc( var(--max-rpanel-width) - 60px );
    transition: var(--trans-ease); transition-property: opacity, transform; will-change: opacity, transform;
    opacity: 0;
}
.shown .no-search-container { opacity: 1; }

.no-search-icons { display: flex; gap: 10px; }
.no-search-icon { 
    width: 60px; height: 60px; padding: 15px; color: var(--c-grey-02); background-color: var(--c-sand-04); 
    display: flex; align-items: center; justify-content: center; 
    border-radius: 4px; border: 1px solid var(--c-olive-04);
}
.no-search-icon svg.outlined { width: 100%; height: 100%; stroke: currentColor; fill: none;}
.no-search-icon svg.solid { width: 100%; height: 100%; fill: currentColor; stroke: none;}

.assigned.unwrapped { white-space: nowrap; }

.dialog-box.searchBox { left: calc(var(--srch-paddings) + var(--ws-paddings) + var(--map-paddings)); max-width: calc(100% - 2 * var(--ws-paddings) - 2 * var(--map-paddings) - 2*var(--srch-paddings) ); top: calc( var(--srch-paddings) + var(--map-paddings) ); }
.dialog-box.searchBox .dragger { display: none; }
.dialog-box.searchBox .input-box { padding-left: 10px;}
.dialog-box.searchBox .input-box .hint { left: 15px; }

.dialog-minimize { width: 30px; flex: 0 0 30px; margin-right: -5px; height: 40px; padding: 7px 2px; display: flex; align-items: center; justify-content: center; }
.dialog-minimize svg { width: 18px; height: 18px; }

.dialog-title-bar .maximize-icon { display: none; }
.dialog-box.minimized .maximize-icon { display: block; }
.dialog-box.minimized .minimize-icon { display: none; }
.dialog-box.minimized .dialog-body { max-height: 0 !important; padding-bottom: 0 !important; overflow: hidden; }

.minimized-container { 
    display: flex; flex-direction: row; gap: 5px; 
    bottom: calc( var(--ws-paddings) + var(--map-paddings) + var(--srch-paddings) ); right: calc( var(--ws-paddings) + var(--map-paddings) + var(--srch-paddings) ); /*z-index: 10;*/ position: absolute;
}

.minimized-container .dialog-box { 
    position: relative; top: unset !important; left: unset !important; right: unset !important; bottom: unset !important;
}
.minimized-container .dragger { display: none; }
.minimized-container .dialog-title-bar { padding-left: 15px; }

.ws-holder { display: flex; flex-direction: row; gap: 0; flex: 1 1 100%; max-width: 100%; }

.tabs { display: none; flex-direction: row; gap: 0; font-size: 10pt; font-weight: 700; background-color: var(--c-sand-04); border-radius: 4px; overflow: hidden; position: relative; justify-content: space-between; }
.tabs-holder { display: flex; flex-direction: row; gap: 0; flex: 1; }
.r-panel.shown .tabs { border-radius: 4px 4px 0 0; }
.tabs.hidden { max-height: 0; }
.tabs:before { position: absolute; content: ''; width: 100%; height: 1px; background-color: var(--c-grey-04); bottom: 0; left: 0; z-index: 0;}
.tab { 
    padding: 5px 10px; white-space: nowrap; 
    height: 40px; max-width: 100px; font-size: 9pt;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    flex: 1 1 fit-content; cursor: pointer; z-index: 1; color: var(--c-black-01); 
    transition: var(--trans-ease); transition-property: background-color, color; will-change: background-color, color; 
}
.tab.active { background-color: white; color: var(--c-black-05); cursor: default;}
.tab.disabled { pointer-events: none; opacity: 0.3; cursor: default; }
#tabLegend, #tabLayers { display: none; }

.tab span { display: flex; align-items: center;}
.tab span svg { width: 10px; height: 10px; fill: currentColor; }

.btnMinimize { display: none; align-items: center; justify-content: end; padding: 0 10px; }
.btnMinimize svg { width: 18px; height: 18px; cursor: pointer; }
.r-panel.shown .btnMinimize { display: flex; }

#mobileLogo { display: none; }

.dialog-box.mapStyles {     
    bottom: calc(var(--ws-paddings) + var(--map-paddings) + var(--srch-paddings)); left: calc(var(--ws-paddings) + var(--map-paddings) + var(--srch-paddings)); top: unset; 
    min-width: calc( var(--map-style-width) + var(--map-style-padding) + 4px ); min-height: calc( var(--map-style-height) + var(--map-style-padding) + 4px );
}
.mapStyles .dialog-container { padding: var(--map-style-padding); min-width: unset;  }
.mapStyles .dialog-body { max-height: 275px; overflow: auto; transition: var(--trans-ease); transition-property: height, max-height, width; will-change: height, max-height, width; }
.map-styles-container { display: flex; flex-direction: column; max-width: 0; gap: 2px; max-height: 0; opacity: 0; transition: var(--trans-ease); transition-property: max-width, opacity; will-change: max-height, opacity; overflow: hidden;}
.expanded .map-styles-container { max-width: 250px; width: 100%; max-height: 1000px; opacity: 1; }
.map-preview { display: flex; position: relative; align-items: center; justify-content: center; overflow: hidden; cursor: pointer;
    width: var(--map-style-width); height: var(--map-style-height); max-width: var(--map-style-width); max-height: var(--map-style-height); opacity: 1; 
    transition: var(--trans-ease); transition-property: max-width, max-height, opacity; will-change: max-width, max-height, opacity; 
}
.expanded .current-preview { max-width: 0; max-height: 0; opacity: 0; display: none; }
.map-preview:after { width: 100%; height: 100%; content: ''; position: absolute; top: 0; left: 0; background-color: var(--c-transparent); z-index: 1; }
.map-preview img { display: block; object-fit: cover; height: 100%; width: 100%; z-index: 0; transition: var(--trans-ease); transition-property: transform; will-change: transform; }
.map-style-item { display: flex; flex-direction: row; gap: 20px; align-items: center; justify-content: start; cursor: pointer; 
    transition: var(--trans-ease); transition-property: background-color, color; will-change: background-color, color; padding-right: 30px;
}
.map-style-item.active { background-color: var(--c-olive-04); cursor: default; }


.atom-item { white-space: nowrap; }

.horizontal .main-nav #mmSplitHorizontal { display: none; }
.vertical .main-nav #mmSplitVertical { display: none; }

.vertical .ws-holder { flex-direction: column; }
.vertical .r-panel { order: 2; padding: 0; max-width: 100%; max-height: 0; }
.vertical .r-panel.shown { padding: 0 var(--ws-paddings) var(--ws-paddings); max-height: 40vh; }
.vertical .r-panel-holder { flex-direction: row; }
.vertical  .r-panel-box.closed { max-width: 0; }
.vertical  .r-panel-box { max-width: unset; }
.vertical .no-search-message.hided { max-width: 0; }

#dlgSearchResults .dialog-title-bar .dialog-title { padding-left: 2px; }

.route-hide { 
    cursor: pointer; display: none; align-items: center; justify-content: center; 
    position: absolute; top: 7px; right: 10px; width: 25px; height: 25px; 
    background-color: rgba(255, 255, 255, 0.7); backdrop-filter: blur(4px);
    border-radius: 40px; 
}
.school-item.active .route-hide { display: flex; }
.route-hide svg { stroke: currentColor; width: 16px; height: 16px; stroke-width: 1.5; transition: var(--trans-ease); transition-property: transform; will-change: transform; }

.label-control { 
    display: flex; align-items: center; gap: 10px; justify-content: space-between; 
    padding: 8px 20px 8px 30px; border-bottom: 1px solid var(--c-grey-04); cursor: pointer; 
    transition: var(--trans-ease); transition-property: background-color, color; will-change: background-color, color;
}
.label-control .label-text { font-size: 9.5pt; font-weight: 700; }
.label-control input { flex: 0; }

body.unavailable { flex-direction: column; gap: 40px; align-items: center; justify-content: center; text-align: center; }
body.unavailable img { transition: var(--trans-func); transition-property: transform, opacity; transform: scale(1) translateY(0); opacity: 1; width: 120px; height: auto; }
body.unavailable img.prepared { transform: scale(.5) translateY(40px); opacity: 0; }
body.unavailable span { 
    display: block; 
    transition: var(--trans-func); transition-property: transform, opacity; transform: translateY(0); opacity: 1; transition-delay: 100ms; 
    display: flex; gap: 10px; align-items: center; justify-content: center; color: maroon; 
}
body.unavailable span:before { content: ''; width: 16px; height: 16px; display: block;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='maroon'%3E%3Cpath fill-rule='evenodd' d='M6.701 2.25c.577-1 2.02-1 2.598 0l5.196 9a1.5 1.5 0 0 1-1.299 2.25H2.804a1.5 1.5 0 0 1-1.3-2.25l5.197-9ZM8 4a.75.75 0 0 1 .75.75v3a.75.75 0 1 1-1.5 0v-3A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z' /%3E%3C/svg%3E%0A");
}
body.unavailable span.prepared { transform: translateY(40px); opacity: 0; }


@media (hover: hover) and (pointer: fine) {

    .menu-item.hoverable:hover, button.iconic.hoverable:hover, .route-icon:hover {
        background-color: var(--c-olive-02);
        color: white;
    }
    .route-icon:hover { border-color: var(--c-olive-02); }

    .dialog-icon:hover:before {
        background-color: var(--c-white-05);
        width: 100%; height: 100%;
    }
    .dialog-close:hover svg, .route-hide:hover svg  {
        transform: rotate(90deg);
    }
    .dialog-minimize:hover svg {
        transform: rotate(360deg);
    }

    .layer-item:hover, .label-control:hover {
        background-color: var(--c-olive-04);
        cursor: pointer;
    }

    button.btn:hover {
        background-color: var(--c-olive-02);
        color: white;
    }

    .school-item:hover { background-color: var(--c-grey-05); }
    .school-item.active:hover { background-color: var(--c-olive-03); }
    .school-link a:hover { color: var(--c-white-05); background-color: var(--c-olive-02); border-color: var(--c-olive-04); --c-website: var(--c-olive-02); }

    .featureBox .control-bar .btn:hover { background-color: var(--c-olive-04); color: black; }
    .direction-item:hover { background-color: var(--c-grey-05); }
    .direction-item.active:hover { background-color: var(--c-olive-03); }
    .direction-item:hover:before { border-color: var(--c-grey-03); }

    .map-style-item:hover { background-color: var(--c-olive-04); }
    .map-style-item:hover img { transform: scale(1.2); }
    .map-style-item.active:hover { background-color: var(--c-olive-03); }
}