.marker-cluster div {
    --icon-size: 40px;
    width: var(--icon-size);
    height: var(--icon-size);
    margin: 0;
    background-color: RGBA(var(--cluster-color, 0 , 0, 0), .8);
}

.leaflet-marker-icon.custom-icon {
    font-size: 36px;
    text-align: center;
}
.marker-cluster div > span {
    --ratio: 1.2;
    border-radius: 15px;
    display: block;
    line-height: calc(var(--icon-size) / var(--ratio));
    font-size: 14px;
    width: calc(var(--icon-size) / var(--ratio));
    height: calc(var(--icon-size) / var(--ratio));
    background: RGBA(255, 255, 255, .4);
    font-weight: bold;
    transform: translate(
        calc(var(--icon-size) / 2 - var(--icon-size) / 2 / var(--ratio)),
        calc(var(--icon-size) / 2 - var(--icon-size) / 2 / var(--ratio))
    );
}



.form-filter-map {
    position: absolute;
    top: 0;
    right: 0;
    transform: translateX(calc(100% + 50px));
    display: flex;
}

.form-filter-map .group-filter {
    margin: var(--factor);
}

.form-filter-map .group-filter .label {
    background: #FFFFFF;
    padding: calc(.5 * var(--factor)) var(--factor);
    font-weight: 600;
    font-size: var(--font-size-small);
    border-radius: var(--factor);
    cursor: pointer;
    white-space: nowrap;
}
.form-filter-map .group-filter .label:hover {
    background: RGBA(240, 240, 240);
}

.form-filter-map .group-filter .choice {
    font-weight: 400;
    font-size: .9em;
}

.form-filter-map .items-container {
    position: absolute;
    background: #FFFFFF;
    margin-top: var(--factor);
    padding: calc(.5 * var(--factor)) 0;
    font-size: var(--font-size-small);
    border-radius: calc(.5 * var(--factor));

}
.form-filter-map .items-container label {
    display: block;
    cursor: pointer;
    padding: 0 var(--factor);
    line-height: 2;
    white-space: nowrap;
}
.form-filter-map .items-container label:hover {
    background: RGBA(240, 240, 240);
}