.live-availability {
  margin: 22px 0;
  padding: 18px;
  background: #fff;
  border: 1px solid #d7e0de;
}

.availability-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  font-family: Arial, Helvetica, sans-serif;
}

.availability-heading strong {
  font-size: 1rem;
}

.availability-controls {
  display: flex;
  gap: 6px;
}

.availability-controls button {
  width: 36px;
  height: 36px;
  border: 1px solid #b9c9c7;
  background: #f4f7f5;
  color: #173443;
  cursor: pointer;
  font: 700 1rem Arial, Helvetica, sans-serif;
}

.availability-controls button:disabled {
  opacity: .4;
  cursor: default;
}

.availability-status {
  margin: 0 0 10px;
  color: #536a74;
  font-size: .84rem;
}

.availability-month-title {
  margin: 0 0 10px;
  text-align: center;
  font: 700 1rem Arial, Helvetica, sans-serif;
}

.availability-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  font-family: Arial, Helvetica, sans-serif;
}

.availability-weekday,
.availability-day {
  display: grid;
  place-items: center;
  min-height: 32px;
  font-size: .78rem;
}

.availability-weekday {
  min-height: 24px;
  color: #536a74;
  font-weight: 700;
}

.availability-day {
  background: #edf4f2;
  color: #173443;
}

.availability-day.unavailable {
  background: #e8c9b6;
  color: #6b321d;
  text-decoration: line-through;
}

.availability-day.past {
  opacity: .42;
}

.availability-day.empty {
  background: transparent;
}

.availability-key {
  display: flex;
  gap: 16px;
  margin-top: 12px;
  color: #536a74;
  font: .78rem Arial, Helvetica, sans-serif;
}

.availability-key span::before {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 6px;
  vertical-align: -1px;
  background: #edf4f2;
}

.availability-key .key-unavailable::before {
  background: #e8c9b6;
}