body > .sprotty {
    height: calc(100vh - 22px);
    border: 3px solid #eee;
    user-select: none;
}

.sprotty-graph {
    height: 100%;
    width: 100%;
}

/* Task node styling */
.sprotty-node.task {
    fill: #c0e0fc;
    stroke: #444;
    stroke-width: 1;
}

.sprotty-node.task.mouseover {
    stroke: #bebebe;
}

.sprotty-node.task.selected {
    stroke-width: 2;
}

.sprotty-node.task.running {
    fill: #b54949;
}

.sprotty-node.task.finished {
    fill: #81BB41;
}

/* Edge styling */
.sprotty-edge, .arrowhead {
    fill: none;
    stroke: #252525;
    stroke-width: 4px;
}

.sprotty-edge {
    transition-duration: .2s;
}

.sprotty-edge.mouseover {
    stroke: #007add;
    transition-duration: .1s;
}

.sprotty-edge.good {
    stroke: green;
}

.sprotty-edge.good.mouseover {
    stroke: lightgreen;
}

.sprotty-edge.bad {
    stroke: red;
}

.sprotty-edge.bad.mouseover {
    stroke: lightcoral;
}

.sprotty-edge .sprotty-edge-transparent {
    stroke: transparent;
    stroke-width: 10px;
}

.sprotty-edge .sprotty-dashing {
    stroke-linejoin: round;
    transition-duration: .1s;
}

.sprotty-edge.selected .sprotty-dashing {
    stroke-dasharray: 7;
    animation: edge-dash 10s linear infinite;
    stroke-width: 6px;
    transition-duration: .2s;
}

@keyframes edge-dash {
  to {
    stroke-dashoffset: -210;
  }
}

.sprotty-edge.selected:not(.bad):not(.good) {
    stroke: #005997;
}

.sprotty-edge.selected.bad {
    stroke: darkred;
}

.sprotty-edge.selected.good {
    stroke: darkgreen;
}

.sprotty-edge.good .arrowhead {
    stroke: green;
    fill: green;
}

.sprotty-edge.bad .arrowhead {
    stroke: red;
    fill: red;
}



.sprotty-routing-handle {
    fill: #bebebe;
    stroke: #949494;
    stroke-width: 2px;
}


.sprotty-port.mouseover {
    fill: #007add;
}

.sprotty-port.good {
    fill: green;
}

.sprotty-port.good.mouseover {
    fill: lightgreen;
}

.sprotty-port.bad {
    fill: red;
}

.sprotty-port.bad.mouseover {
    fill: lightcoral;
}

/* Text styling */
text {
    stroke-width: 0;
    fill: #000;
    font-size: 10pt;
    text-anchor: middle;
}

.sprotty-separator {
    stroke-width: 2px;
    stroke: black;
}