body{
    background-color: #808080;
    color: #d4d4d4;
    font-family: sans-serif;
    margin: 0;
}
html, body { width:100%; height:100%; }
.node:before{
    content:attr(title) " ";
    display: block;
    border-top-left-radius:.75em;
    border-top-right-radius:.75em;
    background-color:#6e6e6e;
    padding:0.1em .3em 0em;
    margin:-.1em -.3em 0.2em;
}
.node{
    background-color: #4e4e4e;
    border-radius: .75em;
    display: inline-block;
    padding:0.1em .3em .25em;
    position:absolute;
}
.output,
.rconnection:after{
    position:absolute;
    border:solid 1px var(--node-color);
    background-color:#2e2e2e;
    width:0.5em;
    height:0.5em;
    border-radius:0.5em;
}
.node.connected > .output,
.rconnection.filled:after{
    border:solid 1px transparent;
    background-color:var(--node-color);
}

.output,
.lconnection:before{
    position:absolute;
    border:solid 1px var(--node-color);
    background-color: #2e2e2e;
    width:0.5em;
    height:0.5em;
    border-radius:0.5em;
}
.node.connected > .output,
.lconnection.filled:before{
    border:solid 1px transparent;
    background-color:var(--node-color);
}

.node > .output:hover,
.rconnection:hover:after{
    border-color:red;
}

.node > .input:hover,
.lconnection:hover:before{
    border-color:red;
}

.output{
    left: -.5em;
    top:1em;
    cursor: pointer;
}
.rconnection{
    width:100%;
    position:relative;
    padding-right:0.5em;
    cursor:pointer;
    text-align: right;
    --node-color: #2e2e2e;
}
.lconnection{
    width:100%;
    position:relative;
    padding-left:0.5em;
    cursor:pointer;
    --node-color: #2e2e2e;
}
.rconnection:after{
    content:"";
    right:-0.25em;
    top:0.25em;
}
.lconnection:before{
    content:"";
    left:-0.5em;
    top:0.25em;
}
svg{
    position:absolute;
    top:0px;
    left:0px;
    z-index:-100;
    width:100%;
    height:50%;
    background-color: #2e2e2e;
}