﻿/**
COULEURS THIRIET
ROUGE VIF e2001a
ROUGE BRIQUE ce2b2c
BLANC fff
GRIS 645b54

*/

/**GLOBAL*/
body {
	text-align: center;
	margin: 0;
	font-family: 'Source Sans Pro', sans-serif;
	background-color: #fff;
	overflow-x: hidden;
}

@media all and (orientation: portrait) {
	body {
		font-size: 1vh;
	}
}

@media all and (orientation: landscape) {
	body {
		font-size: 1vw;
	}
}

html, .container-fluid {
	margin: 0 !important;
}

h3 {
	font-size: 16pt;
	color: #e2001a;
	font-weight: bold;
}

/**Taille des conteneurs différente que l'on soit en portrait ou en paysage*/
@media screen and (orientation:portrait) {
	#header {
		display: block;
		height: 10vh;
		background: url('../img/enteteThiriet.png');
		background-size: 90% auto;
		background-repeat: no-repeat;
		background-position: top;
	}
	#content {
		display: block;
		height: 90vh;
		overflow-y: auto;
		overflow-x: hidden;
	}
	.modal {
		margin-top: 10vh;
		height: 90vh;
	}
}

@media screen and (orientation:landscape) {
	#header {
		display: block;
		height: 25vh;
		background: url('../img/enteteThiriet.png');
		background-size: 80% auto;
		background-repeat: no-repeat;
		background-position: top;
	}
	#content {
		display: block;
		height: 75vh;
		overflow-y: auto;
		overflow-x: hidden;
	}
	.modal {
		margin-top: 25vh;
		height: 75vh;
	}
}

#attenteDate, #verificationError, #attenteErrorDate, #attenteSuccessDate,
	#modifierInfoClient, #attente, #attenteError, #attenteSuccess,
	#confirmationDate, #attenteScann, #EnvoyerClient {
	display: none;
	font-size: 2em;
}

#attente, #attenteScann {
	position: relative;
	margin: 5px auto 5px auto;
}

.cacheMoi {
	display: none;
}

/* AJAX LOADER */

/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   speak for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.modal {
	display: none;
	position: absolute;
	z-index: 1000;
	width: 100%;
	background: rgba(255, 255, 255, .8) url('../img/loader.gif') 50% 30%
		no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading {
	overflow: hidden;
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
	display: block !important;
}

/*###################   INDEX PAGE ###############################*/
#index-top {
	display: block;
	height: 30vh;
	width: 85%;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden
}

#index-top p {
	font-size: 3.3em;
	color: #555;
	font-weight: normal;
	text-align: center;
}

#index-bottom {
	display: block;
	height: 30vh;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	background: url('../img/cartes_FrontPage.png');
	background-size: auto 80%;
	background-repeat: no-repeat;
	background-position: center;
}

#index-footer {
	display: block;
	height: 5vh;
}

#okButton {
	display: block;
	height: 45px;
	width: 140px;
	margin-left: auto;
	margin-right: auto;
	text-decoration: none;
	cursor: hand;
	background: url('../img/okButton.png');
	background-size: 100% 100%;
	backgrount-repeat: no-repeat;
	background-position: center;
}

/*###################   ACTIVATE PAGE ###############################*/
#activate-top {
	display: block;
	height: 20vh;
	width: 85%;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden
}

#activate-top p {
	font-size: 3.3em;
	color: #555;
	font-weight: normal;
	text-align: center;
}

#activate-content {
	display: block;
	height: 50vh;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}

#activateLeft {
	cursor: hand;
	display: block;
	height: 40vh;
	background: url('../img/activateLeft.png');
	background-size: auto 80%;
	background-repeat: no-repeat;
	background-position: center;
	border: 3px solid #fff;
	transition: border-color 1s ease-out;
	-webkit-transition: border-color 0.5s ease-out;
	border-radius: 10px;
}

#activateRight {
	cursor: hand;
	display: block;
	height: 40vh;
	background: url('../img/activateRight.png');
	background-size: auto 80%;
	background-repeat: no-repeat;
	background-position: center;
	border: 3px solid #fff;
	transition: border-color 1s ease-out;
	-webkit-transition: border-color 0.5s ease-out;
	border-radius: 10px;
}

#activateLeft:hover, #activateRight:hover {
	border: 3px solid #ce2b2c;
}

/*################### SCAN QRCode ####################*/
#scan-top {
	display: block;
	height: 10vh;
	width: 85%;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden
}

#scan-top p {
	font-size: 2.5em;
	color: #555;
	font-weight: normal;
	text-align: center;
}

#scan-bottom {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}

#cam-select{
	display:none;
}
#qr-canvas {
	border: 1vw solid;
	border-radius: 20px;
	width: 80%;
	max-height: 50vh;
	margin-left: auto;
	margin-right: auto;
}

#scan-msg {
	font-size: 2.8em;
	color: #555;
	font-weight: normal;
	text-align: center;
}

#startScan {
	display: block;
	height: 45px;
	width: 140px;
	margin-left: auto;
	margin-right: auto;
	text-decoration: none;
	cursor: pointer;
	background: url('../img/scanButton.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
}

#cancelScan {
	display: block;
	height: 45px;
	width: 140px;
	margin-left: auto;
	margin-right: auto;
	text-decoration: none;
	cursor: pointer;
	background: url('../img/retourButton.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
}

.aide {
	text-align: center;
	color: #000000;
	font-size: 12pt;
	margin-bottom: 5px;
}

.alert-tanpon {
	background-color: transparent;
	width: 100%;
	font-size:13pt;

	/*height: 24vh;
	min-height:120px;
	max-height:400px;*/
}

.canvasQrcode {
	margin: -5px;
	background-image: url("../img/backCam.png") !important;
	background-repeat: no-repeat;
	background-size: contain;
	width: 500px;
	height: 600px;
	position: relative;
	padding-top: 35px;
	display: block;
	text-align: center;
	margin-left: 10% !important;
	margin-right: auto;
}

#lectOK img {
	width: 30%;
	cursor: pointer;
	margin-top: 2vh;
}

#lectOK p{
	font-size:1.5em;
	font-weight:bold;
	color:#ce2b2c;
}

/* ################### MANUAL ENTRY ##########################*/
#saisie-top {
	display: block;
	height: 10vh;
	width: 85%;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden
}

#saisie-top p {
	font-size: 2.5em;
	color: #555;
	font-weight: normal;
	text-align: center;
}

#saisie-bottom {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}

#saisie-bottom img {
	width: 100%;
	margin-top: 3vh;
}
/* ################### FORMS ##########################*/
#searchCard {
	margin-top: 5vh;
	margin-bottom: 5vh;
	font-size: 3em;
	font-weight: bold;
	margin-left: auto;
	margin-right: auto;
	border: 2px solid #ce2b2c;
	border-radius: 4px;
	text-align: center;
}

#saisie-submit {
	display: block;
	height: 40px;
	width: 140px;
	margin-left: auto;
	margin-right: auto;
	text-decoration: none;
	cursor: pointer;
	background: url('../img/validerButton.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
}

#saisie-sendMsg {
	display: block;
	height: 40px;
	width: 140px;
	margin-left: auto;
	margin-right: auto;
	text-decoration: none;
	cursor: pointer;
	background: url('../img/sendMsgButton.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
}

#saisie-cancel {
	display: block;
	height: 40px;
	width: 140px;
	margin-left: auto;
	margin-right: auto;
	text-decoration: none;
	cursor: pointer;
	background: url('../img/annulerButton.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
}

#saisie-date-top {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}

#saisie-date-top p {
	font-size: 2.5em;
	color: #555;
	font-weight: normal;
	text-align: center;
}

#saisie-date-middle {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

#saisie-date-bottom {
	
}

.obligatoire {
	color: #D08D3C !important;
}

.input-group-addon {
	background-image: none !important;
	border-color: red !important;
	border-right: none;
}

.reduction-form {
	width: 60% !important;
	text-align: center;
	margin: auto !important
}

.form-control {
	min-height: 45px;
	height: 1.8em !important;
	color: #000000 !important;
	border-left: none !important;
	font-size: 15pt !important;
	font-weight: bold;
	height: 1.8em !important;
	/*background-color: rgba(255, 237, 242, 0.6) !important;*/
}

.form-obligatoire {
	border-color: red !important;
}

.accept-termes {
	font-size: 2em;
	font-weight: bold;
	color: #ce2b2c;
	text-align: left;
	padding-top: 0.9rem !important;
}

.combo-termes {
	width: 20px !important;
	height: 20px !important;
}

.input-group {
	margin-bottom: 2% !important;
}

.input-perso {
	height: 45px !important;
	text-align: center !important;
	border-radius: 5px !important;
}

.fitSize {
	width: 120px;
	text-align: left;
	color: #555555 !important;
}

.obligatoire {
	color: red !important;
	font-size: 8px;
	display: inline;
	font-style: normal;
}

.form-date {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.verification-form {
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	text-align: center;
}

.form-inline {
	margin: 0 !important;
	padding: 0 !important;
}

.form-non-obligatoire {
	border-color: #0f0f0f !important;
	margin-right: 15px !important;
}

.col-lg-6 {
	display: inline !important;
}

.row {
	margin: 0 auto -5px auto !important;
}

.reducing {
	margin-top: -30px !important;
}

.nonOblig {
	color: navy;
}

.radius-droite {
	-webkit-border-top-right-radius: 5px !important;
	-webkit-border-bottom-right-radius: 5px !important;
	-moz-border-radius-topright: 5px !important;
	-moz-border-radius-bottomright: 5px !important;
	border-top-right-radius: 5px !important;
	border-bottom-right-radius: 5px !important;
}

.taillefixe {
	width: 160px !important;
	text-align: center !important;
}
#cnil{
	font-size: 1.8em !important;
	text-align: justify;
	border: 2px solid red;
	border-radius:9px;
	padding: 5px !important;
	color: #555555;
	transition: height 1s linear 0.5s;
	-webkit-transition: height 1s linear 0.5s;
	width: 70vw;
	margin-left: 10vw;
	max-height:30vh;
	overflow-y:auto;
	margin-top:4vh;
	background-color:#f5f5f5;
}

#cnilShow, #rgpdShow {
	font-weight: bold;
	cursor:pointer;
	color:#00009a;
}

#cnilShow:hover, #rgpdShow:hover{
	background-color:#eee;
	text-decoration:underline;
	color:#00009a;
}

#cnilOK {
	padding: 10px;
}

#cguFull{
	font-size:10pt;
	padding-left:2%;
	padding-right:2%;
	text-align: justify;
}

#cguFull h2, #cguFull h3, #cguFull h4{
	font-weight:bold;
	color:#e2001a;	
}

#cguFull h2{
	font-size:1.2em;
}

#cguFull h3{
	font-size:1.1em;
}

#cguFull h4{
	font-size:1em;
}
#cguFull a{
	font-weight: bold;
	color: rgb(226, 0, 26);
	font-size: 0.8em;
	text-decoration: none;
}

#cguFull a:hover{
	text-decoration: underline;
}

/* ################### CONFIRMATION PAGE ################*/
#save-top {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}

#save-top p {
	font-size: 2.5em;
	color: #555;
	font-weight: normal;
	text-align: center;
}

#save-bottom {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}
#checkCode{
	font-size: 15pt;
	text-align: center;
	margin-bottom: 20px;
}

/* ################### END ###########################*/
#img-end {
	width: 80%;
}

/*################## TO CLEAN #########################*/