#app.darkMode #codePanel #codeTabs {
	background-color: #111;
}

#app.darkMode #codeTabs .icon_x_small,
#app.darkMode #codeTabs.active .icon_settings_small {
	background-image: url('/assets/img/icons/x_small_white@2x.png');
}

#app.darkMode #codeTabs .icon_settings_small {
	background-image: url('/assets/img/icons/settings_small_white@2x.png');
}

#app.darkMode #tabControls::before {
	background: linear-gradient(to right, #11111100 0%, #111 100%);
	height: 100%;
}

#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;
}

/* dark mode updates */
.darkMode #codeTabs .tabTitle,
.darkMode #codeTabs li input {
	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;
	--white: #f5f5f5;
	--black: #333;
	--blue: #73c1e8;
	--blue-light: #b7e8fe;
	--blue-dark: #73c1e8;
	--pink: #ed7b7b;
	--grey-light: #989898;
	--grey: #5e5e5e;
	--grey-dark: #4d4d4d;
}

.cm-s-dark.CodeMirror {
	background-color: var(--bg) !important;
	color: #f5f5f5;
	/* text-shadow: 0 -1px 1px #262626; */
}

.darkMode .CodeMirror pre.CodeMirror-line, .darkMode .CodeMirror pre.CodeMirror-line-like {
	color: var(--white);
}

.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 #999; */
	background-color: #444;
	color: white !important;
	border-radius: 2px;
}

.darkMode #tutorial {
	background-color: #111;
	border-right: 1px solid #333;
}

.darkMode .codeBlot *,
.darkMode code,
.darkMode code {
	/* background-color: #111; */
	color: inherit;
}

.darkMode #tutorial {
	color: var(--white);
}

.darkMode #tutorial .ql-toolbar .ql-fill {
	fill: var(--white);
}
.darkMode #tutorial .ql-toolbar .ql-stroke {
	stroke: var(--white);
}
.darkMode #tutorial .ql-toolbar .ql-addcode {
	background-image: url('/assets/img/icons/code_small_white@2x.png');
}



.darkMode #tutorial .CodeMirror,
.darkMode #tutorial code{
	background: var(--grey1);
}

.darkMode #tutorialButtons {
	background-color: #000a;
	border-top-color: #333;
}

.darkMode .icon_x_circle {
	background-image: url('/assets/img/icons/x_circle_white@2x.png');
}

.darkMode .icon_arrow_circle_left_dark {
	background-image: url('/assets/img/icons/arrow_circle_left_white@2x.png');
}

.darkMode .icon_arrow_circle_right_dark {
	background-image: url('/assets/img/icons/arrow_circle_right_white@2x.png');
}

.darkMode .icon_plus_circle_dark {
	background-image: url('/assets/img/icons/plus_circle_white@2x.png');
}

.darkMode .resizer::after {
	background: #555;
}

.darkMode .resizer:hover::after {
	background: #f5f5f5;
}