.editor {
  font-family: monospace;
  font-size: 1em;
}

#editor-container {
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 90%;
  max-height: 100%;
  background-color: var(--secondary-grey);
}

#editor-gutter {
  height: 100%;
  background-color: var(--secondary-grey);

  border-right: 2px solid var(--secondary-grey-highlight);

  text-align: right;
  width: 2em;
  overflow-y: inherit;
  padding: 2px;
}

.line-number {
  height: 1.5em;
  color: #5a5b5c;
}

#editor-input {
  background-color: transparent;
  height: 100%;
  overflow-x: scroll;

  line-height: 1.5em;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  resize: none;

  color: var(--antiflash-white);

  border: none;
  outline: none;
}

#aside-footer {
    height: 10%;
    background-color: var(--secondary-grey);
    border-top: 1px solid var(--secondary-grey-highlight);
    padding-left: 2em;
    padding-top: 1em;
    display: flex;
    flex-direction: column;
}

#aside-footer > span#online-status[data-online="true"]::after {
  color: var(--contrast-green);
  content: "Online";
}
#aside-footer > span#online-status[data-online="false"]::after {
  color: var(--contrast-red);
  content: "Offline";
}
#aside-footer > span#editor-status {
    color: var(--contrast-red);
}
#aside-footer > span#editor-status::first-letter {
    font-weight: 600;
}

.error-line {
  color: var(--contrast-red);
  font-weight: bold;
}