:root {
  --panel: #222;
  --border: #444;
  --accent: #AAA;
  --highlight: #FFF;
  --highlight2: #BBB;
  --leaf: #EE4;
  --op: #AAA;
  --input-color: steelblue;
}

.tf {
  border: 1px solid var(--border);
  padding: 2px 12px;
  text-align: center;
  color: var(--highlight);
}

.tf.nb { border-left: none; border-top: none; border-bottom: none; color: var(--accent); }
.tf.bb { background: #1a1a1a;}
.tf.op {font-family:monospace;font-size:100%;font-weight:bold;}


#truthTableContainer {
  overflow-x: auto;
  margin-top: 1em;
}

table.truthTable {
  border-collapse: collapse;
  margin: 0 auto;
  font-family: inherit;
  font-style: italic;
  font-size: 90%;
  margin-top:2em;
}

table.truthTable thead {
  border-bottom: 2px solid #888;
}

table.truthTable th {
  background: #222;
  color: var(--highlight);
  border: 1px solid var(--border);
  padding: 4px 10px;
  text-align: center;
}

table.truthTable th.subformula {
  color: var(--op);
}

table.truthTable td {
  border: 1px solid var(--border);
  padding: 0px 8px;
  text-align: center;
}

table.truthTable td.val-true  { color: #4F8; }
table.truthTable td.val-false { color: #F44; }
table.truthTable td.var-col   { color: var(--leaf); }
table.truthTable td.final-col { color: var(--highlight); font-weight: bold; }

table.truthTable tr:nth-child(even) { background: #1a1a1a; }
table.truthTable tr:nth-child(odd)  { background: #141414; }

#error {
  color: #f88;
  margin-top: 0.5em;
  font-family: inherit;
  min-height: 1.2em;
}

.connector {
  color: #8C8;
  border: dotted;
  border-radius: 0.2em;
  border-width: 0.075em;
  border-color: inherit;
  padding-top: 0.0em;
  padding-bottom: 0.1em;
  padding-left: 0.15em;
  padding-right: 0.25em;
  font-style: italic;
}