:root {
	--map-red: rgb(196, 30, 58);
}

#svgQCCMap {
	width:100%;
}
#svgQCCMap * {
	transition: opacity .35s, fill .35s, color .35s, text-shadow .1s, box-shadow 0.1s ease-out;
}
.map_mpt_item {
	display:flex;
	max-width:33%;
	width:100%;
	flex:1 1 auto;
	flex-direction:row;
}
.camper-site, .camper-site-box, .camper-site-num {
	cursor:pointer;
}
.camper-site .camper-site-num {
	fill:rgba(0,0,0,1);
}
.camper-site .camper-site-box {
	fill:rgba(255,255,255,.25) !important;
}
.camper-site:hover {
	background-color:rgb(228,228,255);
}
.camper-site:hover .camper-site-box {
	fill:rgb(228,228,255) !important;
	filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, .25));
}
.camper-site:hover .camper-site-num {
	color:rgb(0,0,96);
	fill:rgb(0,0,96) !important;
	box-shadow:1px 1px 2px rgba(0,0,0,.35);
}


.camper-site.active .camper-site-box {
	fill:rgb(228,228,120) !important;
	filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, .25));
}
.camper-site.active .camper-site-num {
	color:rgba(66,66,0,1) !important;
	fill:rgba(66,66,0,1) !important;
}


.camper-site.selected .camper-site-box {
	fill:rgb(228,255,228) !important;
	stroke:rgb(0,96,0) !important;
	filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, .25));
}
.camper-site.selected .camper-site-num {
	color:rgb(0,96,0) !important;
	fill:rgb(0,96,0) !important;
}

.svg-container {
	aspect-ratio:933 / 1237;
	border: 1px solid;
	border-radius:0.375rem;
	height: auto;
	overflow:hidden;
	position:relative;
	width: 100%;
}
svg {
	height:auto;
	margin:auto;
	width:100%;
	transition: transform 0.1s linear 0.1s;
}

.cps-active {
	stroke-width:2px !important;
	stroke:var(--map-red) !important;
	filter: drop-shadow(1px 1px 2px rgba(0,0,0,.25));
}

.cps-path-stroke {
//	animation: cps-path-stroke 2s linear;
	stroke-dashoffset: 0;
}
.cps-pathmarker {
	width:10px
	height:10px;
	border-radius:5px;
	background-color:red;
}


//@keyframes cps-path-stroke {
//	to {
//		stroke-dashoffset: 0;
//	}
//}


@media (max-width:990px) {
	
}