/* Styles for the mobile version of the AIR tool. */

/* Define all font sizes */
.text-xxxs {
 font-size: 2.0vw;
}
.text-xxs {
 font-size: 2.2vw;
}
.text-xs {
 font-size: 2.4vw;
}
.text-s {
 font-size: 2.6vw;
}
.text-m {
 font-size: 2.8vw;
}
.text-l {
 font-size: 3.0vw;
}
.text-xl {
 font-size: 3.4vw;
}
.text-xxl {
 font-size: 3.8vw;
}
.text-xxxl {
 font-size: 4.0vw;
}

/* Make radio buttons and checkboxes larger */
input[type="radio"], input[type="checkbox"] {
 height: 2em;
 width: 2em;
 margin-right: 1em;
}

/* Styles for the page title area and time period tabs */
#page_title {
 position: relative;
}
#tab_title {
 width: 12%;
}
#tab_past, #tab_curr, #tab_fcst {
 width: 24%;
}
#tab_link {
 width: 10%;
}
  #tab_link a span {
   display: none;
  }
#tab_bookmark {
 padding: 12px 6px;
}
 #tab_bookmark input[type=text] {
  width: 50%;
 }
 .tab_description i {
  margin: 0vw 2.0vw;
 }

th, td {
 padding: 0.8vw;
}

/* The drawer containing date and dataset menus */
.drawer {
 display: block;
 position: relative;
 width: 100%;
 z-index: 100;
}
 .drawer_menus {
  display: none;
 }
 .drawer_controls {
  display: block;
  padding: 15px;
  /*background-color: #666666;*/
  background-color: #f3c738;
  /*color: #FFFFFF;*/
  color: #000000;
  text-align: center;
  cursor: pointer;
 }
  .drawer_controls i {
   margin: 0vw 2.0vw;
  }

/* Styles for the date and dataset menus */
.data_options {
 display: block;
 position: relative;
 border-spacing: 0px;
 margin: 0px;
 top: 0px;
 left: 0px;
 width: 100%;
 max-width: 100%;
 height: auto;
}
 .title_bar_icon {
  width: 3.6vw;
 }
table.date_menu, table.dataset_menu, table.map_menu, #elev_menu, #fire_smoke_menu, #wpc_data_menu {
 margin: 0px;
}
table.date_menu {
 width: 100%;
 margin-bottom: 0px;
}
table.dataset_menu {
 width: 100%;
}
#date_past_datepicker {
 width: 130px;
}
.dataset_panel_mouseover_message {
 display: none;
}

/* Dataset selection buttons */
.dataset_option_select {
 font-size: 2.4vw !important;
}

/* Legend containers (above the map) */
#mobile_legends {
 display: block;
 visibility: visible;
 background-color: #FFFFFF;
 border-bottom: 5px solid #092940;
 font-size: 0.1vw;
}
 .mobile_legends_title {
  display: block;
  padding: 5px;
  background-color: #092940;
  color: #FFFFFF;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1.0vw;
  font-weight: bold;
 }
  .mobile_legends_title_icon {
   display: inline;
   float: right;
   cursor: pointer;
  }
 .mobile_legends_period {
  display: block;
  padding: 5px 10px;
 }
 .mobile_legends_blank {
  display: block;
  margin: 10px 0px;
  text-align: center;
 }

/* Dataset legend settings */
.dataset_legend_table_blank {
 width: 2.5vw;
}
.dataset_legend_table_shade, .dataset_legend_table_shade_wide {
 width: 5.0vw;
}

/* The main map area */
#map_canvas {
 position: relative;
 width: 100%;
 height: 550px;
 overflow: hidden;
 visibility: visible;
}

/* Map controls menus */
#map_controls {
 position: relative;
 margin: 0px;
 top: 0px;
 right: 0px;
 width: 100%;
 max-width: 100%;
}
 .map_menu {
  border-collapse: collapse;
 }
 .control_td {
  border-left: 1px solid #092940;
  border-right: 1px solid #092940;
  vertical-align: top;
 }
.fire_smoke_checkbox {
 width: 70px;
}

/* Map popup */
 .map_popup_lg {
  width: 60vw;
  height: 30vw;
 }
 .map_popup_sm {
  width: 30vw;
  height: 15vw;
 }
 .map_popup_lg .map_popup_content {
  height: 27vw;
 }
 .map_popup_sm .map_popup_content {
  height: 12vw;
 }
.map_popup_condition_field_stacked, .map_popup_condition_field_wxfeat {
 min-height: 7.0vw;
}
.map_popup_condition_value_wxfeat {
 height: 7.0vw;
}
.map_popup_condition_value_stacked {
 height: 4.0vw;
}

/* Fire and smoke legend styles */
.smoke_legend, .fire_legend {
 display: inline-block;
 width: 100%;
}
.fire_smoke_legend_disclaimer {
 max-width: 100%;
}

/* The preview bar at the bottom of the map */
.station_preview_bar {
 position: relative;
 width: auto;
}

/* The panel below the map containing station info */
.station_panel {
 top: auto;
}

/* Force the almanac table to scroll horizontally */
.station_section_almanac {
 overflow-x: scroll;
}