/* THEMES */

/* MATERIAL PALENIGHT */
body[mobius-ui-theme^="material-palenight"] {
  --mobiusEditorActiveLineBackgroundColor: #1c1f2a; /* the background of the selected text */
  --mobiusEditorAtomColor: #babed7; /* flex in display:flex */
  --mobiusEditorAttributeColor: #c690e5; /* class in <section class="relative py-section px-doc"> */
  --mobiusEditorBackgroundColor: #292d3d;
  --mobiusEditorBraceColor: #ffd737; /* { in .selector { */
  --mobiusEditorBracketColor: #85defd; /* < in <section class="relative py-section px-doc"> */
  --mobiusEditorBuiltInColor: #fa8b6f; /* #myID */
  --mobiusEditorCalleeColor: #80aafb; /* var in font-size: var(--myValue); */
  --mobiusEditorColor: #babed7; /* the color of semicolons and equals signs */
  --mobiusCSSEditorColor: #85defd; /* the color of semicolons and equals signs */
  --mobiusEditorColonColor: #85defd;
  --mobiusEditorCommentColor: #676e93;
  --mobiusEditorCSSAttributeColor: #c991e7; /*name in [name="aviator_replace_shortcodes_with_elements"]*/
  --mobiusEditorCSSStringColor: #c2e994; /* "value" in [my-attribute="value"] { */
  --mobiusEditorCSSTagColor: #ffcb74; /* header in header {display: none;} */
  --mobiusEditorCursorColor: yellow; /* the cursor */
  --mobiusEditorDefColor: #84dbfa; /* @media in @media (min-width: 768px) { */
  --mobiusEditorGutterBackgroundColor: #292d3d; /* the background of the gutter */
  --mobiusEditorGutterBorderColor: #393e57; /* the border of the gutter */
  --mobiusEditorHTMLStringColor: #c2e994; /* relative in <section class="relative */
  --mobiusEditorHTMLTagColor: #f36f79; /* section in <section class */
  --mobiusEditorKeywordColor: #fa8b6f; /* keyword (e.g. !important) */
  --mobiusEditorLineNumberColor: rgb(
    103 110 147 / 50%
  ); /* comment color at 50% opacity */
  --mobiusEditorMatchingBracketColor: #ffd737; /* the color of matching brackets */
  --mobiusEditorMatchingBracketBorderColor: #ffd73780; /* the color of matching brackets */
  --mobiusEditorNumberColor: #fa8b6f; /* 100% in width: 100%; */
  --mobiusEditorParenthesisColor: #dd6dd3; /* ( in color: var(--text-pop); */
  --mobiusEditorPropertyColor: #b1ccd6; /* width in width: 100%; */
  --mobiusEditorQualifierColor: #ffcb74; /* .selector in .selector { */
  --mobiusEditorSelectionBackgroundColor: #3f4561;
  --mobiusEditorVariableColor: #80aafb; /* var in font-size: var(--myValue); */
  --mobiusEditorVariable2Color: #babed7; /* --myValue in font-size: var(--myValue); */
  --mobiusEditorVariable3Color: #c991e7; /* root in :root { */
}

/* Apply the colors to CodeMirror classes */
.mobius-panel .CodeMirror {
  background-color: var(--mobiusEditorBackgroundColor);
  color: var(--mobiusEditorColor);
}

.mobius-panel .cm-s-css {
  color: var(--mobiusCSSEditorColor);
}

.mobius-panel .CodeMirror-gutters {
  background-color: var(--mobiusEditorGutterBackgroundColor);
  border-color: var(--mobiusEditorGutterBorderColor);
}

.mobius-panel .CodeMirror-linenumber,
.mobius-panel .CodeMirror-guttermarker-subtle {
  color: var(--mobiusEditorLineNumberColor);
}

.mobius-panel .CodeMirror-activeline-background {
  background-color: var(--mobiusEditorActiveLineBackgroundColor);
  border-top: 1px solid var(--mobiusEditorGutterBorderColor);
  border-bottom: 1px solid var(--mobiusEditorGutterBorderColor);
}

.mobius-panel .cm-atom {
  color: var(--mobiusEditorAtomColor);
}

.mobius-panel .cm-s-html .cm-attribute,
.mobius-panel .cm-s-css .cm-attribute {
  color: var(--mobiusEditorAttributeColor);
}

.mobius-panel .cm-brace {
  color: var(--mobiusEditorBraceColor);
}

.mobius-panel .cm-bracket,
.mobius-panel .cm-s-html .cm-tag.cm-bracket {
  color: var(--mobiusEditorBracketColor);
}

.mobius-panel .cm-builtin {
  color: var(--mobiusEditorBuiltInColor);
}

.mobius-panel .cm-callee,
.mobius-panel .cm-variable.cm-callee {
  color: var(--mobiusEditorCalleeColor);
}

.mobius-outline-dropdown panel {
  background-color: var(--mobiusEditorBackgroundColor);
}

.mobius-panel .cm-colon {
  color: var(--mobiusEditorColonColor);
}

.mobius-panel .cm-comment {
  color: var(--mobiusEditorCommentColor);
}

.mobius-panel .cm-cursor {
  color: var(--mobiusEditorCursorColor);
}

.mobius-panel .cm-def {
  color: var(--mobiusEditorDefColor);
}

.mobius-panel .cm-keyword {
  color: var(--mobiusEditorKeywordColor);
}

.mobius-panel .cm-number {
  color: var(--mobiusEditorNumberColor);
}

.mobius-panel .cm-parenthesis {
  color: var(--mobiusEditorParenthesisColor);
}

.mobius-panel .cm-property {
  color: var(--mobiusEditorPropertyColor);
}

.mobius-panel .cm-qualifier {
  color: var(--mobiusEditorQualifierColor);
}

.mobius-panel .CodeMirror-selected,
.mobius-panel .CodeMirror-matchingtag {
  background-color: var(--mobiusEditorSelectionBackgroundColor);
}

.mobius-panel .CodeMirror-matchingbracket {
  color: var(--mobiusEditorMatchingBracketColor);
  border: 1px solid var(--mobiusEditorMatchingBracketBorderColor);
}

.mobius-panel .cm-s-html .cm-string {
  color: var(--mobiusEditorHTMLStringColor);
}

.mobius-panel .cm-s-css .cm-brace + .cm-tag {
  color: var(--mobiusEditorCSSAttributeColor);
}

.mobius-panel .cm-s-css .cm-string {
  color: var(--mobiusEditorCSSStringColor);
}

/* .mobius-panel .cm-string {
    color: var(--mobiusEditorStringColor);
  } */

.mobius-panel .cm-s-css .cm-tag {
  color: var(--mobiusEditorCSSTagColor);
}

.mobius-panel .cm-s-html .cm-tag {
  color: var(--mobiusEditorHTMLTagColor);
}

.mobius-panel .cm-variable {
  color: var(--mobiusEditorVariableColor);
}

.mobius-panel .cm-variable-2 {
  color: var(--mobiusEditorVariable2Color);
}

.mobius-panel .cm-variable-3 {
  color: var(--mobiusEditorVariable3Color);
}