#calendar-map {
    scroll-margin-top: 10em;
    width: 100%;
    height: min(100vw, 70vh);
    margin-bottom: 1em;

    .circle-white {
        border: 1px solid gray;
        background: white;
        width: 30px;
        height: 30px;
        border-radius: 15px;
        padding: 0;
        .cat {
            display: block;
            margin: 3px;
            width: 22px;
            height: 22px;
            line-height: 17px;
            img {
                width: 15px;
                height: 15px;
            }
        }
    }
}
#calendar-map.square {
    height: unset;
    aspect-ratio: 1 / 1;
}

.leaflet-popup-tip {
    background: var(--background-color);
}

.leaflet-popup-content-wrapper {
    background: var(--background-color);
    h4, h5, p, ul {
        margin: .3em 0;
        padding: 0;
    }
    ul li {
            list-style: none;
    }
    a {
        color: var(--primary);
    }
    a:hover, a:active {
        color: var(--primary-hover);
    }
    h4 {
        font-size: 150%;
    }
    p.remarque {
        margin-bottom: 1em;
    }
    .cat {
        margin-right: 0.5em;
    }
}

.leaflet-popup-content {
    max-height: 300px;
    overflow-y: auto;
}

.leaflet-popup-close-button {
    padding: 0;
}