/* sankey styles */

.diagram{
    border: 2px solid #000;
    margin-bottom: 20px;
}

@media screen and (max-width: 500px){
    #results{
        transform: rotate(90deg);
        flex-shrink: 0;
        margin: 110px auto 110px auto;
    }
    /*  unrotate the text on all nodes except the exhausted node   */
    .node:not(.exh) text{   transform: rotate(-90deg);  }
}

/*
svg .popup{
    visibility: hidden;
    transform: translate(3.5%, -14%) rotate(-90deg);
    background-color: #000;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 10;
}
.node rect:hover ~ .popup{ visibility: visible;    }
*/

.node rect {
    cursor: pointer;
    fill-opacity: .9;
    shape-rendering: crispEdges;
}
  
.node text {
    pointer-events: none;
    text-shadow: 0 0 4px #FFF;
    font: 20px Arial, sans-serif;
}

.link { stroke-opacity: .2; }
.link:hover {   stroke-opacity: .5; }