h1{
   color:#009FE3;
   font-weight:bold;
   text-align:center;
   font-family: Lato;
   font-size: 400%;
   margin-top: 0.5%;
  margin-bottom: 2.5%;}
 
 h3{
   color:#057391;
   text-align:center;
   font-weight:bold;
   font-family:Lato;
   font-size: 150%;
 }

.choose_file{
  text-align:center;
}

 .graph_title{
  font-weight:bold;
  font-family:Lato;
  font-size: 150%;
  color:#6B7482;
  text-align: center;
  margin-top:3%;
 }
 
 h4{
   color:red;
   /* margin-left:20px; */
   font-weight:bold;
   font-family:Lato;
   /* font-size:14px; */
   text-align:center;
 }

 h2{
  color:#009FE3;
  /* margin-left:20px; */
  font-weight:bold;
  font-family:Lato;
  font-size:100%;
  /* margin-left:20%; */
}
 
 h5{
   color:#274d58;
   font-weight: normal; 
   font-style: italic;
   /* margin-left:20px; */
   /* margin-top:0px; */
   font-family: Lato;
   text-align:center;
   font-size: 100%;
 }

h6{
  color:#274d58;
  font-weight: normal; 
  font-style: italic;
  /* margin-left:20px; */
  display: inline-block;
  margin-top:0px;
  font-family: Lato;
  text-align:right;
  font-size: 100%;
  margin-bottom: 0px;
 }
/*  
 .js .inputfile {
   /* height: 0.1px; */
   /* width: 0.1px; */
   /* opacity: 0;
   overflow: hidden;
   position: absolute;
   z-index: -1; */
 /* } */ 
 .inputfile + label {
   /* max-width: 80%; */
   /* font-size: 1.25rem; */
   /* 20px */
   /* font-weight: 700; */
   text-overflow: ellipsis;
   white-space: nowrap;
   cursor: pointer;
   display: inline-block;
   overflow: hidden;
   /* padding: 0.625rem 1.25rem; */
   /* text-align:center; */
   /* 10px 20px */
 }
/* .fa{
  text-align:right;
}
.fa-info-circle{
  color:#274d58;
  text-align: right;
  font-style: italic;
  font-size: 150%;
} */

 
 input#csv_files.inputfile.inputfile-4{
   display:none;
 }
 
 .inputfile-4 + label {
   color: #009FE3;
   font-family: Lato;
   display: block;
   text-align: center;
   font-size: 100%;
 }
 
 .inputfile-4:focus + label,
 .inputfile-4.has-focus + label,
 .inputfile-4 + label:hover {
   color:  #057391;
 }
 

 .inputfile-4 + label figure {
   width: 3.5%;
   height: 5%;
   margin-left:auto;
   margin-right:auto;
   border-radius: 50%;
   background-color: #009FE3;
   display: inline-block;
   padding: 2%; 
   text-align: center; 
 }
 
 .inputfile-4:focus + label figure,
 .inputfile-4.has-focus + label figure,
 .inputfile-4 + label:hover figure {
   background-color: #057391;
 }
 
 .inputfile-4 + label svg {
   width: 100%;
   height: 100%;
   fill: #f1e5e6;
   text-align: center;
 }

 .inputfile-4 + label {
  margin-left:auto;
  margin-right:auto;
  position: inherit;
}
 
span{
  margin-left:auto;
  margin-right:auto;
  position: inherit;
}
 styled-select {
   overflow: hidden;
   /* margin-left: 20px; */
   cursor: pointer;
   text-align: center;
 }
 
 .styled-select select {
   color: #f1e5e6;
   background: transparent;
   font-family: Lato;
   border: none;
   cursor: pointer;
   font-size: 100%;
   /* height: 29px; */
   /* padding: 5px; If you add too much padding here, the options won't show in IE */
   /* width: 400px; */
   width:60%;
   /* height:150%; */
   padding:1%;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 20px;
   background-color: #009FE3;
   align-content: center;
   /* margin-left: 20px; */
   border: 1px solid white;
 }
 
 .styled-select{
  text-align: center;
 }
 .styled-select select:hover, .styled-select select:focus, .styled-select select:active, .styled-select select:visited {
   background-color: #057391;
   border: 1px solid white;
   outline-color: white;
 }
 
 .column {
   float:left;
   width:33.33%;
   text-align: center;
 }
 
 .column2 {
   float:left;
   width:50%;
   text-align: center;
 }
 .column3 {
  float:left;
  width:25%;
  text-align: left; 
  /* margin-left: 5%; */
}
 
input[type="number"] {
  width: 30%;
  font-family: Lato;
  font-size: 80%;
  /* font-size: 14px; */
  /* margin-left: 30%; */
}
 .row:after {
   content:'';
   display: table;
   clear:both;
   margin-bottom: 0.5%;
 }
.row2{
  margin-left:10%;
}

 .row2:after {
  content:'';
  display: block; 
  clear:both;
  margin-bottom: 1%;
  /* margin-left:10%; */

}
 
 input[type="text"] {
   width:70%; 
   /* margin-top: 20px; */
   /* margin-bottom: 50px; */
   border-style: outset;
   border-radius: 20px;
   font-family: Lato;
   font-size: 100%;
   text-align: center;
 }
 
 input[type="text"]:focus {
   /* border: 1px solid white; */
   outline-color: white;
 }

a label{
  color:white;
  font-size:100%;
}
.info-button {
  text-align: right;
  display: inline-block;
  margin-left: 50%;

} 
.info-button > h6 + button {
  margin-left: 0px;
}
a.back_home_button {
  display:inline-block;
  padding:2.5% 1%;
  border: 2px solid;
  /* margin-left:60%; */
  border-style: inset;
  border-color: initial;
  margin-top:5%; 
  border-radius:2em;
  box-sizing: border-box;
  text-decoration:none;
  font-family: Lato;
  font-weight:bold;
  color:#FFFFFF; 
  margin-left: 40%;
  width:50%; 
  background-color:#6B7482;
  text-align:center;
  transition: all 0.2s;
  height: 30%;
  font-size: 80%;
} 
a.back_home_button:hover {
  background-color:#009FE3;
}
.download_mean_button {
  display:inline-block;
  padding:1% 1%;
  margin-top:5%; 
  box-shadow:none;
  border-radius:2em;
  box-sizing: border-box;
  text-decoration:none;
  font-family: Lato;
  width:50%; 
  border:outset;
  margin-left:0%; 
  font-weight:bold;
  color:#FFFFFF;
  background-color:#009FE3;
  text-align:center;
  transition: all 0.2s;
  height: 30%;
  font-size: 80%;
}

.download_mean_button:hover {
  background-color:#057391;
}

 input[type='submit'] {
  display:inline-block;
  padding:2% 2%;
  margin-top:15%; 
  border-radius:2em;
  margin-left:auto;
  margin-right:auto;
  box-sizing: border-box;
  text-decoration:none;
  font-family: Lato;
  font-weight:bold;
  color:#FFFFFF;
  background-color:#009FE3;
  text-align:center;
  transition: all 0.2s;
  height: 30%;
  font-size: 120%;
}

input[type='submit']:hover {
  background-color:#057391;
}

input[type="checkbox"] {
  font-family: Lato;
  text-align:left;
}
.checkbox label{
  text-align:left;
}

label{
  font-family: Lato;
  font-size: 75%;
  text-align: left;
  color:#009FE3;
}

 .checkbox{ 
  text-align: left;
  /* margin-left: 30%; */
} 
.checkbox2{ 
  text-align: left;
   margin-left: 30%; 
} 

/* input#start_date, input#end_date { */
input[type='date']{
  background:#fff url(https://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/calendar_2.png)  90% 50% no-repeat ;
  border-radius: 20px;
  width: 70%;
  font-family: Lato;
  margin-bottom: 20%;
  padding:3px;
}

/* input#start_date::-webkit-inner-spin-button, input#end_date::-webkit-inner-spin-button { */
input[type='date']::-webkit-inner-spin-button{
  display: none;
}  
/* input#start_date::-webkit-calendar-picker-indicator, input#end_date::-webkit-calendar-picker-indicator { */
  /* input[type='date']{
  opacity: 0;
}   */

.center{
  /* display: block; */
  /* margin-left: auto; */
  /* margin-right: auto; */
}

button{
  border-radius: 50%;
  font-style: italic;
  font-family: "Hoefler Text", serif;
  text-align: right;
   /* height: 20em; */
  margin-left: 80%;
  border-radius: 50%;
  background-color: #274d58;
  border: 1px solid #fff;
  box-shadow: 0 0 0 0 white, 0 0 0 1px #274d58;
  font-size:120%;
  color:white;
  cursor: pointer;
}
button:hover{
  background-color:#009FE3; 
  box-shadow: 0 0 0 0 white, 0 0 0 1px #009FE3;
}

.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

table {
  font-family: Lato;
  border-collapse: collapse;
  width: 100%;
 }
 
 td{
  border: 1px solid #009FE3;
  text-align: center;
  padding: 8px;
  color:#6B7482;
 }

 th{
   color:#009FE3;
   border: 1px solid #009FE3;
   height:50px;
 }
 
 tr:nth-child(even) {
  background-color: #E3F5FD;
 }

.min_max_tables {
  text-align: left;
  font-size:80%;
  width:40%;
  margin-left:auto;
  margin-right:auto;
}


.min_max_tables thead th{
  height:0%;
  text-align:center;
}

.min_max_tables tbody th{
  height:0%;
} 
 caption{
   font-family: Lato;
   font-size:300%;
   color:white;
   background-color: #009FE3;
 }

#pollutants{
   text-align: left;
   color:#009FE3;
 }

 img.img{
  width: 25%;
  margin-left: auto;
  margin-right: auto;
  display: block;
 }