/* SVG Styles (for result diagrams) */
svg {
    display: block;
    margin: auto;
}
svg.railroad-diagram {
    display: block;
    background-color: hsl(30,20%,95%);
}
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.diagram-text {
    font-size: 14px;
}
svg.railroad-diagram text.diagram-arrow {
    font-size: 16px;
}
svg.railroad-diagram text.label {
    text-anchor: start;
}
svg.railroad-diagram text.comment {
    font: italic 12px monospace;
}

svg.railroad-diagram g.non-terminal text {
    color: #eeeeee;
    fill: #eeeeee;
    stroke: none;
    font-family: "Fira Code";
    font-weight: normal;
    font-size: 0.9em;
    line-height: 1.2em;
}
svg.railroad-diagram g.non-terminal rect {
    stroke-width: 2;
    stroke: black;
    fill: #4e88c7;
}
svg.railroad-diagram g.terminal text {
    font-family: "Fira Code";
    font-weight: normal;
    font-size: 0.8em;
    line-height: 1.2em;
}
svg.railroad-diagram g.terminal rect {
    stroke-width: 2;
    stroke: black;
    fill: hsl(120,100%,90%);
}
svg.railroad-diagram path.diagram-text {
    stroke-width: 2;
    stroke: black;
    fill: white;
    cursor: help;
}
svg.railroad-diagram g.diagram-text:hover path.diagram-text {
    fill: #eee;
}