@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
@import url('login.css');

/* Mise en page de base et styles génériques */
body,
input, select, textarea {
	font-family: "lato", sans-serif;
}

html {
	height: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
    padding: 1%;
}

html.no-cssgradients {
	background-color: #aaa;
}

html * {
	margin: 0;
}

body {
	position: relative;

	color: #333333;
	margin: 0 auto;
	padding: 0;
	max-width: 1200px;
	overflow-x: hidden; /* prevents box-shadow causing a horizontal scrollbar in firefox when viewport < 960px wide */
}

hr{
	height: 1px;
	background-color: #afafaf;
	border: none;
}

ul li{
	list-style: none;
}

a{
	color: #840415;
	text-decoration: none;
}

a:hover, a:active {
	color: #565656;
	outline: none; /* prevents outline in webkit on active links but retains it for tab focus */
}

h1 {
	color: #840415;
	font-weight: normal;
	font-size: 1.6em;
	margin: 0.8em 0 0.3em 0;
}

h2 {
	color: #7F80A1;
	font-weight: normal;
	font-size: 1.4em;
	margin: 0.8em 0 0.3em 0;
}

h3 {
	color: #840415;
	font-weight: normal;
	font-size: 1.25em;
	margin: 0.8em 0 0.3em 0;
	padding: 5px 5px 5px 10px;
	border: 1px solid #840415;
}

.form-label{
	font-size: 1em;
}

.float-left{
	float: left;
}

.float-right{
	float: right;
}

.clear{
	clear: both;
}

img{ vertical-align:middle; }

button {
	border: 1px solid #840415;
	border-radius: 5px;
	color: #840415;
	padding: 10px;
	font-size: 1.3em;
}

button:hover {
	background-color: #7F80A1;
	cursor: pointer;
}

input[type=radio], input[type=checkbox]{
	margin-right: 5px;
}

/* Augmente la taille des éléments par x1,5*/
.bigger input[type=radio], .bigger input[type=checkbox]
{
	-ms-transform: scale(1.5); /* IE */
	-moz-transform: scale(1.5); /* FF */
	-webkit-transform: scale(1.5); /* Safari and Chrome */
	-o-transform: scale(1.5); /* Opera */
	transform: scale(1.5);
	padding: 10px;
}

.upper-case{
	text-transform: uppercase;
}
.center{
	text-align: center;
}
.left {
	text-align: left;
}
.right {
	text-align: right;
}
.small {
	font-size: 0.8em;
}
.bold{
	 font-weight: bold;
 }
.italic{
	 font-style: italic;
 }
.green{
	color: #43a000;
}
.red{
	color: #FF0000;
}
.blue{
	color: #5081ff;
}
.bpe-red{
	color: #840415;
}
.white{
	color: whitesmoke;
}
.fond_gris{
	background-color: #eee;
}
.fond_blanc{
	background-color: white;
}
.label_gris{
	color: #eee;
}
.label_blanc{
	color: white;
}

.decalage-gauche{
	padding-left: 1rem;
}
/* Fin Mise en page de base et styles génériques */

/* Styles Messages d'information, d'erreur, de succès, de warning ou de debug */
.alert-capsule{
	margin-bottom:1rem;
}
.alert{
	position:relative;
	padding:.75rem 1.25rem;
	margin-bottom:.15rem;
	border:1px solid transparent;
	border-radius:.25rem;
}

.alert-success:before {
	font-family:FontAwesome, "lato", sans-serif;
	width:1em;
	margin-right:1em;
	content:'\f00c';
}
.alert-success{
	color:#155724;
	background-color:#d4edda;
	border-color:#c3e6cb;
}
.alert-success hr{
	border-top-color:#b1dfbb;
}
.alert-success .alert-link{
	color:#0b2e13;
}

.alert-info:before {
	font-family:FontAwesome, "lato", sans-serif;
	width:1em;
	margin-right:1em;
	content:"\f05a";
}
.alert-info{
	color:#0c5460;
	background-color:#d1ecf1;
	border-color:#bee5eb;
}
.alert-info hr{
	border-top-color:#abdde5;
}
.alert-info .alert-link{
	color:#062c33;
}

.alert-warning:before {
	font-family:FontAwesome, "lato", sans-serif;
	width:1em;
	margin-right:1em;
	content:'\f071';
}
.alert-warning{
	color:#856404;
	background-color:#fff3cd;
	border-color:#ffeeba;
}
.alert-warning hr{
	border-top-color:#ffe8a1;
}
.alert-warning .alert-link{
	color:#533f03;
}

.alert-danger:before {
	font-family:FontAwesome, "lato", sans-serif;
	width:1em;
	margin-right:1em;
	content:'\f057';
}
.alert-danger{
	color:#721c24;
	background-color:#f8d7da;
	border-color:#f5c6cb;
}
.alert-danger hr{
	border-top-color:#f1b0b7;
}
.alert-danger .alert-link{
	color:#491217;
}

.alert-primary:before {
	font-family:FontAwesome, "lato", sans-serif;
	width:1em;
	margin-right:1em;
	content:'\f057';
}
.alert-primary{
	color:#004085;
	background-color:#cce5ff;
	border-color:#b8daff;
}
.alert-primary hr{
	border-top-color:#9fcdff;
}
.alert-primary .alert-link{
	color:#002752;
}

.data-error{
	color:red;
}
.data-error-border{
	border: 1px #721c24 solid;
	color:red;
}

/* Fin styles Messages */

/* Styles saisie FPP */
.cadre-fpp, .cadre-confirm{
	max-width: 700px;
	margin: 20px auto 20px auto;
	padding: 20px;
	border : 1px solid #840415;
}
.cadre-fpp span{
	/*font-weight: bold;*/
}

.cadre-fpp button{
	margin-top: 20px;
}

.cadre-fpp input[type=text]{
	height: 1.4em;
	font-size: 1.2em;
	font-weight: bold;
	text-align: center;
}

.cadre-fpp input[type=date] {
	height: 1.4em;
	font-size: 1.2em;
	text-align: center;
}
.cadre-fpp ul li{
	line-height: 1.8em;
}

.cadre-confirm{
	background-color : #7beda0;
}

.cadre-nav{
	max-width: 70%;
	margin: 20px auto 20px auto;
	border : none;
	padding: 20px;
	background-color : #deecd4;
}

/* Boutons de navigation */
.navigation{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	border-top: 1px solid #565656;
	padding-top: 1em;
	margin-bottom: 5em;
}

.navigation div{
	display: flex;
}
/* Fin boutons de navigation */

/* Boutons de navigation */
.navigation_fpp{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding-top: 1em;
}

.navigation_fpp div{
	display: flex;
}
/* Fin boutons de navigation */

/* Pied de page */
#footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 45px;
	background: #7F80A1;
	color: #cccccc;

	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
#footer div{
	display: flex;
}
#footer div:first-child{
	margin-left: 2%;
}
#footer div:last-child{
	margin-right: 2%;
}

#footer span{
	line-height: 45px;
	/*font-size: 0.8em;*/
	font-size: 1.0em;
}
/* Fin pied de page */

#page{
	/*Valeur empirique pour empécher le pied de page d'empiéter sur les boutons de navigation sous safari */
	padding-bottom: 1px;
}

/* Configuration des blocs flex */

/* Bloc global pour une question et n réponses */
.bloc_qr{
	/* Elément FLEX */
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -moz-flex;
	display: -webkit-flex;
	display: flex;

	/* IMPORTANT : placement des contenus selon une ligne */
	-webkit-flex-direction: row;
	-moz-flex-direction: row;
	-ms-flex-direction: row;
	-o-flex-direction: row;
	flex-direction: row;

	/* Taille de référence du bloc par rapport à la taille générale */
	width:100%;

	/* Décoration */
	padding : 5px;
}

.overflow{
	/* TEST */
	/* Overflow */
	flex: 1 1 auto;
	overflow-x: hidden;
	overflow-y: auto;

	/* Taille de référence du bloc par rapport à la taille générale */
	width:100%;
	height: 40rem;

	/* Décoration */
	padding : 5px;
}

.overflow_x{
	/* TEST */
	overflow-x: auto;
	overflow-y: hidden;
}

.bloc_qr .bloc_q{
	/* Elément FLEX */
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -moz-flex;
	display: -webkit-flex;
	display: flex;

	/* Pour centrer verticalement la question */
	/* Par défaut : alignement en haut */
	-webkit-align-self: center;
	align-self:center;

	/* Largeur du bloc question */
	/* voir paramètre "inline-size: 30%" ;*/
	min-width: 30%;
	max-width: 30%;

	/* Décoration */
	padding : 3px;
}

.bloc_qr .bloc_r{
	/* Elément FLEX */
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -moz-flex;
	display: -webkit-flex;
	display: flex;

	/* Largeur du bloc réponse : */
	/* bloc questions + bloc reponse + marages = 100% ;*/
	min-width: 70%;
	max-width: 70%;

	/* Alignements */
	align-items: stretch;
	justify-content: space-between;

	/* Décoration */
	padding : 3px;
}

.bloc_qr .bloc_r .bloc_choix{
	/* Elément FLEX */
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -moz-flex;
	display: -webkit-flex;
	display: flex;

	/* IMPORTANT : parametre d étirement, */
	/* => permet d'avoir des colonnes de largeur équivalente, */
	/* 		quel que soit le nombre*/
	flex: 1 1 0px; /* spécifier 0px pour compatibiité */

	/* IMPORTANT : placement des contenus selon une colonne */
	-webkit-flex-direction: column;
	-moz-flex-direction: column;
	-ms-flex-direction: column;
	-o-flex-direction: column;
	flex-direction: column;

	/* Décoration */
	padding : 3px;
}

.bloc_qr .bloc_r .bloc_choix > div{
	/* Elément FLEX */
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -moz-flex;
	display: -webkit-flex;
	display: flex;

	/* Centrage V et H du contenu */
	/*justify-content: center;*/
	/*text-align: center;*/
	align-items: center;
	/*margin: auto;*/

	/* Décoration */
	padding : 3px;
}

/* Fixe la largeur de la liste défilente */
.bloc_qr .bloc_r select {
	width: 130px;
}

.flex-center{
	justify-content: center;
	text-align: center;
	margin: auto;
}

/* Impose une largeur de colonne de 70% */
.w70{
	/* Prend le dessus sur les valeurs d'origine */
	min-width: 70% !important;
	max-width: 70% !important;
}
/* Impose une largeur de colonne de 50% */
.w50{
	/* Prend le dessus sur les valeurs d'origine */
	min-width: 50% !important;
	max-width: 50% !important;
}
/* Impose une largeur de colonne de 30% */
.w30{
	/* Prend le dessus sur les valeurs d'origine */
	min-width: 30% !important;
	max-width: 30% !important;
}

/**** Configuration spécifique questions bilans rhinite et ashtme  *****/
.bloc_qr .bloc_r .bloc_choix_bilan_label{
	flex: 2;
	text-align: center;
	margin: auto;
	align-items: start !important;
}
.bloc_qr .bloc_r .bloc_choix_bilan_valeur{
	flex: 1;
	margin: auto;
	align-self: end;
}


/**** Configuration du qestionnaire enfant ****/
/* Réduit la taille de l'élément à 0 (pour le remplacer par une image, par ex.)*/
.smiley input[type="radio"], .hidden input[type=checkbox] {
	transform: scale(0, 0);
}
/*
.smiley{
	margin: 0 !important;
}
*/
.smiley input[type="radio"]+label > span,
.smiley input[type="radio"]:checked+label > span{
	display: inline-block;
	width: 32px;
	height: 32px;
}
.smiley input[type="radio"]:checked+label > .img1{
	background: url("../../static/images/smiley_1_sel.png");
}
.smiley input[type="radio"]+label > .img1{
	background: url("../../static/images/smiley_1_unsel.png");
}
.smiley input[type="radio"]:checked+label > .img2{
	background: url("../../static/images/smiley_2_sel.png");
}
.smiley input[type="radio"]+label > .img2{
	background: url("../../static/images/smiley_2_unsel.png");
}
.smiley input[type="radio"]:checked+label > .img3{
	background: url("../../static/images/smiley_3_sel.png");
}
.smiley input[type="radio"]+label > .img3{
	background: url("../../static/images/smiley_3_unsel.png");
}
.smiley input[type="radio"]:checked+label > .img4{
	background: url("../../static/images/smiley_4_sel.png");
}
.smiley input[type="radio"]+label > .img4{
	background: url("../../static/images/smiley_4_unsel.png");
}

/**
 * Gestion de l'affichage de la consigne de format de la date APSI en cas de non prise en charge des input date natifs par le navigateur client
 */
.date-description {
	color: #808080;
	font-size: 0.8em;
}

/**
 * On masque la consigne quand l'input date est supportée
 */
.supports-date .date-description {
	display: none;
}

/* Bouton Information */
.information-button {
	color: #333333;
	/*width: 15px;*/
	text-align: center;
	border-radius: 4px;
	padding-left: 5px;
	transition: color .3s;
}
.information-button:hover {
	color: #800415;
}
.information-button:active {
	color: #333333;
}
.information-button::after {
	content: "\f05a";
	font-family: FontAwesome,sans-serif;
	font-weight: normal;
	font-style: normal;
	font-size: 1em;
}


.cadre-fpp #mr003 input[type=text] {
	font-size: 1em;
	text-align: left;
}