body 
	{
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		
	}

#slideShow
	{
		position: relative;
		margin-bottom: 26vh;
		height: 37.5vw;
		width: 66.75vw;
	}

#slideShow ul
	{
		margin: 0;
		padding: 0;
		width: 100%;
		height: 100%;
	}

#slideShow ul li
	{
		position: absolute;
		list-style-type: none;
		width: 100%;
		height: 100%;
	}

#slideShow img
	{
		display: none;
	}

.diapos
	{
		position: absolute;
		text-align: justify;
		color: red;
		font-family: 'Roboto','sans-serif';
		/*! font-size: 1.5em; */
		background: rgba(255,255,255,0.7);
		padding: 7px;
		border-radius: 33px;
		width: 108%;
		left: -12%;
	}

#arrows 
	{
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 99.5%;
		/*! z-index: 2; */
		position: absolute;
		justify-content: space-between;
		height: 100%;
		top: 21%;
		left: -9%;
	}

#arrows img
	{
		background-color: #43ff00;
		width: 10%;
		height: 10%;
		display: flex;
	}

#back
	{
		margin-left: -17%;
	}

#forward
	{

		margin-right: -28%; 
	}

#velib
	{
		display: flex;
		margin-left: 4vw;
		margin-bottom: 3vh;
		width: 93vw;
		height: 458.5vw;
		flex-direction: column;
		top: 5vh;
		z-index: 1;
	}

#map 
	{
		height: 100%;
		width: 100%;
		margin-bottom: 4%;
	}

#rightPanel 
	{
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 21px;
        flex-direction: column;
        width: 93%;
        overflow: auto;
        align-items: center;
        margin-left: -3%;
        font-size: 0.80em;
        background-color: #F3B8FB;
        display: flex;
        height: 151%;
	}

#rightPanelStart
	{
		position: absolute; 
		margin-left: 0.6vw;
		margin-bottom: 25%;
		width: 75%;
	}

#button
	{
		margin-left: -9%;
	}

#InfoStatOC
	{
		font-weight: bold;
		font-size: 1.5em;
	}

#louer
    {
	    display: flex;    
		margin-top: 50px;
		font-size: 1.3em;
		border-radius: 30px 0;
		color: #fff;
		background-color: #0ace0a;
		padding: 9px 30px 9px 30px;
		transition-property: background-color; 
	    transition-duration: 2s;
    }

#bouton:hover
	{
		background-color: #E481F8;
		color: #fff;
	}

#valider
	{
		border-radius: 0 30px 0 0;
	}

.enabledValidate
	{
		background-color: #0ace0a;
		color: white;
	}

#location p
	{
		text-align: center;
	}

#idStation
	{
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}

.closed
	{
	    color: red !important;
	    font-size: 1.5em !important;
	    font-weight: bold;
	}

#InfoStat
	{
	    color:#0ace0a;
	    text-align: center;
	    font-size: 1.5em;
	    font-weight: bold;
	}

.infos
	{
	    text-align: center;
	    font-size: 1.2em;
	    font-weight: bold; 
	}

canvas
	{
		color: black;
	}

#canvas
	{
		border:1px solid black;
		/*display: inline;*/
		background: white;
		z-index: 3;
		color: black;
		width: 80vw;
		margin-left: -5%;
		height: 53.33333334vw;
	}

#cadre
	{
	    
		flex-direction: column;
		align-items: center;
		z-index: 1;
	}

#boutonLocation
	{
	    display: flex;
		justify-content: center;
	}

.hidden
	{
		visibility: hidden;
	}

.visible
	{
		visibility: visible;
	}

.hiddenDisplay
	{
		display: none !important ;
	}

.visibleDisplay
	{
		display: flex !important;
	}

#veloStation
	{
		font-size: 1em;
	}

footer
	{
		margin-top: 2vh;
		margin-bottom: 2vh;
	}

#footer div
	{
		font-size: 0.5em;
	}

#countDown
	{
		font-size: 0.7em;
		color: #0ace0a;
	}

.red
	{
		color: rgb(255,0,0);

	}

#cancel
	{
		border-radius: 30px 0 0 0;
		background-color: red;
		color: white;
	}	

.disabledMouse
	{
		pointer-events: none;
	}
#cancelLocationByUser
    {
      font-size: 2em;
    }

@media all and (min-height: 480px)
{
	#rightPanel
		{
			
			/*height: 300%;*/
			
		}
}

@media all and (min-height: 640px)
{
	#rightPanel
		{
			height: 106%;
		}
}


@media all and (min-width: 450px) and (min-height: 817px)
{
	#rightPanel
		{
			height: 81%;
		}
	
	#slideShow
		{
			height: 34.3125vw;
			width: 61vw;
			left: -14vw;
		}

	#slideShow ul li
		{
			position: absolute;
			list-style-type: none;
			width: 100%;
			height: 100%;
		}

	#slideShow img
		{
			width: 150%;
			height: 150%;
			display: flex;
		}

	.diapos
		{
			font-size: 0.85em;
		}

	#Diapo1
		{
			width: 66%;
			top: 14%;
			left: 10%;
		}

	#Diapo2
		{
			width: 59%;
			left: 21%;
			top: 12%;
		}

	#Diapo3
		{
			left: 15%;
			top: 50%;
			width: 57%;
		}

	#clearTxtButton
		{
			color: black;
			background-color: #A9C5DB;
		}
	
	#validateTxtButton
		{
			color: white;
			background-color: #08CF0A;
		}
	
	#cancelTxtButton
		{
			color: white;
			background-color: red;
		}

	#Diapo4
		{
			width: 50%;
			left: 11%;
			top: 4%;
		}

	#Diapo5
		{
			width: 43%;
			left: 12%;
			top: 25%;
		}
		
	#Diapo6
		{
			width: 104%;
			left: -1%;
			top: 2%;
		}

	#arrows 
		{
			width: 148.5%;
			height: 100%;
			top: 21%;
			left: 1%;	
		}
	
	#arrows img
		{
			width: 6%;
			height: 8%;
		}
		
	#back
		{
			margin-left: 0;
		}

	#forward
		{
			margin-right: 0; 
		}

	#countDown
		{
			font-size: 0.9em;
		}	
}
@media all and (max-width: 600px){
	#canvas
		{
			width: 300px;
			height: 200px;
			margin-left: -24px;
		}
}

@media all and (min-width: 600px)
{
	
	#velib
		{
			margin-left: 0;
			height: 273vw;
		}

	#map
		{
			height: 97%;
			margin-bottom: 4%;
		}

	#rightPanel
		{
			margin-left: 0;
			padding-left: 0;
			width: 100%;
		}

	

	#countDown
		{
			font-size: 0.9em;
		}				
}



@media all and (min-height: 1024px)
{
  
	#velib
		{
			margin-bottom: 0;
		}

	#rightPanel
		{
			height: 270%;
			width: 100%;
		}

	#canvas
		{
			width: 300px;
			height: 200px;
		}	

	#map
		{
			height: 160%;
		}	
}

@media all and (min-width: 900px)
{
	#velib
		{
			margin-left: -1vw;
			width: 95vw;
			height: 83vw;
			flex-direction: row;
		}

	#map 
		{
			height: 100%;
			width: 100%;
			border-radius: 30px 0 0 30px;
		}


		#rightPanel 
			{
			        margin-left: 10px;
			        font-size: 0.85em;
			        border-radius: 0 30px 30px 0;
			        height: 100%;
			}
}

@media all and (min-width: 1280px)
{
	#slideShow
		{
			height: 34.3125vw;
			width: 61vw;
			left: -14vw;
			margin-bottom: 41vh;
		}

	#slideShow ul li
		{
			position: absolute;
			list-style-type: none;
			width: 100%;
			height: 100%;
		}

	#slideShow img
		{
			width: 150%;
			height: 150%;
			display: flex;
		}

	.diapos
		{
			font-size: 1.5em;
		}

	#Diapo1
		{
			width: 66%;
			top: 14%;
			left: 10%;
		}

	#Diapo2
		{
			width: 59%;
			left: 21%;
			top: 12%;
		}

	#Diapo3
		{
			left: 15%;
			top: 50%;
			width: 57%;
		}

	#clearTxtButton
		{
			color: black;
			background-color: #A9C5DB;
		}
	
	#validateTxtButton
		{
			color: white;
			background-color: #08CF0A;
		}
	
	#cancelTxtButton
		{
			color: white;
			background-color: red;
		}

	#Diapo4
		{
			width: 50%;
			left: 11%;
			top: 4%;
		}

	#Diapo5
		{
			width: 43%;
			left: 12%;
			top: 25%;
		}
		
	#Diapo6
		{
			width: 100%;
			left: 3%;
			top: 5%;
		}

	#arrows 
		{
			width: 148.5%;
			height: 100%;
			top: 21%;
			left: 1%;	
		}
		#arrows img
			{
				
				width: 2%;
				height: 4%;
			}
		
	#back
		{
			margin-left: 0;
		}

	#forward
		{
			margin-right: 0; 
		}

	#velib
		{
			width: 97vw;
			height: 64.872vw;
		}

	#map
		{
			width: 195%;
			height: 100%;
		}

	#rightPanel
		{
			width: 100%;
			height: 100%;
		}

	#canvas
		{
			width: 100%;
			height: auto;
		}	

	#countDown
		{
			font-size: 1em;
		}	
}

@media all and (min-width: 1600px)
{
	body 
		{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
		}

	#slideShow
		{
			position: relative;
			margin-bottom: 21vh;
			height: 37.5vw;
			width: 66.75vw;
			left: 2vh;
		}

	#slideShow ul
		{
			margin: 0;
			padding: 0;
			width: 100%;
			height: 100%;
		}

	#slideShow ul li
		{
			position: absolute;
			list-style-type: none;
			width: 100%;
			height: 100%;
		}

	#slideShow img
		{
			width: 100%;
			height: 100%;
		}

	.diapos
		{
			position: absolute;
			text-align: justify;
			color: red;
			font-family: 'Roboto','sans-serif';
			font-size: 1.5em;
			background: rgba(255,255,255,0.7);
			padding: 7px;
			border-radius: 33px;
		}

	#Diapo1
		{
			width: 40%;
			top: 21%;
			left: 12%;
		}

	#Diapo2
		{
			width: 50%;
			left: 10%;
			top: 19%;
		}

	#Diapo3
		{
			left: 15%;
			top: 50%;
			width: 34%;
		}

	#clearTxtButton
		{
			color: black;
			background-color: #A9C5DB;
		}
	
	#validateTxtButton
		{
			color: white;
			background-color: #08CF0A;
		}
	
	#cancelTxtButton
		{
			color: white;
			background-color: red;
		}

	#Diapo4
		{
			width: 50%;
			left: 11%;
			top: 18%;
		}

	#Diapo5
		{
			width: 43%;
			left: 12%;
			top: 25%;
		}
		
	#Diapo6
		{
			width: 51%;
			left: 12%;
			top: 19%;
		}

	#arrows 
		{
			display: flex;
			flex-direction: row;
			align-items: center;
			width: 99.5%;
			/*! z-index: 2; */
			position: absolute;
			justify-content: space-between;
			height: 100%;
			top: 0;
			left: 0;
		}
	
	#arrows img
		{
			background-color: #43ff00;
			width: 2%;
			height: 4%;
		}

	#velib
		{
			display: flex;
			margin-left: 4vw;
			width: 85.881944456vw;
			height: 51.5vw;
		}

	#map 
		{
			height: 100%;
			width: 70.87248322%;
			border-radius: 30px 0 0 30px;
		}

	#rightPanel 
		{
	        font-family: 'Roboto','sans-serif';
	       	padding-left: 10px;
	        margin-top: 0;  
	        flex-direction: column;
	        justify-content: space-between;
	        width: 26.1744966442953%;
	        overflow: auto;
	        align-items: center;
	         margin-left: 10px;
	        font-size: 0.85em;
	        background-color: #F3B8FB;
	        border-radius: 0 30px 30px 0;
	        height: 100%;
	        display: flex;
		}

	#rightPanelStart
		{
			position: absolute; 
			width: 18%;
			text-align: center;
			margin-bottom: 0;
		}

	#InfoStatOC
		{
			font-weight: bold;
			font-size: 1.5em;
		}

	#louer
	    {
		    display: flex;    
			margin-top: 50px;
			font-size: 1.3em;
			border-radius: 30px 0;
			color: #fff;
			background-color: #0ace0a;
			padding: 9px 30px 9px 30px;
			transition-property: background-color; 
		    transition-duration: 2s;
	    }

	#bouton:hover
		{
			background-color: #E481F8;
			color: #fff;
		}

	#valider
		{
			border-radius: 0 30px 0 0;
		}

	.enabledValidate
		{
			background-color: #0ace0a;
			color: white;
		}

	#location p
		{
			text-align: center;
		}

	#idStation
		{
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
		}

	.closed
		{
		    color: red !important;
		    font-size: 1.5em !important;
		    font-weight: bold;
		}

	#InfoStat
		{
		    color:#0ace0a;
		    text-align: center;
		    font-size: 1.5em;
		    font-weight: bold;
		}

	.infos
		{
		    text-align: center;
		    font-size: 1.2em;
		    font-weight: bold; 
		}

	#6
		{
			border:1px solid black;
			background: white;
			z-index: 3;
			color: black;
		}

	#cadre
		{
		    flex-direction: column;
			align-items: center;
			z-index: 1;
		}

	#boutonLocation
		{
		    display: flex;
			justify-content: center;
		}

	.hidden
		{
			visibility: hidden;
		}

	.visible
		{
			visibility: visible;
		}

	.hiddenDisplay
		{
			display: none !important ;
		}

	.visibleDisplay
		{
			display: flex !important;
		}

	#veloStation
		{
			font-size: 1em;
		}

	.red
		{
			color: rgb(255,0,0);
		}

	#cancel
		{
			border-radius: 30px 0 0 0;
			background-color: red;
			color: white;
		}	

	#cancelLocationByUser, #cancelLocationByCountDown
		{
			font-size: 1.5em;
		}

	.disabledMouse
		{
			pointer-events: none;
		}

	#countDown
		{
			font-size: 1.5em;
		}
}