:root {
  --theme-background: #FFFFFF;
  --theme-foreground: #F9F9F9;
  --theme-gutter-background: #F9F9F9;
  --theme-handle-background: #DADDE3;
  --theme-selection-background: #E6E6E6;
  --theme-color: rgb(33, 53, 71);
  --theme-color-hover: rgb(33, 53, 71, .5);
  --theme-box-shadow: rgb(0 0 0 / 16%);
}

body.dark-theme {
  --theme-background: #242424;
  --theme-foreground: #2F2F2F;
  --theme-gutter-background: #2F2F2F;
  --theme-handle-background: #373C43;
  --theme-selection-background: #3A3A3A;
  --theme-color: rgba(255, 255, 255, .87);
  --theme-color-hover: rgba(255, 255, 255, .5);
  --theme-box-shadow: rgb(0 0 0 / 84%);
}

/*****************************************
*                                        *
*               CodeMirror               *
*                                        *
*****************************************/
.cm-s-wa .CodeMirror-guttermarker {
	color: #ac4142;
}

.cm-s-wa .CodeMirror-guttermarker-subtle {
	color: #505050;
}

.cm-s-wa .CodeMirror-linenumber {
	color: #505050;
}

.cm-s-wa .CodeMirror-cursor {
	border-left: 1px solid #bfbaaa;
}

.cm-s-wa span.cm-comment {
	color: #758575dd;
}

.cm-s-wa span.cm-operator {
	color: #666666;
}

.cm-s-wa span.cm-atom {
	color: #4d9375;
}

.cm-s-wa span.cm-number {
	color: #4C9A91; 
}

.cm-s-wa span.cm-property, .cm-s-wa span.cm-attribute {
	color: #b8a965;
}

.cm-s-wa span.cm-keyword {
	color: #4d9375;
}

.cm-s-wa span.cm-string {
	color: #c98a7d;
}

.cm-s-wa span.cm-variable {
	color: #db889a;
}

.cm-s-wa span.cm-variable-2 {
	color: #6a9fb5;
}

.cm-s-wa span.cm-def {
	color: #d28445;
}

.cm-s-wa span.cm-bracket {
	color: #666666; 
}

.cm-s-wa span.cm-tag {
	color: #4d9375;
}

.cm-s-wa span.cm-link {
	color: #c98a7d;
}

.cm-s-wa span.cm-error {
	background: #fdaeb7;
	color: #b0b0b0;
}

.cm-s-wa .CodeMirror-matchingbracket {
	text-decoration: underline;
	color: #666666 !important;
}

#wa-editor .CodeMirror {
  height: 100%;
  background: var(--theme-background);
  color: var(--theme-color);
}

.CodeMirror-gutter {
  background: var(--theme-background);
}

.CodeMirror-gutters {
  border-right: 0.5px solid var(--theme-handle-background) !important
}

#wa-editor div.CodeMirror-selected {
  background: var(--theme-selection-background);
}

#wa-editor div.CodeMirror-activeline-background {
  background: var(--theme-selection-background)
}