/*
  Name:       material
  Author:     Mattia Astorino (http://github.com/equinusocio)
  Website:    https://material-theme.site/
*/

.cm-s-shuffle.CodeMirror {
    border-top: 1px solid #272727;
    background-color: #171717;
    color: #EEFFFF;
}

.cm-s-shuffle .CodeMirror-gutters {
    padding-right: 8px;
    background: #262626;
    color: #DFDFDF;
    border: none;
}

.cm-s-shuffle .CodeMirror-guttermarker,
.cm-s-shuffle .CodeMirror-guttermarker-subtle,
.cm-s-shuffle .CodeMirror-linenumber {
    color: #DFDFDF;
}

.cm-s-shuffle .CodeMirror-cursor {
    border-left: 1px solid #FFCC00;
}

.cm-s-shuffle div.CodeMirror-selected {
    background: rgba(128, 203, 196, 0.2);
}

.cm-s-shuffle.CodeMirror-focused div.CodeMirror-selected {
    background: rgba(128, 203, 196, 0.2);
}

.cm-s-shuffle .CodeMirror-line::selection,
.cm-s-shuffle .CodeMirror-line > span::selection,
.cm-s-shuffle .CodeMirror-line > span > span::selection {
    background: rgba(128, 203, 196, 0.2);
}

.cm-s-shuffle .CodeMirror-line::-moz-selection,
.cm-s-shuffle .CodeMirror-line > span::-moz-selection,
.cm-s-shuffle .CodeMirror-line > span > span::-moz-selection {
    background: rgba(128, 203, 196, 0.2);
}

.cm-s-shuffle .CodeMirror-activeline-background {
    background: rgba(0, 0, 0, 0.5);
}

.cm-s-shuffle .cm-keyword {
    color: #4BD898;
}

.cm-s-shuffle .cm-operator {
    color: #89DDFF;
}

.cm-s-shuffle .cm-variable-2 {
    color: #EEFFFF;
}

.cm-s-shuffle .cm-variable-3,
.cm-s-shuffle .cm-type {
    color: #f07178;
}

.cm-s-shuffle .cm-builtin {
    color: #FFCB6B;
}

.cm-s-shuffle .cm-atom {
    color: #F78C6C;
}

.cm-s-shuffle .cm-number {
    color: #FF8C8C;
}

.cm-s-shuffle .cm-def {
    color: #82AAFF;
}

.cm-s-shuffle .cm-string {
    color: #7d9bfc;
}

.cm-s-shuffle .cm-string-2 {
    color: #f07178;
}

.cm-s-shuffle .cm-comment {
    color: #546E7A;
}

.cm-s-shuffle .cm-variable {
    color: #f07178;
}

.cm-s-shuffle .cm-tag {
    color: #FF8C8C;
}

.cm-s-shuffle .cm-tag.cm-bracket {
    color: #888888;
}

.cm-s-shuffle .cm-meta {
    color: #FFCB6B;
}

.cm-s-shuffle .cm-attribute {
    color: #4BD898;
}

.cm-s-shuffle .cm-property {
    color: #4BD898;
}

.cm-s-shuffle .cm-qualifier {
    color: #DECB6B;
}

.cm-s-shuffle .cm-variable-3,
.cm-s-shuffle .cm-type {
    color: #DECB6B;
}

.cm-s-shuffle .cm-error {
    color: rgba(255, 255, 255, 1.0);
    background-color: #FF8C8C;
}

.cm-s-shuffle .CodeMirror-matchingbracket {
    text-decoration: underline;
    color: white !important;
}

.cm-s-shuffle .CodeMirror-scrollbar-filler, .cm-s-shuffle .CodeMirror-gutter-filler {
    background-color: #565656; /* The little square between H and V scrollbars */
}

.cm-s-shuffle .CodeMirror-vscrollbar, .cm-s-shuffle .CodeMirror-hscrollbar {
    scrollbar-width: 12px;
    scrollbar-color: #565656 #1D1D1D;
}

.cm-s-shuffle .CodeMirror-vscrollbar::-webkit-scrollbar,
.cm-s-shuffle .CodeMirror-hscrollbar::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.cm-s-shuffle .CodeMirror-vscrollbar::-webkit-scrollbar-track,
.cm-s-shuffle .CodeMirror-hscrollbar::-webkit-scrollbar-track {
    background: #1D1D1D;
}

.cm-s-shuffle .CodeMirror-vscrollbar::-webkit-scrollbar-thumb,
.cm-s-shuffle .CodeMirror-hscrollbar::-webkit-scrollbar-thumb {
    background-color: #565656;
    border-radius: 12px;
    border: 3px solid #1D1D1D;
}

.CodeMirror-hints.shuffle {
    position: fixed;
    min-width: 180px;
    max-width: 300px;
    width: max-content;
    border-radius: 4px;
    border: 1px solid #393939;
    background: #262626;
    box-shadow: 0px 1px 2px 0px rgba(10, 10, 10, 0.40);
}

.shuffle .CodeMirror-hint {
    color: #6B82F6;
    font-weight: 500;
    padding: 4px 8px;
}

.shuffle .CodeMirror-hint:hover {
    background: #323232;
}

.shuffle .CodeMirror-hint.CodeMirror-hint-active {
    border-radius: 4px;
    background: #3D3D3D;
}


.CodeMirror-hints.shuffle::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.CodeMirror-hints.shuffle::-webkit-scrollbar-track {
    background: #1D1D1D;
}

.CodeMirror-hints.shuffle::-webkit-scrollbar-thumb {
    background-color: #565656;
    border-radius: 12px;
    border: 3px solid #1D1D1D;
}