/* ##############################
    Login Custom StyleSheet
################################# */

/* Login Content */
.login-content-container {
    margin: auto;
    padding: 0 1.5em 0 1.5em;
}
#login-text {
    font-size: 17px;
    font-weight: bold;
}

/* Login General Information Block */
/* password reset block */
#forget-password-link{
    font-size: 12px;
    text-decoration: none;
    color: rgb(150, 147, 147);
}
/* login button */
#login-btn {
    width: 100%;
    color: white;
    padding: .8em;
    font-weight: bold;
    background-color: #688E8A;
}

/* Sign Up And Sign In With Google Buttons Block */
/* sign up button */
#signup-btn-wrapper a {
    width: 100%;
    font-weight: bold;
    padding: .8em;
    background-color: #afb3b2;
}
/* sign in with google button */
#signin-with-google-btn-wrapper {
    display: flex;
    align-items: center;
    border-radius: 5px;
    border: .5px solid #4285F4;
}
#signin-with-google-btn-wrapper a {
    width: 100%;
    font-weight: bold;
}


/* ################
    Media Query
################### */

/* =====  Mobile View (!) Width ( 320px <-> 425px ) (!) ===== */
/* @media only screen and ( min-width: px ) {  }  */

/* =====  Tablet View (!) Width ( 425px <-> 768px ) (!) ===== */
/* @media only screen and ( min-width: px ) {  }  */


/* ===== Medium Laptop View (!) Width ( 768px <-> 1024px ) (!) ===== */
@media only screen and ( min-width: 768px ) {
    /* Login Content */
    .login-content-container { width: 53.5em; }

    /*  */

} 

/* =====  Large Laptop View (!) Width ( 1024px <-> 1920px ) (!) ===== */
@media only screen and ( min-width: 1024px ) {
    /* Login Content */
    .login-content-container { width: 45em; }
    
    #login-text { margin-bottom: 2em; }

    /*  */
}