/*********************************************************************************************************************/
/*********************************************************************************************************************/
/******* 		1. STYLES GENERAUX PARTAGES (CERTAINS SONT REDEFINIS PAR TAILLE D'ECRAN PLUS BAS) 			  ********/
/*********************************************************************************************************************/
/*********************************************************************************************************************/

/**
 * WOFF Marianne
 **/
@font-face {
	font-family: Marianne;
	src: url(Marianne-Light.woff2) format("woff2"), url(Marianne-Light.woff) format("woff");
	font-weight: 300;
	font-style: normal; }

@font-face {
	font-family: Marianne;
	src: url(Marianne-Light_Italic.woff2) format("woff2"), url(Marianne-Light_Italic.woff) format("woff");
	font-weight: 300;
	font-style: italic; }

@font-face {
	font-family: Marianne;
	src: url(Marianne-Regular.woff2) format("woff2"), url(Marianne-Regular.woff) format("woff");
	font-weight: 400;
	font-style: normal; }

@font-face {
	font-family: Marianne;
	src: url(Marianne-Regular_Italic.woff2) format("woff2"), url(Marianne-Regular_Italic.woff) format("woff");
	font-weight: 400;
	font-style: italic; }

@font-face {
	font-family: Marianne;
	src: url(Marianne-Bold.woff2) format("woff2"), url(Marianne-Bold.woff) format("woff");
	font-weight: 700;
	font-style: normal; }

@font-face {
	font-family: Marianne;
	src: url(Marianne-Bold_Italic.woff2) format("woff2"), url(Marianne-Bold_Italic.woff) format("woff");
	font-weight: 700;
	font-style: italic; }



body {
	font-family: "Marianne", Arial;
}


/**************************************************** HEADER *********************************************************/

/* Fond blanc, texte noir, marges intérieures pour centrer le titre du header */
div.o-header-bandeau {
	background: white;
	color: black;
}

/* Alignement vertical de la marianne dans le header */
.s-header-marianne-img {
	margin-top: 0.65em;
	margin-bottom: 0.65em;
	margin-left: 0em;
	width: 140px;
}

/* Définition de la police de certaines parties du titre de page en gras et noir */
.titreHeaderNoir{
	font-family: Marianne;
	color:black;
	font-size:1.5em;
	font-weight:bold;
}

/* Police appliquée à la partie contenant un lien hypertexte dans le titre de l'application (='compte') */
.header-title h1 a,
span.o-user-role {
	font-size: 1.2em;
	font-weight: 600;
	color: #fff;
}

/* Dans le header, masquer la flêche de droite, permettant de dérouler le champs*/
#orion-default-header .o-header-fold-unfold {
	display: none;
}

/* Mise en forme des notifications */
.o-notification{
	word-wrap:break-word;
	border:none;
	border-radius:0px;
	margin-right:2em;
}
#notifications-panel {
	border-style:none;
}
.fa.pull-right { /* Alignement à droite de l'icone de fermeture des notifications */
	position:absolute;
	right:2em;
}

/* Mise en forme des messages */
.o-alert.o-header-message-alert{
	padding: 0px 14px 0px 14px;
	margin-bottom: 1.428571429;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
	background-color: #ffffff;
	border-style: none;
}
.alert {
	padding: 0px;
	margin-bottom: 20px;
	border-style: none;
	margin-left: 0px;
}
.o-header-message-indent {
	text-indent: 0.35em;
	margin-top: 0.2em;
	padding-left:0.5em;
	padding-right:2.5em;
}

div.col-md-6.header-title {
	position: absolute;
	top: 0em;
	left: 0em;
	padding-top: 0px;
	margin-bottom: 100px;
}

hr {
	border-top: 1px solid black;
	margin-top: 0px;
	margin-bottom: 0px;

}

/* Centrage vertical du titre 'Mon compte agriculture' */
.verticalAlign {
	margin-top: 30px;
}

/************** BANDEAU BLANC CONTENANT LE NOM COMPTE ET LES BOUTONS (NOTIFICATIONS, AIDE, DECONNEXION) ***************/

/* Placement des éléments dans le bandeau */
.bandeauBoutonsGauche {
	padding: 15px 15px 15px 0px;
	float:right
}
.bandeauBoutonsDroite {
	float:right;
	padding-top: 9px;
	padding-bottom: 9px;
}

/* Mise en forme des boutons du bandeau */
.bandeauBoutons button { /* pas d'action sur le bouton */
	font-size: 20px;
	max-height:2em;
	background-color:white;
	border-style:none;
	border-color:white;
	border-radius: 5px 5px 5px 5px;
	color:black;
	padding-right:0.3em;
	padding-left:0.3em;
}
.bandeauBoutons button:hover { /* bouton survolé */
	background-color:white;
	border-color:white;
	border: none;
	color:#5770BE;
}
.bandeauBoutons button:focus { /* clic sur le bouton */
	background-color:white;
	border-color:white;
	border:none;
	color:black;
}
.bandeauBoutons button:active { /* bouton déjà cliqué */
	background-color:white;
	border-color:white;
	border:none;
	color:black;
}
.bandeauBoutons button:hover:focus:active { /* combinaison d'actions sur le bouton */
	background-color:white;
	border-color:white;
	border:none;
	color:black;
}

/* Liens des items de la page Help */
.helpItem {
	text-decoration: none;
	color:black;
}

.helpItem:hover {
	color:black;
}

.helpItem:visited {
	text-decoration: none;
	color:black;
}




/******************************************** Container pages publiques ***********************************************/
.container-public {
	background-color: rgb(255,255,255);
	padding : 0 30px 0 30px;
}

/**************************************************** TITRE DE PAGE ***************************************************/

/* Mise en forme du titre de la page */
.titrePageCentre {
	padding-top:15px;
	padding-bottom:15px;
	text-align:center;
}

.titrePageCentreDansBox {
	padding-bottom:15px;
	text-align:center;
}

.titrePageGauche {
	padding-top:15px;
	padding-bottom:15px;
	text-align:left;
}

.titrePageDansBox {
	padding-bottom:15px;
	text-align:left;
}

.titrePageV2Gauche {
	padding-bottom:15px;
	text-align: left;
	background-color: #5770BE;
	padding-left:0.7em;
	padding-top:0.7em;
	padding-bottom:0.7em;
	text-transform:uppercase;
}

.titrePageV2Centre {
	padding-bottom:15px;
	text-align: center;
	background-color: #5770BE;
	padding-top:0.7em;
	padding-bottom:0.7em;
	text-transform:uppercase;
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	margin-top : 30px;
}

.sousTitrePage {
	padding-top:15px;
	padding-bottom:25px;
	text-align:center;
}

/* Mise en forme des titres de la page Bacus V2 (en blanc et gras) */
.titrePageBlancGras, .sousTitrePageBlancGras {
	color:white;
	font-weight:bold;
	font-size:1.2em;
}

/* Comme le RGAA impose des � et qu'ils ont des marges par d�faut de 10px, classe pour les surcharger*/
.sansMarge {
	margin: 0px;
}

/* Mise en forme première partie du titre de la page (en bleu et gras) */
.titrePageBleuGras, .sousTitrePageBleuGras {
	color:#5770BE;
	font-weight:bold;
	font-size:1.2em;
}

/* Mise en forme première partie du titre de la page (en rouge et gras) */
.titrePageRougeGras {
	color:rgb(255,51,51);
	font-weight:bold;
	font-size:1.2em;
}

/* Mise en forme deuxième partie du titre de la page */
.titrePageNoir {
	font-size:1.2em;
}

.titrePageNoirGras {
	font-weight:bold;
	font-size:1.2em;
}

/* Mise en place des styles pour pages expiredSession, accessDenied et error */
.fa-4x-2 {
	font-size: 1.5em;
	padding-top: 10px;
	margin-left: -5px !important;
}

.box-alert {
	font-size: 14px !important;
	padding-top: 0;
	padding-bottom: 60px;
}

.blueLeftBorder {
	border-left: 10px solid #5770be !important;
}


/******************************************************** FOOTER ******************************************************/

div.o-footer footer  {
	/* background: #23324e; */
	background-color:white;
	min-height: 2.29em;
	width: 100%;
	text-align: center;
	-webkit-border-radius: 0 0 1em 0;
	-moz-border-radius: 0 0 1em 0;
	border-radius: 0 0 0 0;
	color: black;
	padding-left: 10px;
	padding-top: 0.5em;
}

div.o-footer footer footer-text p.o-footer {
	color: black;
}

div.o-footer span.o-footer-text p.o-footer-text{
	color: black;
}

div.o-footer span.o-footer-right-part a.o-footer-link:hover p.o-footer-right-part {
	color: black;
	text-decoration: underline;
}
div.o-footer span.o-footer-right-part a.o-footer-link:visited p.o-footer-right-part {
	color: black;
}

span.o-footer-owner p.o-footer-owner{
	color: black;
	font-weight: bold;
	margin-left: 0.2em;
	margin-right: 0.2em;
}

/* Alignement vertical du texte dans le footer */
span.o-footer-left-part,
p.o-footer-left-part,
span.o-footer-right-part,
p.o-footer-right-part {
	color: black;
	margin-top: 0.3em;
	font-size: 1em;
}
span.o-footer-middle-part,
p.o-footer-middle-part {
	margin-top: 0.61em;
}

.footer-bold {
	font-weight: bold;
}



/********************* CSS SPECIFIQUE POUR LES CHECKBOX (PAGES CONSULTATION ET INSCRIPTION) ***************************/

.checkbox-container {
	position: relative;
	padding-left: 35px;
	margin-bottom: 14px;
	cursor: pointer;
	font-size: 22px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
input {
	position: absolute;
	cursor: pointer;
}
}

/* Création d'une checkbox personnalisée */
.checkbox-checkmark {
	position: absolute;
	top: 0.06em;
	left: 0.5em;
	height: 20px;
	width: 20px;
	background-color: #eee;
	border: 2px black solid;
	box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.5) inset;
}

.checkbox-container:hover input ~ .checkbox-checkmark { /* Quand la checkbox est coch�e, ajouter un fond gris */
	background-color: #70798c;
}
.checkbox-container input:checked ~ .checkbox-checkmark { /* Quand la checkbox est coch�e, ajouter un fond gris fonc� */
	background-color: RGB(52,53,57);
}
.checkbox-checkmark:after { /* Create the checkmark/indicator (hidden when not checked) */
	content: "";
	position: absolute;
	display: none;
}
.checkbox-container input:checked ~ .checkbox-checkmark:after { /* Show the checkmark when checked */
	display: block!important;
}
.checkbox-container .checkbox-checkmark:after { /* Style the checkmark/indicator */
	left: 7px;
	top: -2px;
	width: 6px;
	height: 18px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.infoLabel {
	font-size: 100%;
	float: right;
	margin-top: -23px;
	margin-right: 5px;
}

.infoLabelSaisieMail {
	font-size: 100%;
	margin-right: 5px;
}

.labelSaisieMail {
	width: fit-content;
	display: contents !important;
}

.notItalic {
	font-style: normal;
}

.notUnderline {
	text-decoration: none;
}

.checkboxLeftFloatParent {
	margin-right: 0;
	float: left;
}


/*********************************** CSS SPECIFIQUE POUR PAGE CONSULTATION.XHTML **************************************/

/* Texte de l'adresse postale, dimension de chaque ligne */
.list-control-static {
	margin-top: 0;
	margin-bottom: 0;
}

/* Phrase d'acceptation de diffusion d'informations personnelles */
.consentementDiffusionInfo1 {
	font-size:1em;
	font-weight:normal;
}

.consentementDiffusionInfo1bis {
	font-size:1em;
	font-weight:normal;
	font-style: italic;
	color:#707070;
}

.consentementDiffusionInfo2 {
	font-weight:bold;
	font-size:1em;
	padding-left:3em;
	margin-top:-1.5em;
}

/* icone 'edit' (=stylo) en noir au lieu de bleu */
#securite i.fa.fa-edit {
	color:black;
}

/* icone 'edit' (=stylo) en blanc au lieu de bleu */
.fa.fa-edit {
	color:white;
}

/* pour les données de sécurité */
.without-margin-botton {
	margin-bottom: 0!important;
}

.o-fieldset-icon {
	margin-right:-0.4em;
}
/* Modifie l'affichage de l'icône (^) du fieldset "Supprimer l'association avec FranceConnect", sur écran portable.
	L'icône apparait en haut à droite, au lieu d'être naturellement décalé une ligne en dessous du titre (trop long pour tenir sur une ligne)
 */
#dissocier span.o-fieldset-icon {
	margin: 0 -0.4em 0 -2em;
}

.bold {
	font-weight: bold;
}

.bold-sans-padding-top {
	font-weight: bold;
	padding-top: 0!important;
}

.normal {
	font-weight: normal!important;
}

.donnees-consultation .control-label {
	text-align: left;
	padding-top: 0;
	padding-left: 15px;
}
.donnees-consultation .control-donnee {
	font-weight: bold;
	display: grid;
}

.labelDansBandeau {
	text-decoration: none;
	padding-right: 0.3em;
	color:white;
	font-weight:bold;
	font-size:1.2em;
	margin-top: auto;
}

/*********************************** CSS SPECIFIQUE POUR PAGE inscription.XHTML ET modificationCguPanel.xhtml **************************************/

/* Couleur des liens de la box principale */
.inscriptionBox a, .modificationCguBox a {
	text-decoration: none;
}

/* Phrase sur l'acceptation des CGU */
.acceptationDesCgu1 {
	padding-left:0.5em;
	font-size:1em;
	font-weight:normal;
}
.acceptationDesCgu2 {
	color:#5770BE;
	font-weight:bold;
	font-size:1em;
}

.boutonRetourPortail a,
.bouton a,
a.acceptationDesCgu {
	text-decoration: none;
}


/************************************** CSS SPECIFIQUE POUR PAGE HELP.XHTML ******************************************/

/* Box principale */
.aideBox {
	max-width: 1280px;
	background-color: rgb(255,255,255);
	border-radius:0px 0px 0px 0px;
	padding-left:0em;
	padding-right:0em;
	padding-top:1.5em;
}

/* Box 'fiches', 'faq', 'manuel' */
.boxFichesFaqManuel {
	background-color:rgb(255,255,255);
	text-align:left;
	border: solid black 1px;
	padding-top: 0px;
}

/* Liens */
.btn.btn-default.btn.btn-link {
	background-color:rgb(255,255,255);
	border:none;
	color: #333333;
	font-weight:normal;
	text-transform:lowercase;
	white-space: pre-wrap;
	text-align:left;
}

/* Phrase de contact du dsa */
.contactezDsa {
	padding-left:2em;
}


/************************************* CSS SPECIFIQUE POUR PAGE LEGAL.XHTML ******************************************/

/* Box principale */
.legalBox {
	max-width: 1280px;
	border-radius:0px 0px 0px 0px;
	padding-top:0;
	padding-left:0;
	padding-right:1em;
}

.legalBoxSansFond {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	border-radius:0px 0px 0px 0px;
	padding-left:1em;
	padding-right:1em;
}

.legalBoxSansFondGauche {
	max-width: 1280px;
	border-radius:0px 0px 0px 0px;
	padding-left:1em;
	padding-right:1em;
}

/* Pas de bordure pour le cadre */
div.panel.panel-orion {
	border-style: none;
}

h4.legal {
	font-weight: bold;
	margin-top: 25px;
	margin-bottom: 20px;
}

h5.legal {
	font-weight: bold;
	margin-top: 20px;
	margin-bottom: 15px;
}

.infoLegal {
	font-weight:bold;
	font-style: italic;
}

/***************** CSS SPECIFIQUE POUR PAGE LIAISONCOMPTEFC.XHTML ET MOTDEPASSEOUBLIE.XHTML ************************/

button.btn.btn-default.btn-blue-white  {
	background-color: #5770BE;
	border-color: #5770BE;
	border-radius: 5px 5px 5px 5px;
	text-transform:uppercase;
	font-weight:bold;
	color: white;
}
button.btn.btn-default.btn-blue-white:hover,
button.btn.btn-default.btn-blue-white:focus {
	background-color: rgb(99,101,107);
	border-color: rgb(99,101,107);
	border-radius: 5px 5px 5px 5px;
	text-transform:uppercase;
	font-weight:bold;
	color: white;
}

.separationChoix {
	color:#5770BE;
	font-weight:bold;
	font-size:25px;
}

.pastille {
	display:flex;
	width:60px;
	height:60px;
	border-radius:50%;
	border:1px solid #000;
	background-color: white;
	line-height:30px;
	align-items: center;
	justify-content: center;
	margin: auto;
	position: relative;
	z-index: 1;
}

.trait {
	top: 15px;
	bottom: -40px;
	left: 50%;
	border-left: 1px solid black;
	position: absolute;
	z-index: 0;
}


/************************************************** AUTRES STYLES ****************************************************/

.liste-criteres {
	margin: -10px 0 15px 0px;
}

/* box */
.box-message .box-message-header-img {
	margin-bottom: 0.5em;
}
.box-form, .box-message { /* box contenant un formulaire de saisie */
	max-width: 800px;
	background-color: #F2F2F2;
	border-radius:0px 0px 0px 0px;
	padding-left: 1em;
	padding-right: 1em;
}

.box-form-sans-fond,.box-message-sans-fond { /* box contenant un formulaire de saisie */
	max-width: 800px;
	border-radius:0px 0px 0px 0px;
	padding-left: 1em;
	padding-right: 1em;
}

/* box des pages de confirmation */
.box-confirmation {
	border-left: solid 10px #5770BE !important;
}

/* Fieldset (ensemble de champs de saisies) */
/*div fieldset legend.o-fieldset-legend
{ */ /* Légendes de fieldset */
/* font-size: 1.2em;
 font-weight: bold;
 line-height: 1.5em;
 background-color:rgb(225,227,234);
 border-top: 5px solid rgb(21,171,82);
 color:rgb(21,171,82);
 padding:0;
}*/

div fieldset legend.o-fieldset-legend
{ /* Légendes de fieldset */
	font-size: 1.2em;
	font-weight: bold;
	line-height: 1.5em;
	background-color:#5770BE;
	color:white;
	padding-left:0.3em;
	padding-top:0.3em;
	padding-bottom:0.3em;
	margin-bottom: 7px;
}

/* Données sur icône FranceConnect */
.s-header-france-connect-img {
	margin-top: 0.65em;
	margin-bottom: 0.65em;
	margin-left: 0em;
	width: 100px;
}

/* Encadré des données Pivot FC */
.fieldDonneesPivotFC {
	font-size: 1em;
	margin-bottom: -10px;
}

div fieldset legend.o-fieldset-legend a { /* Liens hypertextes dans les légendes de fieldset  */
	color: black;
}

/* Champs de saisie */
.form-control {
	box-shadow:none;
	border-radius: 0px 0px 0px 0px;
	min-width:100%;
}

/* Champs de saisie quand on clique dedans*/
.form-control:focus {
	border-color:rgb(52,53,57);
	box-shadow:none;
	border-radius: 0px 0px 0px 0px;
}

/* Champs date */
.form-control-date div input {
	padding: 0px 12px;
}

/* Points d'interrogation à côté des labels */
label a, a.button-help {
	color: rgb(52,53,57);
}
label a:hover, a.button-help:hover { /* Points d'interrogation quand ils sont survolés */
	color: rgb(99,101,107);
}

/* Boutons */
.btn-primary, .btn-blue-white, .btn.btn-default.btn-primary {
	background-color: #5770BE;
	border-color: #5770BE;
	border-radius: 5px 5px 5px 5px;
	text-transform:uppercase;
	font-weight:bold;
	color: white;
}
.btn-default{
	background-color: white;
	border-color: #5770BE;
	border-radius: 5px 5px 5px 5px;
	color: #5770BE;
	text-transform: uppercase;
	font-weight: bold;
}

.float-button {
	text-decoration: none;
	margin-top:0.2em;
	margin-left:1em;
}

/* bouton default sans marge pour alignement à droite (pages privées)*/
.btn.btn-default.btn-no-margin {
	margin-right: 0em;
}


/* Boutons quand ils sont survolés*/
.btn-primary:hover,
.btn-primary:focus,
.btn.btn-default.btn-primary:hover,
.btn.btn-default.btn-primary:focus {
	background-color: rgb(99,101,107);
	border-color: rgb(99,101,107);
	border-radius: 5px 5px 5px 5px;
}
.btn-default:hover,
.btn-default:focus {
	background-color: rgb(99,101,107);
	border-color: rgb(99,101,107);
	border-radius: 5px 5px 5px 5px;
	color: white;
}

/* Forcer la mise en forme (en bleu) de boutons principaux */
button.btn.btn-default.btn-primary {
	background-color: #5770BE;
	border-color: #5770BE;
	border-radius: 5px 5px 5px 5px;
}
input.btn.btn-primary {
	background-color: rgb(21,171,82);
	border-color: rgb(21,171,82);
	border-radius: 0px 0px 0px 0px;
}

/* Forcer la mise en forme (en gris clair) de boutons principaux quand on clique dessus*/
.btn.btn-primary:active,
.btn.btn-default:active {
	background-color: rgb(99,101,107);
	color:white;
}

/* Bordure et fond gris pour les zones comprenant les boutons 'Enregistrer' et 'Annuler' */
div .form-actions {
	background-color: rgb(225,227,234);
	border-color:rgb(225,227,234);
}

/* Bordure et fond blancs pour les zones comprenant les boutons 'Enregistrer' et 'Annuler' */
div .form-actions-sans-fond {
	background-color: white;
	border-color: white;
}

.btn-danger,
.btn-warning {
	text-decoration:none;
	text-transform:uppercase;
	font-weight:bold;
}

/* Autres styles (vérifier qu'ils sont tous utilisés) */
.text-strong {
	font-weight: bold;
}
.text-center {
	text-align: center;
}

.text-right {
	text-align: right;
}

.text-left {
	text-align: left;
}

.text-gris {
	color:#BFBFBF;
}

.little-padding-top {
	padding-top : 0.5em;
}

.medium-padding-top {
	padding-top : 1em;
}

.padding-top { /* marge de 20px au-dessus */
	padding-top : 20px;
}
.margin-right { /* marge de 20px à droite */
	margin-right : 20px;
}

.margin-right2 {
	float: left;
	padding-top: 0.8em;
	margin-left: 0.8em;
}

.display-none { /* élément ou section à ne pas afficher */
	display: none;
}
nav[role=navigation] {
	display: none;
}
.navbar-default h1 a {
	color: #fff;
}

.navbar-inverse h1 a {
	color: #fff;
}

body { /* fond blanc */
	background-color: #ffffff;
}

a { /* Liens hypertexte de l'appli remis en standard (bleus, soulignés) */
	color:#0B6BA8;
	text-decoration:underline;
}

.fa.fa-check-circle { /* logo 'check' bleu */
	color:#5770BE;
}

h4 {
	font-size: 1.13em;
}

h5 {
	font-size:1em;
}

/* Include des données Pivots France Connect */
.box-include-donnees-FC {
	width: 100%;
	background-color: white;
	padding: 10px;
}
.include-donnees-FC div {
	margin-bottom: -20px;
}
.include-donnees-FC .control-label {
	text-align: left;
	padding-left: 60px;
}
.panel-body-include-donnees-FC {
	margin-bottom: 0px;
}
.panel-body-include-donnees-FC {
	padding: 4px;
}
.decalage-gauche span {
	padding-left: 15px;
}

/* Style du champ factice de saisie du mot de passe dans la page associationCompteFc.xhtml */
#associationCompteChampFakeMdp input {
	min-width: 100%;
	height: 34px;
	padding: 6px 12px;
	background-color:rgb(238, 238, 238);
	border: 1px solid #ccc;
}
/* Style du champ factice de saisie du mot de passe dans la page associationCompteFc.xhtml,
lorsqu'il est survolé */
#associationCompteChampFakeMdp input:hover {
	min-width: 100%;
	height: 34px;
	padding: 6px 12px;
	border: 1px solid #ccc;
	cursor: not-allowed;
}

/* Arrondir les input */
.form-control {
	/* font-size: 4vw; */
	border-radius: 5px 5px 5px 5px;
}
.form-control:focus {
	/* font-size: 4vw; */
	border-radius: 5px 5px 5px 5px;
}

/* lien avec style bouton sans marge pour alignement à droite (pages privées) */
a.btn.btn-default.btn-no-margin {
	margin-right: 0em;
}

/* buttonset sans padding pour alignement à droite (pages privées) */
div .form-actions-no-padding {
	padding: 20px 0px 20px 0px;
}

/* format des listes des critères à respecter pour un mot de passe*/
ul {
	padding-left: 0;
	margin-bottom: 0;
}

ul li {
	list-style-type: square;
	list-style-position: inside;
}

/* Texte pouvant revenir à la ligne n'importe où même sans espace */
.wrap-anywhere {
	overflow-wrap: anywhere;
}

/* Icone avec faible marge à gauche */
i.low-margin-left {
	margin-left: 0.1em !important;
}

/* Ajouter des icones dans les champs de saisie des formulaires */
.input-icon {
	position: relative;
	display: inline-block;
	width: 100%;
}

.input-icon input {
	text-indent: 5px;
	padding-left: 1.5em;
	box-sizing: border-box;
}

.input-icon input[type="date"] {
	padding-left: 1.3em;
	box-sizing: border-box;
}

.input-icon select {
	padding-left: 1.6em;
	box-sizing: border-box;
}

.input-icon-email {
	padding-left: 1.4em;
	box-sizing: border-box;
}

.input-icon textarea {
	padding-left: 1.8em;
	box-sizing: border-box;
}

.input-icon .fa-user,
.input-icon .fa-envelope-o-gris,
.input-icon .fa-lock,
.input-icon .fa-calendar-o,
.input-icon .fa-building-o,
.input-icon .fa-phone {
	position: absolute;
	top: 8px;
	left: 25px;
	color: #BFBFBF;
}

/* Style pour corriger le problème de chevauchement de certains labels */
.noPadding {
	padding-left: 0;
	padding-right: 0;
}

/**********************************************************************************************************************/
/**********************************************************************************************************************/
/** 							2. STYLES DIFFERENTS SELON LA TAILLE DE L'ECRAN				 					  	 **/
/** 						   ( CERTAINS NE SONT PAS DEFINIS DANS TOUTES LES CATEGORIES,					  		 **/
/** 						     DANS CE CAS LES STYLES QUI S'APPLIQUENT POUR CES CATEGORIES				  		 **/
/** 						     SONT CEUX DEFINIS DANS LA PARTIE 1.STYLES GENERAUX PARTAGES						 **/
/**								 OU DANS LES CATEGORIES PRECEDENTES S'ILS Y SONT DEFINIS )					  		 **/
/**********************************************************************************************************************/
/**********************************************************************************************************************/


/************************** STYLES SPECIFIQUE PETITS ECRANS (mobiles, moins que 768px ) *******************************/

body, input, .form-control, .btn, .box-include-donnees-FC p, .separationChoix {
	font-size: 4vw;
}

.box-main-form { /* box contenant un formulaire de saisie de grande taille */
	width:100%;
	background-color:#F2F2F2;
	border-radius:0px 0px 0px 0px;
}

.box-main-form-sans-fond { /* idem box ci-dessus masi sans le fond gris */
	width:100%;
	border-radius:0px 0px 0px 0px;
}

/* Enlever l'ombre autour des box. TODO: vérifier que ça n'impacte pas d'autres cadres que les box */
.panel {
	box-shadow: 0 0px 0px;
}

/* Alignement du titre de l'application, dans le header */
.header-title h1 {
	display: inline-block;
	font-size: 1em;
	margin-top: 0em;
	margin-bottom: 0.7em;
	padding-left: 0.5px;
}

/* Bandeau notification publique, dans le header */
.bandeauNotificationPublique {
	background-color:#FFFFFF;
	text-align: left;
	line-height: 25px;
	font-size: 18px;
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
}

/* Bandeau notification globale, dans le header */
.bandeauNotificationGlobale {
	background-color:#FFFFFF;
	text-align: left;
	line-height: 25px;
	font-size: 18px;
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
}


/* Bandeau blanc, dans le header */
.bandeauBoutons {
	font-size: 20px;
	background-color:white;
	color:black;
	font-weight:bold;
	min-height:3.3em;
	max-height:3.3em;
}

/* Ligne blanche entre header et bandeau de connexion */
.ligneBlancheSousMonCompte {
	min-height:0.3em;
	max-height:0.3em;
	margin: 0px 0px 0px 0px; /*haut droit bas gauche*/
}

/* checkbox de la page inscription */
.margeGaucheCheckboxInscription {
	margin-left: 0.5em; /* sur petits écrans, décaler la checkbox vers la gauche */
	padding-top: 10px; /* sur petits écran, décaler vers le bas le texte d'acceptation des CGU */
}

/* Style spécifique à la page liaisonCompteFc.xhtml,
	s'applique par défaut aux écrans de moins de 992px, ce style étant redéfini pour les écrans de 992px et plus */
.box-liaison-compte-fc {
	width: 100%;
	background-color: white;
	padding: 10px;
}

/* Définit le chemin de l'image FranceConnect à appliquer, ainsi que ses caractéristiques, à la base et au survol de l'image.
   	S'applique par défaut aux écrans de moins de 992px, ce style étant redéfini pour les écrans de 992px et plus */
.imageIdentifierFc {
	width: 460px;
	height: 120px;
	background-image: url("../../img/FranceConnect-Associer-Petits-Ecrans.png");
	border: 0px;
	cursor: pointer;
	overflow: visible;
	padding-botom: 0px;
	margin-bottom: 0px;
}
.imageIdentifierFc:hover {
	background-image: url("../../img/FranceConnect-Associer-Survole-Petits-Ecrans.png");
}
/* Style du lien "Qu'est-ce que FranceConnect", dans la page consultation.xhtml
	S'applique par défaut aux écrans de moins de 992px, ce style étant redéfini pour les écrans de 992px et plus */
.questionFc {
	padding-top: 8px;
	margin-top: 0px;
	font-size: 26px;
}

/* Style de la marianne FranceConnect.
       S'applique par défaut aux écrans de moins de 992px, ce style étant redéfini pour les écrans de 992px et plus */
.marianne-fc {
	/* Laisser s'afficher l'image sans style spécifique. */
	float: left;
}

/* Nouveau format msg 	alerte */
.alert-danger {
	background-color: #ffffff;
	border-color: #ffffff;
	color: #a94442;
}


/************* STYLE CHECKBOX *********************************************/

input[type="checkbox"] {
	height: 1em;
	width: 1em;
	margin: 0;
}
input[type="checkbox"]:focus {
	outline-color: blue;
	outline-style: double;
	outline-width: medium;
	outline-offset: -2px;
}


/************************** STYLES SPECIFIQUES PETITS ECRANS (t�l�phones, 361 et plus) ********************************/
@media (min-width: 301px) {

	.labelDansBandeau {
		float: right;
		text-decoration: none;
		padding-right: 0.3em;
		color:white;
		font-weight:bold;
		font-size:1.2em;
		margin-top: auto;
	}

	.titrePageV2Gauche {
		padding-bottom:15px;
		text-align: left;
		background-color: #5770BE;
		padding-left:0.7em;
		padding-top:0.7em;
		padding-bottom:0.7em;
		text-transform:uppercase;
		height:auto;
	}

	.checkbox-checkmark{
		position: absolute;
		top: -0.3em;
		left: 0.2em;
		background-color: #eee;
		border: 2px black solid;
		box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.5) inset;
	}

	.inscriptionTermineeParagraphe{
		margin: 0 0px 10px -15px;
	}
}

/************************** STYLES SPECIFIQUE PETITS ECRANS (tablettes, 768px et plus ) *******************************/

@media (min-width: 768px) {
	body, input, .form-control, .btn, .box-include-donnees-FC p, .separationChoix {
		font-size: 3vw;
	}

	/* Alignement du titre de l'application, dans le header */
	.header-title h1 {
		display: inline-block;
		font-size: 1em;
		margin-top: 0.2em;
		margin-bottom: 0.8em;
		padding-left: 0.5px;
	}

	/* Bandeau de connexion, dans le header */
	.bandeauBoutons {
		font-size: 20px;
		background-color:white;
		color:black;
		font-weight:bold;
		min-height:3em;
		max-height:3em;
	}

	/* Ligne blanche entre header et bandeau de connexion */
	.ligneBlancheSousMonCompte {
		min-height:0.5em;
		max-height:0.5em;
		margin: 0px 0px 0px 0px; /*haut droit bas gauche*/
	}

	/* Checkbox de la page inscription */
	.margeGaucheCheckboxInscription {
		margin-left:0.35em;
		padding-top: 0;
	}

	.input-icon-email {
		padding-left: 1em;
		box-sizing: border-box;
	}

	.checkbox-checkmark{
		position: absolute;
		top: -0.3em;
		left: 0.2em;
		background-color: #eee;
		border: 2px black solid;
		box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.5) inset;
	}

}

/*********************** STYLES SPECIFIQUE ECRANS DE TAILLE MOYENNE (desktops, 992px et plus) ***********************/

@media (min-width: 992px) {

	.box-main-form { /* box contenant un formulaire de saisie de grande taille */
		max-width: 1280px;
		background-color:#F2F2F2;
		border-radius:0px 0px 0px 0px;
		padding-left: 1em;
		padding-right: 1em;
	}

	.box-main-form-sans-fond { /* idem box ci-dessus mais sans le fond gris */
		max-width: 1280px;
		border-radius:0px 0px 0px 0px;
		padding-left: 1em;
		padding-right: 1em;
	}

	.box-main-form-sans-fond-large { /* idem box ci-dessus mais sans limitation de largeur de la box */
		border-radius:0px 0px 0px 0px;
		padding-left: 1em;
		padding-right: 1em;
	}

	.box-message {
		max-width: 550px;
		background-color:#F2F2F2;
		border-radius:0px 0px 0px 0px;
		padding-left:1em;
		padding-right:1em;
	}

	.box-form-sans-fond, .box-message-sans-fond {
		max-width: 550px;
		border-radius:0px 0px 0px 0px;
		padding-left:1em;
		padding-right:1em;
	}

	body, input, .form-control, .btn, .box-include-donnees-FC p {
		font-size: 14px;
	}

	.include-donnees-FC{
		margin-top: 23px;
	}

	.include-donnees-FC p {
		padding-left : 60px;
	}

	/* Alignement du titre de l'application, dans le header */
	.header-title h1, .header-title div {
		display: inline-block;
		font-size: 1em;
		margin-top: 0.5em;
		margin-bottom: 1.3em;
		padding-left: 0.5px;
	}

	/* Bandeau de connexion, dans le header */
	.bandeauBoutons {
		font-size: 20px;
		background-color:white;
		color:black;
		font-weight:bold;
		min-height:3em;
		max-height:3em;
	}

	/* Ligne blanche entre header et bandeau contenant les icône home, déconnexion etc */
	.ligneBlancheSousMonCompte {
		min-height:1em;
		max-height:1em;
		margin: 0px 0px 0px 0px; /*haut droit bas gauche*/
	}

	/* Checkbox */
	.margeGaucheCheckboxInscription {
		margin-left:0.15em;
		padding-top: 0;
	}

	.margeGaucheCheckboxCreationCompteFc {
		margin-left:1.0em;
		padding-top: 0;
	}
	.checkbox-checkmark {
		top: 0.15em;
		left: 0.9em;
		height: 16px;
		width: 16px;
	}
	.checkbox-container .checkbox-checkmark:after {
		left: 4px;
		top: 0;
		width: 6px;
		height: 12px;
	}
	input[type=checkbox] {
		height: 1em;
		width: 1em;
	}

	/* position absolue du titre 'moncompte' dans les pages publiques
	(pour qu'il ne bouge pas en fonction de la présence/absence de la barre de défilement*/
	div.col-md-6.header-title {
		position: absolute;
		top: 2em;
		left: 15em;
	}

	/* position absolue du titre 'moncompte' dans les pages privées
	(pour qu'il ne bouge pas en fonction de la présence/absence de la barre de défilement*/
	div.col-xs-12.col-md-11.header-title {
		position: absolute;
		top: 2em;
		left: 15em;
	}

	.form-control-include-1 div input {
		min-height: 1.9em;
	}

	.form-control-include-2 div input {
		min-height: 1.9em;
	}

	/* Style spécifique à la page liaisonCompteFc.xhtml,
		s'applique aux écrans de de 992px et plus, redéfinit celui qui s'applique par défaut pour les écrans plus petits */
	.box-liaison-compte-fc {
		width: 100%;
		background-color: white;
		padding: 10px;
		height: 230px;
	}
	.liaison-compte-fc-green-block-line-1 {
		height: 70px;
	}

	/* Définit le chemin de l'image FranceConnect à appliquer, ansi que ses caractéristiques, à la base et au survol de l'image.
   		S'applique aux écrans de de 992px et plus, redéfinit celui qui s'applique par défaut pour les écrans plus petits */
	.imageIdentifierFc{
		width: 230px;
		height: 60px;
		background-image: url("../../img/FranceConnect-Associer.png");
		border: 0px;
		cursor: pointer;
		overflow: visible;
		padding-botom: 0px;
		margin-bottom: 0px;
	}
	.imageIdentifierFc:hover {
		background-image: url("../../img/FranceConnect-Associer-Survole.png");
	}

	/* Style du lien "Qu'est-ce que FranceConnect", dans la page consultation.xhtml						
   		S'applique aux écrans de de 992px et plus, redéfinit celui qui s'applique par défaut pour les écrans plus petits */
	.questionFc {
		padding-top: 8px;
		margin-top: 0px;
		font-size: 13px;
	}

	/* Style de la marianne FranceConnect.					
   		S'applique aux écrans de de 992px et plus, redéfinit celui qui s'applique par défaut pour les écrans plus petits */
	.marianne-fc {
		width: 50px;
		height: 50px;
	}

	/* Suppression de l'espace avec le header bandeau, pour les moyens et grands écrans */
	.bandeauBoutons {
		padding-top: 0px;
	}

	.input-icon-email {
		padding-left: 1.2em;
		box-sizing: border-box;
	}
}

/*************************** STYLES SPECIFIQUE GRANDS ECRANS (desktops, 1200px et plus) ******************************/

@media (min-width: 1200px) {

	body, input, .form-control, .btn, .box-include-donnees-FC p {
		font-size: 16px;
	}

	.include-donnees-FC{
		margin-top: 23px;
	}


	.include-donnees-FC p {
		padding-left : 60px;
	}

	.separationChoix {
		font-size: 25px;
	}

	/* Alignement du titre de l'application, dans le header */
	.header-title h1 {
		display: inline-block;
		font-size: 1em;
		margin-top: 0.5em;
		margin-bottom: 1.3em;
		padding-left: 0.5px;
	}

	/* Bandeau de connexion, dans le header */
	.bandeauBoutons {
		font-size: 20px;
		background-color:white;
		color:black;
		font-weight:bold;
		min-height:3em;
		max-height:3em;
	}

	/* Ligne blanche entre header et bandeau contenant les icônes home, déconnexion etc */
	.ligneBlancheSousMonCompte {
		min-height:1em;
		max-height:1em;
		margin: 0px 0px 0px 0px; /*haut droit bas gauche*/
	}

	/* Checkbox */
	.margeGaucheCheckboxInscription {
		margin-left: 0.1em;
		padding-top: 0;
	}
	.checkbox-checkmark {
		top: 0.15em;
		left: 0.9em;
		height: 16px;
		width: 16px;
	}
	.checkbox-container .checkbox-checkmark:after {
		left: 4px;
		top: 0;
		width: 6px;
		height: 12px;
	}

	/* position absolue du titre 'moncompte' dans les pages publiques
	(pour qu'il ne bouge pas en fonction de la présence/absence de la barre de défilement*/
	div.col-md-6.header-title {
		position: absolute;
		top: 2em;
		left: 15em;
	}

	/* position absolue du titre 'moncompte' dans les pages privées
	(pour qu'il ne bouge pas en fonction de la présence/absence de la barre de défilement*/
	div.col-xs-12.col-md-11.header-title {
		position: absolute;
		top: 2em;
		left: 15em;
	}

	/* Nouveau format msg 	alerte */
	.alert-danger {
		background-color: #ffffff;
		border-color: #ffffff;
		color: #a94442 !important;
		font-size: 20px;
	}

	.input-icon-email {
		padding-left: 1.0em;
		box-sizing: border-box;
	}
}