.axis text {
  font-size: 1.2rem;
  fill: #333;
}

.axis .label text {
  text-anchor: end;
  font-size: 1rem;
}

#key, #key .entry {
  display: flex;
  flex-direction: row;
}

#key {
  font-size: 0.8rem;
  font-family: sans-serif;
  justify-content: space-around; 
}

#key .entry .color {
  height: 14px;
  width: 14px;
  margin-right: 3px;
}

#tooltip {
  background-color: #f7f7f7;
  padding: 3px 12px;
  font-size: 1rem;
  font-family: sans-serif;
  border: 1px solid #bbbbbb;
  border-radius: 5px;
  box-shadow: 1px 1px 4px #bbbbbb;
}

#tooltip .body .status {
  display: flex;
  flex-direction: row;
}

#tooltip .body .status .color {
  height: 10px;
  width: 10px;
  margin: auto 3px auto 0;
}

#tooltip p {
  font-weight: normal;
  font-family: monospace;
  margin: 5px 0;
}

#tooltip p.header {
  margin-bottom: 10px;
}

#tooltip p.sub-header {
  border-bottom: 1px solid;
  font-weight: bold;
}

#tooltip p.body { 
  margin-top: -3px;
}

/* tablet */
@media (min-width: 768px) {
  #key, .axis text {
    font-size: 1rem;
  }
  .axis .label text {
    font-size: 0.9rem;
  }
  #tooltip {
    font-size: 1.2rem;
  }
  #key .entry .color {
    height: 16px;
    width: 16px;
    margin-right: 5px;
  }
} 

/* large desktop */
@media (min-width: 1200px) {
  #key {
    font-size: 1.2rem;
  }
  #tooltip {
    font-size: 1.4rem;
  }
  .axis .label text {
    font-size: 0.7rem;
  }
  #key .entry .color {
    height: 21px;
    width: 21px;
    margin-right: 8px;
  }
}