.signin-signup-video-container {
    margin: auto;
    overflow: hidden;
    max-width: 100%
}

.signin-signup-video {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover
}

.signin-signup-content-container {
    max-width: 50rem
}

.sign-in-sign-up-with {
    display: block
}

.sign-in-sign-up-with>h2 {
    font-weight: bold
}

.provider-name-mobile {
    display: none
}

.provider-name-desktop {
    display: inline
}

.required-asterisk {
    color: var(--rc-color-accent-urgent)
}

.link-underline {
    text-decoration: underline
}

.link-gray {
    color: var(--rc-color-text-textlink)
}

.link-black {
    color: var(--rc-color-text-primary)
}

form:invalid .button--primary {
    opacity: 50%;
    cursor: not-allowed
}

@media only screen and (max-width: 900px) and (min-width: 641px) {
    .provider-name-desktop {
        font-size: 0.78em
    }
}

@media only screen and (max-width: 640px) {
    .sign-in-sign-up-with {
        display: none !important
    }

    .provider-name-mobile {
        display: inline
    }

    .provider-name-desktop {
        display: none
    }

    .mobile-signin-signup-bg {
        background: var(--mobile-bg-url) center center no-repeat;
        background-size: cover;
        min-height: 100vh
    }

    .signin-signup-content-container {
        background-color: var(--rc-color-background-elevated);
        padding: 45px;
        border-radius: 15px;
        width: 100%;
        max-width: 32em;
        color: var(--rc-color-text-primary)
    }

    .mobile-error-spacing {
        margin-bottom: 2rem
    }

    .signin-separator__text {
        background-color: var(--rc-color-background-elevated)
    }
}