.gradientImage_g0N1P {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    background: var(--sp-color-bg-base);
    z-index: -1;
}

.wrapper_rU1eX {
    width: var(--signin-flows-content-width);
}

@media (max-width: 425px) {
    .wrapper_rU1eX {
        width: 90vw;
    }
}

.screenLeftButton_78aBB {
    position: absolute;
    top: var(--sp-spacing-600);
    left: var(--sp-spacing-600);
}

.children_c-fln {
    margin-top: var(--sp-spacing-600);
}

.subtitle_3rYzg {
    text-align: center;
    color: var(--sp-color-text-sign-in-subtitle);
}

.screenClose_fCUXs {
    position: absolute;
    top: var(--sp-spacing-600);
    right: var(--sp-spacing-600);
}

@media (max-width: 700px) {
    .screenLeftButton_78aBB {
        top: var(--sp-spacing-200);
        left: var(--sp-spacing-200);
    }

    .screenClose_fCUXs {
        top: var(--sp-spacing-200);
        right: var(--sp-spacing-200);
    }
}

/* Below is required to make the login/signup/join-org windows work when the user's system is on dark mode. Currently, in the app, users can toggle dark mode which is stored on the `user` profile.
A wrapper wraps around the app where a className `theme-color-dark` is attached if the user prefers dark mode. If this class is present in the DOM, all spine-tokens.css in /packages/spine-tokens respect the dark-mode equivalent. 
However, this wrapper requires the `user` profile, so on any screens before signing in, this dark-mode class is never attached to the DOM and thus Spine will always use light-mode tokens before sign-in.

To still allow for login/signup screens that respect the system prefers-color-scheme setting (e.g. macOS's native dark mode), we need to override the light-mode tokens with the dark-mode equivalent when
the prefers-color-scheme is dark. We do this only in the ScreenModal.module.css, as it's only used within these signup/login/org-join windows. */

@media (prefers-color-scheme: dark) {
    [data-screen-modal] {
        --sp-color-button-primary-bg-default: #346ddb;
        --sp-color-button-primary-bg-hover: #2662d7;
        --sp-color-button-primary-bg-focus: #0049d7;
        --sp-color-button-secondary-bg-default: #22272e;
        --sp-color-button-secondary-bg-hover: #2b2e39;
        --sp-color-button-secondary-bg-focus: #2d323a;
        --sp-color-button-secondary-border: #374151;
        --sp-color-button-secondary-text: #ffffff;
        --sp-color-button-inline-text-default: #ffffff;
        --sp-color-button-inline-text-hover: #f7f7f7;
        --sp-color-button-inline-text-focus: #eaebee;
        --sp-color-button-disabled-background: #22272e;
        --sp-color-button-disabled-border: #374151;
        --sp-color-text-muted: #dedfe3;
        --sp-color-text-base: #ffffff;
        --sp-color-bg-base: #14171c;
    }
}