/* ---------- Nodes ---------- */
.node * {
    transition: .1s ease-in-out;
}

.node-label {
    font: 12px sans-serif;
    text-anchor: start;
}

.node-icon {
    text-anchor: middle;
    fill: white;
}

.node foreignObject {
    align-content: center;
    text-align: center;
}


/* ---------- Links ---------- */
.link {
    fill: none;
    stroke-width: 1.5px;
}

.link:not(.has-children) {
    stroke-dasharray: 3, 3;
}

/* ---------- Node status ---------- */
[state=new] circle, [state=new].link {
    stroke: orange;
}

[state=new]:not(.has-children) circle {
    fill: white;
}

[state=new].has-children circle {
    fill: orange;
}

[state=implementable] circle, [state=implementable].link {
    stroke: orange;
}

[state=implementable]:not(.has-children) circle {
    fill: white;
}

[state=implementable].has-children circle {
    fill: orange;
}

[state=implemented] circle {
    stroke: steelblue;
}

[state=implemented].link {
    stroke: steelblue;
}

[state=implemented]:not(.has-children) circle {
    fill: white;
}

[state=implemented].has-children circle {
    fill: steelblue;
}

[state=solved] circle, [state=solved].link {
    stroke: green;
}

[state=solved] circle {
    fill: yellowgreen;
}

.feedback-required circle {
    stroke: magenta!important;
    fill: magenta!important;
}

.feedback-required.link {
    stroke: magenta!important;
}

/* ---------- Icons ---------- */
.node-icon-implementation {
    color: steelblue;
    font-size: 9pt;
}

.node-icon-expand {
    color: coral;
    background-color: #f4f4f4;
    border-radius: 50%;
}


/* ---------- Hover ---------- */
.node circle:hover {
    fill: cyan!important;
    stroke: steelblue!important;
}

.node text:hover {
    fill: steelblue;
}

.node foreignObject.node-icon-expand {
    color: gray;
}

.node foreignObject.node-icon-expand:hover {
    color: red;
}

/* ---------- Loading animation ---------- */
.running circle {
    animation: loading_circle 1s ease-in-out 0s infinite alternate;
    stroke: #0d6efd;
    stroke-width: 2px;
    fill: #f4f4f4;
}

.running foreignObject {
    display: none;
}

@keyframes loading_circle {
    0% {
        r: 9px;
    }

    100% {
        r: 3px;
    }
    
}