.cm-hl0, .hl0 { font-weight: bold; }
.cm-hl1, .hl1 { color: #fb464c; font-weight: bold; }
.cm-hl2, .hl2 { color: #027aff; font-weight: bold; }
.cm-hl3, .hl3 { color: #44cf6e; font-weight: bold; }
.cm-hl4, .hl4 { color: #e0de71; font-weight: bold; }
.cm-hl5, .hl5 { color: #fa99cd; font-weight: bold; }
.cm-hl6, .hl6 { color: #e9973f; font-weight: bold; }
.cm-hl7, .hl7 { color: #b45248; font-weight: bold; }
.cm-hl8, .hl8 { color: #8cdaec; font-weight: bold; }
.cm-hl9, .hl9 { color: #9bddb1; font-weight: bold; }

.CodeMirror {
  border: 1px solid var(--table-border);
  border-radius: 5px;
  padding: 0.5rem;
}

/*pre {
  color: var(--fg-color);
  background: var(--bg-color);
  border: 1px solid var(--table-border);
  padding: 4px;
}
*/

.guide-container code {
  color: var(--fg-color);
  background: var(--bg-color);
  border: 1px solid var(--table-border);
  border-radius: 5px;
  padding: 1px 2px;
  font-family: monospace;
}

.CodeMirror-gutters {
  border-right: 1px solid var(--table-border);
  background-color: var(--bg-color);
  white-space: nowrap;
}

.CodeMirror-cursor {
  border-left: 1px solid var(--fg-color);
  border-right: none;
  width: 0;
}

.CodeMirror-selected { background: var(--link-color); }

.gloss-cell {
  display: table-cell;
  padding-bottom: 0.2em;
  padding-right: 1em;
  text-wrap: nowrap;
}

.gloss-row {
  display: table-row;
}


#transcription-result ol {
  counter-reset: list;
  list-style: none;
}

#transcription-result ol li:before {
  content: "(" counter(list) ") ";
  counter-increment: list;
}