.CodeMirror {
    width: 100%;
    height: 600px;
  }
  
  .CodeMirror-scroll {
    width: 100%;
  }
  
  /* codemirror theme css */
  .cm-s-ayu-mirage.CodeMirror {
    background: #1f2430;
    color: #cbccc6;
  }
  
  .cm-s-ayu-mirage div.CodeMirror-selected {
    background: #34455a;
  }
  
  .cm-s-ayu-mirage .CodeMirror-line::-moz-selection, .cm-s-ayu-mirage .CodeMirror-line > span::-moz-selection, .cm-s-ayu-mirage .CodeMirror-line > span > span::-moz-selection {
    background: #34455a;
  }
  
  .cm-s-ayu-mirage .CodeMirror-line::selection, .cm-s-ayu-mirage .CodeMirror-line > span::selection, .cm-s-ayu-mirage .CodeMirror-line > span > span::selection {
    background: #34455a;
  }
  
  .cm-s-ayu-mirage .CodeMirror-line::-moz-selection, .cm-s-ayu-mirage .CodeMirror-line > span::-moz-selection, .cm-s-ayu-mirage .CodeMirror-line > span > span::-moz-selection {
    background: #191e2a;
  }
  
  .cm-s-ayu-mirage .CodeMirror-gutters {
    background: #1f2430;
    border-right: 0px;
  }
  
  .cm-s-ayu-mirage .CodeMirror-guttermarker {
    color: white;
  }
  
  .cm-s-ayu-mirage .CodeMirror-guttermarker-subtle {
    color: #707a8c;
  }
  
  .cm-s-ayu-mirage .CodeMirror-linenumber {
    color: #3d424d;
  }
  
  .cm-s-ayu-mirage .CodeMirror-cursor {
    border-left: 1px solid #ffcc66;
  }
  
  .cm-s-ayu-mirage.cm-fat-cursor .CodeMirror-cursor {
    background-color: #a2a8a175 !important;
  }
  
  .cm-s-ayu-mirage .cm-animate-fat-cursor {
    background-color: #a2a8a175 !important;
  }
  
  .cm-s-ayu-mirage span.cm-comment {
    color: #5c6773;
    font-style: italic;
  }
  
  .cm-s-ayu-mirage span.cm-atom {
    color: #ae81ff;
  }
  
  .cm-s-ayu-mirage span.cm-number {
    color: #ffcc66;
  }
  
  .cm-s-ayu-mirage span.cm-comment.cm-attribute {
    color: #ffd580;
  }
  
  .cm-s-ayu-mirage span.cm-comment.cm-def {
    color: #d4bfff;
  }
  
  .cm-s-ayu-mirage span.cm-comment.cm-tag {
    color: #5ccfe6;
  }
  
  .cm-s-ayu-mirage span.cm-comment.cm-type {
    color: #5998a6;
  }
  
  .cm-s-ayu-mirage span.cm-property {
    color: #f29e74;
  }
  
  .cm-s-ayu-mirage span.cm-attribute {
    color: #ffd580;
  }
  
  .cm-s-ayu-mirage span.cm-keyword {
    color: #ffa759;
  }
  
  .cm-s-ayu-mirage span.cm-builtin {
    color: #ffcc66;
  }
  
  .cm-s-ayu-mirage span.cm-string {
    color: #bae67e;
  }
  
  .cm-s-ayu-mirage span.cm-variable {
    color: #cbccc6;
  }
  
  .cm-s-ayu-mirage span.cm-variable-2 {
    color: #f28779;
  }
  
  .cm-s-ayu-mirage span.cm-variable-3 {
    color: #5ccfe6;
  }
  
  .cm-s-ayu-mirage span.cm-type {
    color: #ffa759;
  }
  
  .cm-s-ayu-mirage span.cm-def {
    color: #ffd580;
  }
  
  .cm-s-ayu-mirage span.cm-bracket {
    color: #5ccfe6;
  }
  
  .cm-s-ayu-mirage span.cm-tag {
    color: #5ccfe6;
  }
  
  .cm-s-ayu-mirage span.cm-header {
    color: #bae67e;
  }
  
  .cm-s-ayu-mirage span.cm-link {
    color: #5ccfe6;
  }
  
  .cm-s-ayu-mirage span.cm-error {
    color: #ff3333;
  }
  
  .cm-s-ayu-mirage .CodeMirror-activeline-background {
    background: #191e2a;
  }
  
  .cm-s-ayu-mirage .CodeMirror-matchingbracket {
    text-decoration: underline;
    color: white !important;
  }