/* Taille : 1920*1080*/


/* Partie rotation de la page*/
	html {
		font-family: "Trebuchet MS", Verdana, Geneva, Arial;
		height: 100vh;
	}

/* Gestion de l'entete*/
	div#entete {
		height: 125px;
		background: linear-gradient(to top, #0134DE, #113ED2); /* bot top */
		background-image:url(../img/entete.png);
		position: fixed;
		width: 100%;
		text-align: center;
		min-width: 400px;
	}

		p#titre {
		color: white;
		font-style: bold;
		font-size: 20px;
		position: absolute;
		top: 80px;
		width: 100%;
		text-align: center;		
	}


/* Gestion des bouton de l'entete*/
	.bouton_entete {
		position: relative;
		margin-top: 5px;
		margin-left: 5px;
		width: 90px;
		max-width: 100%;
		height: auto;
	}


/* Corp de la page */
	body {
		background: #D7D7D7;
		margin: 0;
		box-sizing: border-box;
	}

	body#home {
		background-image:url(../img/index.jpg);
		background-repeat:no-repeat;
		background-size: 100%;
	}

	div#contenu {
		height: 90%;
	    position: fixed;
	    top: 125px;
	    overflow-x: hidden;
	    overflow-y: auto;
	    width: 100%;
	}

	div#fin_cmd {
		text-align: center;
		font-size: 30px;
		font-style: bold;
		color: black;
	}
	div#cmd_aff_bas{
		position : fixed;
		bottom: 10px;
		text-align: center;
		font-style: bold;
		color: black;
		width: 100%;
	}

/* formulaire */
	form {
		margin-left: auto;
		margin-right: auto;
		display: block;
		min-width: 540px;
	}

	form#home {
		margin-left: auto;
		margin-right: auto;
		display: block;
		min-width: 400px;
		font-size: 30px;
		font-style: bold;
		color: white;
		text-align: center;
	}


	label {
		font-size: 30px;
		font-style: bold;
		color: black;
	}

	label#sugg{
		font-size: 30px;
		font-style: bold;
		color: black;
		display: block;
		text-align: center;
	}

	select {
		position: relative;
	   	background: transparent;
	   	width: 268px;
	   	padding: 5px;
	   	font-size: 16px;
	   	line-height: 1;
	   	border: 0;
	   	border-radius: 0;
	   	height: 34px;
	   	-webkit-appearance: none;
	   	-moz-appearance: none;
    	appearance: none;
	   	overflow: hidden;
	   	background: url(../img/select.png) no-repeat right #ddd;
	   	border:2px solid #ccc;
		-moz-border-radius:7px;
		-webkit-border-radius:7px;
		border-radius:7px;   	}

   	button#valider, button#effacer, input[type=button]#effacer {
		font-size: 30px;
		font-style: bold;
		color: black;
		border:2px solid #ccc;
		-moz-border-radius:7px;
		-webkit-border-radius:7px;
		border-radius:7px;
		background: #ddd;
   	}

   	input[type=text]#choix_autre {
   		font-size: 15px;
   		border:2px solid #ccc;
		-moz-border-radius:7px;
		-webkit-border-radius:7px;
		border-radius:7px;
		background: #ddd;
		height: 30px;
		width: 1000px;
		position: absolute;
   	}

/* affichage liste carte */

	tr.table_gris {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(180,180,180,0.5);
		z-index: 1;
		border:2px solid #7E7E7E;
		-moz-border-radius:7px;
		-webkit-border-radius:7px;
		border-radius:7px;
	}

	thead {
		color: #7E7E7E;
	}

	table {
		margin: auto;
		width: 100%;
		min-width: 540px;
		max-width: 1200px;
		border:2px solid #7E7E7E;
		-moz-border-radius:7px;
		-webkit-border-radius:7px;
		border-radius:7px;
		background: #D7D7D7;
		position: relative;
		z-index: 0;
	}


	.cmd_next {
		position: fixed;
		bottom: 10px;
		width: 100%;
		min-width: 540px;
		max-width: 1200px;
		border:2px solid #7E7E7E;
		-moz-border-radius:7px;
		-webkit-border-radius:7px;
		border-radius:7px;
		background: #D7D7D7;
		left: 50%;
		margin-left: -600px;
	}

	.tab_1 {
		width: 95px;
		height: 95px;
	}
	.tab_1_input {
		max-width: 90px;
		max-height: 90px;
		opacity: .99;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	.tab_1bis {
		min-width: 5px;
		height: 95px;
	}
	.tab_2 {
		min-width: 100px;
		font-size: 30px;
		font-style: bold;
		vertical-align: middle;
	}
	.tab_2bis {
		font-size: 30px;
		font-style: bold;
		vertical-align: middle;
		text-align: center;
	}
	.tab_2ter {
		min-width: 100px;
		font-size: 20px;
		vertical-align: middle;
		color: #162354;
	}
	.tab_2terbis {
		min-width: 300px;
		font-size: 30px;
		font-style: bold;
		vertical-align: middle;
		color: #162354;
	}
	.tab_3 {
		width: 50px;
	}
	.tab_4 {
		width: 60px;
	}
	.tab_4_input {
		width: 60px;
		background: none;
		border: none;
		text-align: center;
		font-style: bold;
		font-size: 55px;
	}
	.tab_4bis {
		font-size: 30px;
		font-style: bold;
		vertical-align: middle;
		min-width: 100px;
		width: 0px;
	}
	.tab_5 {
		width: 50px;
	}
	.tab_5bis {
		font-size: 30px;
		font-style: bold;
		vertical-align: middle;
	}
	.tab_6 {
		width: 100px;
		color: #162354;
		font-size: 70px;
		font-style: bold;
	}
	.tab_6bis {
		text-align: center;
		color: #162354;
		font-size: 50px;
		font-style: bold;

	}
	.tab_6_input {
		width: 140px;
		background: none;
		border: none;
		text-align: center;
		font-style: bold;
		font-size: 50px;
		color: #162354;
	}
	.tab_7 {
		font-size: 15px;
		vertical-align: top;
	}

	/* suprresion des boutons up and down */
	input[type=number] {-moz-appearance: textfield;}
	::-webkit-inner-spin-button { -webkit-appearance: none;}
	::-webkit-outer-spin-button { -webkit-appearance: none;}

   	button#valid_commande {
   		position: fixed;
   		bottom: 100px;
   		right: 10px;
		border: none;
		background: none;
   	}
   	button#erase_commande {
   		position: fixed;
   		bottom: 40px;
   		right: 10px;
		border:none;
		background: none;
   	}

   	button#bt_index {
		border: none;
		background: none;
   	}

/* meteo */
	div#meteo {
 		height: 800px;
 		vertical-align: center;
 	}


/* Gestion des bouton radio en type checkbox */
/*
		Demo CSS code
*/
	
	[type="checkbox"]:not(:checked),
	[type="checkbox"]:checked {
		position: absolute;
		visibility: hidden;	
	}
	[type="checkbox"]:not(:checked) + label,
	[type="checkbox"]:checked + label {
		position: relative;
		padding-left: 75px;
		cursor: pointer;
	}
	[type="checkbox"]:not(:checked) + label:before,
	[type="checkbox"]:checked + label:before,
	[type="checkbox"]:not(:checked) + label:after,
	[type="checkbox"]:checked + label:after {
		content: '';
		position: absolute;
	}
	[type="checkbox"]:not(:checked) + label:before,
	[type="checkbox"]:checked + label:before {
		left:0; top: -3px;
		width: 65px; height: 30px;
		background: #ccc;
		border-radius: 15px;
		-webkit-transition: background-color .2s;
		-moz-transition: background-color .2s;
		-ms-transition: background-color .2s;
		transition: background-color .2s;
	}
	[type="checkbox"]:not(:checked) + label:after,
	[type="checkbox"]:checked + label:after {
		width: 20px; height: 20px;
		-webkit-transition: all .2s;
		-moz-transition: all .2s;
		-ms-transition: all .2s;
		transition: all .2s;
		border-radius: 50%;
		background: #162354;
		top: 2px; left: 5px;
	}


	[type="checkbox"]:checked + label:before {
		background:#162354; 
	}
	[type="checkbox"]:checked + label:after {
		background: #ccc;
		top: 2px; left: 40px;
	}

	[type="checkbox"]:checked + label .ui,
	[type="checkbox"]:not(:checked) + label .ui:before,
	[type="checkbox"]:checked + label .ui:after {
		position: absolute;
		left: 6px;
		width: 65px;
		border-radius: 15px;
		font-size: 14px;
		font-weight: bold;
		line-height: 22px;
		-webkit-transition: all .2s;
		-moz-transition: all .2s;
		-ms-transition: all .2s;
		transition: all .2s;
	}
	[type="checkbox"]:not(:checked) + label .ui:before {
		content: "non";
		left: 32px
	}
	[type="checkbox"]:checked + label .ui:after {
		content: "oui";
		color: #ccc;
	}
	[type="checkbox"]:focus + label:before {
		border: 1px dashed #777;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
		margin-top: -1px;
	}

 /* GESTION BOUTON POUR PAYER*/
	label.radio_bt > input{
	  visibility: hidden;
	  position: absolute;
	}
	label.radio_bt > input + img{
	  cursor:pointer;
	}
	label.radio_bt > input:checked + img{
	  box-shadow:	0px 0px 10px 5px #162354,
	  				0px 0px 1px 5px #162354 inset;
	}
	label.radio_bt > input:disabled + img{
		position: relative;
		z-index: 1;
		background-image:url(../img/cmd_trait.png);
	}



/* affichage liste carte */
	table.aff_cmd {
		margin: auto;
		width: 100%;
		min-width: 540px;
		max-width: 1200px;
		border:2px solid #7E7E7E;
		-moz-border-radius:7px;
		-webkit-border-radius:7px;
		border-radius:7px;
		background: #D7D7D7;
	}

	.tab_aff_cmd_cont {
		width: 110px;
		height: 110px;
	}
	.tab_aff_cmd_img {
		width: 100px;
		height: auto;
		opacity: .99;
	}
	
	.tab_aff_cmd_time {
		width: 100%;
		color: #162354;
		font-size: 30px;
		font-style: bold;
	}

/* aff temps listecmd.php */
 	div#temps {
 		color: #162354;
		font-size: 70px;
		font-style: bold;
		text-align: center;
	}



	input[type=button]#index {
		font-style: bold;
		color: black;
		border:2px solid #ccc;
		-moz-border-radius:7px;
		-webkit-border-radius:7px;
		border-radius:7px;
		background: #ddd;
   	}

   	@media only screen and (max-width: 1200px) {
		.cmd_next {
			margin: 0;
			left: initial;
	}}