* {
	box-sizing: border-box;
}

/**
 * Fonts
 */
@font-face {
	font-family: "DIN Pro";
	src: url("https://static.foyer.lu/fonts/2c/din-pro-regular.2c333569e4eb7b5a1c892f03e4a007b4e4924f70.woff2") format("woff2"),
		 url("https://static.foyer.lu/fonts/63/din-pro-regular.6399039b179f8df4bdd4879947a1cb960a2a161d.woff") format("woff"),
		 url("https://static.foyer.lu/fonts/9b/din-pro-regular.9b95107cab6fc3dceda3dfbb76b9a818c73d8948.otf") format("opentype");
	font-style: normal;
	font-weight: 400;
}
@font-face {
	font-family: "DIN Pro";
	src: url("https://static.foyer.lu/fonts/ab/din-pro-bold.aba9a10efec9e191aefdf4a0ca2a82ffe77e7c4f.woff2") format("woff2"),
		 url("https://static.foyer.lu/fonts/79/din-pro-bold.7926454e4daf6439fcd223aaa3270aed8fa804ba.woff") format("woff"),
		 url("https://static.foyer.lu/fonts/e8/din-pro-bold.e89df16966e287409ed8c042ad7d415b6269f178.otf") format("opentype");
	font-style: normal;
	font-weight: 700;
}

p:-moz-only-whitespace {
    display: none;
}
p:empty {
    display: none;
}
p:blank {
    display: none;
}


/**
 * Header
 */

html {
	display: flex;
	flex-direction: column;
	width: 100%!important;
	height: 100%!important;
	margin: 0 auto!important;
	padding: 0!important;
}

html body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
	width: 100%!important;
	float: none!important;
	min-height: 100%!important;
    height: auto;
	margin: 0 auto!important;
	padding: 0 8px!important;
	overflow: visible!important;
	text-align: center!important;
	font-family: "DIN Pro", Helvetica, Arial, sans-serif!important;
	font-size: 16px!important;
	line-height: 1.7!important;
	color: #FFF!important;
	background: linear-gradient(to top right, rgba(0, 76, 146, .92), rgba(62, 155, 240, .92)), url('https://static.foyer.lu/images/4c/bg-foyer-blur.4c1b902f288f0ab7da411d89f7ed8f22077eae17.jpg') 50% 100% fixed!important;
	background-size: cover!important;
}

/* Remove some items */
.lpfbrand_img,
#lpftopnavbar .right-content,
#lpf_cancel,
#lpf_selfreg,
.controls .lpf_separator,
.lpf_auth_title.lpf_auth_title {
	display: none!important;
}

#lpfaction_columns_small#lpfaction_columns_small {
    position: static;
}

/* Buttons */
.lpf_btn_round {
    border-radius: 100px;
}

#lpftopheader#lpftopheader {
	display: inline-block!important;
	float: none;
	width: 100px;
	max-width: 100%;
	height: 80px;
    padding: 0;
    margin: 32px 16px;
    margin-top: auto;
	background: transparent url("https://static.foyer.lu/images/6f/vertical-white.6f2089beb7958e3f48be57471018e104ba2afea5.svg") 0 0 no-repeat;
	background-size: contain;
}

#lpftopnavbar {
    position: absolute;
    right: 8px;
    top: 24px;
    background: none;
}

#lpf_circle_progressbar_container {
    top: 24px;
    left: 24px;
}

#lpf_breadcrumb {
    position: absolute;
    left: 16px;
    top: 32px;
}

#lpf_lang_icon,
#lpf_back_home {
    float: none;
    width: 40px;
    height: 40px!important;
    background: white;
    padding: 0;
    border: 0;
    transition: all .3s;
    box-shadow: 0 8px 8px -8px rgba(0, 0, 0, .3), 0 2px 2px rgba(0, 0, 0, .2);
}

#lpf_lang_icon:hover,
#lpf_lang_icon:focus,
#lpf_back_home:hover,
#lpf_back_home:focus {
    transform: translateY(-2px);
    box-shadow: 0 10px 10px -8px rgba(0, 0, 0, .3), 0 4px 4px rgba(0, 0, 0, .2);
}

#lpf_back_home,
#lpf_back_home a {
    display: flex;
    justify-content: center;
    align-items: center;
}

#lpf_back_home a {
    width: 40px;
    height: 40px;
}

#lpf_back_home a img {
    opacity: .8;
}

#lpftopnavbar .lpflang {
    width: 140px;
    margin-top: 48px!important;
    margin-right: 0!important;
}

#lpftopnavbar .lpflang select {
    border: 0;
}

.progress.progress {
    height: 4px!important;
}

.progress-bar.progress-bar {
    background-color: purple!important;
}

.lpf_footer.lpf_footer {
    opacity: .6;
    margin-top: auto;
    padding: 16px;
}

#footer#footer,
#footer1#footer1,
#footer2#footer2 {
    display: block!important;
}

.lpf_footer.lpf_footer * {
    color: rgba(255, 255, 255, .8);
}


.lpf_card_class_login.lpf_card_class_login {
    background: none;
    border: 0;
}

/* Main content page */
#lpfpage {
    width: 380px;
    max-width: 100%;
    margin: 0 auto;
}

#lpfaction_columns_small .col-lg {
    display: none;
}

#lpfaction_columns_small .col-lg-4 {
    width: 100%;
    padding: 0 16px;
    max-width: none;
}

/* Form */
.input-group-addon.input-group-addon,
.form-control.form-control {
    border-radius: 0;
    background: none;
    border: 0;
    color: #FFF;
    padding-bottom: 12px;
}

.form-control.form-control {
    padding: 12px;
    transition: all .3s;
}

.form-control::-webkit-input-placeholder {
    color: rgba(255, 255, 255, .6);
}
.form-control::-moz-placeholder {
    color: rgba(255, 255, 255, .6);
}
.form-control:-ms-input-placeholder {
    color: rgba(255, 255, 255, .6);
}
.form-control:-moz-placeholder {
    color: rgba(255, 255, 255, .6);
}
.form-control::placeholder {
    color: rgba(255, 255, 255, .6);
}

.form-control.form-control:focus {
    background: rgba(255,255,255, .15);
}

input.form-control:-internal-autofill-selected,
input.form-control:-internal-autofill-selected:hover,
input.form-control:-internal-autofill-selected:focus {
	background-color: rgba(255,255,255, .15) !important;
    background-image: none !important;
    color: white!important;
    font-size: 1em;
}

input.form-control:-webkit-autofill,
input.form-control:-webkit-autofill:hover,
input.form-control:-webkit-autofill:focus {
    background-color: rgba(255,255,255, .15) !important;
    background-image: none !important;
    color: white!important;
    font-size: 1em;
}


.input-group-addon.input-group-addon {
    padding-left: 0;
}

.input-group-addon img {
    filter: invert(1);
}

.input-group.input-group {
    border-bottom: 1px solid white;
}

.form-group + .form-group {
    margin-top: 40px;
}

/* Messaging */
.lpf_call_out,
.lpf_call_out_wait,
.lpf_call_out_error,
.lpf_call_out_help,
.lpf_call_out_success {
    display: flex;
    border: 0 none;
    border-radius: 4px;
    margin-bottom: 24px;
    min-height: auto;
}

.lpf_card_class {
    box-shadow: none;
    border: 0 none;
    border-radius: 4px;
}

.lpf_card_class > .lpf_call_out_error {
    margin: 0 -24px;
}

[class*="lpf_call_out_body"] {
    display: flex;
    flex-direction: column;
    padding: 16px 16px 16px 24px;
    margin-right: 0;
    text-align: left;
}

.lpf_call_out_error .lpf_call_out_body,
.lpf_call_out_error .lpf_call_out_body_wait {
    color: #E85257;
}

.lpf_call_out_title + p {
    margin-top: .25em;
}

[class*="lpf_call_out_icon"] {
    width: auto;
    height: auto;
    position: static;
    padding: 24px 32px;
    margin: 0!important;
    background-position: center;
    background-size: 32px;
    border-radius: 4px 0 0 4px;
}

.lpf_call_out_icon_error {
    background-color: #ff5a5f;
}

.lpf_call_out_icon_help {
    background-color: #4EABFF;

}

.lpf_call_out_icon_success {
    background-color: #17BCA1;

}
.lpf_call_out_icon_wait {
    background-color: #FF9E00;

}

.lpf_call_out_body_help {
    color: #479CE8;
}
.lpf_call_out_body_success{
    color: #00A68B;
}
.lpf_call_out_body_wait {
    color: #E68E00;
}

.lpf_call_out_body.lpf_call_out_body::before,
.lpf_call_out_body_wait.lpf_call_out_body_wait::before,
.lpf_call_out_body_help.lpf_call_out_body_help::before,
.lpf_call_out_body_success.lpf_call_out_body_success::before {
    display: none;
    content: '';
    float: none;
}


/* Validation button */
.lpf_input_submit_div.lpf_input_submit_div {
    float: none;
}

input#ok, 
button#ok,
input#cancel {
	width: 100%;
	margin-top: 32px;
	padding: 14px;
	border: 0;
	font-size: 1em;
	letter-spacing: 2px;
	font-weight: 700;
	text-transform: uppercase;
	font-family: "Roboto", Helvetica, sans-serif;
	color: #004C92;
	background: #FFF;
	text-shadow: none;
	border-radius: 48px;
	box-shadow:  0 16px 16px -8px rgba(0,0,0,.1), 0 8px 8px -8px rgba(0,0,0,.2), 0 4px 4px -2px rgba(0,0,0,.2);
	transition: all .275s;
	cursor: pointer;
}

input#ok:hover,
input#ok:focus,
button#ok:hover,
button#ok:focus,
input#cancel:hover,
input#cancel:focus,
{
    transform:  translateY(-2px);
	outline: none;
	background: #FFF;
	box-shadow:  0 20px 20px -8px rgba(0,0,0,.2), 0 6px 6px -6px rgba(0,0,0,.2), 0 4px 4px -2px rgba(0,0,0,.2);
}

input#ok:focus,
button#ok:focus,
input#cancel:focus {
    background: rgba(255, 255, 255, .9);
}

input#ok[disabled],
input#ok[disabled]:hover,
input#ok[disabled]:focus,
button#ok[disabled],
button#ok[disabled]:hover,
button#ok[disabled]:focus,
input#cancel[disabled],
input#cancel[disabled]:hover,
input#cancel[disabled]:focus {
	opacity: .4;
	background: #FFF;
	box-shadow: none;
	cursor: default;
}

/* Links after submit */
.lpf_input_submit_div + .controls .controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.lpf_input_submit_div + .controls .controls a {
    color: rgba(255, 255, 255, .8);
}

.lpf_input_submit_div + .controls .controls a:hover,
.lpf_input_submit_div + .controls .controls a:focus {
    text-decoration: underline;
}

/* Authentication selection in a new line */
.form-group.row > .col-sm-4,
.form-group.row > .col-sm-8 {
    max-width: none;
    flex: none
}

/* Multi-factor form */
.col-lg-6.lpf_card_class {
    max-width: none;
    background-color: transparent;
}

/* Challenge response page */
input#challengeresponse {
  color: white;
  background: none;
  border: 0;
  width: 100%;
  padding: 12px;
  border-bottom: 1px solid white;
}

/* Since upgrade 9.0.8.9 */
label.bmd-label-floating.lpf_float_label {
  position: inherit;
  color: #FFF;
  padding-left: 0px;
  opacity: 0.6;
  width: 220px;
  text-align: left;
}

.btn, .custom-file-control::before {
  text-transform: none;
}

.form-group.bmd-form-group {
  margin-top: 0px;
  padding-top: 0px;
  margin-bottom: 0px;
}

div#lpf_change_lang_no_header {
  height: 0px!important;
}

.fa-eye-slash, .fa-eye {
  color: #FFF;
  opacity: 0.6;
  position: relative;
  top: 8px;
}

span#lpf_help {
  position: relative;
  top: 120px;
  background-color: #17a2b8;
  color: #FFF;
}

.navbar {
  box-shadow: none;
}

button#ok {
   margin-top: 0px;
}


// Import for Captcha only (SEC-1624)

/* Modifier la CSS d'origine également ça sera plus flexible */
html {
    display: block;
}
 
html body {
    justify-content: safe center;
}

/* Pour cette page en particulier */
.input-group {
    flex-wrap: nowrap;
}
 
.col-sm-12:has(input#captcha) {
    position: relative;
}
 
.col-sm-12:has(input#captcha)::before {
    content: "Security";
    display: block;
    margin-top: 32px;
    text-align: left;
    font-weight: bold;
}
 
[lang="fr"] .col-sm-12:has(input#captcha)::before {
    content: "Sécurité";
}
 
.col-sm-12:has(input#captcha)::after {
    content: '👇🏻';
    position: absolute;
    left: 14px;
    bottom: 10px;
}
 
input#captcha {
    padding-left: 40px;
    border-bottom: 1px solid white;
    width: 100%!important;
}
 
.form-group.row:has(#captchaimage) {
    margin-top: 8px;
}
 
#captchaimage {
    display: inline-block;
    border: 2px solid rgba(255,255,255,.4);
    border-radius: 8px;
    vertical-align: middle;
}
 
#captchaimage + .btn.btn-warning {
    display: inline-block;
    vertical-align: middle;
    padding: 8px;
}
 
.progress {
    position: relative;
    overflow: visible;
}
 
.progress::before {
    content: 'Code resets in…';
    position: absolute;
    bottom: 100%;
}
 
[lang="fr"] .progress::before {
    content: 'Le code se ré-initialise dans…';
}