@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');

:root {
    --tp-background: #F2F2F2;
    --tp-background-dark: #0A0A0A;
    --tp-card-bg: #FFFFFF;
    --tp-card-bg-dark: #171717;
    --tp-input-bg: #F5F5F5;
    --tp-text-default: #182D3D;
    --tp-text-default-dark: #FFFFFF;
    --tp-text-subdued: #606F80;
    --tp-text-subdued-2: #767676;
    --tp-text-subdued-dark: #A1A1A1;
    --tp-text-critical: #D41A2D;
    --tp-text-darkmode: #FFFFFF;
    --tp-border-color: #BFC6CE;
    --tp-border-color-dark: #737373;
    --tp-border-color-dark-focused: #D4D4D4;
    --tp-primary-color: #0F7258;
    --tp-primary-hover: #095744;
    --tp-primary-pressed: #053D30;
    --tp-icon-subdued: #9BAFC8;
    --tp-surface-warning-default: #FFFBF3;
    --tp-action-warning-default: #FFC314;
    --tp-typography-body-font-size: 1rem;
    --tp-border-radius: 0.25rem;

    --pf-v5-global--BackgroundColor--100: #FAFBFB;
    --pf-v5-global--BackgroundColor--150: #F0F3F6;
    --pf-v5-global--BackgroundColor--200: #F0F3F6;
    --pf-v5-global--BackgroundColor--300: #ECEFF4;
    --pf-v5-global--BackgroundColor--400: #DFE3EB;
    --pf-v5-global--BackgroundColor--light-100: #FAFBFB;
    --pf-v5-global--BackgroundColor--light-200: #F0F3F6;
    --pf-v5-global--BackgroundColor--light-300: #DFE3EB;
    --pf-v5-global--primary-color--100: var(--tp-primary-color);
    --pf-v5-global--primary-color--200: var(--tp-primary-hover);
    --pf-v5-global--primary-color--300: var(--tp-primary-hover);
    --pf-v5-global--Color--100: var(--tp-text-default);
    --pf-v5-global--Color--200: var(--tp-text-subdued);
    --pf-v5-global--danger-color--200: var(--tp-text-critical);
    --pf-v5-global--BackgroundColor--100: var(--tp-card-bg);
    --pf-v5-global--BackgroundColor--200: #F0F3F6;
    --pf-v5-global--BackgroundColor--300: var(--tp-card-bg);
    --pf-v5-global--BorderColor--100: var(--tp-border-color);
    --pf-v5-global--BorderColor--200: var(--tp-border-color);
    --pf-v5-global--BorderColor--300: var(--tp-border-color);

    --pf-v5-global--spacer--form-element: 0.75rem;
    --pf-v5-global--gutter--md: 1rem;
    --pf-v5-global--FontFamily--text: 'Lato', 'Arial', sans-serif;
    --pf-v5-global--FontFamily--heading: 'Lato', 'Arial', sans-serif;
    --pf-v5-global--FontSize--3xl: 1.5rem;
    --pf-v5-global--BorderRadius--sm: 4px;

    --keycloak-bg-logo-url: var(--tp-background);
    --keycloak-card-top-color: none;

    color: var(--tp-text-default);
}

.pf-v5-theme-dark {
    --pf-v5-global--BackgroundColor--400: #171717;
    --pf-v5-global--BackgroundColor--300: #171717;
    --pf-v5-global--Color--dark-100: var(--tp-text-darkmode);

    --keycloak-bg-logo-url: var(--tp-background-dark);

    color: var(--tp-text-default-dark);
}

#keycloak-bg {
    position: relative;
    height: auto;
}

/* ===========================================
   Brand header
   =========================================== */
.pf-v5-c-brand {
    --pf-v5-c-brand--Width: auto;
    --pf-v5-c-brand--Height: 2.4rem;
}

#kc-header-wrapper {
    background-image: url("../img/tp-logo.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.tp-logo-link {
    display: block;
    cursor: pointer;
    text-decoration: none;
}

.pf-v5-c-login__container {
    margin-bottom: 9rem;
    grid-template-columns: 29rem;
}

@media screen and (max-width: 576px) {
    .pf-v5-c-login__container {
        margin-bottom: 11rem;
    }
}

/* ===========================================
   Footer
   =========================================== */
.tp-v4-footer {
    margin-top: auto;
    padding: 40px 20px;
    text-align: center;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
}

.tp-v4-footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
}

.tp-v4-footer-left,
.tp-v4-footer-right {
    font-family: var(--tp-font-family);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.25rem;
    letter-spacing: 0px;
    color: #606F80;
}

.tp-v4-footer-left p,
.tp-v4-footer-right p {
    margin: 0;
}

.tp-v4-footer-left {
    text-align: left;
}

.tp-v4-footer-right {
    text-align: right;
}

@media screen and (max-width: 900px) {
    .tp-v4-footer-content {
        flex-direction: column;
        align-items: center;
    }

    .tp-v4-footer-left,
    .tp-v4-footer-right {
        text-align: center;
    }
}

/* Password requirements */
.tp-v4-password-requirements {
    color: var(--tp-text-subdued);
    font-size: 1rem;
}

/* ===========================================
   Login header Customizations
   =========================================== */
.pf-v5-c-login__main-header {
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

/* ===========================================
   Login Component Customizations
   =========================================== */
/* Login page background */
.pf-v5-c-login {
    --pf-v5-c-login__main--BackgroundColor: var(--tp-card-bg);
    --pf-v5-c-login__main--BoxShadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pf-v5-theme-dark .pf-v5-c-login {
    --pf-v5-c-login__main--BackgroundColor: var(--tp-card-bg-dark);
}

/* Login main card */
.pf-v5-c-login__main {
    border-radius: 8px;
}

/* Form styling */
.pf-v5-c-form {
    --pf-v5-c-form__label--Color: var(--tp-text-default);
    --pf-v5-c-form__helper-text--Color: var(--tp-text-subdued);
    --pf-v5-c-form__label-text--FontWeight: var(--pf-v5-global--FontWeight--normal);
    --pf-v5-c-form__label--LineHeight: 1.5rem;
    --pf-v5-c-form__label--FontSize: var(--pf-v5-global--FontSize--md);
}

.pf-v5-c-form__label {
    padding-bottom: 0.5rem;
}

/* Form control */
.pf-v5-c-form-control {
    --pf-v5-c-form-control--BackgroundColor: var(--tp-input-bg);
    --pf-v5-c-form-control--Color: var(--tp-text-default);
    --pf-v5-c-form-control--after--BorderBottomColor: none;
    --pf-v5-c-form-control--after--BorderStyle: none;
    --pf-v5-c-form-control--after--BorderBottomWidth: 0;
    --pf-v5-c-form-control--before--BorderTopWidth: 0;
    --pf-v5-c-form-control--before--BorderLeftWidth: 0;
    --pf-v5-c-form-control--before--BorderRightWidth: 0;

    border-radius: var(--tp-border-radius);
}

.pf-v5-theme-dark .pf-v5-c-form-control {
    --pf-v5-c-form-control--BackgroundColor: var(--tp-card-bg-dark);
    --pf-v5-c-form-control--Color: var(--tp-text-default-dark);
}

/* Form control focus state */
.pf-v5-c-form-control:hover {
    --pf-v5-c-form-control--after--BorderBottomColor: var(--tp-primary-color);
}

.pf-v5-c-form-control:focus-within {
    --pf-v5-c-form-control--after--BorderBottomColor: var(--tp-primary-color);
    --pf-v5-c-form-control--after--BorderBottomWidth: 2px;
}

/* Form control disabled state */
.pf-v5-c-form-control.pf-m-disabled {
    --pf-v5-c-form-control--BackgroundColor: #F0F3F6;
    --pf-v5-c-form-control--Color: var(--tp-text-subdued);
}

.pf-v5-c-form-control>:is(input, select, textarea) {
    outline-color: var(--tp-border-color);
    outline-offset: var(--pf-v5-c-form-control--OutlineOffset);
    border-radius: var(--tp-border-radius);
}
.pf-v5-c-form__group:has(.pf-m-error) .pf-v5-c-form-control>:is(input, select, textarea) {
    outline-color: var(--tp-text-critical);
    outline-style: solid;
}
.pf-v5-theme-dark .pf-v5-c-form-control>:is(input, select, textarea) {
    outline-color: var(--tp-border-color-dark);
    outline-style: solid;
}
.pf-v5-theme-dark .pf-v5-c-form-control>:is(input, select, textarea):focus {
    outline-color: var(--tp-border-color-dark-focused);
}

#kc-form-buttons {
    margin-top: 0.5rem;
}

#kc-form-buttons .pf-v5-c-button {
    cursor: pointer;
}

/* Fonts */

.pf-v5-c-helper-text {
    --pf-v5-c-helper-text--FontSize: var(--tp-typography-body-font-size);
}

/* Password view button */
.pf-v5-c-input-group {
    position: relative;
}

.pf-v5-c-input-group .pf-v5-c-input-group__item:not(:first-child) {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    border: none;
}

.pf-v5-c-button.pf-m-control:after {
    border: none;
}

.pf-v5-c-button {
    --pf-v5-c-button--m-control--BackgroundColor: none;
    --pf-v5-c-button--m-control--hover--BackgroundColor: none;
    --pf-v5-c-button--m-control--active--BackgroundColor: none;
    --pf-v5-c-button--m-control--focus--BackgroundColor: none;
}

/* Icons – closed eye when password hidden, open eye when password visible */
.fa-eye {
    width: 24px;
    height: 24px;
    background: url("../img/eye-hide.svg");
}

.fa-eye-slash {
    width: 24px;
    height: 24px;
    background: url("../img/eye.svg");
}

.fa-eye:before,
.fa-eye-slash:before {
    content: "";
}

/* Button styling */
.pf-v5-c-button.pf-m-primary {
    --pf-v5-c-button--BackgroundColor: var(--tp-primary-color);
    --pf-v5-c-button--hover--BackgroundColor: var(--tp-primary-hover);
    --pf-v5-c-button--active--BackgroundColor: var(--tp-primary-pressed);
    border-radius: var(--tp-border-radius);
}

.pf-v5-c-button.pf-m-secondary {
    --pf-v5-c-button--BackgroundColor: var(--tp-input-bg);
    --pf-v5-c-button--Color: var(--tp-text-default);
    border-color: var(--tp-border-color);
    border-radius: var(--tp-border-radius);
}

.pf-v5-c-form__label-required {
    display: none;
}

.pf-v5-c-form .pf-v5-c-form__label-text {
    color: var(--tp-text-subdued);
}
.pf-v5-theme-dark .pf-v5-c-form .pf-v5-c-form__label-text {
    color: var(--tp-text-subdued-dark);
}

/* Login component */
.pf-v5-c-login a,
a {
    --pf-v5-global--link--Color: var(--tp-primary-color);
    --pf-v5-global--link--Color--hover: var(--tp-primary-hover);
}

.pf-v5-c-login {
    --pf-v5-c-login__container--MaxWidth: 29rem;
    --pf-v5-c-login__container--xl--MaxWidth: 29rem;
    --pf-v5-c-login__container--PaddingLeft: 0;
    --pf-v5-c-login__container--PaddingRight: 0;
    --pf-v5-c-login__header--PaddingLeft: 2rem;
    --pf-v5-c-login__header--PaddingRight: 2rem;
    --pf-v5-c-login__header--xl--MarginTop: 0;
    --pf-v5-c-login__header--xl--MarginBottom: 2.5rem;
    --pf-v5-c-login__header--c-brand--xl--MarginBottom: 2.5rem;
    --pf-v5-c-login__main-header--PaddingLeft: 2rem;
    --pf-v5-c-login__main-header--PaddingRight: 2rem;
    --pf-v5-c-login__main-header--PaddingTop: 1rem;
    --pf-v5-c-login__main-body--PaddingRight: 2rem;
    --pf-v5-c-login__main-body--md--PaddingLeft: 2rem;

}

.pf-v5-c-login__main-body .subtitle {
    display: none;
}

.pf-v5-c-login {
    --pf-v5-c-login__main-footer-band--BorderTopColor: none;
    --pf-v5-c-login__main-footer-band--PaddingBottom: 0;
}

/* Checkbox styling */
.pf-v5-c-check input[type="checkbox"] {
    border-radius: var(--tp-border-radius);
    border-width: 2px;
}

.pf-v5-c-check__input {
    -webkit-appearance: none;
    appearance: none;
    display: inline-block;
    border: 2px solid var(--tp-icon-subdued);
    width: 1.5rem;
    height: 1.5rem;
    box-sizing: border-box;
}

.pf-v5-c-check__input:checked {
    background: var(--tp-primary-color);
    border-color: var(--tp-primary-color);
}

.pf-v5-c-check__input:checked::after {
    content: "";
    background: no-repeat center url('../img/check.svg');
    width: 100%;
    height: 100%;
    display: block;
}

/* Title */
.pf-v5-c-title {
    --pf-v5-c-title--m-3xl--FontWeight: 700;

    font-family: "Lato", sans-serif;
    font-weight: 700;
    font-size: 2.25rem;
    line-height: 2.68rem;
}

/* Alert */
.pf-v5-c-alert.pf-m-warning {
    --pf-v5-c-alert--m-inline--m-warning--BackgroundColor: var(--tp-surface-warning-default);
    --pf-v5-c-alert--m-warning--BorderTopColor: var(--tp-action-warning-default);
    --pf-v5-c-alert__title--Color: var(--tp-text-default);
    border: 1px solid var(--pf-v5-c-alert--m-warning--BorderTopColor);
    border-radius: var(--tp-border-radius);
}
.pf-v5-theme-dark .pf-v5-c-alert.pf-m-warning {
    --pf-v5-c-alert--m-inline--m-warning--BackgroundColor: var(--tp-card-bg-dark);
    --pf-v5-c-alert__title--Color: var(--tp-text-default-dark);
}

.pf-v5-c-alert__icon span {
    background: no-repeat center url('../img/alert-triangle.svg');
    width: 1.5rem;
    height: 1.5rem;
}


#kc-registration,
#kc-branch-account {
    display: block;
    text-align: center;
    font-weight: 700;
}

#kc-registration {
    padding-bottom: 1rem;
}

#kc-branch-account {
    border-top: 1px solid var(--tp-background);
    padding-top: 1rem;
}

#kc-registration a,
#kc-branch-account a {
    color: var(--tp-primary-color);
    text-decoration: none;
    font-size: var(--pf-v5-global--FontSize--md);
    text-decoration: underline;
}

#kc-registration a:hover,
#kc-branch-account a:hover {
    color: var(--tp-primary-hover);
    text-decoration: underline;
}

#kc-form-login .pf-v5-c-form__group:has(input#password) {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "label link"
      "control control"
      "error error";
    column-gap: 1rem;
    margin-bottom: calc(24px - var(--pf-v5-c-form--GridGap, 1rem));
  }

  #kc-form-login .pf-v5-c-form__group:has(input#password) > .pf-v5-c-form__label {
    grid-area: label;
  }

  #kc-form-login .pf-v5-c-form__group:has(input#password) > .pf-v5-c-input-group {
    grid-area: control;
  }

  #kc-form-login .pf-v5-c-form__group:has(input#password) > .pf-v5-c-form__helper-text {
    grid-area: link;
    margin: 0;
    justify-self: end;
    align-self: end;
    padding-bottom: 0.5rem;
  }

  #kc-form-login .pf-v5-c-form__group:has(input#password) > .pf-v5-c-form__helper-text a {
    white-space: nowrap;
  }

  #kc-form-login
  .pf-v5-c-form__group:has(input#password)
  > .pf-v5-c-form__helper-text a {
  color: var(--tp-text-subdued);
  text-decoration-line: underline;
  text-decoration-color: #F2F2F2;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

#kc-form-login .pf-v5-c-form__group:has(#rememberMe),
#kc-form-login .pf-v5-c-check {
  display: none;
}

#kc-form-login .pf-v5-c-form__helper-text.pf-m-error,
#kc-form-login .pf-v5-c-helper-text.pf-m-error {
  color: var(--tp-text-critical);
  font-size: 16px;
  margin-top: 4px;
}

#kc-form-login .pf-v5-c-form__group:has(.pf-m-error) .pf-v5-c-form-control input,
#kc-form-login .pf-v5-c-form__group:has(.pf-m-error) .pf-v5-c-input-group input {
  border: 2px solid var(--tp-text-critical);
  outline-color: var(--tp-text-critical);
}

/* ===========================================
   Cash Account Registration - Step Indicator
   =========================================== */
.tp-step-indicator {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    align-self: stretch;
}

.tp-step-progress-bar {
    display: flex;
    gap: 0.5rem;
    width: 100%;
}

.tp-step-segment {
    flex: 1;
    height: 6px;
    border-radius: 0;
    background-color: var(--tp-border-color);
}

.tp-step-segment:first-child {
    border-radius: 3px 0 0 3px;
}

.tp-step-segment:last-child {
    border-radius: 0 3px 3px 0;
}

.tp-step-segment--filled {
    background-color: var(--tp-primary-color);
}

.tp-step-text {
    font-family: 'Lato', 'Arial', sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--tp-text-subdued);
    line-height: 1.25rem;
    text-align: left;
}

/* Registration form */
#kc-register-form {
    grid-template-columns: 1fr 1fr;
}
#kc-register-form .pf-v5-c-form__group {
    grid-column: 1 / 3;
}
#kc-register-form .pf-v5-c-form__group:has(input#firstName) {
    grid-row: 1;
    grid-column: 1;
}
#kc-register-form .pf-v5-c-form__group:has(input#lastName) {
    grid-row: 1;
    grid-column: 2;
}
#kc-register-form #kc-form-buttons {
    grid-column: 1 / 3;
}

/* Password form login restart hint */
.pf-v5-c-form:has(input#kc-attempted-username) .pf-v5-c-form__group-label {
    display: none;
}
.pf-v5-c-form:has(input#kc-attempted-username) .pf-v5-c-input-group {
    display: flex;
    justify-content: center;
    border-bottom: 1px solid var(--tp-background);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}
.pf-v5-c-form:has(input#kc-attempted-username) .pf-v5-c-input-group .pf-v5-c-input-group__item {
    flex-grow: 0;
}
.pf-v5-c-form:has(input#kc-attempted-username) .pf-v5-c-input-group__item {
    position: relative;
}
.pf-v5-c-form:has(input#kc-attempted-username) .pf-v5-c-form-control{
    background: none;
}

.pf-v5-c-form #kc-attempted-username {
    background-color: var(--pf-v5-c-login__main--BackgroundColor);
    field-sizing: content;
    padding: 0;
}

.pf-v5-c-form #reset-login {
    background-color: var(--pf-v5-c-login__main--BackgroundColor);
    field-sizing: content;
    padding: 0;
}

.pf-v5-c-form #reset-login .kc-tooltip-text:after {
    display: none;
}

.pf-v5-c-form #reset-login i {
    display: none;
}

.pf-v5-c-form #reset-login .kc-tooltip-text {
    visibility: visible;
    position: relative;
    opacity: 1;
    top: 0;
    left: 0;
    border: none;
    background: none;
    color: var(--tp-primary-color);
    box-shadow: none;
}

/* ===========================================
   Registration - Header alignment
   =========================================== */
.tp-register-page .pf-v5-c-login__main-header {
    text-align: left;
    align-items: stretch;
    padding-top: 1.5rem;
}

/* ===========================================
   Cash Account Registration - Section Heading
   =========================================== */
.tp-cash-registration .pf-v5-c-form__group:has(#password) .tp-v4-password-requirements {
    margin-bottom: 1rem;
}

.tp-cash-registration .pf-v5-c-form__group:has(#password)::before {
    content: 'Create a password';
    display: block;
    font-family: 'Lato', 'Arial', sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--tp-text-default);
    margin: 0.5rem 0 0.5rem 0;
    padding: 0;
    line-height: 1.5rem;
}

/* Dark mode for step indicator and section heading */
.pf-v5-theme-dark .tp-step-segment {
    background-color: var(--tp-border-color-dark);
}

.pf-v5-theme-dark .tp-step-segment--filled {
    background-color: var(--tp-primary-color);
}

.pf-v5-theme-dark .tp-step-text {
    color: var(--tp-text-subdued-dark);
}

.pf-v5-theme-dark .tp-cash-registration .pf-v5-c-form__group:has(#password)::before {
    color: var(--tp-text-default-dark);
}

/* ===========================================
   Email Verification Page
   Base: hide alert flash on formless pages.
   JS adds .tp-verify-email-page for full styling.
   =========================================== */

/* --- Base styles: hide alert flash on formless pages --- */
.pf-v5-c-login__main:not(:has(form)) .pf-v5-c-login__main-body > .pf-v5-c-alert {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0 0 0.75rem;
}

.pf-v5-c-login__main:not(:has(form)):not(.tp-verify-email-page) .pf-v5-c-login__main-header {
    padding-bottom: 0;
}

.pf-v5-c-login__main:not(:has(form)) .pf-v5-c-login__main-body > .pf-v5-c-alert .pf-v5-c-alert__icon {
    display: none;
}

.pf-v5-c-login__main:not(:has(form)) .pf-v5-c-login__main-body > .pf-v5-c-alert .pf-v5-c-alert__title {
    font-weight: 400;
    font-size: 1rem;
}

.pf-v5-c-login__main:not(:has(form)):not(.tp-verify-email-page) {
    min-height: 360px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding-top: 3.5rem;
    padding-bottom: 0;
}

.pf-v5-c-login__main:not(:has(form)):not(.tp-verify-email-page) .pf-v5-c-login__main-body > .instruction {
    margin-bottom: 2rem;
}

/* --- JS-enhanced styles (after .tp-verify-email-page class is added) --- */
.tp-verify-email-page.pf-v5-c-login__main {
    min-height: 360px;
    padding-bottom: 16px;
    text-align: center;
}

.tp-verify-email-page .pf-v5-c-login__main-header {
    text-align: center;
    padding-bottom: 0;
    padding-top: 32px;
}

.tp-verify-email-page .pf-v5-c-alert {
    margin: 0;
}

.tp-verify-email-page .pf-v5-c-alert .pf-v5-c-alert__title {
    color: var(--tp-text-default);
}

.tp-verify-email__icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 1rem;
    background: url('../img/success-circle.svg') no-repeat center;
    background-size: contain;
}


.tp-verify-email__sent-to {
    font-size: 1rem;
    line-height: 1.25rem;
    color: var(--tp-text-default);
    margin: 1rem 0 0;
}

.tp-verify-email-page .pf-v5-c-login__main-body .instruction {
    font-weight: 700;
    margin: 0;
    word-break: break-all;
}

.tp-verify-email-page #kc-info-wrapper .instruction {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.25rem;
    color: var(--tp-text-subdued);
    margin: 1rem 0 0;
    text-align: center;
}

.tp-verify-email-page #kc-info-wrapper .instruction br {
    display: none;
}

.tp-verify-email-page #kc-info-wrapper .instruction a {
    display: block;
    margin-top: 0.25rem;
}

.tp-verify-email-page #kc-info-wrapper .instruction a.pf-v5-c-button {
    padding-top: 0;
}

/* --- Dark mode --- */
.pf-v5-theme-dark .tp-verify-email-page .pf-v5-c-login__main-body .instruction,
.pf-v5-theme-dark .tp-verify-email__sent-to,
.pf-v5-theme-dark .tp-verify-email-page .pf-v5-c-alert .pf-v5-c-alert__title {
    color: var(--tp-text-default-dark);
}

.pf-v5-theme-dark .tp-verify-email-page #kc-info-wrapper .instruction {
    color: var(--tp-text-subdued-dark);
}

/* Preloader for Split login form */
.tp-preloader-overlay {
    background: var(--tp-background);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tp-preloader-wrapper {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes preloader {
    0% {
        transform: translateX(10px);
    }

    50% {
        transform: translateX(-7px);
    }

    100% {
        transform: translateX(10px);
    }
}

.tp-preloader-line {
    position: relative;
    width: 26px;
    height: 4px;
    border-radius: 4px;
    background-color: var(--tp-primary-color);
    animation: 1s ease-in-out 0s infinite normal none running preloader;

    &:before,
    &:after {
        position: absolute;
        display: block;
        content: '';
        height: 4px;
        border-radius: 4px;
        animation: 1s ease-in-out 0s infinite normal none running preloader;
    }

    &:before {
        width: 19px;
        top: -10px;
        left: 7px;
        background-color: var(--tp-primary-pressed);
    }

    &:after {
        width: 16px;
        bottom: -10px;
        background-color: var(--tp-primary-hover);
    }
}

/* Registration CTA block */
.tp-register-cta-wrapper {
    border-radius: 0.5rem;
    background-color: var(--pf-v5-c-login__main--BackgroundColor);
    box-shadow: var(--pf-v5-c-login__main--BoxShadow);
    padding-top: 1rem;
    text-align: center;
}

.tp-register-cta-wrapper .pf-v5-c-login__main-header {
    margin: auto;
    max-width: 24rem;
}

.tp-register-cta-wrapper .tp-sign-in-cta {
    color: var(--tp-primary-color);
    cursor: pointer;
}

.tp-register-cta-wrapper #tp-create-account-btn {
    margin-top: 1.4rem;
    margin-bottom: 2.25rem;
}

.tp-register-cta-wrapper .tp-sign-in-cta-wrapper {
    border-top: 1px solid var(--tp-background);
    padding-top: 1rem;
}

.tp-account-conflict-cta {
    margin: 1rem 0;
}

.tp-contacts {
    margin: 1rem 0;
}
.tp-contact {
    margin: 0.5rem 0;
}

/* Password validation */
#input-error-container-password .tp-password-policy-rule,
#input-error-container-password-new .tp-password-policy-rule {
    color: var(--tp-text-subdued-2);
    display: flex;
    line-height: 1.25rem;
    align-items: center;
    margin: 0.25rem 0;
}
#input-error-container-password .tp-password-policy-rule.tp-password-policy-valid,
#input-error-container-password-new .tp-password-policy-rule.tp-password-policy-valid {
    color: var(--tp-primary-color);
}
#input-error-container-password .tp-password-policy-rule li,
#input-error-container-password-new .tp-password-policy-rule li {
    margin-left: 0.5rem;
}