#editorDiv {
  display: flex;
}

#editorInput {
  flex: 1;
  /* Prevent mobile input zoom by setting the font size large enough (16px+) */
  font-size: 16px;
}

#editorTextArea {
  flex: 1;
  /* Prevent mobile input zoom by setting the font size large enough (16px+) */
  font-size: 16px;
}

#attachmentInput {
  display: none;
}

#advancedEditorDiv input {
  /* Prevent mobile input zoom by setting the font size large enough (16px+) */
  font-size: 16px;
}

#advancedEditorDiv select {
  /* Prevent mobile input zoom by setting the font size large enough (16px+) */
  font-size: 16px;
}

#itemsDiv img {
  max-height: 100%;
  max-width: 100%;
}

#itemsDiv details.odd {
  background: silver;
}

#itemsDiv summary:hover {
  background: azure;
}

#exportA {
  display: none;
}

#importInput {
  display: none;
}

@media only screen and (orientation: landscape) {
  #itemsDiv summary {
    display: flex;
  }
  
  .itemSpan {
    flex: 1;
  }
}


@media only screen and (orientation: portrait) {
  .itemSpan {
    display: block;
    /* TODO: Get rid of this and instead find out how to hide the arrow, then use `details[open] summary` for own arrow */
    height: 0;
    padding: 0 0 0 1em;
    position: relative;
    top: -1em;
  }

  #hintDiv {
    display: none;
  }
}