:root {
    --leaflet-font-family: inherit;
    --leaflet-font-size: 0.8em;
    --leaflet-popup-font-size: 1em;
    --leaflet-line-height: inherit;
    --leaflet-default-marker-pin-size: 40px;
    --leaflet-default-marker-pin-color: var(--btn-primary-active-bg);
    --leaflet-marker-icon-size: calc(var(--leaflet-marker-size) * 0.5);
    --leaflet-marker-cluster-opacity: 0.6;
    --leaflet-marker-cluster-small-outer-color: var(--btn-success-border);
    --leaflet-marker-cluster-small-inner-color: var(--btn-success-bg);
    --leaflet-marker-cluster-medium-outer-color: var(--btn-warning-border);
    --leaflet-marker-cluster-medium-inner-color: var(--btn-warning-bg);
    --leaflet-marker-cluster-large-outer-color: var(--btn-danger-border);
    --leaflet-marker-cluster-large-inner-color: var(--btn-danger-bg);

    /* @private */
    /* Needs to be modified in client defs */
    --leaflet-marker-size: 40px;
    --leaflet-marker-cluster-size: 45px;
    --leaflet-marker-cluster-size-small: var(--leaflet-marker-cluster-size);
    --leaflet-marker-cluster-size-medium: var(--leaflet-marker-cluster-size);
    --leaflet-marker-cluster-size-large: var(--leaflet-marker-cluster-size);
}

.leaflet-container {
    font-family: var(--leaflet-font-family);
    font-size: var(--leaflet-font-size);
    line-height: var(--leaflet-line-height);
}

.leaflet-popup-content {
    font-size: var(--leaflet-popup-font-size);
}

.dubas-address-map-marker {
    margin-left: calc(var(--leaflet-marker-size) / -1.99) !important;
    margin-top: calc(var(--leaflet-marker-size) * -1.5) !important;
    width: var(--leaflet-marker-size) !important;
    height: var(--leaflet-marker-size) !important;
}

.leaflet-marker-icon .marker-pin {
    width: var(--leaflet-marker-size);
    height: var(--leaflet-marker-size);
    border-radius: 50% 50% 50% 0;
    background: #c30b82;
    position: absolute;
    transform: rotate(-45deg);
    left: 50%;
    top: 50%;
    margin-top: calc(var(--leaflet-marker-size) / -2.8);
    margin-left: calc(var(--leaflet-marker-size) / -2);
}

.leaflet-marker-icon .marker-pin::after {
    content: '';
    width: calc(var(--leaflet-marker-size) * 0.8);
    height: calc(var(--leaflet-marker-size) * 0.8);
    margin-top: calc(var(--leaflet-marker-size) * 0.1);
    margin-left: calc(var(--leaflet-marker-size) * 0.1);
    background: #fff;
    position: absolute;
    border-radius: 50%;
}

.leaflet-marker-icon i {
    position: absolute;
    width: var(--leaflet-marker-icon-size);
    font-size: var(--leaflet-marker-icon-size);
    left: 0;
    right: 0;
    text-align: center;
    margin: calc(var(--leaflet-marker-size) * 0.38) auto;
}

.leaflet-marker-icon.leaflet-marker-icon-default {
    margin-left: calc(var(--leaflet-default-marker-pin-size) / -1.99) !important;
    margin-top: calc(var(--leaflet-default-marker-pin-size) * -1.1) !important;
    width: var(--leaflet-default-marker-pin-size) !important;
    height: var(--leaflet-default-marker-pin-size) !important;
}

.leaflet-marker-icon.leaflet-marker-icon-default i {
    width: var(--leaflet-default-marker-pin-size);
    font-size: var(--leaflet-default-marker-pin-size);
    color: var(--leaflet-default-marker-pin-color);
    margin: 0 auto;
}

.leaflet-popup.leaflet-popup-default {
    bottom: calc(var(--leaflet-default-marker-pin-size) * 0.85) !important;
    margin-bottom: calc(var(--leaflet-default-marker-pin-size) * 0.35) !important;
}

.dubas-map {
    min-height: 70vh;
}

.list-container .leaflet-top {
    z-index: 999;
}

/**
 * Marker Cluster
 */

.marker-cluster {
    background-clip: padding-box;
    border-radius: 50%;
    width: var(--leaflet-marker-cluster-size) !important;
    height: var(--leaflet-marker-cluster-size) !important;
    margin-left: calc(var(--leaflet-marker-cluster-size) / -1.8) !important;
    margin-top: calc(var(--leaflet-marker-cluster-size) * -0.52) !important;
}

.marker-cluster div {
    width: calc(var(--leaflet-marker-cluster-size) - 10px);
    height: calc(var(--leaflet-marker-cluster-size) - 10px);
    margin-left: 5px;
    margin-top: 5px;
    text-align: center;
    border-radius: 50%;
}

.marker-cluster span {
    line-height: calc(var(--leaflet-marker-cluster-size) - 10px);
}

.marker-cluster-small {
    background-color: rgb(from var(--leaflet-marker-cluster-small-outer-color) r g b / var(--leaflet-marker-cluster-opacity));
    width: var(--leaflet-marker-cluster-size-small) !important;
    height: var(--leaflet-marker-cluster-size-small) !important;
    margin-left: calc(var(--leaflet-marker-cluster-size-small) / -1.8) !important;
    margin-top: calc(var(--leaflet-marker-cluster-size-small) * -0.52) !important;
}

.marker-cluster-small div {
    background-color: rgb(from var(--leaflet-marker-cluster-small-inner-color) r g b / var(--leaflet-marker-cluster-opacity));
    width: calc(var(--leaflet-marker-cluster-size-small) - 10px);
    height: calc(var(--leaflet-marker-cluster-size-small) - 10px);
}

.marker-cluster-small span {
    line-height: calc(var(--leaflet-marker-cluster-size-small) - 10px);
}

.marker-cluster-medium {
    background-color: rgb(from var(--leaflet-marker-cluster-medium-outer-color) r g b / var(--leaflet-marker-cluster-opacity));
    width: var(--leaflet-marker-cluster-size-medium) !important;
    height: var(--leaflet-marker-cluster-size-medium) !important;
    margin-left: calc(var(--leaflet-marker-cluster-size-medium) / -1.8) !important;
    margin-top: calc(var(--leaflet-marker-cluster-size-medium) * -0.52) !important;
}

.marker-cluster-medium div {
    background-color: rgb(from var(--leaflet-marker-cluster-medium-inner-color) r g b / var(--leaflet-marker-cluster-opacity));
    width: calc(var(--leaflet-marker-cluster-size-medium) - 10px);
    height: calc(var(--leaflet-marker-cluster-size-medium) - 10px);
}

.marker-cluster-medium span {
    line-height: calc(var(--leaflet-marker-cluster-size-medium) - 10px);
}

.marker-cluster-large {
    background-color: rgb(from var(--leaflet-marker-cluster-large-outer-color) r g b / var(--leaflet-marker-cluster-opacity));
    width: var(--leaflet-marker-cluster-size-large) !important;
    height: var(--leaflet-marker-cluster-size-large) !important;
    margin-left: calc(var(--leaflet-marker-cluster-size-large) / -1.8) !important;
    margin-top: calc(var(--leaflet-marker-cluster-size-large) * -0.52) !important;
}

.marker-cluster-large div {
    background-color: rgb(from var(--leaflet-marker-cluster-large-inner-color) r g b / var(--leaflet-marker-cluster-opacity));
    width: calc(var(--leaflet-marker-cluster-size-large) - 10px);
    height: calc(var(--leaflet-marker-cluster-size-large) - 10px);
}

.marker-cluster-large span {
    line-height: calc(var(--leaflet-marker-cluster-size-large) - 10px);
}