#payment-form .tfoot {
    display: flex;
    align-items: center;
    margin-top: 10px;
    justify-content: space-between;
}

#payment-form #select-buttons>a {
    margin-right: 10px;
    margin-bottom: 5px;
}

#payment-form .tfoot>*:last-child {
    margin-left: 10px;
    text-align: right;
}

#payment-form #total-payable-amount label,
#payment-form #service-fees label {
    font-weight: bold;
    margin-right: 5px;
}

#service-fees {
    margin-bottom: 5px;
}

#payment-form .jp-card {
    min-width: 280px;
}

#payment-form .payment-amount-field {
    margin-top: 30px;
    max-width: 350px;
}

#payment-form .jp-card-container {
    margin-left: 0;
}

#payment-form input.jp-card-invalid:not(.select-dropdown),
#payment-form input.invalid {
    color: #f00;
}

#payment-form #account-list,
#payment-form #payment-method-list {
    width: 100%;
}

#payment-form #account-list .utility,
#payment-form #account-list .community,
#payment-method-list .wallet {
    cursor: pointer;
}

#payment-form #payment-amount[readonly] {
    color: inherit;
}

#payment-form .payment-method {
    padding-bottom: 5px;
}

#echeck-form .echeck {
    margin-left: 0;
    min-width: 280px;
}

#account-list .location-number {
    font-weight: bold;
}

.cc { height: 36px; }
.cc>* { display: inline-block; background:url(images/cc.png); border:1px solid #666; width: 56px; height: 32px; margin-left: 2px; }
.cc .none { background: none; border: none; width: inherit; margin-left: inherit; }
.cc .master { background-position:0px 0px; }
.cc .visa { background-position:-56px 0px; }
.cc .discover { background-position:-112px 0px; }
.cc .amex { background-position:-168px 0px; }
.cc .master-bw { background-position:0px 32px; }
.cc .visa-bw { background-position:-56px 32px; }
.cc .discover-bw { background-position:-112px 32px; }
.cc .amex-bw { background-position:-168px 32px; }
.echeck, .ach { height: 32px; width: 69px; display: inline-block; background: url(images/echeck.jpg); border: 1px solid #666; }
.cc .card-align { vertical-align: middle; margin-right :0.5em; }
.ach {
    width: auto;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 3px;
    font-size: 16pt;
    text-align: center;
    text-transform: uppercase;
    background: none;
}

.other {
    font-size: 16pt;
    text-transform: uppercase;
    background: none;
}

#payment-form .ach .badge.unverified {
    font-size: 8pt;
    left: 0;
    top: -13px;
}

.ach .text {
    margin-top: auto;
    margin-bottom: auto;
}

[data-wallet-item-kind=Bank] .payment-method-name {
    float: right;
    margin-left: 5px;
}

#wallet-option .ach {
    display: inline-block;
    width: auto;
    float: left;
    margin-right: 5px;
}

#wallet-option .ach.unverified {
    width: 100px;
}

#wallet-option .ach .badge.unverified {
    top: -19px;
}

#wallet-option span, #wallet-option label{
    padding-right: 3px;
}

.material-icons {
    margin-top: auto;
    margin-bottom: auto;
}


#credit-card-form .flex-container,
#echeck-form .flex-container,
#scheduled-check-form .flex-container {
    justify-content: space-between;
}

#credit-card-form .flex-container > div,
#echeck-form .flex-container > div,
#scheduled-check-form .flex-container > div {
    width: 45%;
}

#echeck-form .col > img,
#scheduled-check-form .col > img {
    width: 55%;
}

#save-checkbox {
    margin-top: 0px;
    margin-right: 20px;
}

#account-list .community {
    font-weight: bold;
}

.batch-selector {
    display: inline-block;
    margin-left: 10px;
}

.batch-selector label {
    font-size: 0.8rem;
    position: relative;
    top: auto;
    left: auto;
}

.batch-selector select {
    display: block;
    width: 250px;
}

.payment-type-selector {
    display: inline-block;
}

.payment-type-selector label {
    font-size: 0.8rem;
    position: relative;
    top: auto;
    left: auto;
}

.payment-type-selector select {
    display: block;
    width: 250px;
}

#payment-method-form .throbber {
    top: auto;
}

#payment-form div.decline-wrapper {
    margin: 0;
}

#payment-form div.decline-wrapper label {
    margin-bottom: 5px;
}

#process-declines-throbber {
    vertical-align: text-bottom;
}

#tooltip-scheduled-ach-help,
#tooltip-scheduled-ach-date-help {
    vertical-align: top;
    margin-left: 5px;
}

#tooltip-scheduled-ach-help .material-icons {
    font-size: 22px;
}

#plaid-instructions{
    margin-top: 1em;
    margin-bottom: 1em;
}

#plaid-item-table .balance {
    white-space: nowrap;
}

#plaid-throbber,
#plaid-autopay-throbber {
    position: relative;
}

#plaid-autopay-instructions{
    margin-top: 2em;
    font-weight: bolder;
}

.verify-micro-deposit .throbber {
    vertical-align: text-bottom;
}

.unlink-draft-disclaimer{
    font-weight: bolder
}

#echeck-auth, #echeck-auth-recurring, #ach-auth-recurring, #card-auth-recurring {
    margin-top: 1em;
}

.auto-pay-add-card-draft-instructions {
    font-weight: 600;
}

#paypal-icon img {
    height: 32px;
    width: 56px;
    display: inline-block;
    border: 1px solid #666;
}

@media(max-width: 320px) {
    #payment-form .jp-card {
        margin-left: -15px;
        max-width: 280px;
        height: 180px;
    }
}

@media(min-width: 768px) {
    #payment-form .jp-card-container {
        width: 400px;
        height: 228px;
    }

    #payment-form .payment-amount-field,
    #payment-form .scheduled-date-field,
    #echeck-form #echeck-amount,
    #echeck-form #scheduled-echeck-date {
        max-width: 460px;
    }

    #payment-method-list .wallet .cc {
        display: inline-block;
        width: 100px;
    }
}

@media(max-width: 600px) {
    #credit-card-form.stripe>.row {
        display: flex;
        flex-direction: column;
    }

    #credit-card-form.stripe>.row>.col:first-of-type {
        order: 2;
    }

    .batch-selector {
        margin-left: 0;
    }

    .payment-type-selector {
        margin-left: 0;
    }
}

@media(max-width: 991px) {
    #account-list .utility,
    #payment-method-list .wallet {
        display: table;
        margin-bottom: 10px;
    }

    #account-list .utility {
        border-bottom: 1px solid #808080;
    }

    #account-list .utility>div,
    #account-list .select-box>div {
        display: table-row;
    }

    #account-list .utility>div>*,
    #account-list .select-box>div>*,
    #payment-method-list .wallet>div>*{
        display: table-cell;
        padding: 5px 0 5px 0;
        vertical-align: middle;
    }

    #account-list .utility>div>*:first-child {
        text-align: right;
        padding-right: 10px;
        font-weight: bold;
    }

    #account-list .select-box>div>*:first-child {
        text-align: left;
        white-space: nowrap;
    }

    #payment-form .select-box input[type="checkbox"] + label {
        margin-bottom: 0;
    }

    #payment-method-list .wallet>div {
        display: inline-table;
        margin-bottom: 10px;
    }

    #payment-method-list .wallet>div>span {
        font-weight: bold;
        text-align:right;
        padding: 3px;
    }

    #payment-method-list .wallet>div .payment-method-name{
        display:none;
    }

    #payment-method-list .wallet>div>* {
        display: inline-block;
        padding: 0;
    }

    #payment-method-list .wallet>div:first-of-type>label {
        padding-left: 35px;
    }

    #plaid-item-table {
        display: block;
        overflow-x: auto;
    }
}

@media(min-width: 992px){
    #account-list,
    #payment-method-list,
    #statement-deferred-charge-dialog {
        display: table;
    }

    #account-list .thead,
    #payment-method-list .thead,
    #statement-deferred-charge-dialog .thead {
        display:table-header-group;
        width: 100%;
    }

    #account-list .tbody,
    #payment-method-list .tbody,
    #statement-deferred-charge-dialog .tbody {
        display: table-row-group;
        width: 100%;
    }

    #account-list .thead>div,
    #account-list .tbody>div,
    #payment-method-list .thead>div,
    #payment-method-list .tbody>div,
    #statement-deferred-charge-dialog .thead>div,
    #statement-deferred-charge-dialog .tbody>div {
        display: table-row;
        width: 100%;
    }

    #account-list .thead>div>div,
    #account-list .tbody>div>div,
    #payment-method-list .thead>div>div,
    #payment-method-list .tbody>div>div,
    #statement-deferred-charge-dialog .thead>div>div,
    #statement-deferred-charge-dialog .tbody>div>div {
        display: table-cell;
        vertical-align: inherit;
        padding: 5px;
    }

    #account-list .thead>div>div,
    #payment-method-list .thead>div>div,
    #statement-deferred-charge-dialog .thead>div>div {
        font-weight: bold;
        border-bottom: 1px solid #808080;
    }

    #payment-method-list .thead>div>div:first-of-type {
        padding-left: 40px;
    }

    #payment-form .select-box input[type="checkbox"] + label:before {
        margin-top: 20px;
        left: 30px;
    }
}