.CodeMirror {
  background-color: #f6fbfa;
  border: 1px solid #d9d9d9;
}
.cm-s-xq.CodeMirror {
  border-radius: 1.5rem;
  height: auto;
  transition: background-color 0.3s, border-color 0.3s;
}
.cm-s-xq.CodeMirror:hover {
  background-color: #d5eeff47;
  border-color: #8bb4dc;
}
.cm-s-xq div.CodeMirror-selected {
  background: rgb(0 102 85 / 0.1);
}
.cm-s-xq .CodeMirror-line::selection,
.cm-s-xq .CodeMirror-line > span::selection,
.cm-s-xq .CodeMirror-line > span > span::selection {
  background: rgb(0 102 85 / 0.1);
}
.cm-s-xq .CodeMirror-line::-moz-selection,
.cm-s-xq .CodeMirror-line > span::-moz-selection,
.cm-s-xq .CodeMirror-line > span > span::-moz-selection {
  background: rgb(0 102 85 / 0.1);
}
.cm-s-xq .CodeMirror-gutters {
  border-right: 1px solid #ddd;
  background-color: rgb(221 221 221 / 20%);
  white-space: nowrap;
}
.cm-s-xq span.cm-keyword {
  line-height: 1em;
  font-weight: 700;
  color: #5a5cad;
}
.cm-s-xq span.cm-atom {
  color: #7a316f;
  font-weight: 700;
}
.cm-s-xq span.cm-number {
  color: #e36209;
}
.cm-s-xq span.cm-def {
  text-decoration: underline;
}
.cm-s-xq span.cm-variable {
  color: #000;
}
.cm-s-xq span.cm-variable-2 {
  color: #000;
}
.cm-s-xq span.cm-variable-3,
.cm-s-xq span.cm-type {
  color: #000;
}
.cm-s-xq span.cm-property {
  color: #1347aa;
}
.cm-s-xq span.cm-comment {
  color: #bbb;
  font-style: italic;
}
.cm-s-xq span.cm-meta {
  color: #ff0;
}
.cm-s-xq span.cm-qualifier {
  color: grey;
}
.cm-s-xq span.cm-builtin {
  color: #7ea656;
}
.cm-s-xq span.cm-bracket {
  color: #cc7;
}
.cm-s-xq span.cm-tag {
  color: #3f7f7f;
}
.cm-s-xq span.cm-attribute {
  color: #7f007f;
}
.cm-s-xq span.cm-error {
  color: #e04141;
}
.cm-s-xq .CodeMirror-activeline-background {
  background: #e8f2ff;
}
.cm-s-xq .CodeMirror-matchingbracket {
  outline: 1px solid grey;
  color: black !important;
  background: #ff0;
}
.dark .CodeMirror {
  background-color: var(--dark-color-surface-200);
  border-color: var(--dark-color-surface-300);
}
.dark .cm-s-xq.CodeMirror {
  background-color: var(--dark-color-surface-200);
  border-color: var(--dark-color-surface-300);
  color: rgb(255 255 255 / 65%);
}
.dark .cm-s-xq.CodeMirror:hover {
  background-color: rgb(0 13 50 / 30%);
  border-color: #1347aa;
}
.dark .cm-s-xq div.CodeMirror-selected {
  background: var(--dark-color-codemirror-line-selection);
}
.dark .cm-s-xq .CodeMirror-line::selection,
.dark .cm-s-xq .CodeMirror-line > span::selection,
.dark .cm-s-xq .CodeMirror-line > span > span::selection {
  background: var(--dark-color-codemirror-line-selection);
}
.dark .cm-s-xq .CodeMirror-line::-moz-selection,
.dark .cm-s-xq .CodeMirror-line > span::-moz-selection,
.dark .cm-s-xq .CodeMirror-line > span > span::-moz-selection {
  background: var(--dark-color-codemirror-line-selection);
}
.dark .cm-s-xq .CodeMirror-gutters {
  background: rgb(0 0 0 / 30%);
  border-right: 1px solid var(--dark-color-surface-300);
}
.dark .cm-s-xq .CodeMirror-guttermarker {
  color: #ffbd40;
}
.dark .cm-s-xq .CodeMirror-guttermarker-subtle {
  color: rgb(255 255 255 / 70%);
}
.dark .cm-s-xq .CodeMirror-linenumber {
  color: rgb(255 255 255 / 50%);
}
.dark .cm-s-xq .CodeMirror-cursor {
  border-left: 1px solid #fff;
}
.dark .cm-s-xq span.cm-keyword {
  color: #ffbd40;
}
.dark .cm-s-xq span.cm-atom {
  color: #c099ff;
}
.dark .cm-s-xq span.cm-number {
  color: #9ccfd8;
}
.dark .cm-s-xq span.cm-def {
  color: #fff;
  text-decoration: underline;
}
.dark .cm-s-xq span.cm-variable {
  color: #fff;
}
.dark .cm-s-xq span.cm-variable-2 {
  color: #eee;
}
.dark .cm-s-xq span.cm-variable-3,
.dark .cm-s-xq span.cm-type {
  color: #ddd;
}
.dark .cm-s-xq span.cm-property {
  color: #f6c177;
}
.dark .cm-s-xq span.cm-comment {
  color: gray;
}
.dark .cm-s-xq span.cm-meta {
  color: #ff0;
}
.dark .cm-s-xq span.cm-qualifier {
  color: #fff700;
}
.dark .cm-s-xq span.cm-builtin {
  color: #30a;
}
.dark .cm-s-xq span.cm-bracket {
  color: #cc7;
}
.dark .cm-s-xq span.cm-tag {
  color: #ffbd40;
}
.dark .cm-s-xq span.cm-attribute {
  color: #fff700;
}
.dark .cm-s-xq span.cm-error {
  color: #e04141;
}
.dark .cm-s-xq .CodeMirror-activeline-background {
  background: #27282e;
}
.dark .cm-s-xq .CodeMirror-matchingbracket {
  outline: 1px solid grey;
  color: white !important;
}
.Line-Hover {
  transition: all 0.2s;
}
.CodeMirror pre.CodeMirror-line:hover,
.CodeMirror pre.CodeMirror-line-like:hover {
  background-color: rgb(0 72 135 / 0.05);
}
.dark .CodeMirror pre.CodeMirror-line:hover,
.CodeMirror pre.CodeMirror-line-like:hover {
  background-color: rgb(0 72 135 / 20%);
}
.CodeMirror-foldmarker {
  color: #fc8800;
  text-shadow: #ffd8aa 1px 1px 2px, #ffd8aa -1px -1px 2px, #ffd8aa 1px -1px 2px,
    #ffd8aa -1px 1px 2px;
  font-family: arial;
  line-height: 0.3;
  cursor: pointer;
}
.dark .CodeMirror-foldmarker {
  color: #fff;
  text-shadow: #bbb 1px 1px 2px, #bbb -1px -1px 2px, #bbb 1px -1px 2px,
    #bbb -1px 1px 2px;
  font-family: arial;
  line-height: 0.3;
  cursor: pointer;
}
