.ube-map-box {
	height: 400px;
}

.mapboxgl-popup-content {
	.card{
		border: none;
		width: 200px;
	}
	.card-body{
		padding: 0;
	}

	.card-img-top {
		margin-bottom: 10px;
	}

	.card-title {
		margin-bottom: 5px;
	}

	.mapboxgl-popup-close-button {
		z-index: 1;
	}
}


.ube-map-box-effect {
	--map-box-effect-color1: rgba(38, 38, 38, 0.3);
	--map-box-effect-color2: #666;
	.mapboxgl-marker {
		&:before, &:after {
			width: 200px;
			height: 200px;
			border: 2px solid #666;
			@include border-radius(50%);
			background-clip: padding-box;
			position: absolute;
			left: 50%;
			top: 50%;
			-webkit-opacity: 0;
			-moz-opacity: 0;
			opacity: 0;
			@include transform(translate(-50%, -50%));
			animation: ube-map-animationSignal linear 2s;
			-webkit-animation-iteration-count: infinite;
			animation-iteration-count: infinite;
			display: block;
			content: '';
		}
		&:before {
			@include box-shadow(inset 0 0 35px 10px var(--map-box-effect-color1));
			border-color: rgba(38, 38, 38, 0.4);
			-webkit-animation-delay: .5s;
			animation-delay: .5s;
		}
		&:after {
			@include box-shadow(inset 0 0 35px 10px var(--map-box-effect-color2));
			-webkit-animation-delay: 1s;
			animation-delay: 1s;
		}
		&.no-image{
			left: 0;
			top: -15px;
			width: unset;
			height: unset;
		}
	}
}

@keyframes ube-map-animationSignal {
	0% {
		-webkit-opacity: 0;
		-moz-opacity: 0;
		opacity: 0;
		@include transform(translate(-50%, -50%) scale(0.3));
	}
	1% {
		@include transform(translate(-50%, -50%) scale(0.32));
		-webkit-opacity: 0.1;
		-moz-opacity: 0.1;
		opacity: 0.1;
	}
	20% {
		-webkit-opacity: 0.5;
		-moz-opacity: 0.5;
		opacity: 0.5;
		@include transform(translate(-50%, -50%) scale(0 0.45));
	}
	60% {
		@include transform(translate(-50%, -50%) scale(0.75));
		-webkit-opacity: 0.35;
		-moz-opacity: 0.35;
		opacity: 0.35;
	}
}