html, body {
        font-family: Roboto, sans-serif;
        overflow:hidden;
}

.view {
        position: absolute; 
        inset: 0;
        overflow: hidden;
}
.tool-default {
        background-color: white;
        color: black;
}
.tool-inverse {
        background-color: black;
        color: white;
}
.tool:hover {
        background-color: #99c825;
        color: white;
}
.tool {
        transition: all 400ms ease;
}
.tool {
        pointer-events: auto;
        cursor: pointer;
        height: 48px;
        min-width: 48px;
        border-radius: 24px;
        padding: 6px;
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;       
}

.sticky {
        position: fixed;
        top:0;
        right:0;
}

.button-default {
        background-color: white;
        color: black;
}
.button-inverse {
        background-color: black;
        color: white;
}
.button:not(.inactive):hover {
        background-color: #99c825;
        color: white;
}
.button {
        
        display: inline-block;
        pointer-events: auto;

        height: 48px;
        min-width: 48px;
        line-height: 36px;
        vertical-align: middle;
        border-radius: 24px;
        padding: 6px 24px;
}
.button-center {
        transform: translate(-50%,-50%);
}
.menu {
        display: block;
        pointer-events: auto;
        border-radius: 24px !important;
        
        height: 48px;
        min-width: 48px;
        line-height: 36px;
        vertical-align: middle;
        padding: 6px 18px;
        
        background-color: white;
        color: black;
        cursor: pointer;
}
.menu:not(.inactive):hover {
        background-color: #99c825;
        color: white;
}

.overlay {
        background-color: white;
}

#ui {
        pointer-events: none;
        display:grid;
        grid-template: 60px 1fr 60px / 1fr 296px;
        grid-gap: 12px;
        padding: 12px;
}

#ui #head {
        grid-area: 1 / 1;  
        display:flex;
        flex-direction:row;
        flex-wrap:nowrap;
        justify-content:flex-start;
        align-items:flex-start;         
}
#ui #tools {
        grid-area: 1 / 2;
        display:flex;
        flex-direction:row;
        flex-wrap:nowrap;
        justify-content:flex-end;
        align-items:center;
}
#ui #navigation {
        grid-area: 2 / 1;
}
#ui #content {
        grid-area: 2 / 1;
}
#ui #footer {
        grid-area: 3 / 1 / span 1 / span 2;
        display:flex;
        flex-direction:row;
        flex-wrap:nowrap;
        justify-content:space-between;
        align-items:flex-end;
}

.title-container, .altitude-container {
        display: flex;
        align-items: start;
        justify-content: start;
        pointer-events: auto;
        background-color: #fff;
        padding:6px;
        border-radius: 30px;
}
#nav-toggle {
        margin-right: -18px;
        position:relative;
        z-index:2;
}

.tool:hover .hamburger-inner,
.tool:hover .hamburger-inner::before,
.tool:hover .hamburger-inner::after {
        background-color: white;
}
#ui #navigation .navigation-list {
        border-radius: 30px;
        background-color:white;
        padding:6px;
        display:inline-block;
}

#ui #navigation .navigation-list button {
        pointer-events: auto;
}

#ui #navigation {
        display:none; 
}

.status-switch-container {    
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: auto;
}              

.status-switch-tabs {
        display: flex;
        position: relative;
        background-color: #fff;
        padding:6px;
        border-radius: 30px;
}
.status-switch-tabs * { 
        z-index: 9999;
}
.status-switch-tabs input[type=radio] {
        display: none;
}

.status-switch-tabs .tab {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 48px;
        width: 224px;
        border-radius: 24px;
        cursor: pointer;
        transition: color 0.15s ease-in;
}

.status-switch-tabs input[type=radio]:checked + label {
        color: white;
}

.status-switch-tabs input[id=radio-1]:checked ~ .status-switch-glider {
        transform: translateX(0);
}

.status-switch-tabs input[id=radio-2]:checked ~ .status-switch-glider {
        transform: translateX(100%);
}

.status-switch-tabs input[id=radio-3]:checked ~ .status-switch-glider {
        transform: translateX(200%);
}


.status-switch-glider {
          position: absolute;
          display: flex;
          height: 48px;
          width: 224px;
          background-color: #99c825;
          z-index: 1;
          border-radius: 24px;
          transition: 0.2s ease-out;
}

.info {
        position: absolute;
        z-index:999;
        top: 0;
        right: 0;
        bottom: 0;
        width: 640px;
        max-width: 100%;
        background-color: white;
        overflow-y: scroll;
        padding: 12px;
        padding-top:72px;
}
.info-head {
        padding:12px;
        padding-right:24px;
}
.info-content {
        padding:12px;
}

.label {
        pointer-events: none;
        background-color: white;
        text-color:black;
        border: 1px solid black;
        padding:3px;
        font-size:0.9em;
        /*text-shadow: 0px 0px 4px black, 0px 0px 4px black, 0px 0px 4px black;*/


        transform: translate(-50%,-50%);
}