div.mapboxgl-popup-content {
    background: #4a4a4a;
    width: 17rem;
}


.mapboxgl-popup.mapboxgl-popup-anchor-right .mapboxgl-popup-tip{
    border-left-color: #4a4a4a;;
}

.mapboxgl-popup.mapboxgl-popup-anchor-left .mapboxgl-popup-tip{
    border-right-color: #4a4a4a;;
}

.mapboxgl-popup.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip,
.mapboxgl-popup.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip,
.mapboxgl-popup.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip{
    border-top-color: #4a4a4a;
}

.mapboxgl-popup.mapboxgl-popup-anchor-top .mapboxgl-popup-tip,
.mapboxgl-popup.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip,
.mapboxgl-popup.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip{
    border-bottom-color: #4a4a4a;
}

.context-popup.mapboxgl-popup-anchor-bottom .mapboxgl-popup-content{
    background-color: rgba(176, 0, 0, 0.85)
}
.context-popup.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip{
    border-top-color: rgba(176, 0, 0, 0.85)
}


#rv-popup h4{
    color: #fbfbfb;
}

#rv-popup h5{
    color: #f7f7f7;
}


ul#map-popup-list li{
    background: linear-gradient(to right, rgba(253, 5, 5, 0) 50%, rgb(224, 63, 63) 50%);
    background-size: 200% 100%;
    transition: all 0.4s ease;
    background-position: left bottom;
    padding: 0.15rem 0.5rem 0.15rem;
    border-radius: 3px 0 0 3px;
    cursor: pointer;
    color: white;
}

ul#map-popup-list li:hover{
    background-position: right bottom;
}

ul#map-popup-list li.selected{
    background-color: rgba(106, 25, 25, 0.72);
}

/* scrollbar on map popup list */
ul#map-popup-list{
    max-height: 100px;
    overflow-y: auto;
    margin: 0 0 10px;
    scrollbar-width: thin;
    background-color: #757575;
    border-radius: 4px 0px 0px 4px;
    padding: 0;
}


.mapboxgl-ctrl-attrib-inner{
color: rgba(0,0,0,.75);
}



 /* width */
ul#map-popup-list::-webkit-scrollbar {
  width: 10px;
}

/* Track */
ul#map-popup-list::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
ul#map-popup-list::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
ul#map-popup-list::-webkit-scrollbar-thumb:hover {
  background: #555;
}

#rv-popup a {
    text-decoration: none;
}

#rv-popup-video-info{
    background-color: #535353;
    border: 0.1rem solid #444;
    border-radius: 0.2rem;
    padding-bottom: 0.2rem;
}

#rv-popup-video-info img{
    border-radius: 0.2rem 0.2rem 0 0;
    width: 100%;
    object-fit: cover;
}

#rv-popup-video-info h5{
    margin: 0.1rem 0.3rem 0.2rem 0.4rem;
}


/* Loading Image */
.map-loading.lds-ring{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    pointer-events: none;
}

.map-loading.lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 18rem;
    height: 11rem;
    margin: .4rem;
    border: .8rem solid #b33d3d;
    border-radius: 0%;
    animation: japanmap-loading 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #b33d3d transparent transparent transparent;
}
.map-loading.lds-ring div:nth-child(1) {
    animation-delay: -0.45s;
}
.map-loading.lds-ring div:nth-child(2) {
    animation-delay: -0.3s;
}
.map-loading.lds-ring div:nth-child(3) {
    animation-delay: -0.15s;
}
.map-loading.lds-ring div:nth-child(5) {
    border: 0;
    animation-delay: .15s;
    animation: japanmap-loading-step 2.4s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}



@keyframes japanmap-loading {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes japanmap-loading-step {
	0% {
		transform: rotate(0deg) scale(1);
		
	}
    25%{
        transform: rotate(0deg) scale(1.05);
    }

    50%{
        transform: rotate(0deg) scale(1);
    }

	100% {
        transform: rotate(360deg) scale(1);
    }
}


.map-loading.lds-ring h3 {
	transform: scale(1);
    text-shadow: .05rem .05rem .05rem rgba(0, 0, 0, 0.81);
    font-size: 1.4rem;
    margin: 0 auto;
    color: white;
}