:root {
  --heading-text-color: #fff;
  --black-text: #090a0b;
  --lightgrey-color: #d0d5dd;
  --light-passpass-purple: #582c83;
  --passpass-purple: #582c83;
  --strong-passpass-purple: #351a4f;
  --light-black: #333333;
  --white-purple-container: #eee9f2;
  --pink-link: #c22a7f;
  --grey-medium: #667085;
  --grey-strong: #475467;
  --grey-input: #d0d5dd;
  --red-important: #e31137;
  --light-green-validation: #47cd89;
  --grey-basic: #f2f4f7;
  --dark-blue: #344054;
}

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ================== Main Styling ======================*/
/*Basic style*/
html,
body {
  background-color: var(--heading-text-color);
  font-family: Inter;
}

h3 {
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5rem;
  color: var(--black-text);
  text-align: center;
}

label {
  color: var(--black-text);
  font-size: 0.9rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.25rem;
  margin-bottom: 0.3rem;
}

input {
  height: 2.75rem;
  padding: 0rem 0.5rem;
  border-radius: 0.25rem;
  border: 0.1rem solid var(--grey-300, var(--lightgrey-color));
  background: var(--base-white, var(--heading-text-color));
}

input:focus-visible,
input:focus,
input:hover {
  outline: 0.16rem solid var(--light-passpass-purple);
}

input:hover,
#eye_icon_1,
#eye_icon_2,
.remember-me,
.passpass-logo,
.help,
.accessibility-header,
.language {
  cursor: pointer;
}

#submit:hover {
  outline: unset;
  background-color: var(--strong-passpass-purple);
}

#username,
#password-login {
  padding-left: 2.5rem;
}

#input-error {
  color: var(--red-important);
  display: flex;
  justify-content: center;
  text-align: center;
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
}
#input-error-username {
  color: var(--red-important);
  display: flex;
  justify-content: center;
  text-align: center;
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
}
#input-error-lastname {
  color: var(--red-important);
  display: flex;
  justify-content: center;
  text-align: center;
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
}
#input-error-birthdate {
  color: var(--red-important);
  display: flex;
  justify-content: center;
  text-align: center;
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
}

#input-error-firstname {
  color: var(--red-important);
  display: flex;
  justify-content: center;
  text-align: center;
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
}
#input-error-birthdate {
  color: var(--red-important);
  display: flex;
  justify-content: center;
  text-align: center;
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
}
#input-error-email {
  color: var(--red-important);
  display: flex;
  justify-content: center;
  text-align: center;
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
}
#input-error-password {
  color: var(--red-important);
  display: flex;
  justify-content: center;
  text-align: center;
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
}
#input-error-existmail {
  color: var(--red-important);
  justify-content: center;
  text-align: center;
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
  white-space: pre-line;
}
#input-error-cgvu {
  color: var(--red-important);
  display: flex;
  justify-content: center;
  text-align: center;
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
}
#input-error-recaptcha {
  color: var(--red-important);
  display: flex;
  justify-content: center;
  text-align: center;
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
}
#input-error-recaptcha-firstname {
  color: var(--red-important);
  display: flex;
  justify-content: center;
  text-align: center;
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
}
#input-error-recaptcha-lastname {
  color: var(--red-important);
  display: flex;
  justify-content: center;
  text-align: center;
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
}
#input-error-recaptcha-email {
  color: var(--red-important);
  display: flex;
  justify-content: center;
  text-align: center;
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
}
#input-error-recaptcha-password {
  color: var(--red-important);
  display: flex;
  justify-content: center;
  text-align: center;
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
}
#input-error-password-confirm {
  color: var(--red-important);
  display: flex;
  justify-content: center;
  text-align: center;
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
}
#input-error-recaptcha-cgvu {
  color: var(--red-important);
  display: flex;
  justify-content: center;
  text-align: center;
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
}

.submit {
  width: 100%;
  display: flex;
  padding: 1rem;
  gap: 0.125rem;
  border-radius: 0.1rem;
  background: var(--passpass-purple);
  color: var(--heading-text-color);
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 3.5rem;
  text-align: center;
  font-size: 1rem;
  font-style: normal;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;
  line-height: 100%;
}

/*Basic Containers */

.container-login-reset {
  padding: 2% 5%;
}
.container-verify-mail {
  padding: 5% 5%;
}

.container-login {
  padding: 2% 5%;
}

.grey-container {
  background-color: var(--grey-basic);
  border-radius: 0.5rem;
  padding: 2rem 3rem;
  margin-bottom: 2rem;
}
.error-grey-container-1 {
  background-color: var(--grey-basic);
  border-radius: 0.5rem;
  padding: 2rem 3rem;
  margin-bottom: 2rem;
  margin-inline:25rem;
}
.error-grey-container {
  background-color: var(--grey-basic);
  border-radius: 0.5rem;
  padding: 2rem 3rem;
  margin-bottom: 2rem;
  align-items: center;
  margin-top: 4rem;
  margin-inline: 5rem;
  justify-content: space-between;
}
.link {
  color: var(--passpass-purple);
  cursor: pointer;
}
.to-connect-btn {
  margin-top: 2rem;
}

.checkbox-input > input {
  width: 1rem;
  height: 1rem;
  font-weight: 600;
}

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

.password {
  margin-top: 1rem;
}

.checkbox {
  display: flex;
  align-items: center;
  height: 1.5rem;
  margin: 2rem 0rem;
}

.info {
  width: 100%;
  height: 1.5rem;
  margin-top: 0.5rem;
}

.info > a {
  float: right;
  color: var(--light-passpass-purple);
}

.extra > h3 {
  margin-bottom: 2rem;
}

.flex-link {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
}

.checkbox-group {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

/*Breadcrumb */

.breadcrumb-login {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.breadcrumb-login > * {
  padding: 0rem 0.5rem;
  list-style: none;
}

.breadcrumb-login a {
  color: var(--grey-medium);
  text-decoration: unset;
}

.breadcrumb-login > li > .current-breadcrummb-list {
  color: var(--light-black);
}

.breadcrumb-first-li {
  padding-left: 0rem;
}

.breadcrumb-first-li a:hover {
  color: var(--primary-600, var(--light-passpass-purple));
  text-decoration: underline;
}

/*Error*/
.header-text {
  color: var(--grey-strong);
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.25rem;
  margin-top: 1rem;
  margin-bottom: 2rem;
  text-align: center;
}

.mendatory-text {
  margin-bottom: 2rem;
  color: var(--grey-medium);

  font-size: 0.78rem;
  font-style: normal;
  font-weight: 400;
  line-height: 0.975rem;
}

/*show / hide Password eye*/
.visibility-container {
  position: relative;
  top: -2.1rem;
  margin-right: 0.5rem;
  height: 0;
}

.visibility {
  float: right;
}

/*Tools*/

.no-margin {
  margin: 0 !important;
}

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

.hidden {
  display: none;
}

.space-bottom {
  margin-bottom: 4rem;
}

.bold-text {
  color: var(--light-black);
  font-weight: bold;
}

.margin-bot-1rem {
  margin-bottom: 1rem;
}

.colored-link {
  color: var(--light-passpass-purple);
}

.colored-light-link {
  color: var(--light-passpass-purple);
}

/*Remove blue background on chrome autocomplete */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus textarea:-webkit-autofill,
textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px var(--heading-text-color) inset !important;
}

/*Multi screen needs*/

.baseline-forgot-password {
  text-align: center;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  color: var(--base-090-a-0-b, var(--black-text));
  font-size: 2.375rem;
  font-style: normal;
  font-weight: 700;
  line-height: 3.5rem;
}

.wish-to-log {
  color: var(--grey-500, var(--grey-medium));
  text-align: center;
  /* Body/Regular/14 */
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.25rem; /* 142.857% */
  margin-right: 0.5rem;
}

.i-connect {
  color: var(--primary-600, var(--light-passpass-purple));
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.25rem;
  text-decoration-line: underline;
}
.instruction {
  display: flex;
  justify-content: center;
}