/* -------------------------------------------------------------
General Colors
------------------------------------------------------------- */
/* -------------------------------------------------------------
Global Styles
------------------------------------------------------------- */
/* Primary links color */
/* Background color (Desktop Only) */
/* Background color (Mobile Only) */
/* Global font: Default system font for MacOS & Android */
/* Global text color */
/* Header background color */
/* Product Header background color */
/* Header icon color */
/* Header bar color in between the logo and menu links (Desktop Only)*/
/* Header menu links color (Desktop Only)*/
/* Header menu links color in the slide-out drawer (Mobile Only) */
/* Product left-side menu links color (Desktop Only) */
/* Footer background color */
/* Footer text color */
/* Footer top border color */
/* Footer links color */
/* Layout background color for card elements */
/* Layout background color for expandable background lef-side column */
/* Banner elements under the header */
/* -------------------------------------------------------------
Dashboard
------------------------------------------------------------- */
/* Primary background color  */
/* Right-side transaction list pending status text color */
/* Right-side activity list expanding arrow color */
/* Title text above each account type section */
/* Account block background hover */
/* Positive account value color */
/* Negative account value color */
/* Account call-to-action blocks (Default) */
/* Account call-to-action blocks (Pending) */
/* Account call-to-action blocks (Past Due) */
/* Widget: Loyalty */
/* -------------------------------------------------------------
Account Summary
------------------------------------------------------------- */
/* Disputed note in collapsed transaction detail */
/* Key values outside of collapsed detail block */
/* -------------------------------------------------------------
Transfers & Bill Pay
------------------------------------------------------------- */
/* Account list */
/* Transaction block */
/* Fee block callout */
/* Recurring block callout */
/* Success callout */
body {
    background-color: #fff;
    /*height:100%;*/
}

header .container {
    /*display: inline-flex;
    justify-content: space-between;*/
    min-height: auto;
    background-color: #036;
    display: -webkit-inline-box;
    display: inline-flex;
    width: 100%;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    align-items: center;
    padding: 10px 20px;
}

#prelogin {
    box-sizing: border-box;
    padding: 2rem;
}

@media (max-width: 768px) {
    #prelogin.dashboard {
        /*padding-top: 75px;*/
    }
}

#prelogin.dashboard .column.twelve {
    display: inline-flex;
    width: 100%;
    align-items: stretch;
}

@media (max-width: 768px) {
    #prelogin.dashboard .column.twelve {
        flex-direction: column;
    }
}

#prelogin.dashboard .column.twelve .account-card {
    justify-content: flex-start;
}

#prelogin .identity-types {
    list-style: none;
    padding: 0;
    margin: 0 0 3rem 0;
}

    #prelogin .identity-types li {
        display: inline-b;
        width: 100%;
        padding-bottom: 10px;
        margin-bottom: 10px;
        border-bottom: 1px solid #eee;
    }

        #prelogin .identity-types li label {
            display: inline-block;
        }

        #prelogin .identity-types li div {
            display: none;
            width: 100%;
            max-width: 300px;
            padding-top: 5px;
            padding-left: 25px;
        }

#prelogin #ssn-lastfour {
    display: none;
}

#prelogin #recurring label {
    margin-bottom: 20px;
}

#prelogin #edit {
    margin-left: 20px;
}

#prelogin #newcard,
#prelogin #creditcardcontainer,
#prelogin #paypalcontainer {
    display: none;
}

    #prelogin #creditcardcontainer .micro,
    #prelogin #paypalcontainer .micro {
        margin-bottom: 15px;
        padding-left: 30px;
    }

#prelogin .savedcardscontainer {
    display: block;
}

    #prelogin .savedcardscontainer #savedcards {
        float: left;
        width: 100%;
        padding: 5px 0 5px 30px;
        margin-bottom: 15px;
    }

        #prelogin .savedcardscontainer #savedcards p {
            font-size: 12px;
            margin: 15px 0;
        }

            #prelogin .savedcardscontainer #savedcards p a {
                float: right;
                margin-left: 20px;
            }

#prelogin .internalaccountscontainer {
    display: block;
}

#prelogin #internalaccounts {
    float: left;
    width: 100%;
    padding: 5px 0 5px 30px;
    margin-bottom: 15px;
}

#prelogin .externalaccountscontainer {
    display: block;
}

#prelogin #externalaccounts {
    float: left;
    width: 100%;
    display: none;
    padding: 5px 0 5px 30px;
    margin-bottom: 15px;
}

#prelogin .row {
    display: block;
}

    #prelogin .row .micro {
        display: block;
        clear: left;
        width: 100%;
        font-size: 12px;
        line-height: 18px;
    }

    #prelogin .row .forminputgroup {
        float: left;
        margin-right: 10px;
    }

    #prelogin .row.name, #prelogin .row.firstname, #prelogin .row.lastname, #prelogin .row.cardholder, #prelogin .row.ccno, #prelogin .row.emailaddress {
        max-width: 400px;
    }

    #prelogin .row.vinno, #prelogin .row.memberno, #prelogin .row.paymentdate {
        max-width: 300px;
    }

    #prelogin .row.last4ssn input, #prelogin .row.cvvno input {
        max-width: 100px;
    }

    #prelogin .row.captia input {
        float: left;
        max-width: 200px;
        margin-right: 20px;
    }

    #prelogin .row.captia p {
        display: inline-block;
        width: 100%;
        clear: left;
        margin-top: 5px;
    }

    #prelogin .row.captia img {
        float: left;
        max-height: 41px;
    }

    #prelogin .row.verify-code {
        max-width: 250px;
    }

    #prelogin .row.paymentamount .paymentamount-container {
        display: inline-flex;
        width: 100%;
    }

    #prelogin .row.paymentamount .suffix {
        color: #069;
    }

        #prelogin .row.paymentamount .suffix:hover {
            color: #036;
            background-color: #fff;
        }

    #prelogin .row.paymentamount input {
        max-width: 150px;
    }

    #prelogin .row.paymentamount #paymentamount-options {
        display: none;
        border-left: 0;
        width: auto;
    }

    #prelogin .row.driverslicenseno {
        max-width: 200px;
    }

    #prelogin .row.method {
        max-width: 400px;
    }

        #prelogin .row.method .errorMessage {
            float: none;
            display: block;
        }

        #prelogin .row.method .note {
            opacity: 0.65;
            margin-top: 10px;
            font-size: 12px;
            line-height: 18px;
            font-style: italic;
        }

        #prelogin .row.method ul {
            margin-bottom: 10px;
        }

            #prelogin .row.method ul li {
                display: inline-block;
                width: 100%;
            }

    #prelogin .row.amount {
        width: 150px;
    }

    #prelogin .row.summary p {
        display: inline-block;
        width: 100%;
        margin-bottom: 10px;
        padding-bottom: 10px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

@media only screen and (max-width: 480px) {
    #prelogin .row.summary p {
        max-width: 100%;
    }
}

#prelogin .row.summary p strong {
    float: right;
}

#prelogin .row .billing label,
#prelogin .row .carddetails label {
    margin-bottom: 5px;
}

#prelogin .row .billing.street {
    float: left;
    width: 60%;
    margin-bottom: 10px;
}

@media only screen and (max-width: 480px) {
    #prelogin .row .billing.street {
        width: 100%;
        max-width: 100%;
    }
}

#prelogin .row .billing.city {
    float: left;
    clear: left;
    max-width: 300px;
    margin-right: 10px;
    margin-bottom: 10px;
}

#prelogin .row .billing.state {
    float: left;
    max-width: 50px;
    margin-right: 10px;
    margin-bottom: 10px;
}

#prelogin .row .billing.zip {
    float: left;
    max-width: 100px;
}

#prelogin .row .carddetails .error-bar,
#prelogin .row .carddetails .success-bar {
    margin-top: 10px;
}

#prelogin .row .carddetails.firstname {
    float: left;
    width: 40%;
    margin-bottom: 10px;
    margin-right: 10px;
}

@media only screen and (max-width: 480px) {
    #prelogin .row .carddetails.firstname {
        width: 100%;
        max-width: 100%;
    }
}

#prelogin .row .carddetails.lastname {
    float: left;
    width: 40%;
    margin-bottom: 10px;
}

@media only screen and (max-width: 480px) {
    #prelogin .row .carddetails.lastname {
        width: 100%;
        max-width: 100%;
    }
}

#prelogin .row .carddetails.ccno {
    float: left;
    width: 60%;
    margin-bottom: 10px;
}

@media only screen and (max-width: 480px) {
    #prelogin .row .carddetails.ccno {
        width: 100%;
        max-width: 100%;
    }
}

#prelogin .row .carddetails.ccexpiry {
    float: left;
    clear: left;
    max-width: 250px;
    margin-bottom: 10px;
    margin-right: 10px;
}

    #prelogin .row .carddetails.ccexpiry label {
        width: 100%;
    }

    #prelogin .row .carddetails.ccexpiry input {
        width: 75px;
        display: inline-block;
        margin-right: 10px;
    }

#prelogin .row .carddetails.cvvno {
    float: left;
    max-width: 100px;
    margin-bottom: 10px;
}

#prelogin .QuickPayAppIcon img {
    background-image: url("../img/QuickPayWidgetIcon.svg")
}

#prelogin .SkipAPayAppIcon img {
    background-image: url("../img/SkipAPayWidgetIcon.svg")
}

#prelogin .WireTransferAppIcon img {
    background-image: url("../img/WireTransferWidgetIcon.svg")
}