:root {
  --color-fill: #E7D78F;
  --color-stroke: transparent;
  --color-reserved: red;
  --vh: 100px;
}

#svg-container {
  width: 90%;
  display: block;
  position: relative;
  margin: 0 auto;
  margin-top: 2rem;
}

#svg-container path {
  fill: var(--color-fill);
}

#svg-container g text {
  pointer-events: none;
display: none;
  fill: white;
font-size: 1.5px !important;
    font-family:'Arial Narrow', Arial, sans-serif;
    filter: drop-shadow(0 1px 1px black);
}

#svg-container g.reserved text {
  display: block;
}

.selected {
  --color-fill: #66A343;
  --color-stroke: black;
}

#svg-container g.reserved path {
  cursor: not-allowed;
  fill: var(--color-reserved);
  pointer-events: none;
}

.reserved {
  --color-fill: var(--color-reserved);
  --color-stroke: transparent;
}



svg path {
  transition: stroke .2s ease-in-out;
  cursor: pointer;
}

.home svg path {
cursor: default;
}



.transitioning svg path {
  opacity: .5;
}

#zoomOut {
  display: none;
}

.zoomed #zoomOut {
  display: block;
}

.zoomed #zoomIn {
  display: none;
}

#button-container.hidden {
display: none;
}