body {
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}
.wrapper {
  display: flex;
  flex-direction: row;
  height: 100vh;
  width: 100%;
}
.code-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 50%;
}
#editor, .CodeMirror {
  height: 100% !important;
}
.element {
  height: 25%;
  flex-shrink: 0;
}
.element-code {
  height: 75%;
}
.element-errors {
  overflow: auto;
}
.helper-text {
  font-size: 13px;
  color: grey;
}
#settings {
  padding: 5px;
}
#settings input[type=number] {
  width: 100px;
}
.errors {
  color: red;
}
#output {
  box-sizing: border-box;
  height: 100%;
  padding: 0;
}
#output textarea {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.plan-wrapper {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.plan-wrapper > .seating-plan > svg {
  box-sizing: border-box;
  border: 1px solid #999999;
}
.seating-plan {
  height: 75%;
}
.seating-plan svg > g > rect {
  stroke: #009999;
  stroke-width: 2px;
}