/* Small cluster: Black background with white border */
.marker-cluster-small {
    background-color: rgba(50, 50, 50, 0.8); /* Dark gray/black */
    border: 2px solid white;
}
.marker-cluster-small div {
    background-color: rgba(30, 30, 30, 0.8); /* Darker gray */
    color: white; /* White text */
}

/* Medium cluster: Black and white */
.marker-cluster-medium {
    background-color: rgba(100, 100, 100, 0.8); /* Medium gray */
    border: 2px solid white;
}
.marker-cluster-medium div {
    background-color: rgba(80, 80, 80, 0.8);
    color: white;
}

/* Large cluster: Black and white */
.marker-cluster-large {
    background-color: rgba(150, 150, 150, 0.8); /* Lighter gray */
    border: 2px solid white;
}
.marker-cluster-large div {
    background-color: rgba(120, 120, 120, 0.8);
    color: white;
}

/* Fallback for IE 6-8 */
.leaflet-oldie .marker-cluster-small {
    background-color: rgb(50, 50, 50);
}
.leaflet-oldie .marker-cluster-small div {
    background-color: rgb(30, 30, 30);
    color: white;
}

.leaflet-oldie .marker-cluster-medium {
    background-color: rgb(100, 100, 100);
}
.leaflet-oldie .marker-cluster-medium div {
    background-color: rgb(80, 80, 80);
    color: white;
}

.leaflet-oldie .marker-cluster-large {
    background-color: rgb(150, 150, 150);
}
.leaflet-oldie .marker-cluster-large div {
    background-color: rgb(120, 120, 120);
    color: white;
}

/* Cluster marker general styling */
.marker-cluster {
    background-clip: padding-box;
    border-radius: 20px;
}
.marker-cluster div {
    width: 30px;
    height: 30px;
    margin-left: 2.5px;
    margin-top: 2.5px;
    text-align: center;
    border-radius: 15px;
    font: 12px 'Leipzigzwo', Helvetica, Arial, sans-serif !important;
}
.marker-cluster span {
    line-height: 30px;
}