/* LOGIN STYLE SHEET*/
:root,
    /* dark theme number 1 */
    :root.dark1 {
        --background-color: #24184b;
        --text-color: #dda7ff;
        --reverse-text-color: #24184b;
        --accent-1: #563d76;
        --accent-2: #fbd160;
        --accent-3: #1b85a6;
        --filter-color: #dda7ff7e;
        --box-shadow: 0px 0px 15px #dda7ff7e;
        --warning: #b80303;
    }
    /*dark theme number 2 */
    :root.dark2 {
        --background-color: #2f1f45;
        --text-color: #f9e7e7;
        --reverse-text-color: #2f1f45;
        --accent-1: #00416c;
        --accent-2: #b96ac9;
        --accent-3: #f9dbbd;
        --filter-color: #f9e7e77e;
        --box-shadow: 0px 0px 15px #f9e7e77e;
        --warning: #b80303;
    }
    /*dark theme number 3*/
    :root.dark3 {
        --background-color: #312257;
        --text-color: #f9dbbd;
        --reverse-text-color: #312257;
        --accent-1: #502163;
        --accent-2: #ffc680;
        --accent-3: #3c7e85;
        --filter-color: #f9dbbd7e;
        --box-shadow: 0px 0px 15px #f9dbbd7e;
        --warning: #b80303;
    }
    /* light theme number 1 */
    :root.light1{
        --background-color: #f0d9ff;
        --text-color: #2e1f60;
        --reverse-text-color: #f0d9ff;
        --accent-1: #c099d8;
        --accent-2: #e1ba7a;
        --accent-3: #00738a;
        --filter-color: #2e1f607e;
        --box-shadow: 5px 5px 12px #2e1f607e;
        --text-shadow: 0px 0px 10px #f0d9ff;
        --warning: #b80303;
    }
    /*light theme number 2 */
    :root.light2 {
        --background-color: #f9e7e7;
        --text-color: #2f1f45;
        --reverse-text-color: #f9e7e7;
        --accent-1: #f9dbbd;
        --accent-2: #b96ac9;
        --accent-3: #00416c;
        --filter-color: #2f1f457e;
        --box-shadow: 5px 5px 12px #2e1f607e;
        --text-shadow: 0px 0px 10px var(--accent-2);
        --warning: #b80303;
    }
#username, #pwd, #confirm_pwd, #email, #confirm_email, #username, #newPwd {
    background-color: var(--background-color);
    border-color: var(--accent-3);
    border-style: solid;
    color: var(--text-color);
    accent-color: var(--accent-1);
    margin-bottom: 1em;
    height: 3em;
    width: 20em;
    padding-left: 1em;
}
.checkbox {
    accent-color: var(--accent-2);
    margin-bottom: 1em;
}
#submit {
    background-color: var(--accent-2);
    border-color: transparent;
    border-radius: 16px;
    width: 95%;
    height: 3em;
    margin-top: 1em;
    margin-bottom: 1em;
    cursor: pointer;
}
#submit-button {
    display: flex;
    justify-content: center;
}
.forget a {
    color: var(--accent-3);
    padding: 1em;
}
.login {
    width: 30em;
    height: auto;
    padding-bottom: 2em;
}
.body {
    display: flex;
    justify-content: center;
    width: 100%;
}
.login {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: space-evenly;
    padding: 1em;
    border: 4px solid var(--accent-3);
    border-radius: 8px;
    margin: 6em 1em;
    background-color: var(--accent-1);
}
.forget {
    display: flex;
    flex-direction: row;
}

.error {
    color: red;
    font-size: 0.875rem;
}
.success {
    color: green;
    font-size: 0.875rem;
}
.terms {
    display: flex;
    justify-content: center;
}

.form-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.form-contents {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40em;
    height: 100%;
    padding: 2em;
    border-radius: 8px;
    border: 3px solid var(--accent-3);
    background-color: var(--accent-1);
}
.label {
    font-size: 35px;
    margin-right: 8px;
}
#submit {
    width: 6em;
    height: 3em;
    background-color: var(--accent-2);
    border-color: transparent;
    border-radius: 16px;
    margin: 1em 1em;
    cursor: pointer;
}
#submit-btn {
    width: 6em;
    height: 3em;
    background-color: var(--accent-2);
    border-color: transparent;
    border-radius: 16px;
    margin: 0em 2em;
    cursor: pointer;
}
.button-wrapper {
    width: 100%;
}
#forget-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}
.forget-info-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.forget-inputs {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* width: 100%; */
}
#forget-email {
    background-color: var(--background-color);
    border-color: var(--accent-3);
    border-style: solid;
    color: var(--text-color);
    accent-color: var(--accent-1);
    height: 3em;
    width: 20em;
    padding-left: 1em;
    margin-right: 3em;
}
#instruct {
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
}