.png-marker {
    background: no-repeat 0 0;
    width: 36px;
    height: 46px;
    position: absolute;
}

.png-icon {
    height: 17px !important;
    width: 17px !important;
    left: -8.5px;
    top: -36px;
    position: absolute;
    filter: invert(1);
}

.png-marker::after {
    height: 20px;
    width: 20px;
    background: black;
}
/* CSS teardrop pin (L.MapMarkers.createPin). The 30px square is rotated -45deg around its center, which puts its
   sharp bottom-left corner 21px (30 / sqrt 2) below the center, so the tip sits at (15px, 36px). */
.pin-marker {
    position: absolute;
    left: -15px;
    top: -36px;
    width: 30px;
    height: 36px;
    transform-origin: 15px 36px;
}

.pin-shape {
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 30px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    background: var(--pin-color);
    border: 2px solid #FFFFFF;
    box-shadow: -2px 3px 8px rgba(23, 32, 28, 0.3);
}

.pin-icon {
    position: absolute;
    left: 7px;
    top: 7px;
    width: 16px;
    height: 16px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

/* selected marker (popup open) grows on top of the zoom scale */
.pin-selected .pin-marker {
    transform: scale(calc(var(--marker-scale, 1) * 1.2));
    transition: transform 0.2s;
}

.pin-selected {
    z-index: 1000 !important;
}

/* small static pin used as a swatch in filter rows */
.pin-swatch {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 24px;
}

.pin-swatch .pin-marker {
    left: 0;
    top: 0;
    transform: scale(0.66);
    transform-origin: 0 0;
}