body {
  margin: 0; 
  background-color: #223;
}
x-tab-container, x-tab, x-panel-container, x-panel {
  display: block;
  position: relative;
}
x-slider {
  overflow-y: hidden;
}
x-slider, x-slider-before, x-slider-thumb {
  display: inline-block;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
}
x-slider-thumb, x-slider-before {
  position: absolute;
}
x-slider-before {
  transition: height .1s;
  -webkit-transition: height .1s;
}
x-slider-thumb {
  transition: margin-top .1s;
  -webkit-transition: margin-top .1s;
}

.central {
  margin-left: calc( 50% - 400px );
  width: 800px;
}
.header {
  text-align: center; 
}
.header-heading {
  font: 80px Verdana;
  color: #aaf;
}
.logo-container {
  display: flex;
  display: -webkit-flex;
}
.logo {
  flex: 1;
  -webkit-flex: 1;
}
.logo-image {
  width: 120px;
  mix-blend-mode: multiply;
}

.main {
  margin-top: 90px;
}
.top-tabs {
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
}
x-tab-container {
  display: flex;
  display: -webkit-flex;
}
.query-top-tab, .query-top-tab-svg,
.view-top-tab, .view-top-tab-svg,
.query-tab, .query-tab-svg {
  width: 80px;
  height: 80px;
}

.query-top-tab-svg,
.view-top-tab-svg,
.query-location-tab-svg,
.query-precipitation-panel-indicator-svg {

  fill: none;
  stroke: #dde;
  stroke-width: 3;
  background-color: transparent;

  transition: background-color .5s, stroke .5s, stroke-width .5s;
}
x-tab:not( [active] ) > .query-top-tab-svg:hover,
x-tab:not( [active] ) > .view-top-tab-svg:hover {
  cursor: pointer;
  background-color: #335;
  stroke-width: 2;
}
x-tab:not( [active]) > .query-location-tab-svg:hover {
  cursor: pointer;
  background-color: #88a;
  stroke-width: 2;
}
[active] > .query-top-tab-svg,
[active] > .view-top-tab-svg,
.query-precipitation-panel-indicator-svg { 
  background-color: #dde;
  stroke: #223;
  stroke-width: 2;
}
[active] > .query-location-tab-svg {
  background-color: #dde;
  stroke: #336;
  stroke-width: 2;
}

.top-panels {
  width: 100%;
  min-height: 700px;
  background-color: #dde;
  display: flex;
  display: -webkit-flex;
}
x-panel-container {
  flex: 1;
  -webkit-flex: 1;
}
.top-panel-container {
  
  padding: 40px;
  width: 320px;
}

x-panel {
  position: absolute;
  opacity: 0;
  z-index: 0;
  transition: opacity .2s;
  -webkit-transition: opacity .2s;
}
x-panel[active] {
  opacity: 1;
  z-index: 1;
}
.top-panel-heading {
  margin: 0;
  font-size: 40px; 
}

.query-tab-system-container {
  margin-top: 30px;
  padding: 15px 15px 0px 15px;
  background-color: #336;
}
.query-panel-container {
  background-color: #dde;
  padding: 10px;
  min-height: 200px;
}
.precipitation-panel-header, .precipitation-panel-table {
  width: 200px;
}
.precipitation-panel-header {
  display: flex;
  display: -webkit-flex;
}
.precipitation-panel-header-column {
  flex: 1;
  -webkit-flex: 1;
  text-align: center;
}
.precipitation-panel-table {
  display: flex;
  display: -webkit-flex;

  margin-top: 20px;
}
.precipitation-panel-column {
  flex: 1;
  -webkit-flex: 1;
  height: 300px;
}
.precipitation-indicators {

  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  justify-content: space-between;
  -webkit-justify-content: space-between;
}
.precipitation-slider > x-slider-before {
  width: 20px;
  background-image: linear-gradient( 180deg, #999 0px, #9bd 300px );
  box-shadow: 0 0 2px #9bd;
  margin-left: 40px;
}
.precipitation-slider > x-slider-thumb {
  width: 30px;
  background-color: #ddd;
  height: 30px;
  margin-left: 35px;
  box-shadow: 0 0 2px #69a; 
  text-align: center;
  line-height: 30px;
}
.view-container {
  width: 320px;
  overflow-wrap: break-word;
}
.list-view-container {
  overflow-y: scroll;
  /*display: flex;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;*/
  height: 500px;
  margin-top: 10px;
}
.view-list-item {
  width: 300px;
  display: flex;
  display: -webkit-flex;
}
.view-list-item:nth-child( 2n - 1 ){

  background-color: #bbd;
}
.view-list-item-col1 {
  width: 50px;
}
.view-list-item-img {
  margin-left: 5px;
  margin-top: 5px;
  width: 40px;
}
.view-list-item-col2 {
  width: 230px;
  padding: 0 10px 0 10px; 
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
}
.view-list-item-row {
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
}
.view-list-item-date {
  font-size: 12px;
}
.view-list-item-type, .view-list-item-prec {
  text-align: right;
}
.view-list-item-type {
  font-size: 10px;
}
.map-view-container {

  width: 320px;
  height: 500px;
}
.footer {
  margin: 70px 0 0 0;
  text-align: center;
  height: 25px;
  line-height: 25px;
  background-color: #222;
  font: 15px Verdana;
  color: #aaa;
}
.footer-link {
  color: #eee;
  text-decoration: none;
}

.input {
  background-color: transparent;
  border: none;
  border-bottom: 2px solid #88f;
}
.input::-webkit-inner-spin-button,
.input::-webkit-outer-spin-button,
.input::-moz-inner-spin-button,
.input::-moz-outer-spin-button,
.input::inner-spin-button,
.input::outer-spin-button {
  
  display: none;
}
.input--date-day, .input--date-month {
  width: 40px;
}