#page {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: auto;
  height: auto;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}

#map-container {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 75px;
  width: auto;
  height: auto;
}

#map {
  width: 100%;
  height: 100%;
}

#timeline-container {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  top: auto;
  height: 75px;
  width: auto;
  overflow-x: scroll;
  background-color: white;
  border-top: 1px solid #777777;
}

#timeline-handle {
  position: absolute;
  left: calc(50% - 60px);
  bottom: 75px;
  height: 20px;
  width: 120px;
  background-color: white;
  color: black;
  border: 0;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  border-top: 1px solid #777777;
  border-left: 1px solid #777777;
  border-right: 1px solid #777777;
}

#timeline-handle::after {
  display: block;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
}

#timeline-handle:before {
  content: '';
  display: block;
  width: 100%;
  height: 3px;
  background-color: #fff;
  position: absolute;
  bottom: -2px;
  left: 0;
  z-index: 10;
}

#timeline-handle span {
  font-size: 12px;
  white-space: nowrap;
}

#selected-day {
  text-align: left !important;
}

#terrain-btn {
  position: absolute;
  left: 9px;
  top: 121px;
}

#share-btn {
  position: absolute;
  left: 9px;
  top: 177px;
}

#share-url {
  width: 100%;
  -webkit-touch-callout: default !important;
  -webkit-user-select: text !important;
  -khtml-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}

#share-url-copy-prompt {
  display: none;
  color: #007bff;
}

#calendar-btn {
  position: absolute;
  left: 9px;
  top: 65px;
}

#home-btn {
  position: absolute;
  left: 9px;
  top: 9px;
}

#playback-btn {
  position: absolute;
  left: 9px;
  bottom: 25px;
}

#stop-btn {
  position: absolute;
  left: 9px;
  bottom: 81px;
  display: none;
}

#playback-txt {
  position: absolute;
  font-size: 39px;
  left: 64px;
  bottom: 23px;
  color: #494949;
  font-weight: 700;
  text-shadow: -2px 0 2px white, 0 2px 2px white, 2px 0 2px white, 0 -2px 2px white;
  display: none;
}

#legend-smell-value {
  pointer-events: none;
  position: absolute;
  font-size: 11px;
  right: 9px;
  top: 9px;
  outline: none;
  background-color: white;
  border: 1px solid #777777;
  border-radius: 2px;
  padding-top: 4px;
  padding-right: 4px;
  padding-left: 4px;
  padding-bottom: 4px;
}

#legend-smell-value td {
  font-size: 10px;
  margin: 0;
}

#legend-smell-value .smell-color-td {
  color: black;
  min-width: 13px;
  max-width: 13px;
  background-repeat: no-repeat;
  background-size: 15px 15px;
  background-position: center;
}

#legend-smell-value .wind-arrow-td {
  color: black;
  background-repeat: no-repeat;
  background-size: 40px 15px;
}

#legend-smell-value .entry-title {
  text-align: left;
}

#legend-smell-value .aqi-tr {
  display: none;
}

#home-dialog,
#calendar-dialog,
#share-dialog {
  display: none;
}

.custom-dialog-flat .ui-dialog-content select {
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  /* Must be no smaller than 16px! Requirement for native select elements on iphones */
  font-size: 16px;
  width: 100%;
  height: 35px;
  outline: none;
  border-radius: 2px;
  cursor: pointer;
}

.smell-color-1 {
  background-image: url("/img/smell_1.png");
}

.smell-color-2 {
  background-image: url("/img/smell_2.png");
}

.smell-color-3 {
  background-image: url("/img/smell_3.png");
}

.smell-color-4 {
  background-image: url("/img/smell_4.png");
}

.smell-color-5 {
  background-image: url("/img/smell_5.png");
}

.PM25-color-1 {
  background-image: url("/img/PM25_1_legend.png");
}

.PM25-color-2 {
  background-image: url("/img/PM25_2_legend.png");
}

.PM25-color-3 {
  background-image: url("/img/PM25_3_legend.png");
}

.PM25-color-4 {
  background-image: url("/img/PM25_4_legend.png");
}

.PM25-color-5 {
  background-image: url("/img/PM25_5_legend.png");
}

.voc-color-1 {
  background-image: url("/img/voc_1.png");
}

.voc-color-2 {
  background-image: url("/img/voc_2.png");
}

.voc-color-3 {
  background-image: url("/img/voc_3.png");
}

.voc-color-4 {
  background-image: url("/img/voc_4.png");
}

.voc-color-5 {
  background-image: url("/img/voc_5.png");
}

.wind-arrow {
  background-image: url("/img/wind_arrow.png");
}

/* Testing features */

.voc-legend-row {
  display: none;
}

.animation-infobox {
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  border-radius: 2px;
  text-align: left;
  font-size: 11px;
  width: 250px;
  padding: 5px 8px 5px 8px;
  background-color: #ffffff;
}

#report-feed {
  display: none;
}

@media only screen and (max-width: 768px) {
  .gm-ui-hover-effect:after {
    content: '';
    position: absolute;
    top: -18px;
    bottom: -18px;
    left: -18px;
    right: 0px;
  }

  .gm-ui-hover-effect {
    top: 1px !important;
    right: -6px !important;
  }

  .gm-ui-hover-effect img {
    margin: 0px !important;
    width: 18px !important;
    height: 18px !important;
    outline: none !important;
  }

  .gm-style-iw {
    min-width: 250px !important;
  }
}