#loginform .nd-pro-native-step-viewport {
    width: 100%;
    overflow: hidden;
    transition: height .35s ease;
}

#loginform .nd-pro-native-step-track {
    display: flex;
    align-items: flex-start;
    width: 100%;
    transform: translateX(0);
    transition: transform .45s cubic-bezier(.2,.75,.25,1);
    will-change: transform;
}

#loginform.nd-pro-native-credentials .nd-pro-native-step-track {
    transform: translateX(-100%);
}

#loginform .nd-pro-native-step {
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

#loginform .nd-pro-native-continue-row {
    margin: 14px 0 0 !important;
}

#loginform .nd-pro-native-continue {
    width: 100%;
    min-height: 40px;
}

#loginform .nd-pro-native-change-account {
    display: inline-block;
    margin: 0 0 14px;
    padding: 0;
    text-decoration: none;
}

#loginform .nd-pro-native-account-row {
    margin: 0 0 16px;
}

#loginform .nd-pro-native-account-label {
    display: block;
    margin-bottom: 5px;
}

#loginform .nd-pro-native-account-display {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 40px;
    padding: 0 8px;
    border: 1px solid #8c8f94;
    border-radius: 4px;
    box-sizing: border-box;
    background: #f0f0f1;
    color: #50575e;
    line-height: 1.4;
    overflow-wrap: anywhere;
    cursor: default;
}

#loginform .nd-pro-native-extra {
    margin-top: 14px;
}

#loginform .nd-pro-native-security {
    margin: 0 0 14px;
}

#loginform .nd-pro-native-security label {
    display: block;
    margin-bottom: 6px;
}

#loginform .nd-pro-native-security input.input {
    width: 100%;
}

#loginform .nd-pro-native-identity-feedback,
#loginform .nd-pro-native-security-message,
#loginform .nd-pro-native-feedback {
    margin-top: 7px;
    font-size: 12px;
    min-height: 16px;
}

#loginform .nd-pro-native-identity-step > p:first-child {
    margin: 0 !important;
}

#loginform .nd-pro-native-identity-step > p:first-child label {
    display: block;
    margin: 0 !important;
}

#loginform .nd-pro-native-identity-step > p:first-child input.input {
    display: block;
    margin: 8px 0 0 !important;
}

#loginform .nd-pro-native-identity-feedback:empty {
    min-height: 0;
    margin-top: 0;
}

#loginform .nd-pro-native-identity-feedback:not(:empty) {
    margin-top: 7px;
}

#loginform .nd-pro-native-identity-feedback.is-error,
#loginform .nd-pro-native-security-message.is-error,
#loginform .nd-pro-native-feedback.is-error {
    color: #b32d2e;
}

#loginform .nd-pro-native-security-message.is-success,
#loginform .nd-pro-native-whitelisted {
    color: #008a20;
}

#loginform .nd-pro-native-remember-device,
#loginform .nd-pro-native-whitelisted {
    margin: 12px 0;
}

#loginform .nd-pro-native-register {
    margin: 12px 0 0 !important;
    text-align: center;
}

#loginform .nd-pro-native-feedback:not(:empty) {
    padding: 9px 11px;
    border-left: 3px solid currentColor;
    background: rgba(0,0,0,.035);
}

/* Native wp-login 3D signup face */
.nd-pro-native-auth-shell {
    position: relative;
    width: 100%;
    perspective: 1400px;
}

.nd-pro-native-auth-card {
    position: relative;
    width: 100%;
    transform-style: preserve-3d;
    transition: transform .55s cubic-bezier(.2,.75,.25,1);
}

.nd-pro-native-auth-card.is-signup {
    transform: rotateY(180deg);
}

.nd-pro-native-auth-face {
    width: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    box-sizing: border-box;
}

.nd-pro-native-login-face {
    position: relative;
}

.nd-pro-native-signup-face {
    position: absolute;
    inset: 0 auto auto 0;
    transform: rotateY(180deg);
}

.nd-pro-native-auth-card.is-signup > .nd-pro-native-login-face {
    position: absolute;
    inset: 0 auto auto 0;
}

.nd-pro-native-auth-card.is-signup > .nd-pro-native-signup-face {
    position: relative;
}

.nd-pro-native-signup-face .nd-pro-signup-form-container {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.nd-pro-native-signup-topbar {
    margin-bottom: 12px;
}

.nd-pro-native-config-error {
    padding: 12px;
    border-left: 4px solid #d63638;
    background: #fcf0f1;
    color: #8a2424;
}

/* Keep WordPress's Lost Password/nav area clear of the viewport edge when
 * the login form is wrapped in the native 3D signup card. The signup face may
 * also expand to its configured form width while the login face stays native. */
body.nd-pro-native-has-signup-flip #login {
    padding-bottom: 34px;
    transition: width .35s ease;
}

body.nd-pro-native-has-signup-flip #login.nd-pro-native-show-signup {
    width: min(var(--nd-pro-native-signup-width, 650px), calc(100vw - 32px));
    max-width: 1200px;
}

body.nd-pro-native-has-signup-flip #nav {
    margin-bottom: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
    #loginform .nd-pro-native-step-track,
    #loginform .nd-pro-native-step-viewport,
    .nd-pro-native-auth-card,
    body.nd-pro-native-has-signup-flip #login {
        transition: none;
    }
}