.animated-border-box, .animated-border-box-glow{
    max-height: 65px;
    max-width: 65px;
    height: 65px;
    width: 65px;
    position: absolute;
    overflow: hidden;
    z-index: 0;
    /* Border Radius */
    border-radius: 10px;
}
.animated-border-box-img-preview {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    margin-left: 2px;
    margin-top: 2px;
    background-size: cover;
    background-repeat: no-repeat;
}

.backlight .map-box__marker-count {
    position: absolute;
    margin-bottom: 0px;
    margin-right: 0px;
    top: -15px;
    right: -79px;
}

.map-box__marker.js-map-box-marker-cluster.backlight.mapboxgl-marker.mapboxgl-marker-anchor-center.map-box__marker_viewed {
    width: 70px;
    height: 70px;
}

.map-box__marker.js-map-box-marker-independent.backlight.mapboxgl-marker.mapboxgl-marker-anchor-center.map-box__marker_viewed {
    width: 70px;
    height: 70px;
}

.animated-border-box-glow{
    overflow: hidden;
    /* Glow Blur */
    filter: blur(20px);
}

.animated-border-box:before, .animated-border-box-glow:before {
    content: '';
    z-index: -2;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    position: absolute;
    width: 99999px;
    height: 99999px;
    background-repeat: no-repeat;
    background-position: 0 0;
    /*border color, change middle color*/
    background-image: conic-gradient(rgba(0,0,0,0), #de3b8f, rgba(0,0,0,0) 25%);
    /* change speed here */
    animation: rotate 2s linear infinite;
}

.animated-border-box:after {
    content: '';
    position: absolute;
    z-index: -1;
    /* border width */
    left: 5px;
    top: 5px;
    /* double the px from the border width left */
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    /*bg color*/
    background: #292a2e;
    /*box border radius*/
    border-radius: 10px;
}

@keyframes rotate {
    100% {
        transform: translate(-50%, -50%) rotate(1turn);
    }
}