html {
  height: 100%;
}

body {
  height: 100%;
}

.chartContainer {
  height: 60%;
  width: 90%;
  font-family: sans-serif;
  display: flex;
  flex-wrap: wrap;
}

.chartTitle {
  text-align: center;
  width: 100%;
  padding: 20px 0;
  border: 0;
}

.chartLegend {
  width: 100%;
  height: 10%;
  text-align: center;
}

.legendKey {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin: 0 10px;
}

input:focus {
  outline: none;
}

.yAxisTitle {
  width: 5%;
  writing-mode: tb-rl;
  transform: rotate(-180deg);
  text-align: center;
  font-size: 1.5rem;
  padding: 0 2.5%;
  padding-left: 0;
}

.yAxis {
  width: 5%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
}

.chartGrid {
  width: 75%;
  height: 80%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  border-bottom: 1px solid black;
  border-left: 1px solid black;
  background: repeating-linear-gradient(to bottom, #aaa 0, #aaa 1px, transparent 1px, transparent 20%);
}

.bar {
  align-self: flex-end;
  flex-direction: column-reverse;
  margin: 0 5%;
  text-align: center;
  position: relative;
  display: flex;
  justify-content: flex-start;
}

.bar:hover {
  opacity: 0.7;
}

.innerBar {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.emptyBox {
  width: 12.5%;
}

.xAxis {
  width: 75%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 10px 0;
}

.xAxisLabel {
  flex-wrap: wrap;
  text-align: center;
  margin: 0 5%;
}

.xAxisTitle {
  width: 100%;
  text-align: center;
  font-size: 1.5rem;
  margin-top: 1%;
}