#worldRoot {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: rows;
  justify-content: space-between;
  align-content: stretch; }
  #worldRoot #mapRoot, #worldRoot #settingsRoot {
    flex-shrink: 1;
    flex-grow: 1; }
  #worldRoot #editorControls {
    flex-shrink: 0;
    flex-grow: 0; }
  #worldRoot #editor {
    flex-shrink: 0;
    flex-grow: 0;
    width: 14em;
    padding: 0.25em;
    z-index: 1;
    background-color: #fff; }
    #worldRoot #editor.hidden {
      width: 0; }
    #worldRoot #editor h1 {
      margin-top: 0;
      margin-bottom: 0.5em; }

#editorControls {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-content: stretch; }
  #editorControls button {
    z-index: 2;
    font-size: 1.25em;
    background-color: lightgray;
    border: solid #000 1px;
    border-top-left-radius: 0.5em;
    border-bottom-left-radius: 0.5em;
    padding: 0.25em;
    transition: background-color 0.25s, border-right-color 0.25s;
    cursor: pointer; }
    #editorControls button svg {
      fill: none;
      stroke: #000;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round; }
    #editorControls button.active {
      background-color: #fff;
      border-right-color: #fff;
      flex-shrink: 0; }
    #editorControls button:hover svg {
      stroke: #0af; }
    #editorControls button:focus {
      outline: none; }
      #editorControls button:focus svg {
        stroke: #f60; }
  #editorControls .filler {
    flex-grow: 1;
    flex-shrink: 1;
    border-right: solid black 1px; }

#mapRoot {
  overflow: hidden; }
  #mapRoot canvas {
    pointer-events: none;
    position: absolute; }
  #mapRoot .scrollPane {
    overflow: scroll;
    position: absolute;
    touch-action: none; }

form div[role="group"] {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-content: flex-start; }
  form div[role="group"].vertical {
    flex-direction: column; }
    form div[role="group"].vertical > p {
      margin-bottom: 0; }
  form div[role="group"] > label {
    min-width: 4em; }
  form div[role="group"]:not(:first-child) {
    margin-top: 1em; }
  form div[role="group"]:not(.vertical) > input {
    flex-shrink: 1;
    width: 10em;
    text-align: center; }

form.genField .fieldLabel {
  min-width: 8em; }

form.genField input {
  flex-grow: 1; }

#editor {
  display: flex;
  flex-direction: column; }
  #editor > form {
    flex-grow: 1;
    flex-shrink: 1;
    overflow-y: auto; }
  #editor .resizeAnchor {
    height: 8em;
    width: 8em;
    display: flex;
    flex-direction: column; }
    #editor .resizeAnchor button {
      margin: 0.1em;
      padding: 0;
      flex-grow: 1;
      flex-basis: 0;
      font-size: 1em; }
    #editor .resizeAnchor > div {
      display: flex;
      flex-direction: row;
      flex-grow: 1;
      flex-basis: 0; }

.palleteList {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  align-content: flex-start; }
  .palleteList.horizontal {
    flex-direction: row;
    justify-content: space-around; }
  .palleteList > * {
    margin: 0.2em;
    padding: 0.35em 0.5em;
    border: solid black 1px;
    color: black;
    border-radius: 0.2em;
    text-shadow: 0 0 5px white, 0 0 5px white, 0 0 5px white, 0 0 2px white, 0 0 2px white;
    cursor: pointer; }
    .palleteList > *.selected {
      border-color: white;
      color: white;
      text-shadow: 0 0 5px black, 0 0 5px black, 0 0 5px black, 0 0 2px black, 0 0 2px black;
      outline: solid black 2px; }

#undoRedo {
  align-self: center;
  display: flex;
  flex-shrink: 0; }
  #undoRedo button {
    margin: 0.25em;
    font-size: 1.5em;
    background-color: lightgray;
    border: solid #000 1px;
    padding: 0.25em;
    transition: background-color 0.25s, border-right-color 0.25s;
    cursor: pointer; }
    #undoRedo button.roundLeft {
      border-top-left-radius: 1em;
      border-bottom-left-radius: 1em; }
    #undoRedo button.roundRight {
      border-top-right-radius: 1em;
      border-bottom-right-radius: 1em; }
    #undoRedo button svg {
      fill: none;
      stroke: #000;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round; }
    #undoRedo button:hover svg {
      stroke: #0af; }
    #undoRedo button:focus {
      outline: none; }
      #undoRedo button:focus svg {
        stroke: #f60; }
    #undoRedo button.disabled {
      cursor: not-allowed; }
      #undoRedo button.disabled svg {
        stroke: grey !important; }
    #undoRedo button.spinner > svg {
      -webkit-animation: spin 3s linear infinite;
      -moz-animation: spin 3s linear infinite;
      animation: spin 3s linear infinite; }

#settingsRoot {
  margin: 1em;
  display: flex;
  flex-direction: row;
  justify-content: space-around; }
  #settingsRoot > * {
    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 1;
    overflow-y: scroll; }
    #settingsRoot > *:not(:first-child) {
      margin-left: 1em;
      padding-left: 1em;
      border-left: solid gray 1px; }

@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg); } }

@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg); } }

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

#setupDownload canvas {
  display: none; }