body {
	font-family:Comfortaa, sans-serif;
	min-height: 100%;
	background-color:#161717;
}

.car {
	position:relative;
}

.car .speed {
	position:absolute;
	top:150px;
	left:50px;
	font-size:50px;
}

.carname {
	font-size:25px;
}

body.sidemenu {
	padding-left:100px;	
}

.contenu {
	width:calc(100% - 110px);
	margin-left:110px;
	margin-top:10px;
}

.car .place {
	position:absolute;
	right:30px;
	top:0px;

	color:rgba(255,255,255,0.4);
}

.car .car_img {
	/*height:100px;*/
}


.car .speed {
	display:block;
	text-align:center;
	position:absolute;
	width:100%;
	left:0px;
	top:-5px;
	color:rgba(255,255,255,0.4);
	display:none;
}

.car .speed .unite {
	font-size:16px;
}

.car .journey {
	position:absolute;
	width:calc(100% - 120px);
	height:20px;
	left:60px;
	bottom:-40px;
	xborder:1px solid red;

}

.car .journey .bgline{
	position:absolute;
	width:100%;
	height:2px;
	top:6px;
	left:0px;
	background-color:#777;
}

.car .journey .bglineCUR {
	position:absolute;
	width:80%;
	height:2px;
	top:6px;
	left:0px;
	background-color:#ddd;
}

.car .journey .start{
	position:absolute;
	width:6px;
	height:6px;
	top:4px;
	left:-2px;
	border-radius:6px;
	background-color:#ddd;
}

.car .journey .end{
	position:absolute;
	width:6px;
	height:6px;
	top:4px;
	right:-2px;
	border-radius:6px;
	background-color:#ddd;
}

.car .journey .startTXT{
	font-size:8px;
	text-align:center;
	position:absolute;
	width:100px;
	height:10px;
	top:13px;
	left:-51px;
	color:#ddd;
}

.car .journey .startHOUR{
	font-size:13px;
	text-align:center;
	position:absolute;
	width:100px;
	height:10px;
	top:-15px;
	left:-51px;
	color:#ddd;
}

.car .journey .endHOUR{
	font-size:13px;
	text-align:center;
	position:absolute;
	width:100px;
	height:10px;
	top:-15px;
	right:-51px;
	color:#ddd;
}


.car .journey .endTXT{
	font-size:8px;
	text-align:center;
	position:absolute;
	width:100px;
	height:10px;
	top:13px;
	right:-51px;
	color:#ddd;
}

.car .journey .drapeaux{
	position:absolute;
	width:16px;
	height:12px;
	top:-2px;
	right:-25px;
	background-size: contain;
	background-repeat:no-repeat;
 	background-image: url(/img/tesla/drapeaux.png);
 	background-position: bottom right, left, right;
}


.car .precond {
	position:absolute;
	font-size:12px;
	width:calc(100% - 120px);
	height:20px;
	left:60px;
	bottom:-35px;
	text-align:center;
	color:rgba(255,255,255,0.7);
	xborder:1px solid red;

}


.sidemenu {
	position:fixed;
	top:0;
	left:0;
	height:100%;
	width:100px;
	/*background: linear-gradient(0.25turn, #101010, #161717);*/
	background-color:black;
	border-right:1px solid rgba(255,255,255,0.2)
}

.sidemenu .item {
	font-size:35px;
	width:70px;
	height:70px;
	margin:15px;
	line-height:70px;
	border-radius: 15px;
	color:white;
	text-align:center;
}

.sidemenu .item.active {
	background-color:#404040;
}


.subbuttons {
	text-align:center;
}

.subbutton {
	font-size:25px;
	display:inline-block;
	width:50px;
	height:50px;
	line-height:50px;
	text-align:center;
	color:#AAAAAA;
	margin-right:20px;
}

.subbutton.active {
	color:white;
}

.car .map {
	width:100%;
}

.car .shift {
	position:absolute;
	right:30px;
	top:20px;
	color:rgba(255,255,255,0.3);
}

.car .shift .active {
	color:rgba(255,255,255,0.7);
	font-weight:700;
}


#piscine {
	position:absolute;
	top:0;
	left:100px;
	width:calc(100% - 100px);
	height:100%;
	background-size: cover;
 	background-image: url(/img/piscine/fond-piscine-masque.png);
 	background-position: bottom right, left, right;
}

#piscine.static {
 	background-image: url(/img/piscine/fond-piscine-vierge.jpg);
}

#piscineanimatedgif {
	display:none;
	position:absolute;
	top:0;
	left:100px;
	width:calc(100% - 100px);
	height:100%;
	background-size: cover;
 	background-image: url(/img/piscine/video-fond-eau.gif);
 	background-position: bottom right, left, right;
}

.eauvideo {
  overflow: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.eauvideo > video {
	width:calc(100% - 100px);
	height: 100%;
	position: absolute;
	top: 0;
	left: 100px;
	object-fit: cover;
}

.eau {
	position:absolute;
	top:0;
	left:100px;
	width:calc(100% - 100px);
	height:100%;
	background-size: cover;
 	background-image: url(/img/piscine/fond-piscine-vierge.jpg);
 	background-position: bottom right, left, right;
	filter: url("#turbulence");
}


#gonflable {
	position:absolute;
	bottom:0;
	left:0;
}

#gonflable img {
	position:absolute;
}



.gradientoverlay {
    background-image:
    linear-gradient(to bottom right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
	margin-left:100px;
	position:absolute;
	top:0;
	left:0;
	width:calc(100% - 100px);
	height:100%;
}


#conteneur_pompe_piscine {
	position:absolute;
	bottom:30px;
	left:140px;
}

#conteneur_temperature_piscine {
	position:absolute;
	top:30px;
	left:240px;
}

#conteneur_ph_piscine {
	position:absolute;
	top:30px;
	left:640px;
}

#conteneur_chlore_piscine {
	position:absolute;
	top:30px;
	left:960px;
}



#conteneur_courbe_temperature_piscine {
	position:absolute;
	top:200px;
	left:140px;
	width:350px;
	height:200px;
	background-color:rgba(0,0,0,0.3);
	border:1px solid rgba(255,255,255,0.3);
}


#conteneur_courbe_ph_piscine {
	position:absolute;
	top:200px;
	left:510px;
	width:350px;
	height:200px;
	background-color:rgba(0,0,0,0.5);
	border:1px solid rgba(255,255,255,0.3);
}

#conteneur_courbe_chlore_piscine {
	position:absolute;
	top:200px;
	left:880px;
	width:350px;
	height:200px;
	background-color:rgba(0,0,0,0.5);
	border:1px solid rgba(255,255,255,0.3);
}




#conteneur_historique_pompe_piscine {
	color:#ffffff;
	position:absolute;
	bottom:50px;
	left:270px;
	width:calc(100% - 300px);
	height:50px;
}

#conteneur_historique_pompe_piscine table {
	background-color:rgba(0,0,0,0.3);
	border-collapse: collapse;
	width:100%;
	border:1px solid white;
}

#conteneur_historique_pompe_piscine td {
	padding:0;
	border:1px solid white;
	text-align:center;
	font-size:15px;
}

.piscine_ph_label {
	font-size:11px;
	color:white;
}

.piscine_ph {
	font-size:100px;
	color:white;
}

.piscine_chlore_label {
	font-size:11px;
	color:white;
}

.piscine_chlore {
	font-size:100px;
	color:white;
}



.piscine_temp_label {
	font-size:11px;
	color:white;
}

.piscine_temp {
	font-size:100px;
	color:white;
}

.pompe_label {
	font-size:11px;
	color:white;
}

.pompe_icone {
	cursor:pointer;
	width:120px;
	height:80px;
	background-repeat:no-repeat;
	background-size: contain;
}



.pompe_icone.off {
 	background-image: url(/img/piscine/pompe-off.png);
	opacity:0.3;
}

.pompe_icone.on {
 	background-image: url(/img/piscine/pompe-on.gif);
}