:root {
    --network-icon-color: #FFFFFF;
    --network-dot-color: #878787;
    --network-line-color: #AFAFAF;
    --network-highlight-color: var(--color-brand-6);
}

.dots {
    fill: var(--network-dot-color);
}
.map {
    fill: var(--network-line-color);
}
.icon {
    fill: var(--network-icon-color);
}
.glow {
    animation: glowPoint var(--glow-duration, 5s) infinite alternate;
    animation-delay: var(--glow-delay, 0);
    --glow-color: var(--color-brand-6);
}

.glow--v1 {
    --glow-duration: 4s;
}
.glow--v2 {
    --glow-duration: 7s;
}
.glow--v3 {
    --glow-duration: 3s;
}
.glow--v4 {
    --glow-duration: 8s;
}
.glow--v5 {
    --glow-duration: 6s;
}

.glow--d1 {
    --glow-delay: 1s;
}
.glow--d2 {
    --glow-delay: 2s;
}
.glow--d3 {
    --glow-delay: 3s;
}
.glow--d4 {
    --glow-delay: 4s;
}

.glow--c1 {
    --glow-color: var(--color-brand-1);
}
.glow--c2 {
    --glow-color: var(--color-brand-2);
}
.glow--c3 {
    --glow-color: var(--color-brand-3);
}
.glow--c4 {
    --glow-color: var(--color-brand-4);
}
.glow--c5 {
    --glow-color: var(--color-brand-5);
}
.glow--c6 {
    --glow-color: var(--color-brand-6);
}
.glow--c7 {
    --glow-color: var(--color-brand-7);
}
.glow--c8 {
    --glow-color: var(--color-brand-8);
}

@keyframes glowPoint {
    0%   { filter: drop-shadow(0 0 2px transparent); }
    30%   { filter: drop-shadow(0 0 2px transparent); }
    30%   { filter: drop-shadow(0 0 2px var(--glow-color)); }
    60% { filter: drop-shadow(0 0 16px var(--glow-color)); fill: var(--glow-color); }
    80% { filter: drop-shadow(0 0 2px var(--glow-color)); fill: var(--glow-color); }
    80% { filter: drop-shadow(0 0 2px transparent); fill: inherit; }
    100%   { filter: drop-shadow(0 0 2px transparent); }
}

@media (prefers-reduced-motion: reduce) {
    .glow {
        animation: none;
        filter: none;
    }
}