body {
  font-family: Helvetica, sans-serif;
  margin: 0px;
  padding: 0px;
}

body, html {
  height: 100%;
  width: 100%;
}

a {
  color: #0376d9;
  text-decoration: none;
}

#container {
  flex-direction: column;
  height: 100%;
}

#tabs {
  margin-top: 10px;
  display:flex;
}

#charts {
  flex: 1;
  height: 100%;
}

#chart {
  height: 95%;
}

.tab {
  margin-left: 10px;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

.tab a {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 8px 8px;
    transition: 0.3s;
}

.tab a:hover {
    background-color: #ddd;
}

.active {
    background-color: #bbb;
}

.statslegend {
    width: 60%;
    margin: 20px auto 20px auto;
    border: 1px dashed black;
    border-radius: 7px
}

.statslegendtitle {
  padding-top: 10px;
  padding-bottom: 20px;
  font: .8em "Helvetica Neue", Helvetica, sans-serif;
  text-align: center;
}

.statslegendline {
  margin-bottom: 12px;
  font: .8em "Helvetica Neue", Helvetica, sans-serif;
  padding: 0px 10px 0px 10px;
}

.aboutbox {
  padding-top: 15px;
  padding-bottom: 100px;
  margin: 10px auto 10px auto;
  width: 60%;
}

.aboutboxheader {
  border-radius: 7px 7px 0 0;
  background-color: #30a724;
  color: #fff;
  font-weight: normal;
  height: 2em;
  position: relative;
}

.aboutboxtitle {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font: 100 1em/2em Helvetica, sans-serif;
}

.aboutboxtitle img {
  margin-right: 5px;
}

.aboutboxbody {
  padding: 10px ;
  border-right: 1px dashed black;
  border-bottom: 1px dashed black;
  border-left: 1px dashed black;
  border-radius: 0px 0px 7px 7px;
}

.aboutline {
  font: 1em Helvetica, sans-serif;
  color: #000;
  padding-bottom: 16px;
}

.maintbox {
  padding-top: 50px;
  padding-bottom: 100px;
  margin: 10px auto 10px auto;
  width: 60%;
}

.maintboxheader {
  border-radius: 7px 7px 0 0;
  background-color: #ffb400;
  color: #fff;
  font-weight: normal;
  height: 2em;
  position: relative;
}

.maintboxtitle {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font: 100 1em/2em Helvetica, sans-serif;
}

.maintboxbody {
  padding: 10px ;
  border-right: 1px dashed black;
  border-bottom: 1px dashed black;
  border-left: 1px dashed black;
  border-radius: 0px 0px 7px 7px;
}

.maintboxline {
  font: 1em Helvetica, sans-serif;
  color: #000;
  padding-top: 16px;
  padding-bottom: 16px;
  text-align: center;
}