.center {
  dominant-baseline: middle;
  text-anchor: middle;
}
.right {
  dominant-baseline: middle;
  text-anchor: end;
}

.background path { stroke: lightsteelblue; fill: none }

path {
  fill: none;
  stroke: black;
}

.unknown > rect { fill: red }
.unknown > text { font-size: 75% }

.literal > rect { fill: burlywood }
.literal > text {
  font-family: monospace;
  dominant-baseline: middle;  /* center */
  text-anchor: middle;
}

.special > rect { fill: lightblue }
.special > text { font-size: 75% }

.everything > circle { fill: lightcoral }
.everything > text { font-size: 24pt }

.char-class > rect {
  stroke: gray;
  fill: #ccc;
}
.inverted-char-class > rect {
  stroke: gray;
  fill: #ccc;
}
.inverted-char-class > text {
  fill: white;
}

rect.hover {
  opacity: 0.0;
  stroke: none;
}
rect.hover:hover {
  fill: cyan;
  opacity: 0.5;
}

.repetition > rect {
  stroke: none;
/*  fill: gray;
  opacity: 0.2;
*/
  fill: none; /* temporary, until i remember how to do svg hover effects */
}

/* .range text { font-size: 5pt } */

/* .group: not visible */

.register > rect {
  stroke: #444;
  stroke-width: 1px;
  fill: none;
  stroke-dasharray: 8, 3;
}
.register-number > rect { 
  stroke: black;
  stroke-width: 1px;
  fill: white;
  opacity: 0.8;
}

.register-number {
  display: none;
}
.register-outline {
  display: none;
}

.lookaround path.fork {
  stroke-dasharray: 4, 1.5;
}
.lookaround .fog {
  fill: white;
  opacity: 0.4;
}

text.label {
  font-family: serif;
  font-size: 8pt;
  fill: black;
}

.palette rect {
  fill: silver;
  opacity: 0.5;
}

/* tests! (html, for now) */
table { border: 1px solid blue }
th { border: 1px solid red }
td { border: 1px solid green }
td.testcase { font-family: monospace }
td.pass { background: lawngreen }
td.fail { background: tomato; text-align: center }