:root {
	--bg-grey1: #f9f9f9;
	--bg-grey2: #63fd9a;
	--border-grey: #e3e3e3;
	--main-black: #1a171b;
	--main-blue: #173166;
	--main-grey: #837988;
	--bg-pink: #ffe4f6;
	--main-pink: #be0066;
	--err-pink: #f0c2e2;
	--blue2: #e6f0ff;
	--bg-blue: #e6f0ff;
	--second-blue: #173166;
	--second-pink: #FF8BFF;
	
	--bg-blue2: #e6f0ff;
	--white-tr: rgba(255, 255, 255, 0.6);
	--size-bigger: 32px;
	--size-big: 26px;
	--size-medium: 15px;
	--size-small: 13px;
	--size-smaller: 11px;
}

@font-face {
	font-family: Montserrat;
	src: url(../fonts/Montserrat-VariableFont_wght.ttf);
}

@font-face {
  font-family: MuseoSans300;
  src: url(../fonts/museosans-300.woff2);
}

body {
	font-family: MuseoSans300;
}

body {
	margin: 0;
	display: flex;
	flex-direction: column;
	background-color: var(--bg-grey1);
	min-height: 100vh;
	width: 100%;
}

.kc-login-content {
	padding: 40px 15px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

#franceconnect-text {
	text-align: center;
	margin-top: 7px;
	color: #837988;
	font-size: var(--size-smaller);
}

#franceconnect-link {
	text-align: center;
	margin: auto;
	text-decoration: none;
	color: #009cd1;
}

#franceconnect-link a {
	text-decoration: none;
	color: #009cd1;
	font-weight: bold;
}

a#social-franceconnect-particulier {
	background: url(../img/franceconnect-bouton.svg) no-repeat top;
	display: block;
	height: 56px;
	width: 209px;
	margin: 20px auto;
}

a#social-franceconnect-particulier:hover {
	background: url(../img/franceconnect-bouton-hover.svg) no-repeat top;
}

a#social-franceconnect-particulier > span {
	display: none;
}
a#social-moncompte-bzh{
	background: url(../img/big_connecteur_default.svg) no-repeat top;
	display: block;
	height: 56px;
	width: 209px;
	margin: 20px auto;
}

a#social-moncompte-bzh:hover {
	background: url(../img/big_connecteur_hover.svg) no-repeat top;
}

a#social-moncompte-bzh > span {
	display: none;
}

.kc-social-links {
	list-style-type: none;
}

.id-provider-login-separator {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	margin: 20px;
}

.id-provider-login-separator::after,
.id-provider-login-separator::before {
	content: "";
	flex: 1 1 auto;
	border-bottom: solid 1px;
}

.go-back {
	position: absolute;
	top: 20px;
	left: 16px;
	cursor: pointer;
}

.desktop {
	display: none;
}

.back-container {
	background-color: var(--bg-blue);
	background-position:
		left top,
		right 100px,
		center top;
	background-size:
		7% auto,
		9% auto,
		100% auto;
	background-repeat: no-repeat;
}

.login-pf-header {
	text-align: center;
	display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px;
    flex-direction: column;
}


#kc-page-title {
	font-size: var(--size-big);
	color: var(--second-blue);
	text-align: center;
	font-family: Montserrat;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	letter-spacing: -1.04px;
	margin: 20px 0;
}

#kc-page-title > span {
	color: var(--second-blue);
	font-family: Montserrat;
	font-size: 26px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	letter-spacing: -1.04px;
}

input {
	border-radius: 0px;
	border: 1px solid var(--main-blue);
	background-color: white;
	font-size: var(--size-medium);
	padding: 17px;
	flex: 1;
}

input[type="email"],
input[type="text"],
.pwd,
input[type="date"] {
	padding-left: 40px;
}

#username,
#email {
	background-image: url(../img/mail.svg);
	background-repeat: no-repeat;
	background-position-y: center;
	background-position-x: 10px;
}

.pwd,
input[type="password"] {
	background-image: url(../img/lock.svg);
	background-repeat: no-repeat;
	background-position-y: center;
	background-position-x: 10px;
}

.form-group {
	margin-bottom: 20px;
}

.form-group label {
	margin-bottom: 10px;
	font-size: var(--size-medium);
	color:  #173166;
	width: max-content;
    padding: 5px;
}

div.pf-c-options__wrapper {
	text-align: center;
	margin: 0 0 25px 0;
}

.login-pf-settings {
	justify-items: center;
}

.form-group-content {
	display: flex;
	flex-direction: column;
}

.form-group-content-2 {
	margin: 0 0 18px 0;
}

button {
	border: 0;
	cursor: pointer;
	padding: 17px 36px;
	font-size: var(--size-medium);
	border-radius: 45px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.pf-c-button-disabled {
	font-weight: 700;
	border: 3px solid transparent;
	border-radius: 45px;
	background-color: var(--bg-grey2);
	color: #173166;
}

.pf-c-button-primary {
	color: var(--main-blue);
	background-color: white;
	border: 3px solid ;
	border-color: #66ff99;
	border-radius: 45px;
	font-weight: 700;
}
.pf-c-button-disabled:hover {
    color: var(--main-blue);
    background-color: white;
    border: 3px solid;
    border-color: var(--bg-grey2);
    border-radius: 45px;
    font-weight: 700;
}

#kc-registration {
	text-align: center;
	box-sizing: border-box;
}

#kc-login-after-error {
	text-align: center;
	box-sizing: border-box;
}

#kc-backApp > a {
	text-align: center;
	box-sizing: border-box;
}

#kc-registration > a {
	text-decoration: none;
	padding: 17px 36px;
	font-size: var(--size-medium);
	border-radius: 45px;
	box-sizing: border-box;
	font-weight: 700;
	border: 3px solid var(--main-blue);
	display: block;
}

#kc-login-after-error > a {
	text-decoration: none;
	padding: 17px 36px;
	font-size: var(--size-medium);
	border-radius: 45px;
	box-sizing: border-box;
	font-weight: 700;
	border: 3px solid #66ff99;
	background: #66ff99;
	display: block;
}

#kc-login-after-error > a:hover {
	background: white;
}

#kc-backApp > a {
	text-decoration: none;
	padding: 17px 36px;
	font-size: var(--size-medium);
	border-radius: 45px;
	box-sizing: border-box;
	font-weight: 700;
	width: 50%;
	border: 3px solid var(--main-blue);
	display: block;
	margin-left: auto;
    margin-right: auto;
}

.pf-m-error {
	color: var(--main-pink);
	padding: 14px 12px 14px 20px;
	box-sizing: border-box;
	font-size: var(--size-small);
	font-weight: bold;
}

.footer {
	font-size: var(--size-smaller);
	text-align: justify;
	color: var(--main-grey);
	margin: 32px 20px 20px 20px;
}

.no-display {
	display: none !important;
}
.page3 h1 {
    font-size: 18px;
    color: #003366;
    margin-bottom: 10px;
}

.page3 p {
    font-size: 14px;
    color: #003366;
    margin-bottom: 20px;
}

.page3 .form-group {
    margin-bottom: 15px;
    text-align: left;
}
.pwd-hints {
	padding: 16px 12px 16px 14px;
	font-size: var(--size-smaller);
	background-color: white;
	border-radius: 20px;
	margin-top: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	color: var(--main-blue);
}

.pwd-hint {
	display: flex;
	align-items: center;
}

.pwd-hint-ko img.radio_checked {
	display: none;
}

.pwd-hint-ok img.radio_checked {
	padding-right: 10px;
	width: 17px;
}

.pwd-hint-ko img.radio_empty {
	padding-right: 10px;
}

.pwd-hint-ok img.radio_empty {
	display: none;
}

a {
	color: var(--main-blue);
}

input + div.form-error,
input + div.form-error + div.form-error,
input + span + div.form-error {
	display: none;
}

input.input-error + div.form-error,
input.input-error + div.form-error + div.form-error,
input.input-error + span + div.form-error {
	display: block;
}

* [aria-invalid="true"],
.input-error {
	border: 1px solid var(--err-pink) !important;
}

input[type="radio"] {
	display: none;
	height: unset;
	width: unset;
	border-color: var(--blue2);
}

.form-group label.inlbl {
	display: flex;
	align-items: center;
	padding: 12px 18px 12px 14px;
	border-radius: 45px;
	cursor: pointer;
	border: 1px var(--border-grey3) solid;
	margin-bottom: 0;
	background-color: white;
}

input[type="radio"] + label > span {
	content: url(../img/Radiobutton.svg);
	padding-right: 8px;
	float: left;
	border-color: var(--blue2);
}
.form-steps {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    list-style: none;
    width: 50%; /* Ajustez la largeur selon vos besoins */
    margin: 20px auto;
    padding: 0;
	width: 100%;
}

.form-steps::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: #ccc;
    z-index: 1;
}

.form-steps .step {
    position: relative;
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    
    border: 2px solid #ccc;
    
    font-size: 18px;
}
.form-steps .step.todo {
	background: #fff;
	border-color: #ccc;
    color: #333;
}
.form-steps .step.done {
    border-color: #003366; /* Couleur du cercle complété */
    background: #003366;
    color: #fff;
}

.form-steps .step.current {
    border-color: #66ff99; /* Couleur du cercle actuel */
    background: #66ff99;
    color: var(--main-blue);
}
input[type="radio"]:checked + label > span {
	content: url(../img/check-blue-green.svg);
	padding-right: 8px;
	width: 21px;
}

input[type="radio"]:checked + label {
	color: var(--main-blue);
	border-color: var(--blue2);
}

#kc-form-buttons {
	display: flex;
}

#kc-form-buttons-next {
	margin-top: 31px;
}

.gonext-disabled > svg {
	stroke: var(--main-blue);
}

.gonext > svg {
	stroke: var(--main-blue);
}

.leftarrow {
	padding-right: 9px;
	stroke: white;
}

.rightarrow {
	padding-left: 9px;
}

.pf-c-button-secondary {
	font-weight: 700;
	border-radius: 45px;
	color: white;
	background-color: var(--main-blue);
	border: 3px solid;
	border-color: var(--main-blue);
}
.pf-c-button-secondary a{
	font-weight: 700;
	color: white;
	text-decoration: none;
}


.pf-c-button-secondary:hover,
a.inline-button.pf-c-button-secondary.goprevious:hover{
	color: var(--main-blue);
	background-color: white;
	border: 3px solid;
	border-color: var(--main-blue);
	border-radius: 45px;
	font-weight: 700;
}
.pf-c-button-secondary:hover svg, 
a.inline-button.pf-c-button-secondary.goprevious:hover svg {
    stroke: var(--main-blue);
}
a#backLogin1, a#lostLogin {
    text-align: center;
	margin-top: 5px;
}
.check {
	width: 20px;
	height: 20px;
	min-width: 20px;
	min-height: 20px;
	margin-top: 6px;
}

.check + label {
	font-size: var(--size-small);
	font-weight: normal;
}

.footer.footer-reg {
	position: unset;
	margin: 0;
}

.instruction {
	font-size: var(--size-medium);
	margin: 0 44px 16px 43px;
	text-align: center;
	font-weight: 500;
	line-height: 20px;
}

.verify-email-instruction {
	text-align: center;
	font-size: var(--size-small);
	color: var(--main-grey);
}

.verify-email-instruction a {
	font-size: var(--size-medium);
	font-weight: 700;
	color: var(--main-blue);
	text-decoration: none;
}

.pwd-rst-info {
	margin: 10px 30px 48px 30px;
	text-align: center;
}

input.digit {
	text-align: center;
	width: 52px;
	max-width: 52px;
	border-radius: 10px;
	padding: 0;
	height: 72px;
	background-color: var(--bg-blue2);
	border: 0;
	margin: 0 3px;
	font-weight: 600;
	font-size: var(--size-bigger);
}
.phone-input select {
    border-radius: 0px;
    border: 1px solid var(--bg-grey2);
    background-color: white;
    font-size: var(--size-medium);
    padding: 17px 32px;
    flex: 1;
}
.formatPhone{
	margin: 2px;
    font-size: var(--size-small);
    color: var(--main-blue);
}
.switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 20px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    transition: .4s;
    border-radius: 20px;
	border: 2px solid var(--main-blue);
	width: 3em;
    height: 1.3em;	
}

.slider:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 4px;
    bottom: 4px;
    background-color: var(--main-blue);
    transition: .4s;
    border-radius: 50%;
	left: 2px;
    top: 2px;
	border: 2px solid var(--main-blue);
	
}

input:checked + .slider {
    background-color: white;
    border: 2px solid var(--main-blue);
}

input:checked + .slider:before {
    transform: translateX(25px);
    background-color: var(--bg-grey2);
	border: 2px solid var(--main-blue);
}

input:focus + .slider {
    box-shadow: 0 0 1px var(--main-blue);
}
.inputs {
	display: flex;
	justify-content: center;
	margin-bottom: 62px;
}

span.pf-m-error {
	background-color: unset;
	border: 0;
	text-align: center;
	font-size: var(--size-small);
	font-weight: 500;
}

.span-position {
	text-align: center;
	height: 16px;
	margin-bottom: 12px;
}

form {
	display: flex;
	flex-direction: column;
}

.inline-radio {
	display: flex;
	gap: 10px;
}

.form-group-checkbox {
	display: flex;
	gap: 7px;
	flex-direction: row;
	align-items: start;
}

.form-group-checkbox.flex-align-center {
	align-items: center;
}

.form-group-checkbox > input {
	flex: 0;
	padding: 0;
}

.form-group-checkbox label {
	margin: unset;
}

.buttons {
	display: flex;
	margin: auto;
	flex-direction: column;
	gap: 10px;
	width: 255px;
}

#button-submit {
	flex: 1;
}

.inline-button {
	flex: 1;
}

.buttons.inline {
	flex-direction: row;
}

.center {
	margin: auto;
}

.pwdvalidate {
	min-width: 255px;
}

.kc-feedback-text {
	text-align: center;
    margin: 20px auto;
    font-size: 20px;
    font-weight: bold;
	color: var(--main-blue);
}

#email-instruction {
	color: var(--main-blue);
	font-weight: 700;
}

.form-group.no-display + #legal-representative {
	display: none;
}

#legal-representative .form-error.hidden {
	display: none;
}

#input-error-gender .form-error.hidden {
	display: none;
}

.legal-representative-description {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
	font-size: var(--size-small);
}

input[type="submit"] {
	cursor: pointer;
}

.toggle-password-visibility {
	position: relative;
	cursor: pointer;
}

.toggle-password-visibility img {
	position: absolute;
	right: 10px;
	top: -36px;
}
/*
input:focus,
input:active,
.inlbl:focus,
button:focus,
a:focus {
	outline: none;
	border: 1px solid var(--main-blue);
}
*/
input,
.inlbl,
button,
a {
	outline: none !important;
}

input:focus,
input:active,
.inlbl:focus,
button:focus,
a:focus {
	border-color: var(--main-blue);
}

.forgotpwd {
	align-self: center;
	margin-top: 10px;
	margin-bottom: 12px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.logo img {
    width: 200px; /* Define the width of the image */
    height: 100px; /* Define the height of the image */
    
}
input[type="number"] {
	-moz-appearance: textfield;
}

.hidden-form-elements {
	display: none;
}

.user-infos {
	padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom: 1px solid var(--border-grey);
}

.user-field {
	display: flex;
	flex-direction: column;
	margin: 20px 0;
}

/* Style principal pour le container du combo box */
#kc-locale {
    display: inline-block;
    float: right;
	align-self: flex-end;
}

/* Style pour le wrapper du combo box */
#kc-locale-wrapper {
    display: flex;
    align-items: right;
    justify-content: right;
}

/* Style pour le combobox (select) */
#kc-locale-select {
    width: 100%;
    max-width: 200px;
    padding: 15px;
    font-size: 14px;
    color: var(--second-blue);
    border: 0px solid var(--second-blue);
    border-radius: 4px;
    background-color: #fff;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    appearance: none; /* Supprimer le style par défaut des select */
}

/* Changement de couleur lors du survol (hover) */
#kc-locale-select:hover {
    border-color: var(--main-blue);
    background-color: #fff;
}

/* Style pour le combobox lorsqu'il est en focus */
/*#kc-locale-select:focus {
    border-color: var(--main-blue);
    box-shadow: 0 0 5px var(--main-blue);
    outline: none;
}*/

/* Ajouter une flèche pour le select */
#kc-locale-select {
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="5" viewBox="0 0 8 5"><path fill="none" stroke="%23333" stroke-width="1.5" d="M1 1l3 3 3-3"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px 12px;
}




.user-field-label {
	font-size: var(--size-small);
	color: #837988;
	margin-bottom: 5px;
}

.user-field-value {
	font-weight: bold;
	font-size: 18px;
}

input[type="date"].user-field-value {
	background-color: transparent;
	border: none;
	padding: 0;
	font-size: 18px;
	font-weight: bold;
	letter-spacing: 1px;
	-webkit-appearance: none;
}

input[type="date"].user-field-value:-webkit-inner-spin-button,
input[type="date"].user-field-value:-webkit-calendar-picker-indicator {
	display: none;
	-webkit-appearance: none;
}

.email-Star-info {
	margin-bottom: 15px;
}

.pf-c-alert__icon {
	display: flex;
}

.fa-check-circle {
	margin: 20px auto;
	text-align: center;
	width: fit-content !important;
	border: 23px solid #d9eeed;
	font-size: 73px;
	border-radius: 50%;
	color: #3bcb9c;
}

.reset-password-info {
	display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: center;
    font-size: var(--size-small);
	margin-bottom: 35px;
	color: var(--main-blue);
}

.buttons-reg {
	margin-top: 20px;
}
@media (max-width: 840px) {
	body{
		background-color: white !important;
	}
	.login-pf-header{
		display: flex;
		justify-content: space-between;
		align-items: center !important;
		width: 100%;
		padding: 10px;
		flex-direction: column;
	}
	.leftLogin{
		border-bottom: 1px solid var(--main-blue);
		border-right: 0px solid transparent;
		padding-bottom: 25px !important;
	}
	.rightLogin{
		border-left: 0px solid transparent;
	}
	.mainLogin{
		display: flex;
		flex-direction: column !important;
	}
	#kc-content-wrapper{
		min-width: 335px;
		max-width: 500px;
		width: 60%;
	}
	
}
@media (min-width: 840px) {
	body {
		padding: 40px 0;
		box-sizing: border-box;
	}

	.kc-login-content {
		max-width: 700px;
		min-width: 540px;
		margin: auto;
		background-color: #ffff;
		padding: 40px 70px;
		
	}

	.login-pf-header {
		padding-top: 10px;
	}

	.instruction {
		margin: 0;
	}

	#input-error-email_code {
		position: relative;
		top: -70px;
		margin: 0 49px;
	}

	.back-container {
	
		background-position: center top;
		background-size: 100% auto;
		background-repeat: no-repeat;
	}

	.desktop {
		display: unset;
	}

	.mobile {
		display: none;
	}

	.background {
		position: fixed;
		z-index: -10;
	}

	.bkg-blue {
		top: 75px;
		position: fixed;
	}

	.bkg-pink {
		left: 86px;
		top: 150px;
		position: fixed;
	}

	.bkg-green {
		bottom: 181px;
		right: 137px;
		position: fixed;
	}

	input[type="submit"],
	button,
	#kc-registration > a {
		justify-content: center;
		min-width: 230px;
	}

	.inline > input[type="submit"],
	.inline > button,
	.inline > #kc-registration > a {
		justify-content: center;
		min-width: 230px;
	}
	.page {
		display: none;
	}
	
	.page.active {
		display: block;
	}
	.go-back {
		top: 30px;
		left: 46px;
	}

	#kc-content-wrapper {
		margin: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 100%;
	}

	.buttons {
		margin-bottom: 0;
		width: 325px;
	}

	.footer.footer-reg {
		margin-top: 20px;
	}

	.footer {
		margin: 32px 0 0 0;
	}

	.forgotpwd {
		margin-bottom: 20px;
	}

	.leftLogin{
		border-bottom: 0px solid transparent;
		border-right: 1px solid var(--main-blue);
		padding-right: 20px !important;
	}

	.rightLogin{
		border-left: 1px solid var(--main-blue);
		padding-left: 20px !important;
	}
	input#phoneNumber {
		width: 300px;
	}
}
/* CSS specific to iOS devices */
/* @supports (-webkit-touch-callout: none) {
	input[type="checkbox"] {
		-webkit-transform: scale(0.5, 0.5);
	}
} */
/*
input[type=checkbox] {
    -moz-appearance:none;
    -webkit-appearance:none;
    outline: none;
    content: none;  
    border: 1px solid #BCE5F4;
    border-radius: 0;
    padding: 0;
}

input[type=checkbox]:before {
    font-family: "FontAwesome";
    content: "\f00c";
    font-size: 15px;
    color: transparent !important;
    background: none;
    display: block;
    width: 20px;
    height: 20px;
    border: 1px solid #BCE5F4;
    margin-right: 7px;
}

input[type=checkbox]:checked:before {

    color: white !important;
    background: #BCE5F4 !important;
}
*/

/* label,
input[type="checkbox"] + span,
input[type="checkbox"] + span::before {
	display: flex;
	align-items: center;
} */

label * {
	cursor: pointer;
}

/* input[type="checkbox"] {
	opacity: 0;
	display: none;
}

input[type="checkbox"] ~ span::before {
	content: "";
	width: 20px;
	height: 20px;
	margin: 0 4px 0 0;
	line-height: 14px;
	text-align: center;
	-moz-border-radius: 100%;
	-webkit-border-radius: 100%;
	border-radius: 5px;
	border: solid 1px #009cd1;
	flex-shrink: 0;
} */

/* input[type="checkbox"]:checked ~ span::before {
	content: "\2714\fe0e";
	font-size: 20px;
	color: white;
	background: #009cd1;
} */

.acceptance {
	gap: 5px;
	font-size: var(--size-small);
	font-weight: 500;
	font-style: normal;
	letter-spacing: -0.39px;
	color: var(--main-blue);
	font-feature-settings:
		"clig" off,
		"liga" off;
	line-height: normal;
}
.disc {
    display: flex;
    align-items: center;
}

#accept-infos-shorter {
	display: none;
}

.goodDeals{
	font-weight : bold;
	color: var(--main-blue);
	font-size: var(--size-medium);
	margin: 2px;
}
.enhanceServices{
	color: var(--main-blue);
	margin: 5px;
	margin-bottom: 20px;
	text-align: justify;
	font-weight: 500 !important;
	font-size: var(--size-medium);
}

.page3Label{
	font-weight: 500 !important;
	font-size: var(--size-medium);
	text-align: justify;
	margin-right: 5px;
}
.switch-group{
	display: flex;
	flex-direction: row;
}

.acceptText {
    margin: 3px 3px 3px 4px !important;
	text-align: justify;
	color: var(--main-blue);
}
.CGV{
	display: flex;
	flex-direction: row;
}

.focused{
	background-color: var(--bg-grey2);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--main-blue);
    -webkit-box-shadow: 0 0 0px 1000px var(--bg-blue) inset;
}
@keyframes autofill {
    from {}
    to {}
}

input:-webkit-autofill {
    animation-name: autofill;
    animation-duration: 1ms;
}
.autofilled-label {
	background-color: var(--bg-blue) !important; 
}
div#phone-group {
    width: 100%;
}


.input-container {
    position: relative;
}

.input-field {
    width: 100%;
    padding: 17px;
	padding-left: 40px;
    border: 1px solid var(--main-blue);
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}

.input-field:focus {
    border-color: var(--main-blue);
    outline: none;
	border: 2px solid var(--main-blue);
}

.input-label {
    position: absolute !important;
    padding: 0 5px !important;
	transition: top 0.3s ease, left 0.3s ease, font-size 0.3s ease, color 0.3s ease !important;
    pointer-events: none !important;
	font-size: var(--size-medium) !important;
}

.input-label-off{
    top: 18px !important; 
    left: 40px !important;
    background-color: #fff !important;
    color: var(--main-blue) !important;
	font-weight: 400 !important;
}

.input-label-on{
    top: -12px !important;
    left: 15px !important;
    background-color: var(--bg-grey2) !important;
    color: var(--main-blue) !important;
	font-weight: 700 !important;	
}

.input-field:focus ~ .input-label,
.input-field:not(:placeholder-shown) ~ .input-label {
    top: -10px;
    left: 10px;
    font-size: 12px;
    color: #007BFF;
}

input[type=password]::-ms-reveal,
input[type=password]::-ms-clear
{
    display: none;
}

#kc-social-providers-bottom{
	display: flex;
	align-items: center;
	flex-direction: column;
}
h1.titre-login {
    color: var(--main-blue);
    font-family: Montserrat;
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -1.04px;
    text-align: center;
	margin-top: 0px;
}

.leftLogin{
	margin: 10px 0px 10px 10px;;
	padding: 10px;
}

.rightLogin{
	margin: 10px 10px 10px 0px;
	padding: 10px;
}

.mainLogin{
	display: flex;
	flex-direction: row;
}

#kc-content{
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	width: 100%;
}
div#kc-info-wrapper {
    display: flex;
    justify-content: center;
	margin: 5px;
}

form#kc-passwd-update-form {
    margin-top: 10px;
}
a.inline-button.pf-c-button-secondary.goprevious{
	border: 3px solid;
	border-color: var(--main-blue);
	cursor: pointer;
	padding: 17px 36px;
	font-size: var(--size-medium);
	border-radius: 45px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
}

.custom-checkbox {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}


.custom-checkbox-label {
	position: relative;
	display: inline-block;
	width: 20px;
	height: 20px;
	background-color: #fff; 
	border-radius: 4px;
	border: 1px solid var(--main-blue);
	cursor: pointer;
}

.custom-checkbox-label::after {
	content: '';
	position: absolute;
	top: 40%;
	left: 50%;
	width: 6px;
	height: 10px;
	border: solid var(--bg-grey2);
	border-width: 0 3px 3px 0;
	transform: translate(-50%, -50%) rotate(45deg);
	opacity: 0;
}

.custom-checkbox:checked + .custom-checkbox-label {
	background-color: var(--main-blue); 
}

.custom-checkbox:checked + .custom-checkbox-label::after {
	opacity: 1;
}

.required-message{
	color: var(--main-pink);
	padding: 14px 12px 14px 20px;
	box-sizing: border-box;
	font-size: var(--size-small);
	font-weight: bold;
}

.instruction-first-connection {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 1em;
	position: relative;
	top: -1em;
	font-weight: normal;
	font-size: var(--size-small);
	color: var(--main-blue);
	margin-bottom: 0;
	border: 2px solid var(--second-pink);
	width: 100%;
	padding: 0.5em;
	
}

.instruction-first-connection img {
    width: 2em;
    height: 2em;
}

.instruction-first-connection-text,
.error-create-link-broker{
	text-align: left;
	font-family: MuseoSans300;
  	font-weight: 300;
  	line-height: 16px;
}

.error-create-link-broker{
	font-size: 17px;
	color: var(--main-blue);
	margin-bottom: 2em;
}

.instruction-first-connection-text {
	font-size: 14px;
}

.instruction-first-connection-text p{	
	margin: 0.2em;
}