html, body
{
    font-family: "Open Sans", Verdana, Helvetica, Arial, sans-serif;
    font-size:9pt;
}
a {
	color: #004b87;
	text-decoration: none;
}

	a:visited {
		color: #004b87
	}
button
{
    border: 2px solid #CCC;
    background-color:white;
    color: #999;
    padding:4px;
}

.link-button {
	border: 2px solid #004b87;
	background-color: #004b87;
	color: white;
	padding: 4px;
}

#header {
	position: absolute;
	top: 0;
	height: 30px;
	width: 100%;
	left: 0;
	font-size: 10pt;
}
#header img { width:26px; height:26px; margin:2px; }
#header h1 {  margin:2px; padding:0; color:#333; display:inline; font-size:100%; }
    #header h1 span { color:#777; float:right; margin:4px; }
#header h1.short {display:none}

#map
{
    position:absolute;
    top:30px;
    left:0;
    width:100%;
    bottom:0;
}

#footer {
	position: absolute;
	left: 0;
	width: 100%;
	bottom: 0;
	z-index: 2000;
	display: block;
}

#viewlet-cookiepolicy {
	position: fixed;
	bottom: 0;
	width: 100%;
	left: 0%;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0;
	z-index: 100;
	padding: 0.9em;
	box-sizing: border-box;
}

.portalMessage {
	background-color: #f3f3f3;
}

#legend
{
    position:absolute;
    bottom:10px;
    left:10px;
    width:auto;
    height:auto;
    z-index:1000;
    background-color:white;
    /*border: 1px solid #EEE;*/
    border: 2px solid rgba(0,0,0,0.2);
}
#legend h3 { padding:0; margin:5px 10px;}
#legend ul { padding:0; margin:5px 10px; list-style-type:none; }
#legend li { margin:3px 0}
#legend span { display:inline-block; width:15px; height:15px; position:relative; top:3px; }

#filters
{
    position:absolute;
    top:40px;
    right:10px;
    width:330px;
    height:auto;
    z-index:1000;
    background-color:white;
    border: 2px solid rgba(0,0,0,0.2);
    border-radius:4px;
    font-size: 12pt;

}

    #filters .main { display:inline-block; width:300px; margin:0;   }
    #filters .aux { display:inline-block; width:20px; margin:0;   }
    #filters .aux label {
            width: auto;
            position: absolute;
            top: 4px;
            font-size: 17pt;
            right: 11px;
    }

#filters div { margin:10px; }
    #filters label { width:105px; display:inline-block; }
    #filters select { width:220px; display:inline-block; }
    #filters input { width:195px; display:inline-block; }

	#filters #tabs {
		text-align: center
	}

	#filters button {
		display: inline-block;
		margin: 0;
		width: 80px;
		background-color: white;
	}

		#filters button.on {
			border-color: #999;
			color: #333;
			background-color: #EEE;
		}

		#filters button.info {
			border: 2px solid #004b87;
			background-color: #004b87;
			color: white;
			padding: 4px;
		}



#locator {
    position:absolute;
    top:40px;
    left:10px;
    width:40px;
    height:40px;
    z-index:999;
    background-color:white;
    border: 2px solid rgba(0,0,0,0.2);
    border-radius:4px;
    overflow:hidden;  
    padding:0;      
}
#locator.expanded { width:200px; }
#locator div { width:200px; margin:0; padding:0; position:absolute; right:0; }
#locator input, #locator button{ display: inline-block; border:none; margin:0; outline:none; }
#locator input { width:150px; font-size:12pt; padding-left:10px; position:absolute; top:8px; left:0 }    
#locator input:placeholder-shown {
  font-style:italic;
}
	#locator button {
		width: 40px;
		height: 38px;
		font-size: 17pt;
		color: #222;
		position: absolute;
		right: 0;
		top: 0;
	}
}
/*{ width:40px; height:38px; font-size:17pt; color:#222; position:absolute; right:0; top:0 }*/

#locator_results {
    position: absolute;
    background: white;
    border: 2px solid #CCC;
    border-radius: var(--border-radius);
    top: 80px;
    left: 10px;
    border-top: none;
    width: 200px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    z-index: 1002;
    display: none
}

    #locator_results ul {
        margin: 0;
        padding: 0;
    }

    #locator_results li {
        list-style-type: none;
        padding: 10px 12px;
        border-top: 1px solid #EEE;
        cursor: pointer;
    }

        #locator_results li:hover {
            background-color: #EEE;
        }

#timeslider-mini-container {
	top: 40px;	
}



.message {
	position: absolute;
	z-index: 1001;
	width: 260px;
	top: 33%;
	left: 50%;
	margin-left: -150px;
	background-color: #666;
	color: #EEE;
	font-size: 12pt;
	padding: 15px;
	border-radius: 4px;
	text-align: center;
}


.aqiPopup h4 {
    font-size: 12pt;
    margin: 0;
}
.aqiPopup .moreInfo { text-align:center; margin-top:10px;}
.aqiPopup .moreInfo button
{    
    margin:auto;
    width:100%;
}
.aqiPopup label {display:block; color:#555; margin:8px 0 1px 0; }
.aqiPopup span {font-weight:bold; }

.panel
{
    box-sizing: border-box;
    padding:0;
    position:absolute;
    z-index:1001;
    background-color:white;
    height:100%;
    width:100%;
    max-width:800px;
    min-width:320px;
    max-height:800px;
    min-height:400px;
    display:none;
    top:0;
    font-size: 10pt;
}
#help { padding:0 10px;}

    #help td {
        padding:3px 6px;
    }
    #help thead td {
        background-color:#EEE;
        text-align:center;
    }

.panel .close {     
    position: absolute;
    z-index:3;
    top: 0;
    right: 0;
    font-size: 16pt;
    color: #999;
    padding: 4px 8px 8px 12px; 
    cursor:pointer;
}
        
    #detail h4 { margin: 5px 0 2px 0; font-size:11pt; }
    #detail table { margin-bottom:8px;   }
    #detail th, #detail td {
        text-align: left;
        padding: 1px 3px;
        vertical-align: top;
    }
    #detail th { font-weight: normal; color:#555;}
    /* #detail td { font-weight: bold; } */

    #detail .polu th { font-weight: bold; color:#333;  }
    #detail .polu td { font-weight: normal;   }
    
#detail .block { 
    margin:10px 0;
    border:none;    
    height:350px;
    z-index:1;
    background-color:white;
}
    #detail #station_table {
        height: fit-content;
        margin:10px;
    }

#lock {
    display:none;
    position:absolute;
    width:100%;
    height:100%;
    top:0; left:0;
    background-color:rgba(0,0,0,0.2);    
    z-index:20000;
}

.buttonGroup {
    text-align:center;
    margin:25px 0;
}



#toggle-mobile-menu { display:none;}

	#toggle-mobile-menu:checked + #filters {
		width: 40px;
		height: 40px;
		border-bottom: none;
		border-left: none;
	}
    #toggle-mobile-menu:checked+#filters .main { display:none; }


    /* for things we have decided to remove */
.shy {display:none}


.info {
	text-align: center;
}





/* XS */
@media (max-width: 350px) {
    #filters {
        font-size:11pt;
    }
    #filters {width:260px}
        #filters .main { width:230px;
        }

    #filters label { width:55px; }
    #filters select { width:140px;  }
    #filters input { width:135px;  }
    #filters button { width:65px; }

    #legend {        font-size:8pt;    }
        #legend h3 { margin:3px 6px; }
        #legend ul { margin: 3px 6px; }
        #legend span { height:12px; width:12px; top:2px; }

	#timeslider-mini-container {
		display: none;
	}

	#toggle-mobile-menu:checked + #filters {
		border: 2px solid rgba(0,0,0,0.2);
		border-radius: 4px;
	}
}

/* S */
@media (max-width: 480px) {
    #header h1 {display:none}
    #header h1.short {display:inline;}
    
}


/* M */
/* Desktop - tablet */
@media (min-width: 768px) and (min-height: 600px) {
    
  #header {height:50px; font-size:15pt;}
  #header img {width:44px; height:44px; margin:3px;}
  #header h1 { margin:5px;}
  #header h1 span {margin:10px; }

  #map { top: 50px; }
  
  #filters { 
	  top: 60px;
  }

	#timeslider-mini-container {
		top: 60px;
	}

  #locator { top: 60px; }
    #locator_results { top:100px;
    }
  .panel
    {
      overflow:auto;
      overflow-x:hidden;
      overflow-y:auto;
      bottom:0;
      left:0;
      right:0;
      top:auto;
      max-width:none;
      max-height: none;
      min-width:initial;
      min-height:initial;
      height:320px;
      width:initial;
      padding:10px;
      border: 1px solid #CCC;
      border-radius: 4px 4px 0 0;
    }

  /* un gráfico a la derecha, y el otro debajo*/
  #detail #station_table { width:40%;  }
  #detail .pie { width:55%; position:absolute; top:0; right:0; }
  #detail .seven_days { width:98%; position:absolute; top:350px; left:0 }
 
}






/* XL */
@media (min-width: 1250px) and (min-height: 600px) {

  body #toggle-mobile-menu+#filters { width:300px !important; height:auto !important; }
  body #toggle-mobile-menu:checked+#filters .main { display:block; }
  #filters > .aux {
    display: none
  }


    #detail #station_table {
        width: 30%;
    }

    #detail .pie {
        width: 30%;
        position: absolute;
        top: 8px;
        left: 30%;
        height:330px;
    }

    #detail .seven_days {
        width: 40%;
        position: absolute;
        top: 13px;
        height:310px;
        right: 10px;
        left:auto;
    }

	#timeslider-mini-container {
		display: none;
	}
	#toggle-mobile-menu:checked + #filters {
		border: 2px solid rgba(0,0,0,0.2);
		border-radius: 4px;
	}
}


/* apaño para que la popup de MapBox sea como la de Leaflet*/
body .mapboxgl-popup-content
{
    border-radius:12px;
    padding:10px 20px 15px;
    box-shadow: 0 3px 14px rgba(0,0,0,0.4);
}

body .mapboxgl-popup-close-button  { font-size:18pt; padding-right:8px; }

body .leaflet-popup-pane
{
    font-family: "Open Sans", Verdana, Helvetica, Arial, sans-serif;
}