.profile-registration .psc-password-repeat,
.ChangePassWordSnippet .psc-password-repeat {
    margin-top: var(--marginExtraSmall);
}

.psc-password-input input,
.psc-password-repeat input {
    width: 100% !important;
}

.psc-password-repeat span {
    display: block;
}

/* reset column-reverse from generic fieldinput (see form.css) to avoid strange order for password fields */
.profile-registration .field.invalid:not(.submit):has(.psc-password-input) .fieldinput,
.ChangePassWordSnippet .field.invalid:not(.submit):has(.psc-password-input) .fieldinput {
    flex-direction: column;

    & .formfielderror {
        order: 1; /* show error as last item within the field */
    }
}

.psc-ps-text {
    position: relative;
    display: inline-block;
    overflow: hidden;
    margin-block: -.3em 0;
    padding-inline: 1em 0;
    padding-block: .3em;
    width: 40%;
    text-indent: -100px;
    vertical-align: middle;
    white-space: nowrap;
    transition: text-indent .15s ease-in-out;
}

/**
 *    Password strength meter
 */

.psc-ps-text::before {
    position: absolute;
    display: block;
    right: 100%;
    bottom: 0;
    left: 1em;
    height: 3px;
    content: '';
    background-color: rgba(0, 0, 0, .05);
    transition: right .15s ease-in-out;
}

.psc-ps-text::after {
    position: absolute;
    right: 100%;
    bottom: 0;
    left: 1em;
    display: block;
    height: 3px;
    content: '';
    background-color: rgba(0, 0, 0, .05);
    transition: all .5s ease-in-out;
}

span[class*='psc-password-strength'] .psc-ps-text {
    text-indent: 0;
}

span[class*='psc-password-strength'] .psc-ps-text::before {
    right: 0;
}

.psc-password-strength-weak .psc-ps-text::after {
    right: 75%;
    background-color: #cc3b3b;
}

.psc-password-strength-fair .psc-ps-text::after {
    right: 50%;
    background-color: #f78d20;
}

.psc-password-strength-strong .psc-ps-text::after {
    right: 25%;
    background-color: #f5d20a;
}

.psc-password-strength-verystrong .psc-ps-text::after {
    right: 0;
    background-color: #3abf5c;
}

/**
 *    Passwords not the same
 */

.pbuic-pr-no-match {
    color: #e62424;
}

.psc-invalid .psc-password-repeat input {
    border-color: #ff9393 !important;
    background-color: #fff6f6;
}