.leaflet-marker-icon.marker-cluster {
    color: white;
}

.leaflet-marker-icon.marker-cluster div span {
    opacity: 0.00001;
    transition: opacity 300ms linear;
}

.leaflet-marker-icon.marker-cluster:hover div span {
    opacity: 1;
}

.leaflet-marker-icon.marker-cluster:hover div:after {
    opacity: 0.00001;
}
.leaflet-marker-icon.marker-cluster div:after {
    content: "";
    width: 1rem;
    height: 1rem;
    background: url('icons/ferry-white.svg');
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    transition: opacity 300ms linear;
}

.marker-cluster-large, .marker-cluster-medium, .marker-cluster-small {
    background-color: transparent!important;
}

.marker-cluster-large div, .marker-cluster-medium div, .marker-cluster-small div {
    background-color: var(--lumo-contrast-40pct)!important;
}

.marker-cluster div {
    border-radius: 20px!important;
    font-family: 'ARMS Sans'!important;
    border: 2px solid;
    position: relative;
}