/* TODO: clean the style */

/* the style is required to display the map and align it */
#map {
    width: 100%;
    height: 500px;
    overflow: auto;
}

/*
 * horizontal separator like <hr>
 * but with text in the middle
 */
.separator {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 2em 0 2em 0;
}

.separator::before,
.separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #000;
}

.separator:not(:empty)::before {
    margin-right: 1em;
}

.separator:not(:empty)::after {
    margin-left: 1em;
}