.headerTitleOn {
  display: inline-block;
  background-color: palegoldenrod;
  color: black;
  padding-top: 3px;
  border-radius: 5px;
  border: 1px solid black;
  font-size: 13px;
  position: relative;
  top: -3px;
  height: 18;
  width: 86;
  text-align: center;
  font-weight: bold;
  transition-duration: 0.4s;
}
.headerTitleOn:hover {
  background-color: grey;
  color: white;
}


.headerTitleOff {
  display: inline-block;
  background-color: lightblue;
  color: black;
  padding-top: 3px;
  border-radius: 5px;
  border: 1px solid black;
  font-size: 13px;
  position: relative;
  top: -3px;
  height: 18;
  width: 86;
  text-align: center;
  font-weight: bold;
  transition-duration: 0.4s;
}


.headerTitleBP {
  display: inline-block;
  background-color: #C7B097;
  border-radius: 5px;
  border: 1px solid black;
  padding: 3px;
  font-size: 13px;
  position: relative;
  top: -3px;
  text-align: center;
  font-weight: bold;
  transition-duration: 0.4s;
}
.headerTitleBP:hover {
  background-color: lightgrey;
}