.CodeMirror {
    flex-grow: 1;
    height: 100% !important;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 14px;
    background-color: #282c34;
    color: #D4D4D4;
    line-height: 1.5;
}

.CodeMirror-gutters {
    background-color: #282c34;
    border-right: 1px solid #3e4451;
}

.CodeMirror-linenumber {
    color: #5C6370;
}

.CodeMirror-indentguide {
    background: none;
    border-right: 1px solid #3e4451;
}

#code-area {
white-space: pre;
tab-size: 4;
}

.CodeMirror-vscrollbar::-webkit-scrollbar {
    width: 12px;
}

.CodeMirror-vscrollbar::-webkit-scrollbar-track {
    background: #282C34;
}

.CodeMirror-vscrollbar::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 6px;
    border: 3px solid #282C34;
}

.CodeMirror-vscrollbar::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.CodeMirror-vscrollbar {
    scrollbar-width: thin;
    scrollbar-color: #888 #282C34;
}

.CodeMirror-selected {
    background-color: rgba(241, 239, 231, 0.2) !important;
}

.CodeMirror-focused .CodeMirror-selected {
    background-color: rgba(241, 239, 231, 0.2) !important;
}

.CodeMirror-cursor {
    border-left: 1px solid #FFFFFF !important;
}

/* Syntax highlighting */
.cm-s-custom .cm-comment { color: #5C6370; }
.cm-s-custom .cm-punctuation { color: #D4D4D4; }
.cm-s-custom .cm-tag,
.cm-s-custom .cm-boolean,
.cm-s-custom .cm-constant,
.cm-s-custom .cm-symbol,
.cm-s-custom .cm-deleted { color: #e06c75; }
.cm-s-custom .cm-selector,
.cm-s-custom .cm-string,
.cm-s-custom .cm-char,
.cm-s-custom .cm-builtin,
.cm-s-custom .cm-qualifier,
.cm-s-custom .cm-inserted { color: #8db472; }
.cm-s-custom .cm-operator,
.cm-s-custom .cm-entity,
.cm-s-custom .cm-url,
.cm-s-custom .language-css .cm-string,
.cm-s-custom .cm-variable,
.cm-s-custom .cm-variable-2,
.style .cm-string { color: #D4D4D4; }
.cm-s-custom .cm-atrule,
.cm-s-custom .cm-keyword { color: #C678DD; }
.cm-s-custom .cm-function,
.cm-s-custom .cm-property,
.cm-s-custom .cm-def { color: #9CDCFE; }
.cm-s-custom .cm-regex,
.cm-s-custom .cm-important { color: #9CDCFE; }
.cm-s-custom .cm-attribute,
.cm-s-custom .cm-number { color: #D19A66; }

.CodeMirror-dialog {
background-color: #282c34;
color: #D4D4D4;
border: 1px solid #3e4451;
}

/* Preview container */
#preview-container {
    display: none;
    flex-grow: 1;
    background-color: white;
    overflow: hidden;
}