body, html {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

.AppView {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
}

.AppView > * {
  width: 0;
  flex-grow: 1;
}
.AppView > *:not(:last-child) {
  border-right: 1px solid #DDD;
}

.WeatherPanel {
  display: flex;
  flex-direction: column;
}

.WeatherWheel {
  height: 0;
  flex-grow: 1;
}

.WeatherWheel svg {
  width: 100%;
  height: 100%;
}

.WeatherWheel .bar {
  opacity: 0.8;
}
.WeatherWheel .bar:hover {
  opacity: 1;
}
.WeatherWheel .temp_bar {
  stroke-width: 0.1;
  stroke: white;
}
.WeatherWheel .prec_bar {
  fill: steelblue;
}
.WeatherWheel .cloud_bar {
  fill: #AAA;
}
.WeatherWheel .wind_bar {
  stroke-width: 0.4;
  opacity: 0.4;
  fill: none;
}

.WeatherWheel .ref_line {
  fill: none;
  stroke-width: 0.3;
  stroke: #555;
  vector-effect: non-scaling-stroke;
  opacity: 0.5;
}
.WeatherWheel .ref_line.emph {
  stroke-width: 0.6;
}
.WeatherWheel .prec_line {
  stroke: steelblue;
}
.WeatherWheel .wind_line {
  stroke: teal;
  stroke-dasharray: 3 3;
}

.QueryView {
  padding: 4px;
  width: 100%;
  box-sizing: border-box;
}
.QueryView select {
  padding: 4px;
  width: 100%;
  font-size: 16px;
}
.QueryView select:first-child {
  margin-bottom: 4px;
}