/* For now, this file holds the CSS for maps on the website, except for the legends. */
.choropleth-container {
    position: relative;
    background-color: #FFFFFF;
    width: 100%;
}

#landing-choropleth-container {
    min-height: 1100px;
}

.choropleth-holder {
    position: relative;
    height: 100%;
    overflow: hidden;
}

#user-dashboard-choropleth-holder {
    position: relative;
    box-shadow: 2px 0 6px rgba(0, 0, 0, 0.12);
}

.choropleth {
    position: relative;
    background-color: #FFFFFF;
    width: 100%;
    height: 800px;
}

#user-dashboard-choropleth {
    height: 100%;
    box-shadow: 2px 0 6px rgba(0, 0, 0, 0.12);
}

#labelmap-choropleth, #admin-labelmap-choropleth {
    margin-top: 20px;
}

#admin-task-choropleth {
    width: 360px;
    height: 360px;
    margin-top: 50px;
}

/* Overwriting Mapbox popup styling. */
.mapboxgl-popup-content {
    padding: 12px; /* Default 10px 10px 15px */
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25); /* Default 0 1px 2px rgb(0 0 0/10%) */
    border-radius: 10px; /* Default 3px */
}

/* Common legend components. */
.legend {
    height: inherit;
    width: 250px;
}

.legend span, .legend label {
    display: block;
    float: right;
    height: 15px;
    text-align: left;
    font-size: 16px;
    color: #424055;
}
.legend span {
    width: 10%;
}

#legend-percentages-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

#legend-percentages-container label {
    padding: 0;
}

/* Label type circle color fills (used by map sidebar legend icons). */
#map-legend-curb-ramp circle {
    fill: #90C31F;
}
#map-legend-no-curb-ramp circle {
    fill: #E679B6;
}
#map-legend-obstacle circle {
    fill: #78B0EA;
}
#map-legend-surface-problem circle {
    fill: #F68D3E;
}
#map-legend-no-sidewalk circle {
    fill: #BE87D8;
}
#map-legend-crosswalk circle {
    fill: #FABF1C;
}
#map-legend-signal circle {
    fill: #63C0AB;
}
#map-legend-other circle {
    fill: #B3B3B3;
    stroke: #0000FF;
}
#map-legend-occlusion circle {
    fill: #B3B3B3;
    stroke: #009902;
}

.clearfix {
    width: 100%;
}