*{box-sizing: border-box}
html, body {width: 100%; height: 100%; margin: 0; overflow: hidden; font: 16px sans}
#elMap { width: 100%; height: 100% }
.nav,.srch,.labs {z-index: 10002; display: flex; position: fixed; top:0} 
.srch {left: 50%; transform: translateX(-50%); width: 30vw; background: white; border-radius:15px; padding-left: 10px; &:has(input:invalid){#btClr {display: none}} .tgl {padding: 10px} }
.labs {right: 0; background: rgb(248 248 248 /.5)}
.nav,.srch,.labs,#elRez,#elTrm,dialog {box-shadow: 0 0 10px 5px gray}
.nav *,.srch *, dialog {border: none}
#btCntr,#tgRez {border-left: 1px solid black}
#elRez,#elTrm {z-index: 10001; position: absolute; left: 50%; transform: translateX(-50%); top: 46px; max-height: calc(100vh - 2.1rem); max-width:100%; background: #FCFDFC; padding: 2px 10px; overflow: auto;}
#elTrm {display: none; a {padding: .5rem; text-decoration: underline; &:hover{color: #ff492c} &:first-of-type{font-weight: bolder; text-transform: capitalize}} div {margin: .8rem 0}}
#btAt {z-index: 10000; position: fixed; bottom:0; font: bold 2rem sans; width: 2.6rem; color: #00008B; cursor: pointer}
#inSrch {min-width: 20vw; flex: 3; outline: none; background:0}
#inCity {width: 10vw}
#inSrch,#inCity,#btCntr {font-size: 1.3rem}
#btCntr{width: 1.7rem;}
#elRez {display: none; >div {white-space: pre-line; padding: .2rem 0; border-bottom: 1px dotted black} i {font: normal 600 1.1em 'Helvetica'} b {font: 510 1em 'Arial'} em {color: red; font-weight: bolder}}
label,.tgl,button,a {cursor: pointer; white-space: nowrap;} 
.tgl {appearance: none; padding: 4px; margin: 0; font: bold 1.1rem sans; &:before{content: '▶ '} &:checked:before{content: '▼ '} }
.lab {display: inline-block; border-radius: 50%; font: bold 0.75rem/25px serif; text-align: center; width:25px; height:25px}
#pnLabs label{display: block; padding: 5px 0; user-select:none; & input:checked{display: none;} &:has(input:checked){font-weight: bold; &:before{content: "\2716"; padding: 4px}}}
#btClr {padding: 10px; background:0}
.leaflet-control-container {position: absolute; right: 60px; bottom: 100px}
.leaflet-popup-content span{font-weight: bold; text-transform: capitalize}
@media (max-width: 1000px) {.nav,.labs {bottom: 0; top:auto} .srch{width:100%} #btAt{bottom:2rem} #inCity {width: 35vw} .leaflet-control-container{display: none}}