/* ═══ Base login window styles (moved from the community Custom CSS, 2026-11-04) ═══ */

.mfp-wrap .mfp-inline-holder .mfp-content {
  border: 0;
  box-shadow: none;
  border-radius: 0 !important;
  width: 578px;
}
@media (max-width: 767px) {
  .mfp-wrap .mfp-inline-holder .mfp-content {
      width: 100%;
  }
}
.mfp-wrap .mfp-inline-holder .mfp-content > * {
  padding: 50px 64px 64px !important;
}
@media (max-width: 900px) {
  .mfp-wrap .mfp-inline-holder .mfp-content > * {
      padding: 40px 24px !important;
  }
}
.seperator--text {
  margin-bottom: 0px !important;
}

.mfp-content .btn--sso {
  margin: 0 !important;
  border-radius: 8px;
  line-height: normal;
  padding: 0 10px;
  font-weight: 700;
  font-size: 16px;
  background: var(--ideagen-color-neutral-90);
  transition: 0.15s ease-in-out;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  order: 4;
}

/* Ideagen Employee Login comes last (order: 5, set with the other SSO order
   rules below), so the gaps follow the displayed order, not the DOM's. */
.mfp-content :has(> .qa-sso-saml_v2) > .btn--sso:not(.qa-sso-saml_v2) {
  margin-bottom: 10px !important;
}

.mfp-content :not(:has(> .qa-sso-saml_v2)) > .btn--sso ~ .btn--sso {
  margin-top: 10px !important;
}

.mfp-content .btn--sso:hover {
  background: var(--ideagen-color-neutral-100);
}

.mfp-content .btn--sso:active,
.mfp-content .btn--sso:focus {
  background: var(--ideagen-color-neutral-110);
}

/* The Ideagen cubes, in white. */
.mfp-content .btn--sso:before {
  content: '';
  display: inline-block;
  width: 17px;
  height: 24px;
  background: url('data:image/svg+xml,<svg viewBox="0 0 27 38" xmlns="http://www.w3.org/2000/svg"><path d="M8.75781 5.71165V11.3627L9.16177 11.3617L9.16446 5.97562L17.5157 11.4233L26.2735 5.71165L17.5157 0L8.75781 5.71165Z" fill="%23ffffff"/><path d="M17.5156 11.4233V21.7042L26.2735 15.9926V5.71161L17.5156 11.4233Z" fill="%23ffffff"/><path d="M0 21.7043V27.3553L0.40396 27.3543L0.406649 21.9682L8.75785 27.4159L17.5157 21.7043L8.75785 15.9926L0 21.7043Z" fill="%23ffffff"/><path d="M8.75781 27.4159V37.6968L17.5157 31.9852V21.7042L8.75781 27.4159Z" fill="%23ffffff"/></svg>') center / contain no-repeat;
  margin-right: 10px;
}

/* Mazlan Home SSO (production's OpenID Connect button): the four-dot mark
   from the Mazlan champion hero, closer set and in white, in place of the
   cubes. */
.mfp-content .btn--sso.qa-sso-openid[href*="//community.ideagen.com/ssoproxy/login"]:before {
  width: 16px;
  height: 16px;
  background: url('data:image/svg+xml,<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><circle cx="3" cy="3" r="3" fill="%23ffffff"/><circle cx="13" cy="3" r="3" fill="%23ffffff"/><circle cx="3" cy="13" r="3" fill="%23ffffff"/><circle cx="13" cy="13" r="3" fill="%23ffffff"/></svg>') center / contain no-repeat;
}

.mfp-content h4 {
  font-size: 16px;
  font-weight: 700;
}
.mfp-content label {
  font-size: 16px;
  font-weight: 700;
}
#login_usernameOrEmail,
#login_password,
#register_user_username,
#register_user_email,
#register_user_password,
#forgotPassword_username,
#register_customfield_14 {
  border: 2px solid var(--ideagen-color-neutral-10);
  border-radius: 8px;
  transition: 0.25s ease-in-out;
  height: 45px;
}
#login_usernameOrEmail:hover,
#login_password:hover,
#register_user_username:hover,
#register_user_email:hover,
#register_user_password:hover,
#forgotPassword_username:hover,
#register_customfield_14:hover {
  border: 2px solid var(--ideagen-brand-teal-05);
}
#login_usernameOrEmail:focus,
#login_password:focus,
#register_user_username:focus,
#register_user_email:focus,
#register_user_password:focus,
#forgotPassword_username:focus,
#register_customfield_14:focus {
  border: 2px solid var(--ideagen-brand-teal-10);
}

.mfp-content label[for="login_remember"] {
  flex: 1;
}

.mfp-content .qa-login-modal .box__pad.box--note.box--blend {
  padding: 0;
}

.mfp-content .forgot-password-link {
  font-size: 16px;
  font-weight: 700;
  color: var(--ideagen-brand-teal-10);
  transition: 0.15s ease-in-out;
}

.mfp-content .forgot-password-link:hover,
.mfp-content .forgot-password-link:focus,
.mfp-content .forgot-password-link:active {
  color: var(--ideagen-brand-teal-20);
}

.mfp-content .btn--cta.btn--full-width, 
.mfp-content .btn--cta.qa-submit-button {
  font-weight: 700;
  font-size: 16px;
  line-height: normal;
  padding: 0px 10px;
  height: 42px;
  background: var(--ideagen-brand-pink-05);
  transition: 0.15s ease-in-out;
  border-radius: 8px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mfp-content .btn--cta.qa-submit-button {
  margin-bottom: 16px;
}

/* Production's Custom CSS sizes these by id (32px), which outranks the
   rule above. */
.mfp-content #login_submit,
.mfp-content #register_submit,
.mfp-content #forgotPassword_submit {
  height: 42px;
  transition: 0.15s ease-in-out;
}

.mfp-content .btn--cta.btn--full-width:hover,
.mfp-content .btn--cta.qa-submit-button:hover {
  background: var(--ideagen-brand-pink-10);
}

.mfp-content .btn--cta.btn--full-width:focus,
.mfp-content .btn--cta.btn--full-width:active,
.mfp-content .btn--cta.qa-submit-button:focus,
.mfp-content .btn--cta.qa-submit-button:active {
  background: var(--ideagen-brand-pink-20);
}

.mfp-content .qa-forgot-password-overview-link {
  padding: 0 10px;
  font-weight: 700;
  font-size: 0;
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--ideagen-color-neutral-05);
  border: 0;
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  cursor: pointer;
  transition: .25s ease-in-out;
}

/* Production's Custom CSS styles this link as a pill with a longer selector,
   which outranks the rule above. */
.mfp-content a.group__item.end.js-open-modal.qa-forgot-password-overview-link {
  font-size: 0;
  line-height: 0;
  border-radius: 25px;
  width: 46px;
  height: 46px;
}

.mfp-content .qa-forgot-password-overview-link:after {
  content: '';
  display: inline-block;
  width: 28px;
  height: 28px;
  background-repeat: no-repeat;
  background-size: contain;
  background-color: currentColor;
  mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.3871 7.2097C11.7467 6.9301 12.2533 6.9301 12.6129 7.2097L12.7071 7.29289L12.7903 7.3871C13.0699 7.7467 13.0699 8.2533 12.7903 8.6129L12.7071 8.70711L10.414 11H16.4463C16.9986 11 17.4463 11.4477 17.4463 12C17.4463 12.5128 17.0602 12.9355 16.5629 12.9933L16.4463 13H10.414L12.7071 15.2929L12.7903 15.3871C13.0953 15.7794 13.0676 16.3466 12.7071 16.7071C12.3466 17.0676 11.7794 17.0953 11.3871 16.7903L11.2929 16.7071L7.29289 12.7071L7.2097 12.6129C6.9301 12.2533 6.9301 11.7467 7.2097 11.3871L7.29289 11.2929L11.2929 7.29289L11.3871 7.2097Z" fill="%232F4051"/></svg>');
}

.mfp-content .qa-forgot-password-overview-link:hover {
  background: var(--ideagen-color-neutral-10);
}

.mfp-content .qa-forgot-password-overview-link:active,
.mfp-content .qa-forgot-password-overview-link:focus {
  background: var(--ideagen-color-neutral-20);
}

.mfp-content .fancyselect input[type="checkbox"] + label {
  font-size: 14.5px;
  line-height: 1.5;
}

.mfp-content .fancyselect input[type="checkbox"] + label:before {
  top: 0;
}

.mfp-content .fancyselect input[type="checkbox"] + label div a {
  color: var(--ideagen-brand-teal-10);
  font-weight: 700;
  transition: 0.15s ease-in-out;
}

.mfp-content .fancyselect input[type="checkbox"] + label div a:hover,
.mfp-content .fancyselect input[type="checkbox"] + label div a:focus,
.mfp-content .fancyselect input[type="checkbox"] + label div a:active  {
  color: var(--ideagen-brand-teal-20);
}

.mfp-content .loader {
  color: #FFFFFF !important;
}

.mfp-close-btn-in .mfp-close {
  background: no-repeat center
      url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.79534 5.30789L6.80718 5.31993L12.0001 10.5129L17.1932 5.3198L17.2048 5.30802C17.6154 4.89737 18.2812 4.89737 18.6919 5.30802C19.1025 5.71864 19.1025 6.38437 18.692 6.79503L18.6921 6.79512L13.4872 12L18.685 17.1978L18.692 17.2047C19.1027 17.6154 19.1027 18.2812 18.692 18.6918C18.2814 19.1025 17.6156 19.1025 17.2049 18.6918L17.2049 18.6918L17.2049 18.6918L12.0001 13.4871L6.79528 18.6919L6.79525 18.6919L6.79519 18.6919C6.38454 19.1026 5.71874 19.1026 5.30809 18.6919C4.89744 18.2813 4.89744 17.6155 5.30809 17.2048L5.3151 17.1979L10.513 12L5.30806 6.795L5.30816 6.79491C4.89759 6.38425 4.89762 5.71852 5.30824 5.30789C5.71889 4.89724 6.38469 4.89724 6.79534 5.30789Z' fill='%232F4051'/%3E%3C/svg%3E%0A") !important;
  color: transparent !important;
  opacity: 1;
}


blockquote.note.login-window { font-size: 14.5px; font-weight: 500; text-align: left; line-height: 1.4; margin-top: 12px !important; margin-bottom: 8px !important;
}
blockquote.note.login-window a { color: var(--ideagen-brand-teal-20); font-weight:700;
}
.tab.service-switch {
  padding-top: 6px;
}

label[for="register_terms"] a {
  color: var(--ideagen-brand-teal-10);
}
label[for="register_terms"] a:hover {
  color: var(--ideagen-brand-teal-20);
}
label[for="register_terms"] a:active,
label[for="register_terms"] a:focus {
  color: var(--ideagen-brand-teal-30);
}

div[class="box__pad box--note box--blend"] {
  padding: 8px 0 0 0;
}

/* ═══ Registration product picker and details step (was injectRegisterStyles, #lp-register-styles) ═══ */

.lp-split-terms-row .first.choices--stacked.fancyselect > label > div {
  font-size: 14.5px;
  line-height: 20px;
}

.lp-back-btn {
  display: none;
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--ideagen-color-neutral-05);
  border: 0;
  border-radius: 25px;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  cursor: pointer;
  transition: .15s ease-in-out;
  z-index: 2;
}

.lp-back-btn:hover {
  background: var(--ideagen-color-neutral-10);
}

.lp-back-btn:active,
.lp-back-btn:focus {
  background: var(--ideagen-color-neutral-20);
}

#lp-picker-overlay {
  display: none;
  box-sizing: border-box;
}

#lp-details-overlay {
  display: none;
  box-sizing: border-box;
  flex-direction: column;
  height: 100%;
}

#lp-picker-overlay h2,
#lp-details-overlay h2 {
    margin: 0 0 6px;
    padding-top: 18px;
    font-size: 18px;
    font-weight: 700;
    color: var(--ideagen-color-neutral-90);
}

/* SSO "Set username" page header — retitled and restyled to match the
   details/picker overlay headers above (18px / 700) so all three steps
   read consistently. Renders in the page's own .content-header; the
   !important flags defeat the site's default page-title sizing. The
   subtitle reuses .lp-picker-sub, scoped here to beat any .content-header
   paragraph rules the theme sets. */
.content-header .lp-sso-title,
h1.lp-sso-title {
    margin: 0 0 6px !important;
    padding: 0 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: var(--ideagen-color-neutral-90) !important;
}

.content-header .lp-sso-sub {
    margin: 0 !important;
    font-size: 14.5px !important;
    line-height: 1.5 !important;
    color: var(--ideagen-color-neutral-70) !important;
}

/* The details overlay lays out as a column (set to flex by JS when
   shown) so the footer button sits at the end of the flowing content. */
.lp-details-body {
  margin-top: 8px;
}

/* The relocated name rows keep the form's native row styling, but we
   add a little breathing room between them in this step. */
.lp-details-body .form__row {
  margin-bottom: 16px;
}

#lp-details-overlay .lp-footer {
  margin-top: 8px;
}

/* ── Register modal: details step kept inside CC's form ──
   CC's Preact form re-renders on every keystroke and re-creates rows moved
   out of it, so First name / Last name / Role stay in the form and the
   script sets data-lp-step on #modal_register_source ("account" |
   "details" | "picker"). Without the script the attribute is never set and
   the native form shows unchanged. */
[data-lp-step="account"] form[name="register"] > .form__row:has(#register_customfield_14, #register_customfield_15, #register_customfield_16) {
  display: none !important;
}

[data-lp-step="details"] form[name="register"] > :not(.form__row:has(#register_customfield_14, #register_customfield_15, #register_customfield_16)) {
  display: none !important;
}

[data-lp-step="details"] form[name="register"] > .form__row {
  margin-bottom: 16px;
}

/* Everything else in the modal (heading, tabs, intro text) is step 1 only. */
[data-lp-step="details"] > :not(#lp-details-overlay, #lp-details-footer, #lp-picker-overlay, .lp-back-btn, :has(form[name="register"])) {
  display: none !important;
}

/* The details header/footer only belong to the details step. */
[data-lp-step]:not([data-lp-step="details"]) > #lp-details-overlay,
[data-lp-step]:not([data-lp-step="details"]) > #lp-details-footer {
  display: none !important;
}

/* The step's intro already says these fields are private. */
[data-lp-step] form[name="register"] label .tooltip {
  display: none !important;
}

#lp-details-overlay.lp-details-inplace {
  height: auto;
}

#lp-details-footer {
  display: none;
  margin-top: 8px;
}

/* Inline error under the sign-up email field (setupEmailError in the
   script). */
.lp-field-error {
  display: block;
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--config--main-color-alert, #e22d38);
}

.lp-field-error[hidden] {
  display: none;
}

.mfp-content #register_user_email[aria-invalid="true"],
.mfp-content #register_user_email[aria-invalid="true"]:hover,
.mfp-content #register_user_email[aria-invalid="true"]:focus {
  border-color: var(--config--main-color-alert, #e22d38);
}

/* Required-field asterisk: the script strips CC's "*" text and flags the
   label, so the asterisk survives CC's re-renders without doubling. */
label[data-lum-asterisk]::after {
  content: "*";
  color: #E22D38;
}

/* ── Role choice cards ── */
/* Hide the native radios + their inline labels but keep them in the DOM
   so the form still submits the selected value. */
.lp-role-native-hidden > input[type="radio"],
.lp-role-native-hidden > label,
.choices:has(> .lp-role-cards) > input[type="radio"],
.choices:has(> .lp-role-cards) > label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.lp-role-hint {
  margin: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ideagen-color-neutral-60);
}

.lp-role-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.lp-role-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    width: 100%;
    text-align: left;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid var(--ideagen-color-neutral-10);
    background: #ffffff;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 1px 2px rgba(15, 32, 39, 0.04);
    transition: border-color .14s, background .14s, box-shadow .14s, transform .14s;
}

.lp-role-card:hover {
  border-color: var(--ideagen-color-neutral-20);
  box-shadow: 0 6px 18px rgba(15, 32, 39, 0.10);
  transform: translateY(-1px);
}

.lp-role-card:focus-visible {
  outline: 2px solid var(--ideagen-brand-teal-10);
  outline-offset: 2px;
}

.lp-role-card.is-selected {
  border-color: var(--ideagen-brand-teal-10);
  background: #ffffff;
  box-shadow: inset 0 0 0 2px var(--ideagen-brand-teal-10);
}

.lp-role-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ideagen-color-neutral-90);
  /* Room for the tick in the top-right corner */
  padding-right: 22px;
}

/* Two cards side by side leave too little room for a title like
   "Administrator" beside its icon and tick on a phone, so stack them. */
@media (max-width: 480px) {
  .lp-role-cards {
    grid-template-columns: 1fr;
  }
}

.lp-role-card-icon {
  flex: 0 0 auto;
  font-size: 18px;
  line-height: 1;
  color: var(--ideagen-color-neutral-90);
}

.lp-role-card.is-selected .lp-role-card-icon {
  color: var(--ideagen-brand-teal-20);
}

.lp-role-card-desc {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ideagen-color-neutral-60);
}

.lp-role-card-tick {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--ideagen-color-neutral-20);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity .14s, transform .14s, background .14s, border-color .14s;
}

.lp-role-card-tick .i-tick {
  width: 11px;
  height: 11px;
  background-color: #fff;
}

.lp-role-card.is-selected .lp-role-card-tick {
  background: var(--ideagen-brand-teal-10);
  border-color: var(--ideagen-brand-teal-10);
  opacity: 1;
  transform: scale(1);
}

/* Error highlight when Next is pressed without a role selected */
.lp-role-cards--error .lp-role-card {
  border-color: var(--ideagen-color-alert-40, #E22D38);
}

.lp-picker-sub {
  margin: 0 0 16px;
  font-size: 14.5px;
  color: var(--ideagen-color-neutral-70);
  line-height: 1.5;
}

.lp-search-wrap {
  position: relative;
  margin-bottom: 12px;
}

.lum-panel__search-icon {
  position: absolute;
  inset-inline-end: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: #bbbbbb;
  z-index: 1;
  transition: opacity 150ms ease;
  pointer-events: none;
  opacity: 1;
}

.lum-panel__search-clear {
  position: absolute;
  inset-inline-end: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: #bbbbbb;
  z-index: 1;
  transition: opacity 150ms ease;
  opacity: 0;
  pointer-events: none;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
}

.lp-search-wrap.has-value .lum-panel__search-icon {
  opacity: 0;
}

.lp-search-wrap.has-value .lum-panel__search-clear {
  opacity: 1;
  pointer-events: auto;
}

#lp-product-search {
    display: block !important;
    width: 100% !important;
    padding: 0 32px 0 12px !important;
    background: #f9f9f9 !important;
    border: 1px solid var(--ideagen-color-neutral-10) !important;
    border-radius: 8px !important;
    font-family: inherit !important;
    font-size: 14px !important;
    color: #444444 !important;
    outline: none !important;
    height: 36px !important;
    box-sizing: border-box !important;
    transition: 0.25s ease-in-out;
}

#lp-product-search:hover {
    border: 1px solid var(--ideagen-brand-teal-05) !important;
}

#lp-product-search:focus {
  border: 1px solid var(--ideagen-brand-teal-10) !important;
}

#lp-category-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.lp-pill {
    padding: 4px 13px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    background: var(--ideagen-color-neutral-05);
    color: var(--ideagen-color-neutral-90);
    transition: all .15s ease-in-out;
    border: 0;
}

.lp-pill:hover {
    background: var(--ideagen-color-neutral-10);
}

.lp-pill.is-active {
    background: var(--ideagen-color-teal-10);
    color: var(--ideagen-color-teal-90);
}

.lp-pill.is-active:hover {
    background: var(--ideagen-color-teal-20);
}

.lp-grid-wrap {
    border: 1px solid var(--ideagen-color-neutral-10);
    border-radius: 10px;
    height: 280px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 4px 8px 8px;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: #ddd transparent;
}

.lp-grid-wrap::-webkit-scrollbar {
  width: 6px;
}

.lp-grid-wrap::-webkit-scrollbar-track {
  background: transparent;
}

.lp-grid-wrap::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 3px;
}

#lp-product-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding-right: 4px;
}

.lp-grid-message {
  grid-column: 1 / -1;
  text-align: center;
  padding: 24px 0;
  color: #6b7280;
  font-size: 13px;
  line-height: 1.6;
}

.lp-grid-message.is-empty {
  color: #9ca3af;
}

.lp-grid-message.is-loading {
  padding: 28px 0;
}

.lp-grid-section-heading {
    grid-column: 1 / -1;
    font-size: 13px;
    font-weight: 600;
    color: var(--ideagen-color-neutral-50);
    padding: 2px 2px 4px;
}

.lp-grid-section-heading--rest {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--ideagen-color-neutral-10, #e5e7eb);
}

.lp-footer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-top: 16px;
  gap: 10px;
}

#lp-selection-count {
  font-size: 13px;
  color: #6b7280;
  text-align: center;
}

#lp-selection-count .lp-count-active {
    color: var(--ideagen-color-neutral-60);
    font-weight: 500;
}

#lp-selection-count .lp-count-active .i-tick {
  display: inline-block;
  width: 11px;
  height: 11px;
  background-color: var(--ideagen-color-neutral-60);
  vertical-align: -1px;
}

#lp-skip-btn {
  display: block;
  text-align: center;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ideagen-brand-teal-10);
  cursor: pointer;
}

#lp-skip-btn:hover, #lp-skip-btn:focus, #lp-skip-btn:active {
  color: var(--ideagen-brand-teal-20);
}

/* Disabled Next buttons — until all mandatory fields are filled.
   Applies to both the step 1 Next and the details-step Next. */
#lp-next-btn.is-disabled,
#lp-next-btn:disabled,
#lp-details-next-btn.is-disabled,
#lp-details-next-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.lp-product-card {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 10px;
    border-radius: 10px;
    border: 1px solid var(--ideagen-color-neutral-10);
    background: #f9f9f9;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    user-select: none;
    transition: border-color .12s, background .12s;
    max-width: 100%;
    min-width: 0;
}

/* !important: the theme's global :focus-visible:focus { outline: 0 } wins otherwise. */
.lp-product-card:focus-visible,
.lp-role-card:focus-visible {
    outline: 2px solid var(--ideagen-color-teal-90, #046e8a) !important;
    outline-offset: 2px !important;
}

.lp-product-card:hover {
    background: var(--ideagen-color-neutral-05);
}

.lp-product-card.is-selected {
    border-color: var(--ideagen-color-neutral-10);
    background: var(--ideagen-color-yellow-05);
}

.lp-product-card.is-selected:hover {
    border-color: var(--ideagen-color-neutral-10);
    background: var(--ideagen-color-yellow-05);
}

/* Locked (auto-identified) cards — always selected, can't be removed.
   Cursor + subtle dimming signal that they're fixed, while the checkbox
   stays filled. A small padlock replaces the tick to make it explicit. */
.lp-product-card.is-locked {
  cursor: default;
}

.lp-product-card.is-locked:hover {
  border-color: var(--ideagen-color-neutral-10);
  background: var(--ideagen-color-yellow-05);
}

.lp-product-card.is-locked .lp-card-checkbox {
  border-color: var(--ideagen-brand-teal-10);
  background: var(--ideagen-brand-teal-10);
  opacity: 0.65;
}

.lp-card-icon-wrap {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-card-icon-wrap img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.lp-card-icon-default {
  width: 26px;
  height: 26px;
  border-radius: 5px;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.lp-card-name-wrap {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.lp-card-name {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ideagen-color-neutral-90);
  line-height: 1.3;
  /* Wrap rather than truncate: several names differ only at the end
     ("Ideagen Aviation Engagement …"). */
  overflow-wrap: break-word;
}

.lp-card-formerly {
    display: block;
    font-size: 12px;
    color: var(--ideagen-color-neutral-50);
    line-height: 1.3;
    overflow-wrap: break-word;
}

.lp-card-checkbox {
    width: 17px;
    height: 17px;
    border-radius: 4px;
    flex-shrink: 0;
    margin-left: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .12s;
    border: 1.5px solid var(--ideagen-color-neutral-10);
    background: #ffffff;
}

.lp-card-checkbox.is-checked {
    border-color: var(--ideagen-brand-teal-10);
    background: var(--ideagen-brand-teal-10);
}

.lp-card-checkbox .i-tick {
  width: 17px;
  height: 17px;
  background-color: #ffffff;
}

#lp-modal-loader {
  position: absolute;
  inset: 0;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  transition: opacity 200ms ease;
  border-radius: 24px;
}

#lp-modal-loader .squares {
  display: flex;
  align-items: center;
}

#lp-modal-loader .square {
  border-radius: 2px;
  height: 12px;
  width: 12px;
  margin-right: 5px;
}

#lp-modal-loader .square--1 {
  background-color: #e30072;
  animation: lpSquareAnim1 2s linear 0s infinite;
}

#lp-modal-loader .square--2 {
  background-color: #2f4051;
  animation: lpSquareAnim2 2s linear 0s infinite;
}

#lp-modal-loader .square--3 {
  background-color: #1b838b;
  animation: lpSquareAnim3 2s linear 0s infinite;
}

@keyframes lpSquareAnim1 {
  0%   { transform: scale(1); }
  15%  { transform: scale(1.5); }
  30%  { transform: scale(1); }
  100% { transform: scale(1); }
}

@keyframes lpSquareAnim2 {
  0%   { transform: scale(1); }
  30%  { transform: scale(1); }
  45%  { transform: scale(1.5); }
  60%  { transform: scale(1); }
  100% { transform: scale(1); }
}

@keyframes lpSquareAnim3 {
  0%   { transform: scale(1); }
  60%  { transform: scale(1); }
  75%  { transform: scale(1.5); }
  90%  { transform: scale(1); }
  100% { transform: scale(1); }
}

/* ═══ Login / register / forgot two-column layout and hero (was injectStyles, #lum-login-styles) ═══ */

/* ================================================================
   New CC structure (Preact): dialog.mfp-wrap.modal--login
   The <dialog> IS the wrap — no .mfp-container layer exists.
   DOM: dialog.mfp-wrap.modal--X
          └── .mfp-content               (direct child)
                ├── button.mfp-close      (direct child)
                ├── .mfp-move-slot        (direct child)
                └── .lum-login-right      (injected by us)

   Legacy fallback selectors (.mfp-wrap.modal--X .mfp-container etc.)
   are kept for any older CC builds still using that structure.
   ================================================================ */

/* ── Modal open/close animation ── */
/* Applied via JS only on genuine open/close, not tab switches */
@keyframes lumModalSpringIn {
  0%   { opacity: 0; transform: scale(.95); }
  100% { opacity: 1; transform: scale(1);   }
}

@keyframes lumModalSpringOut {
  0%   { opacity: 1; transform: scale(1);   }
  100% { opacity: 0; transform: scale(.95); }
}

.lum-modal-animating-in {
  animation: .18s cubic-bezier(0, .7, .3, 1) lumModalSpringIn forwards;
}

.lum-modal-animating-out {
  animation: .18s cubic-bezier(0, .7, .3, 1) lumModalSpringOut forwards;
}

.box.pagebox.box__pad:has(#set-username) {
  padding: 20px 26px 26px;
    border-radius: 12px;
    margin: 0;
    border: 1px solid rgba(233, 233, 233, 1);
    box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.05);
    background: white;
}

.box.pagebox.box__pad:has(#set-username) .box__content {
  padding: 38px 58px 38px;
}

.box.pagebox.box__pad:has(#set-username) .lp-back-btn {
  top: 24px;
  left: 24px;
}

      .mfp-content input[type="text"],
      .box.pagebox.box__pad:has(#set-username) input[type="text"] {
    border: 2px solid var(--ideagen-color-neutral-10);
    border-radius: 8px;
    transition: all 0.15s ease-in-out;
    line-height: 0;
    min-height: 45px;
}

      .mfp-content input[type="text"]:hover,
      .box.pagebox.box__pad:has(#set-username) input[type="text"]:hover {
    border: 2px solid var(--ideagen-brand-teal-05);
}

      .mfp-content input[type="text"]:active,
      .box.pagebox.box__pad:has(#set-username) input[type="text"]:active,
      .mfp-content input[type="text"]:focus,
      .box.pagebox.box__pad:has(#set-username) input[type="text"]:focus {
    border: 2px solid var(--ideagen-brand-teal-10);
}

.mfp-content input[disabled="disabled"],
.box.pagebox.box__pad:has(#set-username) input[disabled="disabled"],
.mfp-content input[disabled="disabled"]:hover,
.box.pagebox.box__pad:has(#set-username) input[disabled="disabled"]:hover,
.mfp-content input[disabled="disabled"]:active,
.box.pagebox.box__pad:has(#set-username) input[disabled="disabled"]:active,
.mfp-content input[disabled="disabled"]:focus,
.box.pagebox.box__pad:has(#set-username) input[disabled="disabled"]:focus {
    cursor: not-allowed;
    border: 2px solid var(--ideagen-color-neutral-10);
}

.mfp-content .fancyselect input[type="checkbox"] + label div a,
.box.pagebox.box__pad:has(#set-username) .fancyselect input[type="checkbox"] + label div a {
    color: var(--ideagen-brand-teal-10);
    font-weight: 700;
    transition: 0.15s ease-in-out;
}

.mfp-content .fancyselect input[type="checkbox"] + label div a:hover,
.mfp-content .fancyselect input[type="checkbox"] + label div a:focus,
.mfp-content .fancyselect input[type="checkbox"] + label div a:active,
.box.pagebox.box__pad:has(#set-username) .fancyselect input[type="checkbox"] + label div a:hover,
.box.pagebox.box__pad:has(#set-username) .fancyselect input[type="checkbox"] + label div a:focus,
.box.pagebox.box__pad:has(#set-username) .fancyselect input[type="checkbox"] + label div a:active {
    color: var(--ideagen-brand-teal-20);
}

.mfp-content .btn--cta.btn--full-width,
.mfp-content .btn--cta.qa-submit-button,
.box.pagebox.box__pad:has(#set-username) .btn--cta.btn--full-width,
.box.pagebox.box__pad:has(#set-username) .btn--cta.qa-submit-button {
    font-weight: 700;
    font-size: 16px;
    line-height: normal;
    padding: 0px 10px;
    height: 42px;
    background: var(--ideagen-brand-pink-05);
    transition: 0.15s ease-in-out;
    border-radius: 8px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sitewidth:has(#set-username) .custom-sidebar .module.Sidebarmodule {
    display:none;
}


/* ── Prevent scrollbar-removal from shifting the layout ── */
/* CC adds overflow:hidden to body on modal open, which can cause a
   layout recalculation in the flex chain. Fixing .lum-right-overlay
   with an explicit height and isolating it from the flex recalc. */

/* ── Wrap: flex container to centre the modal box ── */

/* ── Ensure un-opened dialogs are never visible ── */
dialog.mfp-wrap.modal--login:not([open]),
dialog.mfp-wrap.modal--forgot:not([open]),
dialog.mfp-wrap.modal--register:not([open]),
dialog.modal--login:not([open]),
dialog.modal--forgot:not([open]),
dialog.modal--register:not([open]) {
  display: none !important;
  visibility: hidden !important;
}

/* data-modal-id variants */
dialog[data-modal-id].modal--login:not([open]),
dialog[data-modal-id].modal--forgot:not([open]),
dialog[data-modal-id].modal--register:not([open]) {
  display: none !important;
  visibility: hidden !important;
}

/* ── Neutralise Preact's transform-centred positioning ── */
/* Preact sets dialog[data-modal-id] to top:50%/left:50%/transform:translate(-50%,-50%)
   which is a single-element centring trick — it fights our full-screen backdrop.
   Reset every property it sets so our rules below take full control. */
dialog[data-modal-id].modal--login,
dialog[data-modal-id].modal--forgot,
dialog[data-modal-id].modal--register,
dialog.mfp-wrap.modal--login,
dialog.mfp-wrap.modal--forgot,
dialog.mfp-wrap.modal--register {
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  transform: none !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: auto !important;
}

/* ── Full-screen backdrop reset ── */
/* dialog.mfp-wrap IS both the <dialog> and the wrap — reset UA styles
   and use it as our full-screen flex centring container. */
dialog.mfp-wrap.modal--login,
dialog.mfp-wrap.modal--forgot,
dialog.mfp-wrap.modal--register,
dialog[open].modal--login,
dialog[open].modal--forgot,
dialog[open].modal--register,
dialog[data-modal-id].modal--login,
dialog[data-modal-id].modal--forgot,
dialog[data-modal-id].modal--register {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  margin: 0 !important;
  padding: 40px 24px !important;
  border: none !important;
  background: rgba(47, 64, 81, 0.42) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  overflow: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  z-index: 1042 !important;
}

/* Suppress native ::backdrop — we use the dialog's own background */
dialog.mfp-wrap.modal--login::backdrop,
dialog.mfp-wrap.modal--forgot::backdrop,
dialog.mfp-wrap.modal--register::backdrop,
dialog[open].modal--login::backdrop,
dialog[open].modal--forgot::backdrop,
dialog[open].modal--register::backdrop,
dialog[data-modal-id].modal--login::backdrop,
dialog[data-modal-id].modal--forgot::backdrop,
dialog[data-modal-id].modal--register::backdrop {
  display: none;
  background: transparent;
}

.modal--login.mfp-wrap,
.modal--forgot.mfp-wrap,
.modal--register.mfp-wrap {
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 40px 24px !important;
  box-sizing: border-box !important;
}


/* ── Legacy .mfp-container passthrough (old CC builds only) ── */
/* In current CC, dialog.mfp-wrap > .mfp-container is just a neutral
   wrapper div between the dialog and .mfp-content. Give it no visual
   styles — card dimensions/border/shadow all live on .mfp-content. */
dialog[open].modal--login .mfp-container,
dialog[open].modal--forgot .mfp-container,
dialog[open].modal--register .mfp-container,
dialog[data-modal-id].modal--login .mfp-container,
dialog[data-modal-id].modal--forgot .mfp-container,
dialog[data-modal-id].modal--register .mfp-container,
.modal--login .mfp-container,
.modal--forgot .mfp-container,
.modal--register .mfp-container {
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0 !important;
  border: none !important;
  overflow: visible !important;
  box-shadow: none !important;
  background: transparent !important;
  position: relative !important;
}

/* ── Two-column card (new structure: .mfp-content IS the card) ── */
/* In dialog.mfp-wrap, .mfp-content is a direct child and acts as the
   visible modal card. Give it all the card-level styles previously on
   .mfp-container, and override Preact's 570px/85vh defaults. */
dialog.mfp-wrap.modal--login > .mfp-content,
dialog.mfp-wrap.modal--forgot > .mfp-content,
dialog.mfp-wrap.modal--register > .mfp-content,
dialog[open].modal--login .mfp-content,
dialog[open].modal--forgot .mfp-content,
dialog[open].modal--register .mfp-content,
dialog[data-modal-id].modal--login .mfp-content,
dialog[data-modal-id].modal--forgot .mfp-content,
dialog[data-modal-id].modal--register .mfp-content,
.modal--login .mfp-content,
.modal--forgot .mfp-content,
.modal--register .mfp-content {
  display: flex !important;
  width: 100% !important;
  max-width: 1100px !important;
  height: 760px !important;
  max-height: calc(100vh - 80px) !important;
  max-height: calc(100dvh - 80px) !important;
  overflow: hidden !important;
  border-radius: 24px !important;
  border: 10px solid rgba(255, 255, 255, 1) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35) !important;
  background: #FFFFFF !important;
  position: relative !important;
  /* Override Preact defaults — including the new padding:32px which
     stacked on top of the panel's own padding and forced a scrollbar */
  box-sizing: border-box !important;
  padding: 0 !important;
}

/* ── Left panel — all three modals ── */
.modal--login #modal_login,
.modal--login #modal_register,
.modal--login #modal_forgot,
.modal--forgot #modal_forgot,
.modal--login .mfp-move-slot,
.modal--forgot .mfp-move-slot,
.modal--register .mfp-move-slot,
dialog.mfp-wrap.modal--login .mfp-move-slot,
dialog.mfp-wrap.modal--forgot .mfp-move-slot,
dialog.mfp-wrap.modal--register .mfp-move-slot,
dialog[open].modal--login .mfp-move-slot,
dialog[open].modal--forgot .mfp-move-slot,
dialog[open].modal--register .mfp-move-slot,
dialog[data-modal-id].modal--login .mfp-move-slot,
dialog[data-modal-id].modal--forgot .mfp-move-slot,
dialog[data-modal-id].modal--register .mfp-move-slot {
    flex: 0 0 600px !important;
    width: 600px !important;
    max-width: 100% !important;
    height: 100% !important;
    align-self: stretch !important;
    background: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding: 38px 88px 38px !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    scrollbar-width: thin;
    scrollbar-color: #ddd transparent;
}

/* ── Picker view: tighten side padding so the wider product grid fits
   without forcing a scrollbar. The register form keeps its 88px sides;
   the picker uses 48px to reclaim horizontal room and reduce height. ── */
.mfp-move-slot.lp-picker-showing {
    padding: 40px 48px 40px !important;
}

/* The actual form content needs its own wrapper that can grow beyond
   the panel's fixed height without being compressed by flex — this
   is what makes content scroll instead of squish when it overflows. */
.modal--login #modal_login > *,
.modal--login #modal_register > *,
.modal--login #modal_forgot > *,
.modal--forgot #modal_forgot > *,
dialog.mfp-wrap.modal--login .mfp-move-slot > *,
dialog.mfp-wrap.modal--forgot .mfp-move-slot > *,
dialog.mfp-wrap.modal--register .mfp-move-slot > *,
dialog[open].modal--login .mfp-move-slot > *,
dialog[open].modal--forgot .mfp-move-slot > *,
dialog[open].modal--register .mfp-move-slot > *,
dialog[data-modal-id].modal--login .mfp-move-slot > *,
dialog[data-modal-id].modal--forgot .mfp-move-slot > *,
dialog[data-modal-id].modal--register .mfp-move-slot > * {
  flex-shrink: 0 !important;
}

.lp-skip-btn:hover, .lp-skip-btn:focus, .lp-skip-btn:active {
    color: var(--ideagen-brand-teal-20);
}

/* ── Legacy position anchor for old CC builds with .mfp-container ── */
.modal--login .mfp-container,
.modal--forgot .mfp-container,
.modal--register .mfp-container,
dialog[data-modal-id].modal--login .mfp-container,
dialog[data-modal-id].modal--forgot .mfp-container,
dialog[data-modal-id].modal--register .mfp-container {
  position: relative !important;
}

/* ── Close button: absolute inside top-right of .mfp-content ── */
dialog.mfp-wrap.modal--login .mfp-content > button.mfp-close,
dialog.mfp-wrap.modal--forgot .mfp-content > button.mfp-close,
dialog.mfp-wrap.modal--register .mfp-content > button.mfp-close,
dialog[open].modal--login .mfp-content > button.mfp-close,
dialog[open].modal--forgot .mfp-content > button.mfp-close,
dialog[open].modal--register .mfp-content > button.mfp-close,
dialog[data-modal-id].modal--login .mfp-content > button.mfp-close,
dialog[data-modal-id].modal--forgot .mfp-content > button.mfp-close,
dialog[data-modal-id].modal--register .mfp-content > button.mfp-close,
.modal--login .mfp-content > button.mfp-close,
.modal--forgot .mfp-content > button.mfp-close,
.modal--register .mfp-content > button.mfp-close,
dialog.mfp-wrap.modal--login button.mfp-close,
dialog.mfp-wrap.modal--forgot button.mfp-close,
dialog.mfp-wrap.modal--register button.mfp-close,
dialog[open].modal--login button.mfp-close,
dialog[open].modal--forgot button.mfp-close,
dialog[open].modal--register button.mfp-close,
.modal--login button.mfp-close,
.modal--forgot button.mfp-close,
.modal--register button.mfp-close {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  z-index: 10000 !important;
  color: #ffffff !important;
  opacity: 0.8 !important;
  font-size: 22px !important;
  background: rgba(0, 0, 0, 0.25) !important;
  border-radius: 50% !important;
  width: 46px !important;
  height: 46px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  padding: 0 !important;
  transition: opacity 0.2s ease, background 0.2s ease !important;
}

dialog.mfp-wrap.modal--login .mfp-content > button.mfp-close:hover,
dialog.mfp-wrap.modal--forgot .mfp-content > button.mfp-close:hover,
dialog.mfp-wrap.modal--register .mfp-content > button.mfp-close:hover,
dialog[open].modal--login .mfp-content > button.mfp-close:hover,
dialog[open].modal--forgot .mfp-content > button.mfp-close:hover,
dialog[open].modal--register .mfp-content > button.mfp-close:hover,
dialog[data-modal-id].modal--login .mfp-content > button.mfp-close:hover,
dialog[data-modal-id].modal--forgot .mfp-content > button.mfp-close:hover,
dialog[data-modal-id].modal--register .mfp-content > button.mfp-close:hover,
.modal--login .mfp-content > button.mfp-close:hover,
.modal--forgot .mfp-content > button.mfp-close:hover,
.modal--register .mfp-content > button.mfp-close:hover,
dialog.mfp-wrap.modal--login button.mfp-close:hover,
dialog.mfp-wrap.modal--forgot button.mfp-close:hover,
dialog.mfp-wrap.modal--register button.mfp-close:hover,
dialog[open].modal--login button.mfp-close:hover,
dialog[open].modal--forgot button.mfp-close:hover,
dialog[open].modal--register button.mfp-close:hover,
.modal--login button.mfp-close:hover,
.modal--forgot button.mfp-close:hover,
.modal--register button.mfp-close:hover {
  opacity: 1 !important;
  background: rgba(0, 0, 0, 0.45) !important;
}

dialog.mfp-wrap.modal--login .mfp-content > button.mfp-close .i-cross,
dialog.mfp-wrap.modal--forgot .mfp-content > button.mfp-close .i-cross,
dialog.mfp-wrap.modal--register .mfp-content > button.mfp-close .i-cross,
dialog[open].modal--login .mfp-content > button.mfp-close .i-cross,
dialog[open].modal--forgot .mfp-content > button.mfp-close .i-cross,
dialog[open].modal--register .mfp-content > button.mfp-close .i-cross,
dialog[data-modal-id].modal--login .mfp-content > button.mfp-close .i-cross,
dialog[data-modal-id].modal--forgot .mfp-content > button.mfp-close .i-cross,
dialog[data-modal-id].modal--register .mfp-content > button.mfp-close .i-cross,
.modal--login .mfp-content > button.mfp-close .i-cross,
.modal--forgot .mfp-content > button.mfp-close .i-cross,
.modal--register .mfp-content > button.mfp-close .i-cross,
dialog.mfp-wrap.modal--login button.mfp-close .i-cross,
dialog.mfp-wrap.modal--forgot button.mfp-close .i-cross,
dialog.mfp-wrap.modal--register button.mfp-close .i-cross,
dialog[open].modal--login button.mfp-close .i-cross,
dialog[open].modal--forgot button.mfp-close .i-cross,
dialog[open].modal--register button.mfp-close .i-cross,
.modal--login button.mfp-close .i-cross,
.modal--forgot button.mfp-close .i-cross,
.modal--register button.mfp-close .i-cross {
  width: 18px;
  height: 18px;
  background-color: #ffffff;
}

.lum-forgot-heading {
    padding-top: 24px;
    margin-bottom: 0;
}

.lum-forgot-note {
    margin-top: 12px !important;
    margin-bottom: 0 !important;
}

/* ── Hero panel (injected once by JS) — now on the LEFT ── */
/* order:-1 forces it before the form panel in flex order despite
   being appended later in the DOM (CC's modal is always inserted first) */
.lum-login-right {
  order: 1 !important;
  flex: 1 1 auto !important;
  position: relative !important;
  overflow: hidden !important;
  height: 100% !important;
  /* pointer-events:auto (not none) — this panel sits inside
     .mfp-content, but CC's click-outside-to-close handler treats
     anything that isn't actually hit by a click target as a click
     on the background behind it. With pointer-events:none here,
     clicks fell through to .mfp-container/.mfp-wrap and closed the
     modal. Setting auto makes the panel itself catch the click,
     so it counts as "inside the modal" and the close never fires. */
  pointer-events: auto;
  will-change: transform;
  border-radius: 24px;
}

.lum-login-right * {
  pointer-events: auto;
}

.lum-right-bg {
  position: absolute;
  inset: 0;
  /* Blurred beams in the 2026 hero colours (see the ::before and ::after
     rules below); this colour shows only before they paint. */
  background-color: #0d1323;
  overflow: hidden;
  transform-origin: center;
  will-change: transform;
  /* Each slide has its own pose (zoom + offset, CONFIG.heroBackgroundPoses
     in the script, set as --lum-bg-pose), and the background glides from
     wherever it is to the new slide's pose. A transition, unlike the old
     keyframe replay, never restarts from the top: not on a segment click,
     and not when CC re-attaches the panel on a Sign in / Sign up switch. */
  transform: var(--lum-bg-pose, scale(1.12));
  transition: transform 6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* The beams: one wide blurred layer in the hero colours. It drifts slowly
   on its own (transform, lum-beams-drift) and swipes to a new position when
   the slide changes (translate, set per slide as --lum-beam-x from
   CONFIG.heroBeamOffsets). The two properties compose, so neither cuts the
   other off. */
.lum-right-bg::before {
  content: "";
  position: absolute;
  inset: -30% -25%;
  background: linear-gradient(100deg,
    #4ce1f7 0%, #ff27ea 10%, #7e2c8d 22%, #24254c 36%, #261739 50%,
    #24254c 62%, #5c57bb 74%, #4ce1f7 86%, #ff27ea 100%);
  background: linear-gradient(in oklab 100deg,
    #4ce1f7 0%, #ff27ea 10%, #7e2c8d 22%, #24254c 36%, #261739 50%,
    #24254c 62%, #5c57bb 74%, #4ce1f7 86%, #ff27ea 100%);
  filter: blur(28px);
  translate: var(--lum-beam-x, 8%) 0;
  transition: translate 1.4s cubic-bezier(0.65, 0, 0.35, 1);
  will-change: transform, translate;
  animation: lum-beams-drift 20s ease-in-out var(--lum-beam-drift-delay, 0s) infinite alternate;
  pointer-events: none;
}

/* Dims the middle behind the slide copy without blacking it out, under a
   static film grain like the 2026 hero image's: white and dark specks drawn
   from the same noise, so it lightens and darkens evenly. */
.lum-right-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.270 0 0 0 -0.135'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -0.270 0 0 0 0.135'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E"),
    radial-gradient(48% 74% at 50% 50%,
      rgba(13, 19, 35, .74) 0%, rgba(13, 19, 35, .46) 55%, rgba(13, 19, 35, .08) 100%);
  pointer-events: none;
}

@keyframes lum-beams-drift {
  0%   { transform: translate3d(-3%, 0, 0); }
  100% { transform: translate3d(3%, 0, 0); }
}

.lum-right-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 56px;
  box-sizing: border-box;
  /* Own compositing layer — insulates content from parent transform
     (the spring-in animation scales .mfp-container which would
     otherwise cause the absolutely-positioned content to shift) */
  transform: translateZ(0);
  will-change: transform;
}

.lum-right-content {
  max-width: 420px;
  width: 100%;
  color: #ffffff;
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ── Slide container fills the content area ── */
.lum-hero-slide-wrap {
  flex: 1;
  position: relative;
  min-height: 0;
}

.lum-hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  /* Carousel push: inactive slides rest parked to the right, the active
     slide sits at 0, and the outgoing slide (.is-leaving) exits left. */
  transform: translate3d(40px, 0, 0);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  will-change: opacity, transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.lum-hero-slide.is-active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}

.lum-hero-slide.is-leaving {
  opacity: 0;
  transform: translate3d(-40px, 0, 0);
}

.lum-right-illustration {
  margin: 0 0 28px;
  width: 100%;
}

.lum-right-illustration svg {
  display: block;
  width: 100%;
  height: auto;
}

.lum-right-illustration img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 300px;
  object-fit: contain;
}

.lum-right-headline {
  font-size: clamp(22px, 2.8vw, 32px) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: #ffffff !important;
  margin: 0 0 12px !important;
  letter-spacing: -0.3px;
}

.lum-right-sub {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
  max-width: 360px;
}

/* ── Segmented progress bar — absolutely pinned to bottom of hero ── */
.lum-hero-progress {
  position: absolute;
  bottom: 28px;
  left: 32px;
  right: 32px;
  display: flex;
  gap: 6px;
  z-index: 2;
}

.lum-hero-progress-seg {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.25);
  overflow: hidden;
  cursor: pointer;
  transition: background 0.2s ease;
}

.lum-hero-progress-seg:hover {
  background: rgba(255, 255, 255, 0.4);
}

.lum-hero-progress-seg.is-complete {
  background: rgba(255, 255, 255, 0.7);
}

.lum-hero-progress-fill {
  height: 100%;
  width: 0%;
  background: #ffffff;
  border-radius: 3px;
}

/* Active class is kept for potential external CSS hooks,
   but the fill width is driven by JS rAF — no CSS transition needed */
.lum-hero-progress-seg.is-active .lum-hero-progress-fill {
  /* intentionally no transition */
}

/* ── SSO "Set username" page: hero panel hosted in the sidebar ──────────
   Reuses the login hero (.lum-login-right, from buildRightPanel()) wrapped
   in a card that supplies the fixed height its absolutely-positioned
   slides + progress bar need — the modal gave the panel a flex-column
   height:100%, but a sidebar box has no intrinsic height. Type/padding
   are dialled down for the narrower sidebar column. */
.lp-sso-hero-module {
  margin-bottom: 12px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid rgba(233, 233, 233, 1);
  box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.05);
  background: white;
}

.lp-sso-hero-card {
  position: relative;
  height: 540px;
  border-radius: 12px;
  overflow: hidden;
}

.lp-sso-hero-card .lum-login-right {
  height: 100% !important;
  border-radius: 12px;
}

.lp-sso-hero-card .lum-right-overlay {
  padding: 40px 28px 52px !important;
}

.lp-sso-hero-card .lum-right-illustration {
  margin-bottom: 20px;
}

.lp-sso-hero-card .lum-right-illustration img {
  max-height: 180px;
}

.lp-sso-hero-card .lum-right-headline {
  font-size: 22px !important;
}

.lp-sso-hero-card .lum-right-sub {
  font-size: 14.5px;
  max-width: none;
}

.lp-sso-hero-card .lum-hero-progress {
  left: 24px;
  right: 24px;
  bottom: 24px;
}

/* Below 920px the base rule hides .lum-login-right; hide the whole card
   too so no empty bordered box is left behind in the stacked layout. */
@media (max-width: 920px) {
  .lp-sso-hero-module {
    display: none !important;
  }
}

/* ── Hide empty <p> elements CC scatters through the modal ── */
dialog[open].modal--login p:empty,
dialog[open].modal--forgot p:empty,
dialog[open].modal--register p:empty,
dialog[data-modal-id].modal--login p:empty,
dialog[data-modal-id].modal--forgot p:empty,
dialog[data-modal-id].modal--register p:empty,
.modal--login p:empty,
.modal--forgot p:empty,
.modal--register p:empty {
  display: none !important;
}

dialog.mfp-wrap.modal--login h4,
dialog.mfp-wrap.modal--forgot h4,
dialog.mfp-wrap.modal--register h4,
dialog[open].modal--login h4,
dialog[open].modal--forgot h4,
dialog[open].modal--register h4,
dialog[data-modal-id].modal--login h4,
dialog[data-modal-id].modal--forgot h4,
dialog[data-modal-id].modal--register h4,
.modal--login h4,
.modal--forgot h4,
.modal--register h4 {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #6b7280 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin: 0 0 10px !important;
  display: none !important;
}

/* ── Login content ordering ── */
/* #modal_login_source (and equivalent IDs) is the actual content container.
   Make it a flex column so we can control child order with CSS. */
dialog.mfp-wrap.modal--login #modal_login_source,
dialog.mfp-wrap.modal--forgot #modal_forgot_source,
dialog[open].modal--login #modal_login_source,
dialog[open].modal--forgot #modal_forgot_source,
.modal--login #modal_login_source,
.modal--forgot #modal_forgot_source {
  display: flex !important;
  flex-direction: column !important;
}

/* Logo/heading — stays first */
dialog.mfp-wrap.modal--login #modal_login_source h2,
dialog[open].modal--login #modal_login_source h2,
.modal--login #modal_login_source h2 {
  order: 0 !important;
}

/* Tab switcher (Sign in / Sign up) */
dialog.mfp-wrap.modal--login #modal_login_source .tab.service-switch,
dialog[open].modal--login #modal_login_source .tab.service-switch,
.modal--login #modal_login_source .tab.service-switch {
  order: 1 !important;
}

/* Form fields — comes before SSO */
dialog.mfp-wrap.modal--login #modal_login_source form,
dialog[open].modal--login #modal_login_source form,
.modal--login #modal_login_source form,
/* CC now wraps the form in a plain <div>, which is the actual flex item */
dialog.mfp-wrap.modal--login #modal_login_source > :has(> form),
dialog[open].modal--login #modal_login_source > :has(> form),
.modal--login #modal_login_source > :has(> form) {
  order: 2 !important;
}

/* Separator "or" divider — display:flex preserves its ::before/::after lines */
dialog.mfp-wrap.modal--login #modal_login_source .seperator--text,
dialog.mfp-wrap.modal--forgot #modal_forgot_source .seperator--text,
dialog[open].modal--login #modal_login_source .seperator--text,
dialog[open].modal--forgot #modal_forgot_source .seperator--text,
.modal--login #modal_login_source .seperator--text,
.modal--forgot #modal_forgot_source .seperator--text {
  order: 3 !important;
  margin: 16px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px;
}

dialog.mfp-wrap.modal--login #modal_login_source .seperator--text::before,
dialog.mfp-wrap.modal--login #modal_login_source .seperator--text::after,
dialog.mfp-wrap.modal--forgot #modal_forgot_source .seperator--text::before,
dialog.mfp-wrap.modal--forgot #modal_forgot_source .seperator--text::after,
dialog[open].modal--login #modal_login_source .seperator--text::before,
dialog[open].modal--login #modal_login_source .seperator--text::after,
dialog[open].modal--forgot #modal_forgot_source .seperator--text::before,
dialog[open].modal--forgot #modal_forgot_source .seperator--text::after,
.modal--login #modal_login_source .seperator--text::before,
.modal--login #modal_login_source .seperator--text::after,
.modal--forgot #modal_forgot_source .seperator--text::before,
.modal--forgot #modal_forgot_source .seperator--text::after {
  content: '' !important;
  flex: 1 !important;
  display: block !important;
  height: 1px !important;
  background: var(--ideagen-color-neutral-10, #e5e7eb) !important;
  align-self: center !important;
}

/* SSO button — after separator */
dialog.mfp-wrap.modal--login #modal_login_source .btn--sso,
dialog.mfp-wrap.modal--forgot #modal_forgot_source .btn--sso,
dialog[open].modal--login #modal_login_source .btn--sso,
dialog[open].modal--forgot #modal_forgot_source .btn--sso,
.modal--login #modal_login_source .btn--sso,
.modal--forgot #modal_forgot_source .btn--sso {
  order: 4 !important;
}

/* Ideagen Employee Login (SAML) always last */
dialog.mfp-wrap.modal--login #modal_login_source .btn--sso.qa-sso-saml_v2,
dialog.mfp-wrap.modal--forgot #modal_forgot_source .btn--sso.qa-sso-saml_v2,
dialog[open].modal--login #modal_login_source .btn--sso.qa-sso-saml_v2,
dialog[open].modal--forgot #modal_forgot_source .btn--sso.qa-sso-saml_v2,
.modal--login #modal_login_source .btn--sso.qa-sso-saml_v2,
.modal--forgot #modal_forgot_source .btn--sso.qa-sso-saml_v2 {
  order: 5 !important;
}

/* H4 label above SSO — hidden but keep in place */
dialog.mfp-wrap.modal--login #modal_login_source h4,
dialog[open].modal--login #modal_login_source h4,
.modal--login #modal_login_source h4 {
  order: 4 !important;
  display: none !important;
}

/* Hide SSO and separator entirely on register */
dialog.mfp-wrap.modal--register .btn--sso,
dialog[open].modal--register .btn--sso,
dialog[data-modal-id].modal--register .btn--sso,
.modal--register .btn--sso,
dialog.mfp-wrap.modal--register .seperator--text,
dialog[open].modal--register .seperator--text,
dialog[data-modal-id].modal--register .seperator--text,
.modal--register .seperator--text {
  display: none !important;
}

dialog[open].modal--login .form__row,
dialog[open].modal--forgot .form__row,
dialog[open].modal--register .form__row,
dialog[data-modal-id].modal--login .form__row,
dialog[data-modal-id].modal--forgot .form__row,
dialog[data-modal-id].modal--register .form__row,
.modal--login .form__row,
.modal--forgot .form__row,
.modal--register .form__row {
  margin-bottom: 14px !important;
}

dialog[open].modal--login .form__row .first,
dialog[open].modal--forgot .form__row .first,
dialog[open].modal--register .form__row .first,
dialog[data-modal-id].modal--login .form__row .first,
dialog[data-modal-id].modal--forgot .form__row .first,
dialog[data-modal-id].modal--register .form__row .first,
.modal--login .form__row .first,
.modal--forgot .form__row .first,
.modal--register .form__row .first {
  margin-bottom: 4px !important;
}

        @media (max-width: 920px) {
  dialog.mfp-wrap.modal--login,
  dialog.mfp-wrap.modal--forgot,
  dialog.mfp-wrap.modal--register,
  dialog[open].modal--login,
  dialog[open].modal--forgot,
  dialog[open].modal--register,
  dialog[data-modal-id].modal--login,
  dialog[data-modal-id].modal--forgot,
  dialog[data-modal-id].modal--register,
  .modal--login.mfp-wrap,
  .modal--forgot.mfp-wrap,
  .modal--register.mfp-wrap {
    padding: 16px !important;
    align-items: stretch !important;
  }
  dialog[open].modal--login .mfp-container,
  dialog[open].modal--forgot .mfp-container,
  dialog[open].modal--register .mfp-container,
  dialog[data-modal-id].modal--login .mfp-container,
  dialog[data-modal-id].modal--forgot .mfp-container,
  dialog[data-modal-id].modal--register .mfp-container,
  .modal--login .mfp-container,
  .modal--forgot .mfp-container,
  .modal--register .mfp-container {
    height: auto !important;
    max-height: calc(100vh - 32px) !important;
    max-height: calc(100dvh - 32px) !important;
  }
  dialog.mfp-wrap.modal--login > .mfp-content,
  dialog.mfp-wrap.modal--forgot > .mfp-content,
  dialog.mfp-wrap.modal--register > .mfp-content,
  dialog[open].modal--login .mfp-content,
  dialog[open].modal--forgot .mfp-content,
  dialog[open].modal--register .mfp-content,
  dialog[data-modal-id].modal--login .mfp-content,
  dialog[data-modal-id].modal--forgot .mfp-content,
  dialog[data-modal-id].modal--register .mfp-content,
  .modal--login .mfp-content,
  .modal--forgot .mfp-content,
  .modal--register .mfp-content {
    height: auto !important;
    max-height: 100% !important;
    border-radius: 16px !important;
    border-width: 6px !important;
  }
  .modal--login #modal_login,
  .modal--login #modal_register,
  .modal--login #modal_forgot,
  .modal--forgot #modal_forgot,
  dialog.mfp-wrap.modal--login .mfp-move-slot,
  dialog.mfp-wrap.modal--forgot .mfp-move-slot,
  dialog.mfp-wrap.modal--register .mfp-move-slot,
  dialog[open].modal--login .mfp-move-slot,
  dialog[open].modal--forgot .mfp-move-slot,
  dialog[open].modal--register .mfp-move-slot,
  dialog[data-modal-id].modal--login .mfp-move-slot,
  dialog[data-modal-id].modal--forgot .mfp-move-slot,
  dialog[data-modal-id].modal--register .mfp-move-slot {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: auto !important;
    max-height: 100%;
    padding: 48px 24px 48px !important;
  }
    dialog.mfp-wrap.modal--login .mfp-content > button.mfp-close,
    dialog.mfp-wrap.modal--forgot .mfp-content > button.mfp-close,
    dialog.mfp-wrap.modal--register .mfp-content > button.mfp-close,
    dialog[open].modal--login .mfp-content > button.mfp-close,
    dialog[open].modal--forgot .mfp-content > button.mfp-close,
    dialog[open].modal--register .mfp-content > button.mfp-close,
    dialog[data-modal-id].modal--login .mfp-content > button.mfp-close,
    dialog[data-modal-id].modal--forgot .mfp-content > button.mfp-close,
    dialog[data-modal-id].modal--register .mfp-content > button.mfp-close,
    dialog.mfp-wrap.modal--login button.mfp-close,
    dialog.mfp-wrap.modal--forgot button.mfp-close,
    dialog.mfp-wrap.modal--register button.mfp-close,
    dialog[open].modal--login button.mfp-close,
    dialog[open].modal--forgot button.mfp-close,
    dialog[open].modal--register button.mfp-close,
    .modal--login button.mfp-close, .modal--forgot button.mfp-close, .modal--register button.mfp-close {
        background:var(--ideagen-color-neutral-05)!important;
    }
  dialog.mfp-wrap.modal--login .mfp-content > button.mfp-close .i-cross,
  dialog.mfp-wrap.modal--forgot .mfp-content > button.mfp-close .i-cross,
  dialog.mfp-wrap.modal--register .mfp-content > button.mfp-close .i-cross,
  dialog[open].modal--login .mfp-content > button.mfp-close .i-cross,
  dialog[open].modal--forgot .mfp-content > button.mfp-close .i-cross,
  dialog[open].modal--register .mfp-content > button.mfp-close .i-cross,
  dialog[data-modal-id].modal--login .mfp-content > button.mfp-close .i-cross,
  dialog[data-modal-id].modal--forgot .mfp-content > button.mfp-close .i-cross,
  dialog[data-modal-id].modal--register .mfp-content > button.mfp-close .i-cross,
  dialog[open].modal--login button.mfp-close .i-cross,
  dialog[open].modal--forgot button.mfp-close .i-cross,
  dialog[open].modal--register button.mfp-close .i-cross,
  .modal--login button.mfp-close .i-cross, .modal--forgot button.mfp-close .i-cross, .modal--register button.mfp-close .i-cross {
    background-color:var(--ideagen-color-neutral-90)!important;
  }
  .lum-login-right {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  dialog.mfp-wrap.modal--login .mfp-content > button.mfp-close,
  dialog.mfp-wrap.modal--forgot .mfp-content > button.mfp-close,
  dialog.mfp-wrap.modal--register .mfp-content > button.mfp-close,
  dialog[open].modal--login .mfp-content > button.mfp-close,
  dialog[open].modal--forgot .mfp-content > button.mfp-close,
  dialog[open].modal--register .mfp-content > button.mfp-close,
  dialog[data-modal-id].modal--login .mfp-content > button.mfp-close,
  dialog[data-modal-id].modal--forgot .mfp-content > button.mfp-close,
  dialog[data-modal-id].modal--register .mfp-content > button.mfp-close,
  dialog.mfp-wrap.modal--login button.mfp-close,
  dialog.mfp-wrap.modal--forgot button.mfp-close,
  dialog.mfp-wrap.modal--register button.mfp-close,
  dialog[open].modal--login button.mfp-close,
  dialog[open].modal--forgot button.mfp-close,
  dialog[open].modal--register button.mfp-close,
  .modal--login button.mfp-close,
  .modal--forgot button.mfp-close,
  .modal--register button.mfp-close {
    transition: none !important;
  }

  .lum-right-bg {
    transition: none !important;
    transform: none !important;
  }

  .lum-right-bg::before {
    animation: none !important;
    transition: none !important;
  }

  .lum-hero-slide,
  .lum-hero-slide.is-leaving {
    transition: opacity 0.3s linear !important;
    transform: none !important;
  }
}

/* ── Text links in the login / sign-up window ──
   "Forgot password?" and the Privacy Policy / Terms and Conditions links in
   the split consent rows (sign-up modal and SSO page). Styled like the Lumi
   sources links: no underline until hover or keyboard focus. */
.qa-login-modal a.js-open-modal[data-modal="forgot"],
.lum-split-terms-row label a {
    color: var(--ideagen-brand-teal-10, #039db7) !important;
    font-size: 14.5px;
    line-height: 20px;
    /* !important: the theme's .mfp-content .fancyselect … label div a sets 700 */
    font-weight: 600 !important;
    text-decoration: none !important;
    white-space: nowrap;
}

.qa-login-modal a.js-open-modal[data-modal="forgot"]:hover,
.qa-login-modal a.js-open-modal[data-modal="forgot"]:focus-visible,
.lum-split-terms-row label a:hover,
.lum-split-terms-row label a:focus-visible {
  text-decoration: underline !important;
}

/* External links (open in a new tab): the same up-right arrow as the Lumi
   sources links, sized to sit inline in the consent sentence. */
.lum-split-terms-row label a.lp-ext-link::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 3px;
  vertical-align: -1px;
  opacity: .7;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%231b838b'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M7%2017%2017%207'%2F%3E%3Cpath%20d%3D'M8%207h9v9'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%231b838b'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M7%2017%2017%207'%2F%3E%3Cpath%20d%3D'M8%207h9v9'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

/* Text for screen readers only (e.g. "opens in a new tab"). */
.lp-sr {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.qa-login-modal a.js-open-modal[data-modal="forgot"]:focus-visible,
.lum-split-terms-row label a:focus-visible {
  outline: 2px solid var(--ideagen-color-teal-80, #1b838b) !important;
  outline-offset: 2px;
}