.thumb_popup {
    box-sizing: border-box; opacity: 0;
    position: absolute; z-index: 100;
    left: 50%; top: 50%; width: 96px; height: 96px; 
    transform-origin: center;
    transform: translate(-50%,-50%) scale(0.3);
    transition: opacity 0.5s, transform 0.5s;
    pointer-events: none;
}

.thumb_popup:before {
    content: ''; box-sizing: border-box;
    display: block; z-index: 99;
    position: absolute; opacity: 0;
    left: -8px; top: -8px; right: -8px; bottom: -8px; 
    border: 4px solid rgba(136,0,220,1);
    transform-origin: center;
    transform: scale(0.80);
    border-radius: 100px;
    transition: opacity 0.5s, transform 0.5s;
}

.thumb_popup .thumb {
    content: ''; box-sizing: border-box;
    position: absolute; z-index: 100;
    left: 0; top: 0; width: 100%; height: 100%; 
    border: 8px solid rgba(136,0,220,1); border-radius: 100px;
    /* background-image: url(../images/thumb.jpg); */
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
}

.thumb_popup label {
    box-sizing: border-box;
    display: block;
    position: absolute; opacity: 1;
    left: 50%; top: 50%; width: auto; height: auto; 
    transform-origin: left center;
    transform: rotate(35deg) translate(-50px,-50%) scale(0.6);
    border-radius: 100px;
    background-color: rgba(136,0,220,1);
    padding: 12px 26px 12px 26px;
    transition: opacity 0.5s, transform 0.5s;
}

.thumb_popup label.left {
    left: auto; right: 50%; 
    transform-origin: right center;
    transform: rotate(-35deg) translate(50px,-50%) scale(0.6);
}

.thumb_popup label text-title {
    display: block; opacity: 0; 
    /* max-width: 200px;  */
    /* font-family: NimbusRegular; font-size: 14px; font-weight: bold;  */
    font-family: arial, sans-serif; font-size: 14px; font-weight: bold; 
    color: #fff; 
    overflow-wrap: break-word; 
    white-space: pre;
    transition: opacity 0.8s, transform 0.5s;
}

.thumb_popup label text-count {
    display: block; opacity: 0;
    /* font-family: NimbusRegular; font-size: 12px; text-align: left; */
    font-family: arial, sans-serif; font-size: 12px; text-align: left;
    color: #2d2d2d; white-space: nowrap;
    transition: opacity 0.8s, transform 0.5s;
}


.thumb_popup label:before {
    content: ''; box-sizing: border-box;
    display: block;
    position: absolute; opacity: 0;
    left: -5px; top: -5px; right: -5px; bottom: -5px; 
    border: 2px solid rgba(136,0,220,1);
    transform-origin: center;
    transform: scale(0.85);
    border-radius: 100px;
    transition: opacity 0.5s, transform 0.7s;
}

.spot_thumb {
    /* pointer-events: none!important;  */
}

.spot_thumb.hovering:not(.active) .thumb_popup,
.spot_thumb:hover:not(.active) .thumb_popup {
    opacity: 1;
    transform: translate(-50%,-50%) scale(1);
}

.spot_thumb.hovering .thumb_popup:before,
.spot_thumb.hovering .thumb_popup label:before,
.spot_thumb:hover .thumb_popup:before,
.spot_thumb:hover .thumb_popup label:before {
    opacity: 1;
    transform: scale(1);
} 

.spot_thumb.hovering .thumb_popup label text-title,
.spot_thumb.hovering .thumb_popup label text-count,
.spot_thumb:hover .thumb_popup label text-title,
.spot_thumb:hover .thumb_popup label text-count {
    opacity: 1;
}

.spot_thumb.hovering .thumb_popup label,
.spot_thumb:hover .thumb_popup label {
    opacity: 1;
    transform: rotate(0deg) translate(64px,-50%) scale(1);
}
.spot_thumb.hovering .thumb_popup label.left,
.spot_thumb:hover .thumb_popup label.left {
    opacity: 1;
    transform: rotate(0deg) translate(-64px,-50%) scale(1);
}



.map_spot_tooltip {
    position: absolute; box-sizing: border-box; pointer-events: none;
    left: 50%; bottom: 100%; padding: 10px 26px 10px 26px; opacity: 0;
    /* font-family: NimbusRegular; font-size: 12px; font-weight: bold; color: #FFCD00; */
    font-family: arial, sans-serif; font-size: 12px; font-weight: bold; color: #2d2d2d;
    line-height: 12px; white-space: nowrap;
    background-color: #FFCD00; border-radius: 2px;
    transform-origin: bottom;
    transform: translate(-50%,0) scale(0) translateY(-8px) ;
    transition: transform 0.3s, opacity 0.3s;
}

.map_spot_tooltip:before {
    content: '';
    position: absolute; box-sizing: border-box;
    left: 50%; top: 100%; width: 12px; height: 12px;
    background-color: #FFCD00; border-radius: 2px;
    transform-origin: center;
    transform: translate(-50%,-50%) translateY(-2px) rotate(45deg);
}

.map_stage .map .spot.active:hover .map_spot_tooltip,
.map_stage .map .spot:not(.nav):hover .map_spot_tooltip {
    transform: translate(-50%,0) scale(1) translateY(-10px);
    opacity: 1;
}

@media (max-width: 600px) {
    .thumb_popup label,
    .thumb_popup label.left {
        top: auto; bottom: 114px;
        transform: translate(-50%,0) scale(0.6);
    }
    .spot_thumb.hovering .thumb_popup label,
    .spot_thumb:hover .thumb_popup label,
    .spot_thumb.hovering .thumb_popup label.left,
    .spot_thumb:hover .thumb_popup label.left {
        opacity: 1;
        transform: translate(-50%,0) scale(1);
    }
}