/* Styles used by the page elements of the AIR tool. */

/* Define all font sizes for medium-sized screens. */
@media (max-width: 1800px) {
 .text-xxxs {
  font-size: 0.7vw;
 }
 .text-xxs {
  font-size: 0.7vw;
 }
 .text-xs {
  font-size: 0.8vw;
 }
 .text-s {
  font-size: 0.9vw;
 }
 .text-m {
  font-size: 1.0vw;
 }
 .text-l {
  font-size: 1.1vw;
 }
 .text-xl {
  font-size: 1.3vw;
 }
 .text-xxl {
  font-size: 1.6vw;
 }
 .text-xxxl {
  font-size: 2.5vw;
 }
}

/* Define all font sizes for larger screens. */
@media (min-width: 1800px) {
 .text-xxxs {
  font-size: 0.6vw;
 }
 .text-xxs {
  font-size: 0.6vw;
 }
 .text-xs {
  font-size: 0.7vw;
 }
 .text-s {
  font-size: 0.8vw;
 }
 .text-m {
  font-size: 0.9vw;
 }
 .text-l {
  font-size: 1.0vw;
 }
 .text-xl {
  font-size: 1.2vw;
 }
 .text-xxl {
  font-size: 1.5vw;
 }
 .text-xxxl {
  font-size: 2.5vw;
 }
}

html, body {
 height: 100%;
 width: 100%;
 display: block;
 font-family: Univers;
 color: #000000;
 padding: 0px;
 margin: 0px;
 background-color: #D6D6D6;
 -webkit-text-size-adjust: 100%;
}

th, td {
 padding: 0.25vw;
}

select, input {
 font-family: Univers;
}

/* Styles for the title bar */
#page_title {
 position: absolute;
 top: 0px;
 left: 0px;
 right: 0px;
 width: 100%;
 font-family: Univers;
 background-color: #FFFFFF;
 color: #092940;
 border-bottom: 4px solid #092940;
 z-index: 999;
}
table.title {
 position: relative;
 background-color: #FFFFFF;
 color: #092940;
 width: 100%;
 font-family: Univers;
 font-style: italic;
}
table.title td {
 position: relative;
 padding-left: 0px;
}

/* Styles for the tabs to change between time period */
.tabs_container {
 display: block;
 width: 100%;
 background-color: #092940;
 border-top: 2px solid #092940;
 color: #FFFFFF;
 font-family: Univers;
}
#tab_title, #tab_past, #tab_curr, #tab_fcst, #tab_link {
 display: inline-block;
 text-align: center;
 vertical-align: middle;
}
#tab_title {
 width: 10%;
}
#tab_past, #tab_curr, #tab_fcst {
 width: 26%;
 position: relative;
 padding: 4px 0px;
 cursor: pointer;
}
.tab_sel {
 background-color: #094671;
 color: #FFFFFF;
 font-weight: bold;
}
.tab_unsel {
 background-color: #90BBDC;
 color: #092940;
}
 .tab_per_title {
  display: block;
 }
#tab_link {
 width: 10%;
}
 #tab_link a {
  color: #FFFFFF;
  cursor: pointer;
 }
  #tab_link a span {
   text-decoration: underline;
  }
.tab_description {
 display: block;
 margin: 0px 15px;
 padding: 6px;
 text-align: center;
 background-color: #094671;
 border-radius: 20px;
}
 .tab_description i {
  margin: 0vw 0.4vw;
 }
 .tab_description_elev {
  display: inline;
 }
#tab_bookmark {
 display: none;
 margin: 0px 15px;
 padding: 6px;
 text-align: left;
}
 #tab_bookmark input[type=text] {
  width: 75%;
  margin: 0px 10px;
  padding: 0px 8px;
  background-color: #2D6D9A;
  color: #FFFFFF;
  font-family: Univers;
 }
 #bookmark_copy {
  color: #90BBDC;
  cursor: pointer;
 }
  #bookmark_copy span {
   text-decoration: underline;
  }

/* Notices at the top of the page */
.notice {
 display: block;
 width: 100%;
 text-align: left;
}
 .notice_icon {
  display: inline-block;
  height: 100%;
  padding: 0px 10px;
 }
 .notice_offseason {
  display: block;
  padding: 10px 15px;
  background-color: #c0dff7;
  text-align: center;
 }
 .notice_info {
  display: block;
  padding: 10px 15px;
  background-color: #ffd67c;
  text-align: center;
 }
 .notice_alert {
  display: block;
  padding: 10px 15px;
  background-color: #cc0000;
  color: #FFFFFF;
  text-align: center;
 }

/* Styles for the point and gridded dataset options panel */
.data_options {
 position: absolute;
 border-spacing: 0px;
 margin-left: 2px;
 top: 25vh;
 left: 0px;
 max-width: 24%;
 height: auto;
 font-family: Univers;
 z-index: 1;
 border: 0px solid #092940;
 overflow: hidden;
}
 .dataset_panel_title {
  display: inline-block;
  vertical-align: middle;
  font-weight: bold;
 }
 .dataset_panel_mouseover {
  display: none;
 }
  .dataset_panel_mouseover_message {
   padding: 4px;
   background-color: #444444;
   color: #FFFFFF;
   text-align: center;
  }
 .aggtype_select {
  background-color: #5FA94C;
  color: #FFFFFF;
 }
 #sync_option_past {
  margin-top: 5px;
 }
  #sync_option_past label {
   vertical-align: middle;
  }
 .dataset_panel_buttons {
  display: block;
  vertical-align: top;
 }
  .dataset_button_options {
   display: inline-block;
   /*margin-left: 10px;*/
  }
   .dataset_option_select {
    display: none;
    margin-left: 10px;
    font-size: 0.7vw !important;
    background-color: #246FA5;
    color: #FFFFFF;
   }
   .dataset_button_update {
    display: none;
    background-color: #246FA5;
    border-radius: 8px;
    padding: 2px 4px;
    cursor: pointer;
   }
   .dataset_option_single {
    display: none;
    background-color: #246FA5;
    border-radius: 8px;
    padding: 0px 6px;
   }
  .dataset_button_expand {
   display: inline;
  }
 .dataset_legend {
  display: none;
  margin: 5px 0px;
 }
  .dataset_legend_loading {
   display: block;
   margin: 0px auto;
   text-align: center;
  }
   .dataset_legend_loading img {
    width: 15px;
    height: 15px;
    vertical-align: middle;
    margin-right: 5px;
   }
  .dataset_legend_error {
   display: block;
   margin: 0px auto;
   text-align: center;
   color: #990000;
  }
   .dataset_legend_error i {
    color: #FFB000;
   }
  .dataset_legend_image {
   display: inline-block;
   margin: 10px 20px 10px 0px;
   float: left;
  }
   .dataset_legend_image img {
    width: 65px;
    margin-right: 10px;
    vertical-align: middle;
   }
  .dataset_legend_disclaimer {
   display: block;
   margin-top: 10px;
  }
   .dataset_legend_disclaimer_icon {
    display: table-cell;
    vertical-align: top;
    padding: 0px 4px;
    color: #FFC624;
   }
   .dataset_legend_disclaimer_text {
    display: table-cell;
    vertical-align: top;
    font-style: italic;
   }
  .dataset_legend_purpleair {
   display: block;
   margin-top: 10px;
   color: #AA44AA;
  }
   .dataset_legend_purpleair input {
    width: 0.9vw;
    margin-left: 0px;
    margin-right: 5px;
    vertical-align: middle;
   }
   .dataset_legend_purpleair img {
    width: 0.9vw;
    margin-right: 10px;
   }
   .dataset_legend_purpleair a {
    color: #AA44AA;
   }
  .dataset_legend_title {
   display: block;
  }
   .dataset_legend_title i {
    margin-right: 4px;
   }
  .dataset_legend_date {
   display: block;
   color: #990000;
  }
  .dataset_legend_source {
   display: block;
  }
   .dataset_legend_source a {
    color: #094671;
   }
   .dataset_legend_source i {
    color: #246FA5;
   }
  .dataset_legend_ramp {
   display: block;
  }
   .dataset_legend_table {
    margin: 10px 0px 5px 0px;
    border-collapse: collapse;
   }
    .dataset_legend_table_row {
    }
     .dataset_legend_table_ph {
      width: 1.0vw;
      height: 0px;
      padding: 0px;
     }
     .dataset_legend_table_blank {
      width: 1.0vw;
      height: 12px;
      padding: 0px;
     }
     .dataset_legend_table_shade, .dataset_legend_table_shade_wide {
      position: relative;
      width: 2.0vw;
      height: 2px;
      text-align: center;
      padding: 4px 0px;
     }
      .dataset_legend_table_shade_tooltip_icon {
       position: absolute;
       width: 0;
       height: 0;
       top: 0;
       right: 0;
       border-top-width: 0.5vw;
       border-top-style: solid;
       border-top-color: #90BBDC;
       border-bottom-width: 0.5vw;
       border-bottom-style: solid;
       border-bottom-color: transparent;
       border-left-width: 0.5vw;
       border-left-style: solid;
       border-left-color: transparent;
       cursor: help;
      }
       .dataset_legend_table_shade_tooltip_icon .tooltip_text {
        visibility: hidden;
        position: absolute;
        width: 120px;
        background-color: #000000;
        color: #FFFFFF;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        z-index: 1;
        bottom: 14px;
        left: 50%;
        margin-left: -60px;
       }
       .dataset_legend_table_shade_tooltip_icon .tooltip_text::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
       }
       .dataset_legend_table_shade_tooltip_icon:hover .tooltip_text {
        visibility: visible;
       }
     .dataset_legend_table_label {
      width: 28px;
      text-align: center;
      padding: 2px 0px;
     }
     .dataset_legend_table_label_units {
      text-align: right;
      padding: 2px 0px;
     }
     .dataset_legend_table_noramp {
      text-align: center;
      border: 1px solid #000000;
     }
 .opacity_legend {
  display: none;
  margin: 10px 0px;
 }
  #gridded_opacity_past, #gridded_opacity_curr, #gridded_opacity_fcst {
   display: inline-block;
   width: 45%;
   margin: 0px 10px;
   vertical-align: middle;
  }
  #gridded_opacity_past .ui-slider-range, #gridded_opacity_curr .ui-slider-range, #gridded_opacity_fcst .ui-slider-range {
   background: #CCCCCC;
  }
  .opacity_legend_value {
   display: inline-block;
   /*vertical-align: middle;*/
  }

/* Legends that appear only when all menus are hidden */
#desktop_legends {
 display: block;
 position: absolute;
 left: 3px;
 bottom: 5vh;
 background-color: #FFFFFF;
 border: 1px solid #000000;
 width: 30%;
 z-index: 1;
}
 .desktop_legends_title {
  display: block;
  padding: 5px;
  background-color: #092940;
  color: #FFFFFF;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1.0vw;
  font-weight: bold;
  cursor: move;
 }
 .desktop_legends_period {
  display: block;
  padding: 5px 10px;
 }
 .desktop_legend {
  display: block;
  margin: 10px 0px;
 }
 .desktop_legends_blank {
  display: block;
  margin: 10px 0px;
  text-align: center;
 }

/* Styles for the map controls/layer selection panel */
#map_controls {
 position: absolute;
 border-spacing: 0px;
 margin-right: 3px;
 top: 25vh;
 right: 0px;
 max-width: 37%;
 height: auto;
 z-index: 1;
 border: 0px solid #092940;
 overflow: hidden;
}
table.details td {
 padding-left: 5px;
}
table.date_menu, table.dataset_menu, table.map_menu, #elev_menu, #fire_smoke_menu, #wpc_data_menu {
 background-color: white;
 border: 1px solid black;
 width: 100%;
 border-spacing: 0px;
 margin-left: 2px;
 text-align: left;
}
table.date_menu {
 width: 99%;
 height: auto;
 margin-bottom: 10px;
}
table.dataset_menu {
 width: 99%;
 height: auto;
}
table.map_menu {
 width: 100%;
 height: auto;
}
 table.date_menu tr, table.dataset_menu tr, table.map_menu tr {
  font-family: Univers;
  border-spacing: 0px;
 }
  table.date_menu th, table.dataset_menu th, table.map_menu th {
   color: white;
   border: 0px solid black;
   width: 100%;
   border-spacing: 0px;
   font-family: Univers;
   vertical-align: middle;
  }
  table.date_menu th {
   background-color: #1B8400;
  }
  table.dataset_menu th, table.map_menu th {
   background-color: #092940;
  }

/* Icons in the data menu title bars */
.title_bar_icon {
 display: inline-block;
 width: 1.3vw;
 text-align: left;
 vertical-align: middle;
}

/* Buttons for selecting datasets to view */
.dataset_btn {
 display: inline-block;
 margin: 2px 0px;
 padding: 2px 4px;
 text-align: center;
 cursor: pointer;
 vertical-align: middle;
}
.dataset_btn_sel {
 border: 2px solid #092940;
 background-color: #094671;
 color: #FFFFFF;
 font-weight: bold;
}
.dataset_btn_unsel {
 border: 2px solid #092940;
 background-color: #90BBDC;
 color: #092940;
 font-weight: normal;
}
.dataset_btn_none_sel {
 border: 2px solid #990000;
 background-color: #CC0000;
 color: #FFFFFF;
 font-weight: bold;
}
.dataset_btn_none_unsel {
 border: 2px solid #990000;
 background-color: #ffffff;
 color: #990000;
 font-weight: normal;
}

/* Styles for the date options */
#date_past_datepicker {
 width: 110px;
 margin: 2px 2px 2px 0px;
 font-family: Univers;
}
#date_curr_newob {
 display: none;
 margin: 5px 0px 10px 0px;
 color: #227b22;
}
 #date_curr_newob a {
  text-decoration: underline;
  cursor: pointer;
 }
.date_menu_10min_info {
 margin: 0.4vh 0px;
 color: #092940;
}

.date_buttons {
 display: block;
 margin-top: 5px;
}
 .date_button_en, .date_button_dis {
  display: inline-block;
  margin: 3px 0px 0px 0px;
  padding: 2px 4px;
  text-align: center;
 }
 .date_button_en {
  border: 1px solid #1B8400;
  background-color: #5FA94C;
  color: #FFFFFF;
  cursor: pointer;
 }
 .date_button_dis {
  border: 1px solid #666666;
  background-color: #CCCCCC;
  color: #666666;
  cursor: not-allowed;
 }

/* Icons for zooming on the map */
.zoom_enabled, .zoom_disabled {
 display: inline-block;
 padding: 2px 4px;
 margin: 0vw 0.1vw 0.3vw 0.1vw;
 border-radius: 6px;
}
.zoom_enabled {
 border: 1px solid #094671;
 color: #094671;
 cursor: pointer;
}
 .zoom_enabled:hover {
  background-color: #C5DAEA;
 }
 .zoom_enabled:active {
  background-color: #094671;
  color: #FFFFFF;
 }
.zoom_disabled {
 border: 1px solid #999999;
 color: #999999;
 cursor: not-allowed;
}
 .zoom_enabled i, .zoom_disabled i {
  padding-right: 3px;
  vertical-align: baseline;
 }
#geoloc_error {
 color: #990000;
}

/* Styles for the elevation options */
#elev_menu {
 margin-top: 10px;
}
 #elev_title th {
  background-color: #092940;
  color: #FFFFFF;
 }
 #elev_range_title {
  display: inline-block;
  margin-top: 3px;
  color: #1b8400;
  font-weight: bold;
 }
 #elev_range_values {
  display: inline-block;
  margin-left: 10px;
 }
 #elev_slider {
  width: 90%;
  margin-top: 5px;
 }
  #elev_slider .ui-slider-range {
   background-color: #1b8400;
  }
  #elev_slider .ui-slider-handle {
   border-color: #1b8400;
  }

/* Styles for the fire and smoke options */
#fire_smoke_menu {
 margin-top: 10px;
}
 #fire_smoke_title th {
  background-color: #092940;
  color: #FFFFFF;
 }
.fire_smoke_checkbox {
 width: 25px;
}

/* Styles for the smoke and fires layer legends */
.smoke_legend, .fire_legend {
 display: block;
 border-bottom: 1px solid #DDDDDD;
 padding: 4px 0px;
}
 .smoke_legend_title, .fire_legend_title {
  display: block;
  font-weight: bold;
 }
 .smoke_legend_issuance, .fire_legend_issuance {
  display: block;
  color: #990000;
 }
 .smoke_legend_colors, .fire_legend_icons {
  display: block;
  margin: 5px;
 }
  .smoke_color_light, .smoke_color_medium, .smoke_color_heavy {
   display: inline-block;
   padding: 4px 8px;
   text-align: center;
  }
  .smoke_color_light {
   background-color: #DDDDDD;
   color: #000000;
  }
  .smoke_color_medium {
   background-color: #999999;
   color: #FFFFFF;
  }
  .smoke_color_heavy {
   background-color: #555555;
   color: #FFFFFF;
  }
  .fire_legend_frp_title {
   display: inline-block;
  }
   .fire_legend_frp_help {
    color: #003366;
    text-align: center;
    text-decoration: underline;
    cursor: pointer;
   }
  .fire_legend_frp_explainer {
   display: none;
   max-width: 300px;
   padding: 4px;
   background-color: #FFDEB0;
  }
   .fire_legend_frp_explainer a {
    color: #003366;
    text-decoration: underline;
    cursor: pointer;
   }
  .fire_icon {
   display: inline-block;
   padding: 0px 5px;
   text-align: center;
   vertical-align: middle;
  }
   .fire_icon img {
    height: 17px;
   }
   .fire_icon_desc {
    display: block;
   }
 .smoke_legend_error, .fire_legend_error {
  display: block;
  color: #990000;
 }
  .smoke_legend_error i, .fire_legend_error i {
   color: #FFB000;
  }
.fire_smoke_legend_disclaimer {
 display: block;
 max-width: 300px;
 color: #444444;
}

/* Styles for the WPC data options */
#wpc_data_menu {
 margin-top: 10px;
}
 #wpc_data_title th {
  background-color: #092940;
  color: #FFFFFF;
 }
.wpc_data_radio {
 width: 15px;
}
.wpc_data_radio, .wpc_data_entry {
 vertical-align: top;
}
 .wpc_data_entry select {
  font-size: 0.7vw;
 }
.wpc_legend {
 display: block;
 border-bottom: 1px solid #DDDDDD;
 padding: 4px 0px;
}
 .wpc_legend_title {
  display: block;
  font-weight: bold;
 }
 .wpc_legend_issuance {
  display: block;
  color: #990000;
 }
 .wpc_legend_error {
  display: block;
  color: #990000;
 }
  .wpc_legend_error i {
   color: #FFB000;
  }

/* Adjust some other page styles for larger screens */
@media (min-width: 1800px) {
 .data_options {
  max-width: 20%;
 }
}