
*
{
    margin: auto;
    /*font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;*/
}


input,textarea,select,button
{
    border-style: none;
    outline: none !important;
    resize: none;
    background: white;
    overflow: auto;
}

table
{
    margin: 0;
    padding: 0;
    border: none;
}


html
{
    height: 100%;
    width: 100%;
}

details summary::-webkit-details-marker {
  display: none;
  outline: none;
}

details summary {
  list-style: none;
  outline: none;
}



body
{
    background: #FAFAFA;
    height: 100%;
    width: 100%;
    overflow: hidden;
}



/*Connect*/

	#connect
	{
		width: 100%;
		height: 100%;
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 10px;
	}

	#configuration
	{
		width: 90%;
		height: 95%;
		overflow: auto;
		background: white;
		border-radius: 20px;
		box-shadow: 0 0 13px 5px #80808054;
		display: grid;
		grid-template-rows: auto 1fr;
	}

	.search
	{
		width: 100%;
		height: max-content;
		text-align: center;
		z-index: 1;
		background: white;
		padding: 20px 0;
		border-radius: 0 0 20px 20px;
	}

	.search input
	{
		width: 90%;
		height: 40px;
		display: grid;
		text-align: center;
		box-shadow: 0 0 7px 3px #8080804d;
		border-radius: 30px;
		z-index: 1;
		font-weight: bold;
		font-size: 17px;
		color: black;
		margin-bottom: 20px;
	}

	.search input::placeholder
	{
		font-weight: lighter;
		font-size: 15px;
		color: grey;
	}

	.search select
	{
		text-align: center;
		margin: 0 2%;
		width: 45%;
		height: 40px;
		box-shadow: 0 0 7px 3px #80808021;
		border-radius: 30px;
	}


	#navContainer
	{
		width: 100%;
		height: 100%;
		/*background: red;*/
		overflow: auto;
	}


	#navContainer nav
	{
		padding: 10px;
		background: #8080802b;
	    margin-bottom: 10px;
	    border-radius: 30px;
	    font-size: 14px;
	    font-weight: bold;
		width: 90%;
	}


	#navContainer nav.active
	{
		transition: .4s;
		padding: 10px;
		background: #2196f3;
		color: white;
	    font-size: 16px;
	    margin-bottom: 15px;
	}


	#affichage
	{
		width: 90%;
		height: 95%;
		overflow: auto;
		background: white;
		border-radius: 20px;
		box-shadow: 0 0 13px 5px #80808054;
		display: grid;
		grid-template-rows: 50px 1fr;
	}


	.hideAffiche
	{
		/*display: none;*/
		width: 90%;
	}

	#detail-car
	{
		width: 100%;
		/*height: 100%;
		overflow: auto;*/
	}


	@media (max-width: 780px) {

		#connect
		{
			width: 100%;
			height: 100%;
			display: block;
		}

		#configuration
		{
			width: 100%;
			height: 100%;
			overflow: auto;
			background: white;
		}
		#affichage
		{
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			left: 0;
			overflow: auto;
			background: white;
			z-index: 1;
			display: grid;
			grid-template-rows: 50px 1fr;
			display: none;
		}

		.hideAffiche
		{
			display: block;
			width: 90%;
		}


	}
























