.flex-layout.forgot-password-layout{
    background: var(--color-background-primary-gradient, var(--color-background-primary));
}

.flex-layout.forgot-password-layout .image-wrapper{
    display: flex;
    justify-content: center;
}
.flex-layout.forgot-password-layout .image-wrapper:not(:last-child){
    margin-bottom: max(3.75rem, calc(3.75 * var(--su)));
}
.flex-layout.forgot-password-layout .image-wrapper img{
    max-width: 100%;
    width: max(13.75rem, 13.75 * var(--su));
    height: auto;
}


.flex-layout.forgot-password-layout .pk-heading,
.flex-layout.forgot-password-layout .pk-heading + .text{
    text-align: center;
}
.flex-layout.forgot-password-layout .pk-heading:not(:last-child),
.flex-layout.forgot-password-layout .pk-heading + .text{
    margin-bottom: max(1.875rem, calc(1.875 * var(--su)));
}
.flex-layout.forgot-password-layout .pk-heading:has(+ .text){
    margin-bottom: max(1.25rem, calc(1.25 * var(--su)));
}


.flex-layout.forgot-password-layout .recovery-back{
    display: flex;
    justify-content: center;
    margin-top: max(4rem, calc(4 * var(--su)));
}

.flex-layout.forgot-password-layout .recovery-back .pk-button{
    font-size: var(--pk-text-font-size);
    color: var(--color-form-label);
    font-weight: 600;
}

.forgot-password-layout .recovery-intro,
.forgot-password-layout .recovery-message,
.forgot-password-layout h1 {
    text-align: center;
    margin-bottom: max(1.875rem, calc(1.875 * var(--su)));
}

.forgot-password-layout .recovery-message {
    padding: max(1rem, var(--su));
    border: 1px solid currentColor;
    border-radius: var(--card-border-radius);
}

.forgot-password-layout .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.flex-layout.forgot-password-layout .pk-heading{
    color: var(--color-heading-primary);
}
.flex-layout.forgot-password-layout .text{
    color: var(--color-text-primary);
}


@media screen and (min-width: 768px){
    .flex-layout.forgot-password-layout{
        display: flex;
    }
    .flex-layout.forgot-password-layout > .pk-row{
        margin-top: auto;
        margin-bottom: auto;
    }
}

@media screen and (max-width: 767px) {
    .flex-layout.forgot-password-layout {
        --scaling-h1: max(1.625rem, calc(1.625 * var(--su)));
        --pk-form-input-font-size: var(--pk-text-font-size);
        --pk-form-input-line-height: 1.14;
        --pk-button-padding-block: max(1rem, var(--su));
        padding-inline: max(1.875rem, calc(1.875 * var(--su)));
    }

    body .flex-repeater > .flex-content:first-child > .forgot-password-layout:first-child > .pk-row {
        padding-top: max(3.75rem, calc(3.75 * var(--su)));
    }

    .forgot-password-layout .recovery-intro {
        --pk-text-font-size: max(.8125rem, calc(.8125 * var(--su)));
        --pk-text-line-height: 1.33;
        margin-bottom: max(1.5rem, calc(1.5 * var(--su)));
    }

    .flex-layout.forgot-password-layout .recovery-back {
        --pk-text-font-size: max(.8125rem, calc(.8125 * var(--su)));
        margin-top: max(7.5rem, calc(7.5 * var(--su)));
    }
}