.form-btns { display: flex; justify-content: flex-start; flex-direction:row-reverse; margin-bottom: 4rem; margin-top: 3rem; }
.form-btns .button {  margin-left: 1rem; }

.mandatory-label {
	color: #4a4a4a;
	color: var(--darkgrey-color);
}
.mandatory-label + .blockCartridge {
	margin-top: .5rem;
}

/* style transverse des champs de formulaire */
label:hover:before { border:none !important; }
/* champ texte */
input.textField { 
	background: #fff; 
	border:1px solid rgba(23, 71, 158, 0.65); 
	color: #000;
	height:50px;
	padding: 5px 15px;
	font-size: 1.4rem;
	font-family: LatoRegular, Arial, sans-serif;
	font-family: var(--text-font);
}
input.textField:focus { 
	outline: 3px double var(--primary-blue-color);
}
input.textField::placeholder { 
	font-style: italic;
	color: #4a4a4a; /* pour IE */
    color: var(--darkgrey-color);
}
/* pour que ça fonctionne sur IE, l'appel doit être fait isolé de l'appel standard */
input.textField:-ms-input-placeholder { 
	font-style: italic;
	color: #4a4a4a; /* pour IE */
    color: var(--darkgrey-color);
}
input[type=text].textField::-ms-clear { display: none; }

input.textField:disabled { 
	opacity:.7;
}
/* liste déroulante */
select {
    height:50px; padding: 5px 20px;
    border: 1px solid rgba(23, 71, 158, 0.65); 
    background: #fff; 
}
/* champ avec datepicker */
.field-datepicker {
	position: relative; display:inline-block; background-color: #fff;
}
.field-datepicker input {
	padding-right: 4.5rem; background: transparent;
	position: relative; z-index: 1;
}
.field-datepicker a.dp-choose-date {
    background: none; /* surcharge ancienne charte */
    position: absolute; z-index:2;
    top:1px; left:auto; right:1px; bottom:1px;
    height: 95%; width: 4rem; opacity:1; /* pour voir s'afficher le focus */
}
.field-datepicker a.dp-choose-date:focus,
.field-datepicker a.dp-choose-date:active {
	outline: 3px double var(--primary-blue-color);
}
.field-datepicker i {
    position: absolute; z-index:0;
    top:1.3rem; right:1rem;
    font-size: 2.4rem;
}
.field-datepicker input:disabled + i {
    opacity:.7;
}

/* champ en erreur + liste déroulante custom */
.textField[class*="--field-error"], .btn_starter[class*="--field-error"] { 
	border-color: #d0141b !important;
	border-color: var(--error-color) !important;
}

.label-group {
    font-size: 1.6rem;
    /*font-weight: bold; -> ça fait sur-bold sur FF si on le laisse */
    font-family: LatoBold, Arial, sans-serif !important; /* pour IE */
	font-family: var(--text-bold-font) !important; /* !important pour passer par dessus celui de default.css :( */
    margin: 1rem 0 0;
}

/*****************************************************************************************************/
/* ************ LES BOUTONS RADIO NOUVELLE CHARTE STYLE COMMUN A TOUS LES RADIOS		************ */
/*****************************************************************************************************/
/* bouton radio custom simple
structure HTML type à implémenter :
<span class="radio-custom-group">
    <html:input type="radio" value="" name="" cssclass="hidden-radio" id="IDduBOUTON" /> 
    <label class="radio-label" for="IDduBOUTON">
        <span>Libelle du bouton</span>
    </label>
</span>
*/
[class^="radio-custom-"], [class*=" radio-custom-"] {
	position: relative; display: inline-block; /* > sinon FF bug */
}
[class^="radio-custom-"] input[type='radio'].hidden-radio, 
[class*=" radio-custom-"] input[type='radio'].hidden-radio {  opacity:0;  position:absolute; }
[class^="radio-custom-"] .radio-label:before,
[class*=" radio-custom-"] .radio-label:before {
    content: "";
    font-family: 'icons2020';
    font-size: 2.4rem;
    vertical-align: middle;
    margin-right: .8rem;
    position: absolute; left: 0; top: -2px;
    line-height: 2.4rem;
}
[class^="radio-custom-"] .radio-label,
[class*=" radio-custom-"] .radio-label {
	font-size: 1.4rem;
	padding-left: 30px;
	color: #4a4a4a;
	color: var(--darkgrey-color);
	cursor: pointer;
}
[class^="radio-custom-"] .hidden-radio + .radio-label,
[class*=" radio-custom-"] .hidden-radio + .radio-label {
	color: #4a4a4a;
	color: var(--darkgrey-color);
}
[class^="radio-custom-"] .hidden-radio:checked + .radio-label,
[class*=" radio-custom-"] .hidden-radio:checked + .radio-label {
	color: #17479e;
	color: var(--primary-blue-color);
}
[class^="radio-custom-"] .hidden-radio:checked + .radio-label:before,
[class*=" radio-custom-"] .hidden-radio:checked + .radio-label:before {
	content: "\e95d";
	color: #17479e;
	color: var(--primary-blue-color);
}
[class^="radio-custom-"] .hidden-radio + .radio-label:before,
[class*=" radio-custom-"] .hidden-radio + .radio-label:before {
	content: "\e95c";
	color: #4a4a4a;
	color: var(--darkgrey-color);
}
[class^="radio-custom-"] .hidden-radio:disabled + .radio-label,
[class*=" radio-custom-"] .hidden-radio:disabled + .radio-label {
	opacity:.7;
	cursor: not-allowed;
}

/* hack pour IE 10 < */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	[class^="radio-custom-"] label.radio-label, 
	[class*=" radio-custom-"] label.radio-label { padding-left: 0; }
	[class^="radio-custom-"] .radio-label:before,
	[class*=" radio-custom-"] .radio-label:before {
	    position: static; padding-right:5px; vertical-align: -5px;
	}
}

/* bouton radio STRIPE TEXT 
structure HTML type à implémenter :
<span class="radio-custom-stripe">
    <html:input type="radio" value="" name="" cssclass="hidden-radio" id="IDduBOUTON" /> 
    <label class="radio-label" for="IDduBOUTON">
        <span>Libelle du bouton</span>
    </label>
</span>
*/
[class^="radio-custom-stripe"] .radio-label:before,
[class*=" radio-custom-stripe"] .radio-label:before {
    position: absolute; left: 1.5rem;
    top: 50%; margin-top: -1.2rem;
}
[class^="radio-custom-stripe"] label.radio-label,
[class*=" radio-custom-stripe"] label.radio-label {
	display:block; 
	border: 1px solid rgb(114, 114, 114);
	border: 1px solid var(--grey-color);
	border-radius: .4rem;
	min-height: 5rem; min-width: 14rem;
	padding: 1.5rem;
	padding-left: 5rem;
}
[class^="radio-custom-stripe"] .hidden-radio:checked + .radio-label,
[class*=" radio-custom-stripe"] .hidden-radio:checked + .radio-label,
[class^="radio-custom-stripe"] .radio-label:hover,
[class*=" radio-custom-stripe"] .radio-label:hover {
	border-color: #17479e !important;
	border-color: var(--primary-blue-color) !important;
}
[class^="radio-custom-stripe"] .hidden-radio:focus + .radio-label,
[class*=" radio-custom-stripe"] .hidden-radio:focus + .radio-label {
	border: 2px solid #17479e;
	border: 2px solid var(--primary-blue-color);
	margin-top: -.1rem;
	margin-left: -.1rem;
}
/* impossible à caler correctement
.radio-custom-stripe .hidden-radio:focus + .radio-label:before {
	border: 1px solid #17479e;
	border: 1px solid var(--primary-blue-color);
	border-radius: 50%;
}*/

/* bouton radio STRIPE IMAGE
structure HTML type à implémenter :
<span class="radio-custom-stripe">
    <html:input type="radio" value="" name="" cssclass="hidden-radio" id="IDduBOUTON" />
    <label class="radio-label" for="IDduBOUTON">
        <span>Libelle du bouton</span>
        <span class="img-stripe">
        	<img src="<bad:resource cible="IHS" type="image" file="[chemin image]"/>" alt="[description image]" />
        </span>
    </label>
</span>
*/

.radio-custom-stripe-img .img-stripe { display:block; margin-top: 1rem; }
.radio-custom-stripe-img .radio-label:before {
    top: 2.6rem;
}

/* bouton radio STRIPE DATA
structure HTML type à implémenter :
<span class="radio-custom-stripe-data">
    <html:input type="radio" value="" name="" cssclass="hidden-radio" id="IDduBOUTON" />
    <label class="radio-label" for="IDduBOUTON">
        <span class="radio-label-head">Libelle principal</span>
		<span class="radio-label-content">texte descriptif</span>
		<span class="radio-label-footer">
			<i aria-hidden="true" class="icon-ic_products_domains_insurance_shield"></i>
			<strong>bas du stripe</strong>
		</span>
    </label>
</span>
*/
[class^="radio-custom-stripe-data"] label.radio-label,
[class*=" radio-custom-stripe-data"] label.radio-label {
	height: 100%;
	display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.radio-custom-stripe-data .radio-label:before {
    top: 2.6rem;
}
.radio-custom-stripe-data .radio-label > span {
	display: block;
}

.radio-custom-stripe-data .radio-label > .radio-label-head,
.radio-custom-stripe-data .radio-label > .radio-label-footer {
	font-size: 1.6rem;
}
.radio-custom-stripe-data .radio-label > .radio-label-content {
	color: #4a4a4a;
	color: var(--darkgrey-color);
	margin: 1rem 0;
	margin-left: -3.3rem;
	flex: 1;
}
.radio-custom-stripe-data .radio-label > .radio-label-footer {
	display: flex;
	justify-content: space-between;
	margin-left: -3.3rem;
	color: #17479e;
	color: var(--primary-blue-color);
}
.radio-custom-stripe-data .radio-label > .radio-label-footer i {
	font-size: 2.4rem;
}

.radio-custom-stripe-list li + li {
	margin-top:1rem;
}

.radio-custom-stripe-list.listeChoixCCP {
	display: inline-flex;
    flex-direction: column;
}
.radio-custom-stripe-list.listeChoixCCP li .radio-custom-stripe {
	display: block;
}

/*****************************************************************************************************/
/* ********************************** LES CHECKBOX NOUVELLE CHARTE ********************************* */
/*****************************************************************************************************/
/* bouton radio custom simple
structure HTML type à implémenter :
<span class="check-custom-group">
    <html:input type="checkbox" value="" name="" cssclass="hidden-check" id="IDduBOUTON" />
    <label class="check-label" for="IDduBOUTON">
        <span>Libelle du bouton</span>
    </label>
</span>

ATTENTION, PARTICULARITE Q4M : sur certaines checkbox, ADMC génère juste derrière la checkbox un input hidden qui casse notre affichage. 
Pour palier ce problème, on rajoute ici la particularité observée donc NE PAS SUPPRIMER !!!
*/
[class^="check-custom-"], [class*=" check-custom-"] {
	position: relative; display: inline-block; /* > sinon FF bug */
}
[class^="check-custom-"] input[type='checkbox'].hidden-check,
[class*=" check-custom-"] input[type='checkbox'].hidden-check {  opacity:0;  position:absolute; }
[class^="check-custom-"] .check-label:before,
[class*=" check-custom-"] .check-label:before {
    content: "";
    font-family: 'icons2020';
    font-size: 2.4rem;
    vertical-align: middle;
    margin-right: .8rem;
    position: absolute; left: 0; top: -2px;
    line-height: 2.4rem;
}
[class^="check-custom-"] .check-label,
[class*=" check-custom-"] .check-label {
	font-size: 1.4rem;
	padding-left: 30px;
	color: #000;
	cursor:pointer;
	display: inline-block;
}

[class^="check-custom-"] .hidden-check + .check-label:before,
[class*=" check-custom-"] .hidden-check + .check-label:before,
[class^="check-custom-"] .hidden-check + input[type="hidden"] + .check-label:before,
[class*=" check-custom-"] .hidden-check + input[type="hidden"] + .check-label:before {
	content: "\e929";
	color: #4a4a4a;
	color: var(--darkgrey-color);
}
[class^="check-custom-"] .hidden-check:checked + .check-label:before,
[class*=" check-custom-"] .hidden-check:checked + .check-label:before,
[class^="check-custom-"] .hidden-check:checked + input[type="hidden"] + .check-label:before,
[class*=" check-custom-"] .hidden-check:checked + input[type="hidden"] + .check-label:before {
	content: "\e926";
	color: #17479e;
	color: var(--primary-blue-color);
}

[class^="check-custom-"] .check-label:hover:before,
[class*=" check-custom-"] .check-label:hover:before {
	color: #17479e;
	color: var(--primary-blue-color);
	font-weight: 600;
}
[class^="check-custom-"] .hidden-check:disabled + .check-label:before,
[class*=" check-custom-"] .hidden-check:disabled + .check-label:before,
[class^="check-custom-"] .hidden-check:disabled + input[type="hidden"] + .check-label:before,
[class*=" check-custom-"] .hidden-check:disabled + input[type="hidden"] + .check-label:before {
	content: "\e927";
	opacity:.5;
}
[class^="check-custom-"] .hidden-check:disabled + .check-label,
[class*=" check-custom-"] .hidden-check:disabled + .check-label,
[class^="check-custom-"] .hidden-check:disabled + input[type="hidden"] + .check-label,
[class*=" check-custom-"] .hidden-check:disabled + input[type="hidden"] + .check-label {
	opacity:.7;
	cursor: not-allowed; 
}

/* hack pour IE 10 < */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	[class^="check-custom-"] label.check-label,
	[class*=" check-custom-"] label.check-label { padding-left: 0; }
	[class^="check-custom-"] .check-label:before,
	[class*=" check-custom-"] .check-label:before {
	    position: static; padding-right:5px; vertical-align: -5px;
	}
}

/* formulaire de recherche d'opérations */
.recherche-2020 { min-height:380px; } /* hauteur minimale pour que le datepicker ne soit pas tronqué par le bas de la page */

.rib-form-block { margin: 4rem 0; }
.search-form-block {
	display: flex; justify-content: space-between; flex-wrap:wrap;
	margin: 4rem 0;
}
.search-form-btns {
	text-align: right;
	margin-bottom: 4rem;
}
/*
.search-btn { width: 18rem; }
.rib-btn { width: 11rem; }*/
#main .search-form-btns .search-btn { margin:0; }

.search-form-line-w-col { display: flex; justify-content: space-between; flex-wrap: wrap; }
.search-form-line, .search-form-col { width: 50%; }
.search-form-line { margin-bottom: 2rem; }
.search-form-line input[type=text], .search-form-line select, .search-form-line [class*="appendList-"] { width: 100%; }
.search-form-line:nth-child(odd), .search-form-col:nth-child(odd) { padding-right: 1rem; }
.search-form-line:nth-child(even), .search-form-col:nth-child(even) { padding-left: 1rem; }
.download-rib select { width: 370px; }

.search-form-line label, .select-list label, .select-list-access label, .form-line label {
	display: block;
	color: #4a4a4a;
	color: var(--darkgrey-color);
	margin: 0 0 .5rem;
	font-size: 1.2rem;
}
.search-form-line label.label-disabled {
	opacity:.7;
}

.error-message, .error-global-message, .recherche-2020 font, .error-global-list-message {
	margin: 1rem 0;
	font-size: 1.4rem;
	display: flex;
}
.error-message i, .recherche-2020 font:before {
	font-size: 2.2rem; margin-right: .5rem; margin-top: -.3rem;
}
.error-global-message i {
	font-size: 2.4rem; margin-right: 1rem; margin-top: -.6rem;
}
.error-global-list-message i {
	font-size: 2.4rem; margin-right: 1rem; margin-top: 0;
}
.error-global-list-message p {
	margin:0;
}
.error-global-list-message p .warning {
	color: #000;
}
.error-global-list-message p a {
	text-decoration: underline;
}
.error-global-list-message p a:hover, 
.error-global-list-message p a:active, 
.error-global-list-message p a:focus {
	text-decoration: none;
}

.search-form-line-w-col > .error-message, .search-form-line-w-col > font { min-width: 100%; }
.recherche-2020 > .error-global-message, .recherche-2020 > font { margin-top: 3rem; margin-bottom: 3rem; }
.recherche-2020 > font { 
	color:#000 !important; /* pour surcharger la couleur envoyée en dur dans le code */
	padding: 2rem 3rem 1.8rem;
	background-color: #fff;
	border: 1px solid rgb(229, 229, 229);
	box-shadow: 0 2px 4px 0 rgba(12, 43, 119, 0.15);
	border-radius: 4px;
}

.recherche-2020 font:before {
	content: "\e990";
	font-family: 'icons2020' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: #d0141b;
	color: var(--error-color);
}
.recherche-2020 > font:before {
	content: "\e98f"; font-size: 2.4rem; margin-right: 1rem; margin-top: -.6rem;
}

.error-global-message, .error-global-list-message {
	padding: 2rem 3rem 1.8rem;
}

    /* listes déroulantes natives */
    .dropdown-for-mobile {
		display: inline-block;
		width: auto;
		height: 50px;
		background: rgb(255, 255, 255);
		border: 1px solid rgba(23, 71, 158, 0.65);
		position: relative;
	}
	.dropdown-for-mobile > .sortSelectLabel {
		position: absolute; top:0; left:0; 
		width: 100%; height:100%;
		line-height: 50px; padding-left: 18px; padding-right:35px;
		white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
		text-align: left;
	}
	.dropdown-for-mobile > .sortSelectLabel:first-letter {
		text-transform: uppercase;
	}
	.dropdown-for-mobile > .sortSelectLabel.default {
		color: #4a4a4a;
	    color: var(--darkgrey-color);
	    font-style: italic; 
	}
	.dropdown-for-mobile.isDisabled {
		opacity:.7;
	}
	.dropdown-for-mobile.isFocused {
		outline: 3px double var(--primary-blue-color); border: none;
	}
	.dropdown-for-mobile > i {
		position: absolute; top:0; right:0;
		line-height: 50px; padding-right: 1rem; font-size: 2.4rem;
	}
	.dropdown-for-mobile.isOpen > i {
		transform: rotate(180deg); padding-left: 1rem;
	}
	.dropdown-for-mobile > select {
		display: block; border: none;
		width: 100%; height: 50px;
		opacity: 0;
	}

/* Pour TAB et DSK */
@media screen and (min-width: 767.5px) {
	.radio-custom-stripe-img .img-stripe { margin-left: -3.3rem; }
	.radio-custom-stripe-inline .radio-custom-stripe + .radio-custom-stripe { margin-left: 1rem; }
	.dateMobField { display:none; }
}
/* POUR MOBILE */
@media screen and (max-width: 767.5px) {
	.dateDskField { display:none; }
	.form-btns { display: block; }
	.form-btns .button {  margin-left: 0; } 
	.form-btns .button + .button {  margin-top: 1rem; } 
	
	.search-form-block { margin: 2rem 0 0; }
    .search-form-line, .search-form-col { width: 100%; margin-bottom: 3rem; }
    .search-form-line { margin-bottom: 3rem; }
    .search-form-col + .search-form-col { margin-top: 3rem; margin-bottom: 0; }
    body:not(.contentPopin) .search-form-line:nth-child(odd), .search-form-col:nth-child(odd),
	body:not(.contentPopin) .search-form-line:nth-child(even), .search-form-col:nth-child(even) {
		padding: 0;
	}
	.search-form-line-w-col { display: block; }
	.field-datepicker { display:block; }
    body:not(.contentPopin)  a.dp-choose-date, body:not(.contentPopin) #dp-popup { display: none; }
    .field-datepicker input { padding-right: 0; width:100%; }
    [class*="appendList-"] {
		width: 100%;
	}
	
	    /* listes déroulantes natives */
    .dropdown-for-mobile {
		width: 100%;
	}

	/* stripes */
	.radio-custom-stripe-img { display:block; }
	.radio-custom-stripe-img label.radio-label { padding-left: 1.5rem; }
	.radio-custom-stripe-img label.radio-label .label-stripe { padding-left: 3.5rem; }
	.radio-custom-stripe-img label.radio-label .img-stripe { text-align: center; }
	.radio-custom-stripe-inline,
	.radio-custom-stripe-inline .radio-custom-stripe { display:block; }
	.radio-custom-stripe-inline .radio-custom-stripe + .radio-custom-stripe { margin-top: 1rem; }

	/* JAUGE pour les montants */
	body:not(.contentPopin) #main .jauge-montant .button { width: 5rem; }
	#main .jauge-montant p.jauge-montant-nb { width: 14.5rem; }

	.dropdown-for-mobile.isFocused {
		outline: 3px double var(--primary-blue-color);
	}
	.dropdown-for-mobile + .select2 { display:none; }
}