body { background-color:#6699cc; font-family:"Comfortaa"; color:#6699cc; margin:100px 0 0 0; font-size:13pt; -webkit-font-smoothing:antialiased; }

a { color:#6699cc; text-decoration:none; }

#calc { position:relative; z-index:10; width:70%; background-color:rgba(255,255,255,0.5); border-top-left-radius:40px; border-top-right-radius:40px; margin:auto; min-height:600px;  padding:40px 40px 5px 40px; box-shadow:0 0 40px white; }

#home { transition:opacity 0.5s; text-align:center; }
#choix_vehicule, #infos_trajet, #choix { transition:opacity 0.5s; opacity:0; }

#choix_vehicule { margin-bottom:20px; text-align:center; }

#icones { width:300px; margin:0 auto 10px auto; }
.icon { width:36px; height:36px; padding:6px; margin:15px 7px -5px 7px;  border:2px solid #6699cc; border-radius:60px; cursor:pointer; transition:all 0.2s; vertical-align:bottom; }

.border, .tableau a { border:2px solid #6699cc; border-radius:60px; padding:12px 15px 12px 15px; cursor:pointer; transition:all 0.2s; display:inline-block; margin:10px; }
.tableau a { margin:2px; padding:8px; width:70px; text-align:center; }
.border:hover, .icon:hover, .selected, select:hover, .tableau a.selected { background-color:#6699cc; color:#a3d6f7; box-shadow:0 0 4px grey; }

select { -webkit-appearance:none; -moz-appearance:none; appearance:none; outline:none; border:2px solid #6699cc; color:#6699cc; border-radius:60px; padding:12px 35px 12px 15px; cursor:pointer; background:url("img/arrow.png") no-repeat right 15px center/10px; background-blend-mode:screen; font-family:"Comfortaa"; font-size:11pt; font-weight:bold; transition:all 0.2s; }

#infos_trajet { text-align:center; }

input { background:none; font-size:13pt; font-family:"Comfortaa"; border:none; border-bottom:1px solid #6699cc; outline:none; color:#6699cc; font-weight:bold; width:40px; text-align:right; border-radius:0; }

#moyenne { font-size:10pt; margin:5px; height:15px; }
#errors { color:#ff7c7f; visibility:hidden; font-size:10pt; margin:5px; }

hr { width:40%; height:2px; border:none; background:#6699cc; border-radius:2px; }

#resultats { margin:20px auto 20px auto; text-align:left; width:90%; }

.multiply { width:220px; font-size:13pt; margin:-10px -40px -12px 0; }

table { margin:auto; text-align:left; }
table td:first-child { text-align:right; }
table td { padding-bottom:10px; }
.tableau { border-collapse:collapse; margin-top:40px; }
.tableau tr { vertical-align:middle; border-bottom:1px solid #dddddd;}
.tableau td { text-align:left; white-space:nowrap; padding:10px; text-align:right; }
.tableau td:first-child { text-align:right; padding-right:0; }
.tableau tr:first-child { border-bottom:2px solid #6699cc; }
.tableau tr:last-child { border:none; }

.graph { border-left:2px solid #6699cc; margin:20px 0 40px 0; padding-top:1px; white-space:nowrap; }
.graph_title { margin:10px 5px; }

.bar { box-sizing:border-box; background-color:#6699cc; color:#a3d6f7; box-shadow:0 0 4px grey; display:inline-block; border-top-right-radius:60px; border-bottom-right-radius:60px; text-align:right; padding:8px 12px 8px 12px; font-size:11pt; margin-bottom:12px; vertical-align:middle; white-space:nowrap; min-width:fit-content; }

.red { background-color:#ff7c7f; color:#ffcccc; }
.blue { background-color:#6699cc; color:#a3d6f7; }
.green { background-color:#4eaf7e; color:#76e9af; }

.vv { font-size:11pt; vertical-align:middle; display:inline-block; height:30px; padding-left:8px; }
.bar .vv { height:auto; float:left; }

.gauge { text-align:center; margin-bottom:40px; }

canvas { width:420px; height:210px; font-family:"Comfortaa"; font-size:12pt;}

#recap { font-size:11pt; transition:opacity 0.5s; pointer-events:none; }
#recap img { margin:10px 5px 10px 0; vertical-align:middle;width:25px;height:25px;padding:3px; }
#recap a { padding:8px; font-size:11pt; margin:5px; }

.app { width:32px; margin:5px; vertical-align:middle; }

#header { position:fixed; top:-300px; width:100%; transition:all 0.5s;  background-color:#d2e1ef; border-bottom:2px solid #6699cc; z-index:20; text-align:center; padding:100px 14% 0 14%; box-sizing:border-box; }
#logo, #help_big, #help, #minilogo { float:left; }
#dreal, #atmo, #minidreal, #miniatmo, #p1, #p2 { float:right; }
#logo, #dreal, #atmo, #p1, #p2 { height: 80px; }
#p1, #p2 { margin-right:10px; }
#logos { width:100%; height:120px; margin-bottom:20px; }
#minilogo, #minidreal, #miniatmo { height: 40px; margin:5px; }
#help { padding:8px; margin:8px; width:16px; font-size:11pt; }
#help_big { padding:10px 15px; margin:15px; }

#footer { font-size:8pt; margin-top:20px; text-align:center; }
#footer a:hover { border-bottom:1px solid #6699cc; }

#top { border:2px solid #6699cc; border-bottom-right-radius:0; border-bottom-left-radius:0; z-index:20; margin:0; border-bottom:none; position:fixed; bottom:0; right:20px; opacity:0; background-color:#d2e1ef; }

.mobile { display:none; }

.text { font-size:11pt; line-height:16pt; margin-bottom:60px; }
h4, h3 { border-bottom:1px solid #6699cc; margin-top:40px; }
h2 { text-align:center; }
li { font-size:10pt; }

#cloud1 { position:fixed; top:80px; width:130%; opacity:0.6; margin:-20%; }
#cloud2 { position:fixed; top:80px; width:70%; opacity:0.8; margin-left:50%; }
#cloud3 { position:fixed; top:80px; width:100%; opacity:0.8; margin-left:-20%; }

[tooltip],[tooltip-left]{ position:relative; display:inline-block; }
[tooltip]:hover::after,[tooltip]:hover::before { opacity:1; }
[tooltip-left]:hover::after,[tooltip-left]:hover::before { opacity:1; }

[tooltip]::before
{
    content: "";
    position: absolute;
    left: 50%;
    border-width: 4px 6px 0 6px;
    border-style: solid;
    border-color: #6699cc transparent transparent transparent;
    z-index: 100;
    top: 110%;
	margin-top: 8px;
	transform: translateX(-50%) translatey(-100%) rotate(-180deg);
	opacity: 0;
	transition: opacity 0.2s;
}

[tooltip]::after
{
    content: attr(tooltip);
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    background-color: #6699cc;
    text-align: center;
    color: #a3d6f7;
    padding: 10px 15px 10px 15px;
    font-size: 11pt;
    border-radius: 20px;
    pointer-events: none;
    top: 110%;
	margin-top: 8px;
	transform: translateX(-50%) translateY(0%);
	opacity: 0;
	transition: opacity 0.2s;
	box-shadow: 0 0 4px grey;
	white-space: nowrap;
	z-index:99;
}

[tooltip-left]::before
{
	content: "";
	position: absolute;   
	border-width: 4px 6px 0 6px;
	border-style: solid;
	border-color: #6699cc transparent transparent transparent;
	z-index: 100;
	left:-40px;
	top:50%;
	margin-left:-12px;
	transform:translatey(-50%) rotate(-90deg) ;
	opacity: 0;
	transition: opacity 0.2s;
}

[tooltip-left]::after
{
	content: attr(tooltip-left);
	position: absolute;
	background-color: #6699cc;
	text-align: center;
	color: #a3d6f7;
	padding: 10px 15px 10px 15px;
	font-size: 11pt;
	border-radius: 20px;
	pointer-events: none;
	left:-40px;
	top:50%;
	margin-left:-8px;
	transform: translateX(-100%)   translateY(-50%);
	opacity: 0;
	transition: opacity 0.2s;
	box-shadow: 0 0 4px grey;
	white-space: nowrap;
	z-index:99;
}

div.graph div { display:block; }
div.graph [tooltip]::before, div.graph [tooltip]::after { left:-25px; top:90%; }
#infos_trajet [tooltip]::before, #infos_trajet [tooltip]::after { top:90%; }


@media (max-width:800px)
{
	body { margin:0; font-weight:-webkit-text-size-adjust:none; background-color:#d2e1ef; padding-top:env(safe-area-inset-top); }
	#home { width:320px; margin:auto; line-height:24pt; }
	#calc { width:100%; padding:40px 0 20px 0; box-sizing:border-box; border-radius:0; background:none; box-shadow:none; }
	#choix select { max-width:134px; }
	#icones { width:300px; }
	.icon { padding:12px; margin:30px 10px -5px 10px; }
	#resultats { padding:0 20px; }
	canvas { width:300px; height:170px; }
	.tableau tr:first-child, .tableau td:first-child { font-size:10pt; border-width:2.8px; }
	#atmo { margin-right:0; }
	#logos { margin:0 auto 60px auto; }
	.mobile { display:block; }
	.desktop { display:none; }
	#choix_vehicule { line-height:24pt; margin-bottom:30px; }
	#logo, #help_big, #atmo, #dreal { float:none; }
	#help_big {  vertical-align:top; font-size:18pt; padding:14px 20px; }
	#header { display:none; }
	#logos { text-align:center; margin-bottom:40px; height:auto; }
	#logos img { margin:10px; vertical-align:middle; height:70px; }
	.multiply { font-size:10pt; width:180px; }
	#resultats { font-size:11pt; width:80%; }
	.graph { margin-left:20px; }
	#logos img#dreal { height:60px; padding-left:10px;  }
	.tableau a { border:none; }
	.tableau.mobile a { border:2px solid #6699cc; }
	#choix td { padding-bottom:20px; }
	select { padding:16px 35px 16px 15px; }
	hr { margin-bottom:30px; }
}