#login { 
    background-color: #B5C0B3; /* background for the "Pay My Bill" section */
    padding: 40px 0;
    text-align: center; 
}
    #login h1 {
        font-family: 'Transcend Regular', sans-serif;
        font-size: 5em;
        font-weight: normal;
        color: #FFFFFF;
        margin-bottom: 20px;
        width: 100%;
    }
#login .container {
    background-color: #FFFFFF;
    padding: 40px;
    box-shadow: none;
    max-width: 730px;
    text-align: center;
    border: none;
    margin: 50px auto 0 auto; 
}


 
    #login .container form fieldset {
        border: none;
        margin: 0;
        padding: 0;
    }

    #login .container form label {
        display: block;
        font-family: 'Transcend Regular', sans-serif;
        font-weight: normal;
        color: #5D685F;
        font-size: 1.5em;
        margin-bottom: 20px;
        text-align: left;
    }
    #login .container form div {
        width: 100%;
        text-align: left;
    }
    #login .container form p {
        display: block;
        font-family: 'Lato Light', sans-serif;
        color: #5D685F;
        font-size: 1.2em;
        margin-bottom: 10px;
        text-align: left;
    }
    #login input[type="text"],
    #login input[type="password"] {
        width: 100%;
        padding: 10px;
        margin-bottom: 20px;
        border: 1px solid #5D685F;
        font-family:'Lato Light', sans-serif;
        box-shadow: none;
        font-size: 1em;
        padding: 10px;
        border-radius: 0;
        height: 2em;
    }

    #login button[type="submit"],
    #login button#register,
    #login button#signin {
        background-color: #5D685F;
        color: #FFFFFF;
        padding: 12px 30px;
        border: none;
        cursor: pointer;
        font-family: 'Transcend Regular', sans-serif;
        width: auto;
        border-radius: 40px;
        margin: 10px 0 20px 0;
        font-size: 1em;
        text-align: left;
    }

    #login .forgot-link {
        display: block;
        margin: 10px 0;
        font-size: 0.9em;
        font-weight: 800;
        color: #5D685F;
        text-decoration: none;
        text-align: left;
    }


    #login .container form .error-message p{
        text-align: center;
        color: red;
        float: left;
        width: 100%;
        text-align: left;
    }

#login .links {
    text-align: left;
    float: left;
    width: 100%;
    margin-top: 10px;
}

    #login .form-link {
        text-align: left;
        font-weight: normal;
    }

#login .create-account-section {
    margin-top: 10px;
    font-size: 18px;
    width: 100%;
    float: left;
    padding-top: 30px;
    text-align: left;
}

#login .create-account-section span {
    font-weight: 900; 
}

#login .ui.negative.message {
    text-align: center;
    width: 100%;
}

#login .ui.large.form {
    margin: auto;
    margin-left: 35%;
}

#login .first-time {
    width:100%;
    margin-top: 2em;
}

    #login .first-time h2 {
        font-family: 'Transcend Regular', sans-serif;
        font-size: 1.5em;
        color: #5D685F;
        margin-bottom: 10px;
        text-align: left;
    }

    #login .first-time p, #login .first-time span {
        font-family: 'Lato Light', sans-serif;
        font-size: 0.8em;
        font-weight: 500;
        color: #000000;
        margin-bottom: 20px;
        text-align: left;
    }