.dashboard-container {
    height: auto;
    overflow-x: scroll;
    margin: 1.5rem 0;

    & .form-head {
        margin-bottom: .5rem;

        & .form-title {
            display: block;
            color: var(--blue1);
            fill: var(--blue1);
            font-size: .875rem;
            font-size: clamp(.75rem, .625rem + .5vw, .875rem);
            font-weight: bold;
        }
        
        & .form-desc {
            display: block;
            color: var(--blue2);
            fill: var(--blue2);
            font-size: .625rem;
            line-height: 1.2em;
            text-wrap: balance;
        }
    }

    & .dashboard-bg {
        background: var(--unBlue6);
    }

    /* Title */

    & .dashboard-caption {
        color: var(--gray2);
        text-wrap: pretty;
        font-size: .7em;
        margin: .5rem 2rem;
        
        & .caption-emph {
            color: var(--blue2);
            font-weight: 700;
        }
    }

    /* Topbar */

    & .topbar {
        display: flex;
        justify-content: space-between;
        background: var(--unBlue5);

        @media (width < 928px) { 
            /* tabs move up */
            flex-wrap: wrap;
        }

        /* Tabs */

        & .tabs { 
            width: auto;
            height: auto;
            font-size: 0.8rem;
            font-size: clamp(0.6rem, 0.4rem + 0.8vw, 0.8rem);
            cursor: pointer;
            text-transform: uppercase;

            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            margin: auto 0;
        
            @media (width < 928px) { 
                /* Breakpoint when tabs + form-icons don't fit */
                flex-direction: row;
                margin: 0 auto .25rem auto;
            }
        
            & .tab { 
                width: auto;
                padding: .25rem .5rem; 
                background: var(--unBlue4);
                color: var(--blue2);
                opacity: .5;
        
                &:hover {
                    background-color: var(--unBlue3);
                    opacity: .5;
                    transform: scale(1.025);
                    transition: 
                        background-color .1s ease-in-out,
                        scale .1s ease-in-out;
                }
        
                &.active { 
                    background: var(--blue1); 
                    opacity: 1;
                    color: white; 
                    font-weight: bold;
                    transition: background .1s ease-in-out;
                }
            }
        }

        /* Icons */

        .form-icons {
            width: auto;
            height: auto;
            display: flex;
            margin: 0 auto;
            
            @media (width < 928px) { 
                /* tabs move to the top */
                width: 100%;
            }
        
            @media (width < 449px) {
                /* form-head moves to the top */
                flex-direction: column;
            }
        
            & .form-head {
                display: flex;
                flex-direction: column;
                justify-content: center;
                gap: .2rem;
                padding-left: 1.5rem;
                margin: 0;
        
                max-width: 7rem;

                @media (width < 928px) { 
                    /* tabs move to the top */
                    max-width: 10rem;
                }
        
                @media (width < 449px) {
                    /* form-head moves to the top */
                    max-width: 100%;
                    text-align: center;
                    padding: 0 1.5rem;
                    gap: 0;
                }
            }
        
            & .form-body {
                display: flex;
                overflow-x: hidden;
                padding: 0 1.5rem;
        
                @media (width < 778px) {
                    /* turn on horizontal scroll */
                    overflow-x: scroll;
                }

                & .icon-group {
                    flex: 0 0 auto;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: flex-start;
                    gap: .5rem;
                    width: 4rem;
                    padding: .7rem 0;
        
                    @media (width < 778px) {
                        /* turn on horizontal scroll */
                        width: 3.5rem;
                        padding: .4rem 0;
                    }
        
                    @media (width < 449px) {
                        /* form-head moves to the top */
                        gap: .5rem;
                        padding: .7rem 0;
                    }
        
                    & .icon {
                        display: flex;
                        width: 35px;
                        aspect-ratio: 1;
                        background-color: var(--blue5);
                        border: 2px solid var(--blue4);
                        border-radius: 50%;
                        cursor: pointer;
                        opacity: .5;
        
                        & img {
                            margin: auto;
                        }
                    }
        
                    &:not(.icon-clicked):hover .icon {
                        background-color: var(--unBlue3) ;
                        border: 2px solid var(--blue2);
                        opacity: .75;
                        transition: background-color .1s ease-in-out;
                    }
        
                    & .icon-label {
                        font-size: .7rem;
                        color: var(--blue3);
                        text-align: center;
                        line-height: 1.1em;
                    }
        
                    &:not(.icon-clicked):hover .icon-label {
                        color: var(--blue2);
                    }
        
                    &.icon-clicked {
        
                        & .icon {
                            background-color: var(--unBlue3);
                            border: 2px solid var(--blue1);
                            opacity: 1;
                            transition: opacity .1s ease-in-out;
                        }
        
                        & .icon-label {
                            color: var(--blue1);
                            font-weight: bold;
                            transition: color .1s ease-in-out;
                        }
                    }
                }
            }
        }
    }
}

.mainview {
    width: 100%;
    position: relative;
    gap: .5rem; 
    background: var(--unBlue6);
    display: flex;

    & .sidebar {
        display: flex;
        flex-direction: column;
        gap: .8rem;
        padding: 1.5rem;
        position: relative;
    }

    & form {
        z-index: 1;
    }

    & .form-head {
        width: var(--width-form);
    }

    & .form-inset-bg {
        order: 1;
        position: absolute;
        inset: 0;
        background: white;
        opacity: .6;
        z-index: 0;
    }
}

.mainview.map {
    flex-direction: column;

    & .sidebar {
        width: var(--width-form);
        height: auto;
        position: absolute;
        top: .75rem;
        left: .75rem;
        text-align: left;
        padding: .8rem;

        @media (width < 500px) {
            /* sidebar moves to bottom */
            position: relative;
            order: 2;
            top: 0;
            left: 0;
            width: 100%;
            padding: 1.5rem;
            gap: 0;
        }

        & form {

            @media (width < 500px) {
                /* sidebar moves to bottom */
                display: flex;
                flex-wrap: nowrap;
                flex-direction: row;
                align-self: start;
                max-width: 100%;
            }
        }

        & #form-year-slider {

            & .slider-container {
                position: relative;
                width: 135px;
                height: 10px;
            }
            
            & .slider {
                width: 90%;
                height: 10px;
                position: absolute;
                margin: auto;
                top: 60%;
                left: 4%;
                bottom: 0;
                border-radius: 2px;
            }
            
            & input {
                -webkit-appearance: none;
                -moz-appearance: none;
                appearance: none;
                width: 95%;
                outline: none;
                position: absolute;
                margin: auto;
                top: 60%;
                bottom: 0;
                background-color: transparent;
                pointer-events: none;
            }
            
            & input#slider-2 {
                left: 5%;
            }
            
            & input::-webkit-slider-runnable-track {
                -webkit-appearance: none;
                height: 0px;
            }
            
            & input::-moz-range-track {
                -moz-appearance: none;
                height: 5px;
            }
            
            & input::-ms-track {
                appearance: none;
                height: 5px;
            }
            
            & input::-webkit-slider-thumb {
                -webkit-appearance: none;
                appearance: none;
                transform: translateY(-50%);
                height: 1em;
                width: 1em;
                background-color: var(--blue2);
                border: 2px solid var(--blue1);
                cursor: pointer;
                pointer-events: auto;
                border-radius: 50%;
            }
            
            & input::-moz-range-thumb {
                appearance: none;
                transform: translateY(-50%);
                height: 1em;
                width: 1em;
                background-color: var(--blue2);
                border: 2px solid var(--blue1);
                cursor: pointer;
                pointer-events: auto;
                border-radius: 50%;
            }
            
            & input::-ms-thumb {
                appearance: none;
                transform: translateY(-50%);
                height: 1em;
                width: 1em;
                background-color: var(--blue2);
                border: 2px solid var(--blue1);
                cursor: pointer;
                pointer-events: auto;
                border-radius: 50%;
            }
            
            & input:active::-webkit-slider-thumb {
                background-color: var(--blue3);
                border: 2px solid var(--blue2);
            }
            
            & .slider-label {
                font-size: .7em;
                color: var(--blue1);
            }
        }

        & #checkbox-type {

            & .form-body {
                display: flex;
                flex-direction: column;
                flex-wrap: wrap;

                @media (width < 500px) {
                    /* sidebar moves to bottom */
                    height: 6rem;
                }

                & label {
                    display: flex;
                    gap: .4rem;
                    color: var(--blue1);
                    font-size: .7rem;
                }
            }
        }
    }

    & .chart-title {
        position: absolute;
        top: 1.25rem;
        left: calc(3rem + var(--width-form));

        display: block;
        color: var(--blue1);
        fill: var(--blue1);
        font-size: .875rem;
        font-size: clamp(.75rem, .625rem + .5vw, .875rem);
        font-weight: bold;

        @media (width < 500px) {
            left: 1em;
        }
    }

    & .panel {
        height: clamp(400px, 18.75rem + 25vw, 500px);

        & .control-panel {
            position: absolute;
            top: clamp(0.5rem, 2vw, 1rem);
            right: clamp(0.5rem, 2vw, 1rem);
        }

        & .ocean {
            x: 0;
            y: 0;
            width: var(--width-chart);
            height: var(--height-chart);
            fill: var(--unBlue6);
        }
        
        & .map-outline {
            fill: none;
            stroke: var(--gray3);
            stroke-width: 1;
            filter: drop-shadow(0 0 3px var(--unBlue1));
        }
        
        & .border {
            stroke: var(--gray4);
            stroke-width: .5;
            stroke-linejoin: round;
        }
          
        & .border-disputed-black {
            fill: none;
            stroke-width: .5;
            stroke-linejoin: round;
            stroke-dasharray: .5;
        }
          
        & .border-disputed-white {
            fill: none;
            stroke-width: 1.25;
            stroke-linejoin: round;
            stroke-dasharray: .5;
        }
        
        & .node {
            stroke: var(--blue1);
            stroke-width: .75;
        }
    }
}

.mainview.boxplot {

    @media (width < 700px) {
        /* sidebar moves to the bottom */
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    & .bin-range-50 {
        fill: var(--unBlue3);
        stroke: var(--blue5);
        stroke-width: 1px;
    }
    
    & .bin-range-50 #bin-range-50-10 {
        fill: var(--green3);
        stroke: var(--green5);
        stroke-width: 1px;
    }
    
    & .bin-range-90 {
        stroke: var(--blue3);
        stroke-width: 3px;
    }
    
    & .bin-range-90 #bin-range-90-10 {
        stroke: var(--green2);
        stroke-width: 3px;
    }
    
    & .bin-range-med {
        stroke: var(--blue2);
        stroke-width: 5px;
    }
    
    & .bin-range-med #bin-range-med-10 {
        stroke: var(--green1);
        stroke-width: 5px;
    }

    & .panel {
        width: 100%;

        @media (width < 700px) {
            /* sidebar moves to the bottom */
            padding: 0 1.5rem;
        }

        & .x-axis text, & .y-axis text {
            font-family: "Open Sans", var(--sans-serif);
            font-size: 14px;
            fill: var(--blue2);
        }
        
        & .y-axis :first-child {
            font-style: italic;
        }
        
        /* & .marker-line {
            pointer-events: none;
            stroke: black;
            stroke-width: .5px;
            stroke-dasharray: 3,3;
        }
        
        & #marker-num {
            font-size: 12px;
            position: absolute;
            z-index: 999;
            width: auto;
            height: auto;
        } */
    }

    & .sidebar {
        width: var(--width-sidebar);
        gap: 1rem;
        

        @media (width < 700px) {
            /* sidebar moves to the bottom */
            width: 100%;
            order: 2;
            flex-direction: row;
            justify-content: space-around;
            gap: 3rem;
            padding: 1.5rem;
        }

        & select {
            width: 100%;
            font-size: .8em;
        }

        & .form-head {
            @media (width < 700px) {
                /* sidebar moves to the bottom */
                width: 100%;
            }
        }

        & .legend-container {
            z-index: 1;
            
            & svg {
                width: clamp(6.25rem, 2.355769230769231rem + 16.615384615384617vw, 9.625rem);
            }
        }
    }
}

/* Legend */

.legend-text {
    fill: var(--blue2);
    font-size: 11px;
}
  
.legend-desc {
    fill: var(--blue2);
    font-size: 10px;
}
  
.legend-desc-bold {
    fill: var(--blue1);
    font-weight: bold;
    font-size: 12px;
}
  
.legend-bubble-line {
    fill: none;
    stroke: black;
    stroke-width: .8;
    stroke-dasharray: 2,2;
}
  
.legend-bubble-circle {
    fill: black;
    fill-opacity: .1;
    stroke: black;
    stroke-width: .75;
    stroke-opacity: .3;
}

/* Tooltip */

.tooltip {
    background-color: hsla(0, 0%, 100%, 0.9);
    padding: .2em .5em .3em .5em;
    
    & p {
        opacity: 1;
        font-family: var(--font), sans-serif;
        font-size: 14px;
        line-height: 1.3em;
        margin: 0 0 0 0;
    }
      
    & .tooltip-emph {
        text-transform: lowercase;
        font-size: 14px;
        color: var(--blue2);
    }
      
    & p.tooltip-note {
        font-size: 11px;
        margin-top: 5px;
        color: var(--gray2);
    }
}