.code-tracer {
  margin-top: 2ex;
  margin-bottom: 2ex;
  border-bottom: 1px solid black;
}


.tracer-console {
  background-color: #F3F3F4;
  padding: 10px;
  min-width: 600px;
  display: inline-block;
  margin: 1em 1em 1em 0;
}

.tracer-console .tc-message {
  min-height: 0.25in;
  color: #0054a8;
  font-family: "DejaVuSans", Arial, sans-serif;
  font-weight: bold;
  font-size: 0.95em;
  margin-bottom: 1em;
}

.tracer-console .tc-message p {
  /*width: 50%;*/
  padding-right: 1ex;
  display: inline-block;
  margin: 0px;
}

.tracer-console .tc-message div.input {
  display: inline-block;
}

.tracer-console .tc-action {
  min-height: 0.35in;
}

.tracer-console .tc-action span.error {
  color: #E19042;
  font-family: "DejaVuSans", Arial, sans-serif;
  font-weight: bold;
  font-size: 0.95em;
}

.tracer-console .tc-action span.correct {
  min-height: 0.35in;
  color: #63B147;
  font-family: "DejaVuSans", Arial, sans-serif;
  font-weight: bold;
  font-size: 0.95em;  
}

.tracer-console button {
  font-weight: bold;
  padding: 0.25em 0.5em;
  border-radius: 0.5em;
}

.tracer-console button.action {
  background-color: #0054a8;
  color: white;
}

.tracer-console button.reset {
  background-color: #006666;
  color: white;
  font-weight: bold;
  float: right;
}

.tracer-console button.show {
  background-color: #E19042;
  color: white;
  font-weight: bold;
}


.tracer-grid {
  padding: 5px;
  grid-column-gap: 30px;
  grid-row-gap: 20px;
  align-items: start;
}

div.tracer-code {
  min-width: 3in;
  min-height: 1.5in;
}

div.tracer-code ol.listing {
  font-family: 'Courier New', monospace;
  font-size: 14.6px; /*13.33px;*/
  list-style-position: outside;
}

div.tracer-code ol.listing li {
  white-space: pre;  
  padding: 3px 0px 2px 10px;
}
 
div.tracer-code ol.listing li::marker {
  font-size: 13.33px;
  color: #555;
}

div.tracer-code ol.listing li.show {
  background-color: #FFFF99;
}

div.tracer-code ol.listing li.correct {
  background-color: #63B147;
}

div.tracer-code ol.listing li.error {
  background-color: #F4D3DD;
}


div.tracer-terminal {
  padding: 8px;
  margin: 1em;
  background-color: #F0F0F0;
  border: 1px solid black;
  border-radius: 10px;
  min-width: 3.5in;
/*  min-height: 2in;*/
}

div.tracer-terminal pre.tt-body {
  margin: 0px;
  padding: 1ex;
  line-height: 20px;
  background-color: white;
  border: 1px solid #bbb;
  height: 1.5in;
  font-family: 'Courier New', monospace; 
  font-size: 14.6px;
  color: #333;
  overflow-y: auto;
}
 
div.tracer-terminal .tt-body span.input {
  font-weight: bold;
}

div.tracer-canvas {
  padding: 4px;
  margin-left: 1em;
  margin-right: 1em;
}

div.tracer-canvas canvas {
}