.CodeMirror {
  width: 90%;
  height: 300px;
  margin-left: 22px;
  font-size: 14px;
  border: 2px solid grey;
}

.CodeMirror * {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
  font-size: 14px;
  color: #3f3f3f;
}

.CodeMirror-code {
  /* Force LTR */
  text-align: left;
}

.CodeMirror-code > div {
  height: 17px;
}

.CodeMirror pre {
  line-height: 17px;
}

.CodeMirror-cursor {
  height: 17px;
}

.CodeMirror-gutters {
  background: #f0f0f0;
  color: #333;
}

.CodeMirror-lines {
  padding: 0;
}

.CodeMirror-activeline-background {
  background: #edf3f7;
}

.cm-s-default .cm-comment {color: #50B900;}
.cm-s-default .cm-function {color: #005BD0;}
.cm-s-default .cm-keyword {color: #999999;}
.cm-s-default .cm-literal {color: #005BD0;}
.cm-s-default .cm-ruleOrCons {color: #FF812B;}
.cm-s-default .cm-separator {color: #3f3f3f;}
.cm-s-default .cm-singleQuotes {color: #9269C9;}
.cm-s-default .cm-string {color: #9269C9;}
.cm-s-default .cm-type {color: #9269C9;}
.cm-s-default .cm-variable {color: #24B0ED;}

div.CodeMirror span.CodeMirror-matchingbracket {color: #62E300; font-weight: 700;}
div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #FA5B6A; font-weight: 700;}


.cm-s-control .cm-ruleOrCons {
  border-bottom: 1px dotted black;
}

.cm-s-control .cm-ruleOrCons:hover {
  border-bottom: 1px solid black;
  cursor: pointer;
}

.CodeMirror-selected {
    background-color: rgba(215, 212, 240, .5) !important;
}