html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

#map {
    width: 100%;
    height: 100%;
}

.population-change-panel {

    background: white;

    padding: 10px;

    border-radius: 5px;

    box-shadow:
        0 1px 5px rgba(0,0,0,0.4);

    font-family:
        Arial,
        sans-serif;

    font-size: 13px;

    line-height: 1.5;

}

.population-change-title {

    font-weight: bold;

    font-size: 14px;

    margin-bottom: 8px;

}

.population-change-panel select {

    margin-left: 5px;

    margin-bottom: 5px;

}

.population-change-legend {

    margin-top: 8px;

    padding-top: 8px;

    border-top: 1px solid #ddd;

}

.legend-row {

    display: flex;

    align-items: center;

    gap: 6px;

    white-space: nowrap;

}

.legend-row span {

    display: inline-block;

    width: 18px;

    height: 12px;

    border: 1px solid #777;

}