:root {
    --lifeline-color: #bebebe;
    --lifeline-start-color: #98fb98;
    --lifeline-stop-ok-color: #98fb98;
    --lifeline-stop-error-color: #ff4400;
    --lifeline-stop-error-text-color: #ffffff;
    --event-color: #ffa500;
    --action-color: #ffffff;
    --internal-color: #e0e0e0;
    --activation-color: #ffffff;
    --turn-start-color: var(--event-color);
    --arrow-color: #000000;
}

html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

body {
    width: 100vw;
    height: 100vh;
    background: white;
    margin: 0;
    padding: 0;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-content: stretch;
}

body > p {
    padding: 0.33em 0.33em;
    margin: 0;
    border-bottom: solid black 1px;
}

body > div {
    background: blue;
    overflow: scroll;
    flex: 1;
}

svg {
    background: white;
    font-family: monospace;
    min-width: 100%;
    min-height: 100%;
}

svg rect.lifeline {
    fill: var(--lifeline-color);
}

svg rect.terminator {
    fill: var(--lifeline-color);
}

svg rect.lifeline-tail {
    fill: url(#swimlane-fadeout);
}

svg rect.activation {
    fill: var(--activation-color);
    stroke: #000;
}

svg text {
    white-space: pre;
    dominant-baseline: text-before-edge;
}

svg rect.start {
    fill: var(--lifeline-start-color);
    stroke: #000;
}

svg rect.stop-ok {
    fill: var(--lifeline-stop-ok-color);
    stroke: #000;
}

svg rect.stop-error {
    fill: var(--lifeline-stop-error-color);
    stroke: #000;
}
svg text.stop-error {
    fill: var(--lifeline-stop-error-text-color);
    stroke: none;
}

svg rect.event {
    fill: var(--event-color);
    stroke: #000;
}

svg rect.turn-start {
    fill: var(--turn-start-color);
    stroke: #000;
}

svg rect.action {
    fill: var(--action-color);
    stroke: #000;
}

svg rect.internal {
    fill: var(--internal-color);
    stroke: #000;
}

svg.placard {
    overflow: visible;
}

svg .arrow {
    fill: none;
    stroke: var(--arrow-color);
    stroke-width: 1;
    marker-end: url(#arrowhead);
}

svg .doublearrow {
    fill: none;
    stroke: var(--arrow-color);
    stroke-width: 1;
    marker-start: url(#arrowhead);
    marker-end: url(#arrowhead);
}