body {
  font-family: SanaSansAlt-Medium,SanaSansAlt-Black,SanaSansAlt-Book!important;
  font-size: 14px
}

.g-recaptcha{
  padding-top: 2rem;
}

.card-header {
  padding: .75rem 1.25rem;
  margin-bottom: 0;
  background-color: inherit;
  border-bottom: 0;
  color: #333;
  font-size: 32px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 38px
}

.logo {
  text-align: center!important;
  max-height: 40px;
}

.navbar-brand {
  padding: 0em;
}

.card {
  margin-top: 1.5rem;
  border-radius: 3px;
  background-color: hsla(0,0%,100%,.7);
  box-shadow: 0 2px 6px 0 rgba(0,0,0,.5)!important
}

#toLogin.btn.btn-lg:not(#toLogin),.btn.btn-lg#toLogin:not(#toLogin),.button#toLogin.btn.btn-lg:not(#toLogin),.button.btn.btn-lg#toLogin:not(#toLogin),.button.filled#toLogin,.button.filled#toLogin.btn.btn-lg:not(#toLogin),.button.filled.btn.btn-lg#toLogin:not(#toLogin),.button.large.btn.btn-lg#toLogin:not(#toLogin),.button.large.filled#toLogin,.button.large.filled#toLogin.btn.btn-lg:not(#toLogin),.filled#toLogin,.filled#toLogin.btn.btn-lg:not(#toLogin),.filled.btn.btn-lg#toLogin:not(#toLogin),.large#toLogin.btn.btn-lg:not(#toLogin),.large.btn.btn-lg#toLogin:not(#toLogin),.large.filled#toLogin,.large.filled#toLogin.btn.btn-lg:not(#toLogin),.large.filled.btn.btn-lg#toLogin:not(#toLogin) {
  border-radius: 6px;
  font-family: Sana Sans Alt black;
  font-size: 15px;
  text-transform: none;
  font-weight: 900;
  color: #fff!important;
  background-color: #333!important;
  border: 0
}

#toLogin.btn.btn-lg:disabled:not(#toLogin),.btn.btn-lg#toLogin:disabled:not(#toLogin),.button#toLogin.btn.btn-lg:disabled:not(#toLogin),.button.btn.btn-lg#toLogin:disabled:not(#toLogin),.button.filled#toLogin.btn.btn-lg:disabled:not(#toLogin),.button.filled#toLogin:disabled,.button.filled.btn.btn-lg#toLogin:disabled:not(#toLogin),.button.large.btn.btn-lg#toLogin:disabled:not(#toLogin),.button.large.filled#toLogin.btn.btn-lg:disabled:not(#toLogin),.button.large.filled#toLogin:disabled,.filled#toLogin.btn.btn-lg:disabled:not(#toLogin),.filled#toLogin:disabled,.filled.btn.btn-lg#toLogin:disabled:not(#toLogin),.large#toLogin.btn.btn-lg:disabled:not(#toLogin),.large.btn.btn-lg#toLogin:disabled:not(#toLogin),.large.filled#toLogin.btn.btn-lg:disabled:not(#toLogin),.large.filled#toLogin:disabled,.large.filled.btn.btn-lg#toLogin:disabled:not(#toLogin) {
  color: #cdcbcb!important;
  background-color: #e2e1e1!important
}

#toLogin.btn.btn-lg:hover:not(#toLogin),.btn.btn-lg#toLogin:hover:not(#toLogin),.button#toLogin.btn.btn-lg:hover:not(#toLogin),.button.btn.btn-lg#toLogin:hover:not(#toLogin),.button.filled#toLogin.btn.btn-lg:hover:not(#toLogin),.button.filled#toLogin:hover,.button.filled.btn.btn-lg#toLogin:hover:not(#toLogin),.button.large.btn.btn-lg#toLogin:hover:not(#toLogin),.button.large.filled#toLogin.btn.btn-lg:hover:not(#toLogin),.button.large.filled#toLogin:hover,.filled#toLogin.btn.btn-lg:hover:not(#toLogin),.filled#toLogin:hover,.filled.btn.btn-lg#toLogin:hover:not(#toLogin),.large#toLogin.btn.btn-lg:hover:not(#toLogin),.large.btn.btn-lg#toLogin:hover:not(#toLogin),.large.filled#toLogin.btn.btn-lg:hover:not(#toLogin),.large.filled#toLogin:hover,.large.filled.btn.btn-lg#toLogin:hover:not(#toLogin) {
  color: #fff!important;
  background-color: #202020!important
}

#toLogin.btn.btn-lg:active:not(#toLogin),.btn.btn-lg#toLogin:active:not(#toLogin),.button#toLogin.btn.btn-lg:active:not(#toLogin),.button.btn.btn-lg#toLogin:active:not(#toLogin),.button.filled#toLogin.btn.btn-lg:active:not(#toLogin),.button.filled#toLogin:active,.button.filled.btn.btn-lg#toLogin:active:not(#toLogin),.button.large.btn.btn-lg#toLogin:active:not(#toLogin),.button.large.filled#toLogin.btn.btn-lg:active:not(#toLogin),.button.large.filled#toLogin:active,.filled#toLogin.btn.btn-lg:active:not(#toLogin),.filled#toLogin:active,.filled.btn.btn-lg#toLogin:active:not(#toLogin),.large#toLogin.btn.btn-lg:active:not(#toLogin),.large.btn.btn-lg#toLogin:active:not(#toLogin),.large.filled#toLogin.btn.btn-lg:active:not(#toLogin),.large.filled#toLogin:active,.large.filled.btn.btn-lg#toLogin:active:not(#toLogin) {
  color: #fff!important;
  background-color: #202020!important
}

#toLogin.btn.btn-lg:not(#toLogin),.btn.btn-lg#toLogin:not(#toLogin),.btn.btn-lg:not(#toLogin),.button#toLogin.btn.btn-lg:not(#toLogin),.button.btn.btn-lg#toLogin:not(#toLogin),.button.btn.btn-lg:not(#toLogin),.button.filled#toLogin.btn.btn-lg:not(#toLogin),.button.filled.btn.btn-lg#toLogin:not(#toLogin),.button.filled.btn.btn-lg:not(#toLogin),.button.large.btn.btn-lg#toLogin:not(#toLogin),.button.large.btn.btn-lg:not(#toLogin),.button.large.filled.btn.btn-lg#toLogin:not(#toLogin),.button.large.filled.btn.btn-lg:not(#toLogin),.filled#toLogin.btn.btn-lg:not(#toLogin),.filled.btn.btn-lg#toLogin:not(#toLogin),.filled.btn.btn-lg:not(#toLogin),.large#toLogin.btn.btn-lg:not(#toLogin),.large.btn.btn-lg#toLogin:not(#toLogin),.large.btn.btn-lg:not(#toLogin),.large.filled#toLogin.btn.btn-lg:not(#toLogin),.large.filled.btn.btn-lg#toLogin:not(#toLogin),.large.filled.btn.btn-lg:not(#toLogin) {
  border-radius: 6px;
  font-family: Sana Sans Alt black;
  font-size: 15px;
  text-transform: none;
  font-weight: 900;
  color: #fff!important;
  border: 0
}
#toLogin.btn.btn-lg:disabled:not(#toLogin),.btn.btn-lg#toLogin:disabled:not(#toLogin),.btn.btn-lg:disabled:not(#toLogin),.button#toLogin.btn.btn-lg:disabled:not(#toLogin),.button.btn.btn-lg#toLogin:disabled:not(#toLogin),.button.btn.btn-lg:disabled:not(#toLogin),.button.filled#toLogin.btn.btn-lg:disabled:not(#toLogin),.button.filled.btn.btn-lg#toLogin:disabled:not(#toLogin),.button.filled.btn.btn-lg:disabled:not(#toLogin),.button.large.btn.btn-lg#toLogin:disabled:not(#toLogin),.button.large.btn.btn-lg:disabled:not(#toLogin),.button.large.filled.btn.btn-lg#toLogin:disabled:not(#toLogin),.button.large.filled.btn.btn-lg:disabled:not(#toLogin),.filled#toLogin.btn.btn-lg:disabled:not(#toLogin),.filled.btn.btn-lg#toLogin:disabled:not(#toLogin),.filled.btn.btn-lg:disabled:not(#toLogin),.large#toLogin.btn.btn-lg:disabled:not(#toLogin),.large.btn.btn-lg#toLogin:disabled:not(#toLogin),.large.btn.btn-lg:disabled:not(#toLogin),.large.filled#toLogin.btn.btn-lg:disabled:not(#toLogin),.large.filled.btn.btn-lg#toLogin:disabled:not(#toLogin),.large.filled.btn.btn-lg:disabled:not(#toLogin) {
  color: #fff!important;
  background-color: #cdcbcb!important
}

#toLogin,#toLogin.btn.btn-lg:not(#toLogin),.btn.btn-lg#toLogin:not(#toLogin),.button#toLogin,.button#toLogin.btn.btn-lg:not(#toLogin),.button.btn.btn-lg#toLogin:not(#toLogin),.button.large#toLogin,.button.large#toLogin.btn.btn-lg:not(#toLogin),.large#toLogin,.large#toLogin.btn.btn-lg:not(#toLogin),.large.btn.btn-lg#toLogin:not(#toLogin) {
  border-radius: 6px;
  font-family: Sana Sans Alt black;
  font-size: 15px;
  text-transform: none;
  font-weight: 900;
  color: #333!important;
  background-color: transparent!important;
  border: 1px solid #333
}

#toLogin.btn.btn-lg:hover:not(#toLogin),#toLogin:hover,.btn.btn-lg#toLogin:hover:not(#toLogin),.button#toLogin.btn.btn-lg:hover:not(#toLogin),.button#toLogin:hover,.button.btn.btn-lg#toLogin:hover:not(#toLogin),.button.large#toLogin.btn.btn-lg:hover:not(#toLogin),.button.large#toLogin:hover,.large#toLogin.btn.btn-lg:hover:not(#toLogin),.large#toLogin:hover,.large.btn.btn-lg#toLogin:hover:not(#toLogin) {
  color: #333!important;
  background-color: hsla(0,2.8%,58%,.48)!important
}

#toLogin.btn.btn-lg:disabled:not(#toLogin),#toLogin:disabled,.btn.btn-lg#toLogin:disabled:not(#toLogin),.button#toLogin.btn.btn-lg:disabled:not(#toLogin),.button#toLogin:disabled,.button.btn.btn-lg#toLogin:disabled:not(#toLogin),.button.large#toLogin.btn.btn-lg:disabled:not(#toLogin),.button.large#toLogin:disabled,.large#toLogin.btn.btn-lg:disabled:not(#toLogin),.large#toLogin:disabled,.large.btn.btn-lg#toLogin:disabled:not(#toLogin) {
  color: #cdcbcb!important;
  background-color: #e2e1e1!important
}

#toLogin.btn.btn-lg:active:not(#toLogin),#toLogin:active,.btn.btn-lg#toLogin:active:not(#toLogin),.button#toLogin.btn.btn-lg:active:not(#toLogin),.button#toLogin:active,.button.btn.btn-lg#toLogin:active:not(#toLogin),.button.large#toLogin.btn.btn-lg:active:not(#toLogin),.button.large#toLogin:active,.large#toLogin.btn.btn-lg:active:not(#toLogin),.large#toLogin:active,.large.btn.btn-lg#toLogin:active:not(#toLogin) {
  color: #333!important;
  background-color: hsla(0,2.8%,58%,.48)!important
}

#toLogin.btn.btn-lg:not(#toLogin),.btn.btn-lg#toLogin:not(#toLogin),.button#toLogin.btn.btn-lg:not(#toLogin),.button.btn.btn-lg#toLogin:not(#toLogin),.button.large#toLogin.btn.btn-lg:not(#toLogin),.large#toLogin.btn.btn-lg:not(#toLogin),.large.btn.btn-lg#toLogin:not(#toLogin) {
  border-radius: 6px;
  font-family: Sana Sans Alt black;
  font-size: 15px;
  text-transform: none;
  font-weight: 900;
  color: #e0001a!important;
  background-color: transparent!important;
  border: 1px solid #e0001a
}

#toLogin.btn.btn-lg:hover:not(#toLogin),.btn.btn-lg#toLogin:hover:not(#toLogin),.button#toLogin.btn.btn-lg:hover:not(#toLogin),.button.btn.btn-lg#toLogin:hover:not(#toLogin),.button.large#toLogin.btn.btn-lg:hover:not(#toLogin),.large#toLogin.btn.btn-lg:hover:not(#toLogin),.large.btn.btn-lg#toLogin:hover:not(#toLogin) {
  color: #e0001a!important;
  background-color: rgba(224,0,26,.16)!important
}

#toLogin.btn.btn-lg:disabled:not(#toLogin),.btn.btn-lg#toLogin:disabled:not(#toLogin),.button#toLogin.btn.btn-lg:disabled:not(#toLogin),.button.btn.btn-lg#toLogin:disabled:not(#toLogin),.button.large#toLogin.btn.btn-lg:disabled:not(#toLogin),.large#toLogin.btn.btn-lg:disabled:not(#toLogin),.large.btn.btn-lg#toLogin:disabled:not(#toLogin) {
  color: #cdcbcb!important;
  background-color: #e2e1e1!important
}

#toLogin.btn.btn-lg:active:not(#toLogin),.btn.btn-lg#toLogin:active:not(#toLogin),.button#toLogin.btn.btn-lg:active:not(#toLogin),.button.btn.btn-lg#toLogin:active:not(#toLogin),.button.large#toLogin.btn.btn-lg:active:not(#toLogin),.large#toLogin.btn.btn-lg:active:not(#toLogin),.large.btn.btn-lg#toLogin:active:not(#toLogin) {
  color: #e0001a!important;
  background-color: rgba(224,0,26,.16)!important
}

.btn.btn-lg {
  font-family: SanaSansAlt-Medium,SanaSansAlt-Black,SanaSansAlt-Book!important
}

@font-face {
  font-family: SanaSansAlt-Black;
  src: local("SanaSansAlt-Black"),url(../font/SanaSansAlt-Black.woff) format("woff"),url(../font/SanaSansAlt-Black.woff2) format("woff2");
  font-style: normal
}

@font-face {
  font-family: SanaSansAlt-Medium;
  src: local("SanaSansAlt-Medium"),url(../font/SanaSansAlt-Medium.woff) format("woff"),url(../font/SanaSansAlt-Medium.woff2) format("woff2");
  font-style: normal
}

@font-face {
  font-family: SanaSansAlt-Book;
  src: local("SanaSansAlt-Book"),url(../font/SanaSansAlt-Book.woff) format("woff"),url(../font/SanaSansAlt-Book.woff2) format("woff2");
  font-style: normal
}

.password-rules {
  width: unset!important
}

#middleName {
  display: none;
}

#toLogin {
  display: none;
}
@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@400;700&display=swap');


body,
ul,
li,
nav,
html,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
input,
textarea,
button {
/* font-family: 'Urbanist', sans-serif; */
}

input::-webkit-input-placeholder {
font-family: 'Urbanist', sans-serif;
}

input:-ms-input-placeholder {
font-family: 'Urbanist', sans-serif;
}

input::-ms-input-placeholder {
font-family: 'Urbanist', sans-serif;
}

input::placeholder {
font-family: 'Urbanist', sans-serif;
}

body {
background-image: url(../images/Bg_hun.jpg);
background-color: hsla(0, 0%, 0%, 0.32);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}

span+div.w-100,
header+div.w-100 {
/*background-image: url(../images/Bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  padding: 40px 0;*/
}

@media (min-width: 1000px) {

span+div.w-100,
header+div.w-100 {
  padding: 30px 0 40px;
}
}

@media (min-width: 1200px) {

span+div.w-100,
header+div.w-100 {
  min-height: calc(100% - 153px);
}
}

header .navbar {
background-color: transparent !important;
/*-webkit-box-shadow: 0px 0px 3px #d2d2d2b3 !important;
box-shadow: 0px 0px 3px #d2d2d2b3 !important;*/
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: -1;
}

@media (max-width: 600px) {
header .navbar {
  z-index: -1;
}
}

header .navbar .navbar-brand {
padding: 0;
}

header .navbar button {
display: none;
}

header .navbar img {
max-width: 100%;
max-height: 100%;
margin-left: 20px;
margin-top: 20px;
filter: grayscale(100%) brightness(0) invert(1);
/* position: relative; */
z-index: -1;
}

#login .invalid-feedback,
#forgotPassword .invalid-feedback,
#registration .invalid-feedback,
#forgotPasswordSent .invalid-feedback,
#resetPassword .invalid-feedback,
#registrationSent .invalid-feedback,
#confirmRegistration .invalid-feedback,
#changeUserLogin .invalid-feedback,
#confirmRegistrationMobile .invalid-feedback,
#socialLogin .invalid-feedback {
font-size: 12px;
text-align: left !important;
margin-top: 8px;
margin-left: 8px;
font-size: 14px;
line-height: 20px;
font-weight: 500;
}

/* Keep validation messages under fields on auth screens. */
#login .form-group,
#forgotPassword .form-group {
  display: block !important;
}

#login .invalid-feedback,
#forgotPassword .invalid-feedback {
  display: block;
  width: 100%;
  margin-left: 0;
}

/*#login .card-body input,
#forgotPassword .card-body input,
#registration .card-body input,
#forgotPasswordSent .card-body input,
#resetPassword .card-body input,
#registrationSent .card-body input,
#confirmRegistration .card-body input,
#changeUserLogin .card-body input,
#confirmRegistrationMobile .card-body input,
#socialLogin .card-body input {
border-radius: 12px;
max-height: 52px !important;
max-width: 312px;
width: 100%;
font-size: 0.86rem !important;
margin: 0 auto;
margin-bottom: 20px;
gap: 20px;
}*/

#login .card-body {
padding-bottom: 0 !important;
}

#login .form-control {
/*padding: 1.5rem 0.75rem;*/
height: 52px;
font-size: 16px;
font-weight: bold;
}
#forgotPassword .form-control {
/*padding: 1.5rem 0.75rem;*/
height: 52px;
font-size: 16px;
font-weight: bold;
}
#login .form-control.is-invalid {
background-color: #e0574f24;
border: #E0574F;
}

#login .card-body input:focus,
#forgotPassword .card-body input:focus,
#registration .card-body input:focus,
#forgotPasswordSent .card-body input:focus,
#resetPassword .card-body input:focus,
#registrationSent .card-body input:focus,
#confirmRegistration .card-body input:focus,
#changeUserLogin .card-body input:focus,
#confirmRegistrationMobile .card-body input:focus,
#socialLogin .card-body input:focus {
border: 1px solid #ced4da;
-webkit-box-shadow: none;
box-shadow: none;
}

#login .card-body .input-group-append,
#forgotPassword .card-body .input-group-append,
#registration .card-body .input-group-append,
#forgotPasswordSent .card-body .input-group-append,
#resetPassword .card-body .input-group-append,
#registrationSent .card-body .input-group-append,
#confirmRegistration .card-body .input-group-append,
#confirmRegistrationMobile .card-body .input-group-append,
#socialLogin .card-body .input-group-append {
margin: 0;
}

#login .card-body .input-group-append div,
#forgotPassword .card-body .input-group-append div,
#registration .card-body .input-group-append div,
#forgotPasswordSent .card-body .input-group-append div,
#resetPassword .card-body .input-group-append div,
#registrationSent .card-body .input-group-append div,
#confirmRegistration .card-body .input-group-append div,
#confirmRegistrationMobile .card-body .input-group-append div,
#socialLogin .card-body .input-group-append div {
position: absolute;
top: 50%;
right: 2px;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
z-index: 10;
border: 0;
max-height: 16px;
max-width: 16px;
background-color: transparent;
padding: 10%;
color: #363636;
border-radius: 0 50px 50px 0;
}

.input-group-text.rounded-0 {
}

#login,
#forgotPassword,
#forgotPasswordSent,
#resetPassword,
#confirmRegistration,
#registrationSent {
max-width: 600px;
}

@media (min-width: 1000px) {

#login,
#forgotPassword,
#forgotPasswordSent,
#resetPassword,
#confirmRegistration,
#registrationSent {
  padding: 0;
}
}

#login .card-body,
#forgotPassword .card-body,
#forgotPasswordSent .card-body,
#resetPassword .card-body,
#confirmRegistration .card-body,
#registrationSent .card-body {
padding: 0 5% 30px;
}

#login .card-body {
margin-top: 30px;
}

@media (min-width: 600px) {

#login .card-body form,
#forgotPassword .card-body form,
#forgotPasswordSent .card-body form,
#resetPassword .card-body form,
#confirmRegistration .card-body form,
#registrationSent .card-body form,
#confirmRegistrationMobile form {
  margin: 0;
}
}

#login .card-body .form-group,
#forgotPassword .card-body .form-group,
#forgotPassword .card-body .form-group.mb-0,
#forgotPasswordSent .card-body .form-group,
#resetPassword .card-body .form-group,
#confirmRegistration .card-body .form-group,
#registrationSent .card-body .form-group,
#changeUserLogin .card-body .form-group,
#confirmRegistrationMobile .card-body .form-group {
max-width: 360px;
margin: 0 auto 1rem;
}

#login .card-body label,
#changeUserLogin label,
#forgotPassword .card-body label,
#forgotPasswordSent .card-body label,
#resetPassword .card-body label,
#confirmRegistration .card-body label,
#registrationSent .card-body label {
/* width: 100%; */
}

#login .card-body .form-control.is-invalid,
#forgotPassword .card-body .form-control.is-invalid,
#forgotPasswordSent .card-body .form-control.is-invalid,
#resetPassword .card-body .form-control.is-invalid,
#confirmRegistration .card-body .form-control.is-invalid,
#registrationSent .card-body .form-control.is-invalid {
background-image: none;
}

#login .col-xl-7.col-lg-8.col-md-10.mx-auto,
#forgotPassword .col-xl-7.col-lg-8.col-md-10.mx-auto,
#forgotPasswordSent .col-xl-7.col-lg-8.col-md-10.mx-auto,
#resetPassword .col-xl-7.col-lg-8.col-md-10.mx-auto,
#confirmRegistration .col-xl-7.col-lg-8.col-md-10.mx-auto,
#registrationSent .col-xl-7.col-lg-8.col-md-10.mx-auto {
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
max-width: 100%;
}

.alert-warning {
display: none;
}

#login #errorBlock h3,
#forgotPassword #errorBlock h3,
#forgotPasswordSent #errorBlock h3,
#resetPassword #errorBlock h3,
#confirmRegistration #errorBlock h3,
#registrationSent #errorBlock h3 {
display: block;
}

/*****Login Page*****/
#login {
max-width: 440px;
max-height: 576px;
padding-top: 100px;
}

@media (min-width: 1000px) {
#login {
  padding: 0;
}
}

#login .card.rounded:first-of-type {
margin-bottom: -1px;
}

@media (min-width: 600px) {
#login .card.rounded:first-of-type {
  padding-bottom: 0;
}
}

#login .card.rounded,
#login .card-header {
border-radius: 30px !important;
border: 0;
}

#login .card-header {
background: #ffffff;
padding: 30px 9% 0;
}

@media (min-width: 600px) {
#login .card-header {
  padding-top: 40px;
}
}

#login .card-header h3 {
color: var(--text-primary, #433f32);
text-align: center;
/* Headline/D - H2 -900 */
font-family: 'Urbanist', sans-serif;
font-size: 26px;
font-style: normal;
font-weight: 900;
line-height: 32px;
/* 123.077% */
}

#login .card-header p {
color: var(--text-primary, #433f32);
text-align: center;
/* Small/D - Normal - 500 */
font-family: 'Urbanist', sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 20px;
/* 142.857% */
}

@media (min-width: 600px) {
#login .card-header p {
  margin-top: 20px;
  margin-bottom: 40px;
}
}

#login .card-header p br {
display: none;
}

@media (min-width: 600px) {
#login .card-header p br {
  display: block;
}
}


#login .card-body #spinner {
/* font-family: 'Urbanist', sans-serif; */
margin-top: 20px;
color: #FFFFFF;
background-color: #333026;
text-align: center;
/* Small/D - Link - 700 */
font-family: 'Urbanist', sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 20px;
}

@media (min-width: 600px) {

#login .card-body #btnSubmit_login,
#login .card-body #spinner {
  margin-top: 10px;
}
}

@media (min-width: 600px) {
#passwordBlock+.form-group+.form-group {
  text-align: left !important;
  margin-bottom: 0;
}
}

/*Social Block*/
#socialBlock .input-group div:nth-child(2) {
display: none;
}

#socialBlock .input-group div a {
width: 40px;
height: 40px;
border-radius: 50%;
padding: 0;
display: grid;
place-content: center;
}

#socialBlock .input-group div a i {
font-size: 22px;
}

#login .card-body #signInSeparator {
font-size: 0;
margin-bottom: 40px;
}

@media (min-width: 600px) {
#login .card-body #signInSeparator {
  margin-top: 20px;
}
}

#forgotPasswordLink {
color: var(--text-primary, #433f32);
text-align: center;
font-family: 'Urbanist', sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 20px;
text-decoration-line: underline !important;
}

#forgotPassword #btnSubmit_forgotPassword,
#login #btnSubmit_login,
#spinner,
#toLogin,
#registration #btnSubmit_registration,
#confirmRegistration #btnSubmit,
#resetPassword #btnSubmit_resetPassword,
#changeUserLogin #btnSubmit_clConfirm,
#changeUserLogin #btnSubmit_clSubmit,
#forgotPassword #btnSubmit_clSubmit,
#forgotPassword #btnSubmit_clRequest,
#confirmRegistrationMobile #btnSubmit_confirmRegistrationMobile,
#socialLogin #btnSubmit_socialLogin {
background-color: #433F32 !important;
border-radius: 12px;
border: 1px solid #433F32 !important;
color: #FFFFFF !important;
height: 52px !important;
font-size: 14px;
/* transition: 0.34s all; */
display: flex;
justify-content: center;
width: 143px;
font-weight: 700;
}

#changeUserLogin #btnSubmit_clSubmit {
width: 250px !important;
}

#forgotPassword #btnSubmit_forgotPassword:hover,
#login #btnSubmit_login:hover,
#spinner:hover,
#toLogin:hover,
#registration #btnSubmit_registration:hover,
#confirmRegistration #btnSubmit:hover,
#resetPassword #btnSubmit_resetPassword:hover,
#changeUserLogin #btnSubmit_clConfirm:hover,
#changeUserLogin #btnSubmit_clSubmit:hover,
#forgotPassword #btnSubmit_clSubmit:hover,
#forgotPassword #btnSubmit_clRequest:hover,
#confirmRegistrationMobile #btnSubmit_confirmRegistrationMobile:hover {
background-color: #565244 !important;
transition: 0.34s all;
/* background-color: #FAF9F8;
transition: 0.34s all;
border: 1px solid #433F32;  
color: #433F32; */
color: #FFFFFF !important;
font-size: 14px !important;
line-height: 20px;
font-weight: 700;
border: 1px solid #433F32;
}

#btnSubmit_forgotPassword:focus #btnSubmit_login:focus,
#spinner:focus,
#toLogin:focus,
#registration #btnSubmit_registration:focus,
#confirmRegistration #btnSubmit:focus,
#resetPassword #btnSubmit_resetPassword:focus,
#changeUserLogin #btnSubmit_clConfirm:focus,
#confirmRegistrationMobile #btnSubmit_confirmRegistrationMobile:focus {
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}

#spinner span {
/* pointer-events: none; */
/* background-size: initial; */
/* background-repeat: no-repeat; */
/* background-position: center; */
color: #FFFFFF;
/* background-image: url(../images/loadingNew.gif); */
border-radius: 0;
/* border: 0; */
/* -webkit-animation: none; */
/* animation: none; */
/* width: 5rem; */
/* height: 1rem; */
/* display: none; */
font-size: 14px;
}

#toRegistrationBox,
#toRegistrationBox .card-header {
background: transparent;
}

#toRegistrationBox {
position: absolute;
left: 50%;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
bottom: 125px;
width: 100%;
padding: 0 15px;
}

@media (min-width: 600px) {
#toRegistrationBox {
  width: 190px;
  height: 60px;
  left: initial;
  right: 101px;
  -webkit-transform: none;
  transform: none;
  bottom: 128px;
  padding: 0;
  margin: 0 !important;
}
}

#toRegistrationBox .card-header {
padding: 0;
}

#toRegistrationBox .card-header h3 {
font-size: 0.8rem !important;
font-family: 'Urbanist', sans-serif;
}

#toRegistrationBox .card-body {
margin-top: 4px;
}

@media (min-width: 600px) {
#toRegistrationBox .card-body {
  padding: 0;
}
}

#toRegistrationBox .card-body button,
#changeUserLogin #btnResendCode {
background-color: #ffffff;
color: #000;
border-radius: 50px;
border: 1px #abb1bf solid;
width: 190px !important;
height: 40px !important;
font-size: 0.9rem !important;
-webkit-transition: 0.34s all;
transition: 0.34s all;
}

#toRegistrationBox .card-body button:focus,
#toRegistrationBox .card-body button:hover,
#changeUserLogin #btnResendCode:focus,
#changeUserLogin #btnResendCode:hover {
border: 1px #abb1bf solid;
-webkit-box-shadow: none;
box-shadow: none;
}

#toRegistrationBox .card-body button:hover,
#changeUserLogin #btnResendCode:hover {
background-color: #363636;
color: #ffffff;
border: 0;
text-decoration: none;
-webkit-transition: 0.34s all;
transition: 0.34s all;
}

#lastBlock {
background-color: #f0f0f0;
padding: 20px 5% 20px;
position: relative;
margin-top: -20px;
z-index: 1;
border-radius: 0 0 0.25rem 0.25rem;
}

@media (min-width: 600px) {
#lastBlock {
  padding-bottom: 30px;
}
}

#lastBlock .blockTitle {
font-size: 1.1rem;
margin-bottom: 30px;
}

@media (min-width: 412px) {
#lastBlock .blockTitle {
  font-size: 1.4rem;
}
}

@media (min-width: 768px) {
#lastBlock .blockTitle {
  font-size: 1.6rem;
}
}

#lastBlock .lastBlockWrapper {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 1fr;
grid-template-columns: 1fr 1fr;
grid-column-gap: 20px;
grid-row-gap: 24px;
}

#lastBlock .lastBlockWrapper .lastBlockItem {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column;
flex-flow: column;
}

#lastBlock .lastBlockWrapper .lastBlockItem img {
max-width: 40px;
}

@media (min-width: 600px) {
#lastBlock .lastBlockWrapper .lastBlockItem img {
  max-width: 100%;
}
}

#lastBlock .lastBlockWrapper .lastBlockItem p {
font-size: 0.8rem;
line-height: 1.2;
margin: 14px 0 0;
}

/*****Forgot Password Pages*****/
#forgotPassword .card.rounded,
#forgotPasswordSent .card.rounded,
#resetPassword .card.rounded,
#confirmRegistration .card.rounded,
#registrationSent .card.rounded,
#blockedEmail .card.rounded,
#changeUserLogin .card.rounded,
#confirmRegistrationMobile .card.rounded {
border: 0;
border-radius: 32px !important;
}

#forgotPassword .card-header,
#forgotPasswordSent .card-header,
#resetPassword .card-header,
#confirmRegistration .card-header,
#registrationSent .card-header,
#blockedEmail .card-body h3,
#changeUserLogin .card-header,
#confirmRegistrationMobile .card-header {
border: 0;
border-radius: 32px;
background-color: #FFFFFF;
padding: 50px 0 30px;
}

@media (min-width: 600px) {

#forgotPassword .card-header,
#forgotPasswordSent .card-header,
#resetPassword .card-header,
#confirmRegistration .card-header,
#registrationSent .card-header,
#blockedEmail .card-body h3,
#changeUserLogin .card-header,
#confirmRegistrationMobile .card-header {
  padding: 40px 40px 20px;
}
}

#forgotPassword .card-header h3,
#forgotPasswordSent .card-header h3,
#resetPassword .card-header h3,
#confirmRegistration .card-header h3,
#registrationSent .card-header h3,
#blockedEmail .card-body h3,
#changeUserLogin .card-header h3,
#confirmRegistrationMobile .card-header h3 {
color: var(--text-primary, #433f32);
text-align: center;
/* Headline/D - H2 -900 */
font-family: 'Urbanist', sans-serif;
font-size: 26px;
font-style: normal;
font-weight: 900;
line-height: 32px;
/* 123.077% */
}

#forgotPassword .card-body,
#forgotPasswordSent .card-body,
#resetPassword .card-body,
#confirmRegistration .card-body,
#registrationSent .card-body,
#blockedEmail .card-body,
#changeUserLogin .card-body #confirmRegistrationMobile .card-body {
/* padding: 0 12.5% 45px; */
}

@media (min-width: 600px) {

#forgotPassword .card-body,
#forgotPasswordSent .card-body,
#resetPassword .card-body,
#confirmRegistration .card-body,
#registrationSent .card-body,
#blockedEmail .card-body,
#changeUserLogin .card-body,
#confirmRegistrationMobile .card-body {
  /* padding: 0 14% 40px; */
}
}

#forgotPassword .card-body .form-text,
#forgotPasswordSent .card-body .form-text,
#forgotPasswordSent .card-body .form-group.mb-0,
#resetPassword .card-body .form-text,
#resetPassword .card-body .form-group.mb-0,
#registrationSent .card-body .form-text,
#registrationSent .card-body .form-group.mb-0 {
display: none;
}

#forgotPassword .card-body .form-group:nth-child(3),
#forgotPasswordSent .card-body .form-group:nth-child(3),
#resetPassword .card-body .form-group:nth-child(3),
#confirmRegistration .card-body .form-group:nth-child(3),
#registrationSent .card-body .form-group:nth-child(3) {
margin: 0 auto;
}

#forgotPasswordSent .card.rounded .card-body h3+p,
#confirmRegistration .card.rounded .card-body h3+p,
#registrationSent .card.rounded .card-body h3+p {
display: block;
text-align: center;
}

#registrationSent .card.rounded .card-body h3 + fieldset > p {
display: block;
text-align: center;
background-color: #5972d236;
border-radius:16px;
margin-top: 20px;
margin-bottom: 20px !important;
font-weight: 500;
font-size: 16px;
line-height: 24px;
padding: 40px;
}

#forgotPasswordSent .card.rounded .card-body h3,
#confirmRegistration .card.rounded .card-body h3,
#registrationSent .card.rounded .card-body h3 {
display: none;
}

#forgotPasswordSent .card-body img,
#confirmRegistration .card-body img,
#registrationSent .card-body img {
display: none;
}

/*****Registration Confirmed*****/
#confirmRegistration #successBlock div .form-text.mb-5,
#confirmRegistration #successBlock h3,
#confirmRegistration #errorBlock .form-text.mb-5,
#confirmRegistration #errorBlock h3 {
display: block;
font-size: 1rem;
}

#registrationSent .card.rounded .card-body h3 {
display: block;
margin-top: 30px;
margin-bottom: 30px !important;
text-align: left;
font-weight: 900;
font-size: 22px;
line-height: 28px;
color: #433F32;
}

@media (min-width: 600px) {
#registrationSent .card.rounded .card-body h3 {
display: block;
margin-top: 30px;
margin-bottom: 30px !important;
text-align: left;
font-weight: 900;
font-size: 22px;
line-height: 28px;
color: #433F32;
}
}
#confirmRegistration #passwordBlock .form-group.mb-0 {
display: block;
margin-top: 40px;
}
#confirmRegistration #passwordBlock .custom-control-label {
display: block;
text-align: left;
padding: 10px 0 0 10px;
margin-top: 20px;  
position: relative;
margin-right: 0px;
}
/*****Reset Password Page*****/
#resetPassword #passwordBlock .form-text,
#confirmRegistration #passwordBlock .form-text,
#instructionText+.form-group label,
#confirmRegistrationMobile #instructionText {
display: block;
text-align: left;
}
#confirmRegistration #passwordBlock .form-text{
text-align: center;
margin-bottom: 20px;
}
#instructionText+.form-group label {
margin: 0.25rem 0 1rem;
}

#resetPassword #passwordBlock .form-group:nth-child(2) label,
#resetPassword #passwordBlock .form-group:nth-child(3) label,
#confirmRegistration #passwordBlock .form-group:nth-child(2) label,
#confirmRegistration #passwordBlock .form-group:nth-child(3) label,
#confirmRegistrationMobile #passwordBlock label {
/*display: none;*/
width: 100%;
text-align: left;
}

#resetPassword #passwordBlock .form-group.mb-0,
#confirmRegistration #passwordBlock .form-group.mb-0 {
display: block;
}

#resetPassword #passwordBlock .custom-control-label,
#confirmRegistration #passwordBlock .custom-control-label {
display: block;
text-align: left;
padding: 10px 0 0 10px;
}

#resetPassword #passwordBlock .custom-control-label:before,
#confirmRegistration #passwordBlock .custom-control-label:before {
content: "";
position: absolute;
left: -18px;
top: 9px;
width: 20px;
height: 20px;
border: 1px solid #333;
border-radius: 50%;
background-color: transparent;
outline: 0;
}

@media (min-width: 600px) {

#resetPassword #passwordBlock .custom-control-label:before,
#confirmRegistration #passwordBlock .custom-control-label:before {
  top: 12px;
}
}

#resetPassword #passwordBlock .custom-control-label:after,
#confirmRegistration #passwordBlock .custom-control-label:after {
content: "";
width: 20px;
height: 20px;
position: absolute;
left: -18px;
top: 9px;
}

#resetPassword #passwordBlock .custom-control-input:focus~.custom-control-label:before,
#confirmRegistration #passwordBlock .custom-control-input:focus~.custom-control-label:before {
-webkit-box-shadow: none;
box-shadow: none;
}

#resetPassword #passwordBlock .custom-control-input:checked,
#resetPassword #passwordBlock .custom-control-input:checked+.custom-control-label:before,
#confirmRegistration #passwordBlock .custom-control-input:checked,
#confirmRegistration #passwordBlock .custom-control-input:checked+.custom-control-label:before {
border: 0;
}

#resetPassword #passwordBlock .custom-control-input:checked+.custom-control-label:after,
#confirmRegistration #passwordBlock .custom-control-input:checked+.custom-control-label:after {
content: "";
display: block;
position: absolute;
left: -18px;
top: 9px;
width: 20px;
height: 20px;
outline: 0;
background: url(../images/checkbox.png) center transparent;
}

@media (min-width: 600px) {

#resetPassword #passwordBlock .custom-control-input:checked+.custom-control-label:after,
#confirmRegistration #passwordBlock .custom-control-input:checked+.custom-control-label:after {
  top: 12px;
}
}

footer .navbar {
background-color: #333 !important;
}

footer .navbar .navbar-nav.ml-auto {
border-bottom: 1px solid #fff;
width: 100%;
min-height: 80px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}

@media (min-width: 992px) {
footer .navbar .navbar-nav.ml-auto {
  border-bottom: none;
  width: 20%;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-height: 40px;
  max-width: 190px;
}
}

footer .navbar .navbar-nav.ml-auto .nav-item .active>.nav-link {
color: #fff;
}

footer .navbar .navbar-nav .nav-item .nav-link {
color: #b2b2b2;
-webkit-transition: 0.34s all;
transition: 0.34s all;
font-size: 1rem;
}

footer .navbar .navbar-nav .nav-item .nav-link:hover,
footer .navbar .navbar-nav .nav-item .nav-link:focus,
footer .navbar .navbar-nav .nav-item .nav-link:active {
color: #ffffff;
text-decoration: underline;
-webkit-transition: 0.34s all;
transition: 0.34s all;
}

footer .navbar .navbar-collapse {
padding: 10px 0;
}

/*****Register Page*****/
#loyaltyBox,
#signInTypeBox,
#signInTypeBox+.form-group+.form-group+.form-group,
/* #companyBox+.form-group, */
/* #companyBox .form-group + .form-group, */
/* #registrationDataBox .form-group:nth-child(5), */
/* #registrationDataBox .form-group:nth-child(6), */
/* #registrationDataBox .form-group:nth-child(4), */
#signBox .form-group:nth-child(6),
#signBox .form-group:nth-child(7),
#registrationDataBox .form-group:nth-child(8),
#registrationDataBox .form-group:nth-child(9),
#registrationDataBox .form-group:nth-child(10),
#registrationDataBox .form-group:nth-child(11),
#registrationDataBox .form-group:nth-child(12),
#registrationDataBox .form-group:nth-child(13),
#registrationDataBox .form-group:nth-child(14),
#registrationDataBox .form-group:nth-child(15),
#registrationDataBox .form-group:nth-child(16),
#registrationDataBox .form-group:nth-child(17),
#registrationDataBox .form-group:nth-child(18) {
display: flex;
align-items: center;
}

/* div#loyaltyBox {
  display: flex !important;
  order: 4;
  padding: 0px 20px;
} */

#registration .card.rounded .card-body:last-child .pb-4:nth-child(1) {
/* display: none; */
}

#legalAreaBox {
/*display: block!important;*/
margin-top: 30px;
}

#legalAreaText {
font-family: 'Urbanist', sans-serif;
line-height: 25px;
margin-top: 40px;
margin: 30px 0 0;
text-align: left;
}

#registration,
#socialLogin {
padding: 0 30px 0;
}

#registration label,
#registration p,
#registration input,
#registration select,
#socialLogin label,
#socialLogin p,
#socialLogin input,
#socialLogin select {
width: 240px;
}

#registration 
#termsAndConditions-label, 
#AIT_01-label,
#SUI_01-label
  {
    width: auto !important;
    padding-bottom: 1.5rem;
    /* Removes the 240px width */
  }

html body #loyaltyBox {
  display: none !important;
}

p.mt-2 {
  text-align: center !important;
  width: 100% !important;
  font-family: 'Urbanist', sans-serif !important;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: #8E8C84;
}

label {}




@media (min-width: 700px) {

#registration label,
#registration p,
#registration input,
#registration select,
#socialLogin label,
#socialLogin p,
#socialLogin input,
#socialLogin select {
  font-family: 'Urbanist', sans-serif !important;
  font-size: 16px;
  font-weight: 500;
  /* line-height: 24px; */
  letter-spacing: 0em;
  text-align: left;
  /* width: 240px !important; */
  margin-bottom: 0px;
  display: block;
  align-content: center;
  color: #433F32 !important;
}

label.switch {
}

label {}

label {}
}

#registration .password-rules {
bottom: -43px;
}

@media (max-width: 1060px) {
#registration .password-rules {
  bottom: 112%;
}
}

#registration .password-rules:before {
left: -12px;
transform: translate(0, -50%);
}

@media (max-width: 1060px) {
#registration .password-rules:before {
  transform: none;
  left: 16px;
}
}

#password-rules-title,
#password-rules-secondaryTitle {
color: #343a40;
}

#registration .card.rounded,
#socialLogin .card.rounded {
border: 0;
}

#registration .card.rounded .card-header,
#socialLogin .card.rounded .card-header {
background: none;
border: 0;
}

@media (max-width: 576px), (max-height: 720px){
#registration .card.rounded .card-header{
  padding: 10px;
}
}

@media (max-width: 440px){
#registration .card.rounded .card-header{
  padding: 10px;
}
}

#registration .card.rounded .card-header h3,
#socialLogin .card.rounded .card-header h3 {
}

@media (min-width: 465px) {

#registration .row .col-md-12.py-3,
#socialLogin .row .col-md-12.py-3 {
  padding: 0;
}
}

#country-listbox {
z-index: 100;
margin-top: 8px;
width: 312px;
border-radius: 12px;
filter: drop-shadow(0px 8px 24px rgba(67, 63, 50, 0.12));
}

.intl-tel-input .country-list::-webkit-scrollbar {
display: none
}

@media (max-width: 600px) {
#country-listbox {
width: 200px;
}
}

#companySelectorbox::-webkit-scrollbar {
display: none;
}

@media (min-width: 768px) {
#companySelectorbox {
  width: calc(100% / 2 - 10px);
  margin-right: 2%;
}
}

/* #registrationDataBox #companySelectorbox .form-group,
#socialLogin #companySelectorbox .form-group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0;
}

#companySelectorbox .form-group p {
margin: 0;
}

#companySelectorbox .form-inline {
position: relative;
width: 40%;
height: 30px;
border-radius: 20px;
background: #f0f0f0;
cursor: pointer;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-flow: row-reverse;
flex-flow: row-reverse;
max-width: 149.8px;
}

@media (min-width: 768px) {
#companySelectorbox .form-inline {
  height: 35px;
}
}

#companySelectorbox .form-inline .switch-selection {
position: absolute;
z-index: 1;
top: 0px;
left: 0px;
width: 50%;
height: 100%;
border-radius: 20px;
background-color: green;
-webkit-transition: left 0.15s ease-out;
transition: left 0.15s ease-out;
}

#companySelectorbox .form-inline .switch-selection-on {
color: #fff;
-webkit-transition: 0.15s ease-out;
transition: 0.15s ease-out;
left: 50%;
background-color: #7c898c;
display: block;
}

#companySelectorbox .custom-control {
margin: 0 !important;
padding: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 50%;
}

#companySelectorbox .custom-control .custom-control-label {
position: absolute;
z-index: 11;
width: 100%;
text-align: center;
}

#companySelectorbox .custom-control .custom-control-label:after,
#companySelectorbox .custom-control .custom-control-label:before {
content: none !important;
} */

#registrationDataBox div:nth-child(7) .row.form-group {
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-flow: nowrap row-reverse;
flex-flow: nowrap row-reverse;
margin-left: 0;
margin-right: 0;
flex-direction: column;
/* gap: 10px; */
}

#registrationDataBox div:nth-child(7) .row.form-group .col-md-4 {
padding: 0;
}

@media (min-width: 700px) {
#registrationDataBox div:nth-child(7) .row.form-group .col-md-4 {
  display: flex;
  margin-bottom: 1rem;
  align-items: center;
}
}

#registrationDataBox div:nth-child(7) .row.form-group .col-md-4 select {
border-radius: 12px !important;
height: 52px !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
font-size: 16px !important;
margin: 0 !important;
}


#registrationDataBox div:nth-child(7) .row.form-group .col-md-4:nth-child(1),
#registrationDataBox div:nth-child(7) .row.form-group .col-md-4:nth-child(2) {
}

.col-md-4 {margin-bottom: 0px;}

@media (max-width: 700px) {

#registrationDataBox div:nth-child(7) .row.form-group .col-md-4:nth-child(1),
#registrationDataBox div:nth-child(7) .row.form-group .col-md-4:nth-child(2) {
}
}

#registrationDataBox .form-group:last-child {
padding-left: 10px;
}

#registrationDataBox .form-group:last-child .custom-control-label,
#registrationDataBox .form-group:last-child .custom-control-input {
cursor: pointer;
margin-left: -10px;
}

#registrationDataBox .form-group:last-child .custom-control {
margin-top: 60px;
}

#registrationDataBox .form-group:last-child .custom-control.custom-checkbox:not(:last-child) {
padding: 0;
display: grid;
grid-template-columns: 45px 80px 1fr;
column-gap: 60px;
}

#registrationDataBox .form-group:last-child .custom-control.custom-checkbox:nth-last-child(2) {
margin-top: 30px;
}

#registrationDataBox .form-group:last-child .custom-control.custom-checkbox:not(:last-child) .custom-control-label {
cursor: default;
grid-column: 1/4;
grid-row: 1;
padding: 0;
margin-left: -10px;
margin-bottom: -20px;
}

#registrationDataBox .form-group:last-child .custom-control.custom-checkbox:not(:last-child) .custom-control-label:after,
#registrationDataBox .form-group:last-child .custom-control.custom-checkbox:not(:last-child) .custom-control-label:before {
content: none;
}

#registrationDataBox .form-group:last-child .custom-control.custom-checkbox:not(:last-child) .input_yes,
#registrationDataBox .form-group:last-child .custom-control.custom-checkbox:not(:last-child) .input_no {
font-size: 4.27vw !important;
cursor: pointer;
position: relative;
display: flex;
align-items: center;
margin-left: -10px;
}

#registrationDataBox .form-group:last-child .custom-control.custom-checkbox:not(:last-child) .input_no {
margin-left: -30px;
}

@media (min-width: 465px) {

#registrationDataBox .form-group:last-child .custom-control.custom-checkbox:not(:last-child) .input_yes,
#registrationDataBox .form-group:last-child .custom-control.custom-checkbox:not(:last-child) .input_no {
  font-size: 16px !important;
}
}

#registrationDataBox .form-group:last-child .custom-control.custom-checkbox:not(:last-child) .input_no {
/*margin-left: 60px;*/
}

#registrationDataBox .form-group:last-child .custom-control.custom-checkbox:not(:last-child) .input_no:before {
left: 76px;
}

#registrationDataBox .form-group:last-child .custom-control.custom-checkbox:not(:last-child) .input_checked::before {
background-image: url(../images/checkbox.png);
border: none;
}

#registrationDataBox .form-group:last-child .custom-control-label:before,
#registrationDataBox .form-group:last-child .input_yes:before,
#registrationDataBox .form-group:last-child .input_no:before {
content: "";
min-width: 20px;
height: 20px;
border: 1px solid #333;
border-radius: 50%;
background-color: transparent;
outline: 0;
display: block;
margin-right: 10px;
}

#registrationDataBox .form-group:last-child .custom-control-input:focus,
#registrationDataBox .form-group:last-child .custom-control-input:active {
border: 0;
}

#registrationDataBox .form-group:last-child .custom-control-input:focus~.custom-control-label:before {
-webkit-box-shadow: none;
box-shadow: none;
}

#registrationDataBox .form-group:last-child .custom-control-input:checked,
#registrationDataBox .form-group:last-child .custom-control-input:checked+.custom-control-label:before {
border: 0;
}

#registrationDataBox .form-group:last-child .custom-control-input:checked+.custom-control-label:after {
content: "";
display: block;
position: absolute;
left: -24px;
top: 3px;
width: 20px;
height: 20px;
outline: 0;
background: url(../images/checkbox.png) center transparent;
}

#registrationDataBox .custom-control .custom-control-label a {
color: #212529;
transition: 0.34s all;
text-decoration: underline;
}

#registrationDataBox .custom-control .custom-control-label a:hover {
color: #e0001a;
transition: 0.34s all;
}

#submitBox {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 20px auto 0;
color: #FFFFFF !important;
text-align: center;
/* Small/D - Link - 700 */
font-family: 'Urbanist', sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 20px;
border-radius: 12px;
order: 6;
width: 100%;
}
#submitBox .btn:disabled{
opacity: 1 !important;
}

@media (min-width: 700px) {
#signBox {
  display: -webkit-box;
  display: -ms-flexbox;
  /* display: flex; */
  -ms-flex-flow: wrap;
  flex-flow: wrap;
}
}

@media (min-width: 700px) {

#signBox .form-group:nth-child(2),
#signBox .form-group:nth-child(3) {
  width: calc(100% / 1 - 10px);
  display: flex;
  align-items: center;
}
}

@media (min-width: 465px) and (min-width: 465px) {
#signBox .form-group:nth-child(2) {
  margin-right: 10px;
  margin-bottom: 20px;
}
}

@media (min-width: 465px) and (min-width: 465px) {
#signBox .form-group:nth-child(3) {
  margin-left: 0px;
  margin-bottom: 20px
}
}


@media (min-width: 465px) {
#signBox #passwordBlock {
  display: -ms-flexbox;
  /* flex-direction: column; */
  /* width: 100%; */
  /* height: 100%; */
}
}

@media (min-width: 465px) {
#signBox #passwordBlock .form-group:nth-child(1) {
  width: calc(100% / 1 - 10px);
  /* margin-right: 10px; */
  /* margin-left: 0px; */
  display: flex;
}
}

@media (min-width: 465px) {
#signBox #passwordBlock .form-group:nth-child(2) {
  /* margin-left: 10px; */
  display: flex;
}
}

#registrationDataBox {
/* display: -webkit-box; */
display: -ms-flexbox;
/* display: flex; */
/* -webkit-box-orient: vertical; */
/* -webkit-box-direction: normal; */
-ms-flex-flow: column;
padding: 0px 20px;
flex-direction: column;
order: 1;
/* border-top: 1px dashed var(--special-separator-dash, #c2c0be); */
}

#registrationDataBox #companySelectorbox {
-webkit-box-ordinal-group: 2;
width: 100%;
display: flex;
align-items: center;
margin-bottom: 20px;
}

@media (max-width: 699px) {
#registrationDataBox #companySelectorbox {
  /* flex-direction: column; */ /* Oszlop irányú elrendezés */
  display: block;
  margin-bottom: 10px; /* Nagyobb térköz alul */
}
}

#registrationDataBox .form-group:nth-child(4),
#registrationDataBox .form-group:nth-child(5),
#registrationDataBox .form-group:nth-child(6) {
margin-bottom: 20px;
}

#registrationDataBox .form-group:nth-child(9),
#registrationDataBox .form-group:nth-child(14) {
order: unset;
}

#registrationDataBox .form-group:nth-child(19) {
-webkit-box-ordinal-group: 7;
-ms-flex-order: 6;
order: 6;
margin-top: 160px;
display: none !important;
}

#registrationDataBox .form-group:nth-child(19) .custom-control .is-invalid+label {
color: #212529;
}

#registrationDataBox .form-group:nth-child(19) .custom-control .invalid-input.input_yes_no::before {
border: 1px solid #dc3545;
}

#registrationDataBox .form-group:nth-child(19) .custom-control:last-child .is-invalid+label::before {
border: 1px solid #dc3545;
}

#registrationDataBox .form-group:nth-child(19) .checkbox-informativeText {
margin-left: -7px;
}

#registration .important-note {
margin: 20px 0 0;
}

#registrationDataBox #companyBox+.form-group+.form-group+.form-group+.form-group+div {
-webkit-box-ordinal-group: 6;
-ms-flex-order: 5;
order: 5;
}

#registrationDataBox #companyBox+.form-group+.form-group+.form-group+.form-group+div input {
width: 100%;
max-width: 100%;
}

.form-group .intl-tel-input.allow-dropdown .flag-container .selected-flag {
cursor: default;
border: 1px solid var(--special-border, #DBD8D5);
border-radius: 12px;
width: 104px;
display: flex;
align-items: center;
font-size: 16px;
}

.form-group .intl-tel-input.allow-dropdown .flag-container {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNS4xIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjQgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZmlsbD0iIzQzM2YzMiIgZD0iTTIzMy40IDQwNi42YzEyLjUgMTIuNSAzMi44IDEyLjUgNDUuMyAwbDE5Mi0xOTJjMTIuNS0xMi41IDEyLjUtMzIuOCAwLTQ1LjNzLTMyLjgtMTIuNS00NS4zIDBMMjU2IDMzOC43IDg2LjYgMTY5LjRjLTEyLjUtMTIuNS0zMi44LTEyLjUtNDUuMyAwcy0xMi41IDMyLjggMCA0NS4zbDE5MiAxOTJ6Ii8+PC9zdmc+);
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 12px 12px;
appearance: none;
padding-right: 2rem;
width: 104px;
}

.form-group .intl-tel-input.allow-dropdown .flag-container:hover .selected-flag {
}


.form-group .intl-tel-input.allow-dropdown .flag-container+input {
padding: 16px;
height: 52px;
border: 1px solid var(--special-border, #DBD8D5);
margin-left: 114px;
}

#signBox .form-group:has(#mobileNumber) .intl-tel-input.allow-dropdown .flag-container+input {
margin-left: 0 !important;
}




#country-listbox {
}

.selected-flag .iti-arrow {
display: none;
}

#registrationDataBox #companyBox {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}

#registrationDataBox #companyBox .form-group:nth-child(2) {
padding-left: 0;
}

#registrationDataBox #companyBox .form-group input {
max-width: 100%;
height: 52px;
border: 1px solid var(--special-border, #DBD8D5);
}
@media (max-width: 699px){
#registrationDataBox #companyBox .form-group input {
width: 100%;
height: 52px;
font-size: 16px;
}
}
input#vatNumber {
  width: 168px;
}

@media (max-width: 600px) {
input#vatNumber {
  width: 1040px;
}
}

input#companyName {
  width: 312px;
}

@media (min-width: 700px) {
#registrationDataBox #companyBox {
  display: flex;
  flex-direction: column;
}

#registrationDataBox #companyBox .form-group {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

#registrationDataBox #companyBox .form-group:nth-child(2) {
}
}

.company-nif--active {
order: 4 !important;
}



@media (min-width: 465px) {

#registrationDataBox .form-group:nth-child(4),
#registrationDataBox .form-group:nth-child(9) {
}
}

@media (min-width: 465px) {

#registrationDataBox .form-group:nth-child(6),
#registrationDataBox .form-group:nth-child(14) {
  margin-left: 0px;
  margin-bottom: 20px;
}
}

@media (min-width: 700px) {

#registrationDataBox .form-group:nth-child(4),
#registrationDataBox .form-group:nth-child(5),
#registrationDataBox .form-group:nth-child(6),
#registrationDataBox .form-group:nth-child(9),
#registrationDataBox .form-group:nth-child(14) {
  width: 100%;
  max-width: 100%;
  display: grid !important;
  align-items: center;
}
}

@media (min-width: 992px) {
#registrationDataBox .form-group input {
  max-width: 100%;
  border: 1px solid var(--special-border, #DBD8D5);
}
}

@media (min-width: 465px) {
#registrationDataBox div:nth-child(7) {
}
}

@media (min-width: 465px) {

#registration .row .col-md-10.mx-auto,
#socialLogin .row .col-md-10.mx-auto {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  max-width: 100%;
  /* font-family: 'Urbanist', sans-serif; */
}
}

#errorModal .modal-content,
#errorModal .modal-header,
#errorModal .modal-footer {
border: 0;
}

#errorModal .modal-content {
border-radius: 0.25rem;
}

#errorModal .modal-header {
padding: 20px 1rem 0 30px;
}

#errorModal .modal-header .close {
outline: 0;
}

#errorModal .modal-body {
padding: 20px 30px;
}

#errorModal .modal-footer {
padding-bottom: 35px;
}

#errorModal .modal-footer .btn-primary {
background-color: #00985f;
border: 0;
color: #fff;
margin: 0 auto;
width: 190px;
height: 40px !important;
border-radius: 50px;
transition: 0.34s all;
}

/* Hamis regisztrációs hiba: csak #errorModal, nem minden backdrop (SF AJAX) */
body.ciam-suppress-registration-error #errorModal,
body.ciam-suppress-registration-error #errorModal.show {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.ciam-registration-loading,
html.ciam-registration-loading {
  overflow: hidden !important;
  cursor: wait !important;
}

body.ciam-registration-loading #registration,
body.ciam-registration-loading .container {
  /* Az overlay fogja a kattintásokat — az űrlap ne legyen interakcióban töltés közben */
  pointer-events: none !important;
  user-select: none !important;
}

.ciam-reg-loading-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  background: rgba(247, 245, 242, 0.88);
  cursor: wait;
  pointer-events: auto;
}

.ciam-reg-loading-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 320px;
  padding: 28px 32px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid #dbd8d5;
  box-shadow: 0 12px 32px rgba(67, 63, 50, 0.12);
  text-align: center;
}

.ciam-reg-loading-spinner {
  width: 40px;
  height: 40px;
  margin-bottom: 16px;
  border: 4px solid #dbd8d5;
  border-top-color: #433f32;
  border-radius: 50%;
  animation: ciam-registration-spin 0.8s linear infinite;
}

.ciam-reg-loading-title {
  margin: 0 0 8px;
  font-family: 'Urbanist', sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  color: #433f32;
}

.ciam-reg-loading-subtitle {
  margin: 0;
  font-family: 'Urbanist', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #8e8c84;
}

#submitBox.ciam-submit-loading {
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#submitBox.ciam-submit-loading fieldset {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 20px auto 0;
  gap: 0;
  border-top: none;
}

#btnSubmit_registration.ciam-submit-loading {
  display: flex !important;
  visibility: visible !important;
  opacity: 0.72 !important;
  cursor: wait !important;
  margin-top: 10px;
  box-shadow: none !important;
}

/* Platform #spinner (Bootstrap) – ne duplikálja a saját töltésjelzést */
#submitBox.ciam-submit-loading #spinner,
#registration #submitBox.ciam-submit-loading ~ #spinner,
#registration #spinner.ciam-reg-spinner-hidden {
  display: none !important;
  visibility: hidden !important;
}

/* Validációs hiba után ne maradjon a platform spinner a CTA-n */
body:not(.ciam-registration-loading) #registration #spinner .spinner-border {
  display: none !important;
  visibility: hidden !important;
}

body:not(.ciam-registration-loading) #registration #btnSubmit_registration.ciam-submit-loading {
  opacity: 1 !important;
  cursor: pointer !important;
}

@keyframes ciam-registration-spin {
  to {
    transform: rotate(360deg);
  }
}

#errorModal .modal-footer .btn-primary:hover {
background-color: #027b4e;
transition: 0.34s all;
}

#blockedEmail .card-body img {
display: none;
}

#changeUserLogin .card-body form {
margin: 0;
}

/**Change User Login**/
@media (min-width: 768px) {
#changeUserLogin .card-body form {
  display: flex;
  flex-flow: wrap;
  align-items: center;
  justify-content: center;
  max-width: 400px;
  margin: 0 auto;
}

#changeUserLogin .card-body form #instructionText,
#changeUserLogin .card-body form #instructionText+.form-group {
  width: 100%;
}

#changeUserLogin .card-body form #passwordBlock {
  margin-left: 20px;
}
}

/***Change Login***/
#forgotPassword .card-body form img {
display: none;
}

#forgotPassword .card-body form .form-text,
#changeUserLogin .card-body form .form-group+.form-text {
color: var(--text-primary, #433f32);
text-align: center;
/* Small/D - Normal - 500 */
font-family: 'Urbanist', sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 20px;
/* 142.857% */
display: block;
text-align: center;
margin-bottom: 40px;
}

.english-page #forgotPassword .card-body form .form-text {
color: var(--text-primary, #433f32);
text-align: center;
/* Small/D - Normal - 500 */
font-family: 'Urbanist', sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 20px;
/* 142.857% */
display: block;
text-align: center;
margin-bottom: 40px;
padding: 0px 10px;
}

#forgotPassword .card-body form .form-group+.form-text,
#changeUserLogin #instructionTextEmail+.form-group+#passwordBlock .form-text {
margin-bottom: 0;
}

#forgotPassword .card-body form .form-group+.form-text,
#changeUserLogin #instructionTextEmail+.form-group+#passwordBlock .form-text {
margin-top: 20px;
}

#changeUserLogin #instructionTextEmail+.form-group+#passwordBlock {
width: 100%;
}

#forgotPassword .card-body form .form-group+.form-text a,
#changeUserLogin #instructionTextEmail+.form-group+#passwordBlock .form-text a {
color: #212529;
}

/**Submit Login***/
#changeUserLogin #instructionTextEmail+.form-group+#passwordBlock {
margin-left: 0;
}

#btnSubmit_confirmRegistrationMobile {
margin-top: 1rem;
}

#emailLabelDiv p,
#instructionText {
text-align: center !important;
}

/*****/
#captchaBox {
margin: 20px 0;
order: 5;
}

/*Átírás*/
#toRegistrationBox {
display: none;
}

#socialBlock {
border-top: 1px dashed var(--special-separator-dash, #c2c0be);
}

#socialBlock #lnkFacebook {
display: none;
}

#socialBlock #lnkGoogle {
display: none;
}

#socialBlock #lnkApple {
display: none;
}

#lastBlock {
display: none;
}

footer .navbar {
display: none;
}

#uname1::placeholder {
color: var(--text-secondary, #8e8c84);
font-family: 'Urbanist', sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 20px;
display: flex; /*added by Farkas Márk 2024-02-08 */
align-items: center; /*added by Farkas Márk 2024-02-08*/
}

#pwd1::placeholder {
color: var(--text-secondary, #8e8c84);
font-family: 'Urbanist', sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 20px;
display: flex; /*added by Farkas Márk 2024-02-08 */
align-items: center; /*added by Farkas Márk 2024-02-08*/
}

:root {
--specialseparatordash: 5px 10px;
}

.card-body .card-body_secondRow .py-0 h1 {
display: none;
}

#signInSeparator h1 {
color: var(--text-primary, #433f32);
text-align: center;
/* Small/D - Normal - 500 */
font-family: 'Urbanist', sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 20px;
/* 142.857% */
}

#signInSeparator button {
color: var(--text-primary, #433f32);
/* Small/D - Link Hover - 700 */
font-family: 'Urbanist', sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 20px;
text-decoration-line: underline;
background: transparent;
border: 0;
}

.switch-container label {
}

.form-group label[for="uname1"] {
display: none;
}

#passwordBlock label {
display: none;
/* width: 240px; */
margin-right: 79px;
}

label {}


#socialBlock .toggle-switch {
position: relative;
width: 100%;
height: 100%;
margin-left: 52.5%;
display: flex;
}

@media (max-width:320px) {
#socialBlock .toggle-switch {
position: relative;
width: 100%;
height: 100%;
margin-left: 36.5%;
display: flex;
}
}

#socialBlock .toggle-switch input[type="checkbox"] {
display: none;
}

#socialBlock .toggle-switch label {
cursor: pointer;
position: absolute;
max-width: 69px;
left: 0;
height: 33.5px;
padding: 4px;
border: 1px solid var(--special-border, #dbd8d5);
background: var(--back-bg-4, #fff);
border-radius: 8px;
}

#socialBlock .toggle-switch input[type="checkbox"]:checked+label:after {
transform: translateX(26px);
content: "EN";
}

#login .card-body .form-control.active {
border-radius: 12px;
border: 1px solid var(--special-border, #dbd8d5);
background: var(--back-bg-2, #f7f5f2);
color: var(--text-primary, #433f32);
font-family: 'Urbanist', sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 900;
line-height: 20px;
}

.card .rounded .mt-4 {
display: none;
}

#socialBlock .toggle-switch label::after {
content: "HU";
position: absolute;
top: 4px;
left: 4px;
width: 33px;
padding: 4px;
height: 24px;
background: var(--back-bg-1, #f3f0ed);
border: 0.5px solid var(--special-border, #dbd8d5);
border-radius: 6px;
transition: transform 0.3s ease;
color: var(--text-primary, #433f32);
font-family: 'Urbanist', sans-serif;
font-size: 12px;
font-style: normal;
font-weight: 900;
line-height: 16px;
/* 133.333% */
text-align: center;
}

#toLogin {
display: none;
}

#registrationSent #toLogin {
display: block;
align-items: center;
width: 172px !important;
margin: 0 auto;
margin-top: 40px;
margin-bottom: 10px;
}

#forgotPassword .card-body .form-group.mb-0 .toggle-switch label::after {
content: "HU";
position: absolute;
top: 4px;
left: 4px;
width: 33px;
padding: 4px;
height: 24px;
background: var(--back-bg-1, #f3f0ed);
border: 0.5px solid var(--special-border, #dbd8d5);
border-radius: 6px;
transition: transform 0.3s ease;
color: var(--text-primary, #433f32);
font-family: 'Urbanist', sans-serif;
font-size: 12px;
font-style: normal;
font-weight: 900;
line-height: 16px;
/* 133.333% */
text-align: center;
}

#forgotPassword .card-body .form-group.mb-0 #btn-AT {
}

.english-page #forgotPassword .card-body .form-group.mb-0 #btn-AT {
margin-left: 16px;
}

@media (max-width:320px) {
.english-page #forgotPassword .card-body .form-group.mb-0 #btn-AT {
margin-left: -7px;
margin-right: 0px !important;
}
}


#forgotPassword .card-body .form-group.mb-0 .toggle-switch {
position: relative;
width: 100%;
height: 100%;
padding: 4px;
margin-left: 91px;
}

.english-page #forgotPassword .card-body .form-group.mb-0 .toggle-switch {
position: relative;
width: 100%;
height: 100%;
padding: 4px;
margin-left: 58px;
}

@media (max-width: 400px) {
.english-page #forgotPassword .card-body .form-group.mb-0 .toggle-switch {
position: relative;
width: 100%;
height: 100%;
padding: 4px;
margin-left: 27px;
}
}

@media (max-width: 400px) {
.english-page #forgotPassword .card-body .form-group.mb-0 .toggle-switch {
position: relative;
width: 100%;
height: 100%;
padding: 4px;
margin-left: 13px;
}
}

@media (max-width: 400px) {
.english-page #forgotPassword .card-body .form-group.mb-0 .toggle-switch {
position: relative;
width: 100%;
height: 100%;
padding: 4px;
margin-left: 15px;
}
}

@media (max-width: 320px) {
.english-page #forgotPassword .card-body .form-group.mb-0 .toggle-switch {
position: relative;
width: 100%;
height: 100%;
padding: 4px;
margin-left: -16px;
}
}

@media (max-width: 400px) {
#forgotPassword .card-body .form-group.mb-0 .toggle-switch {
position: relative;
width: 100%;
height: 100%;
padding: 4px;
margin-left: 44px;
}
}

@media (max-width: 320px) {
#forgotPassword .card-body .form-group.mb-0 .toggle-switch {
position: relative;
width: 100%;
height: 100%;
padding: 4px;
margin-left: -3px;
}
}

#forgotPassword .card-body .form-group.mb-0 .toggle-switch input[type="checkbox"] {
display: none;
}

#forgotPassword .card-body .form-group.mb-0 .toggle-switch label {
cursor: pointer;
position: absolute;
max-width: 69px;
top: 0;
left: 0;
height: 33.5px;
padding: 4px;
border: 1px solid var(--special-border, #dbd8d5);
background: var(--back-bg-4, #fff);
border-radius: 8px;
}

#forgotPassword .card-body .form-group.mb-0 .toggle-switch input[type="checkbox"]:checked+label:after {
transform: translateX(26px);
content: "EN";
}

#forgotPassword .card-body .form-group.mb-0 {
border-top: 1px dashed var(--special-separator-dash, #c2c0be);
}

#forgotPassword .card-body .form-group.mb-0 a {
height: 16px;
border-radius: 20px;
color: var(--text-primary, #433f32);
font-family: 'Urbanist', sans-serif;
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: 16px;
margin-right: 16px;
margin-top: 26px;
white-space: nowrap;
gap: 20px;
cursor: pointer;
}





#forgotPassword .card-body .form-group.mb-0 {
display: flex;
margin-top: 40px;
}

#forgotPassword .card-body .form-group.mb-0 div {
margin-top: 17px;
}

#forgotPassword .form-control {
/*padding: 1.5rem 0.75rem;*/
height: 52px;
}

#forgotPassword {
height: 448px;
width: 440px;
}

@media (max-width: 600px) {
  #forgotPassword {
    height: 448px;
    width: 100%;
  }
}

#registration .card.rounded .card-header h3 {
text-align: left;
}

#registration form {
display: flex;
padding-bottom: 0px;
flex-direction: column;
/* align-items: flex-start; */
/* gap: 20px; */
align-self: stretch;
}

.card {
background-color: #ffffff;
}

#signInSeparator::after {
display: none;
}

#signInSeparator::before {
display: none;
}

#socialBlock a {
height: 16px;
border-radius: 20px;
color: var(--text-primary, #433f32);
font-family: 'Urbanist', sans-serif;
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: 16px;
margin-right: 16px;
white-space: nowrap;
cursor: pointer;
margin-top: 8px;
}

a#btn-ASZF {
  align-items: center;
}

#socialBlock {
padding-top: 26px;
text-align: left;
display: flex;
margin-bottom: 0px !important;
}

div[name="socialBlockInputGroup"] {
display: none;
}

.titleWithSvgText {
font-size: 24px;
position: relative;
}

.svgVonal {
flex: 1 0 0;
}

.titleWithSvg {
display: flex;
padding-top: 40px;
align-items: center;
gap: 40px;
align-self: stretch;
max-width: 840px;
}

#registration {
max-width: 920px;
max-height: 1100px;
/* Vagy bármilyen más érték, amely meghatározza a görgethető tartomány magasságát */
padding-top: 100px;
}


#registration .card-header h3 {
margin-top: 20px;
margin-left: 20px;
color: var(--text-primary, #433F32);
font-family: 'Urbanist', sans-serif;
font-size: 26px;
font-style: normal;
font-weight: 900;
line-height: 32px;
}

#registration .card-header h4,
#registrationDataBox .titleWithSvg h4 {
margin-left: 17px;
color: var(--text-primary, #433F32);
/* Headline/D - H3 - 900 */
font-family: 'Urbanist', sans-serif;
font-size: 22px;
font-style: normal;
font-weight: 900;
line-height: 28px;
}

#signBox {
/* display: flex; */
padding: 0px 20px;
flex-direction: column;
align-items: stretch;
width: 100%;
box-sizing: border-box;
order: 2;
margin-top: 0;
margin-bottom: 20px;
}

/* Kevesebb rés a születési adatok és a Kapcsolattartási adatok között */
#birthdatesection {
  margin-bottom: 0;
}

#birthdatesection .row.form-group {
  row-gap: 0;
}

#signBox > fieldset {
  margin-top: 0;
  padding-top: 0;
  border-top: none !important;
  width: 100%;
  box-sizing: border-box;
}

#registrationDataBox #companySelectorbox {
}





#companySelectorBox {
display: flex;
}

#companySelectorbox .toggle-switch {
position: relative;
width: 100%;
height: 100%;
padding: 4px;
margin-left: 70%;
margin-top: -13%;
}

#companySelectorbox .toggle-switch input[type="checkbox"] {
display: none;
}

#companySelectorbox .toggle-switch label {
cursor: pointer;
position: absolute;
width: 200px;
top: 0;
left: 0;
height: 35.5px;
padding: 4px;
border: 1px solid var(--special-border, #433F32);
background: var(--back-bg-4, #fff);
border-radius: 8px;
}


#companySelectorbox .toggle-switch input[type="checkbox"]:checked+label:after {
transform: translateX(90px);
content: "Vállalkozás";
}

#companySelectorbox .toggle-switch label::after {
content: "Magányszemély";
position: absolute;
top: 4px;
left: 4px;
width: 100px;

padding: 4px;
height: 26px;
background: var(--back-bg-1, #433F32);
border: 0.5px solid var(--special-border, #433F32);
border-radius: 6px;
transition: transform 0.3s ease;
color: var(--text-primary, #FFFFFF);
font-family: 'Urbanist', sans-serif;
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: 16px;
/* 133.333% */
text-align: center;
}

.mezoNev {
color: var(--text-primary, #433F32);
/* Body/D - Normal - 500 */
font-family: 'Urbanist', sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px;
/* 150% */
width: 240px;
}


.dropDown {
width: 152px;
padding: 16px;
margin-left: 6.5rem;
border: 1px solid var(--special-border, #DBD8D5);
border-radius: 12px;
border-color: #DBD8D5;
color: var(--text-secondary, #8E8C84);
/* Small/D - Normal - 500 */
font-family: 'Urbanist', sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 20px;
height: 52px;
background: url('./images/arrow.png') no-repeat right #FFFFFF !important;
background-position-x: 120px;
}

#salutation {
border-radius: 12px;
width: 100%;
max-width: 100%;
height: 52px;
box-sizing: border-box;
}

@media (max-width: 600px) {
#salutation {
  margin-left: 0;
}
}

select#salutation {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--special-border, #DBD8D5);
  height: 52px;
}

#firstName {
height: 52px;
width: 240px;
}

input#firstName {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--special-border, #DBD8D5);
}

@media (max-width: 699px) {
input#firstName {
  width: 100%;
  border: 1px solid var(--special-border, #DBD8D5);
  font-size: 16px;
}
}

#lastName {
height: 52px;
width: 240px;
}

input#lastName {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--special-border, #DBD8D5);
}

@media (max-width: 699px) {
input#lastName {
  width: 100%;
  font-size: 16px;
}
}

#registration .card.rounded {
border-radius: 32px !important;
border: 0;
}

span {
}

#registration .namesBox .inputText {
width: 312px;
border-radius: 12px;
border: 1px solid var(--special-border, #DBD8D5);
background: var(--back-bg-4, #FFF);
height: 52px;
max-height: 52px;
margin-left: 12.2rem;
margin-bottom: 20px;
}

.form-group input {
border-radius: 12px !important;
}

.input-group>.form-control:not(:last-child) {
border-radius: 12px !important;
}



select#birthYear,
select#birthMonth,
select#birthDay {
  width: 100%;
  max-width: 100%;
  height: 52px;
  min-height: 52px;
  padding: 10px 2.5rem 10px 16px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 20px;
}


#signBox #passwordBlock {
/* top: 60%; */
}



#signBox .form-group.emailCim {
position: absolute;
top: 75%;
}

#birthdatesection span {
margin-left: 0;
}

#signBox #email {
width: 100%;
max-width: 100%;
box-sizing: border-box;
border-radius: 12px;
border: 1px solid var(--special-border, #DBD8D5);
background: var(--back-bg-4, #FFF);
height: 52px;
/* max-height: 52px; */
margin-bottom: 0px;
}

@media (max-width: 699px) {
#signBox #email {
  width: 100%;
  margin-bottom: 23px;
  font-size: 16px;
}
}

#birthdatesection .dropDown {
margin-left: 0;
width: 100%;
max-width: 100%;
height: auto;
min-height: 0;
padding: 0;
border: 0;
background: none !important;
box-sizing: border-box;
}

#toRegistration {
cursor: pointer;
}

#languageSelector {
display: none !important;
}

#potfield {
display: none;
}

::-webkit-scrollbar {
width: 12px;
/* A görgetősáv szélessége */
}

::-webkit-scrollbar-thumb {
/* background-color: #F7F5F2; */
/* A görgetősáv csúszka (thumb) színe */
border-radius: 12px;
/* A görgetősáv csúszka (thumb) kerekítése */
}

::-webkit-scrollbar-thumb:hover {
background-color: #DBD8D5;
/* A görgetősáv csúszka (thumb) színe, ha a felhasználó ráviszi az egérmutatót */
}

#newPwd {
display: flex;
width: 100% !important;
flex-direction: column;
align-items: flex-start;
gap: 16px;
padding: 16px;
height: 52px;
border-radius: 12px;
border: 1px solid var(--special-border, #DBD8D5);
background: var(--back-bg-4, #FFF);
}

@media (max-width: 700px) {
#newPwd {
  margin-bottom: 10px;
  width: 100% !important;
  font-size: 16px;
}
}


#confirmPwd {
display: flex;
width: 312px;
flex-direction: column;
align-items: flex-start;
gap: 16px;
padding: 16px;
height: 52px;
border-radius: 12px;
border: 1px solid var(--special-border, #DBD8D5);
background: var(--back-bg-4, #FFF);
/* margin-left: 55px; */
/* margin-right: 249px; */
}

/* input#confirmPwd {
  width: 312px;
  font-size: 16px;
} */

#signBox #passwordBlock .input-group {
margin-left: 0px;
}


#registration #btnSubmit_registration {
width: 213px !important;
margin-top: 10px;
text-align: center;
}

fieldset {
display: flex !important;
border: 1px solid transparent; /* átlátszó keret az egész fieldsetre */
border-top-color: #000; /* csak a felső keret látható */
border-top: 1px dashed #C2C0BE;
padding: 0px; /* térköz a belső elemekhez */
width: 100%;
/* font-family: 'Urbanist', sans-serif; */
flex-direction: column;
}

#registrationDataBoxLegend {
width: 224px;
margin-bottom: 20px;
font-family: 'Urbanist', sans-serif;
font-size: 22px;
font-weight: 900;
color: #433F32;
line-height: 28px;
text-align: left;
}
@media (max-width: 700px) {
#registrationDataBoxLegend {
  width: 191px; /* Rugalmas szélesség a mobilnézet számára */
  margin-bottom: 20px; /* Kis mértékű csökkentés az alsó margón */
  font-size: 18px; /* Kisebb betűméret, hogy jobban illeszkedjen a kisebb képernyőhöz */
  line-height: 24px; /* Kisebb sor magasság */
  /* Nem szükséges változtatni a többi tulajdonságon, hacsak a design nem igényli */
}
}

#signBoxLegend {
width: 100%;
max-width: 100%;
margin-top: 0;
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 1px dashed #C2C0BE;
font-family: 'Urbanist', sans-serif;
font-size: 22px;
font-weight: 900;
color: #433F32;
line-height: 28px;
text-align: left;
box-sizing: border-box;
}

@media (max-width: 600px) {
#signBoxLegend {
  width: 100%;
  margin-bottom: 10px;
  padding-bottom: 8px;
  font-size: 18px; /* Kisebb betűméret a jobb olvashatóság érdekében */
  line-height: 24px; /* A kisebb sor magasság segít a hely megtakarításában */
}
}

#newPasswordBlock {
width: calc(100% / 1 - 10px);
padding: 0px 20px;
order: 3;
}

#registrationPasswordBlock .form-group {
display:flex;
align-items: center;
}

@media (max-width: 699px) {
#registrationPasswordBlock .form-group{
  display: block;
}
}

.col-md-4 {
  max-width: 100%;
}

#registration #passwordBlock .input-group-append div,
#registration #registrationPasswordBlock .input-group-append div,
#uniqueIdForInputGroupText,
#uniqueIdForInputGroupText2 {
  max-width: none;
  max-height: none;
  min-width: 40px;
  min-height: 40px;
  padding: 8px;
  cursor: pointer;
  pointer-events: auto;
}

#uniqueIdForInputGroupText {
}

@media (max-width:600px) {
#uniqueIdForInputGroupText {
  top: 45% !important;
}
}

#uniqueIdForInputGroupText2 {
}

#mobile-consent-error-msg {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

#signBox .form-group:has(#mobileNumber) .invalid-feedback.d-block {
  display: block !important;
  margin-top: 0.5rem;
  color: #db5851;
  font-weight: 700;
}

.form-group #mobileNumber {
  width: 200px;
}

#signBox .form-group #mobileNumber {
width: 100% !important;
max-width: none !important;
}

@media (max-width: 699px) {
.form-group #mobileNumber {
  width: calc(100% - 120px);
  font-size: 16px;
}
}

#passwordBox {
padding: 0px 20px;
order: 3;
margin-bottom: 20px;
}

@media (max-width: 600px) {
#passwordBox {
  margin-bottom: 30px;
}
}



#passwordBoxLegend {
width: 101px;
font-family: 'Urbanist', sans-serif;
font-size: 22px;
font-weight: 900;
color: #433F32;
line-height: 28px;
text-align: left;
margin-bottom: 30px
}

#submitBoxLegend {
width: 1px;
font-family: 'Urbanist', sans-serif;
font-size: 22px;
font-weight: 900;
color: #433F32;
line-height: 28px;
text-align: left;
margin-bottom: 30px
}

#loyaltyBoxLegend {
width: 180px;
font-family: 'Urbanist', sans-serif;
font-size: 22px;
font-weight: 900;
color: #433F32;
line-height: 28px;
text-align: left;
margin-bottom: 30px
}

@media (max-width: 600px) {
#loyaltyBoxLegend {
width: 154px;
font-family: 'Urbanist', sans-serif;
font-size: 18px;
font-weight: 900;
color: #433F32;
line-height: 24px;
text-align: left;
margin-bottom: 40px
}
}

@media (max-width: 600px) {
#passwordBoxLegend {
  font-family: 'Urbanist', sans-serif;
  font-weight: 900;
  font-size: 18px;
  line-height: 24px;
  width: 90px;
}
}

#registrationPasswordBlock .form-group .input-group {
width: 312px
}

@media (max-width: 699px) {
#registrationPasswordBlock .form-group .input-group{
  width: 100%;
}
}

.dynamic-dial-code {
margin-left: 5px;
font-weight: 900;
line-height: 20px;
}

.selected-flag > .iti-flag {
display: none;
}

.flag-container {
background-color: #F7F5F2;
border-radius: 14px

}


.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}

.switch input {
opacity: 0;
width: 0;
height: 60p;

}

.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
/* background-color: #fff; */
-webkit-transition: .4s;
transition: .4s;
width: 183px;
content: "";
border: 1px solid #433F32;
}

.slider:before {
position: absolute;
content: "";
height: 26px;
width: 93px;
left: 3px;
bottom: 3px;
background-color: #433F32;
-webkit-transition: .4s;
transition: .4s;
}

.switch-container.switch-en .slider:before {
  /* Stílusok, amik csak akkor alkalmazódnak, ha az oldal nyelve angol */
  width: 61px;
}

.switch-container.switch-en .slider {
  /* Stílusok, amik csak akkor alkalmazódnak, ha az oldal nyelve angol */
  width: 135px;
}

input:checked + .slider {
}

input:focus + .slider {
}

input:checked + .slider:before {
-webkit-transform: translateX(75px);
-ms-transform: translateX(26px);
transform: translateX(97px);
width: 78px;
}

.switch-container.switch-en input:checked + .slider:before {
-webkit-transform: translateX(75px);
-ms-transform: translateX(26px);
transform: translateX(62px);
width: 65px;
}

/* Kerekített szélek */
.slider.round {
border-radius: 8px;
}

.slider.round:before {
border-radius: 6px;
}

#companySelectorbox .form-group {
display: none
}

.account-type-label {
  display: block;
  font-weight: 500; /* Módosítva a font súlyossága az új értékre */
  font-family: 'Urbanist', sans-serif; /* Betűtípus hozzáadva */
  font-size: 14px; /* Betűméret hozzáadva */
  line-height: 20px; /* Sor magasság hozzáadva */
  letter-spacing: 0em; /* Betűköz hozzáadva */
  text-align: left; /* Szöveg igazítása hozzáadva */
  color: #433F32; /* Szöveg színe hozzáadva */
  margin-bottom: 5px !important;
}

.switch-container {
  position: relative;
  width: 183px;
}

.switch-text {
  position: absolute;
  color: #433F32;
  font-size: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.left-text {
  left: 10px;
  z-index: 1;
  width: 99px;
}

.right-text {
  right: 31px;
  z-index: 1;
  width: 99px;
}

.switch-container.switch-en .right-text {
  right: 68px;
  z-index: 1;
  width: 99px;
}

.switch-text.active {
  color: #ffffff;
}

/* Továbbra is használhatod a korábban megadott CSS szabályokat a .switch és a .slider stílusához */

#companyBox .form-text:not(.vat-number-help) {
  width: 400px;
  margin-left: 231px;
  margin-top: -13px;
  font-family: 'Urbanist', sans-serif;
  font-size: 14px;
  font-style: italic;
  font-weight: 500;
  line-height: 20px;
  color: #8E8C84;
}

#signBox .form-text:not(.mobile-number-help) {
  width: 400px;
  margin-left: 373px;
  margin-top: -17px;
  font-family: 'Urbanist', sans-serif; /* Betűtípus */
  font-size: 14px; /* Betűméret */
  font-style: italic; /* Betűstílus */
  font-weight: 500; /* Betűvastagság */
  line-height: 20px; /* Sorköz */
  letter-spacing: 0em; /* Betűköz */
  text-align: left; /* Szöveg igazítása */
  color: #8E8C84;
}

@media (max-width: 699px) {
#signBox .form-text:not(.mobile-number-help) {
  width: 400px;
  margin-left: 130px;
  margin-top: -5px;
  font-family: 'Urbanist', sans-serif; /* Betűtípus */
  font-size: 14px; /* Betűméret */
  font-style: italic; /* Betűstílus */
  font-weight: 500; /* Betűvastagság */
  line-height: 20px; /* Sorköz */
  letter-spacing: 0em; /* Betűköz */
  text-align: left; /* Szöveg igazítása */
  color: #8E8C84;
}

}

@media (max-width: 700px) {
  #companyBox .form-text {
    margin-left: 0; /* Módosított bal margó mobilnézetre */
    margin-top: 0;
    width: 90%;
    margin-bottom: 30px;
  }
}

#registrationDataBox > fieldset > div > .form-group:has(#salutation) {
  margin-bottom: 20px;
}

#registrationDataBox fieldset > div {
  /* Stílusok itt */
  display: flex;
  flex-direction: column;
}

.shadow-sm {
  box-shadow: none !important;
}

@media (max-width: 700px) {
  label {
      font-family: 'Urbanist', sans-serif; /* Betűtípus */
      font-size: 14px; /* Betűméret */
      font-weight: 500; /* Betűvastagság */
      line-height: 20px; /* Sorköz */
      letter-spacing: 0em; /* Betűköz */
      text-align: left; /* Szöveg igazítása */
      color: #433F32; /* Szöveg színe */
  }
}


#loyaltyTeCBox {
display: flex !important;
flex-direction: column;
align-items: center;
margin-top: -20px;
}

@media (max-width: 600px) {
#loyaltyTeCBox {
  align-items: normal;
  margin-top: -40px;
}
}

#loyaltyTeC + .custom-control-label {
display: none !important;
}

.custom-control.custom-checkbox .custom-control-label a[href="https://www.auchan.hu/szabalyzatok"] {
  /* CSS szabályok ide */
  color: #d91b1b; /* Példaként változtatjuk meg a link színét */
  text-decoration: no-underline; /* Aláhúzás hozzáadása vagy más stílus */
}

#submitBox fieldset {
align-items: center;
}

#loyaltyBox > fieldset > label {
display:none;
}

#loyaltyTeCBox .custom-control-label {
width: 528px;
display: flex;
margin-left: 235px;
}

label.custom-control-label {}

label.custom-control-label {}

@media (max-width: 600px) {
#loyaltyTeCBox .custom-control-label {
width: 100%;
margin-left: 0px;
}
}

#SUI_01 + .custom-control-label {
order: 2 !important;
}

#AIT_01 + .custom-control-label {
order: 3 !important;
margin-bottom: 0px !important;
}

#termsAndConditions + .custom-control-label {
order: 1 !important;
}

.english-page a#btn-ASZF {

}

.english-page a#btn-AT {
margin-left: 78px;
}

@media (max-width: 320px) {
.english-page a#btn-AT {
margin-left: 64px;
}

}

.english-page #socialBlock .toggle-switch {
margin-left: 94px;
text-align: right;
}

@media(max-width: 450px) {
.english-page #socialBlock .toggle-switch {
margin-left: 78px;
text-align: right;
}
}

@media(max-width: 400px) {
.english-page #socialBlock .toggle-switch {
margin-left: 37px;
text-align: right;
}
}

@media(max-width: 320px) {
.english-page #socialBlock .toggle-switch {
margin-left: -4px;
text-align: right;
}
}

.english-page #socialBlock .toggle-switch label {
margin-left: 20px;
}

@media (max-width: 600px) {
.english-page #socialBlock .toggle-switch label {
  margin-left: 32px;
}
}

@media (max-width: 600px) {
#login .card-header h3  {
  margin-bottom: 20px !important;
}
}

.english-page #registrationDataBoxLegend {
  width: 278px;
  margin-bottom: 30px;
  font-family: 'Urbanist', sans-serif;
  font-size: 22px;
  font-weight: 900;
  color: #433F32;
  line-height: 28px;
  text-align: left;
}

.english-page #signBoxLegend {
width: 217px;
margin-bottom: 30px;
font-family: 'Urbanist', sans-serif;
font-size: 22px;
font-weight: 900;
color: #433F32;
line-height: 28px;
text-align: left;
}

.english-page #passwordBoxLegend {
width: 147px;
font-family: 'Urbanist', sans-serif;
font-size: 22px;
font-weight: 900;
color: #433F32;
line-height: 28px;
text-align: left;
margin-bottom: 30px
}

.english-page #loyaltyBoxLegend {
width: 177px;
font-family: 'Urbanist', sans-serif;
font-size: 22px;
font-weight: 900;
color: #433F32;
line-height: 28px;
text-align: left;
margin-bottom: 30px
}

@media (max-width:600px) {
.english-page #registrationDataBoxLegend {
  width: 198px;
  margin-bottom: 30px;
  font-family: 'Urbanist', sans-serif;
  font-size: 18px;
  font-weight: 900;
  color: #433F32;
  line-height: 28px;
  text-align: left;
}

.english-page #signBoxLegend {
width: 157px;
margin-bottom: 30px;
font-family: 'Urbanist', sans-serif;
font-size: 18px;
font-weight: 900;
color: #433F32;
line-height: 28px;
text-align: left;
}

.english-page #passwordBoxLegend {
width: 127px;
font-family: 'Urbanist', sans-serif;
font-size: 18px;
font-weight: 900;
color: #433F32;
line-height: 28px;
text-align: left;
margin-bottom: 30px
}

.english-page #loyaltyBoxLegend {
width: 145px;
font-family: 'Urbanist', sans-serif;
font-size: 18px;
font-weight: 900;
color: #433F32;
line-height: 28px;
text-align: left;
margin-bottom: 30px
}
}

#loyaltyBox fieldset .custom-control.custom-checkbox  {
  margin-bottom: 0px; /* Alulra egy kis térköz */
  padding: 10px; /* Belső térköz */
  width: 100%;
}

#loyaltyBox fieldset .custom-control.custom-checkbox .custom-control-label {
  margin-bottom: 20px; /* Alulra egy kis térköz */
   /* Belső térköz */
  width: 528px;
  margin-left: 239px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

@media (max-width: 600px) {
#loyaltyBox fieldset .custom-control.custom-checkbox .custom-control-label {
  margin-bottom: 20px; /* Alulra egy kis térköz */
   /* Belső térköz */
  width: 100%;
  margin-left: 0px;
}
}

@media (max-width: 900px) {
#loyaltyBox fieldset .custom-control.custom-checkbox .custom-control-label {
  margin-bottom: 10px; /* Alulra egy kis térköz */
   /* Belső térköz */
  width: 300px;
  margin-left: 245px;
}
}

@media (max-width: 700px) {
#loyaltyBox fieldset .custom-control.custom-checkbox .custom-control-label {
  margin-left: 0px;
  width: 100%
}
}

.custom-control-input:checked~.custom-control-label::before {
  color: #fff;
  border-color: #75CA9D;
  background-color: #569775;

}

.custom-control-input:focus~.custom-control-label::before {
  box-shadow: 0 0 0 .2rem rgb(31 23 23 / 0%)
}

.custom-control-input:focus:not(:checked)~.custom-control-label::before {
  border-color: #9399a0
}

/* Általános kapcsoló stílus */
#switch-container1 {
display: flex;
justify-content: center;
align-items: center;
padding: 4px;
margin: auto;
width: 67px;
height: 32px;
background: #FFFFFF;
border: 1px solid #DBD8D5;
border-radius: 8px;
margin-right: 0px;
}

/* Kapcsoló címkéje */
#label-switch1 {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
position: relative;
width: 100%;
height: 100%;
}

/* "HU" és "EN" szövegek stílusa */
#text-hu1, #text-en1 {
font-family: 'Urbanist', sans-serif;
font-weight: 900;
font-size: 12px;
line-height: 16px;
color: #433F32;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}

/* Bal oldali szöveg */
#text-hu1 {
order: 0;
flex-grow: 0;
left: -35px;
margin-top: 4px;
}

/* Jobb oldali szöveg */
#text-en1 {
order: 2;
flex-grow: 0;
right: -36px;
margin-top: 4px;
}

/* Kapcsoló mozgó részének stílusa */
#slider-round1 {
position: absolute;
background: #F3F0ED;
border: 0.5px solid #DBD8D5;
border-radius: 6px;
width: 30px;
height: 24px;
left: -1px; /* Kezdő pozíció, amit igény szerint módosíthatsz */
top: 3px; /* Középre igazítás miatt */
transition: transform 0.3s ease-in-out;
}

/* Checkbox állapotától függő stílusváltás */
#language-switch:checked + #slider-round1 {
transform: translateX(27px); /* Az érték a kapcsoló szélességének függvényében változhat */
}

#slider-round1::before {
content: ""; /* Kötelező a ::before esetében */
/* Itt állítsd be a további stílusokat, amiket alkalmazni szeretnél */
width: 100%; /* Példa szélességre */
height: 100%; /* Példa magasságra */
background: #f3f0ed00; /* Példa háttérszínre */
border-radius: 6px; /* Példa kerekített sarkokra */
/* További stílusok... */
}

#switch-container1 .switch input:checked + .slider {
transform: translateX(29px);
}

@media (max-width: 576px), (max-height: 720px){
  .form-group {
      margin-bottom: 1rem;
  }
}

.intl-tel-input .country-list li.divider {
display: none;
}

#dropdownMenubirthDay {
list-style-type: none;
padding: 0;
margin: 0;
display: none; /* Kezdetben elrejtve, JS fogja kezelni a megjelenítését */
position: absolute;
width: 100%;
border: 1px solid #ccc;
background-color: white;
max-height: 200px;
overflow-y: auto;
z-index: 1000; /* Biztosítja, hogy a menü más elemek felett jelenjen meg */
border-radius: 12px;
margin-top: 8px;
width: 312px;
max-width: 100%;
filter: drop-shadow(0px 8px 24px rgba(67, 63, 50, 0.12));
}

#displayBoxbirthDay {
width: 100%;
padding: 10px 2.5rem 10px 16px;
cursor: default;
height: 52px;
min-height: 52px;
max-height: 52px;
border-radius: 12px;
border: 1px solid var(--special-border, #DBD8D5);
font-size: 16px;
text-align: left;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNS4xIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjQgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZmlsbD0iIzQzM2YzMiIgZD0iTTIzMy40IDQwNi42YzEyLjUgMTIuNSAzMi44IDEyLjUgNDUuMyAwbDE5Mi0xOTJjMTIuNS0xMi41IDEyLjUtMzIuOCAwLTQ1LjNzLTMyLjgtMTIuNS00NS4zIDBMMjU2IDMzOC43IDg2LjYgMTY5LjRjLTEyLjUtMTIuNS0zMi44LTEyLjUtNDUuMyAwcy0xMi41IDMyLjggMCA0NS4zbDE5MiAxOTJ6Ii8+PC9zdmc+);
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 12px 12px;
width: 100%;
max-width: 100%;
align-content: center;
box-sizing: border-box;
}



#dropdownMenubirthMonth {
list-style-type: none;
padding: 0;
margin: 0;
display: none; /* Kezdetben elrejtve, JS fogja kezelni a megjelenítését */
position: absolute;
width: 100%;
border: 1px solid #ccc;
background-color: white;
max-height: 200px;
overflow-y: auto;
z-index: 1000; /* Biztosítja, hogy a menü más elemek felett jelenjen meg */
border-radius: 12px;
margin-top: 8px;
width: 312px;
max-width: 100%;
filter: drop-shadow(0px 8px 24px rgba(67, 63, 50, 0.12));
}

#displayBoxbirthMonth {
padding: 10px 2.5rem 10px 16px;
cursor: default;
height: 52px;
min-height: 52px;
max-height: 52px;
border-radius: 12px;
border: 1px solid var(--special-border, #DBD8D5);
font-size: 16px;
text-align: left;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNS4xIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjQgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZmlsbD0iIzQzM2YzMiIgZD0iTTIzMy40IDQwNi42YzEyLjUgMTIuNSAzMi44IDEyLjUgNDUuMyAwbDE5Mi0xOTJjMTIuNS0xMi41IDEyLjUtMzIuOCAwLTQ1LjNzLTMyLjgtMTIuNS00NS4zIDBMMjU2IDMzOC43IDg2LjYgMTY5LjRjLTEyLjUtMTIuNS0zMi44LTEyLjUtNDUuMyAwcy0xMi41IDMyLjggMCA0NS4zbDE5MiAxOTJ6Ii8+PC9zdmc+);
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 12px 12px;
width: 100%;
max-width: 100%;
align-content: center;
box-sizing: border-box;
}

#displayBoxbirthMonth::before {
content: '';
}

#dropdownMenubirthYear {
list-style-type: none;
padding: 0;
margin: 0;
display: none; /* Kezdetben elrejtve, JS fogja kezelni a megjelenítését */
position: absolute;
width: 100%;
border: 1px solid #ccc;
background-color: white;
max-height: 200px;
overflow-y: auto;
z-index: 1000; /* Biztosítja, hogy a menü más elemek felett jelenjen meg */
border-radius: 12px;
margin-top: 8px;
width: 312px;
max-width: 100%;
filter: drop-shadow(0px 8px 24px rgba(67, 63, 50, 0.12));
}

#displayBoxbirthYear {
width: 100%;
padding: 10px 2.5rem 10px 16px;
cursor: default;
height: 52px;
min-height: 52px;
max-height: 52px;
border-radius: 12px;
border: 1px solid var(--special-border, #DBD8D5);
font-size: 16px;
text-align: left;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNS4xIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjQgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZmlsbD0iIzQzM2YzMiIgZD0iTTIzMy40IDQwNi42YzEyLjUgMTIuNSAzMi44IDEyLjUgNDUuMyAwbDE5Mi0xOTJjMTIuNS0xMi41IDEyLjUtMzIuOCAwLTQ1LjNzLTMyLjgtMTIuNS00NS4zIDBMMjU2IDMzOC43IDg2LjYgMTY5LjRjLTEyLjUtMTIuNS0zMi44LTEyLjUtNDUuMyAwcy0xMi41IDMyLjggMCA0NS4zbDE5MiAxOTJ6Ii8+PC9zdmc+);
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 12px 12px;
width: 100%;
max-width: 100%;
align-content: center;
box-sizing: border-box;
}

#displayBoxbirthYear::before {
content: '';
}

#dropdownMenubirthsalutation {
list-style-type: none;
padding: 0;
margin: 0;
display: none; /* Kezdetben elrejtve, JS fogja kezelni a megjelenítését */
position: absolute;
width: 100%;
border: 1px solid #ccc;
background-color: white;
max-height: 200px;
overflow-y: auto;
z-index: 1000; /* Biztosítja, hogy a menü más elemek felett jelenjen meg */
border-radius: 12px;
margin-top: 8px;
width: 152px;
filter: drop-shadow(0px 8px 24px rgba(67, 63, 50, 0.12));
}

#registrationDataBox #salutation,
select#salutation {
width: 100%;
max-width: 100%;
padding: 10px 2.5rem 10px 16px;
box-sizing: border-box;
cursor: default;
height: 52px;
min-height: 52px;
max-height: 52px;
border-radius: 12px;
border: 1px solid var(--special-border, #DBD8D5);
font-size: 16px;
line-height: 20px;
text-align: left;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNS4xIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjQgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZmlsbD0iIzQzM2YzMiIgZD0iTTIzMy40IDQwNi42YzEyLjUgMTIuNSAzMi44IDEyLjUgNDUuMyAwbDE5Mi0xOTJjMTIuNS0xMi41IDEyLjUtMzIuOCAwLTQ1LjNzLTMyLjgtMTIuNS00NS4zIDBMMjU2IDMzOC43IDg2LjYgMTY5LjRjLTEyLjUtMTIuNS0zMi44LTEyLjUtNDUuMyAwcy0xMi41IDMyLjggMCA0NS4zbDE5MiAxOTJ6Ii8+PC9zdmc+);
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 12px 12px;
margin: 0;
}

#displayBoxbirthsalutation::before {
content: '';
}

input#middleName {
height: 52px;
width: 312px;
}

select#documentType {
height: 52px;
width: 312px;
border-radius: 12px !important;
border: 1px solid var(--special-border, #DBD8D5);
}

input#address {
height: 52px;
width: 312px;
border: 1px solid var(--special-border, #DBD8D5);
}
@media (max-width: 699px) {
input#address {
  width: 100%;
  font-size: 16px;
}
}

input#addressCompl1 {
height: 52px;
width: 312px;
border: 1px solid var(--special-border, #DBD8D5);
}
@media (max-width: 699px) {
input#addressCompl1 {
  width: 100%;
  font-size: 16px;
}
}

input#addressCompl2 {
height: 52px;
width: 312px;
border: 1px solid var(--special-border, #DBD8D5);
}
@media (max-width: 699px) {
input#addressCompl2 {
  width: 100%;
  font-size: 16px;
}
}

input#addressCompl3 {
height: 52px;
width: 312px;
border: 1px solid var(--special-border, #DBD8D5);
}
@media (max-width: 699px) {
input#addressCompl3 {
  width: 100%;
  font-size: 16px;
}
}

input#addressCompl4 {
height: 52px;
width: 312px;
border: 1px solid var(--special-border, #DBD8D5);
}
@media (max-width: 699px) {
input#addressCompl4 {
  width: 100%;
  font-size: 16px;
}
}

input#city {
height: 52px;
width: 312px;
border: 1px solid var(--special-border, #DBD8D5);
}
@media (max-width: 699px) {
input#city {
  width: 100%;
  font-size: 16px;
}
}

select#country {
height: 52px;
width: 312px;
border-radius: 12px !important;
border: 1px solid var(--special-border, #DBD8D5);
}

select#language {
height: 52px;
width: 312px;
border-radius: 12px !important;
border: 1px solid var(--special-border, #DBD8D5);
}

input#documentNumber {
height: 52px;
width: 312px;
border: 1px solid var(--special-border, #DBD8D5);
}

input#postalCode {
height: 52px;
width: 312px;
border: 1px solid var(--special-border, #DBD8D5);
}
@media (max-width: 699px) {
input#postalCode {
  width: 100%;
  font-size: 16px;
}
}

#signBox > fieldset > div > .form-group:has(#postalCode),
#signBox > fieldset > div > .form-group:has(#city),
#signBox > fieldset > div > .form-group:has(#address),
#signBox > fieldset > div > .form-group:has(#addressCompl1),
#signBox > fieldset > div > .form-group:has(#addressCompl2),
#signBox > fieldset > div > .form-group:has(#addressCompl3),
#signBox > fieldset > div > .form-group:has(#addressCompl4) {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

@media (max-width: 699px) {
  #signBox > fieldset > div > .form-group:has(#postalCode),
  #signBox > fieldset > div > .form-group:has(#city),
  #signBox > fieldset > div > .form-group:has(#address),
  #signBox > fieldset > div > .form-group:has(#addressCompl1),
  #signBox > fieldset > div > .form-group:has(#addressCompl2),
  #signBox > fieldset > div > .form-group:has(#addressCompl3),
  #signBox > fieldset > div > .form-group:has(#addressCompl4) {
    display: block;
  }
}

/* mobile-number-help: see layout block at end of file */

/* HU regisztráció: nem használt mezők (main.js hideFieldsRegisterForm) */
#registrationDataBox .form-group.ciam-field-hidden,
#signBox .form-group.ciam-field-hidden,
.form-group.ciam-field-hidden,
#registrationDataBox .form-group:has(#documentType),
#registrationDataBox .form-group:has(#documentNumber),
#registrationDataBox .form-group:has(#country),
#registrationDataBox .form-group:has(#language),
#registrationDataBox .form-group:has(#landlineNumber),
#registrationDataBox .form-group:has(#middleName),
#signBox .form-group:has(#documentType),
#signBox .form-group:has(#documentNumber),
#signBox .form-group:has(#country),
#signBox .form-group:has(#language),
#signBox .form-group:has(#landlineNumber),
#signBox .form-group:has(#middleName) {
  display: none !important;
}

#signBox > fieldset > div {
display: flex;
flex-direction: column;
width: 100%;
box-sizing: border-box;
}

#termsAndConditionsLink {
color: #1D1E20; /* vagy bármilyen szín */
font-weight: 700;
text-decoration: underline; /* vagy bármilyen egyéb stílus */
}

#termsAndConditionsLink:hover {
color: #1d1e20de;
cursor: pointer; /* opcionális, megváltoztatja az egérmutató ikont, hogy jelzi a kattinthatóságot */
font-weight: 700;
text-decoration: none;
}

#privacyPolicyLink {
color: #1D1E20; /* vagy bármilyen szín */
font-weight: 700;
text-decoration: underline; /* vagy bármilyen egyéb stílus */
}

#privacyPolicyLink:hover {
color: #1d1e20de; /* vagy bármilyen más szín, amit szeretnél a hover állapotban használni */
cursor: pointer; /* opcionális, megváltoztatja az egérmutató ikont, hogy jelzi a kattinthatóságot */
font-weight: 700;
text-decoration: none;
}

#dropdownMenubirthDay li:hover, #dropdownMenubirthMonth li:hover, #dropdownMenubirthYear li:hover {
  background-color: #f0f0f0;
}

/* Csak WebKit-alapú böngészők számára */
#dropdownMenubirthDay::-webkit-scrollbar, #dropdownMenubirthMonth::-webkit-scrollbar, #dropdownMenubirthYear::-webkit-scrollbar { 
  display: none; /* Elrejti a görgetősávot */
}

#dropdownMenubirthDay li:focus, #dropdownMenubirthMonth li:focus, #dropdownMenubirthYear li:focus {
outline: none;
background-color: #f0f0f0;
}

.invalid-input-highlight-lastname {
border: 1px solid #E0574F !important; /* Piros keret */
background-color: #e0574f24 !important; /* Rózsaszín háttér */
}

.invalid-input-highlight-lastname::placeholder {
color: #E0574F; /* Piros placeholder szöveg */
font-weight: 900;
font-size: 14px;
line-height: 20px;
}

.invalid-input-highlight-firstname {
border: 1px solid #E0574F !important; /* Piros keret */
background-color: #e0574f24 !important; /* Rózsaszín háttér */
}

.invalid-input-highlight-firstname::placeholder {
color: #E0574F; /* Piros placeholder szöveg */
font-weight: 900;
font-size: 14px;
line-height: 20px;
}

.invalid-input-highlight-email {
border: 1px solid #E0574F !important; /* Piros keret */
background-color: #e0574f24 !important; /* Rózsaszín háttér */
}

.invalid-input-highlight-email::placeholder {
color: #E0574F; /* Piros placeholder szöveg */
font-weight: 900;
font-size: 14px;
line-height: 20px;
}

.invalid-input-highlight-postalcode {
border: 1px solid #E0574F !important; /* Piros keret */
background-color: #e0574f24 !important; /* Rózsaszín háttér */
}

.invalid-input-highlight-postalcode::placeholder {
color: #E0574F; /* Piros placeholder szöveg */
font-weight: 900;
font-size: 14px;
line-height: 20px;
}

.invalid-input-highlight-city {
border: 1px solid #E0574F !important; /* Piros keret */
background-color: #e0574f24 !important; /* Rózsaszín háttér */
}

.invalid-input-highlight-city::placeholder {
color: #E0574F; /* Piros placeholder szöveg */
font-weight: 900;
font-size: 14px;
line-height: 20px;
}

.invalid-input-highlight-newPwd {
border: 1px solid #E0574F !important; /* Piros keret */
background-color: #e0574f24 !important; /* Rózsaszín háttér */
}

.invalid-input-highlight-newPwd::placeholder {
color: #E0574F; /* Piros placeholder szöveg */
font-weight: 900;
font-size: 14px;
line-height: 20px;
}

.invalid-input-highlight-confirmPwd {
border: 1px solid #E0574F !important; /* Piros keret */
background-color: #e0574f24 !important; /* Rózsaszín háttér */
}

.invalid-input-highlight-confirmPwd::placeholder {
color: #E0574F; /* Piros placeholder szöveg */
font-weight: 900;
font-size: 14px;
line-height: 20px;
}

.invalid-input-highlight-companyName {
border: 1px solid #E0574F !important; /* Piros keret */
background-color: #e0574f24 !important; /* Rózsaszín háttér */
}

.invalid-input-highlight-companyName::placeholder {
color: #E0574F; /* Piros placeholder szöveg */
font-weight: 900;
font-size: 14px;
line-height: 20px;
}

.invalid-input-highlight-vatNumber {
border: 1px solid #E0574F !important; /* Piros keret */
background-color: #e0574f24 !important; /* Rózsaszín háttér */
}

.invalid-input-highlight-vatNumber::placeholder {
color: #E0574F; /* Piros placeholder szöveg */
font-weight: 900;
font-size: 14px;
line-height: 20px;
}

.invalid-input-highlight {
border: 1px solid #E0574F !important; /* Piros keret */
background-color: #e0574f24 !important; /* Rózsaszín háttér */
color: #E0574F; /* Piros szín */
font-weight: 900; /* Félkövér szöveg */
font-size: 14px !important; /* 14px-es betűméret */
line-height: 20px; /* 20px-es sorköz */
}

.invalid-input-highlight-mobilenumber {
border: 1px solid #E0574F !important; /* Piros keret */
background-color: #e0574f24 !important; /* Rózsaszín háttér */
}

.invalid-input-highlight-mobilenumber::placeholder {
color: #E0574F; /* Piros placeholder szöveg */
font-weight: 900;
font-size: 14px;
line-height: 20px;
}

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

#registrationSent .card.rounded .card-body fieldset {
border-top: 1px dashed #C2C0BE;
border-bottom: 1px dashed #C2C0BE;
}

.material-symbols-outlined {
color: #5972D2;
display: block !important;
align-content: center;
margin-bottom: 20px !important;
font-size: 40px !important;
background-color: #5972d240;
border-radius: 50px;
height: 70px;
width: 70px;
margin: 0 auto;
}

/* Tooltip stílus a jelszómező fölött */
.password-tooltip {
  position: absolute;
  top: -130px;
  left: 0;
  width: 100%; /* Width will be adjusted based on content */
  /* border: 1px solid #3A8EBA; */ /* Changed to a blue border */
  background-color: #5972D2; /* Light blue background */
  color: #FFFFFF; /* Darker blue text */
  font-weight: 400; /* Bold text */
  font-size: 13px; /* Text size */
  line-height: 20px; /* Line height */
  padding: 10px; /* Increased padding for better spacing */
  border-radius: 12px; /* Rounded corners */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Soft shadow for 3D effect */
  display: none; /* Ensures the tooltip is shown */
}

/* CSS for the tooltip arrow */
.password-tooltip::after {
  content: "";
  position: absolute;
  top: 100%; /* Arrow at the bottom of the tooltip */
  left: 20px; /* Position the arrow - adjust as needed */
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #5972D2 transparent transparent transparent; /* Arrow color */
}
#confirmPasswordTooltip.password-tooltip::after {
content: "";
position: absolute;
top: 100%; /* Arrow at the top of the tooltip */
left: 20px; /* Position the arrow - adjust as needed */
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #5972D2 transparent; /* Arrow color */
top: -10px;
}
.password-tooltip ul {
  /* Itt írhatod be a kívánt CSS tulajdonságokat az ul elemhez */
  margin: 0;
  padding: 0;
  list-style-type: none;
}

@media (max-width:420px) {
.password-tooltip {
position: absolute;
top: -160px;
left: 0;
width: 100%;
/* border: 1px solid #E0574F; */
background-color: #5972D2;
color: #FFFFFF;
font-weight: 500; /* Félkövér szöveg */
font-size: 13px; /* 14px-es betűméret */
line-height: 20px; /* 20px-es sorköz */
padding: 5px 10px;
border-radius: 12px;
display: none;
}
}

/* Tooltip stílus a jelszómező fölött */
#confirmPasswordTooltip {
position: absolute;
top: 60px;
left: 0;
width: 100%;
border: 1px solid #5972D2;
/* background-color: #ffe3e1; */
color: #FFFFFF;
font-weight: 400; /* Félkövér szöveg */
font-size: 13px; /* 14px-es betűméret */
line-height: 20px; /* 20px-es sorköz */
padding: 5px 10px;
border-radius: 12px;
display: none;
}

@media (max-width:420px) {
#confirmPasswordTooltip {
position: absolute;
top: 60px;
left: 0;
width: 100%;
/* border: 1px solid #5972D2; */
background-color: #5972D2;
color: #FFFFFF;
font-weight: 500; /* Félkövér szöveg */
font-size: 13px; /* 14px-es betűméret */
line-height: 20px; /* 20px-es sorköz */
padding: 5px 10px;
border-radius: 12px;
display: none;
}
}

#registration .is-invalid~.invalid-feedback {
display: none !important;
}

#registration .form-group:has(#email[data-ciam-duplicate-email="true"]) .invalid-feedback,
#registration .form-group:has(#email[data-ciam-duplicate-email="true"]) .text-danger {
display: none !important;
}

#registration .ciam-email-duplicate-error {
display: block !important;
}

/* Duplikált email / regisztrációs hiba: ne jelenjen meg a „sikeres regisztráció” képernyő */
body.ciam-registration-failed #registrationSent,
body.ciam-registration-failed #registrationSent.show,
body.ciam-registration-failed #registrationSent.card,
html body.ciam-registration-failed #registrationSent {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
body.ciam-registration-failed #registration,
html body.ciam-registration-failed #registration {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
body.ciam-registration-failed #errorModal,
body.ciam-registration-failed #errorModal.show {
  display: none !important;
}
body.ciam-registration-failed #ciam-reg-loading-overlay,
body.ciam-registration-failed.ciam-registration-loading #ciam-reg-loading-overlay,
html.ciam-registration-failed #ciam-reg-loading-overlay,
body.ciam-registration-failed .ciam-reg-loading-overlay {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}
body.ciam-registration-failed,
body.ciam-registration-failed.ciam-registration-loading,
html.ciam-registration-failed.ciam-registration-loading {
  overflow: auto !important;
  cursor: auto !important;
}

/* Egyetlen látható CTA: #btnSubmit_registration — a #spinner rejtve marad */
#registration #spinner,
#registration #spinner.ciam-reg-spinner-hidden,
#submitBox.ciam-submit-loading #spinner,
#registration #submitBox.ciam-submit-loading ~ #spinner {
  display: none !important;
  visibility: hidden !important;
}

#registration #btnSubmit_registration {
  display: flex !important;
  visibility: visible !important;
  align-items: center;
  justify-content: center;
}

/* Hiba után a CTA legyen újra kattintható felirattal */
body.ciam-registration-failed #submitBox {
  pointer-events: auto !important;
}
body.ciam-registration-failed #registration #btnSubmit_registration,
body.ciam-registration-failed #registration #btnSubmit_registration.ciam-submit-loading {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}
body.ciam-registration-failed #registration #spinner {
  display: none !important;
  visibility: hidden !important;
}
body.ciam-registration-failed #feErrors {
  display: none !important;
}
body.ciam-registration-failed #registration,
body.ciam-registration-failed.ciam-registration-loading #registration,
body.ciam-registration-failed.ciam-registration-loading .container {
  pointer-events: auto !important;
  user-select: auto !important;
}

#signBox > fieldset > div > .form-group:has(#email[data-ciam-duplicate-email="true"]) {
  align-items: start;
  row-gap: 8px;
}

#signBox .form-group:has(#email) #email-registration-error-msg,
#registration #signBox .form-group:has(#email) .ciam-email-duplicate-error {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 8px 0 0 0;
  padding: 0.75rem 1.25rem;
  background-color: #fde9e6;
  border: 1px solid #a87978;
  color: #db5851;
  border-radius: 0.375rem;
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.4;
  text-align: left;
}

@media (max-width: 699px) {
  #signBox .form-group:has(#email) #email-registration-error-msg,
  #registration #signBox .form-group:has(#email) .ciam-email-duplicate-error {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 100%;
  }
}

.text-danger {
color: #dc3545 !important;
width: 100%;
}

.text-danger {
color: #dc3545 !important;
width: 100% !important;
margin-left: 20px;
margin-bottom: 20px !important;
}

#resetPassword #passwordBlock .form-text{
text-align: center;
margin-top: 10px;
margin-bottom: 20px;
}

#resetPassword .card-body .form-group:nth-child(3) {
margin-bottom: 20px;
}

#resetPassword #passwordBlock .custom-control-label {
display: block;
text-align: left;
padding: 10px 0 0 10px;
}

#resetPassword #passwordBlock .custom-control-label:before {
content: "";
position: absolute;
left: -18px;
top: 9px;
width: 20px;
height: 20px;
border: 2px solid #333; /* Vastagabb keret az egyértelműség kedvéért */
border-radius: 4px; /* Kisebb sugár a négyzethatáshoz */
background-color: transparent;
box-sizing: border-box; /* Biztosítja, hogy a keret ne növelje az elem méretét */
}
#resetPassword #passwordBlock .custom-control-input:checked + .custom-control-label:before {
content: "✔"; /* Unicode pipa karakter */
color: #e8e3e3; /* Pipa színe */
font-size: 16px; /* Pipa mérete */
line-height: 20px; /* Középre igazítás vertikálisan */
text-align: center; /* Középre igazítás horizontálisan */
background-color: #569775; /* Háttérszín, ha szükséges */
border: 2px solid #333; /* Vastagabb keret az egyértelműség kedvéért */
border-radius: 4px; /* Kisebb sugár a négyzethatáshoz */
}

#resetPassword #passwordBlock .form-group.mb-0 {
margin-top: 30px;
}
#login .form-group {
  position: relative;
  margin-bottom: 1.5rem;
}

/* Keep login password input full width even with visibility toggle append icon. */
#login #passwordBlock,
#login #passwordBlock .form-group,
#login #passwordBlock .input-group,
#login #passwordBlock #pwd1 {
  width: 100%;
}

#login #passwordBlock .input-group {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
}

#login #passwordBlock .input-group > .form-control,
#login #passwordBlock .input-group > input#pwd1 {
  flex: 1 1 auto !important;
  width: 1% !important;
  min-width: 0 !important;
}

#login .form-group label[for="uname1"] {
  position: absolute;
  top: 5px; /* Adjust as needed */
  left: 12px; /* Adjust as needed */
  padding: 0 5px;
  transition: 0.3s ease all;
  color: #8E8C84; /* Secondary text color */
  font-size: 0.75rem;
  display: none; /* Initially hidden */
}
#forgotPassword .form-group label[for="uname1"] {
  position: absolute;
  top: 5px; /* Adjust as needed */
  left: 12px; /* Adjust as needed */
  padding: 0 5px;
  transition: 0.3s ease all;
  color: #8E8C84; /* Secondary text color */
  font-size: 0.75rem;
  display: none; /* Initially hidden */
}

#login .form-group input[for="uname1"] {
  width: 100%;
  padding: 1rem;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 30px;
  font-size: 1rem;
  border: 1px solid #ced4da;
  border-radius: 12px; /* Rounded corners */
  box-sizing: border-box;
}

#forgotPassword .form-group input[for="uname1"] {
  width: 100%;
  padding: 1rem;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 30px;
  font-size: 1rem;
  border: 1px solid #ced4da;
  border-radius: 12px; /* Rounded corners */
  box-sizing: border-box;
}

#login .form-group input:focus {
border: 1px solid #92908E;
}
input:not(:focus):placeholder-shown {
  background-color: #fdfdfd; /* Világos szürke, amikor a mező üres */
}

#login input:not(:placeholder-shown):not(:focus) {
  background-color: #F7F5F2
; /* Kissé sötétebb szürke, amikor tartalom van benne */
}


#passwordBlock {
  position: relative; /* Ez biztosítja, hogy az abszolút pozicionált label helyesen viszonyuljon hozzá */
}

#passwordBlock label {
  position: absolute;
  top: 5px; /* Szükség szerint állítható */
  left: 12px; /* Szükség szerint állítható */
  padding: 0 5px;
  transition: 0.3s ease all;
  color: #8E8C84; /* Másodlagos szöveg szín */
  font-size: 0.75rem;
  display: none; /* Kezdetben rejtett */
  z-index: 10; /* Biztosítja, hogy a label a legfelső rétegben legyen */
}

#passwordBlock .input-group {
  position: relative;
  z-index: 1; /* Alacsonyabb z-index, mint a label */
}

#passwordBlock input[type="password"] {
  width: 100%;
  padding: 1rem;
  padding-left: 16px;
  padding-right: 16px;
  /* padding-top: 30px; */ /* A label láthatósága miatt nagyobb padding a tetején */
  font-size: 1rem;
  border: 1px solid #ced4da;
  border-radius: 12px; /* Lekerekített sarkok */
  box-sizing: border-box;
}
#login .form-control.is-invalid{
border: 1px solid #E0574F !important;
background-color: #e0574f24 !important;
}
#btnSubmit_registration.active {
  background-color: #333026 !important; /* Világos háttérszín */
  color: #FFFFFF; /* Sötét szövegszín */
  font-size: 14px !important; /* Kisebb betűméret */
  line-height: 20px; /* Sor magasság */
  font-weight: 700; /* Félkövér betűstílus */
  border: 1px solid #433F32 !important; /* Sötét keret */
  transition: 0.34s all; /* Sima átmenet minden tulajdonságra */
}
#btnSubmit_login.active {
background-color: #F4F0ED !important; /* Világos háttérszín */
color: #FFFFFF !important; /* Sötét szövegszín */
font-size: 14px !important; /* Kisebb betűméret */
line-height: 20px; /* Sor magasság */
font-weight: 700; /* Félkövér betűstílus */
border: 1px solid #433F32 !important; /* Sötét keret */
transition: 0.34s all; /* Sima átmenet minden tulajdonságra */
}
#login #spinner span {
color: #ffffff;
font-size: 14px;
font-weight: 700;
line-height: 20px;
/* margin-top: 7px; */
border-radius: 50px;
}
#forgotPassword #spinner span {
color: #ffffff;
font-size: 14px;
font-weight: 700;
line-height: 20px;
/* margin-top: 7px; */
border-radius: 50px;
}
#resetPassword #spinner span {
color: #ffffff;
font-size: 14px;
font-weight: 700;
line-height: 20px;
/* margin-top: 7px; */
border-radius: 50px;
}
#registration #spinner span {
color: #ffffff;
font-size: 14px;
font-weight: 700;
line-height: 20px;
/* margin-top: 7px; */
border-radius: 50px;
}
#registration #spinner {
width: 213px !important;
}
#firstName.has-content {
background-color: #F7F5F2; /* Szürke, ha van benne szöveg */
font-size: 14px;
font-weight: 900;
line-height: 20px;
color: #433F32;
}
#lastName.has-content {
  background-color: #F7F5F2; /* Szürke, ha van benne szöveg */
  font-size: 14px;
  font-weight: 900;
  line-height: 20px;
  color: #433F32;
}
#email.has-content {
background-color: #F7F5F2 !important; /* Szürke, ha van benne szöveg */
font-size: 14px;
font-weight: 900;
line-height: 20px;
color: #433F32;
border: 1px solid #DBD8D5;
}

#postalCode.has-content {
background-color: #F7F5F2 ; /* Szürke, ha van benne szöveg */
font-size: 14px;
font-weight: 900;
line-height: 20px;
color: #433F32;
}
#city.has-content {
background-color: #F7F5F2; /* Szürke, ha van benne szöveg */
font-size: 14px;
font-weight: 900;
line-height: 20px;
color: #433F32;
}
#address.has-content {
background-color: #F7F5F2; /* Szürke, ha van benne szöveg */
font-size: 14px;
font-weight: 900;
line-height: 20px;
color: #433F32;
}
#addressCompl1.has-content {
background-color: #F7F5F2; /* Szürke, ha van benne szöveg */
font-size: 14px;
font-weight: 900;
line-height: 20px;
color: #433F32;
}
#addressCompl2.has-content {
background-color: #F7F5F2; /* Szürke, ha van benne szöveg */
font-size: 14px;
font-weight: 900;
line-height: 20px;
color: #433F32;
}
#addressCompl3.has-content {
background-color: #F7F5F2; /* Szürke, ha van benne szöveg */
font-size: 14px;
font-weight: 900;
line-height: 20px;
color: #433F32;
}
#addressCompl4.has-content {
background-color: #F7F5F2; /* Szürke, ha van benne szöveg */
font-size: 14px;
font-weight: 900;
line-height: 20px;
color: #433F32;
}
#newPwd.has-content {
background-color: #F7F5F2; /* Szürke, ha van benne szöveg */
font-size: 14px;
font-weight: 900;
line-height: 20px;
color: #433F32;
}
#confirmPwd.has-content {
background-color: #F7F5F2; /* Szürke, ha van benne szöveg */
font-size: 14px;
font-weight: 900;
line-height: 20px;
color: #433F32;
}
#companyName.has-content {
background-color: #F7F5F2; /* Szürke, ha van benne szöveg */
font-size: 14px;
font-weight: 900;
line-height: 20px;
color: #433F32;
}
#vatNumber.has-content {
background-color: #F7F5F2; /* Szürke, ha van benne szöveg */
font-size: 14px;
font-weight: 900;
line-height: 20px;
color: #433F32;
}
#displayBoxbirthsalutation.has-content {
background-color: #F7F5F2; /* Szürke, ha van benne szöveg */
font-size: 14px;
font-weight: 900;
line-height: 20px;
color: #433F32;
}
#displayBoxbirthDay.has-content {
background-color: #F7F5F2; /* Szürke, ha van benne szöveg */
font-size: 14px;
font-weight: 900;
line-height: 20px;
color: #433F32;
}
#displayBoxbirthMonth.has-content {
background-color: #F7F5F2; /* Szürke, ha van benne szöveg */
font-size: 14px;
font-weight: 900;
line-height: 20px;
color: #433F32;
}
#displayBoxbirthYear.has-content {
background-color: #F7F5F2; /* Szürke, ha van benne szöveg */
font-size: 14px;
font-weight: 900;
line-height: 20px;
color: #433F32;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  /* appearance: none !important; */
  background-image: none !important;
  background-color: rgb(219, 216, 213) !important; /* Használjuk az RGB értéket */
  color: #433f32 !important;
  transition: background-color 5000s ease-in-out 0s !important;
  box-shadow: 0 0 0px 1000px rgb(246 243 239) inset !important; /* Biztosítja, hogy a háttérszín teljesen lefedje a mezőt */
  -webkit-text-fill-color: #000000 !important; /* Biztosítja, hogy a szöveg színe is megfelelő legyen */
}

#mobileNumber::placeholder {
font-size: 14px; /* Placeholder betűmérete 14px */
}

.invalid-input-highlight-city.has-content {
/* Ebben az esetben itt adhatsz meg egyéb stílusokat az input elemhez */
border: 1px solid var(--special-border, #DBD8D5) !important;
background-color: #F7F5F2 !important;
/* Egyéb stílusok... */
}
.intl-tel-input .flag-container {
padding: 0px;
}

/* Tooltip stílus a mobil szám mező fölött */
.character-count-tooltip {
position: absolute;
top: -50px !important; /* Alkalmazzuk az input mező alatt */
left: 113px !important;
width: 200px; /* A tooltip szélessége igazodik a szülő elemhez */
background-color: #5972D2; /* Világoskék háttérszín */
color: #FFFFFF; /* Fehér szöveg */
font-weight: 400; /* Normál vastagságú szöveg */
font-size: 13px; /* Betűméret */
line-height: 20px; /* Sorköz */
padding: 10px; /* Párnázás */
border-radius: 12px; /* Lekerekített sarkok */
box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Lágy árnyék */
display: none; /* Alapértelmezésben elrejtve */
z-index: 1;
}
/* Tooltip stílus a mobil szám mező fölött */
.english-page .character-count-tooltip {
position: absolute;
top: -70px !important; /* Alkalmazzuk az input mező alatt */
left: 113px !important;
width: 200px; /* A tooltip szélessége igazodik a szülő elemhez */
background-color: #5972D2; /* Világoskék háttérszín */
color: #FFFFFF; /* Fehér szöveg */
font-weight: 400; /* Normál vastagságú szöveg */
font-size: 13px; /* Betűméret */
line-height: 20px; /* Sorköz */
padding: 10px; /* Párnázás */
border-radius: 12px; /* Lekerekített sarkok */
box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Lágy árnyék */
display: none; /* Alapértelmezésben elrejtve */
z-index: 1;
}
/* CSS for the tooltip arrow */


@media (max-width: 440px) {
.character-count-tooltip {
    top: -40px !important; /* Adjusted position for smaller screens */
    font-weight: 500; /* Félkövér szöveg */
    font-size: 13px; /* Betűméret */
    line-height: 20px; /* Sorköz */
    padding: 5px 10px; /* Párnázás */
    width: 180px;
}
}
@media (max-width: 390px) {
.character-count-tooltip {
    top: -60px !important; /* Adjusted position for smaller screens */
    font-weight: 500; /* Félkövér szöveg */
    font-size: 13px; /* Betűméret */
    line-height: 20px; /* Sorköz */
    padding: 5px 10px; /* Párnázás */
    width: 120px;
}
}
@media (max-width: 320px) {
.character-count-tooltip {
    top: -80px !important; /* Adjusted position for smaller screens */
    font-weight: 500; /* Félkövér szöveg */
    font-size: 13px; /* Betűméret */
    line-height: 20px; /* Sorköz */
    padding: 5px 10px; /* Párnázás */
    width: 80px;
}
}
@media (max-width: 440px) {
.english-page .character-count-tooltip {
    top: -60px !important; /* Adjusted position for smaller screens */
    font-weight: 500; /* Félkövér szöveg */
    font-size: 13px; /* Betűméret */
    line-height: 20px; /* Sorköz */
    padding: 5px 10px; /* Párnázás */
    width: 180px;
}
}
@media (max-width: 390px) {
.english-page .character-count-tooltip {
    top: -80px !important; /* Adjusted position for smaller screens */
    font-weight: 500; /* Félkövér szöveg */
    font-size: 13px; /* Betűméret */
    line-height: 20px; /* Sorköz */
    padding: 5px 10px; /* Párnázás */
    width: 120px;
}
}
@media (max-width: 320px) {
.english-page .character-count-tooltip {
    top: -120px !important; /* Adjusted position for smaller screens */
    font-weight: 500; /* Félkövér szöveg */
    font-size: 13px; /* Betűméret */
    line-height: 20px; /* Sorköz */
    padding: 5px 10px; /* Párnázás */
    width: 80px;
}
}
.character-count-tooltip::after {
content: "";
position: absolute;
top: 100%;
left: 20px;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #5972D2 transparent transparent transparent;
}

input.form-control.form-control-lg.rounded-0.sfdc-phone.has-content:not(.invalid-input-highlight-mobilenumber) {
background-color: #F7F5F2 !important; /* Szürke, ha van benne szöveg */
font-size: 14px !important;
font-weight: 900 !important;
line-height: 20px;
color: #433F32 !important;
border: 1px solid #DBD8D5;
}

/* Stílus, amikor TARTALMAZZA az 'invalid-input-highlight-mobilenumber' osztályt */
input.form-control.form-control-lg.rounded-0.sfdc-phone.has-content.invalid-input-highlight-mobilenumber {
border: 2px solid red;
background-color: #ffe0e0;
font-size: 14px !important;
font-weight: 900 !important;
line-height: 20px;
color: #433F32 !important;
border: 1px solid #DBD8D5;
}

.material-symbols-outlined {
color: #5972D2;
display: block !important;
align-content: center;
margin-bottom: 20px !important;
font-size: 40px !important;
background-color: #5972d240;
border-radius: 50px;
height: 70px;
width: 70px;
margin: 0 auto;
}

/* Tooltip stílus a jelszómező fölött */
.password-tooltip {
  position: absolute;
  top: -130px;
  left: 0;
  width: 100%; /* Width will be adjusted based on content */
  /* border: 1px solid #3A8EBA; */ /* Changed to a blue border */
  background-color: #5972D2; /* Light blue background */
  color: #FFFFFF; /* Darker blue text */
  font-weight: 400; /* Bold text */
  font-size: 13px; /* Text size */
  line-height: 20px; /* Line height */
  padding: 10px; /* Increased padding for better spacing */
  border-radius: 12px; /* Rounded corners */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Soft shadow for 3D effect */
  display: none; /* Ensures the tooltip is shown */
}

/* CSS for the tooltip arrow */
.password-tooltip::after {
  content: "";
  position: absolute;
  top: 100%; /* Arrow at the bottom of the tooltip */
  left: 20px; /* Position the arrow - adjust as needed */
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #5972D2 transparent transparent transparent; /* Arrow color */
}
#confirmPasswordTooltip.password-tooltip::after {
content: "";
position: absolute;
top: 100%; /* Arrow at the top of the tooltip */
left: 20px; /* Position the arrow - adjust as needed */
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #5972D2 transparent; /* Arrow color */
top: -10px;
}
.password-tooltip ul {
  /* Itt írhatod be a kívánt CSS tulajdonságokat az ul elemhez */
  margin: 0;
  padding: 0;
  list-style-type: none;
}

@media (max-width:420px) {
.password-tooltip {
position: absolute;
top: -160px;
left: 0;
width: 100%;
/* border: 1px solid #E0574F; */
background-color: #5972D2;
color: #FFFFFF;
font-weight: 500; /* Félkövér szöveg */
font-size: 13px; /* 14px-es betűméret */
line-height: 20px; /* 20px-es sorköz */
padding: 5px 10px;
border-radius: 12px;
display: none;
}
}

/* Tooltip stílus a jelszómező fölött */
#confirmPasswordTooltip {
position: absolute;
top: 60px;
left: 0;
width: 100%;
border: 1px solid #5972D2;
/* background-color: #ffe3e1; */
color: #FFFFFF;
font-weight: 400; /* Félkövér szöveg */
font-size: 13px; /* 14px-es betűméret */
line-height: 20px; /* 20px-es sorköz */
padding: 5px 10px;
border-radius: 12px;
display: none;
}

@media (max-width:420px) {
#confirmPasswordTooltip {
position: absolute;
top: 60px;
left: 0;
width: 100%;
/* border: 1px solid #5972D2; */
background-color: #5972D2;
color: #FFFFFF;
font-weight: 500; /* Félkövér szöveg */
font-size: 13px; /* 14px-es betűméret */
line-height: 20px; /* 20px-es sorköz */
padding: 5px 10px;
border-radius: 12px;
display: none;
}
}

.password-rules {
display: none;
}

@media (max-width: 1060px) {
.password-rules {
    display: none;
}
}

#confirmRegistration .invalid-feedback{
display: none !important;
}

#confirmRegistration #passwordBlock .custom-control-label:before {
content: "";
position: absolute;
left: -18px;
top: 9px;
width: 20px;
height: 20px;
border: 1px solid #333;
border-radius: .25rem;
background-color: transparent;
outline: 0;
}

#confirmRegistration #passwordBlock .custom-control-input:checked+.custom-control-label:after {
content: "✓";
display: block;
position: absolute;
left: -18px;
top: 9px;
width: 20px;
height: 20px;
outline: 0;
border: 1px solid #333;
border-radius: .25rem;
background: #44912b;
color: white;
font-size: 16px;
text-align: center;
line-height: 20px;
}

#login input:-webkit-autofill{
-webkit-text-fill-color: #433f32 !important;
color: #433f32 !important;
}

#confirmRegistration {
padding-top: 70px;
}

#confirmRegistration .card-header h3 {
padding-left: 10px;
padding-right: 10px;
}

#confirmRegistration .custom-control {
position: relative;
display: block;
min-height: 1.5rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
}

#resetPassword .custom-control {
position: relative;
display: block;
min-height: 1.5rem;
padding-left: 1.5rem;
/* margin-bottom: 140px; */
}

#resetPassword label {
position: relative;
margin-right: 20px;
}
#salutation:focus {
outline: none; /* Remove default outline */
border: 2px solid #000000; /* Add custom border */
box-shadow: 0 0 5px rgba(255, 255, 255, 0.5); /* Optional shadow for better visibility */
}
#birthDay:focus {
outline: none; /* Remove default outline */
border: 2px solid #000000; /* Add custom border */
box-shadow: 0 0 5px rgba(255, 255, 255, 0.5); /* Optional shadow for better visibility */
}
#birthMonth:focus {
outline: none; /* Remove default outline */
border: 2px solid #000000; /* Add custom border */
box-shadow: 0 0 5px rgba(255, 255, 255, 0.5); /* Optional shadow for better visibility */
}
#birthYear:focus {
outline: none; /* Remove default outline */
border: 2px solid #000000; /* Add custom border */
box-shadow: 0 0 5px rgba(255, 255, 255, 0.5); /* Optional shadow for better visibility */
}
.error-border {
border: 1px solid #E0574F !important;
background-color: #e0574f24 !important;
font-size: 14px !important;
font-weight: 900 !important;
line-height: 20px !important;
color: #433F32 !important;
}
#birthDay.error-border {
font-size: 14px;
color: #E0574F !important;
}
#birthMonth.error-border {
font-size: 14px;
color: #E0574F !important;
}
#birthYear.error-border {
font-size: 14px;
color: #E0574F !important;
}
@media (max-width: 699px) {
#registrationDataBox div:nth-child(7) .row.form-group .col-md-4 {
  display: grid;
  padding-top: 0;
}
}
@media (max-width: 699px) {
#registrationDataBox .form-group:nth-child(6)  {
  margin-bottom: 0px !important;
}
}

#birthDay.focused {
font-size: 14px;
font-weight: 900;
line-height: 20px;
border: 1px solid #DBD8D5;
color: #433F32 !important;
background-color: #F7F5F2 !important;
}

#birthMonth.focused {
font-size: 14px;
font-weight: 900;
line-height: 20px;
border: 1px solid #DBD8D5;
color: #433F32 !important;
background-color: #F7F5F2 !important;
}

#birthYear.focused {
font-size: 14px;
font-weight: 900;
line-height: 20px;
border: 1px solid #DBD8D5;
color: #433F32 !important;
background-color: #F7F5F2 !important;
}

#salutation.selected-border {
font-size: 14px;
font-weight: 900;
line-height: 20px;
border: 1px solid #DBD8D5;
color: #433F32 !important;
background-color: #F7F5F2 !important;
}
.custom-select {
padding-left: 1rem !important;  
}
#birthdatesection select {
border-radius: 12px !important;
border: 1px solid var(--special-border, #DBD8D5);
background: var(--back-bg-4, #FFF);
margin-bottom: 0;
height: 52px !important;
min-height: 52px !important;
max-height: 52px !important;
padding: 10px 2.5rem 10px 16px !important;
box-sizing: border-box !important;
font-size: 16px !important;
line-height: 20px !important;
}
/* Kapcsolattartási mezők – egységes 230px + 312px rács (e-mail, mobil, cím) */
#signBox > fieldset > div > .form-group:has(#email),
#signBox > fieldset > div > .form-group:has(#mobileNumber),
#signBox > fieldset > div > .form-group:has(#postalCode),
#signBox > fieldset > div > .form-group:has(#city),
#signBox > fieldset > div > .form-group:has(#address),
#signBox > fieldset > div > .form-group:has(#addressCompl1),
#signBox > fieldset > div > .form-group:has(#addressCompl2),
#signBox > fieldset > div > .form-group:has(#addressCompl3),
#signBox > fieldset > div > .form-group:has(#addressCompl4) {
  display: grid !important;
  grid-template-columns: 230px minmax(0, 312px);
  column-gap: 12px;
  row-gap: 6px;
  align-items: center;
  margin-bottom: 20px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

#registration #signBox .form-group:has(#email) > label,
#registration #signBox .form-group:has(#mobileNumber) > label,
#registration #signBox .form-group:has(#postalCode) > label,
#registration #signBox .form-group:has(#city) > label,
#registration #signBox .form-group:has(#address) > label,
#registration #signBox .form-group:has(#addressCompl1) > label,
#registration #signBox .form-group:has(#addressCompl2) > label,
#registration #signBox .form-group:has(#addressCompl3) > label,
#registration #signBox .form-group:has(#addressCompl4) > label {
  grid-column: 1;
  display: block !important;
  margin: 0 !important;
  margin-right: 0 !important;
}

#signBox > fieldset > div > .form-group input.form-control,
#signBox > fieldset > div > .form-group select.form-control,
#signBox > fieldset > div > .form-group:has(#email) #email {
  grid-column: 2;
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box !important;
  justify-self: stretch;
}

#signBox .form-group .mobile-number-help,
#companyBox .form-group .vat-number-help {
  flex-basis: 100%;
  width: auto;
  max-width: 480px;
  margin-left: 0;
  margin-top: 6px;
  padding-left: 0;
  font-family: 'Urbanist', sans-serif;
  font-size: 14px;
  font-style: italic;
  font-weight: 500;
  line-height: 20px;
  color: #8E8C84;
}

/* Mobilszám sor: címke → mező → segédszöveg */
#signBox > fieldset > div > .form-group:has(#mobileNumber) {
  grid-template-rows: auto auto auto;
  align-items: start;
}

#registration #signBox .form-group:has(#mobileNumber) > label {
  grid-column: 1;
  grid-row: 1;
}

#signBox .form-group:has(#mobileNumber) .intl-tel-input.allow-dropdown {
  grid-column: 2;
  grid-row: 1;
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 52px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--special-border, #DBD8D5) !important;
  border-radius: 12px !important;
  overflow: hidden;
  background: var(--back-bg-4, #FFF);
  box-sizing: border-box !important;
}

#signBox .form-group:has(#mobileNumber) .intl-tel-input.allow-dropdown .flag-container {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  flex: 0 0 104px !important;
  width: 104px !important;
  height: auto !important;
  z-index: 1;
}

#signBox .form-group:has(#mobileNumber) .intl-tel-input.allow-dropdown .flag-container .selected-flag {
  width: 100% !important;
  height: 100% !important;
  min-height: 50px !important;
  box-sizing: border-box !important;
  border: 0 !important;
  border-radius: 0 !important;
  border-right: 1px solid var(--special-border, #DBD8D5) !important;
  background: #F7F5F2 !important;
}

#signBox .form-group:has(#mobileNumber) .intl-tel-input.allow-dropdown .flag-container + input,
#signBox .form-group:has(#mobileNumber) .intl-tel-input.allow-dropdown input#mobileNumber {
  flex: 1 1 auto !important;
  display: block !important;
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  padding: 10px 16px !important;
  height: auto !important;
  min-height: 50px !important;
  box-sizing: border-box !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: 16px !important;
  line-height: 20px !important;
  background: transparent !important;
}

#signBox .form-group:has(#mobileNumber) .mobile-number-help {
  grid-column: 2;
  grid-row: 2;
  width: 100% !important;
  max-width: 100% !important;
  margin: 4px 0 0 0 !important;
  padding-left: 104px !important;
  padding-right: 0 !important;
  text-align: left !important;
  align-self: start;
  flex-basis: auto;
}

@media (max-width: 699px) {
  #registration .card-body,
  #registration fieldset,
  #signBox,
  #signBox > fieldset > div,
  #registrationDataBox,
  #registrationDataBox > fieldset > div {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  /* signBox: egyoszlop – ne maradjon 230px + 312px fix rács */
  #signBox > fieldset > div > .form-group:has(#email),
  #signBox > fieldset > div > .form-group:has(#mobileNumber),
  #signBox > fieldset > div > .form-group:has(#postalCode),
  #signBox > fieldset > div > .form-group:has(#city),
  #signBox > fieldset > div > .form-group:has(#address),
  #signBox > fieldset > div > .form-group:has(#addressCompl1),
  #signBox > fieldset > div > .form-group:has(#addressCompl2),
  #signBox > fieldset > div > .form-group:has(#addressCompl3),
  #signBox > fieldset > div > .form-group:has(#addressCompl4) {
    grid-template-columns: 1fr !important;
    row-gap: 8px;
    min-width: 0;
    width: 100%;
  }

  #registration #signBox .form-group:has(#email) > label,
  #registration #signBox .form-group:has(#mobileNumber) > label,
  #registration #signBox .form-group:has(#postalCode) > label,
  #registration #signBox .form-group:has(#city) > label,
  #registration #signBox .form-group:has(#address) > label,
  #registration #signBox .form-group:has(#addressCompl1) > label,
  #registration #signBox .form-group:has(#addressCompl2) > label,
  #registration #signBox .form-group:has(#addressCompl3) > label,
  #registration #signBox .form-group:has(#addressCompl4) > label {
    grid-column: 1 !important;
    width: 100% !important;
  }

  #signBox > fieldset > div > .form-group input.form-control,
  #signBox > fieldset > div > .form-group select.form-control,
  #signBox > fieldset > div > .form-group:has(#email) #email,
  #registrationDataBox > fieldset > div > .form-group input.form-control,
  #registrationDataBox > fieldset > div > .form-group select.form-control {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    justify-self: stretch;
    box-sizing: border-box;
  }

  #registration #signBox .form-group:has(#mobileNumber) > label {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  #signBox .form-group:has(#mobileNumber) .intl-tel-input,
  #signBox .form-group:has(#mobileNumber) .intl-tel-input.allow-dropdown {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #signBox .form-group:has(#mobileNumber) .intl-tel-input.allow-dropdown .flag-container,
  #signBox .form-group:has(#mobileNumber) .intl-tel-input.allow-dropdown .flag-container .selected-flag {
    height: 52px !important;
    min-height: 52px !important;
  }

  #signBox .form-group:has(#mobileNumber) .intl-tel-input.allow-dropdown .flag-container+input,
  #signBox .form-group:has(#mobileNumber) .intl-tel-input.allow-dropdown input#mobileNumber {
    flex: 1 1 auto !important;
    width: auto !important;
    height: auto !important;
    min-height: 50px !important;
    padding: 10px 16px !important;
  }

  #signBox .form-group:has(#mobileNumber) .mobile-number-help {
    grid-column: 1 !important;
    grid-row: 3 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 4px 0 0 0 !important;
    margin-left: 0 !important;
    padding-left: 104px !important;
    text-align: left !important;
    box-sizing: border-box;
  }

  #companyBox .form-group .vat-number-help {
    grid-column: 1 !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  #signBox .form-group:nth-child(6),
  #signBox .form-group:nth-child(7) {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Születési dátum – ne tolja ki a 17.7rem margó és az abszolút címkék */
  #birthdatesection #szulEv,
  #birthdatesection #szulHonap,
  #birthdatesection #szulNap {
    position: static !important;
    top: auto !important;
    display: block;
    width: 100%;
    margin-bottom: 6px;
  }

  #birthdatesection span {
    margin-left: 0 !important;
  }

  #birthdatesection .dropDown {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #birthdatesection .row.form-group .col-md-4,
  #registrationDataBox div:nth-child(7) .row.form-group .col-md-4 {
    grid-template-columns: 1fr !important;
    row-gap: 8px;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
  }

  #birthdatesection #szulEv,
  #birthdatesection #szulHonap,
  #birthdatesection #szulNap,
  #birthdatesection .dropDown {
    grid-column: 1 !important;
    width: 100% !important;
  }

  select#birthYear,
  select#birthMonth,
  select#birthDay,
  #displayBoxbirthYear,
  #displayBoxbirthMonth,
  #displayBoxbirthDay,
  #dropdownMenubirthYear,
  #dropdownMenubirthMonth,
  #dropdownMenubirthDay,
  #registrationDataBox div:nth-child(7) .row.form-group .col-md-4 select {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 600px) {
  input#vatNumber {
    width: 100%;
    max-width: 312px;
  }
}

#registrationDataBox > fieldset > div > * {
  order: unset !important;
}

/* Egységes label + input oszlop – személyes és cím mezők */
#registrationDataBox > fieldset > div > .form-group:has(#salutation),
#registrationDataBox > fieldset > div > .form-group:has(#lastName),
#registrationDataBox > fieldset > div > .form-group:has(#firstName),
#registrationDataBox > fieldset > div > .form-group:has(#postalCode),
#registrationDataBox > fieldset > div > .form-group:has(#city),
#registrationDataBox > fieldset > div > .form-group:has(#address),
#registrationDataBox > fieldset > div > .form-group:has(#addressCompl1),
#registrationDataBox > fieldset > div > .form-group:has(#addressCompl2),
#registrationDataBox > fieldset > div > .form-group:has(#addressCompl3),
#registrationDataBox > fieldset > div > .form-group:has(#addressCompl4),
#companyBox .form-group:has(#companyName),
#companyBox .form-group:has(#vatNumber) {
  display: grid !important;
  grid-template-columns: 230px minmax(0, 312px);
  column-gap: 12px;
  row-gap: 6px;
  align-items: center;
  margin-bottom: 20px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

#registrationDataBox > fieldset > div > .form-group > label,
#companyBox .form-group > label {
  grid-column: 1;
  margin: 0 !important;
  margin-right: 0 !important;
}

#registrationDataBox > fieldset > div > .form-group input.form-control,
#registrationDataBox > fieldset > div > .form-group select.form-control,
#registrationDataBox > fieldset > div > .form-group:has(#salutation) #salutation,
#registrationDataBox #salutation,
select#salutation,
#companyBox .form-group input.form-control {
  grid-column: 2;
  width: 100% !important;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box !important;
  justify-self: stretch;
}

#companyBox .form-group .vat-number-help {
  grid-column: 2;
  padding-left: 0;
  margin-top: 0;
}

/* Rejtjük a régi, duplikált adószám segédszöveget. */
#companyBox .form-text:not(.vat-number-help) {
  display: none !important;
}

/* Felülírások: régi nth-child / order ne törje a mezősort */
#registrationDataBox > fieldset > div > *,
#registrationDataBox #companyBox,
#registrationDataBox .form-group,
#registrationDataBox #companyBox + .form-group + .form-group + .form-group + .form-group + div {
  order: unset !important;
  -ms-flex-order: unset !important;
  -webkit-box-ordinal-group: unset !important;
}

#registrationDataBox #companyBox + .form-group + .form-group + .form-group + .form-group + div input {
  width: 312px !important;
  max-width: 100% !important;
}

#registrationDataBox #companyBox .form-group input,
input#vatNumber,
input#companyName {
  width: 312px !important;
  max-width: 100% !important;
}

@media (max-width: 600px) {
  input#vatNumber {
    width: 100% !important;
    max-width: 312px !important;
  }
}

/* Address block compact spacing fix (Emelet/Ajto gap) */
#registrationDataBox > fieldset > div > .form-group:has(#postalCode),
#registrationDataBox > fieldset > div > .form-group:has(#city),
#registrationDataBox > fieldset > div > .form-group:has(#address),
#registrationDataBox > fieldset > div > .form-group:has(#addressCompl1),
#registrationDataBox > fieldset > div > .form-group:has(#addressCompl2),
#registrationDataBox > fieldset > div > .form-group:has(#addressCompl3),
#registrationDataBox > fieldset > div > .form-group:has(#addressCompl4) {
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  min-height: 0 !important;
}

/* Ajto sor ne csússzon beljebb a legacy last-child szabály miatt */
#registrationDataBox > fieldset > div > .form-group:has(#addressCompl4) {
  padding-left: 0 !important;
}

/* Szuletesi adatok mindig oszloposan jelenjenek meg */
#birthdatesection .row.form-group {
  display: flex !important;
  flex-direction: column !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#birthdatesection,
#birthdatesection .row.form-group {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

#birthdatesection .row.form-group .col-md-4,
#registrationDataBox div:nth-child(7) .row.form-group .col-md-4 {
  display: grid !important;
  grid-template-columns: 230px minmax(0, 312px);
  column-gap: 12px;
  row-gap: 6px;
  align-items: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 0;
  margin-bottom: 0.5rem;
  box-sizing: border-box;
}

#birthdatesection .row.form-group .col-md-4:last-child,
#registrationDataBox div:nth-child(7) .row.form-group .col-md-4:last-child {
  margin-bottom: 0;
}

#birthdatesection .dropDown,
#birthdatesection select#birthYear,
#birthdatesection select#birthMonth,
#birthdatesection select#birthDay,
#displayBoxbirthYear,
#displayBoxbirthMonth,
#displayBoxbirthDay {
  max-width: 312px;
  justify-self: start;
}

#birthdatesection #szulEv,
#birthdatesection #szulHonap,
#birthdatesection #szulNap {
  position: static !important;
  top: auto !important;
  grid-column: 1;
  width: auto;
  margin: 0 !important;
}

#birthdatesection .dropDown {
  grid-column: 2;
  margin-left: 0 !important;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 0;
  padding: 0 !important;
  border: 0;
  background: none !important;
  box-sizing: border-box !important;
  justify-self: stretch;
}

#birthdatesection select#birthYear,
#birthdatesection select#birthMonth,
#birthdatesection select#birthDay,
select#birthYear,
select#birthMonth,
select#birthDay,
#displayBoxbirthYear,
#displayBoxbirthMonth,
#displayBoxbirthDay {
  width: 100% !important;
  max-width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  padding: 10px 2.5rem 10px 16px !important;
  box-sizing: border-box !important;
  font-size: 16px !important;
  line-height: 20px !important;
  margin: 0 !important;
}

#displayBoxbirthYear,
#displayBoxbirthMonth,
#displayBoxbirthDay {
  display: flex;
  align-items: center;
}

#birthdatesection .row.form-group .col-md-4 {
  min-height: 52px;
}

#birthdatesection select.custom-select {
  height: 52px !important;
  min-height: 52px !important;
}

@media (max-width: 699px) {
  #registrationDataBox > fieldset > div > .form-group:has(#salutation),
  #registrationDataBox > fieldset > div > .form-group:has(#lastName),
  #registrationDataBox > fieldset > div > .form-group:has(#firstName),
  #registrationDataBox > fieldset > div > .form-group:has(#postalCode),
  #registrationDataBox > fieldset > div > .form-group:has(#city),
  #registrationDataBox > fieldset > div > .form-group:has(#address),
  #registrationDataBox > fieldset > div > .form-group:has(#addressCompl1),
  #registrationDataBox > fieldset > div > .form-group:has(#addressCompl2),
  #registrationDataBox > fieldset > div > .form-group:has(#addressCompl3),
  #registrationDataBox > fieldset > div > .form-group:has(#addressCompl4),
  #companyBox .form-group:has(#companyName),
  #companyBox .form-group:has(#vatNumber),
  #birthdatesection .row.form-group .col-md-4,
  #registrationDataBox div:nth-child(7) .row.form-group .col-md-4 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    row-gap: 8px;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #registrationDataBox > fieldset > div > .form-group > label,
  #companyBox .form-group > label,
  #registrationDataBox > fieldset > div > .form-group input.form-control,
  #registrationDataBox > fieldset > div > .form-group select.form-control,
  #registrationDataBox > fieldset > div > .form-group:has(#salutation) #salutation,
  #registrationDataBox #salutation,
  select#salutation,
  #companyBox .form-group input.form-control,
  #companyBox .form-group .vat-number-help,
  #birthdatesection #szulEv,
  #birthdatesection #szulHonap,
  #birthdatesection #szulNap,
  #birthdatesection .dropDown,
  #birthdatesection select#birthYear,
  #birthdatesection select#birthMonth,
  #birthdatesection select#birthDay,
  select#birthYear,
  select#birthMonth,
  select#birthDay,
  #displayBoxbirthYear,
  #displayBoxbirthMonth,
  #displayBoxbirthDay {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    justify-self: stretch !important;
  }

  #birthdatesection .dropDown,
  #displayBoxbirthYear,
  #displayBoxbirthMonth,
  #displayBoxbirthDay,
  #birthdatesection select#birthYear,
  #birthdatesection select#birthMonth,
  #birthdatesection select#birthDay {
    max-width: 100% !important;
  }

  #birthdatesection #szulEv,
  #birthdatesection #szulHonap,
  #birthdatesection #szulNap {
    margin-bottom: 4px !important;
  }
}

@media (min-width: 700px) {
  #registrationDataBox > fieldset > div > .form-group:has(#salutation) #salutation,
  #registrationDataBox #salutation,
  select#salutation {
    grid-column: 2;
    justify-self: stretch;
  }

  #birthdatesection .dropDown,
  #birthdatesection select#birthYear,
  #birthdatesection select#birthMonth,
  #birthdatesection select#birthDay,
  #displayBoxbirthYear,
  #displayBoxbirthMonth,
  #displayBoxbirthDay {
    grid-column: 2;
    justify-self: stretch;
  }
}