body {
    --background-color: white;
    --outline-moderate: #e1e3e3;
    --outline-strong: #676c71;
    --border-radius: 5px;
    --primary: #036856;

    --base-red-500: #df4d4d;
    --base-red-600: #cb4646;
    --base-red-800: #7b2a2a;

    font-family:
        'Inter',
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        Roboto,
        'Helvetica Neue',
        Arial,
        sans-serif;
    margin: 0px;
}
*:focus,
*:focus-visible {
    outline-color: var(--primary);
    outline-offset: 3px;
}
#heading-text {
    margin-block-start: 20px;
    text-align: center;
}
a {
    color: inherit;
    line-break: none;
}
.logo {
    height: 60px;
}
h1,
h2,
p,
h3 {
    text-align: center;
    text-wrap: balance;
    text-wrap: pretty;
}
.no-wrap {
    white-space: nowrap;
}
#signup-form {
    margin: auto;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-inline: 10px;
    padding-block: 20px;
}
.row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.asterisk {
    color: var(--base-red-500);
}
button {
    font-size: medium;
    min-height: 40px;
    background-color: var(--background-color);
    border: 1px solid var(--outline-strong);
    border-radius: var(--border-radius);
    padding-inline: 20px;
}
button:hover {
    cursor: pointer;
}

button.primary {
    background-color: var(--primary);
    color: var(--background-color);
    border-color: var(--primary);
}

.input-group {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 5px;
}
input {
    height: 35px;
    border: 1px solid var(--outline-moderate);
    border-radius: var(--border-radius);
    padding-inline: 10px;
    font-size: medium;
}
input:user-invalid,
input.invalid,
input.invalid:focus {
    border-color: var(--base-red-600);
    outline-color: var(--base-red-600);
}

.input-error-hint {
    color: var(--base-red-800);
    font-size: small;
    visibility: hidden;
}

#form-error {
    color: var(--base-red-800);
}

input:user-invalid + .input-error-hint,
input.invalid + .input-error-hint {
    visibility: visible;
}

#heading-text.no-display,
#signup-form.no-display {
    display: none;
}
#signup-form.is-submitting {
    background-color: #03685644;
    border-radius: 10px;
    pointer-events: none;
}
#signup-form.is-submitting::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: shimmer 5.5s infinite;
    pointer-events: none;
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

#universal-login .auth0-lock.auth0-lock .auth0-lock-widget {
    width: 100%;
    max-width: 500px;
}

#universal-login p,
#universal-login .auth0-lock.auth0-lock .auth0-lock-terms,
#universal-login .auth0-lock.auth0-lock .auth0-lock-form p {
    color: initial;
}
#captcha {
    visibility: hidden;
    height: 0px;
    width: 0px;
}