*{box-sizing: border-box}
html, body {width: 100%; height: 100%; margin: 0; overflow: hidden; font: 16px serif}
#elMap { width: 100%; height: 100% }
.nav,.srch,.labs {z-index: 10002; display: flex; position: fixed; top:0} 
.srch {left: 50%; transform: translateX(-50%); background: white; border-radius:15px; padding-left: 10px;}
.srch:has(input:user-invalid){background: #EBEBE4}
.labs {right: 0; background: rgb(248 248 248 /.5)}
.nav,.srch,.labs,#elRez,dialog {box-shadow: 0 0 10px 5px gray}
.nav *,.srch *, dialog {border: none}
#inCity,#inSrch {border-right: 1px solid black}
#elRez {z-index: 10001; position: absolute; left: 50%; transform: translateX(-50%); top: 2.1rem; max-height: calc(100vh - 2.1rem); max-width:100%; background: #FCFDFC; padding: 2px 10px; overflow: auto;}
#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}
.srch:has(input:user-invalid){background: #EBEBE4}
#inCity {width: 10vw}
#inSrch,#inCity,#btCntr {font-size: 1.3rem}
#btCntr{width: 1.7rem;}
#elRez > div {white-space: pre-line; padding: .2rem 0; border-bottom: 1px dotted black}
#elRez i {font: normal 600 1.1em 'Helvetica'}
#elRez b {font: 510 1em 'Arial'}
#elRez em {color: red; font-weight: bolder;}
#elRez {display: none}
label,.tgl,button {cursor: pointer; white-space: nowrap;} 
.tgl {appearance: none; padding: 4px; margin: 0; font-size: 1.1rem} 
.tgl:before{content: '▶ '}
.tgl:checked:before{content: '▼ '}
.lab {display: inline-block; border-radius: 50%; font-size: 0.75rem; text-align: center; font-weight: bold; line-height: 25px; width:25px; height:25px}
#pnLabs label{display: block; padding: 5px 0; user-select:none}
#pnLabs label:has(input:checked){font-weight:bold}
#pnLabs label:has(input:checked):before{content: 'x';padding: 0 5px 0 7px}
#pnLabs input:checked{display: none}
.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}}