/* eea colors
   blue: #004b87
   green:#008675
    */

/* AQI band colors
50f0e6  rgb(80,240,230)
50ccaa  rgb(80,204,170)
f0e641  rgb(240,230,65)
ff5050  rgb(255,80,80)
960032  rgb(150,0,50)
    
    */

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 #004b87;
    background-color:#004b87;
    color: white;
    padding:4px;
}
button:focus {outline:0;}


#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; margin-right: 3px;}
#legend a { cursor:pointer}



.attribution{
    position: absolute;
    bottom: 10px;
    right: 10px;
    border: 1px solid #CCC;
    background-color: white;
    padding: 1px 5px;
    color: #666;
    max-width: calc(100% - 160px);
}
#attribution_long {
    display:none;
    right: 60px;
}


#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;
    padding-bottom:10px;
}

    #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:100px; display:inline-block; }
    #filters select { width:170px; display:inline-block; }
    #filters input { width:98px;     display: table-cell;
    vertical-align: middle;}
    #filters #tsInfo {display:inline-block; margin: 0px; width:100px;}
    #filters a { cursor:pointer}



#filters #tabs { text-align:center}
#filters #tabs button {display:inline-block; margin:0; width:80px; background-color:white;}
#filters #tabs button.on {border-color:#999; color:#333; background-color:#EEE;}




#zoom {
    display:none;
}

#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; background-color:white; color:#222; position:absolute; right:0; top:0 }
#locator_results{
    position: absolute;
    background: white;
    border: 2px solid #CCC;
    border-radius: 4px;
    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;
}


.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; }
.aqiPopup button {
    border-color:#CCC;
    background-color:white;
    color: #999;
}
.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;
}

.text h1, .text h2, .text h3, .text h4, .text h5 {
    color:#004b87;
}

#help { padding:0 10px;}

    .help table {width:100%; max-width:600px; border:none; margin-bottom:5px;}
    .help td {
        padding:3px 6px;
        border:none;
    }
    .help thead tr:first-of-type td { border-top:1px solid #333; }
    .help thead td {
        border-color:#333;
        border-width: 1px 0 1px 0;
        text-align:center;
        font-weight:bold;
    }
        .help thead td span { font-weight:normal; }
    .help tbody {border-bottom:1px solid #333; border-top:1px solid #333; }
        .help tbody td:nth-child(2) { background-color:rgba(80,240,230, 1); color:#333; }
        .help tbody td:nth-child(3) { background-color:rgba(80,204,170, 1); color:white; }
        .help tbody td:nth-child(4) { background-color:rgba(240,230,65, 1); color:#333; }
        .help tbody td:nth-child(5) { background-color:rgba(255,80,80, 1); color:white; }
        .help tbody td:nth-child(6) { background-color:rgba(150,0,50, 1); color:white; }
    .help ol { margin-top:0;
    }

#legend_help { padding:0 10px;}
    #legend_help em {
        font-style:normal;
        font-weight: bold;
    }

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

.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;
}

.seven_days .current_date
{
    position:absolute;
    width:1px;
    border-left:2px dashed #666;
    top:32px;
    bottom:72px;
}
.seven_days .current_date span { width: 120px; position:absolute; right:0;}

.seven_days .debug{
    position:absolute;
    background-color:rgba(255,0,255,0.2);
}

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

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

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





/* 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:98px;  }

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

    #help td {   
        padding: 3px 0px;
        font-size: 8pt;
    }

    .text {
        font-size:9pt;
    }
}

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


/* M */
/* Desktop - tablet */
@media (min-width: 768px) and (min-height: 600px) {
  
  body #toggle-mobile-menu+#filters { width:300px !important; height:auto !important; }
  body #toggle-mobile-menu:checked+#filters .main { display:block; }

  #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; }

  #attribution_long { display:block; }
  #attribution { display:none; }

  #filters { top: 60px;}
  #filters > .aux {
    display: none
  }

  #zoom {
      display:block;
      position:absolute; 
      /*top:110px; left:10px;*/
      bottom:10px; right:10px;
      z-index:1000;   
      border-radius:4px;
      border: 2px solid #CCCCCC;  
  }
  #zoom button{
      display:block;
      margin:0;
      height:40px;
      width:40px;
      border:none;
      overflow:hidden; 
      background-color:white;
      color:#666;
  }
    #zoom button span {
        font-weight:bold;
        font-size:21pt;
        position:relative;
        bottom:4px;
    }
  /*#zoom .plus {border-bottom-left-radius:0; border-bottom-right-radius:0; border-bottom:none;}*/
  #zoom .minus {border-top:1px solid #DDD;}

  #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:350px;
      width:initial;
      padding:10px;
      border: 1px solid #CCC;
      border-radius: 4px 4px 0 0;
    }

  /* one graph on the right, the other below */
  #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 }

}

/* L */
@media (min-width: 1024px) and (min-height: 600px) {
    /* help and legend info panels vertical on the right */
    #legend_help, #help {
        top: 110px;
        left: 10px;
        width: 500px;
        height:fit-content;
        max-height: calc(100% - 120px);
    }
    #help table {font-size:9pt;}
}

/* XL */
@media (min-width: 1250px) and (min-height: 600px) {
    /* detail panel in three columns */
    #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;
    }

    #legend_help, #help {
        width:600px;
    }

}


/* fix to make the mapbox popup look like leaflet's */
body .mapboxgl-popup-content
{
    border-radius:12px;
    padding:10px 20px 15px;
    box-shadow: 0 3px 14px rgba(0,0,0,0.4);
    font-family: "Open Sans", Verdana, Helvetica, Arial, sans-serif;
}
body .leaflet-popup-pane
{
    font-family: "Open Sans", Verdana, Helvetica, Arial, sans-serif;
}

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

/* hide useless button */
.mapboxgl-ctrl-attrib { display:none }

/* Timeslider styles */


.tsInfo #tsText {
    text-align: center;
    -moz-border-radius: 10px; /* for Firefox */
    -webkit-border-radius: 10px; /* for Webkit-Browsers */
    border-radius: 10px; /* regular */
    background-color: rgba(0, 75 ,135, 0.2);
    font-size: small;
    padding:5px;
}


.botonera .toolButton {
    width: 20px;
    font-size: x-small;
    display: inline-block;
}


.infoLink {
    margin: 3px !important;
    padding-top: 10px;
    text-align: right;
    font-size: 9pt;
}