/* Styles for mobile devices */
@media screen and (max-width: 1199px) {
 /* Don't force the dashboard to a set pixel width */
 .dash_container {
  width: 100%;
  max-width: 100%;
 }
  .dash_header {
   font-size: 16px;
  }

  /* Adjust options and text above the dashboard */
 .dash_bar_loc_detect {
  display: block;
 }
 .dash_bar_loc_disco {
  float: none;
  text-align: left;
  margin-top: 10px;
 }

 /* Split the air quality forecast section across 2 lines */
 .dash_aq_row {
  text-align: center;
 }
  .dash_aq_left {
   display: none;
  }
   .dash_aq_day_date {
    display: block;
   }
  .dash_aq_legend {
   display: block;
   padding: 5px 10px;
  }
    .dash_aq_zone_mobile {
     display: inline-block;
     vertical-align: top;
    }
    .dash_aqi_logo_mobile {
     width: 71px;
     margin-right: 10px;
    }
    .dash_aq_issued {
     font-size: 11px;
    }
   .dash_aq_legend_content {
    display: inline-block;
   }
    .dash_legend_table_blank, .dash_legend_table_shade {
     height: 8px;
    }
    .dash_legend_table_label {
     font-size: 10px;
    }
  .dash_aq_right {
   display: block;
  }
   .dash_aq_td {
    padding: 0px 4px 10px 0px;
   }
    .dash_aq_day_desc {
     font-size: 12px;
    }
     .dash_aq_day_date {
      display: block;
      text-decoration: underline;
      cursor: pointer;
     }
     .dash_aq_date_link {
      display: inline;
     }
    .dash_aq_day_link {
     display: none;
    }
    .dash_aq_aqival {
     display: none;
    }
    .dash_aq_aqicat {
     display: none;
    }
    .dash_aq_aqicat_mobile {
     display: block;
     font-size: 11px;
     padding: 2px;
    }

 /* Make the map popup slightly smaller for mobile devices */
 .map_popup_title {
  padding: 1px 3px;
  font-size: 12px;
 }
 .map_popup_content {
  font-size: 10px;
 }
 #map_ridges {
  padding: 5px;
  font-size: 12px;
 }
 #map_air_btn {
  padding: 5px;
 }
  .map_air_btn_text {
   font-size: 13px;
  }

 /* Hide the normal weather forecast display and show the mobile-specific one */
 .dash_wx_left, .dash_wx_right {
  display: none;
 }
 .dash_wx_mobile {
  display: table-cell;
 }
}