.sc-calendar {
  border-collapse: collapse;
  width: 100%;
  margin-top: 10px;
  min-width: 300px;
/*   font-family: sans-serif; */
}
.sc-calendar caption {
  font-size: 1.5em;
  margin-bottom: 12px;
  text-align: left;
  font-weight: bold;
}
.sc-calendar th, .sc-calendar td {
  border: 1px solid #ddd;
  width: 14.28%;
/*   height: 50px; */
  text-align: center;
  vertical-align: middle;
  font-size: 14px;
      white-space: nowrap;
    padding: .5em .5em;
}
.sc-calendar td.open {
  background: #c8f7c5;
}
.sc-calendar td.closed {
  background: #f7c5c5;
}

.sc-controls {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
}
.sc-controls button {
  padding: 6px 12px;
  font-size: 14px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}
.sc-controls button:hover {
  background: #f0f0f0;
}

.sc-legend {
/*   text-align: center; */
  margin-bottom: 10px;
  font-size: 14px;
}
.legend-box {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 0 4px;
  vertical-align: middle;
  border: 1px solid #999;
}
.legend-box.open {
  background: #c8f7c5;
}
.legend-box.closed {
  background: #f7c5c5;
}