.CodeMirror {
  font-family: monospace;
  height: 300px;
  color: #f8f9fa;
  direction: ltr;
  background: #212529;
}

.CodeMirror-lines {
  padding: 4px 0;
}

.CodeMirror pre.CodeMirror-line,
.CodeMirror pre.CodeMirror-line-like {
  padding: 0 4px;
  background: transparent;
}

.CodeMirror-gutter-filler,
.CodeMirror-scrollbar-filler {
  background-color: #212529;
}

.CodeMirror-gutters {
  border-right: 1px solid #343a40;
  background-color: #1d1f21;
  white-space: nowrap;
}

.CodeMirror-linenumber {
  padding: 0 3px 0 5px;
  min-width: 20px;
  text-align: right;
  color: #6c757d;
  white-space: nowrap;
}

.CodeMirror-cursor {
  border-left: 1px solid #f8f9fa;
}

.CodeMirror div.CodeMirror-secondarycursor {
  border-left: 1px solid #adb5bd;
}

.cm-fat-cursor .CodeMirror-cursor {
  width: auto;
  border: 0 !important;
  background: #7e7;
}

.cm-s-default .cm-header       { color: #9cdcfe; }
.cm-s-default .cm-quote        { color: #98c379; }
.cm-s-default .cm-keyword      { color: #c586c0; }
.cm-s-default .cm-atom         { color: #dcdcaa; }
.cm-s-default .cm-number       { color: #b5cea8; }
.cm-s-default .cm-def          { color: #4fc1ff; }
.cm-s-default .cm-variable-2   { color: #9cdcfe; }
.cm-s-default .cm-variable-3,
.cm-s-default .cm-type         { color: #4ec9b0; }
.cm-s-default .cm-comment      { color: #6a9955; }
.cm-s-default .cm-string       { color: #ce9178; }
.cm-s-default .cm-string-2     { color: #d16969; }
.cm-s-default .cm-meta         { color: #d4d4d4; }
.cm-s-default .cm-qualifier    { color: #d4d4d4; }
.cm-s-default .cm-builtin      { color: #c586c0; }
.cm-s-default .cm-bracket      { color: #d4d4d4; }
.cm-s-default .cm-tag          { color: #569cd6; }
.cm-s-default .cm-attribute    { color: #9cdcfe; }
.cm-s-default .cm-hr           { color: #808080; }
.cm-s-default .cm-link         { color: #3794ff; }
.cm-s-default .cm-error        { color: #f44747; background-color: #1e1e1e; }

.CodeMirror-activeline-background {
  background: #2c313c;
}

.CodeMirror-selected {
  background: #495057;
}

.CodeMirror-focused .CodeMirror-selected {
  background: #3e4451;
}

.CodeMirror-line::selection,
.CodeMirror-line > span::selection,
.CodeMirror-line > span > span::selection {
  background: #3e4451;
}

.CodeMirror-line::-moz-selection,
.CodeMirror-line > span::-moz-selection,
.CodeMirror-line > span > span::-moz-selection {
  background: #3e4451;
}

.cm-searching {
  background-color: rgba(255, 255, 0, 0.4);
}

div.CodeMirror span.CodeMirror-matchingbracket {
  color: #0f0;
}

div.CodeMirror span.CodeMirror-nonmatchingbracket {
  color: #f00;
}