:root {
  --main-border-colour: #ddd;
  --primary-background-colour: #ffffff;
  --secondary-background-colour: #ececec;
  --primary-brand-colour: #333333;
}


  /*  .CodeMirror {
        border: 1px solid #eee;
        height: auto;
        max-height:300px;
    }*/
/*    .CodeMirror-scroll {
        height: auto;
        max-height:200px;
    }*/

/*
.CodeMirror-focused {
    border-color: #66afe9;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
*/

.CodeMirror {
font-family: 'Ubuntu Mono', monospace;
font-size: 16px;
   /*height: auto;*/
border-radius: 6px;
/* max-height:250px;*/
}


/* Hide cursor in readonly fields */
.CodeMirror-readonly .CodeMirror-cursor {
  display: none !important
}

/*
 .CodeMirror div.CodeMirror-scroll {
        height: auto;
        max-height:300px;
}


 .CodeMirror div.CodeMirror-cursor {
    border-left: 2px solid #b5ff33;
}*/

/*
 * A CodeMirror theme that approximates Vim syntax highlighting in the Ubuntu terminal.
 * Implementation inspired by https://github.com/codemirror/CodeMirror/blob/master/theme/material.css
 */
.cm-s-ubuntu.CodeMirror {
  background-color: #300a24;
  color: white;
}
.cm-s-ubuntu .CodeMirror-gutters {
  background: #300a24;
  color: white;
  border: none;
}
.cm-s-ubuntu .CodeMirror-guttermarker, .cm-s-ubuntu .CodeMirror-guttermarker-subtle, .cm-s-ubuntu .CodeMirror-linenumber {
  color: #fce94f;
}
.cm-s-ubuntu .CodeMirror-cursor {
  border-left: 1px solid white;
  border-right: 1px solid white;
}
.cm-s-ubuntu div.CodeMirror-selected {
  background: #6c6c6c;
}
.cm-s-ubuntu.CodeMirror-focused div.CodeMirror-selected {
  background: #6c6c6c;
}
.cm-s-ubuntu .cm-keyword {
  color: #34e2e2;
  font-weight: bold;
}
.cm-s-ubuntu .cm-operator {
  color: white;
}
.cm-s-ubuntu .cm-variable-2 {
  color: white;
}
.cm-s-ubuntu .cm-variable-3, .cm-s-ubuntu .cm-type {
  color: white;
}
.cm-s-ubuntu .cm-builtin {
  color: white;
}
.cm-s-ubuntu .cm-atom {
  color: #ad7fa8;
}
.cm-s-ubuntu .cm-number {
  color: white;
}
.cm-s-ubuntu .cm-def {
  color: white;
}
.cm-s-ubuntu .cm-string {
  color: #ad7fa8;
}
.cm-s-ubuntu .cm-string-2 {
  color: #ad7fa8;
}
.cm-s-ubuntu .cm-comment {
  color: #34e2e2;
}
.cm-s-ubuntu .cm-variable {
  color: white;
}
.cm-s-ubuntu .cm-tag {
  color: white;
}
.cm-s-ubuntu .cm-meta {
  color: white;
}
.cm-s-ubuntu .cm-attribute {
  color: #34e2e2;
}
.cm-s-ubuntu .cm-property {
  color: #87ffaf;
}
.cm-s-ubuntu .cm-qualifier {
  color: #ad7fa8;
}
.cm-s-ubuntu .cm-variable-3, .cm-s-ubuntu .cm-type {
  color: red;
}
.cm-s-ubuntu .cm-error {
  color: red;
  background-color: black;
}
.cm-s-ubuntu .CodeMirror-matchingbracket {
  text-decoration: underline;
  color: #34e2e2 !important;
}



.modal-code-editor {
 /* border-bottom: 1px solid var(--main-border-colour);*/
 /* min-height: 400px;
  height: 60%;*/
  margin-top:20px;
 margin-bottom:3px;
 /* border: 3px solid #eee;*/
  height: auto;
         color: white;
border-radius: 6px;
}

.modal-io-editor {
 /* border-bottom: 1px solid var(--main-border-colour);*/
 /* min-height: 400px;
  height: 60%;*/
  margin-top:20px;
 margin-bottom:0px;
  /*border: 3px solid #eee;*/
border: 3px solid   #ecf0f1;
  height: auto;
         color: white;
border-radius: 6px;
}


.card-code-editor {
 /* border-bottom: 1px solid var(--main-border-colour);*/
 /* min-height: 400px;
  height: 60%;*/
  margin-top:20px;
 margin-bottom:20px;
  /*border: 3px solid #eee;*/
/*border: 2px solid   #ecf0f1;*/
  height: auto;
         color: white;
border-radius: 6px;
}

.card-io-editor {
 /* border-bottom: 1px solid var(--main-border-colour);*/
 /* min-height: 400px;
  height: 60%;*/
  margin-top:20px;
 margin-bottom:20px;
  /*border: 3px solid #eee;*/
border: 3px solid   #ecf0f1;
  height: auto;
         color: white;
border-radius: 6px;
}







#sourceEditor {
 /* border-bottom: 1px solid var(--main-border-colour);*/
 /* min-height: 400px;
  height: 60%;*/
  margin-top:20px;
 margin-bottom:20px;
 border: 3px solid #eee;
  height: auto;
         color: white;
border-radius: 6px;
}

#selectLanguageBtn {
  max-width: 330px;
}

#inputLabel {
  border-right: 1px solid var(--main-border-colour);
}

#inputEditor, #outputEditor {
  min-height: 200px;
  height: 40%;

    border: 3px solid #eee;
border-radius: 6px;
    max-height:200px;
margin-bottom:30px;
}

#inputEditor {
/*  border-right: 1px solid var(--main-border-colour);
  padding-left: 0px;*/
}

#runBtn {
 /* width: 100px;*/
}

#saveBtn {
  width: 130px;
}

#statusLine {
  margin-right: 10px;
}

#footer {
  background-color: var(--primary-brand-colour);
  border-top: 1px solid var(--main-border-colour);
  padding-top: 40px;
  text-align: center;
  min-height: 100px;
  color: #777;
}

#footer a {
  text-decoration: none;
  font-weight: bold;
  color: #ddd;
}

#footer a:hover {
  color: #fff;
}

.vertical-spacer {
  display: inline-block;
  background-color: var(--main-border-colour);
  margin: 0px 10px -14px 10px;
  width: 1px;
  height: 34px;
}

#apiLink {
  color: #ddd;
  text-decoration: none;
  font-size: 85%;
}

#apiLink:hover {
  color: #fff;
}