:root {
    --units-vertical-offset: 25;
    --tick-vertical-offset: 4;
}

.legend-color {
    width: calc(40vw + 48px + 32px);
    background-color: white;
    margin-right: 2em;
    border-radius: 999px;
    overflow: hidden;
}

.legend-color:has(#legend-colors.discrete) {
    padding: 0;
}

svg#legend-colors {
    display: block;
    height: 3em;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    overflow: visible;
    width: 100%;
}

.legend-units-label,
.legend-axis .tick {
    /* NB: This font size & family must match the values used in the legend unit label size calculations. 1rem computes to 16px */
    font-size: 1rem;
    font-family: "Lato", Arial, sans-serif;
    font-weight: 400;
}

#legend-colors>rect,
#legend-colors .legend>rect {
    opacity: 0.75;
}



@media (max-width: 950px) {
    .info.legend-color {
        margin: 0 1em 1em 0;
    }
}

@media (max-width: 950px) and (orientation: landscape) {
    :root {
        --units-vertical-offset: 18;
        --tick-vertical-offset: 3.125;
    }

    svg#legend-colors {
        height: 2em;
    }
}

@media (max-width: 750px) {
    :root {
        --units-vertical-offset: 18;
        --tick-vertical-offset: 3.125;
    }

    .legend-color {
        width: calc(100vw - 1em - 4em - 1.5em);
    }

    svg#legend-colors {
        height: 2em;
    }
}