svg { box-sizing: content-box; }
#map { 
    margin-top: 30px;
    margin-bottom: 30px;
    position: relative;
    max-width: 900px;
}

span.label.centroid::before { 
    width: 1px;
    height: 1px;
    border: 1px solid var(--carmine); 
    background-color: var(--carmine);
    position: relative;
    top: -4px;
    margin: 0 4px 0 3px;
}
span.label.basemap::before { 
    width: 8px;
    height: 8px;
    border: 1px solid var(--eggshell-dark-muddy);
}

path.region,
path.country {
    fill: none;
    stroke-opacity: .4;
    stroke-width: 1;
    pointer-events: none;
    stroke-linejoin: round;
}
path.region {
    stroke: var(--eggshell-text);
    stroke-width: 1.5;
}
path.country { stroke: var(--eggshell-dark-muddy); }
path.district { 
    fill: var(--eggshell-muddy);
    fill-opacity: 0;
    stroke: var(--eggshell-dark-muddy);
    stroke-width: .25;
    stroke-opacity: 1;
    stroke-linejoin: round;
    transition: fill-opacity .1s ease-in;
    cursor: help;
}
path.district.highlighted { fill-opacity: 1; }
#regions { pointer-events: none; }
#regions path { transition: fill .1s ease-in; }
#regions path.highlighted { 
    fill: var(--yellow)!important; 
    stroke: #805b12;
    stroke: var(--eggshell-text);
}

#details {
    position: absolute;
    top: 20px;
    left: 0;
}

#legend-title {
    font-size: 15px;
    margin-bottom: 8px;
}
#legend-title #region-name {
    font-style: italic;
    color: var(--carmine);
}
#working-age-groups .group rect.base { fill: var(--eggshell-light); transition: fill .3s; }
#working-age-groups .group line.divider { fill: none; stroke: var(--eggshell-muddy); shape-rendering: crispEdges; }
#working-age-groups .group line.divider.accent { stroke: var(--eggshell-dark-muddy); }
#working-age-groups .group { cursor: pointer; }
#working-age-groups .radio circle {
    transition: fill .3s, opacity .3s;
}
#working-age-groups .radio-outline {
    fill: none;
    stroke: var(--eggshell-muddy);
    stroke-width: 8;
    opacity: 0;
}
#working-age-groups .radio-base {
    fill: var(--eggshell-light);
    stroke: var(--eggshell-text);
}
#working-age-groups .radio-inner { 
    fill: var(--eggshell-light);
    stroke: var(--text);
    stroke-opacity: .8;
    opacity: 0;
}

#working-age-groups .group text {
    font-family: 'Noto Sans', sans-serif;
    font-size: 12px;
}
#working-age-groups .group-name { fill: var(--text); }
#working-age-groups .group-value { 
    /* fill: var(--eggshell-text);  */
    fill: var(--carmine); 
    font-style: italic;
    text-anchor: end;
}

#working-age-groups .group:hover rect.base { fill: #F7F5F1; }
#working-age-groups .group:hover .radio-outline { opacity: 1; }

#working-age-groups .active.group { pointer-events: none; }
#working-age-groups .active rect.base { fill: #F1F0EB; }
#working-age-groups .active .radio-base { fill: var(--eggshell-text); }
#working-age-groups .active .radio-inner { opacity: 1; }

#working-age {
    font-weight: bold;
    position: relative;
    cursor: pointer;
    color: var(--grape-wet);
}
#working-age::after {
    content: "▼";
    font-size: 12px;
    display: block;
    position: absolute;
    top: 3px;
    right: -15px;
}
#legend-title.open #working-age::after { content: "▲"; }
#working-age:hover { color: var(--carmine); }

#working-age-groups .group-strips .strip {
    fill: none;
    stroke: var(--eggshell-text);
    stroke-opacity: .3;
    stroke-width: .5;
    shape-rendering: crispEdges;
}
#working-age-groups .group-strips .refline {
    fill: none;
    stroke: var(--text);
    shape-rendering: crispEdges;
}
#legend .tick line {
    fill: none;
    stroke: var(--eggshell-light);
    stroke-width: .5;
    shape-rendering: crispEdges;
}
#legend .tick text {
    font-size: 9px;
    fill: var(--eggshell-text);
    text-anchor: middle;
}



#options li.option {
    list-style-type: "\2192";
    padding-left: 7px;
    cursor: pointer;
}
#options li.option::marker { color: var(--eggshell-text); }
#options li.option:hover strong,
#options li.option:hover::marker { color: var(--carmine); }

#options li.option.active {
    list-style-type: "\2192";
    color: var(--text);
    pointer-events: none;
    opacity: 1;
}
#options li.option.active strong { 
    color: var(--eggshell-light); 
    background-color: var(--carmine);
    display: inline-block;
    padding: 0 7px;
    border-radius: 3px;
}
#options li.option.active::marker { color: var(--carmine); }

#credits {
    margin-top: 45px;
    border-top: 1px solid var(--eggshell-muddy);
    padding-top: 25px;
}
#credits p {
    font-size: 14px;
    font-style: italic;
    color: var(--eggshell-text);
    margin-bottom: 6px;
}



@media (max-width: 960px) {
    /* #map { margin-top: 0; } */
    #details { top: 0px; }
}

@media (max-width: 860px) {
    #details {
        background-color: var(--eggshell-light);
        /* max-width: 300px; */
        position: sticky;
        top: 0;
        /* display: flex; */
        /* gap: 75px; */
        /* flex-direction: row; */
        /* justify-content: flex-start; */
        padding-top: 5px;
        /* padding-bottom: 185px; */
        /* margin-bottom: 15px; */
    }
    /* #cartogram { margin-top: -30px; } */
    .row {
        flex-direction: column;
        gap: 15px;
        margin-bottom: 25px;
    }
    .row .row-primary { max-width: unset; }
}
@media (max-width: 660px) {
    /* #details { margin-bottom: -20px; } */
    /* #map .legend .label { font-size: 18px; } */
}
@media (max-width: 660px) {
    .row .row-secondary { max-width: 440px; }
}
@media (max-width: 520px) { 
    /* #details { margin-bottom: -10px; } */
}