/* General Classes */
.hide-container {
    display: none;
}


/* Reusable Container Classes */
.login-form-container {
    padding: 64px;
    max-width: 560px;
    border-radius: 24px;
    background-color: var(--tough-color-prim-900);
}
.login-form-container form{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 40px;
}
.login-input-fields-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}
.login-inner-input-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

/* Reusable Element Classes */
.login-error-message-text {
    width: 100%;
    text-align: center;
    color: var(--tough-color-err-500);
}

.login-form-headline {
    color: var(--tough-color-prim-025);
    text-align: center;
}

.prove-humanity span {
    color: var(--tough-color-prim-025);
}
.prove-humanity pre {
    color: var(--tough-color-prim-025);
}
.prove-humanity .content {
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
    gap: 16px;
}
.tough-wrapper .prove-humanity .prove-humanity-input {
    min-width: 150px;
    padding: 11px 24px;
    border-radius: 99px;
}

.login-checkbox-input input {
    border-radius: 6px;
    border: 1px solid var(--tough-color-prim-700);
    background-color: var(--tough-color-prim-800);
}
.login-checkbox-input span {
    color: var(--tough-color-prim-025);
}

.tough-wrapper .login-submit-button {
    width: 100%;
    cursor: pointer;
    color: var(--tough-color-prim-900);
    background-color: var(--tough-color-acc-400);
}

.link-to-form-switch-question {
    width: 100%;
    text-align: center;
    color: var(--tough-color-prim-300);
}
.link-to-form-switch-button {
    cursor: pointer;
    color: var(--tough-color-acc-400);
}

/* Login Form Specific Classes */
.reset-pw-link-button {
    width: 100%;
    text-align: right;
    cursor: pointer;
    color: var(--tough-color-prim-300);
}

/* Sign Up Form Specific Classes */
.e-mail-sign-up {
    width: 100%;
}

.user-name-container {
    display: flex;
    flex-direction: row;
    gap: 24px;
}

.username-sign-up {
    width: 50%;
}

/* PW Reset Form Specific Classes */
.reset-mail-sent-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 40px;
}

.login-back-button-container {
    display: flex;
    flex-direction: row;
    justify-content: left;
    gap: 16px;
    align-items: center;
    width: 100%;
}

.login-back-button {
    width: 40px;
    height: 40px;
    padding: 8px 16px;
    align-items: center;
    border-radius: 40px;
    background-color: var(--tough-color-prim-800);
    cursor: pointer;
}

.login-back-text {
    color: var(--tough-color-prim-025);
}

.tough-wrapper.add-specificity .pw-reset-sent-return-button {
    width: 100%;
    cursor: pointer;
    color: var(--tough-color-prim-900);
    background-color: var(--tough-color-prim-025);
}