html, body {
        font-family: Roboto, sans-serif;
        overflow:hidden;
}
.stage {
        position:fixed;
        top:0;
        aspect-ratio: 16 / 9;
        max-width:100vw;
        max-height:100vh;

}
.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;
}

.menu.selected {
    background-color: #EEEEEE;
}

.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;
        width:100%;
    margin-bottom:12px;
}
#ui #navigation-wrapper {
    display:inline-block;
}

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

#ui #navigation {
        display:none; 
}
#ui #navigation #layer-list {
    display:inline-flex;
    flex-direction: column;
}

.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;
        text-align:right;
}
.info-head {
        /*padding:12px;*/
        display:inline-block;
}

.info-content {
        padding:12px;
}

.label {
        pointer-events: none;
        background-color: white;
        color:black;
        border: 1px solid black;
        padding:3px;
        font-size:0.9em;
        transform: translate(-50%,-50%);
}