.CodeMirror{
    /* Set height, width, borders, and global font properties here */
    /* height:auto; */
    height: 100%;
    /* font-size: 50 px; */
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    /*color: black;
    direction: ltr; */
}
.line-error{
  /* background: #ffc5c5 !important; */
  /* background: #525151 !important; */
  
  /* background: #314D67 !important; */
  /*  Good One */
  /* background: #673531 !important; */
  background: #673131 !important;
  
  /* color: #000000 !important; */
}

.line-executed{
  background: #314D67 !important;
  /* background: #316737 !important; */
  /* background: #316756 !important; */
  /* background: #608e73 !important; */

}
/* .line-stopped{
  background: #313c67 !important;
} */

/* .cm-s-midnight.CodeMirror{background:#0f192a;}
.CodeMirror-gutters{background:#0f192a;} */

.cm-s-midnight.CodeMirror{
  background:#212529;
  color: #f8f8f2;}
.cm-s-midnight .CodeMirror-gutters { background:#212529}
.cm-s-midnight span.cm-bracket { color: #f8f8f2 }
.cm-s-midnight span.cm-number { color:#428BDD}
.cm-s-midnight span.cm-comment { color: #8292a2 }
.cm-s-midnight span.cm-def { color: #FFAA3E }

.cm-s-midnight span.cm-error {
  /* background: #F92672; */
  background: #dc3545 !important;
}
/* Feedback highlighting (help modality 3, error_pointed): treasure-gold tint on the
   "background" layer so it never fights the red error line on the "text" layer. */
@keyframes line-feedback-blink {
  0%, 100% { background-color: #4a3a10; box-shadow: inset 5px 0 0 #b8860b; }
  50%      { background-color: #8a6a10; box-shadow: inset 5px 0 0 #ffe082; }
}
.line-feedback{
  background: #5a4614 !important;
  box-shadow: inset 4px 0 0 #ffc107;
  animation: line-feedback-blink 0.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .line-feedback { animation: none; }
}
.token-feedback{
  text-decoration: underline wavy #ffc107;
  text-underline-offset: 3px;
  font-weight: bold;
}