@media (max-width: 1024px) {
    .time-control {
        width:80vw;
    }
}
html,
body {
font-family: 'Roboto Condensed', sans-serif;
position: fixed;
overflow: visible;
padding:0;
margin:0;
-webkit-text-size-adjust: none;
touch-action: none;
}
.time-control {
border-radius:5px;
min-width:50px;
width:90vw;
position:absolute;
left:5vw;
bottom:40px;
z-index:10;
}
.card {
font-family: 'Roboto Condensed', sans-serif;
z-index:13;
}
.smap > div {
    z-index:unset;
}
#wrapper {
overflow-y: hidden;
-webkit-overflow-scrolling: touch; /* enables “momentum” (smooth) scrolling */
margin-bottom:1px;
}
#mapa{
width: 100vw;
height: 100vh;
touch-action: none;
}
#logo {
width:120px;
top:10px;
left:10px;
position: absolute;
z-index: 10;
background-color: rgba(255,255,255,0.4);
border-radius:5px;
padding: 5px;
}
#time-display {
position:absolute;
bottom:71px;
background-color:rgba(255,255,255,0.5);
border-radius:5px;
text-align: center; 
font-size:18pt;
right: 15vw;
font-family: 'Roboto Condensed', sans-serif;
font-weight:700;
z-index:10;
padding:5px;
}
#back-button {
position:absolute;
bottom:71px;
right:5vw;
z-index:11;
}
#content-container {
width: 95vw;
height: 95vh;
background-color: white;
position: absolute;
top: 2.5vh;
left: 2.5vw;
z-index: 13;
border-radius: 5px;
opacity: 0.96;
display:none;
}
#content-div {
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 60px;
}
#content-div a {
color:black;
}
#content-cdiv {
overflow-y: auto;
height:100%;
}
#content-buttons {
position: absolute;
top: 240px;
z-index: 12;
right: 15px;
}
#content-buttons a {
text-decoration: none;
text-align:center;
margin-bottom:1ex;
color: black;
display: block;
border: 1px solid;
border-radius: 5px;
padding: 3px;
background-color: rgba(255,255,255,0.7);
}
#content-buttons a:hover {
background-color: rgba(255,255,255,1);
}
#content-close {
position:absolute;
top: 10px;
right:20px;
z-index:13;
}
#content-close a {
text-decoration: none;
background-color:white;
padding:5px;
display:block;
color: black;
}
.touch-passthru{
pointer-events: none;
}
input[type=range] {
-webkit-appearance: none;
width: 100%;
margin: 10px 0;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 9px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: #000000;
border-radius: 1.3px;
border: 0px solid #000000;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 2.6px solid #000000;
height: 29px;
width: 15px;
border-radius: 4px;
background: #ffffff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -10px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #0d0d0d;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 9px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: #000000;
border-radius: 1.3px;
border: 0px solid #000000;
}
input[type=range]::-moz-range-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 2.6px solid #000000;
height: 29px;
width: 15px;
border-radius: 4px;
background: #ffffff;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 9px;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #000000;
border: 0px solid #000000;
border-radius: 2.6px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
background: #000000;
border: 0px solid #000000;
border-radius: 2.6px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 2.6px solid #000000;
height: 29px;
width: 15px;
border-radius: 4px;
background: #ffffff;
cursor: pointer;
height: 9px;
}
input[type=range]:focus::-ms-fill-lower {
background: #000000;
}
input[type=range]:focus::-ms-fill-upper {
background: #0d0d0d;
}
.dot {
    text-decoration: none;
    padding-top:0.2ex;
    height:2.7ex;
    width:3ex;
    opacity: 0.9;
    background-color: #bbb;
    border-radius: 50%;
    background:0.5;
    display: inline-block;
    text-align:center;
  }
.dot.aqi-1 {
    background-color: #C7EAFB;
}
.dot.aqi-2 {
    background-color: #9BD3AE;
}
.dot.aqi-3 {
    background-color: #FFF200;
}
.dot.aqi-4 {
    background-color: #FAA61A;
}
.dot.aqi-5 {
    background-color: #ED1C24;
}
.dot.aqi-6 {
    background-color: #671F20;
}
#infobox {
    display:none;
    position: absolute;
    top:80px;
    z-index: 12;
    left:15px;
    max-width:200px;
    border:1px solid;
    border-radius: 5px;
    padding:3px;
    background-color: rgba(255,255,255,0.9);
}
#show-pollution {
    box-shadow: 0 0 3px 3px yellow;
}