body {margin: 0; height: 100vh; display: flex; flex-flow: column nowrap; overflow: hidden; background-color: #fff;} 
nav {width:100%; height:20px; padding: 5px; border-bottom: 1px solid black; font-weight: bold;}
nav button {font-size: 12pt; margin-right: 5px; border-radius: 4px 4px 0px 0px; color: rgb(255,255,255); background-color: rgb(100,100,100);}
h3 {margin: 0;}
#content {display: flex; flex-flow: row nowrap; height: 100%;}
#leftContent {width: 0; overflow: hidden;transition: .5s ease-out;}
#leftContent[open='true'] {width: 600px;}
#mainContent {width: 100%; overflow: hidden;}
#rightContent {position: relative; width: 0; overflow: hidden; border-radius: 4px 0px 0px 4px; transition: .5s ease-out;}
#rightContent>div:first-child {margin: 5px; position: absolute; bottom: 0; top: 0; left: 0; right: 0;  overflow-y: auto;}
#rightContent[open='true'] {width: 600px;}
#bottomContent {width: 100%; height: 0; border-top: 1px solid black; overflow: hidden; transition: .5s ease-out;}
#bottomContent[open='true'] {height: 200px;}
#map {width: 100%; height: 100%;}
#logo {position: fixed; top: .5cm; left: .5cm;}

.layersControl {position: absolute; bottom: .5em; left: .5em; padding: 2px; border-radius:4px; background:rgba(255,255,255,.4); }
.layersControl img {width: 50px; height: 50px; object-fit: cover; float:left; padding: 2px; border-radius:4px; opacity: .8;}
.layersControl img:hover { opacity: 1;}

.coordinatesControl {position: absolute; bottom: .5em; right: .5em; border: 1px solid gray; border-radius:4px; color: black; background:rgba(255,255,255,.4); text-align: left; padding: 2px; }
.coordinatesControl td {text-align: right;}

.weatherDaily { border-collapse: collapse;}
.weatherDaily th {background-color: lightgray;}
.weatherDaily th:first-child {text-align: left; }
.weatherDaily td {text-align: right; border: 1px solid gray;}

.weatherHourly {width: 420px; border-collapse: collapse;}
.weatherHourly tr:first-child {position: -webkit-sticky; position: sticky; top: 0;}
.weatherHourly tr:first-child th {text-align: left; padding-top: 10px; writing-mode: vertical-lr; }
.weatherHourly tr[day] {background-color: lightcyan;}
.weatherHourly tr[night] {background-color: gray;}
.weatherHourly th {background-color: lightgray;}
.weatherHourly td {text-align: right; border: 1px solid gray;}
td[normal] {background-color: rgba(144,238,144,.5);}
td[warning] {background-color: rgba(255,165,0,.5);}
td[critical] {background-color: rgba(255,0,0,.5);}

.drawControl {position: absolute; top: .5em; left: .5em; width:34px; padding: 2px; border-radius:4px; background:rgba(255,255,255,.4); }
.drawControl img {width:30px; height: 30px; float:left; padding: 2px; border-radius:4px; opacity: .8;}
.drawControl img:hover { opacity: 1;}
.selected {background:rgba(255,0,0,.4);}

.markersControl {left: initial; right: .5em;}



.flyCalculation { border-collapse: collapse;}
.flyCalculation th {background-color: lightgray;}
.flyCalculation th:first-child {text-align: left; }
.flyCalculation td {text-align: right; border: 1px solid gray;}

.corporation button {display: block; width: 390px; text-align: left; margin-bottom: 1px;}
.filter {font-size: 16pt; width: 350px; height: 20pt; border: 1px solid black; padding: 2px; margin-bottom:2px;}
img[src='lib/filter.png'] {position: absolute; top: 0; left: 360px; width:30px; height: auto;}

.results button {display: block; width: 390px; text-align: left; margin-bottom: 1px;}

.window {position: absolute; bottom: 0; top: 100vh; left: 50px; right: 50px; overflow: none; border: 1px solid black; border-radius: 10px; transition: .5s ease-out; background-color: white;}
.window[open='true'] {bottom: 50px; top: 50px;}

.windowHeader {display: block; position: absolute; left:0; right:50px; height:30px; padding: 5px; border-radius: 10px 0 0 0; background-color: lightgray;}
.closer {position: absolute; right: 0; width: 50px; }
.window[open='false'] img {display:none; }
.windowContent {position: absolute; top: 50px; bottom: 0; left: 0; right: 0; text-align: center; overflow-y: auto; border-radius: 0 0 10px 10px;}
.windowContent img {position: relative; object-fit: contain; height: 100%; padding: 0; border: 0; }
.windowContent video {position: relative; object-fit: contain; height: 100%; }

#windowCoordinates {position: absolute; top: 0; left: 0; width: 0; height: 0; }
#windowCoordinates textarea {width: 290px; height: 200px;}
#windowCoordinates[open='true'] {top: 40px; left: 55px;  width: 300px; height: 320px; }


#windowItems .photoMain {position: relative; width:500px; aspect-ratio: 4/3; margin:5px;  background-color: black; display: inline-block; overflow: hidden; }
#windowItems .videoMain {position: relative; width:500px; aspect-ratio: 16/9; margin:5px;  background-color: black; display: inline-block; overflow: hidden; }
#windowItem .photoMain {position: absolute; top:0; bottom: 0; left: 0; right: 0;  background-color: black; display: inline-block; overflow: hidden; }
#windowItem .videoMain {position: absolute; top:0; bottom: 0; left: 0; right: 0;  background-color: black; display: inline-block; overflow: hidden; }

.photoSecond {position: absolute; width:150px; height: 100px; left: 0; top: 0; background-color: black; border: 1px solid white; border-radius: 0 0 20px 0; overflow: hidden;}
.photoThird {position: absolute; width:150px; height: 100px; right: 0; top: 0; background-color: black; border: 1px solid white; border-radius: 0 0 0 20px; overflow: hidden;}
.videoSecond {position: absolute; width:150px; height: 100px; left: 0; top: 0; background-color: black; border: 1px solid white; border-radius: 0 0 20px 0; overflow: hidden;}
.videoThird {position: absolute; width:150px; height: 100px; right: 0; top: 0; background-color: black; border: 1px solid white; border-radius: 0 0 0 20px; overflow: hidden;}

.link {border: solid red 1px;}