html {
  height: 100%;
}

body {
  color: #000;
  min-height: 100%;
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  transition: background-color .5s, color .5s;
}

.section-button {
  width: 6vw;
  height: 8vh;
  color: #000 !important;
  background-color: #e0ebfd !important;
}

.section-button:hover, .section-button:active {
  background-color: #b2c5fd !important;
}

.rack {
  width: 100%;
  height: "5rem";
  color: #fff;
  border-width: 2px;
  border-color: #000;
  border-radius: 0;
  font-size: 20px;
  font-weight: bold;
}

.rack-temporary {
  background-color: #f0b90b !important;
}

.rack-temporary:hover {
  color: #fff !important;
  background-color: #b38a05 !important;
  border-color: #000 !important;
}

.rack-available {
  background-color: #26d3a6 !important;
}

.rack-unavailable {
  background-color: #d32526 !important;
}

.rack-available:hover {
  color: #fff !important;
  background-color: #1fb893 !important;
  border-color: #000 !important;
}

.rack-unavailable:hover {
  color: #fff !important;
  background-color: #b91f21 !important;
  border-color: #000 !important;
}

.rack-temporary:active {
  color: #fff !important;
  background-color: #b38a05 !important;
  border-color: #000 !important;
}

.rack-available:active {
  color: #fff !important;
  background-color: #1fb893 !important;
  border-color: #000 !important;
}

.rack-unavailable:active {
  color: #fff !important;
  background-color: #b91f21 !important;
  border-color: #000 !important;
}

.section-button {
  width: 6vw;
  height: 8vh;
  color: #000 !important;
  background-color: #e0ebfd !important;
}

.section-button:hover, .section-button:active {
  background-color: #b2c5fd !important;
}

.rack {
  color: #fff;
  border-width: 2px;
  border-color: #000;
  border-radius: 0;
  width: 100%;
  height: 8rem;
  font-size: 20px;
  font-weight: bold;
}

.rack-temporary {
  background-color: #f0b90b !important;
}

.rack-available {
  background-color: #26d3a6 !important;
}

.rack-unavailable {
  background-color: #d32526 !important;
}

.rack-temporary:hover {
  color: #fff !important;
  background-color: #b38a05 !important;
  border-color: #000 !important;
}

.rack-available:hover {
  color: #fff !important;
  background-color: #1fb893 !important;
  border-color: #000 !important;
}

.rack-unavailable:hover {
  color: #fff !important;
  background-color: #b91f21 !important;
  border-color: #000 !important;
}

.rack-temporary:active {
  color: #fff !important;
  background-color: #b38a05 !important;
  border-color: #000 !important;
}

.rack-available:active {
  color: #fff !important;
  background-color: #1fb893 !important;
  border-color: #000 !important;
}

.rack-unavailable:active {
  color: #fff !important;
  background-color: #b91f21 !important;
  border-color: #000 !important;
}