svg.railroad-diagram path {
  stroke-width: 3;
  stroke: black;
  fill: rgba(0, 0, 0, 0);
}

svg.railroad-diagram text {
  font: bold 14px monospace;
  text-anchor: middle;
}

svg.railroad-diagram text.label {
  text-anchor: start;
}

svg.railroad-diagram text.comment {
  font: italic 12px monospace;
}

svg.railroad-diagram g.non-terminal rect {
  fill: hsl(223, 100%, 83%);
}

svg.railroad-diagram rect {
  stroke-width: 3;
  stroke: black;
  fill: hsl(190, 100%, 83%);
}

.diagramHeader {
  display: inline-block;
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  font-weight: bold;
  font-family: monospace;
  font-size: 18px;
  margin-bottom: -8px;
  text-align: center;
}

.diagramHeaderDef {
  background-color: lightgreen;
}

svg.railroad-diagram text {
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

svg.railroad-diagram g.non-terminal rect.diagramRectUsage {
  color: green;
  fill: yellow;
  stroke: 5;
}

svg.railroad-diagram g.terminal rect.diagramRectUsage {
  color: green;
  fill: yellow;
  stroke: 5;
}

div {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

svg {
  width: 100%;
}

svg.railroad-diagram g.non-terminal text {
  cursor: pointer;
}