.computer {
  border: 0;
  margin: 0;
}
.layout {
  min-height: 650px;
  padding: 0;
  margin: 0;
  border: 1px solid #cccccc;
  background-color: white;
  display: inline-grid;
  grid-template-columns: repeat(12, 50px);
  grid-template-rows: repeat(13, 50px);
  justify-content: start;
  border: 0;
}
.layout input[type="radio"],
.layout input[type="checkbox"] {
  opacity: 0;
}
.layout input[type="radio"] + label::before,
.layout input[type="checkbox"] + label::before {
  box-sizing: content-box;
  content: "";
  position: absolute;
  z-index: 9999;
  width: 90px;
  height: 90px;
}
.layout input[type="radio"]:focus + label::before,
.layout input[type="checkbox"]:focus + label::before {
  outline: #cccc00 solid 1px;
  box-shadow: 0 0px 8px #cccc00;
  width: 98px;
  height: 98px;
}
.layout input[type="radio"]:checked + label::before,
.layout input[type="checkbox"]:checked + label::before {
  background-color: rgba(255, 255, 0, 0.3);
  border: 5px solid #cccc00;
  width: 90px;
  height: 90px;
}
.layout input[type="radio"]:disabled + label::before,
.layout input[type="checkbox"]:disabled + label::before {
  background-color: rgba(175, 175, 175, 0.3);
  border: 5px solid #cccccc;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(100, 100, 100, 0.4) 10px,
    rgba(100, 100, 100, 0.4) 20px
  );
}
.layout input[type="radio"].staff:disabled + label::before,
.layout input[type="checkbox"].staff:disabled + label::before {
  border: 5px solid #9999ff;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(0, 0, 255, 0.4) 10px,
    rgba(0, 0, 255, 0.4) 20px
  );
}
.option {
  position: relative;
  grid-column-end: span 2;
  display: grid;
}
.option label {
  position: absolute;
  display: grid;
  justify-content: space-around;
  grid-template-rows: repeat(3, 33px);
  grid-template-columns: repeat(3, 33px);
}
.layout img {
  z-index: 888;
  position: absolute;
  padding: 0;
  margin: 0;
}
.east img {
  transform: rotate(90deg);
}
.south img {
  transform: rotate(180deg);
}
.west img {
  transform: rotate(270deg);
}
.number {
  z-index: 1000;
  border: 2px solid black;
  background-color: white;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  grid-row-start: 2;
  grid-column-start: 2;
}
.reserved {
  z-index: 1000;
  position: absolute;
  top: 2px;
  left: 2px;
  width: 30px;
  height: 30px;
  background-image: url(../img/warning.svg);
  background-size: cover;
}
.reserved-legend {
  width: 30px;
  height: 30px;
  background-image: url(../img/warning.svg);
  background-size: cover;
}