path.arc {
    cursor: move;
    fill: #444;
    stroke: #ffc600;
    stroke-width: .2em;
}

.label-source {
    color: #04bd00;
}

.label-target {
    color: #a200cb;
}

.node {
    font-size: 1em;
    fill: #2c2c2c;
    stroke-width: 60px;
    stroke-opacity: .00;
    stroke: #2c2c2c;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

    .node:hover {
        fill: #1f77b4;
        font-weight: bold;
    }

.nonExisting {
    fill: #ff9000;
}

.link {
    fill: none;
    stroke: #20a4ff;
    stroke-opacity: .211;
    pointer-events: none;
    stroke-width: 0.12em;
}

    .link.out {
        stroke-opacity: .045 !important;
    }

    .link.source,
    .link.target {
        stroke-opacity: 1;
        stroke-width: 2px;
    }

.node.target {
    fill: #a200cb !important;
    font-weight: bold;
}

.link.source {
    stroke: #ce0aff;
}

.node.source {
    fill: #04bd00;
    font-weight: bold;
}


.node.selected {
    fill: #1f77b4 !important;
    font-weight: bold;
    font-size: 1.13em;
}

.link.target {
    stroke: #04bd00;
}

.subscribe {
    color: #a200cb;
}

    .subscribe:before {
        content: "•";
        padding-right: 8px;
    }

.publish {
    color: #04bd00;
}

    .publish:before {
        content: "•";
        padding-right: 8px;
    }

body {
    overflow-y: scroll;
}

.relations {
    margin-top: 25px;
}

.graph-node-label {
    font-size: 1rem;
    paint-order: stroke;
    stroke: white;
    fill: rgb(85, 85, 85);
    stroke-width: 3px;
    font-weight: 100;
}