@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_modif {
	grid-area: formulaire_modif;
}

.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: 160px auto;
	width: 100vw;
	height: 100vh;
	min-height: 100vh;
	transition: all 0.1s linear;
}


.contenu-principal {
	display: grid;
	width: 100%;
	grid-gap: 15px;

}


.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: #fff;
}

header img {
	height: 90px;
	width: auto;
}


.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: rgb(255, 76, 76);
}



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;
}




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

.contenu-principal {
	height: 100%;
	padding: 20px 50px;
	transition: all 0.25s linear;
}


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

}

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


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

.formulaire-cdv {
	width: 100%;
	height: 100%;
	transition: all 0.15s linear;
}

.apercu {
	justify-content: center;
}


a:link {
	color: rgb(135, 191, 234);
	text-decoration: none;
	font-weight: bold;
}
a:hover {
	color: rgb(168,32,36);
	text-decoration: none;
}




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





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: 502px;
	height: 319px;
	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 #aa1b2a;
	box-shadow: 0px 0px 10px 2px #aa1b2a;
	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;
	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;
	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);
}

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


button[type=submit] {
	font-weight: bold;
}


button.btn-primary, a.btn-primary {
	background-color: rgb(168,32,36);
	box-shadow: none;
}

button.btn-primary:hover, a.btn-primary:hover {
	background-color: rgb(212, 81, 98);
	box-shadow: 0 0 10px 4px rgba(168,32,36, 0.71);
	border-color: rgb(168,32,36);
}

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 {
	background-color: transparent;
	border-color: rgba(170, 27, 42, 0.5);
	color: rgb(225, 32, 36);
}


button.btn-default:hover {
	background-color: rgb(168,32,36);
	box-shadow: 0 0 10px 4px rgba(255, 156, 160, 0.71);
	border-color: rgb(152, 0, 12);
	color: white;
}



input[type=text], input[type=password], textarea {
	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, textarea::placeholder {
	font-weight: normal;
	font-style: italic;
	opacity: 0.3 !important;

}


input[type=text]:focus, input[type=password]:focus, textarea:focus {
	border: 2px solid #ff6378 !important;
	outline: none !important;
	box-shadow: 0 0 15px 8px rgb(255, 205, 211) !important;
}








input[type=submit] {
	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: #aa1b2a;
	padding: 5px 20px;
	cursor: pointer;
	border: 1px solid #e59aa5;
	margin-left: -4px;
	box-shadow: 0px 0px 15px rgba(255, 255, 255, 0.5), inset 0px -15px 5px -5px rgba(229, 85, 106, 0.1);
	z-index: 50;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
	transition: all 0.25s linear;
	-webkit-transition: all 0.15s linear;
}

.jq_button:hover {
	background: rgb(255, 234, 234);
	text-decoration: none;
	box-shadow: 0px 0px 15px rgba(255, 119, 129, 0.5), inset 0px -15px 5px -5px rgba(229, 85, 106, 0.1);
}

.jq_button-checked, .jq_button-checked:hover {
	color: #fff;
	background-color: rgb(225, 32, 36);
	box-shadow: inset 0px -15px 10px -5px rgba(158, 41, 44, 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;
}


.choix_recto_verso {
	display: none;
}

.info_debut {
	font-size: 1.2rem;
	font-weight: bold;
	color: #c30;
	margin-top: 1.5rem;
}


.formulaire_modif {

	border: 1px solid #aaa;
	border-radius: 10px;
	box-shadow: 0 0 20px #aaa;
	background-color: #fff;
	z-index: 10;
	/*position: absolute;*/
	/*margin: auto;*/
	padding: 1rem;
	top: 100px;
	/*left: auto;*/
	display: none;

}

.formulaire_modif .form-group {
	margin-bottom: 0.5rem;
}

.formulaire_modif .form-control {
	padding: .2rem .75rem;
}


.modif .formulaire_modif {
	display: block;
}

.etablissement_wrapper {
	margin-bottom: 1.3rem !important;
}

.custom-select {
	color: #aa1b2a;
	cursor: pointer;
	border: 1px solid #e59aa5;
	box-shadow: 0px 0px 15px rgba(255, 255, 255, 0.5), inset 0px -15px 15px -5px rgba(229, 85, 106, 0.1);
	background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%232323ff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") right .75rem center/8px 10px no-repeat;
}

.custom-select:hover, .custom-select:focus {
	/*background-color: rgb(255, 234, 234);*/
	border: 1px solid #e53f44;
	text-decoration: none;
	box-shadow: 0px 0px 15px rgba(255, 119, 129, 0.5), inset 0px -15px 15px -5px rgba(80, 0, 0, 0.12), inset 0px -20px 20px 20px rgba(255,0,0,0.10);
}


.annule td {
	background-color: #fcc;
	color: #800;
}

.termine td {
	background-color: #caffd8;
	color: #084;
}

.valide td {
	color: #084;
	font-weight: bold;
}

.attente td {
	color: #88471b;
}


@media (min-width: 576px) {


	.page-wrapper {
		grid-template-rows: 120px auto;
	}


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


	header img {
		padding-right: 25px;
	}

	.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;
	}

	.formulaire_modif {
		width: 500px;
	}

}


@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%;
	}

	.formulaire_modif {
		width: 600px;
	}


}


@media (min-width: 800px) {

	.page-wrapper {
		grid-template-columns: 1fr 800px 1fr;
		grid-template-areas:
				  " . 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: 1rem;
	}

	fieldset {
		padding-left: 1rem;
	}

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

	.formulaire_modif {
		width: 700px;
	}

}


@media (min-width: 950px) {


	.page-wrapper {
		grid-template-columns: 1fr 940px 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%;
	}

	.formulaire_modif {
		width: 800px;
	}

}



@media (min-width: 1300px) {


	.page-wrapper.modif, .page-wrapper.large {
		grid-template-areas:
				  " . header . "
				  " . contenu . ";

		grid-template-columns: 1fr 1300px 1fr;
	}

	.modif .contenu-principal {
		grid-template-columns: 1fr 2fr;
		grid-template-areas:
				  "formulaire_modif  formulaire";
	}


	.modif .formulaire_modif {
		display: block;
		width: 450px;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		padding: 0;
		/*left: auto;*/
	}

}





@media (prefers-color-scheme: dark) {
	body {
		color: white;
		background: #161718;
		background: linear-gradient(to bottom right, #161718 25%, #272829 100%);

	}

	header {
		/*background-color: #1B1C22;*/
		background-color: #000;
		color: rgb(150, 15, 14);
	}

	header p {
		color: rgb(255, 76, 76);
	}

	footer {
		background-color: #000000;
		color: #909090;
	}

	.contenu-principal {
		background: #101112;
		box-shadow: 0 10px 20px #000;
	}

	.formulaire_modif {
		border: none;
		box-shadow: none;
		background-color: transparent;
	}


	.form-control {
		color: #dee2e6;
		background-color: #212529;
		border-color: #495057;
	}

	.input-group-text {
		color: #dee2e6;
		background-color: #343a40;
		border-color: #495057;
	}

	.custom-control-label::before {
		background-color: #3e3838;
		border-color: #495057;
	}

	input[type="text"]:focus, input[type="password"]:focus, textarea:focus, .form-control:focus {
		border: 2px solid #ff6378;
		outline: none;
		box-shadow: 0 0 15px 8px rgb(67, 69, 80) !important;
		background-color: #3e3838;
		color: #fff;
	}

	input[type=text]::placeholder, input[type=password]::placeholder, textarea::placeholder {
		opacity: 0.5 !important;
	}



	.custom-select {
		color: #dee2e6;
		border-color: #495057;
		background: #23242a url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23adb5bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") right .75rem center/8px 10px no-repeat !important;
		cursor: pointer;
		box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5), inset 0px -15px 25px -10px rgba(0, 0, 0, 0.9), inset 0px -20px 20px 20px rgba(255,0,0,0.15);
	}


	.custom-select:hover, .custom-select:focus {
		background-color: #23242a;
		border-color: rgb(150, 52, 52);
		text-decoration: none;
		box-shadow: 0px 0px 15px rgba(255, 119, 129, 0.5), inset 0px -15px 25px -5px rgba(0, 0, 0, 0.9), inset 0px -20px 20px 20px rgba(255,0,0,0.3);
	}

	.custom-select:disabled, .custom-select:hover:disabled {
		background-color: #232323;
		border-color: #333;
		text-decoration: none;
		cursor: default;
		box-shadow: 0 0 0 rgba(255, 119, 129, 0), inset 0px -15px 25px -5px rgba(0, 0, 0, 0.9), inset 0px -20px 20px 20px rgba(0,0,0,0.3);
	}


	.contenu-login .formulaire {
		background-color: #23242a;
	}

	button.btn-primary, a.btn-primary {
		background-color: rgb(150, 15, 14);
		box-shadow: none;
		border-color: rgb(150, 15, 14);
	}

	button.btn-primary:hover, a.btn-primary:hover {
		background-color: rgb(117, 30, 32) !important;
		box-shadow: 0 0 10px 4px rgba(168,32,36, 0.71) !important;
		border-color: rgb(168,32,36) !important;
	}



	.jq_button {
		background: #212529;
		color: #dee2e6;
		border-color: #495057;
		box-shadow: none;
		text-shadow: none;
	}

	.jq_button:hover {
		background-color: #582223;
		border-color: rgb(150, 52, 52);
		text-decoration: none;
		box-shadow: 0px 0px 15px rgba(255, 119, 129, 0.5), inset 0px -15px 25px -5px rgba(0, 0, 0, 0.9);
	}

	.disabled .jq_button, .disabled .jq_button:hover, button:disabled, button:disabled:hover {
		box-shadow: none !important;
		background: #222 !important;
		color: #888 !important;
		border-color: #333 !important;
		cursor: default !important;
	}

	.jq_button-checked, .jq_button-checked:hover {
		color: #fff;
		background-color: rgb(117, 30, 32);
		box-shadow: none;
	}

	.disabled .jq_button-checked, .disabled .jq_button-checked:hover {
		box-shadow: none;
		background: #444;
		color: #aaa;
		border-color: #555;
	}



	h3 {
		color: #0080ff;
	}

	.bienvenue2 {
		color: #5bb49e;
	}


	a.btn-outline-warning {
		color: #b45c00;
		border-color: #b45c00;
		height: 35px;
		line-height: 35px;
	}

	a.btn-outline-warning:hover {
		color: #ffffff;
		background-color: #6e4900;
		border-color: #b45c00;
		height: 35px;
		line-height: 35px;
		box-shadow: 0 0 10px 4px rgba(105, 52, 0, 0.9);
	}

	.jumbotron {
		background: #212529;
	}


	.termine td {
		background-color: #004020;
		color: #00ffc6;
	}

	.valide td {
		color: #00ee9a;
		font-weight: bold;
	}

	.attente td {
		color: #ed951c;
	}

}