body {
  margin: 0;
  padding: 0;
  font-family: Lato, sans-serif;
  font-size: 10pt;
  font-variant: small-caps;
  background-color: #90baad;
}

#full_height_container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.smalli {
  font-variant: normal;
  font-size: smaller;
}

#title_bar {
  display: grid;
  grid-template-rows: 33px;
  grid-template-columns: 28px 28px auto 80px;
  column-gap: 2pt;
  margin-bottom: 2pt;
  margin-left: 8pt;
  margin-right: 8pt;
  padding-top: 2pt;
}

.legal_box_style {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 7.5pt;
  text-align: center;
  letter-spacing: -0.5px;
}

#legal_box {
  height: 24px;
  margin-left: 8pt;
  margin-right: 8pt;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  padding-bottom: 1pt;
  border-top: 1px solid black;
}

.boxed_menu {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  margin: 4px;
  font-weight: 400;
  font-size: 14pt;
  text-align: center;
}

#main_menu {
  margin-top: 4pt;
  margin-bottom: 4pt;
  font-weight: 300;
  text-align: center;
}

#help_menu {
  margin-top: 4pt;
  margin-bottom: 4pt;
  font-weight: 300;
  text-align: center;
}

#language_menu {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 24px;
  margin-top: 4pt;
  margin-bottom: 4pt;
  font-weight: 00;
  color: white;
  text-align: center;
}

.title {
  font-size: 16pt;
  font-family: ivyora-display, serif;
  text-align: center;
  position: relative;
  left: -10pt;
  bottom: 4pt;
  padding-top: 4px;
  line-height: 1;
}

.subtitle {
  font-size: 14pt;
  font-family: ivyora-display, serif;
}

/* Desktop overrides time bar */
#time_bar {
  height: 22px;
  display: grid;
  grid-template-rows: 100%;
  grid-template-columns: 0px 168px auto 168px;
  column-gap: 0pt;
  margin-bottom: 2pt;
  margin-left: 8pt;
  margin-right: 8pt;
  font-variant: normal;
  font-weight: 300;
}

#last_update {
  display: grid;
  grid-template-columns: 67px auto 34px;
  background-color: white;
  border-radius: 3pt;
  border: black 1px solid;
  padding-left: 4pt;
  height: 22px;
}

#date_picker {
  display: grid;
  grid-template-columns: 38px auto 34px;
  background-color: white;
  border-radius: 3pt;
  border: black 1px solid;
  padding-left: 4pt;
  height: 22px;
}

.inset_button {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(132, 178, 163);
  border-radius: 3pt;
  height: 22px;
  width: 31px;
  border-left: black 1px solid;
}

.wider_inset {
  width: 33px;
}

.more_button {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(132, 178, 163);
  border-radius: 3pt;
  height: 26px;
  width: 26px;
  border: black 1px solid;
}

.location_bar_style {
  position: absolute;
  top: 92px;
  left: 4%;
  height: 60px;
  width: 90%;
  background: rgb(215, 227, 223);
  display: grid;
  grid-template-rows: 50%;
  grid-template-columns: 0px 150px auto 110px auto 60px;
  margin-left: 3pt;
  margin-right: 3pt;
}

.location_bar_style_single_line {
  position: absolute;
  top: 92px;
  left: 4%;
  height: 30px;
  width: 90%;
  background: rgb(215, 227, 223);
  display: grid;
  grid-template-rows: 100%;
  grid-template-columns: 0px 150px auto 110px auto 60px;
  margin-left: 3pt;
  margin-right: 3pt;
}

.more_location_bar_style {
  position: absolute;
  top: 12px;
  left: 4%;
  width: 90%;
  height: 30px;
  background: rgb(215, 227, 223);
  display: grid;
  grid-template-rows: 100%;
  grid-template-columns: 0px 150px auto 110px auto 60px;
  margin-left: 3pt;
  margin-right: 3pt;
}

.upper_legend_style {
  position: absolute;
  top: 125px;
  left: 4%;
  height: 60px;
  width: 90%;
  background: rgb(215, 227, 223);
  display: grid;
  grid-template-rows: 50%;
  grid-template-columns: 90px 90px 90px auto 26px;
  column-gap: 0pt;
  margin-bottom: 2pt;
  margin-left: 3pt;
  margin-right: 3pt;
  font-size: 8pt;
  line-height: 1;
  cursor: pointer;
}

.upper_legend_style_single_line {
  position: absolute;
  top: 125px;
  left: 4%;
  width: 90%;
  background: rgb(215, 227, 223);
  display: grid;
  grid-template-columns: 90px 90px 90px auto 26px;
  column-gap: 0pt;
  margin-bottom: 2pt;
  margin-left: 3pt;
  margin-right: 3pt;
  font-size: 8pt;
  line-height: 1;
  cursor: pointer;
  height: 30px;
  grid-template-rows: 100%;
}


.more_upper_legend_style {
  position: absolute;
  top: 45px;
  left: 4%;
  height: 24px;
  width: 90%;
  background: rgb(215, 227, 223);
  display: grid;
  grid-template-rows: 100%;
  grid-template-columns: 90px 90px 90px auto 26px;
  column-gap: 0pt;
  margin-bottom: 2pt;
  margin-left: 3pt;
  margin-right: 3pt;
  font-size: 8pt;
  line-height: 1;
  cursor: pointer;
}

.upper_legend_item {
  display: grid;
  grid-template-rows: 100%;
  grid-template-columns: 1fr 5fr;
  column-gap: 2pt;
  background: rgb(255, 255, 255, 0);
}

.upper_legend_item_extra {
  display: grid;
  grid-template-rows: 100%;
  grid-template-columns: 1fr 5fr;
  column-gap: 2pt;
  background: rgb(255, 255, 255, 0);
}


.upper_legend_item_label {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10pt;
}

.map_item_icon {
  height: 26px;
  width: 26px;
  border-radius: 3pt;
  border: 1px solid black;
  background-color: rgb(244, 244, 244);
}

.map_holder_style {
  height: calc(100vh - 240pt);
  margin-left: 8pt;
  margin-right: 8pt;
  margin-top: 0pt;
  margin-bottom: 3pt;
  border: 1px solid black;
  border-radius: 5pt;
  text-align: center;
  background: rgb(215, 227, 223);
}

.more_map_holder_style {
  height: 85vh;
  margin-left: 8pt;
  margin-right: 8pt;
  margin-top: 2pt;
  margin-bottom: 4pt;
  border: 1px solid black;
  border-radius: 5pt;
  text-align: center;
  background: rgb(215, 227, 223);
}

.artemis_map_style {
  margin-top: 72pt;
  width: 99%;
  height: calc(100vh - 262pt - 70px);
  border: none;
}

.artemis_map_style_single_line {
  margin-top: 50pt;
  width: 99%;
  height: calc(100vh - 240pt - 70px);
  border: none;
}


.more_artemis_map_style {
  margin-top: 53pt;
  width: 98%;
  height: calc(85vh - 74px);
  border: none;
}

#lower_legend {
  width: 100%;
  display: grid;
  grid-template-rows: 18pt auto;
  row-gap: 2pt;
  margin-top: 2pt;
  margin-left: 8pt;
  margin-right: 8pt;
}

#lower_title {
  display: grid;
  grid-template-rows: 100%;
  grid-template-columns: 9fr 30pt;
}

.pointer {
  cursor: pointer;
}

#my_location {
  display: grid;
  grid-template-rows: 100%;
  grid-template-columns: 25% 75%;
  background: rgb(255, 255, 255, 0.8);
  cursor: pointer;
}

#home {
  width: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgb(255, 255, 255, 0.8);
}

#search_panel {
  display: grid;
  grid-template-rows: 100%;
  grid-template-columns: 25px auto;
  background: rgb(255, 255, 255, 0.8);
}

#bar_holder {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  overflow-y: scroll;
}

#refresh {
  font-size: 16pt;
  font-weight: 600;
  text-align: center;
  padding-top: 2pt;
}

.bar6 {
  padding-top: 2pt;
  display: grid;
  grid-template-columns: 16% 16% 16% 15% 16% 15% 8%;
}

.bar5 {
  width: 80%;
  padding-top: 2pt;
  display: grid;
  grid-template-columns: 17% 17% 17% 17% 17% 17%;
}

.bar7 {
  padding-top: 2pt;
  display: grid;
  grid-template-columns: 14% 13% 14% 13% 13% 13% 14% 8%;
}

.boxed {
  border: 1px solid black;
  border-radius: 5pt;
  padding: 1px;
}

.square_boxed {
  border: 1px solid black;
  padding: 1px;
}

.walled_right {
  border-right: 1px solid black;
}

.walled_left {
  border-left: 1px solid black;
}

.underlined {
  border-bottom: 1px solid black;
}

.full_centered {
  font-size: 10pt;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#title_more {
  background-color: rgb(132, 178, 163);
}

.centered {
  text-align: center;
}

.smaller {
  font-size: 8pt;
  text-align: center;
}

.info {
  font-size: 10pt;
  font-weight: 300;
  font-variant: none;
  text-align: center;
}

.aqi_info {
  font-size: 10pt;
  font-weight: 300;
  font-variant: none;
  text-align: center;
  text-decoration: none;
}

.lift {
  position: relative;
  top: -7pt;
}

.slide {
  position: relative;
  left: 2pt;
}

.pushed_down {
  position: relative;
  top: 4pt;
}

.tweeked_down {
  position: relative;
  top: 2pt;
}

.tweeked_up {
  position: relative;
  top: -2pt;
}

.tweeked_right {
  position: relative;
  left: 2pt;
}

.hidden {
  display: none;
}

.visible {
  display: grid;
}

.popup_overlay {
  grid-template-rows: 17pt 9pt 24pt auto;
  grid-template-columns: 17pt auto 22pt;
  row-gap: 4pt;
  position: absolute;
  padding: 3pt;
  top: 25%;
  left: 8%;
  height: 55%;
  width: 85%;
  max-width: 5in;
  border: 2px solid red;
  border-radius: 5pt;
  background: rgb(255, 255, 255, 1);
  z-index: 1000;
}

.popup_overlay_b {
  grid-template-rows: 48pt 60pt auto;
  grid-template-columns: 17pt auto 22pt;
  row-gap: 4pt;
  position: absolute;
  padding: 3pt;
  top: 25%;
  left: 8%;
  height: 55%;
  width: 85%;
  max-width: 5in;
  border: 2px solid red;
  border-radius: 5pt;
  background: rgb(255, 255, 255, 1);
  z-index: 1000;
}

.nocap {
  font-variant: normal;
  font-size: smaller;
}

.popup_content {
  margin: 4pt;
  overflow-y: scroll;
  font-variant: normal;
  grid-column: 1/4;
}

.dialog_title {
  padding-left: 4pt;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 16pt;
}

.dialog_title_bar {
  padding-left: 4pt;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 16pt;
  height: 46px;
  width: 160px;
}

.close_button {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid black;
  border-radius: 2pt;
  background-color: rgb(132, 178, 163);
  padding: 0;
}

.close_button_b {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid black;
  border-radius: 2pt;
  height: 17pt;
  background-color: rgb(132, 178, 163);
  padding: 0;
}

.display_toggle_wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  width: 100%;
  height: 100%;
}

.display_toggle {
  height: 100%;
  width: 120px;
  border-radius: 2pt;
  border: 1pt solid black;
}

.toggle {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}

.toggle_selected_show {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(132, 178, 163);
  height: calc(100% - 2pt);
  position: relative;
  top: -1pt;
  left: -1pt;
  color: white;
  border-radius: 2pt;
  border: 2pt solid black;
}

.toggle_selected_show::before {
  content: "SHOW";
}

.toggle_selected_hide::before {
  content: "HIDE";
}

.toggle_unselected {
  background-color: white;
  height: 100%;
  color: black;
  border-radius: 2pt;
}

.toggle_selected_hide {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(132, 178, 163);
  position: relative;
  top: -1pt;
  left: +1pt;
  height: calc(100% - 2pt);
  color: white;
  border-radius: 2pt;
  border: 2pt solid black;
}

.centerflex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.air_quality_bar {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 16pt;
}

.air_quality_bar_c {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 16pt;
  position: relative;
  top: 6pt;
}

.air_quality_bar_b {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 28pt;
  border: 1px solid black;
}

.flex_bottom_style {
  max-height: 108px;
  min-height: 48px;
  display: flex;
  flex: initial;
  background-color: #ffffff;
}

.less_flex_bottom_style {
  display: none;
}

.less_flex_top_style {
  display: none;
}

.flex_top_style {
  display: block;
}

#help_menu_grid {
  display: grid;
  grid-template-columns: 35% 65%;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  column-gap: 2pt;
  row-gap: 8pt;
  width: 95%;
}

.search_box_help {
  display: grid;
  grid-template-columns: 1fr 5fr;
  grid-template-rows: 1fr;
  column-gap: 2pt;
}

.location_box_help {
  width: 100px;
  display: grid;
  grid-template-columns: 16px 80px;
  grid-template-rows: 1fr;
  column-gap: 2pt;
}

#upper_legend_help {
  height: 24px;
  display: grid;
  grid-template-rows: 30px 30px 30px;
  row-gap: 2pt;
  font-size: 8pt;
  line-height: 1;
}

.help_height {
  height: 25px;
}

.help_overview {
  margin: 10px;
}

.level0 {
  margin-bottom: 15pt;
}

.level1 {
  margin-left: 15pt;
  margin-top: 10pt;
}

.level2 {
  margin-top: 10pt;
  margin-left: 30pt;
}

.padding {
  padding: 10px;
}

.leftshift {
  padding-left: 10px;
}

.legal {
  font-size: smaller;
  text-align: right;
}

.green {
  background-color: #104547;
  color: white;
}

.shade {
  background-color: #eeeeee;
}

.level_0 {
    margin-left: 0px;
    font-weight: bold;
}
.level_1 {
    margin-left: 20px;
}

.navigation {
    cursor: pointer;
    text-decoration: underline;
}