#g-chart {
    background: #0e0e10;
    border-radius: 8px;
    overflow: hidden;
    height: calc(100vh - 220px);
    min-height: 500px;
}
#g-chart svg { display: block; width: 100%; height: 100%; cursor: grab; }
#g-chart svg:active { cursor: grabbing; }

.tl-legend .line {
    width: 18px; height: 3px; border-radius: 2px; display: inline-block;
}

.g-link {
    fill: none;
    stroke-opacity: 0.55;
    transition: stroke-opacity 0.1s, stroke-width 0.1s;
    cursor: pointer;
}
.g-link:hover { stroke-opacity: 1; }
.g-link.dim { stroke-opacity: 0.06; }

.g-link-waiting_me   { stroke: #ff5a5a; }
.g-link-waiting_them { stroke: #ffd95a; }
.g-link-stalled      { stroke: #8a8a90; }
.g-link-closed       { stroke: #4dd0e1; }
.g-link-open         { stroke: #c0c0c8; }

.g-node circle {
    stroke: #0e0e10;
    stroke-width: 1.5;
    cursor: grab;
    transition: stroke 0.1s;
}
.g-node:active circle { cursor: grabbing; }
.g-node:hover circle { stroke: #fff; stroke-width: 2; }

.g-node-me circle { fill: #4dd0e1; }
.g-node-peer circle { fill: #c0c0c8; }

.g-label {
    fill: #e8e8ea;
    font-size: 11px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    pointer-events: none;
    text-anchor: middle;
    paint-order: stroke;
    stroke: #0e0e10;
    stroke-width: 3;
    stroke-linejoin: round;
}
.g-label-me { font-size: 13px; font-weight: 600; }
.g-label-org { fill: #888; font-size: 9px; }

.tl-tooltip .tt-edge-status {
    display: inline-block; padding: 0.05rem 0.4rem; border-radius: 3px;
    font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
    margin-left: 0.4rem;
}
.tt-edge-status.s-waiting_me   { background: #5a1c1c; color: #ff9a9a; }
.tt-edge-status.s-waiting_them { background: #5a4a1c; color: #ffd97a; }
.tt-edge-status.s-stalled      { background: #2a2a2d; color: #888; }
.tt-edge-status.s-closed       { background: #1c4a52; color: #4dd0e1; }
.tt-edge-status.s-open         { background: #2a2a2d; color: #aaa; }