/*Registration*/
.registration {
    display: flex;
    flex-direction: column;
    width: 25%;
    margin: 0 auto;
    padding: 100px 0;
}

.registration form {
    display: flex;
    flex-direction: column;
    margin-top: 80px;
    gap: 16px;
}

.registration input {
    padding: 8px 12px;
    border: 1px solid var(--border-primary);
    border-radius: 4px;
}

@media only screen and (max-width: 64rem) 
{
    .registration {
        padding: 40px 0;
    }

    .registration form {
        margin-top: auto;
    }
}

@media only screen and (max-width: 48rem)
{
    .registration {
        width: 50%;
    }
}
/*Registration End*/

/*Check Email verification*/
.check-email {
    display: flex;
    flex-direction: column;
    width: 50%;
    margin: 0 auto;
    padding: 100px 0;
}

.reset-email {
    display:flex;
    flex-direction: column;
    gap: 16px;
}

.reset-email h2 {
    text-align: center;
}

@media only screen and (max-width: 64rem)
{
    .reset-email {
        padding: 40px 0;
    }
}

@media only screen and (max-width: 27rem) {
    .reset-email h2 {
        text-align: left;
    }
}
/*Check Email verification End*/

/*Complete Registration*/
.complete-registration {
    display: flex;
    flex-direction: column;
    width: 50%;
    margin: 0 auto;
    padding: 100px 0;
}

.complete-registration form {
    display: flex;
    flex-direction: column;
    margin-top: 80px;
    gap: 16px;
}

.complete-registration .col-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.complete-registration label {
    display: block;
    margin-bottom: 5px;
}

.complete-registration input, .complete-registration select {
    box-sizing: border-box;
    width: 100%;
    padding: 8px 12px;
    margin-bottom: 20px;
    border: 1px solid var(--border-primary);
    border-radius: 4px;
}

.complete-registration #confirmPassword {
    margin-bottom: 0;
}

.complete-registration option {
    padding: 8px 12px;
    border-radius: 4px;
}

.complete-registration .requirements {
    margin-bottom: 20px;
}

.complete-registration ul {
    margin: 4px;
    padding-inline-start: 10px;
}

.complete-registration .validation-error {
    color: #B3221A;
    margin-top: 10px;
}

.complete-registration .valid-input {
    border: 2px solid green !important;
}

.complete-registration .invalid-input {
    border: 2px solid red !important;
}

.complete-registration .hidden {
    display: none;
}

@media only screen and (max-width: 48rem)
{
    .complete-registration .col-container {
        grid-template-columns: 1fr;
    }

    .complete-registration input, .complete-registration select {
        margin-bottom: 0;
    }
}

/*Complete Registration End*/

/*Login*/
.login {
    display: flex;
    flex-direction: column;
    width: 25%;
    margin: 0 auto;
    padding: 100px 0;
}

.login form {
    display: flex;
    flex-direction: column;
    margin-top: 80px;
    gap: 16px;
}

.login input {
    padding: 8px 12px;
    border: 1px solid var(--border-primary);
    border-radius: 4px;
}

.login button {
    width: auto;
}

.login a {
    color: var(--button-primary-color);
}

@media only screen and (max-width: 64rem)
{
    .login {
        padding: 40px 0;
    }

    .login form {
        margin-top: auto;
    }

}

@media only screen and (max-width: 48rem) 
{
    .login {
        width: 50%;
    }
}
/*Login End*/

/*Reset Password*/
.forgot-password {
    display: flex;
    flex-direction: column;
    width: 50%;
    margin: 0 auto;
    padding: 100px 0;
}

.forgot-password h2 {
    text-align: center;
}

.forgot-password form {
    display: flex;
    flex-direction: column;
    margin-top: 40px;
    gap: 16px;
}

.forgot-password input {
    padding: 8px 12px;
    border: 1px solid var(--border-primary);
    border-radius: 4px;
}

@media only screen and (max-width: 64rem) 
{
    .forgot-password {
        padding: 40px 0;
    }
}

@media only screen and (max-width: 27rem) {
    .forgot-password h2 {
        text-align: left;
    }
}

.reset-password {
    display: flex;
    flex-direction: column;
    width: 50%;
    margin: 0 auto;
    padding: 100px 0;
}

.reset-password h2 {
    text-align: center;
}

.reset-password form {
    display: flex;
    flex-direction: column;
    margin-top: 40px;
    gap: 16px;
}

.reset-password input {
    padding: 8px 12px;
    border: 1px solid var(--border-primary);
    border-radius: 4px;
}

.reset-password ul {
    margin: 4px;
    padding-inline-start: 10px;
}

@media only screen and (max-width: 27rem) {
    .reset-password {
        padding: 40px 0;
    }
}

.reset-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    margin: 0 auto;
    padding: 100px 0;
}

.reset-success-wrapper {
    margin-top: 40px;
}

.reset-success a {
    color: var(--button-primary-color);
}

@media only screen and (max-width: 64rem) {
    .reset-success {
        padding: 40px 0;
    }

    .reset-success-wrapper {
        margin-top: auto;
    }
}

/*Reset Password End*/

/*Account Validation*/
.account-validation {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    margin: 0 auto;
    padding: 100px 0;
    gap: 16px;
}

@media only screen and (max-width: 48rem) {
    .account-validation {
        align-items: flex-start;
    }
}

/*Account Validation End */

.error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 75%;
    margin: 0 auto;
    padding: 100px 0;
    gap: 8px;
}

@media only screen and (max-width: 64rem) {
    .error-page {
        padding: 40px 0;
    }
}