:root {

	--panel-bg-color:  hsl(131.6, 47.7%, 12.5%);
	--panel-place-name-bg-color:  hsl(131.6, 52.7%, 7.5%);
	--panel-place-name-color:  white;
}



body {

	background:  hsl(0, 50%, 2%);
}


#login-page {

	color: white;
}


#mapview #geoPoint a, 
#mapview #geoPoint a:visited {

	color: white;
	opacity:  0.4;
	text-decoration: none;
}



body#sonar {

	background:
		/* 
		repeating-linear-gradient(to right, hsl(132.2, 59.8%, 52.2%) 0vh, hsl(132.2, 59.8%, 52.2%) 0.4vh, transparent 0.4vh, transparent 10vh),
		repeating-linear-gradient(transparent, transparent 9.8vh, hsl(132.2, 59.8%, 52.2%) 10.2vh, hsl(132.2, 59.8%, 52.2%) 10.2vh, transparent 10.2vh),
		*/

		linear-gradient(to right, transparent 0vw, transparent 32.9vw, hsl(132.2, 59.8%, 74.2%) 32.9vw, hsl(132.2, 59.8%, 74.2%) 33.1vw, transparent 33.1vw), 
		linear-gradient(to right, hsl(132.2, 59.8%, 12.1%) 0vw, hsl(132.2, 59.8%, 12.1%) 0.1vw, transparent 0.1vw), 
		repeating-linear-gradient(to right, hsl(132.2, 59.8%, 52.2%) 0vw, hsl(132.2, 59.8%, 52.2%) 0.1vw, transparent 0.1vw, transparent 5.4vw, hsl(132.2, 59.8%, 52.2%) 5.4vw, hsl(132.2, 59.8%, 52.2%) 5.5vw),

		/*linear-gradient(to bottom, transparent 0vw, transparent 32.9vw, hsl(132.2, 59.8%, 74.2%) 32.9vw, hsl(132.2, 59.8%, 74.2%) 33.1vw, transparent 33.1vw), */
		linear-gradient(to bottom, hsl(132.2, 59.8%, 12.1%) 0vw, hsl(132.2, 59.8%, 12.1%) 0.1vw, transparent 0.1vw), 
		repeating-linear-gradient(to bottom, hsl(132.2, 59.8%, 52.2%) 0vw, hsl(132.2, 59.8%, 52.2%) 0.1vw, transparent 0.1vw, transparent 5.4vw, hsl(132.2, 59.8%, 52.2%) 5.4vw, hsl(132.2, 59.8%, 52.2%) 5.5vw),
		
		hsl(132.2, 59.8%, 12.1%);
}



#map {

	background: 
		linear-gradient(  0deg, transparent 49.85%, hsl(132.2, 59.8%, 74.2%) 49.85%, hsl(132.2, 59.8%, 74.2%) 50.15%, transparent 50.15%),
		linear-gradient( 90deg, transparent 49.85%, hsl(132.2, 59.8%, 74.2%) 49.85%, hsl(132.2, 59.8%, 74.2%) 50.15%, transparent 50.15%), 
		linear-gradient( 45deg, transparent 49.90%, hsl(132.2, 59.8%, 74.2%) 49.90%, hsl(132.2, 59.8%, 74.2%) 50.10%, transparent 50.10%), 
		linear-gradient(135deg, transparent 49.90%, hsl(132.2, 59.8%, 74.2%) 49.90%, hsl(132.2, 59.8%, 74.2%) 50.10%, transparent 50.10%), 
		repeating-radial-gradient(transparent 0, transparent 10%, hsl(132.2, 59.8%, 74.2%) 10%, hsl(132.2, 59.8%, 74.2%) 10.4%), 
		/*radial-gradient(circle at center, hsl(132.2, 59.8%, 37.1%) 0%, hsl(132.2, 59.8%, 74.2%) 50%, hsl(132.2, 59.8%, 37.1%) 100%), */
		hsla(132.2, 59.8%, 37.1%, 0.8);

	border-style:  solid;
	border-color:  hsl(132.2, 59.8%, 74.2%);

}

#map-deco {

	background: 
		conic-gradient(hsla(132.2, 59.8%, 74.2%, 1) 0deg, hsla(132.2, 59.8%, 74.2%, 0) 45deg, hsla(132.2, 59.8%, 74.2%, 0) 0deg);
	animation:  sonar 5s linear infinite reverse;
}

@keyframes sonar {

	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(355deg);
	}

}


#map .place {

	opacity: 0;
	animation: appear infinite 5s;
}

@keyframes appear {

	0% {
		opacity:  1;
	}

	100% {
		opacity: 0;
	}
}


#map .place, 
#map .player {

	cursor:  pointer;
}







#place-details {

	background: var(--panel-bg-color);
	color:  white;

	cursor: auto;

	animation: slideIn 1s forwards;
}

@keyframes slideIn {

	0% {
		transform: translateX(33vw);
	}
	100% {
		transform: translateX(0);
	}
}

#place-details > .place-name {


	background-color: var(--panel-place-name-bg-color);
	color: var(--panel-place-name-color);
}



#place-details > address {
	
	opacity: 0.8;
}

#place-details > address .distance:after {

	content: " à vol d\'OVNI";
}

#place-details .get-directions a span {

	display: none;
}


#place-details .get-directions .car:after {

	content:  "en hyperespace";
}

#place-details .get-directions .bike:after {

	content:  "en vitesse supraluminique";
}

#place-details .get-directions .foot:after {

	content:  "en vitesse subluminique";
}

#place-details > h4 {

	background: var(--panel-place-name-bg-color);
}

#place-details a, 
#place-details a:hover,
#place-details a:focus,
#place-details a:active,
#place-details a:visited {

	color:  inherit;
	text-decoration:  none;
}