* {
  font-family: sans-serif;
  box-sizing: border-box;
  user-select: none;
}

body {
  margin-bottom: 6em;
}

div {
  text-align: center;
}

#visualization,
#main_info {
  display: none;
}

#weather_icon {
  height: 128px;
  width: 128px;
}

#temp_div {
  color: #999;
  font-size: 2em;
}

#rain_div {
  color: #2885c7;
}

#accuracy {
  font-size: .75em;
  padding: .2em 1em;
  display: inline-block;
  color: #333;
}

#accuracy.excellent {
  background-color: #39c121;
}

#accuracy.good {
  background-color: #7bc927;
}

#accuracy.adaquate {
  background-color: #e8e648;
}

#accuracy.poor {
  background-color: #efb338;
}

#accuracy.awful {
  background-color: #e82e2e;
}

#accuracy.updating {
  background-color: #ddd;
}

.offline,
#stale_stats_msg,
#stale_status_msg,
#loading,
#data_error {
  margin: 3em auto;
  font-size: 1.5em;
  color: #009879;
}

#stale_stats_msg,
#stale_status_msg {
  font-size: 1em;
}

#data_update_time {
  color: #666;
  font-size: .8em;
}

.units {
  color: #666;
  padding-left: .25em;
}

/* table */

table {
  max-width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin: 2em auto;
  font-size: 0.9em;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

thead tr {
  background-color: #009879;
  color: #fff;
  text-align: left;
}

th,
td {
  padding: .5em 1em;
  text-align: left;
}

th span.units {
  color: #ddd;
  display: block;
  font-size: .8em;
  font-weight: 400;
  padding-left: 1em;
}

tbody tr {
  border-bottom: 1px solid #ddd;
}

tbody tr:nth-of-type(even) {
  background-color: #f3f3f3;
}

tbody tr:last-of-type {
  border-bottom: 2px solid #009879;
}

.int,
.float,
.seconds {
  text-align: right;
}

menu {
  max-width: 500px;
  margin: 1em auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0;
}

li {
  background-color: #999;
  color: #fff;
  flex-grow: 1;
  list-style: none;
  padding: .5em 1em;
  margin: .2em;
  max-width: 8em;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}

li:hover {
  background-color: #888;
}

li.selected {
  background-color: #009879;
}

canvas {
  margin-top: 1em;
}

#scroll_top {
  color: #fff;
  background-color: #009879;
  border: 2px solid #fff;
  position: fixed;
  width: 3em;
  height: 3em;
  border-radius: 1.5em;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
  bottom: 2em;
  right: 2em;
  display: none;
}

#scroll_top div {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

#scroll_top img {
  height: 1.5em;
  width: 1.5em;
  color: #fff;
}