/* make the CodeMirror theme match the rest of the UI a little more */
.cm-s-dracula.CodeMirror, .cm-s-dracula .CodeMirror-gutters {
    background-color: #282a36 !important;
    color: var(--editorMeta) !important;
    border: none;

}
  .cm-s-dracula .CodeMirror-gutters { color: var(--editorGutterBackground); }
  .cm-s-dracula .CodeMirror-cursor { border-left: solid thin var(--editorSelected); }
  .cm-s-dracula .CodeMirror-linenumber { color: var(--editorLineNumber); }
  .cm-s-dracula .CodeMirror-selected { background: var(--editorSelected); }
  .cm-s-dracula .CodeMirror-line::selection, .cm-s-dracula .CodeMirror-line > span::selection, .cm-s-dracula .CodeMirror-line > span > span::selection { background: var(--editorSelected); }
  .cm-s-dracula .CodeMirror-line::-moz-selection, .cm-s-dracula .CodeMirror-line > span::-moz-selection, .cm-s-dracula .CodeMirror-line > span > span::-moz-selection { background: var(--editorSelected); }
  .cm-s-dracula span.cm-comment { color: var(--editorComment); }
  .cm-s-dracula span.cm-string, .cm-s-dracula span.cm-string-2 { color: var(--editorString); }
  .cm-s-dracula span.cm-number { color: var(--editorNumber); }
  .cm-s-dracula span.cm-variable { color: var(--editorFunctionsAndObject); }
  .cm-s-dracula span.cm-variable-2 { color: var(--editorVariable2); }
  .cm-s-dracula span.cm-def { color: var(--editorFunctionsAndObject); }
  .cm-s-dracula span.cm-operator { color: var(--editorKeyword); }
  .cm-s-dracula span.cm-keyword { color: var(--editorKeyword); }
  .cm-s-dracula span.cm-atom { color: var(--editorNumber); }
  .cm-s-dracula span.cm-meta { color: var(--editorMeta); }
  .cm-s-dracula span.cm-tag { color: var(--editorKeyword); }
  .cm-s-dracula span.cm-attribute { color: var(--editorFunctionsAndObject); }
  .cm-s-dracula span.cm-qualifier { color: var(--editorFunctionsAndObject); }
  .cm-s-dracula span.cm-property { color: var(--editorProperty); }
  .cm-s-dracula span.cm-builtin { color: var(--editorFunctionsAndObject); }
  .cm-s-dracula span.cm-variable-3, .cm-s-dracula span.cm-type { color: var(--editorType); }
  
  .cm-s-dracula .CodeMirror-activeline-background { background: var(--editorSelected); }
  .cm-s-dracula .CodeMirror-matchingbracket { text-decoration: underline; color: var(--editorVariable2) !important; }



.cm-s-dracula.CodeMirror, .cm-s-dracula .CodeMirror-gutters {
    background-color: var(--editorBackgroundColour) !important;
}


.CodeMirror-scrollbar-filler {
    background-color: var(--nodeHover) !important;
}
.CodeMirror-activeline-background {
    opacity: 0;
}
.CodeMirror-focused .CodeMirror-activeline-background {
    opacity: 0.5;
}

.CodeMirror-hints{
    position: absolute;
    z-index: 10;
    overflow: hidden;
    list-style: none;

    margin: 0;
    padding: 2px;

    -webkit-box-shadow: 2px 3px 5px var(--demoThumbnailBackground);
    -moz-box-shadow: 2px 3px 5px var(--demoThumbnailBackground);
    box-shadow: 2px 3px 5px var(--demoThumbnailBackground);
    border-radius: 3px;
    border: 1px solid silver;

    background-color: var(--nodeHover) !important;
    color: var(--primary) !important;
    font-size: 90%;
    font-family: monospace;

    max-height: 20em;
    overflow-y: auto;
    box-sizing: border-box;
    opacity:0.9;
}

.CodeMirror-hint{
    margin: 0;
    padding: 0 4px;
    border-radius: 2px;
    white-space: pre;
    color: var(--primary) !important;
    cursor: pointer;
}

li.CodeMirror-hint-active {
    background: var(--activeTabColour);
    color: var(--primary);
}