body { background-color: white; margin: 0; } table { background-color: darkgray; } th, td { text-align: left; padding: 5px; background-color: white; } span { margin-left: 3px; margin-right: 3px; } .mounted { background-color: #adffad; background-image: linear-gradient(to right, #adffad 0%, #98ff98 100%); } #main { width: 100%; height: 100vh; overflow: hidden; background-color: white; position: absolute; z-index: 1; } #loadingBar { position: fixed; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } #mapContainer { height: 100%; width: 66%; float: left; } #map { height: 100vh; width: 100%; } #menu { overflow: auto; height: 100%; width: 34%; float: right; box-sizing: border-box; padding: 20px; } #layers { display: inline-block; margin-right: 20px; } #locations { display: inline-block; } #mountingPointTable { overflow: auto; height: 350px; } #loadingContainer { width: 100vw; height: 100vh; position: absolute; background-color: lightgray; z-index: 999; } #arMenu { background-color: lightgray; position: absolute; bottom: 0px; height: 10%; width: 100vw; text-align: center; z-index: 2; } @media only screen and (max-width: 750px) { #mapContainer { position: fixed; height: 50vh; width: 95%; float: unset; } #map { height: 50vh; } #menu { position: fixed; overflow: auto; top: 51vh; height: 49vh; width: 100%; box-sizing: border-box; padding: 20px; float: unset; } h1 { font-size: 20px; } body { font-size: 15px; } } .mp-popup .leaflet-popup-content { width: 450px !important; min-height: 200px !important; } .mp-popup .leaflet-popup-content iframe { width: 450px !important; height: 200px !important; } #positioning-form { background-color: transparent; } #positioning-form * { width: auto; } /* #locations, #layers { overflow: auto; } */