html, body {
	background-color: #222;
	color: #bdbdbd;
	height: 97vh;
	width: 99vw;
}

.container {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-areas: "left right";
  grid-template-columns: 50% 50%;
  grid-template-rows: 1fr;
}
.container > div {
  border: 1px dashed #888;
}

.left {
  grid-area: left;
}
.right {
  grid-area: right;
}

.legend {
      color: #555;
      padding: 6px 8px;
      font: 12px Arial, Helvetica, sans-serif;
      font-weight: bold;
      background: white;
      background: rgba(255,255,255,0.8);
      box-shadow: 0 0 15px rgba(0,0,0,0.2);
      border-radius: 5px;

    }
.legend ul {
      list-style-type: none;
      padding: 0;
      margin: 0;
      clear: both;
      border-style: solid;
      border-width: 1px;
      border-color: green;
      height: 22px;
    }
.legend li {
      display: inline-block;
      width: 37px;
      height: 100%;
    }
.legend .min {
      float: left;
      padding-bottom: 5px;
    }
.legend .max {
      float: right;
    }

.text {
  text-align: center;
}

.title {
  color: #555;
}

.info, .title {
  padding: 6px 8px;
  font: 14px/16px Arial, Helvetica, sans-serif;
  background: white;
  background: rgba(255,255,255,0.8);
  box-shadow: 0 0 15px rgba(0,0,0,0.2);
  border-radius: 5px;
  line-height: 18px;
}