@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Open+Sans');


body, .contenu, input, select {
	font-family: "Open Sans", calibri, helvetica, arial, sans-serif;
}


.main-head {
	grid-area: header;
}
.contenu {
	grid-area: contenu;
}
.formulaire {
	grid-area: formulaire;
}
.apercu {
	grid-area: apercu;
}
.boutons {
	grid-area: boutons;
}



body {
	margin: 0;
	padding: 0;
	height: 100vh;
	background-color: #cdd5eb;
	background: linear-gradient(to bottom right, #f0f4f8 25%, #d0d4d8 100%);
}

.page-wrapper {
	display: grid;
	grid-gap: 0;
	grid-template-areas:
			  "header"
			  "contenu";
	grid-template-rows: 120px auto;
	width: 100vw;
	height: 100vh;
	min-height: 100vh;
}


.contenu-principal {
	display: grid;
	width: 100%;
	grid-gap: 20px;
	grid-template-areas:
			  "formulaire"
			  "apercu"
			  "boutons";
}


.contenu-login {
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
}


.header-container {
	display: block;
	width: 100%;
	height: 100%;
	align-items: center;
	text-align: center;
	justify-content: center;
}




header {
	background-color: rgb(55,82,158);
}

.contenu, .contenu-login {
	align-items: center;
	text-align: center;
}

.contenu, .contenu-principal, .contenu-login {
	width: 100%;
}

.header-container div {
	display: block;
	align-items: center;
}

.titre-wrapper {

}


header p {
	margin-bottom: 0;
	color: white;
}


header p.titre_principal {
	font-size: 80%;
	font-weight: bold;
	line-height: 1em;
	margin-bottom: 0.5em;
}

.bienvenue_deco, .bienvenue2 {
	font-size: 70%;
	font-weight: normal;
	margin-bottom: 0;
}

.bienvenue2 {
	margin-top: 0;
}


#recherche_hist {
	display: none;
	font-size: 80%;
	font-weight: normal;
	margin-left: 50px;
	width: 200px;
}

#recherche_hist input {
	font-size: 85%;
}

body.login #recherche_hist {
	display: none;
}


.contenu {
	text-align: center;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
}

.contenu-principal {
	height: 100%;
	padding: 20px 50px;
}


.contenu-login .formulaire, .contenu-principal {
	background: #fff;
	box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);

}

.formulaire {
	margin: 0 auto;
	font-size: 100%;
	line-height: 140%;
	text-align: center;
}


.contenu-login .formulaire {
	padding: 50px;
	border-radius: 1rem;
	font-size: 120%;
}

.formulaire-cdv {
	width: 100%;
	height: 100%;
}

.apercu {
	justify-content: center;
}


a:link {
	color: rgb(135, 191, 234);
	text-decoration: none;
	font-weight: bold;
}
a:hover {
	color: rgb(0, 114, 255);
	text-decoration: none;
}




.input-group-text {
	display: inline-block;
}



fieldset legend {
	width: 310px;
	font-size: 1rem;
	margin-left: 1rem;
	padding-left: 1.5rem;
}


fieldset {
	padding-right: 1rem;
	border-radius: 8px;
	-webkit-transition: all 0.5s linear;
	box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}

fieldset.border2 {
	border-color: white !important;
	box-shadow: none;
}

.adresse2_line, .tel_octelio_line {
	display: none;
}


h2 {
	text-align: left;
	text-shadow: 1px 1px 2px #000;
	margin-top: 0;
	font-size: 40px;
	font-weight: bold;
}


h3 {
	font-weight: bold;
}


h4 {
	font-size: 110%;
}

.rouge {
	color: red;
}


#apercu_cdv, #load {
	width: 402px;
	height: 255px;
	border: 1px solid #CCCCCC;
	margin: auto;
	margin-bottom: 10px;
	box-shadow: 2px 2px 4px  #999;
	-webkit-transition: all 0.15s linear;

}

#apercu_cdv:hover {
	border: 1px solid #0075b1;
	box-shadow: 0px 0px 10px 2px #0075b1;
	cursor: pointer;
}

#aper_src {
	height: 18px;
}

#load {
	position: absolute;
	border: 0;
	opacity: .6;
	filter: alpha(opacity=60);
	background-color: #FFFFFF;
	z-index: 5000;
}

#load2 {
	position: absolute;
	z-index: 5001;
	padding: 0px;
	top: calc(255px / 2 - 48px / 2);
	left: calc(402px / 2 - 48px / 2);
}


div.jquery-image-zoom {
	line-height: 0;
	font-size: 0;
	z-index: 10;
	border: 1px solid #000;
	margin: -5px;
	-webkit-box-shadow: 0 0 10px #000;
	-moz-box-shadow: 0 0 10px #000;
	box-shadow: 0 0 10px #000;
}

div.jquery-image-zoom a {
	background: url(images/close.png) no-repeat;
	display: block;
	width: 25px;
	height: 25px;
	position: absolute;
	right: -15px;
	top: -15px;
	text-decoration: none;
	text-indent: -100000px;
	outline: 0;
	z-index: 11;
}

div.jquery-image-zoom a:hover {
	background-position: left -25px;
}

div.jquery-image-zoom img,
div.jquery-image-zoom embed,
div.jquery-image-zoom object,
div.jquery-image-zoom div {
	width: 100%;
	height: 100%;
	margin: 0;
}



button[type=submit], button[type=reset], button[type=button], a.btn {
	padding: 0 2rem;
	border-radius: 8px;
	min-height: 45px;
	width: 100%;
	transition: all 0.25s linear;
	-webkit-transition: all 0.15s linear;
	border: 1px solid rgba(0,0,0,0.1);
}

button[type=submit], a.btn {
	font-weight: bold;
}

a.btn, a.btn:link {
	line-height: 45px;
	color: white;
	font-size: 0.8rem;
}


button.btn-primary:hover, a.btn-primary:hover {
	background-color: rgb(82, 159, 255);
	box-shadow: 0 0 10px 4px rgba(101, 176, 255, 0.71);
}

button.btn-warning:hover {
	background-color: rgb(255, 215, 52);
	box-shadow: 0 0 10px 4px rgba(255, 193, 7, 0.71);
}

button.btn-success:hover {
	background-color: rgb(9, 193, 49);
	box-shadow: 0 0 10px 4px rgba(40, 167, 69, 0.71);
}

button.btn-success:disabled, button.btn-primary:disabled {
	background-color: white;
	box-shadow: none;
	color: lightgray;
	border-color: lightgray;
}

button.btn-default {
	border-color: rgba(82, 159, 255, 0.5);
	color: rgb(82, 159, 255);
}

button.btn-default:hover {
	background-color: rgb(191, 233, 255);
	box-shadow: 0 0 10px 4px rgba(149, 223, 255, 0.71);
	border-color: rgba(0,0,0,0.1);
	color: rgb(0, 110, 239);
}



input[type=text], input[type=password] {
	border-radius:5px;
	font-family: "Open Sans", calibri, helvetica, arial, sans-serif;
	transition: all 0.15s linear;
	-webkit-transition: all 0.15s linear;

}

input[type=text]::placeholder, input[type=password]::placeholder {
	color: rgb(121, 178, 234);
	font-weight: normal;

}

input[type=text]:focus, input[type=password]:focus {
	border: 2px solid #6db9ff;
	outline: none;
	box-shadow: 0 0 15px 8px rgb(200, 225, 255)
}

.input-group-text {
	font-size: 0.7rem;
	line-height: 1.5rem;
}






input[type=submit], a.btn {
	width: 90%;
	margin-bottom: 10px;
	white-space: pre-wrap;
}


#formulaire p.texte_confirm {
	font-size: 120%;
	line-height: 140%;
	margin-bottom: 0;
}

.custom-control {
	padding-left: 0;
}

.custom-control-label {
	left: 1rem;
}

.boutons .select-quantite .col-sm-6 {
	padding-left: 0;
}

.form-group label {
	text-align: left;
	font-size: 95%;
}

	.col-form-label {
		 padding-top: 0;
		 padding-bottom: 2px;
		 margin-bottom: 0;
		 font-size: inherit;
		 line-height: 1.5;
	}




.jq_button {
	vertical-align: middle;
	background: #fff;
	display: inline-block;
	font-weight: bold;
	color: #2779aa;
	padding: 5px 20px;
	cursor: pointer;
	border: 1px solid #73bfe5;
	margin-left: -4px;
	box-shadow: inset 0px -15px 5px -5px rgba(100, 151, 229, 0.1);
	z-index: 50;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
}

.jq_button:hover {
	background: rgb(225, 240, 255);
		text-decoration: none;
}

.jq_button-checked, .jq_button-checked:hover {
	color: #fff;
	background-color: rgb(82, 159, 255);
	box-shadow: inset 0px -15px 10px -5px rgba(55,82,158, 0.5);
	z-index: 100;
}

.corner-first .jq_button {
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}
.corner-last .jq_button {
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}

#radios {
	padding-left: 4px;
}

#radios .btn, #info_fichier {
	margin-left: 6px;
}



@media (min-width: 576px) {

	.form-group label {
		text-align: right;
	}

	.col-form-label {
		 padding-top: calc(.375rem + 1px);
		 padding-bottom: calc(.375rem + 1px);
	}

	label.col-sm-4 {
		padding-right: 0;
	}
}


@media (min-width: 600px) {

	.header-container {
		display: flex;
		align-items: center;
		text-align: center;
		justify-content: center;
	}

	.header-container div {
		display: inline-flex;
		align-items: center;
	}

	header img {
		padding-right: 25px;
	}

}


@media (min-width: 700px) {

	header p.titre_principal {
		display: block;
		font-size: 100%;
	}

	header .p-wrapper {
		display: block;
		font-size: 100%;
		margin-left: 25px;
	}

	header .p-wrapper .bienvenue2 {
		line-height: 1.1em;
		font-size: 90%;
	}

	.bienvenue2 .ligne_email {
		font-size: 80%;
	}


}


@media (min-width: 980px) {

	.page-wrapper {
		grid-template-columns: 1fr 980px 1fr;
		grid-template-areas:
				  "header  header	header"
				  ".     contenu	.";
	}

	.contenu-principal {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
				  "formulaire  apercu"
				  "formulaire     boutons";
	}

	.formulaire-cdv {
		padding-right: 20px;
	}


	.form-group label {
		text-align: right;
	}

	div.contenu, button.btn, .jq-button, fieldset legend {
		font-size: 0.8rem;
	}

	fieldset {
		padding-left: 1rem;
	}

	header p.titre_principal {
		font-size: 110%;
	}

	#recherche_hist {
		display: block;
		font-size: 90%;
		width: 300px;
	}

	#recherche_hist input {
		font-size: 90%;
	}

}


@media (min-width: 1200px) {


	.page-wrapper {
		grid-template-columns: 1fr 1200px 1fr;
	}

	.formulaire-cdv {
		width: 600px;
		padding-right: 50px;
	}

	.formulaire-cdv .col-sm-4 {
		max-width: 35%;
		flex: 35%;
	}

	.formulaire-cdv .col-sm-8 {
		max-width: 65%;
		flex: 65%;
	}

	.form-group label {
		text-align: right;
	}

		div.contenu, button.btn, .jq-button, fieldset legend {
		font-size: 1rem;
	}

	header p.titre_principal {
		font-size: 140%;
	}

	#recherche_hist {
		font-size: 100%;
		width: 350px;
	}

	#recherche_hist input {
		font-size: 100%;
	}

}