/* Styles for the dashboard interface */

/* Add the Roboto font for the map labels */
@font-face {
 font-family: 'RobotoBold';
 src: url('fonts/Roboto-Bold.ttf') format('truetype');
 font-weight: normal;
 font-style: normal;
}

.dash_container {
 display: block;
 max-width: 1140px;
 margin: auto;
 font-size: 15px;
}

/* Set the AQI colors */
.aqi_good {
 background-color: #00E400;
 color: #000000;
}
.aqi_moderate {
 background-color: #FFFF00;
 color: #000000;
}
.aqi_unhealthy_for_sensitive_groups {
 background-color: #FF7E00;
 color: #FFFFFF;
}
.aqi_unhealthy {
 background-color: #FF0000;
 color: #FFFFFF;
}
.aqi_very_unhealthy {
 background-color: #8F3F97;
 color: #FFFFFF;
}
.aqi_hazardous {
 background-color: #7E0023;
 color: #FFFFFF;
}

/* The top of the container for selecting a location */
.dash_bar_loc {
 display: block;
 padding: 10px 0px;
}
 .dash_bar_loc_options {
  display: inline-block;
  vertical-align: top;
 }
  .dash_bar_loc_detect {
   display: inline;
   margin: 0px 5px;
   font-size: 13px;
   cursor: pointer;
  }
   .dash_bar_loc_detect i {
    color: #000099;
    margin-right: 2px;
   }
  .dash_bar_loc_elev {
   display: none;
   margin: 5px 0px;
   font-size: 13px;
   cursor: pointer;
  }
   .dash_bar_loc_elev i {
    margin-right: 2px;
   }
    .dash_elev_btn_on {
     color: #5DD74E;
    }
    .dash_elev_btn_off {
     color: #CCCCCC;
    }
 .dash_bar_loc_disco {
  float: right;
  text-align: right;
 }

/* The body of the container containing forecast data */
#dash_body {
 display: block;
 width: 100%;
 border: 1px solid #000000;
}
 .dash_loading {
  display: block;
  width: 100%;
  padding: 10px 0px;
  text-align: center;
  background-color: #FFFFFF;
 }
  .dash_loading i {
   margin-right: 5px;
   color: #FF9900;
  }
  .dash_loading img {
   width: 20px;
   margin-right: 5px;
   vertical-align: middle;
  }

/* Styles for the header/footer bars that appear throughout the dashboard */
.dash_header {
 display: block;
 width: 100%;
 padding: 7px 0px;
 background-color: #002060;
 color: #FFFFFF;
 font-size: 18px;
 font-weight: bold;
 text-align: center;
}
 .dash_header i {
  margin-right: 5px;
 }
 .dash_header_yell {
  display: inline;
  color: #FFFF00;
 }
  .dash_header_yell a {
   color: #FFFF00;
  }
 .dash_header_ital {
  display: inline;
  font-style: italic;
 }