div.hall-layout {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
}

div.hall-layout input[type=file]{
  display: none;
}

div.hall-layout .drawing-area {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 80%;
  max-height: 100%;
  max-width: 100%;
}

div.hall-layout .drawing-area .canvas {
  border: 2px solid var(--color-onsurface-300);
  aspect-ratio: 16/9 auto;
  max-height: 100%;
  max-width: 100%;
}

div.hall-layout .drawing-area .canvas canvas {
  max-height: 99%;
  max-width: 99%;
}

div.hall-layout .controls {
  background: white;
  padding: 5px;
  padding-left: 15px;
  display: flex;
  flex-direction: column;
  width: 250px;
  min-height: 575px;
}

div.hall-layout .controls .group {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

div.hall-layout .controls .group.line {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

div.hall-layout .controls .group:not(.line) label,
div.hall-layout .controls .group input,
div.hall-layout .controls .group select,
div.hall-layout .controls .group textarea,
div.hall-layout .controls .group button {
  margin-top: 5px;
  margin-bottom: 5px;
  width: 100%;
}

div.hall-layout .controls .group input[type=color],
div.hall-layout .controls .group input[type=checkbox] {
  max-width: 50px;
}

div.hall-layout .controls .mode:not(.mode-visible),
div.hall-layout .controls .scenario:not(.scenario-visible),
div.hall-layout .controls .shape:not(.shape-visible) {
  display: none !important;
}

div.hall-layout .controls .button-group {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
}

div.hall-layout .controls .bottom-buttons,
div.hall-layout .controls .legend {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin: 5px;
  margin-top: auto;
  width: 100%;
}