form {
	margin: 0 auto;
	/* text-align: center; */
	/* width: 90%; */
}

@media only screen and (max-width: 700px), only screen and (max-device-width: 700px) {
	form {
		width: 100%;
	}
}

input, textarea, select {
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) inset;
	font-size: 12px;
	padding: 5px;
	background-color: #E3EDF2;
	border: 1px solid #38687E;
	width: 400px;
	border-radius: 8px;
}

@media only screen and (max-width: 680px), only screen and (max-device-width: 680px) {
	input, textarea, select {
		max-width: 95%;
		/* max-width: 260px; */
	}
}

label,
input,
select {
	margin-top: 15px;
	font-size: 150%;
	vertical-align: middle;
}

select {
	height: 40px;
}

input {
	height: 27px;
}

input[type=radio], input[type=checkbox] {
	width: 20px;
	vertical-align: middle;
}

input[type=number] {
	width: 50px;
}

.ligne_formulaire {
	margin-bottom: 4px;
	padding: 8px;
}

.ligne_formulaire:hover {
	background-color: rgba(215, 221, 242, 0.1);
}

.ligne_formulaire label {
	color: #6A95C7;
	font-weight: bold;
	display: inline-flex;
	margin-bottom: 10px;
	width: 50%;
}

@media only screen and (max-width: 680px), only screen and (max-device-width: 680px) {
	.ligne_formulaire label {
		width: 100%;
	}
}

.ligne_formulaire textarea {
	width: 99%;
	height: 300px;
}

.ligne_formulaire img {
	vertical-align: middle;
	/*max-width: 100%;*/
}

.bouton_envoi {
	color: #38687E;
	border: 2px solid;
	background-color: #E3EDF2;
	height: 50px;
	width: 250px;
	margin: 6px auto;
	font-weight: bold;
	font-size: 170%;
	padding: 0 15px;
	display: block;
}

.bouton_envoi:hover {
	color: #024F23; 
	border: 2px solid;
	cursor: pointer;
	background-color: #B0CDDB; 
}

.champ_obligatoire input, .champ_obligatoire select, .champ_obligatoire textarea {
	border: 2px solid #FF0000;
}

.champ_obligatoire label {
	color: #FF0000;
}

.champ_obligatoire, .champ_obligatoire:hover {
	background-color: #FFD0D0; 
}

legend {
	font-weight: bold;
	padding: 0 10px;
	font-size: 200%;
}

legend,
legend a {
	color: #1F5E32;
}

fieldset {
	margin-top: 15px;
}

/*************************************
Debut - Personnalisation des checkbox
*************************************/
	d.container_checkbox iconify-icon {
		font-size: 150%;
	}

	label.container_checkbox {
		color: #000000;
		font-weight: normal;
	}

	.container_checkbox {
		display: block;
		position: relative;
		padding-left: 30px;
		margin-top: 20px;
		margin-bottom: 12px;
		cursor: pointer;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		width: 99%;
	}

	@media only screen and (max-width: 890px), only screen and (max-device-width: 890px) {
		.container_checkbox {
			width: 38%;
		}
	}

	@media only screen and (max-width: 550px), only screen and (max-device-width: 550px) {
		.container_checkbox {
			width: 90%;
		}
	}

	/* Hide the browser's default checkbox */
	.container_checkbox input {
		position: absolute;
		opacity: 0;
		cursor: pointer;
		height: 0;
		width: 0;
	}

	/* Create a custom checkbox */
	.checkmark {
		position: absolute;
		top: 1px;
		left: 0;
		height: 20px;
		width: 20px;
		background-color: #D6D6D6;
		border: solid 1px #C1C1C1;
	}

	/* On mouse-over, add a grey background color */
	.container_checkbox:hover input ~ .checkmark {
		background-color: #C1C1C1;
	}

	/* When the checkbox is checked, add a blue background */
	.container_checkbox input:checked ~ .checkmark {
		background-color: #2196F3;
	}

	/* Create the checkmark/indicator (hidden when not checked) */
	.checkmark:after {
		content: "";
		position: absolute;
		display: none;
	}

	/* Show the checkmark when checked */
	.container_checkbox input:checked ~ .checkmark:after {
		display: block;
	}

	/* Style the checkmark/indicator */
	.container_checkbox .checkmark:after {
		left: 6px;
		top: 2px;
		width: 5px;
		height: 10px;
		border: solid white;
		border-width: 0 3px 3px 0;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}
/***********************************
Fin - Personnalisation des checkbox
***********************************/