/* BASICS */
.CodeMirror {  font-family: "Poppins", sans-serif; height: 300px; color: black; direction: ltr; }

/* PADDING */
.CodeMirror-lines { padding: 15px 0; }
.CodeMirror pre { padding: 0 4px; }
.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { background-color: white; }

/* GUTTER */
.CodeMirror-gutters { border-right: 1px solid #ddd; background-color: #333333; white-space: nowrap; }
.CodeMirror-linenumbers { }
.CodeMirror-linenumber { padding: 0 3px 0 5px; min-width: 20px; text-align: right; color: #FFFFFF; white-space: nowrap; }
.CodeMirror-guttermarker { color: black; }
.CodeMirror-guttermarker-subtle { color: #999; }

/* CURSOR */
.CodeMirror-cursor { border-left: 1px solid black; border-right: none; width: 0; }

/* Shown when moving in bi-directional text */
.CodeMirror div.CodeMirror-secondarycursor { border-left: 1px solid silver; }
.cm-fat-cursor .CodeMirror-cursor { width: auto; border: 0 !important; background: #7e7; }
.cm-fat-cursor div.CodeMirror-cursors { z-index: 1; }
.cm-fat-cursor-mark { background-color: rgba(20, 255, 20, 0.5); -webkit-animation: blink 1.06s steps(1) infinite; -moz-animation: blink 1.06s steps(1) infinite; animation: blink 1.06s steps(1) infinite; }
.cm-animate-fat-cursor { width: auto; border: 0; -webkit-animation: blink 1.06s steps(1) infinite; -moz-animation: blink 1.06s steps(1) infinite; animation: blink 1.06s steps(1) infinite; background-color: #7e7; }
@-moz-keyframes blink {
  0% { }
  50% { background-color: transparent; }
  100% { }
}
@-webkit-keyframes blink {
  0% { }
  50% { background-color: transparent; }
  100% { }
}
@keyframes blink {
  0% { }
  50% { background-color: transparent; }
  100% { }
}

/* Can style cursor different in overwrite (non-insert) mode */
.CodeMirror-overwrite .CodeMirror-cursor { }
.cm-tab { display: inline-block; text-decoration: inherit; }
.CodeMirror-rulers { position: absolute; left: 0; right: 0; top: -50px; bottom: -20px; overflow: hidden; }
.CodeMirror-ruler { border-left: 1px solid #ccc; top: 0; bottom: 0; position: absolute; }

.CodeMirror { position: relative; overflow: hidden; background: white; }
.CodeMirror-scroll { overflow: scroll !important; /* Things will break if this is overridden */  /* 30px is the magic margin used to hide the element's real scrollbars */

  /* See overflow: hidden in .CodeMirror */
margin-bottom: -30px; margin-right: -30px; padding-bottom: 30px; height: 100%; outline: none; /* Prevent dragging from highlighting the element */ position: relative; }
.CodeMirror-sizer { position: relative; border-right: 30px solid transparent; }

/* The fake, visible scrollbars. Used to force redraw during scrolling
 before actual scrolling happens, thus preventing shaking and
 flickering artifacts. */
.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { position: absolute; z-index: 6; display: none; }
.CodeMirror-vscrollbar { right: 0; top: 0; overflow-x: hidden; overflow-y: scroll; }
.CodeMirror-hscrollbar { bottom: 0; left: 0; overflow-y: hidden; overflow-x: scroll; }
.CodeMirror-scrollbar-filler { right: 0; bottom: 0; }
.CodeMirror-gutter-filler { left: 0; bottom: 0; }
.CodeMirror-gutters { position: absolute; left: 0; top: 0; min-height: 100%; z-index: 3; }
.CodeMirror-gutter { white-space: normal; height: 100%; display: inline-block; vertical-align: top; margin-bottom: -30px; }
.CodeMirror-gutter-wrapper { position: absolute; z-index: 4; background: none !important; border: none !important; }
.CodeMirror-gutter-background { position: absolute; top: 0; bottom: 0; z-index: 4; }
.CodeMirror-gutter-elt { position: absolute; cursor: default; z-index: 4; }
.CodeMirror-gutter-wrapper::selection { background-color: transparent }
.CodeMirror-gutter-wrapper::-moz-selection { background-color: transparent }
.CodeMirror-lines { cursor: text; min-height: 1px; /* prevents collapsing before first draw */ }
.CodeMirror pre {  /* Reset some styles that the rest of the page might have set */
-moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; border-width: 0; background: transparent; font-family: inherit; font-size: inherit; margin: 0; white-space: pre; word-wrap: normal; line-height: inherit; color: #89DDFF; z-index: 2; position: relative; overflow: visible; -webkit-tap-highlight-color: transparent; -webkit-font-variant-ligatures: contextual; font-variant-ligatures: contextual; }
.CodeMirror-wrap pre { word-wrap: break-word; white-space: pre-wrap; word-break: normal; }
.CodeMirror-linebackground { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 0; }
.CodeMirror-linewidget { position: relative; z-index: 2; padding: 0.1px; /* Force widget margins to stay inside of the container */ }
.CodeMirror-widget { }
.CodeMirror-rtl pre { direction: rtl; }
.CodeMirror-code { outline: none; font-size: 14px; line-height: 40px; }

/* Force content-box sizing for the elements where we expect it */
.CodeMirror-scroll, .CodeMirror-sizer, .CodeMirror-gutter, .CodeMirror-gutters, .CodeMirror-linenumber { -moz-box-sizing: content-box; box-sizing: content-box; }
.CodeMirror-measure { position: absolute; width: 100%; height: 0; overflow: hidden; visibility: hidden; }
.CodeMirror-cursor { position: absolute; pointer-events: none; }
.CodeMirror-measure pre { position: static; }
div.CodeMirror-cursors { visibility: hidden; position: relative; z-index: 3; }
div.CodeMirror-dragcursors { visibility: visible; }
.CodeMirror-focused div.CodeMirror-cursors { visibility: visible; }
.CodeMirror-selected { background: #d9d9d9; }
.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
.CodeMirror-crosshair { cursor: crosshair; }
.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }
.cm-searching { background-color: #ffa; background-color: rgba(255, 255, 0, .4); }

/* Used to force a border model for a node */
.cm-force-border { padding-right: .1px; }
@media print {

  /* Hide the cursor when printing */
  .CodeMirror div.CodeMirror-cursors { visibility: hidden; }
}

/* See issue #2901 */
.cm-tab-wrap-hack:after { content: ''; }

/* Help users use markselection to safely style text background */
span.CodeMirror-selectedtext { background: none; }
.CodeMirror { height: auto; width: 100%; text-align: left; }
.CodeMirror-scroll { max-height: 500px; }
.CodeMirror pre { padding-left: 7px; font-size: 12px; line-height: 24px; }


/*DARK THEME*/
.CodeMirror { background: #303b42; color: #cbccc6; }
 div.CodeMirror-selected { background: #34455a; }
 .CodeMirror-line::selection,  .CodeMirror-line > span::selection,  .CodeMirror-line > span > span::selection { background: #34455a; }
 .CodeMirror-line::-moz-selection,  .CodeMirror-line > span::-moz-selection,  .CodeMirror-line > span > span::-moz-selection { background: rgba(25, 30, 42, 99); }
 .CodeMirror-gutters { background: #303b42; border-right: 0px; }
 .CodeMirror-guttermarker { color: white; }
 .CodeMirror-guttermarker-subtle { color:  rgba(112, 122, 140, 66); }
 .CodeMirror-linenumber { color: #bebcd7; font-size: 12px; }
 .CodeMirror-cursor { border-left: 1px solid #ffcc66;  }
.cm-fat-cursor .CodeMirror-cursor {background-color: #a2a8a175 !important;}
 .cm-animate-fat-cursor { background-color: #a2a8a175 !important; }

 span.cm-comment { color: #bebcd7; font-style:italic; }
 span.cm-atom { color: #ae81ff; }
 span.cm-number { color: #ffcc66; }

 span.cm-comment.cm-attribute { color: #ffd580; }
 span.cm-comment.cm-def { color: #d4bfff; }
 span.cm-comment.cm-tag { color: #5ccfe6; }
 span.cm-comment.cm-type { color: #5998a6; }

 span.cm-property { color: #C3E88D; }
 span.cm-attribute { color: #ffd580; }  
 span.cm-keyword { color: #12ca93; } 
 span.cm-builtin { color: #ffcc66; }
 span.cm-string { color: #C792EA; }

 span.cm-variable { color: #FFCB6B; }
 span.cm-variable-2 { color: #f28779; }
 span.cm-variable-3 { color: #5ccfe6; }
 span.cm-type { color: #ffa759; }
 span.cm-def { color: #f07178; }
 span.cm-bracket { color: rgba(92, 207, 230, 80); }
 span.cm-tag { color: #5ccfe6; }
 span.cm-header { color: #bae67e; }
 span.cm-link { color: #5ccfe6; }
 span.cm-error { color: #ff3333; } 

 .CodeMirror-activeline-background { background: #191e2a; }
 .CodeMirror-matchingbracket {
  text-decoration: underline;
  color: white !important;
}