/* city map */
.city-map {
    display: flex;
    flex-direction: column;
    background-color: var(--light);
    padding: 2rem;
    margin-bottom: 1rem;
    border-radius: 0.5rem;

    width: 100%;
    text-align: center;
}

.city-map svg {
    width: 100%;
    height: 100%;
}

/* map interaction */
.city-map svg path {
    opacity: 0.5;
    cursor: pointer;
}

/* district map */
.district-map-container {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.district-map {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-auto-rows: 1fr;
    column-gap: 2px;
    row-gap: 2px;

    flex: 1 1 auto;

    border: 2px solid var(--gray);
    border-radius: 1rem;

    background-color: var(--gray-alpha);
    overflow: hidden;
}

.district-cell {
    color: rgba(0, 0, 0, 0);
    aspect-ratio: 1;

    border-radius: 1rem;

    background-color: var(--light);
    overflow: hidden;

    user-select: none;
}

.district-map-legend {
    display: flex;
    flex-direction: column;
    flex-basis: 30%;
    padding: 0 1rem;
    row-gap: 0.5rem;
}

.district-map-legend-item {
    display: flex;
    font-size: 1.5rem;
    column-gap: 1rem;
    align-items: center;
}

.district-map-legend-box {
    background-color: var(--light);
    border: 2px solid var(--gray);
    border-radius: 1rem;

    width: 3rem;
    height: 3rem;
}

.district-map-legend-label {
    display: flex;
    align-items: center;
}

.district-cell.water, .district-map-legend-box.water {
    background-color: var(--district-water);
}

.district-cell.park, .district-map-legend-box.park {
    background-color: var(--district-park);
}

/* districts */
.city-map svg path:hover{
    opacity: 1;
    stroke-dasharray: 0 0 !important;
}

.city-map svg path.selected {
    opacity: 1;
    stroke: var(--dark);
    stroke-width: 0.5 !important;
    stroke-dashoffset: 0;
    stroke-dasharray: 0 0 !important;
    stroke-opacity: 1 !important;
}

#district_1 {
    fill: var(--district-1) !important;
}

.color_district_1 input[type="radio"]:checked + .checkbox-custom-label, .color_district_1 .track-inner {
    background-color: var(--district-1);
}

#district_2 {
    fill: var(--district-2) !important;
}

.color_district_2 input[type="radio"]:checked + .checkbox-custom-label, .color_district_2 .track-inner {
    background-color: var(--district-2);
}

#district_3 {
    fill: var(--district-3) !important;
}

.color_district_3 input[type="radio"]:checked + .checkbox-custom-label, .color_district_3 .track-inner {
    background-color: var(--district-3);
}

#district_4 {
    fill: var(--district-4) !important;
}

.color_district_4 input[type="radio"]:checked + .checkbox-custom-label, .color_district_4 .track-inner {
    background-color: var(--district-4);
}

#district_5 {
    fill: var(--district-5) !important;
}

.color_district_5 input[type="radio"]:checked + .checkbox-custom-label, .color_district_5 .track-inner {
    background-color: var(--district-5);
}

/* xs screen */
@media only screen and (max-width: 768px) {
    .district-map-container {
        flex-direction: column;
    }

    .district-map-legend {
        padding: 1rem 0;
    }
}

/* xxs screen */
@media only screen and (max-width: 500px) {

}