#app.darkMode #codePanel #codeTabs {
	background-color: #222;
	color: #f5f5f5;
	border-bottom-color: #ccc;
}

#app.darkMode #codeTabs .icon_x_small_dark,
#app.darkMode #codeOptions.active .icon_settings_small
 {
	background-image: url('/assets/img/icons/x_small_white@2x.png');
}
#app.darkMode #codeOptions .icon_settings_small
 {
	background-image: url('/assets/img/icons/settings_small_white@2x.png');
}
#app.darkMode #codeTabs .icon_plus_small
 {
	background-image: url('/assets/img/icons/plus_small_white@2x.png');
}
#app.darkMode #codePanel #codeTabs li.selected,
#app.darkMode #codePanel #addCodeButton {
	border-bottom-color: #f5f5f5;
}
#app.darkMode #codeTabs li.edit {
	background: #555;
}
#app.darkMode #codePanel.showComments .commentMarker {
	background: rgb(255 249 0 / 24%);
}

.cm-s-dark {
	--bg: #222;
	--grey-light: #989898;
	--grey: #5e5e5e;
	--grey-dark: #4d4d4d;
	--white: #f5f5f5;
	--blue: #73c1e8;
	--blue-light: #b7e8fe;
	--blue-dark: #73c1e8;
	--pink: #ed7b7b;
}
.cm-s-dark.CodeMirror {
	background-color: var(--bg) !important;
	color: #f5f5f5;
	/* text-shadow: 0 -1px 1px #262626; */
}
.CodeMirror pre.CodeMirror-line,
.CodeMirror pre.CodeMirror-line-like {
	color: var(--grey-light);
}
.cm-s-dark div.CodeMirror-selected {
	background: #45443b;
} /* 33322B*/
.cm-s-dark .CodeMirror-line::selection,
.cm-s-dark .CodeMirror-line > span::selection,
.cm-s-dark .CodeMirror-line > span > span::selection {
	background: rgba(69, 68, 59, 0.99);
}
.cm-s-dark .CodeMirror-line::-moz-selection,
.cm-s-dark .CodeMirror-line > span::-moz-selection,
.cm-s-dark .CodeMirror-line > span > span::-moz-selection {
	background: rgba(69, 68, 59, 0.99);
}
.cm-s-dark .CodeMirror-cursor {
	border-left: 1px solid white;
}
.cm-s-dark pre {
	padding: 0 8px;
} /*editable code holder*/

.cm-s-dark.CodeMirror span.CodeMirror-matchingbracket {
	color: var(--blue-light);
} /*65FC65*/

.cm-s-dark .CodeMirror-gutters {
	background: var(--bg);
}
.cm-s-dark .CodeMirror-guttermarker {
	color: var(--blue);
}
.cm-s-dark .CodeMirror-guttermarker-subtle {
	color: var(--grey-dark);
}
.cm-s-dark .CodeMirror-linenumber {
	color: var(--grey) !important;
}

.cm-s-dark span.cm-header {
	color: var(--white);
}
.cm-s-dark span.cm-quote {
	color: var(--white);
}
.cm-s-dark span.cm-keyword {
	color: var(--grey-light);
}
/* booleans, nulls, etc. */
.cm-s-dark span.cm-atom {
	color: var(--white);
}
.cm-s-dark span.cm-number {
	color: var(--white);
}
.cm-s-dark span.cm-def {
	color: var(--blue-light); /* text-shadow: 0 0px 4px #999; */
	font-weight: 500;
}
.cm-s-dark span.cm-variable {
	color: var(--blue-dark);
}
.cm-s-dark span.cm-variable-2 {
	color: var(--blue);
}
.cm-s-dark span.cm-variable-3,
.cm-s-dark span.cm-type {
	color: var(--blue);
}
.cm-s-dark span.cm-property {
	color: var(--blue);
}
.cm-s-dark span.cm-operator {
	color: var(--grey-light);
}
.cm-s-dark span.cm-comment {
	color: var(--grey);
}
.cm-s-dark span.cm-string {
	color: var(--white);
}
.cm-s-dark span.cm-string-2 {
	color: var(--white);
}
.cm-s-dark span.cm-meta {
	color: var(--blue-dark);
}
.cm-s-dark span.cm-qualifier {
	color: var(--blue-light);
}
.cm-s-dark span.cm-builtin {
	color: var(--blue-light);
}
.cm-s-dark span.cm-bracket {
	color: #ebefe7;
}
.cm-s-dark span.cm-tag {
	color: var(--blue-light);
}
.cm-s-dark span.cm-attribute {
	color: var(--grey-light);
}
.cm-s-dark span.cm-hr {
	color: var(--grey-light);
}
.cm-s-dark span.cm-link {
	color: #7070e6;
}
.cm-s-dark span.cm-error {
	border-bottom: 1px solid var(--pink);
}

.cm-s-dark .CodeMirror-activeline-background {
	background: #3c3a3a;
}
.cm-s-dark .CodeMirror-matchingbracket {
	outline: 1px solid grey;
	color: white !important;
}