body {
  font-family: Arial, Helvetica, sans-serif;
  background-color:  black;
}


.head{
  background-color:#2B587C;
  color:white;
  padding:5px;
  text-align: center;
  font-weight: bold;
}

#div_air_qual{
  display:flex;
  justify-content: space-around;
  align-items: center;
}

#div_air_circle{
  background-color: black;
  color:springgreen;
  width: 150px;
  height: 150px;
  border-style: solid;
  border-width: 15px;
  border-color: green;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
}

#div_air_qual_word{
  margin-top: 30px;
}

#div_air_word{
  margin-top: 30px;
  font-weight: bold;
  font-size: 2em;
}


.table_air{
  width: 100%;
  margin-top: 30px;
  border-collapse: collapse;
  border: none;
  color: white;
}

.table_air td{
  
  white-space: pre-wrap; 
  
}

.col1,.col3{
  width:10%;
  padding: 10px;
}

.col2,.col4{
  width:10%
}

#td_temp,#td_humid,#td_co2,#td_tvoc,#td_aq,#td_pm{    
  margin-top: 5px;
  font-weight: bold;
  font-size: 1.2em;
}


.div_bottom_but{
  margin-top: 20px;
  display:flex;
  justify-content: center;

}

#service_but{
  background-color: red;
  color: white;
  font-weight: bold;
  padding: 10px;
}

#chart_but{
  background-color: green;
  color: white;
  font-weight: bold;
  padding: 10px;
}

/*Loader animation*/
#loader {	
  width: 150px;
  height: 150px;

  border: 16px solid #f3f3f3; /*White circle background*/  
  border-radius: 50%;
 
 /*border-top: 16px solid #3498db;*/
 border-top: 16px solid orangered;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.flex-loader{
  display: flex;
  /*justify-content: center;*/	
  flex-direction: column;
  align-items: center;
  margin-top: 150px;
  font-size: 2em; 
  font-weight: bold;
}

#p_loading{
    color:white;
}

  /* Tablet desktop :768px. */

@media (min-width: 768px) {
  body {
    width: 50%;
    margin-left: 2em;	
  }				
}