html, body {margin: 0; height: 100%; display: flex; flex-flow: column nowrap; overflow: hidden; background-color: #fff;} 
@media (pointer: fine){ html{font-size: 10pt; }}
@media (pointer: coarse){ html{ font-size: 3vmin; }}
@media (pointer: none){ html{ font-size: 2vmin; }}

h3 {margin: 0 0 1px 0; padding: 5px; border-top: solid black 1px; background-color: pink;}
h4 {margin: 0 0 1px 0; padding: 5px; border-top: solid black 1px; background-color: lightgray;}
label {display: block;}

#content {display: flex; flex-flow: row nowrap; height: 100%;}

.rotateMap {position: absolute;  right: .5rem; top: .5rem; }
.rotateMap-reset {width: 3rem; height: 3rem; border-radius: 2em;  background-color: rgb(255,255,255,.4);}
.rotateMapCompass {position: absolute; width: 100%; height: 100%; top: 0; left: 0; font-size: 2.5rem; }

#logo {position: absolute; z-index: 100; top: .5em; left: .5em; height: 2em;}

cl-controlGroup {position: relative; max-height: 5rem; margin-left: .2rem; display: inline-flex; border-radius: .5rem; flex-direction: column-reverse; overflow: hidden; background:rgba(255,255,255,.4); transition: .5s ease-out;}
cl-controlGroup:hover {max-height: 50rem;}
cl-controlGroup img {width: 4rem; height: 4rem; object-fit: cover; float:left; margin: .5rem; opacity: 1; transition: .5s ease-out;}
cl-controlGroup img:hover {opacity: 1; cursor: pointer;}
cl-mainControlGroup {z-index: 10; position: absolute; bottom: .5rem; left: .5rem; display: flex; align-items: flex-end;}
cl-mainControlGroup .selected {background:rgba(255,0,0,.4);}

cl-controlMousePosition {position: absolute; bottom: .5rem; right: .5rem; border: 1px solid gray; border-radius:.5rem; color: black; background:rgba(255,255,255,.4); text-align: left; padding: .5rem;  transition: .5s ease-out;}
cl-controlMousePosition td {text-align: right;}

cl-bottomContent {position: relative; width: 100%; max-height: 0; border-top: 1px solid black; overflow: hidden; transition: .5s ease-out;}
cl-bottomContent[open='true'] {max-height: 300px;}
cl--bottomContent>div {margin: 5px; position: absolute; bottom: 0; top: 0; left: 0; right: 0;  overflow: auto; }

cl-inputrange {display: block; position: absolute; bottom: 6rem; left: 1rem; right: 1rem; height: 24px; background:rgba(255,255,255,.4); border-radius: 10px;}
cl-inputrange>div {display: block; position: absolute; top: 7px; left: 1rem; right: 1rem; background: lightblue; height: 10px; border-radius: 5px;}
cl-inputrange>div>span {display: block; text-align: center; color: red; }
cl-inputrange>div>input {position: absolute; top: -6px; left: 0; right: 0; background: transparent; pointer-events: none; -webkit-appearance: none;}
cl-inputrange>div>input::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; background: #007BFF; border-radius: 10px; cursor: pointer;  pointer-events: auto; }

cl-windowWrapper {position: fixed; top:0; bottom: 0; left: 0; right: 0; z-index: 100; background-color: rgba(0,0,0,.5); transition: .5s ease-out;}
cl-windowWrapper[open='true'] {opacity: 1;}
cl-windowWrapper[open='false'] {opacity: 0; }
cl-window {position: absolute; top: 1rem; bottom: 1rem; left: 1rem; right: 1rem; overflow: none; border: 1px solid white; border-radius: .5rem;  background-color: white;}
cl-windowHeader {display: block; font-size: 1.8rem; position: absolute; top: 0; left:0; right:0; height:2rem;  padding: 0 3rem 0 1rem; border-radius: .5rem .5rem 0 0; background-color: lightgray;}
cl-windowCloser {position: absolute; right: 0; width: 2rem; height: 2rem; background-size: 2rem 2rem; background-position-x: right; background-repeat: no-repeat; background-image: url(/design/map_window_close.svg);}
cl-windowContent {position: absolute; left: 1rem; right: 1rem; top: 3rem; bottom: 1rem; overflow-y: auto;}

.thumb {display: table; float: left; width:300px; height:300px; overflow: hidden; margin-bottom: 1px; margin-left: 1px; }
.thumb img {width:100%; height:100%; object-fit: cover; transition-duration: .5s;}
.thumb:hover img { transform: scale(1.2,1.2); transition-duration: .5s; }



#weatherCurrent table {width: 100%; border-collapse: collapse; margin-bottom:10px;}
#weatherCurrent table th {background-color: lightgray;}
#weatherCurrent table th:first-child {text-align: left; }
#weatherCurrent table td {text-align: right; border: 1px solid gray;}

#weatherDaily table { width: 100%; border-collapse: collapse; margin-bottom:10px;}
#weatherDaily table th {background-color: lightgray;}
#weatherDaily table th:first-child {text-align: left; }
#weatherDaily table td {text-align: right; border: 1px solid gray;}

.weatherHourly {position: relative; width: 100%; border-collapse: collapse; margin-bottom:10px;}
.weatherHourly tr:first-child {position: -webkit-sticky; position: sticky; top: 0;}
.weatherHourly tr:first-child th {text-align: left; padding-top: 10px; margin: 0; writing-mode: vertical-lr; text-orientation: mixed;}
.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);}

#weatherHistory {position: absolute; top: 0; bottom: 0; left: 0; width: 48%; padding-left: 5px; padding-bottom: 5px; overflow-x: hidden; overflow-y: auto;}
#weatherHelp {position: absolute; top: 0; bottom: 0; right: 0; width: 48%; text-align: left; padding: 5px;}
#weatherHelp table {width: 80%; }
#weatherHelp th {width: 100pt; text-align: right;}
#weatherHelp td {width: 30pt; text-align: right;}


.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 {position: relative; font-size: 16pt; width: 370px; height: 20pt; border: 1px solid black; padding: 2px; margin-bottom:2px;}
img[src='design/filter.png'] {position: absolute; top: 0; left: 380px; width:30px; height: auto;}

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


.link {border: solid red 1px;}

.copy {cursor: pointer;}

#sentinel_link { font-size: 16pt; font-weight: bold;}
#sentinel_name { font-size: 16pt; font-weight: bold; cursor: pointer;}
#elevMax, #elevMin, #elevRise, #elevFall {text-align: right; }



cl-user {position: absolute; z-index: 10; top: 10px; left: 10px; width: 50px; height: 50px; cursor: pointer; background-image: url(user-logo.png); background-size: contain; background-repeat: no-repeat;}
cl-window#login {cursor: pointer; background-image: url(login-background.jpg); background-size: cover; background-repeat: no-repeat; }
cl-window#login cl-windowHeader {color: white; background-color: unset;}
cl-window#login form {display: inline-block; position: absolute; right: 30px; bottom: 30px; font-size: 18pt; color: white; text-align: right;}
cl-window#login button {font-size: 24px; margin-top: 10px;}
cl-window #loginStatus {color: pink;}
cl-window#unlogin button {font-size: 24px; position: absolute; right: 30px; bottom: 30px; }
cl-window#unlogin th {text-align: right; vertical-align: top;}
cl-window#unlogin table.log {border: 1px dotted lightgray; border-spacing: 0;}
cl-window#unlogin table.log th {text-align: center; border: 1px dotted lightgray; padding: 5px;}
cl-window#unlogin table.log td {border: 1px dotted lightgray; padding: 5px;}

cl-window#inputCoordinates {position: absolute; top: 50px; left: 50px;  width: 600px; height: 400px; }
cl-window#inputCoordinates textarea {width: 580px; height: 300px;}


cl-mainContent {display: flex; flex-flow: column nowrap; position: relative; width: 100%; height: 100%; }
cl-mainContent>div {display: block; position: absolute; bottom: 0; top: 0; left: 0; right: 0; overflow-y: auto;}


cl-rightContent {position: relative; width: 0; overflow: hidden; border-radius: 4px 0px 0px 4px; transition: .5s ease-out;}
cl-rightContent[open='true'] {width: 600px;}
cl-rightContent>div {margin: 10px; position: absolute; bottom: 0; top: 0; left: 0; right: 0; overflow-x: hidden; overflow-y: auto;}


cl-media {display: flex; flex-direction: row-reverse; flex-wrap: nowrap; position: relative; width: 100%; height:100%; overflow: hidden;}
cl-media>cl-img {display: block; position: relative; width: 100%; background-color: lightgray;}
cl-media>cl-img>div {display: block; position: absolute; right: 0; left: 0; max-width: 100%; max-height: 100%; }
cl-media>cl-img img {height: auto; width: 100%;}
cl-media>cl-img>div>img[center='true'] {position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin: 0; transform: translate(-15px,-15px); visibility: hidden; transition: .5s ease-out; content: url('/design/aim.png'); }
cl-media>cl-img>cl-photoSecond {position: absolute; width:20%; height: auto; left: 0; top: 0; background-color: black; border: 1px solid white; border-radius: 0 0 20px 0; overflow: hidden;}
cl-media>cl-img>cl-photoThird {position: absolute; width:20%; height: auto; right: 0; top: 0; background-color: black; border: 1px solid white; border-radius: 0 0 0 20px; overflow: hidden;}

cl-media>cl-video {display: block; position: relative; width: 100%; background-color: lightgray;}
cl-media>cl-video>div {display: block; position: absolute; width: 100%; max-width: 100%; max-height: 100%; aspect-ratio: 16/9; max-block-size: -webkit-fill-available;}
cl-media>cl-video video {height: auto; width: 100%; }
cl-media>cl-video>cl-videoSecond {position: absolute; width:20%; aspect-ratio: 16/9;  left: 0; top: 0; background-color: black; border: 1px solid white; border-radius: 0 0 20px 0; overflow: hidden;}
cl-media>cl-video>cl-videoThird {position: absolute; width:20%; aspect-ratio: 16/9; right: 0; top: 0; background-color: black; border: 1px solid white; border-radius: 0 0 0 20px; overflow: hidden;}

cl-media>cl-info {flex-basis: auto; display: block; position: relative; width: 0; background-color: white; overflow: hidden; border-radius: 4px 0px 0px 4px; transition: .5s ease-out;}
cl-media>cl-info[open='true'] {width: 600px;}
cl-media>cl-info>div {position: absolute; bottom: 5; top: 5; left: 5; right: 5;  overflow-y: auto;}

cl-media>cl-viewMap {display: block; position: relative; width: 100%; height: 100%;}


cl-photoInfo {display: block; }
cl-videoInfo {display: block; }
cl-info>div>div {margin-bottom: 5px;}
cl-info table {width: 100%;}
cl-info th {text-align: left; background-color: lightgray;  vertical-align: top; width:100px;}
cl-info th[colspan="2"] { text-align: center; background-color: gray; }
cl-info td {text-align: right; border: 0; position: relative;}
cl-info button {margin-left:2px;}
cl-info input {position: absolute; left: 0; right: 0; top: 0;}
cl-coordinates input {width: 80%;}
cl-previewMap {display: block; position: relative; width: 100%; height: 300px;}


cl-supr {display: block; position: relative; width: 100%; height:100%; overflow: hidden; text-align: center;}
cl-supr>cl-media {opacity: 1; transition: 1s ease-out; }
cl-supr[mode='full']>cl-media {opacity: 0;}
cl-supr>div {position: absolute; display:inline-block; left: 0; top: 0; width: 100%; max-height: 100%; aspect-ratio: 4/3; transition: 1s ease-out; overflow: hidden;}
cl-supr[mode='navigate']>div {width: 15%; border-radius: 0 0 20px 0;}
cl-supr[mode='navigate']>div>cl-media>cl-info {display: none; }
cl-supr[mode='navigate']>div>cl-media>cl-img>div>img[center='true'] {opacity: 0; }
cl-supr[mode='hidden']>div {width: 300px;  height: 200px; opacity: 0; }
cl-supr[mode='hidden']>div>cl-media>cl-info {display: none; }
cl-suprTable {position: absolute; display: block; }
cl-suprTable>table {width: 100%; height: 100%; border-collapse: collapse; border: 0;}
cl-suprTable>table td {border: 1px dashed white}
cl-suprTable>table td[mode='selected'] {background-color: rgba(255,0,0,.6);}
cl-suprTable>table td[mode='viewed'] {background-color: rgba(0,0,255,.3);}

cl-mediaList {display: block; text-wrap: nowrap; overflow-x: auto;}
cl-mediaList .selected {border: 1px solid red;}

cl-preview {display: inline-block; position: relative; height: 90%; margin-right: 1px;}
cl-preview>img {height: 100%; width: auto; }
cl-logo {position: absolute; bottom: 0; right: 0; width: 40px; height: 40px; color: white; background-size: 40px 40px; background-position-x: right; background-repeat: no-repeat; }
.cl-previewPhoto>cl-logo {background-image: url(photo.png); }
.cl-previewVideo>cl-logo {background-image: url(video.png); }
.cl-previewPanorama>cl-logo {background-image: url(panorama.png); }
.cl-previewSUPR>cl-logo {background-image: url(supr.png); }
.cl-previewTiff {background-color: lightgray; vertical-align: top;}
.cl-previewTiff>div {padding: 8px;}
.cl-previewTiff>cl-logo {background-image: url(geotiff.png); }

cl-coordinates {display: block; width: 100%;}
cl-coordinates input {width: 80%;}
cl-ypr div {display: inline-block; width: 30%}

cl-drawControl {position: absolute; top: 70px; left: 10px; width: 44px; padding: 2px; border-radius:4px; background:rgba(255,255,255,.4); }
cl-drawControl img {width:40px; height: 40px; float:left; padding: 2px; border-radius:4px; opacity: .8;}
cl-drawControl img:hover { opacity: 1;}
cl-drawControl .selected {background:rgba(255,0,0,.4);}

cl-dropImageInfo {display: block; position: relative; border-bottom: 1px solid black;}

.pnl-pano {background-repeat: no-repeat; background-image: url(panorama-air.png); }
.pnl-pano10 {width: 10px; height: 10px; background-size: 10px 10px;}
.pnl-pano9 {width: 15px; height: 15px; background-size: 15px 15px;}
.pnl-pano8 {width: 20px; height: 20px; background-size: 20px 20px;}
.pnl-pano7 {width: 25px; height: 25px; background-size: 25px 25px;}
.pnl-pano6 {width: 30px; height: 30px; background-size: 30px 30px;}
.pnl-pano5 {width: 35px; height: 35px; background-size: 35px 35px;}
.pnl-pano4 {width: 40px; height: 40px; background-size: 40px 40px;}
.pnl-pano3 {width: 45px; height: 45px; background-size: 45px 45px;}
.pnl-pano2 {width: 50px; height: 50px; background-size: 50px 50px;}
.pnl-pano1 {width: 55px; height: 55px; background-size: 55px 55px;}

.email {position: absolute; top: 10px; right: 10px; width: 50px; height: 50px; cursor: pointer; background-size: 50px 50px; background-repeat: no-repeat; background-image: url(email.png); }