@import "~codemirror/lib/codemirror.css";

.cm-s-wsr.CodeMirror {
  height: 100%;
  background-color: #f8fafb;
  color:#2e383c;
  line-height:1.2;
  z-index: 0;
}

.cm-s-wsr .cm-comment { color:#898ea4; }

.cm-s-wsr,
.cm-s-wsr .cm-keyword,
.cm-s-wsr .cm-attribute ~ .cm-string {
  color:#ac9739;
}

.cm-s-wsr .cm-atom,
.cm-s-wsr .cm-number,
.cm-s-wsr .cm-attribute,
.cm-s-wsr .cm-meta {
  color:#c76b29;
}

.cm-s-wsr .cm-variable ~ .cm-property,
.cm-s-wsr .cm-variable-2 ~ .cm-property,
.cm-s-wsr .cm-tag.cm-bracket + .cm-variable,
.cm-s-wsr .cm-tag.cm-bracket + .cm-variable + .cm-property {
  color:#2e383c;
}

.cm-s-wsr .cm-node,
.cm-s-wsr .cm-property,
.cm-s-wsr .cm-attribute ~ .cm-variable,
.cm-s-wsr .cm-attribute ~ .cm-property,
.cm-s-wsr .cm-tag {
  color:#3d8fd1;
}

.cm-s-wsr .cm-string,
.cm-s-wsr .cm-string-2 {
  color:#22a2c9;
}

.cm-s-wsr .cm-tag.cm-bracket {
  color: #5e6687;
}

.cm-s-wsr .CodeMirror-gutters {
  border:none;
  border-right:10px solid transparent;
  background-color:transparent;
}

.cm-s-wsr .CodeMirror-linenumber {
  padding:0;
  color:#e0e2e5;
}

.CodeMirror-hints {
  position: absolute;
  z-index: 1000;
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 0;
  box-shadow: 0 2px 8px rgba(18, 21, 26, 0.3);
  border-radius: 4px;
  background-color: #fff;
  font-size: 90%;
  line-height: 150%;
  font-family: Source Code Pro, Firacode, Hasklig, Menlo, monospace;
  max-height: 20em;
  overflow-y: auto;
}

.CodeMirror-hint {
  margin: 0;
  padding: 4px 8px;
  border-radius: 2px;
  white-space: pre;
  color: #000;
  cursor: pointer;
}

li.CodeMirror-hint-active {
  background-color: #0088ff;
  color: #fff;
}