@charset "utf-8";
/* CSS Document */

/*** GENERAL ***/

/* Couleurs */
:root
{
	--main-color1: #1a3d58;
	--main-color2: #f8aa00;
	--main-color3: #659aca;
	--dark-color: #666666;
	--light-color: #EEEEEE;
	--light-color2: #d8e6f2;
	--white-color: #FFFFFF;
	--green-color: #58C575;
	--orange-color: #ffae00;
	--red-color: #FF5A5A;
}

input::-ms-reveal,
input::-ms-clear
{
	display: none;
}

.vert
{
	color: var(--green-color) !important;
}

.rouge
{
	color: var(--red-color) !important;
}

.orange
{
	color: var(--orange-color) !important;
}

/* Structure */
html
{
	height: 100%;
}

body
{
	font-family: 'opensans_regular', sans-serif;
	font-size: 14px;
	background-color: var(--light-color);
	padding-bottom: 40px;
	color: var(--dark-color);
}

.row:not(.expanded),
.row:not(.expanded) .row:not(.expanded)
{
	max-width: 1300px !important;
}

/*** CUSTOM SWITCHBOX ***/
.switchBox
{
	border-radius: 5px;
	background-color: var(--light-color);
	height: 50px;
	line-height: 50px;
	display: flex;
	padding: 0;
	overflow: hidden;
	max-width: 350px;
}

.switchBox input
{
	display: none;
}

.switchBox label
{
	padding: 0 15px;
	margin: 0;
	font-size: 1rem;
	height: 50px;
	line-height: 50px;
	color: var(--dark-color);
	text-align: center;
	font-family: 'opensans_semibold', sans-serif;
	cursor: pointer;
	width: 50%;
	transition: all 0.2s ease-in-out;
}

.switchBox input:checked + label
{
	background-color: var(--green-color);
	color: var(--white-color);
}

.reveal
{
	border: none !important;
	outline: none !important;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
}

.puceRonde
{
	width: 2em;
	height: 2em;
	display: block;
	background-color: var(--main-color1);
	border-radius: 50%;
	color: var(--white-color);
	line-height: 2em;
	text-align: center;
}

/*** CUSTOM CHECKBOX/RADIO ***/
/* The container */
.container
{
	display: block;
	position: relative;
	padding-left: 30px;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Hide the browser's default checkbox */
.container input
{
	position: absolute;
	opacity: 0;
	cursor: pointer;
	margin: 0;
}

/* Create a custom checkbox */
.checkmark
{
	position: absolute;
	top: 0;
	left: 0;
	height: 20px;
	width: 20px;
	background-color: var(--white-color);
	border: solid 2px var(--light-color);
	border-radius: 5px;
	transition: background-color 0.2s ease-in-out;
}

.checkmark.radioButton
{
	border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark
{
	background-color: var(--light-color);
}

/* When the checkbox is checked, add a background */
.container input:checked ~ .checkmark
{
	background-color: var(--main-color3);
	border-color: var(--main-color3);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after
{
	content: "";
	position: absolute;
	display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after
{
	display: block;
}

/* Style the checkmark/indicator */
.container .checkmark.checkBox:after
{
	/*left: 9px;
	top: 5px;
	width: 5px;
	height: 10px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);*/
	content: "\f00c";
	font-family: FontAwesome;
	font-size: 16px;
	line-height: 16px;
	color: var(--white-color);
}

.container .checkmark.radioButton:after
{
	top: 7px;
	left: 7px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: white;
}

/*** HEADER ***/
.header
{
	background-color: var(--main-color1);
	height: 100px;
	position: sticky;
	top: 0;
	z-index: 10;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
}

.header > .column > .row
{
	position: relative;
}

/* Logo */
.headerLogo
{
	padding: 0 10px 0 0;
}

.headerLogo img
{
	max-height: 60px;
	border: none;
	outline: none;
}

/* Baseline */
.headerBaseline
{
	color: var(--white-color);
	font-family: 'opensans_regular';
	font-size: 1.1em;
	line-height: 1;
	border-left: solid 1px #fff;
	padding-left: 20px;
}

/* Recherche */
.recherche
{
	padding: 0;
}

.rechercheForm
{
	background-color: var(--white-color);
	border-radius: 5px;
	padding: 0;
	height: 50px;
}

.rechercheChamp,
.rechercheChamp:focus
{
	background: transparent;
	border: none;
	outline: none;
	box-shadow: none;
	height: 50px;
	margin: 0;
	color: var(--dark-color);
}

.rechercheChamp::placeholder
{
	color: var(--dark-color);
}

.rechercheBouton
{
	color: var(--dark-color);
	width: 50px;
	height: 50px;
	text-align: center;
	line-height: 50px;
	font-size: 24px;
	transition: all 0.2s ease-in-out;
}

.rechercheBouton:hover
{
	color: var(--main-color3);
	width: 50px;
	height: 50px;
	text-align: center;
	line-height: 50px;
	font-size: 24px;
}

.rechercheBouton.mobile
{
	color: var(--white-color);
	font-size: 40px;
}

/* Pagination */
.pagination
{
	margin: 15px auto;
}

.pagination li
{
	font-size: 20px;
	font-family: 'opensans_semibold', sans-serif;
	padding: 0;
}

.pagination li span
{
	text-decoration: none;
	color: var(--light-color);
	display: block;
	padding: 5px;
	min-width: 50px;
	height: 50px;
	text-align: center;
	border-radius: 5px;
	line-height: 40px;
	padding: 5px;
	border: solid 1px var(--light-color);
	box-sizing: border-box;
}

.pagination li a
{
	text-decoration: none;
	color: var(--main-color3);
	transition: all 0.2s ease-in-out;
	display: block;
	padding: 5px;
	min-width: 50px;
	height: 50px;
	text-align: center;
	border-radius: 5px;
	line-height: 40px;
	padding: 5px;
	border: solid 1px var(--light-color);
	box-sizing: border-box;
}

.pagination li a:hover,
.pagination button:hover
{
	background-color: var(--main-color2);
	color: var(--white-color);
	border: solid 1px var(--main-color2);
}

.pagination li:first-child,
.pagination li:last-child
{
	vertical-align: bottom;
}

.pagination li:first-child a,
.pagination li:first-child span,
.pagination li:last-child a,
.pagination li:last-child span
{
	font-size: 30px;
	padding: 2px 5px 8px 5px;
}

.pagination li.disabled
{
	padding: 0;
}


/* Page paiement */
.frontPage.pagePaiement .blocContenu
/*.frontPage.pagePaiement .ficheEntreprise*/
{
	height: 100%;
}

#modal-payment
{
	height: 70%;
}

/* Menu back-office */
.headerMenu a, .headerMenu ul.dropdown.menu > li.is-active > a
{
	color: var(--white-color);
}

.headerMenu a:hover
{
	transition: all 0.2s ease-in-out;
	opacity: 0.75;
}

.headerMenu a:after
{
	border-color: var(--white-color);
}

.headerMenu ul li ul li a
{
	color: var(--main-color3);
}

.headerMenu .menu > li.is-dropdown-submenu-parent > a::after,
.headerMenu .menu > li.is-accordion-submenu-parent > a::after
{
	color: var(--white-color);
	content: "\f107";
	font-family: FontAwesome;
	border: none !important;
	margin-top: -7px;
	width: auto;
	height: auto;
}

.headerMenuMobile
{
	color: var(--white-color);
	cursor: pointer;
}

/* Menu Compte */
.headerCompte
{
	color: var(--white-color);
	cursor: pointer;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.headerCompte a.bouton,
#header-menu a.bouton
{
	font-size: 14px;
}

.headerCompte .fa-user-circle-o
{
	padding: 5px 6px;
	border-radius: 5px 5px 0 0;
}

.headerCompte.hover .fa-user-circle-o
{
	background-color: var(--white-color);
	color: var(--main-color1);
	padding: 5px;
}

.dropdownMenu .menu li, .dropdownMenu.menu li
{
	display: block;
	width: 100%;
}

.dropdownMenu .menu li a, .dropdownMenu.menu li a
{
	padding: 0.7rem 2rem;
	color: var(--white-color);
	transition: all 0.2s ease-in-out;
}

.dropdownMenu .menu li a:before
{
	font-family: FontAwesome;
	margin-right: 5px;
	content: "\f105";
}

.dropdownMenu .menu hr, .dropdownMenu.menu hr
{
	color: var(--light-color);
	background: var(--light-color);
	border-color: var(--light-color);
	margin: 15px 0;
}

.dropdownMenu button
{
	color: var(--white-color);
	background-color: var(--red-color);
	padding: 10px;
	border-radius: 5px;
	width: 100%;
	font-family: 'opensans_semibold', sans-serif;
	font-size: 0.9em;
	outline: none;
	transition: all 0.2s ease-in-out;
}

.dropdownMenu button:before
{
	content: "\f00d";
	font-family: FontAwesome;
	margin-right: 5px;
	font-size: 1.1em;
	color: var(--white-color);
}

.dropdownMenu button:hover
{
	filter: saturate(2);
	box-shadow: 0 0 15px -5px var(--red-color);
}

.dropdownMenu hr
{
	margin: 10px auto 15px;
}


/*** CONTENU ***/
.content
{
	padding: 45px 0;
}

/* Infos / Astuces */
.blocInfos
{
	padding: 0 30px;
	color: var(--dark-color);
}

.infosTitre
{
	font-family: 'opensans_bold';
	font-size: 2em;
	line-height: 1.2;
	color: var(--dark-color);
	margin-bottom: 15px;
}

.infosTexte
{
	padding-bottom: 30px;
}

.infosTexte ul
{
	list-style: none;
	margin-top: 10px;
	margin-left: 0;
}

.infosTexte ul li
{
	margin-bottom: 10px;
}

/* Bloc principal (formulaire...) */
.blocPrincipal
{
	background-color: var(--white-color);
	padding: 30px;
}

.blocTitre
{
	font-family: 'opensans_bold';
	color: var(--main-color1);
	font-size: 1.8em;
	line-height: 1.2;
	margin-bottom: 15px;
}

.blocTitre.titrePrincipal
{
	text-align: center;
}

.blocTitre.titrePrincipal span
{
	font-family: 'opensans_regular';
}

.blocTitre.titrePrincipal a
{
	color: var(--main-color1);
}

.blocTitre.titrePrincipal i.fa
{
	color: var(--dark-color);
	animation-duration: 0.75s;
	animation-name: slideBottom;
	animation-iteration-count: infinite;
	animation-timing-function: ease-out;
}

@keyframes slideBottom
{
	from
	{
		transform: translateY(-10px);
		opacity: 0;
	}
	
	to
	{
		transform: translateY(10px);
		opacity: 1;
	}
}

.blocContenu
{
	color: var(--dark-color);
}

.blocPrincipal a
{
	color: var(--main-color1);
	text-decoration: underline;
}

/* Formulaire */
.formLigne
{
	margin-bottom: 15px;
	position: relative;
}
.formLigne.row
{
	margin-bottom: 0px;
}
.formLigne.row > .column
{
	margin-bottom: 15px;
}

.formLabel
{
	font-family: 'opensans_regular';
	font-size: 1.2em;
	color: var(--dark-color);
}

.select2-container--default .select2-selection--single{
	border: solid 2px var(--light-color) !important;
}
.formChamp, .select2-selection
{
	border-radius: 5px;
	background-color: var(--white-color);
	border: solid 2px var(--light-color);
	border-width: 2px !important;
	height: 50px !important;
	margin: 0;
	box-shadow: none;
}

.formChamp[type="checkbox"]
{
	height: auto;
}

.formChamp.champDate
{
	display: inline-block;
	width: auto;
}

.formChamp.champErreur
{
	border-color: var(--red-color);
}

.select2-selection__rendered, .select2-selection .select2-selection__arrow
{
	height: 50px !important;
	line-height: 50px !important;
}


.texteErreur
{
	color: var(--red-color);
	display: block;
}

.formAfficherMdp
{
	width: 50px;
	height: 50px;
	line-height: 50px;
	position: absolute;
	right: 0;
	bottom: 0;
	text-align: center;
	color: var(--dark-color);
	cursor: pointer;
}

.formAfficherMdp:before
{
	content: "\f06e";
	font-family: FontAwesome;
}

.formAfficherMdp[data-mode="clear"]:before
{
	content: "\f070";
}

.formValeur
{
	font-family: 'opensans_semibold', sans-serif;
	font-size: 1.2em;
	line-height: 1.8;
	color: var(--main-color3);
}

.titreGroupe
{
	font-family: 'opensans_semibold_italic';
	color: var(--main-color3);
	font-size: 1.4em;
	padding-top: 15px;
	padding-bottom: 5px;
	margin-bottom: 15px;
	border-bottom: solid 1px var(--light-color);
}

.ficheActivation,
.ficheIndexation
{
	font-family: 'opensans_bold';
	font-size: 1.4em;
	margin-bottom: 10px;
}

.compteEtat
{
	font-family: 'opensans_bold';
	font-size: 1.4em;
}

.actif
{
	color: var(--green-color) !important;
}

.inactif
{
	color: var(--red-color) !important;
}

.encours
{
	color: var(--orange-color) !important;
}

.activationZone
{
	padding: 15px;
	margin: 0;
	background-color: var(--light-color);
}

.formTexte
{
	font-size: 0.9em;
	margin-top: 5px;
	opacity: 0.66;
}

.imgLogo div
{
	background-color: var(--white-color);
	border: solid 1px var(--light-color);

}

.imgLogo div img
{
	max-height: 248px;
	margin: 0 auto !important;
	vertical-align: initial;
}

.uploadLogo
{
	background-color: var(--light-color);
	padding: 15px;
}

.uploadLogo input
{
	margin: 0;
	background-color: var(--white-color);
	border-radius: 5px;
	padding: 5px;
	margin-bottom: 10px;
}

/* Champs file */
.inf__drop-area
{
	width: 100% !important;
	padding-right: 0 !important;
	border: dashed 2px var(--light-color) !important;
}

.inf__drop-area.is-active
{
	background-color: var(--light-color) !important;
	border: 2px dashed var(--dark-color) !important;
}

.inf__drop-area img
{
	max-height: 100%;
}

.inf__btn
{
	text-transform: initial !important;
	background-color: white;
}

.inf__drop-area span
{
	font-size: 1em;
}

.ribAlreadyUploaded {
	background-color: var(--light-color2) !important;
	padding: 15px;
	margin-bottom: 10px;
}
.ribAlreadyUploaded span {
	font-family: 'opensans_semibold';
}
.ribAlreadyUploaded a {
	font-family: 'opensans_semibold';
}
.ribAlreadyUploaded div {
	line-height: normal;
	margin-top: 10px;
}

.infos_mobile {
	background-color: var(--light-color2) !important;
	padding: 15px;
	margin-bottom: 10px;
	line-height: normal;
	font-size: 14px;
}

/* Force du mot de passe */
.formLigne.forceMdp
{
	margin-top: -10px;
	text-align: right;
	font-size: 0.9em;
}

.forceMdp span
{
	font-family: 'opensans_semibold', sans-serif;
}

.forceMdp i
{
	color: var(--light-color);
}

.forceMdp i.forceHaute
{
	color: var(--green-color);
}

.forceMdp i.forceMoyenne
{
	color: var(--orange-color);
}

.forceMdp i.forceBasse
{
	color: var(--red-color);
}

/* Listes */
.liste
{
	border-top: solid 1px var(--light-color);
	margin: 0;
	list-style: none;
}

.listeEntete
{
	border-bottom: solid 1px var(--light-color);
	padding: 15px;
	font-family: 'opensans_semibold', sans-serif;
}

.listeLigne
{
	border-bottom: solid 1px var(--light-color);
	padding: 15px;
}

.listeLigne:nth-child(even)
{
	background-color: var(--light-color);
}

.listeImage
{
	height: 100px;
	width: 200px;
	background-color: var(--white-color);
	margin: 10px 0;
}

.listeImage img
{
	max-height: 100px;
}

.listeDesignation
{
	font-size: 1.2em;
	font-family: 'opensans_bold';
	/*color: var(--main-color2);*/
	display: block;
	text-decoration: none;
}

.listeDesignation a
{
	text-decoration: none;
}

.listeInfos
{
	display: block;
}

.listePaiements .bouton,
.listeFactures .bouton
{
	height: auto;
	line-height: 36px;
	font-size: 1em;
	padding: 0 15px;
	white-space: nowrap;
}

.choixDate
{
	font-size: 1em;
	text-decoration: none !important;
	font-family: 'opensans_semibold', sans-serif;
}

.choixDate:before
{
	font-family: FontAwesome;
	content: "\f073";
	margin-right: 5px;
}

/* Recherche de paiement */
.recherchePaiement
{
	position: relative;
}

.recherchePaiement i.fa
{
	position: absolute;
	font-size: 24px;
	left: 10px;
	top: 10px;
	color: var(--dark-color);
}

.recherchePaiement input
{
	padding-left: 35px;
}

/* Detail paiement */
.detailPaiement
{
	padding-top: 10px;
}

.etatPaiement
{
	font-family: 'opensans_bold';
	font-size: 1.6em;
	color: var(--dark-color);
}

/* SEPA */
.etatSepa
{
	font-family: 'opensans_bold';
	font-size: 1.6em;
	color: var(--dark-color);
}

.uploadKbis
{
	background-color: var(--white-color);
	padding: 10px;
	border-radius: 5px;
	border: solid 2px var(--light-color);
}

.uploadKbis input
{
	margin: 0;
	padding: 1px;
}

.paymentShowLogo
{
	text-align: center;
}

.paymentShowLogo img
{
	max-width: 300px;
}

/* Boutons */
button
{
	cursor: pointer;
}

.bouton
{
	font-family: 'opensans_semibold', sans-serif;
	text-decoration: none !important;
	cursor: pointer;
	text-align: center;
	border: none;
	box-sizing: border-box;
	/*height: 50px;*/
	line-height: 40px;
	font-size: 1.2em;
	border-radius: 10px;
	padding: 0 30px;
	margin-top: 15px;
	display: inline-block;
	transition: all 0.2s ease-in-out;
	background-color: var(--white-color);
	color: var(--main-color1);
	border: solid 2px var(--main-color1);
	outline: none;
}
#pay-button {
	width: 100%;
	margin-top: 0;
	line-height: 50px;
    font-size: 1.4em;
}
#pay-button:after {
	font-family: "FontAwesome";
	content:"\f105";
	margin-left: 2px;
	transition: all 0.2s ease-in-out;
}
#pay-button:hover:after {
	margin-left: 12px;
}

.bouton:hover, .bouton.hovered
{
	cursor: pointer;
	color: var(--white-color);
	background-color: var(--main-color1);
	border: solid 2px var(--main-color1);
	outline: none;
}

.boutonValidation
{
	background-color: var(--main-color2);
	color: var(--white-color) !important;
	border: none;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.20);
	/*line-height: 60px;*/
}

.boutonValidation.boutonDisabled, .boutonValidation.boutonDisabled:hover
{
	background-color: gray;
}

.boutonValidation:hover
{
	background-color: var(--main-color3);
	border: none;
}

.boutonSuppression
{
	background-color: var(--red-color);
	color: var(--white-color) !important;
	border: none;
}

.boutonSuppression:hover
{
	background-color: var(--red-color);
	border: none;
	filter: saturate(2);
	box-shadow: 0 0 15px -5px var(--red-color);
}

.boutonRetour:before
{
	content: "\f100";
	font-family: FontAwesome;
	margin-right: 10px;
}

.boutonPDF:before
{
	content: "\f1c1";
	font-family: FontAwesome;
	margin-right: 10px;
}

.boutonInactif,
.boutonInactif:hover
{
	cursor: not-allowed !important;
	color: var(--white-color) !important;
	background-color: var(--dark-color) !important;
	border: solid 2px var(--dark-color) !important;
	opacity: 0.5;
}

/* Liens */
.lienAction
{
	font-size: 1.4em;
	color: var(--main-color1);
	font-family: 'opensans_semibold', sans-serif;
	text-decoration: underline;
	display: block;
	text-align: center;
	transition: all 0.2s ease-in-out;
}

.lienAction:hover
{
	color: var(--main-color3);
}

/* Messages */
.message
{
	margin: 15px;
}

.messageForm
{
	margin: 15px 0 30px 0;
	padding: 15px;
	background-color: var(--light-color2);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
}

.messageForm div
{
	/*border: solid 1px var(--white-color);*/
	color: var(--main-color1);
	padding: 0;
	font-size: 1em;
	font-family: 'opensans_regular', sans-serif;
	text-align: center;
}

.messageForm div span
{
	font-size: 2em;
	font-family: 'opensans_bold';
	display: inline-block;
	vertical-align: middle;
}

.messageForm.messageValide
{
	background-color: var(--green-color);
}

.messageForm.messageValide div
{
	color: var(--white-color);
}

.messageForm.messageValide div:before
{
	content: "\f058";
}

.messageForm.messageAttention
{
	background-color: var(--orange-color);
}

.messageForm.messageAttention div
{
	color: var(--white-color);
}

.messageForm.messageAttention div:before
{
	content: "\f071";
}

.messageForm.messageErreur
{
	background-color: var(--red-color);
}

.messageForm.messageErreur div
{
	color: var(--white-color);
}

.messageForm.messageErreur div:before
{
	content: "\f057";
}

.messageForm.messageLong
{
	background-color: var(--light-color);
}

.messageForm.messageLong div
{
	color: var(--main-color1);
	text-align: center;
	font-size: 1em;
	font-family: 'opensans_regular';
}

.messageForm.messageValide div:before,
.messageForm.messageAttention div:before,
.messageForm.messageErreur div:before
{
	font-family: FontAwesome;
	margin-right: 10px;
	font-size: 2em;
	vertical-align: middle;
}

.messageForm .bouton
{
	height: 40px;
	line-height: 36px;
	font-size: 1em;
	padding: 0 15px;
}

.messageForm.callout
{
	border: none;
	margin-top: 0;
}

.messageForm.callout.avecBouton > div
{
	display: flex;
}

.messageForm.callout > div
{
	flex-flow: column;
	justify-content: space-between;
	align-items: center;
}

.messageForm.callout[data-closable] > div
{
	justify-content: left;
}

.messageForm ul li {
	list-style-position: inside;
}

.messageForm.callout .bouton
{
	white-space: nowrap;
	margin-left: 2em;
	background-color: var(--main-color1);
	color: var(--white-color);
	border: solid 2px var(--main-color1);
	margin-top: 0;
}

.messageForm.callout .close-button
{
	color: inherit;
	font-size: 1em;
}

/* Divers */
.separateur
{
	color: var(--light-color);
	background: var(--light-color);
	border-color: var(--light-color);
	margin: 30px 0;
}

.backOffice .blocInfos .separateur
{
	color: var(--white-color);
	background-color: var(--white-color);
	border-color: var(--white-color);
}

/*** PAGE CHOIX MODE REGLEMENT ***/
.pageChoixModeReglement .liste
{
	border-top: none;
}

/* Ajout mode de reglement */
.ajoutModeReglement
{
	margin-top: 15px;
	border: dashed 2px var(--light-color);
	color: var(--main-color1);
	padding: 10px 20px;
	font-family: 'opensans_semibold', sans-serif;
	font-size: 1.5em;
	display: block;
	text-decoration: none !important;
	transition: all 0.2s ease-in-out;
}

.ajoutModeReglement:hover
{
	color: var(--main-color3);
	border-color: var(--main-color3);
}

.ajoutModeReglement:before
{
	content: "\f0fe";
	font-family: FontAwesome;
	font-size: 42px;
	margin-right: 10px;
	vertical-align: middle;
}

.etatModePaiement
{
	font-family: 'opensans_bold';
	font-size: 1.6em;
	margin-bottom: 10px;
}

.desactivationMode
{
	padding: 10px;
	color: var(--dark-color);
	background: var(--light-color);
}

/*** STARTBOARD/DASHBOARD ***/

/* Avancement */
.blocAvancement
{
	background-color: var(--white-color);
	text-align: center;
	padding: 15px;
}

.avancementTitre
{
	color: var(--dark-color);
	font-size: 1.2em;
	font-family: 'opensans_semibold', sans-serif;
	margin-bottom: 30px;
}

.avancementBarre
{
	border-left: solid 2px var(--green-color);
	/*border-right: solid 2px var(--light-color);*/
	height: 34px;
}

.avancementEtape
{
	text-align: right;
	font-size: 16px;
	font-family: 'opensans_semibold', sans-serif;
	height: 34px;
	padding: 5px 0 !important;
	border-right: solid 2px var(--light-color);
}

.avancementEtape div
{
	height: 24px;
	line-height: 24px;
	background-color: var(--light-color);
}

.avancementEtape.actif
{
	border-right: solid 2px var(--green-color);
}

.avancementEtape.actif div
{
	color: var(--white-color);
	background-color: var(--green-color);
}

/* Starboard */
.startBoard .blocTitre.titrePrincipal
{
	margin-bottom: 30px;
}

.startBoard .blocPrincipal
{
	background: transparent;
	padding: 0 .9375rem;
	margin-bottom: 30px;
}

.etapeStartboard
{
	background-color: var(--white-color);
	border: solid 2px var(--white-color);
	padding: 15px;
	margin-top: 15px;
	margin-bottom: 15px;
}

.etapeNumero
{
	display: block;
	width: 30px;
	height: 30px;
	line-height: 30px;
	font-size: 18px;
	vertical-align: middle;
	text-align: center;
	border-radius: 50%;
	font-family: 'opensans_bold';
	color: var(--white-color);
	background-color: var(--main-color1);
}

.etapeTitre
{
	font-size: 1em;
	font-family: 'opensans_bold';
	margin: 0 10px;
}

.etapeTexte
{
	color: var(--dark-color);
	margin-top: 15px;
}

.etapeBouton
{
	align-self: flex-end;
}

.etapeBouton .bouton
{
	width: 100%;
}

.etapeStartboard.actif
{
	border: solid 2px var(--green-color);
}

.etapeStartboard.actif .etapeEtat:before
{
	content: "\f00c";
	font-family: FontAwesome;
	font-size: 18px;
	color: var(--green-color1);
}

.etapeStartboard.actif .etapeNumero
{
	background-color: var(--green-color);
}

.etapeStartboard.inactif
{
	filter: grayscale(1);
	opacity: 0.5;
}

.etapeStartboard.inactif .etapeNumero
{
	background-color: var(--dark-color) !important;
}

.etapeStartboard.inactif .etapeTitre
{
	color: var(--dark-color) !important;
}

.etapeStartboard.inactif .etapeNumero
{
	background-color: var(--dark-color) !important;
}

/* Dashboard */
.dashBoard .blocTitre.titrePrincipal
{
	margin-bottom: 30px;
}

.dashBoard .blocPrincipal
{
	background: transparent;
	padding: 0 .9375rem;
	margin-bottom: 30px;
}

.dashboardBloc
{
	background-color: var(--white-color);
	border: solid 2px var(--white-color);
	padding: 15px;
	margin-top: 15px;
	margin-bottom: 15px;
}

.dashboardTitre
{
	font-size: 1em;
	font-family: 'opensans_bold';
	margin-bottom: 15px;
	color: var(--main-color3);
}

.dashboardBouton
{
	align-self: flex-end;
}

.dashboardBouton .bouton
{
	width: 100%;
}

.dashboardMenu ul
{
	margin: 0 0 0 5px;
}

.dashboardMenu ul li
{
	list-style: none;
	margin-bottom: 10px;
}

.dashboardMenu ul li:before
{
	content: "\f105";
	font-family: FontAwesome;
	margin-right: 10px;
}

.dashboardMenu ul li a
{
	text-decoration: none;
}

/*** FOOTER ***/
footer
{
	background-color: var(--main-color3);
	min-height: 40px;
	font-size: 0.9em !important;
	position: fixed;
	bottom: 0;
	width: 100%;
}

.footerMenu
{
	padding-left: 0;
	padding-right: 0;
}

.footerMenu ul li
{
	align-self: center;
}

.footerMenu a
{
	color: var(--white-color);
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}

.footerMenu a:hover
{
	text-decoration: none;
	opacity: 0.75;
}

.footerMenuSep
{
	padding: .7rem 0rem;
	line-height: 1;
	text-decoration: none;
	display: block;
	color: var(--light-color2);
}

.footerCopyright
{
	padding: .7rem 0.5rem;
	color: var(--light-color2);
}

.footerCopyright a
{
	color: var(--white-color);
}

.footerCopyright a:hover
{
	text-decoration: none;
	opacity: 0.75;
}

/*** FRONT PAGE ***/
body.frontPage
{
	background-color: var(--white-color);
}

body.frontPage .blocInfos
{
	background-color: var(--light-color);
	padding: 20px 30px;
}

/* Fiche entreprise */
.entrepriseLogo
{
	margin-bottom: 10px;
}

.entrepriseLogo img
{
	max-width: 100%;
	max-height: 150px;
}

.entrepriseCoordo
{
	margin: 15px 0;
}

.entrepriseNom
{
	font-family: 'opensans_bold';
	margin-bottom: 10px;
}

.entrepriseDescription
{
	background-color: var(--light-color);
	margin-right: .9375rem;
	margin-left: .9375rem;
	margin-top: 10px;
	padding: 15px;
}

.entrepriseSlogan
{
	margin-bottom: 10px;
	font-size: 1.2em;
	font-family: 'opensans_semibold', sans-serif;
	color: var(--main-color3);
}

.entrepriseAdresse
{
	font-size: 1.2em;
}

.codeEntreprise
{
	font-size: 2em;
	color: var(--dark-color);
	font-family: 'opensans_semibold', sans-serif;
	display: inline-block;
	border: solid 1px var(--dark-color);
	border-radius: 10px;
	padding: 0 10px;
	background: var(--white-color);
	cursor: pointer;
}

.codeEntreprise:hover
{
	background: var(--light-color);
}

.ficheEntreprise .separateur
{
	margin: 15px 0;
}

.ficheEntreprise.miniVersion
{
	font-size: 1em;
}

.entrepriseBouton
{
	padding: 15px;
}

.entrepriseBouton .bouton
{
	margin: 0 !important;
	width: 100%;
}

/*** PAGE 404 ***/

body.page404
{
	height: 100%;
	background: url(../img/bandeau-homme.png) 0% 100% no-repeat, url(../img/BANDEAU_FOND_PLANTE.jpg) 100% 100% no-repeat;
	background-size: auto, cover;
}

body.page404 .row.content
{
	min-height: 480px;
	align-items: center;
}

body.page404 .blocPrincipal
{
	background: transparent;
}

body.page404 .blocTitre
{

}

body.page404 .blocContenu .message
{
	max-width: 300px;
	text-align: center;
	margin: auto;
	font-size: 1.2em;
	color: var(--main-color1);
}

/*** RECHERCHE HEADER MOBILE ***/
nav.header.showSearch .headerLogo
{
	display: none;
}

nav.header.showSearch #search-form
{
	display: flex !important;
}

nav.header.showSearch #large-toggle-search-bar
{
	display: none;
}

nav.header.showSearch .headerBaseline
{
	display: none;
}

/*** NAVIGATION ***/
#search_bar_results
{
	position: absolute;
	top: 47px;
	width: 100%;
	background: var(--white-color);
	border-top: solid 1px var(--light-color);
	border-bottom: solid 1px var(--light-color);
	border-radius: 0 0 5px 5px;
	overflow: hidden;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}

#search_bar_results ul
{
	margin-left: 0;
	margin-bottom: 0;
}

#search_bar_results li.searchItem
{
	text-align: left;
	list-style: none;
	font-size: 1em;
	padding: 0;
	border-top: solid 1px var(--light-color);
	background-color: var(--white-color);
	transition: all 0.2s ease-in-out;
}

#search_bar_results li.searchItem:hover, #search_bar_results li.searchItem.focused
{
	background-color: var(--light-color);
}

#search_bar_results li.searchItem a
{
	padding: 10px 15px;
	line-height: 20px;
	display: block;
	color: var(--main-color3);
	transition: all 0.2s ease-in-out;
}

#search_bar_results li.searchItem:hover a, #search_bar_results li.searchItem.focused a
{
	color: var(--main-color1);
}

/* Assistant */
.assistantEtapeNumero
{
	width: 2em;
	height: 2em;
	background-color: var(--main-color1);
	color: var(--white-color);
	display: inline-flex;
	justify-content: center;
	align-items: center;
	border-radius: 0.5em;
}

.assistantProgression
{
	height: 1em;
	padding: 0;
}

.assistantProgressionActive
{
	background-color: var(--main-color2);
	height: 100%;
}

.assistantBloc
{
	padding-top: 2em;
	padding-bottom: 2em;
	border: 2px solid var(--light-color);
}

.assistantTitre
{
	text-align: center;
	font-family: 'opensans_semibold';
	color: var(--main-color3);
	font-size: 1.5em;
}

.assistantListItem
{
	background-color: var(--light-color);
	padding: 1em;
	margin: 2em 0;
}

.assistantListItem > .column {
	padding: 10px !important;
}

.assistantListItem > .column a,
.assistantListItem > .column span {
	height: 100%;
	padding: 15px;
	border-radius: 10px;
	background-color: var(--white-color);
	border: solid 2px var(--white-color);
	transition: all 0.2s ease-in-out;
}

.assistantListItem > .column img {
	align-self: center;
}
.assistantListItem > .column a:hover {
	border: solid 2px var(--green-color);
}
.assistantListItem > .column.shrink {
	align-self: flex-end;
}
.assistantListPlusMoins {
	font-size: 1.2em;
	font-family: 'opensans_semibold', sans-serif;
	padding: 0 15px;
}
.assistantListPlusMoins i.fa {
	margin-right: 5px;
}

.assistantHeaderTodoList {
	display: none;
}

.assistantTodoListProgression
{
	height: 1em;
	background-color: var(--light-color2);
	margin-bottom: 1em;
}

.assistantTodoListTitreImportant
{
	background-color: var(--red-color);
	padding: 0.5em;
	color: black;
	font-size: 1.5em;
	display: none;
}
/*
.assistantTodoListItem:before
{
	content: ' ';
	display: block;
	width: 1em;
	height: 4em;
	margin-right: 1em;
}

.assistantTodoListItem.required:before
{
	background: var(--red-color);
}
*/
.assistantTodoList  {
	border-top: solid 1px var(--light-color);
	border-bottom: solid 1px var(--light-color);
}
.assistantTodoListItem  {
	height: 60px;
	border-top: solid 1px var(--light-color);
	border-bottom: solid 1px var(--light-color);
}

.assistantTodoListItem a
{
	text-decoration: none;
}

.assistantTodoListItem.active
{
	background-color: var(--light-color);
}

.assistantTodoListItem.active .assistantTodoListItemIcon
{
	background-color: var(--green-color);
	border: 2px solid var(--green-color);
	color: white;
}

.assistantTodoListItemIcon
{
	height: 30px;
	width: 30px;
	border: 2px solid var(--light-color);
	color: var(--light-color);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* TINY MCE */
.tox-statusbar__branding
{
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
}

@media screen and (max-width: 63.9375em)
{
	.headerMenu
	{
		position: fixed;
		right: 0;
		width: 300px;
		top: 100px;
		background: var(--main-color1);
		height: 100%;
	}
	
	.headerMenu ul
	{
		display: flex;
		flex-flow: column;
	}
}

/* Small only : AFFICHAGE SUR MOBILE UNIQUEMENT */
@media screen and (max-width: 39.9375em)
{
	.header
	{
		height: 70px;
	}
	
	.headerLogo img
	{
		max-height: 50px;
	}
	
	.headerMenu
	{
		top: 70px;
	}
	
	.content
	{
		padding: 0;
	}
	
	.blocPrincipal
	{
		padding: 15px;
	}
	
	body.frontPage .blocInfos,
	.blocInfos
	{
		padding: 30px 15px 0 15px;
	}
	
	.entrepriseLogo img
	{
		max-height: auto;
	}
	
	.entrepriseBouton
	{
		position: sticky;
		bottom: 0;
		background-color: var(--white-color);
	}
	
	.bouton
	{
		width: 100%;
		font-size: 1.3em;
		padding: 0 15px;
	}
	
	.lienAction
	{
		font-family: 'opensans_semibold', sans-serif;
		height: 60px;
		line-height: 60px;
		font-size: 1.3em;
		border-radius: 10px;
		padding: 0 30px;
		margin-bottom: 15px;
		text-decoration: none !important;
		width: 100%;
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.20);
		background-color: var(--white-color);
		color: var(--main-color1) !important;
		border: solid 2px var(--main-color1);
	}

	.choixDate {
		margin-top: 5px;
    	display: block;
	}
	.choixDate:before {
		display: none;
	}
	.choixDate .formChamp.champDate {
	    width: 100%;
	    margin-top: 5px;
	}
	.choixDate .spacer {
		height: 15px;
	    display: block;
	}
	
	.switchBox
	{
		width: 100%;
	}
	
	.etapeStartboard,
	.dashboardBloc
	{
		margin-bottom: 0;
	}
	
	.footerMenu
	{
		padding: .7rem 0.5rem;
	}
	
	.footerCopyright
	{
		border-top: solid 1px var(--white-color);
	}
	
	footer
	{
		position: relative;
	}
	
	body
	{
		padding-bottom: 0px;
	}
}

/* Medium and up : AFFICHAGE SUR MOBILE ET TABLETTE */
@media screen and (max-width: 63.9375em)
{
	
	.messageForm.messageValide div:before,
	.messageForm.messageAttention div:before,
	.messageForm.messageErreur div:before
	{
		/*float: left;*/
	}
	
	.blocTitre.titrePrincipal
	{
		margin-top: 15px;
		margin-bottom: 0px;
	}
	
	body.page404
	{
		background: url(../img/BANDEAU_FOND_PLANTE.jpg) 0% 100% no-repeat;
		background-size: cover;
	}
	
	.headerMenu hr
	{
		color: var(--light-color);
		background: var(--light-color);
		border-color: var(--light-color);
		margin: 15px 0;
	}
	
	.headerMenu button
	{
		color: var(--white-color);
		background-color: var(--red-color);
		padding: 10px;
		border-radius: 5px;
		width: 100%;
		font-family: 'opensans_semibold', sans-serif;
	}
	
	.headerMenu button:before
	{
		content: "\f00d";
		font-family: FontAwesome;
		margin-right: 5px;
		font-size: 1.1em;
		color: var(--white-color);
	}
	
}

/* Medium and up : AFFICHAGE SUR TABLETTE ET + */
@media screen and (min-width: 40em)
{
	.ficheEntreprise
	{
		padding: 10px;
		border: solid 2px var(--light-color);
	}
	
	.ficheEntreprise.miniVersion
	{
		margin-right: .9375rem !important;
	}
}

/* Medium only : AFFICHAGE SUR TABLETTE UNIQUEMENT */
@media screen and (min-width: 40em) and (max-width: 63.9375em)
{
	.content
	{
		padding: 30px 0;
	}
	
	body.frontPage .blocInfos,
	.blocInfos
	{
		padding: 30px;
	}
	
	body
	{
		padding-bottom: 80px;
	}
	
	body.page404 .row.content
	{
		min-height: 780px;
	}
}

/* Large and up : AFFICHAGE SUR BUREAU */
@media screen and (min-width: 64em)
{
	nav.header.showSearch .headerLogo
	{
		display: block;
	}
	
	body.frontPage .blocPrincipal
	{
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		padding-left: .9375rem;
		padding-right: .9375rem;
	}
	
	body.page404 .row.content
	{
		min-height: 600px;
		height: 80%;
	}
	
	.dashboardBloc
	{
		margin-bottom: 15px !important;
	}
	
	.etapeStartboard
	{
		height: 100%;
	}
	
	.dropdownMenu
	{
		border-radius: 5px 0 5px 5px;
		border: none;
		box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
		left: auto !important;
		right: 15px !important;
		white-space: nowrap;
		display: none;
		width: 250px;
	}
	
	.dropdownMenu.menu
	{
		font-size: 1rem;
		padding: 1em;
	}
	
	.dropdownMenu .menu li a, .dropdownMenu.menu li a
	{
		padding: 8px 5px;
		color: var(--main-color1);
		font-size: 0.9em;
	}
	
	.dropdownMenu .menu li a:hover, .dropdownMenu.menu li a:hover
	{
		color: var(--main-color3);
	}
	
	.headerMenu ul li ul li a:hover
	{
		opacity: 1;
	}
	
	.messageForm.callout
	{
		margin-top: -20px;
	}
	
	.messageForm.callout > div
	{
		flex-flow: row;
	}
	
	/*.bordureDroite
	{
		border-right: 2px solid var(--light-color);
		padding-right: 2em;
	}
	
	.bordureGauche
	{
		border-left: 2px solid var(--light-color);
		padding-left: 2em;
	}*/
}

/* Large only */
@media screen and (min-width: 64em) and (max-width: 74.9375em)
{
}