.CodeMirror.cm-s-default {
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size: 12.3px;
    background-color: #111111;
    color: #CCCCCC !important;
    height: 410px;
}
.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background-color: #333388 !important }
.cp-main .CodeMirror.cm-s-default {
    background-color: #242527;
}
.CodeMirror.cm-s-default .CodeMirror-code div { line-height: 1.4em; }
.CodeMirror.cm-s-default span.cm-meta { color: #BBB529; }
.CodeMirror.cm-s-default span.cm-number { color: #6897BB; }
.CodeMirror.cm-s-default span.cm-keyword { color: #CC7832; }
.CodeMirror.cm-s-default span.cm-def { color: #A9B7C6; }
.CodeMirror.cm-s-default span.cm-variable { color: #A9B7C6; }
.CodeMirror.cm-s-default span.cm-variable-2 { color: #A9B7C6; }
.CodeMirror.cm-s-default span.cm-variable-3 { color: #9876AA; }
.CodeMirror.cm-s-default span.cm-type { color: #AABBCC; }
.CodeMirror.cm-s-default span.cm-property { color: #FFC66D; }
.CodeMirror.cm-s-default span.cm-operator { color: #A9B7C6; }
.CodeMirror.cm-s-default span.cm-string { color: #6A8759; }
.CodeMirror.cm-s-default span.cm-string-2 { color: #6A8759; }
.CodeMirror.cm-s-default span.cm-comment { color: #61A151; }
.CodeMirror.cm-s-default span.cm-link { color: #4e85b8; }
.CodeMirror.cm-s-default span.cm-atom { color: #CC7832; }
.CodeMirror.cm-s-default span.cm-error { color: #BC3F3C; }
.CodeMirror.cm-s-default span.cm-tag { color: #629755; }
.CodeMirror.cm-s-default span.cm-attribute { color: #6897bb; }
.CodeMirror.cm-s-default span.cm-qualifier { color: #6A8759; }
.CodeMirror.cm-s-default span.cm-bracket { color: #A9B7C6; }
.CodeMirror.cm-s-default span.cm-builtin { color: #FF9E59; }
.CodeMirror.cm-s-default span.cm-special { color: #FF9E59; }
.CodeMirror.cm-s-default span.cm-matchhighlight { color: #FFFFFF; background-color: rgba(50, 89, 48, .7); font-weight: normal;}
.CodeMirror.cm-s-default span.cm-searching { color: #FFFFFF; background-color: rgba(61, 115, 59, .7); font-weight: normal;}

.CodeMirror.cm-s-default .CodeMirror-cursor { border-left: 1px solid #A9B7C6; }
.CodeMirror.cm-s-default .CodeMirror-activeline-background { background: #323232; }
.CodeMirror.cm-s-default .CodeMirror-gutters { background: #191919; border-right: 1px solid #191919; }
.CodeMirror.cm-s-default .CodeMirror-guttermarker { color: #FFEE80; }
.CodeMirror.cm-s-default .CodeMirror-guttermarker-subtle { color: #D0D0D0; }
.CodeMirror.cm-s-default .CodeMirror-linenumber { color: #606366; }
.CodeMirror.cm-s-default .CodeMirror-matchingbracket { background-color: #3B514D; color: #FFEF28 !important; font-weight: bold; }

.CodeMirror.cm-s-default div.CodeMirror-selected { background: #214283; }

.CodeMirror.cm-s-default .CodeMirror-hints.esh {
  font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
  color: #9C9E9E;
  background-color: #3B3E3F !important;
}

.CodeMirror.cm-s-default .CodeMirror-hints.esh .CodeMirror-hint-active {
  background-color: #494D4E !important;
  color: #9C9E9E !important;
}

.CodeMirror.cm-s-default.drag-n-drop-highlight {
  outline-color: rgba(17, 163, 234, 0.5);
}
/*
.CodeMirror-sizer,
.CodeMirror-sizer > div,
.CodeMirror-lines,
.CodeMirror-lines > div,
.CodeMirror-code {
	height: 100%;
}
*/
@media (max-width: 700px) {
  .CodeMirror.cm-s-default {
    font-size: 16px;
  }
}

/* Light mode */
.darkmode .CodeMirror.cm-s-default {
    background-color: #EEEEEE;
    color: #333333 !important;
}

.darkmode .CodeMirror-line::selection,
.darkmode .CodeMirror-line > span::selection,
.darkmode .CodeMirror-line > span > span::selection {
    background-color: #CCCC77 !important
}

.darkmode .cp-main .CodeMirror.cm-s-default {
    background-color: #DBDAD8;
}

.darkmode .CodeMirror.cm-s-default span.cm-meta { color: #444AD6; }
.darkmode .CodeMirror.cm-s-default span.cm-number { color: #976844; }
.darkmode .CodeMirror.cm-s-default span.cm-keyword { color: #3387CD; }
.darkmode .CodeMirror.cm-s-default span.cm-def { color: #564839; }
.darkmode .CodeMirror.cm-s-default span.cm-variable { color: #564839; }
.darkmode .CodeMirror.cm-s-default span.cm-variable-2 { color: #564839; }
.darkmode .CodeMirror.cm-s-default span.cm-variable-3 { color: #678955; }
.darkmode .CodeMirror.cm-s-default span.cm-type { color: #554433; }
.darkmode .CodeMirror.cm-s-default span.cm-property { color: #003992; }
.darkmode .CodeMirror.cm-s-default span.cm-operator { color: #564839; }
.darkmode .CodeMirror.cm-s-default span.cm-string { color: #9578A6; }
.darkmode .CodeMirror.cm-s-default span.cm-string-2 { color: #9578A6; }
.darkmode .CodeMirror.cm-s-default span.cm-comment { color: #9E5EAE; }
.darkmode .CodeMirror.cm-s-default span.cm-link { color: #B17A47; }
.darkmode .CodeMirror.cm-s-default span.cm-atom { color: #3387CD; }
.darkmode .CodeMirror.cm-s-default span.cm-error { color: #43C0C3; }
.darkmode .CodeMirror.cm-s-default span.cm-tag { color: #9D68AA; }
.darkmode .CodeMirror.cm-s-default span.cm-attribute { color: #976844; }
.darkmode .CodeMirror.cm-s-default span.cm-qualifier { color: #9578A6; }
.darkmode .CodeMirror.cm-s-default span.cm-bracket { color: #564839; }
.darkmode .CodeMirror.cm-s-default span.cm-builtin { color: #0061A6; }
.darkmode .CodeMirror.cm-s-default span.cm-special { color: #0061A6; }

.darkmode .CodeMirror.cm-s-default span.cm-matchhighlight {
    color: #000000;
    background-color: rgba(205, 166, 207, .7);
}

.darkmode .CodeMirror.cm-s-default span.cm-searching {
    color: #000000;
    background-color: rgba(194, 140, 196, .7);
}

.darkmode .CodeMirror.cm-s-default .CodeMirror-cursor { border-left: 1px solid #564839; }
.darkmode .CodeMirror.cm-s-default .CodeMirror-activeline-background { background: #CDCDCD; }
.darkmode .CodeMirror.cm-s-default .CodeMirror-gutters { background: #E6E6E6; border-right: 1px solid #E6E6E6; }
.darkmode .CodeMirror.cm-s-default .CodeMirror-guttermarker { color: #00117F; }
.darkmode .CodeMirror.cm-s-default .CodeMirror-guttermarker-subtle { color: #2F2F2F; }
.darkmode .CodeMirror.cm-s-default .CodeMirror-linenumber { color: #9F9C99; }

.darkmode .CodeMirror.cm-s-default .CodeMirror-matchingbracket {
    background-color: #C4AEB2;
    color: #0010D7 !important;
}

.darkmode .CodeMirror.cm-s-default div.CodeMirror-selected { background: #DEBD7C; }

.darkmode .CodeMirror.cm-s-default .CodeMirror-hints.esh {
  color: #636161;
  background-color: #C4C1C0 !important;
}

.darkmode .CodeMirror.cm-s-default .CodeMirror-hints.esh .CodeMirror-hint-active {
  background-color: #B6B2B1 !important;
  color: #636161 !important;
}

.darkmode .CodeMirror.cm-s-default.drag-n-drop-highlight {
  outline-color: rgba(238, 92, 21, 0.5);
}