:root {
  --background-1: #21222c;
  --background-2: #343746;
  --foreground-color-1: #f8f8f2;
  --foreground-color-2: #bd93f9;
  --foreground-color-3: #8be9fd;
  --border-color: #21222c;
  --highlight-color: #6272a4;
  --highlight-contrast: #21222c;
  --sn-stylekit-info-color: var(--foreground-color-3);
  --sn-stylekit-info-contrast-color: #21222c;
  --sn-stylekit-neutral-color: var(--foreground-color-2);
  --sn-stylekit-neutral-contrast-color: #21222c;
  --sn-stylekit-success-color: #50fa7b;
  --sn-stylekit-success-contrast-color: #21222c;
  --sn-stylekit-warning-color: #f1fa8c;
  --sn-stylekit-warning-contrast-color: #21222c;
  --sn-stylekit-danger-color: #ff5555;
  --sn-stylekit-danger-contrast-color: #21222c;
  --sn-stylekit-shadow-color: var(--background-2);
  --sn-stylekit-background-color: var(--background-1);
  --sn-stylekit-foreground-color: var(--foreground-color-1);
  --sn-stylekit-border-color: var(--border-color);
  --sn-stylekit-paragraph-text-color: var(--foreground-color-1);
  --sn-stylekit-contrast-background-color: var(--background-2);
  --sn-stylekit-contrast-foreground-color: var(--foreground-color-1);
  --sn-stylekit-contrast-border-color: var(--border-color);
  --sn-stylekit-secondary-background-color: var(--background-1);
  --sn-stylekit-secondary-foreground-color: var(--foreground-color-1);
  --sn-stylekit-secondary-border-color: var(--border-color);
  --sn-stylekit-secondary-contrast-background-color: var(--background-2);
  --sn-stylekit-secondary-contrast-foreground-color: var(--foreground-color-1);
  --sn-stylekit-secondary-contrast-border-color: var(--border-color);
  --sn-stylekit-editor-background-color: var(--background-1);
  --sn-stylekit-editor-foreground-color: var(--sn-stylekit-foreground-color);
  --sn-stylekit-scrollbar-track-border-color: var(--border-color);
  --sn-stylekit-scrollbar-thumb-color: var(--sn-stylekit-info-color);
  --sn-desktop-titlebar-bg-color: var(--background-1);
  --sn-desktop-titlebar-border-color: var(--border-color);
  --sn-desktop-titlebar-ui-color: var(--foreground-color-2);
  --sn-desktop-titlebar-ui-hover-color: var(--highlight-color);
}

#notes-column .note.selected, .notes .note.selected {
  background-color: #343746;
  color: var(--foreground-color-1);
}

/* CODE MIRROR HIGHLIGHTING */
:root .CodeMirror-gutters {
  background-color: #21222c !important;
  color: #f8f8f2 !important;
  border: none;
}
:root .CodeMirror-cursor { border-left: solid thin #f8f8f0 !important; }
:root .CodeMirror-linenumber { color: #66d9ef !important; }
:root .CodeMirror-selected { background: #343746 !important; }
:root span.cm-comment { 
  color: #6272a4 !important; 
  background: #21222c !important;
}
.CodeMirror-code .cm-comment.CodeMirror-selectedtext {
  color: #6272a4 !important; 
  background: #343746 !important;
}
:root .CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { 
  background: #343746 !important; 
}
:root .CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { 
  background: #343746 !important; 
}
:root span.cm-string, span.cm-string-2 { color: #f1fa8c !important; }
:root span.cm-string.CodeMirror-selectedtext, span.cm-string-2.CodeMirror-selectedtext { 
  color: #f1fa8c !important; 
  background: #343746 !important; 
}
:root span.cm-number { color: #bd93f9 !important; }
:root span.cm-number.CodeMirror-selectedtext { 
  color: #bd93f9 !important;
  background: #343746 !important; 
}
:root span.cm-variable, span.cm-variable.CodeMirror-selectedtext { color: #f8f8f2 !important; }
:root span.cm-variable.CodeMirror-selectedtext { 
  color: #f8f8f2 !important;
  background: #343746 !important; 
}
:root span.cm-variable-2 { color: #f8f8f2 !important; }
:root span.cm-variable-2.CodeMirror-selectedtext { 
  color: #f8f8f2 !important;
  background: #343746 !important; 
}
:root span.cm-variable-3, span.cm-variable-3.CodeMirror-selectedtext, span.cm-type { color: #50fa7b !important; }
:root span.cm-variable-3.CodeMirror-selectedtext { 
  color: #50fa7b !important;
  background: #343746 !important; 
}
:root span.cm-def { color: #50fa7b !important; }
:root span.cm-operator { color: #ff79c6 !important; }
:root span.cm-keyword { color: #ff79c6 !important; }
:root span.cm-keyword.CodeMirror-selectedtext {
  color: #ff79c6 !important;
  background: #343746 !important; 
}
:root span.cm-atom { color: #bd93f9 !important; }
:root span.cm-atom.CodeMirror-selectedtext { 
  color: #bd93f9 !important;
  background: #343746 !important; 
}
:root span.cm-meta { color: #f8f8f2 !important; }
:root span.cm-tag { color: #ff79c6 !important; }
:root span.cm-attribute { color: #50fa7b !important; }
:root span.cm-qualifier { color: #50fa7b !important; }
:root span.cm-property { color: #8be9fd !important; }
:root span.cm-property.CodeMirror-selectedtext { 
  color: #8be9fd !important;
  background: #343746 !important; 
}
:root span.cm-builtin { color: #50fa7b !important; }
:root span.cm-builtin.CodeMirror-selectedtext { 
  color: #50fa7b !important;
  background: #343746 !important; 
}

/* HIGHLIGHT.JS SYNTAX HIGHLIGHTING */
/* Source: https://github.com/dracula/highlightjs/blob/master/dracula.css */
.hljs {
  display: block !important;
  overflow-x: auto !important;
  padding: 0.5em !important;
  background: #343746 !important;
}

.hljs-built_in,
.hljs-selector-tag,
.hljs-section,
.hljs-link {
  color: #8be9fd !important;
}

span.hljs-tag,
.hljs-keyword {
  color: #ff79c6 !important;
}

.hljs,
.hljs-subst {
  color: #f8f8f2 !important;
}

.hljs-title,
.hljs-name,
.hljs-attr  {
  color: #50fa7b !important;
}

.hljs-string,
.hljs-meta,
.hljs-type,
.hljs-symbol,
.hljs-bullet,
.hljs-addition,
.hljs-variable,
.hljs-template-tag,
.hljs-template-variable {
  color: #f1fa8c !important;
}

.hljs-comment,
.hljs-quote,
.hljs-deletion {
  color: #6272a4 !important;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-title,
.hljs-section,
.hljs-doctag,
.hljs-type,
.hljs-name,
.hljs-strong {
  font-weight: bold !important;
}

.hljs-literal,
.hljs-number {
  color: #bd93f9 !important;
}

.hljs-emphasis {
  font-style: italic !important;
}