:root {
    --stroke-default: #000;
    --stroke-prev: #999;
    --stroke-teth: #f9f;
    --stroke-lead: rgb(61, 255, 51);
    --stroke-meet: #86f;
    --stroke-post: rgb(255, 174, 60);
    --stroke-cargo: rgb(255, 0, 0);
    --stroke-focus: #ff17c9;
    --stroke-highlight: yellow;
    --stroke-select: rgb(0, 255, 60);
}

#outer {
    display: flex;
    height: 100vh;
}
svg {
    background-color: rgb(239, 255, 250);
    flex-grow: 100;
}
circle {
    stroke: var(--stroke-default);
    stroke-width: 1;
}
path {
    fill: none;
}
.prev {
    stroke: var(--stroke-prev);
    stroke-linecap: butt;
}
.teth {
    stroke: var(--stroke-teth);
    stroke-linecap: butt;
}
.lead {
    stroke: var(--stroke-lead);
    stroke-linecap: butt;
}
.meet {
    stroke: var(--stroke-meet);
    stroke-linecap: butt;
}
.post {
    stroke: var(--stroke-post);
    stroke-linecap: butt;
}
.cargo {
    stroke: var(--stroke-cargo);
    stroke-linecap: butt;
}
.dashed {
    stroke-dasharray: 3;
}
.focus {
    r: 9;
    stroke-width: 4;
    stroke: var(--stroke-focus);
}
.highlight {
    r: 8;
    stroke-width: 4;
    stroke-opacity: 50%;
    stroke: var(--stroke-highlight);
}
.select {
    r: 8;
    fill-opacity: 50%;
    stroke-width: 3;
    stroke: var(--stroke-select);
}
#sidebar {
    float: right;
    overflow: scroll;
    width: 50%;
}
.hidden {
    display: none;
}
.nodesparkles {
    animation: rainbow 5071ms infinite;
}
.rainbowsparkles {
    animation: sparkle 3s infinite alternate ease-in-out;
}
@keyframes rainbow {
    0% {
    }
    20% {
        filter: hue-rotate(90deg) drop-shadow(16px 16px 20px blue) brightness(2) saturate(200%);
    }
    70% {
        filter: hue-rotate(120deg) blur(1px) brightness(3) saturate(300%);
        r: 12;
    }
    100% {
        filter: hue-rotate(200deg);
        r: 9
    }
}
@keyframes sparkle {
    0% {
        stroke-dasharray: 1px;
        stroke-dashoffset: 0%;
    }
    50% {
        stroke-dasharray: 30px;
        stroke-opacity: 50%;
        stroke-width: 5;
        stroke-dashoffset: 15%;
        filter: hue-rotate(90deg);
    }
    80% {
        stroke-dasharray: 8px;
        stroke-width: 2;
        stroke-dashoffset: 10%;
        filter: hue-rotate(180deg);
    }
    100% {
        stroke-dasharray: 17px;
        stroke-width: 3;
        stroke-dashoffset: 30%;
        filter: hue-rotate(2700deg);
    }
}

/* Color Legend Styles */
#svg-color-legend {
    /* This will be positioned in JavaScript */
    pointer-events: auto; /* Allow interaction with the legend */
    cursor: pointer;
    opacity: 70%;
    transition: opacity 0.3s ease;
}

#svg-color-legend:hover {
    opacity: 95%;
}

.legend-background {
    fill: rgba(255, 255, 255, 0.9);
    stroke: #ccc;
    stroke-width: 1;
}

.legend-content {
    cursor: pointer;
}

.legend-title {
    font-size: 12px;
    font-weight: bold;
}

.legend-text {
    font-size: 10px;
    font-family: sans-serif;
}

/* Hamburger icon styles */
.legend-hamburger {
    cursor: pointer;
    opacity: 1;
    transition: all 0.3s ease;
}

.legend-hamburger:hover .legend-background {
    fill: rgba(235, 235, 255, 0.95);
    stroke: #999;
    stroke-width: 2;
    filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.2));
}

/* Collapsed and expanded states */
.legend-collapsed .legend-content {
    display: none;
}

.legend-collapsed .legend-hamburger {
    display: block;
}

#svg-color-legend:not(.legend-collapsed) .legend-hamburger {
    display: none;
}