/* Minification failed. Returning unminified contents.
(1656,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1657,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1660,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
 */
/*!
 * jQuery UI Autocomplete 1.10.0
 * http://jqueryui.com
 *
 * Copyright 2013 jQuery Foundation and other contributors
 * Released under the MIT license.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Autocomplete#theming
 */
.ui-autocomplete {
	position: absolute;
	top: 0;
	left: 0;
	cursor: default;
}

/*! normalize.css v2.1.2 | MIT License | git.io/normalize */

@font-face {
    font-family: 'SFUI-Display';
    src: url('/Content/fonts/SFUI/SFUIDisplay-Black.eot');
    src: url('/Content/fonts/SFUI/SFUIDisplay-Black.eot?#iefix') format('embedded-opentype'), url('/Content/fonts/SFUI/SFUIDisplay-Black.woff2') format('woff2'), url('/Content/fonts/SFUI/SFUIDisplay-Black.woff') format('woff'), url('/Content/fonts/SFUI/SFUIDisplay-Black.ttf') format('truetype'), url('/Content/fonts/SFUI/SFUIDisplay-Black.svg#SFUIDisplay-Black') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'SFUI-Text';
    src: url('/Content/fonts/SFUI/SFUIText-Regular.eot');
    src: url('/Content/fonts/SFUI/SFUIText-Regular.eot?#iefix') format('embedded-opentype'), url('/Content/fonts/SFUI/SFUIText-Regular.woff2') format('woff2'), url('/Content/fonts/SFUI/SFUIText-Regular.woff') format('woff'), url('/Content/fonts/SFUI/SFUIText-Regular.ttf') format('truetype'), url('/Content/fonts/SFUI/SFUIText-Regular.svg#SFUIText-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
    display: block;
}

audio, canvas, video {
    display: inline-block;
    *display: inline;
}

    audio:not([controls]) {
        display: none;
        height: 0;
    }

[hidden] {
    display: none;
}

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    background-color: #f8f8f8;
}

label[for] {
    cursor: pointer;
    line-height: 34px;
}

label.payment-label {
    line-height: 18px;
}

body {
    margin: 0;
}

a:focus {
    outline: thin dotted;
}

a:active, a:hover {
    outline: 0;
}

abbr[title] {
    border-bottom: 1px dotted;
}

b, strong {
    font-weight: 700;
}

dfn {
    font-style: italic;
}

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}

mark {
    background: #ff0;
    color: #000;
}

code, kbd, pre, samp {
    font-family: monospace,serif;
    font-size: 1em;
}

pre {
    white-space: pre-wrap;
}

q {
    quotes: "\201C" "\201D" "\2018" "\2019";
}

small {
    font-size: 80%;
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -.5em;
}

sub {
    bottom: -.25em;
}

img {
    border: 0;
}

svg:not(:root) {
    overflow: hidden;
}

figure {
    margin: 0;
}

fieldset {
    border: 1px solid silver;
    margin: 0 2px;
    padding: .35em .625em .75em;
}

legend {
    border: 0;
    padding: 0;
}

button, input, select, textarea {
    font-family: inherit;
    font-size: 100%;
    margin: 0;
}

    a[disabled], button[disabled], button[disabled] * {
        cursor: not-allowed;
    }

        a[disabled], a[disabled]:hover {
            color: #cccccc !important;
            text-decoration: none;
        }

button, select {
    text-transform: none;
}

button, html input[type=button], input[type=reset], input[type=submit] {
    -webkit-appearance: button;
    cursor: pointer;
}

input[disabled] {
    cursor: default;
}

input[type=checkbox], input[type=radio] {
    box-sizing: border-box;
    padding: 0;
}

input[type=search] {
    -webkit-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

    input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
        -webkit-appearance: none;
    }

button::-moz-focus-inner, input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

textarea {
    overflow: auto;
    vertical-align: top;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

    /* GENERIC TABLE STYLE */

    table.layout {
        margin-top: 1em;
        margin-bottom: 1em;
    }

        table.layout thead th {
            padding: .5em 1em;
            border: 1px solid #006A94;
            background-color: #006A94;
            color: #fff;
            font-weight: normal;
        }

        table.layout tr:nth-child(even) td {
            background-color: #f3f9fc;
        }

        table.layout tbody td {
            padding: .5em 1em;
            border: 1px dotted #006A94;
        }


.ui-jqgrid-btable a.ui-icon.ui-icon-foreign-onus, .ui-jqgrid-btable a.ui-icon.ui-icon-foreign-onus:hover {
    background-image: url(/Content/foreign_onus.gif) !important;
    background-position: 0 0;
}

.ui-jqgrid-btable a.ui-icon.ui-icon-foreign-offus, .ui-jqgrid-btable a.ui-icon.ui-icon-foreign-offus:hover {
    background-image: url(/Content/foreign_offus.gif) !important;
    background-position: 0 0;
}

.ui-jqgrid-btable a.ui-icon.ui-icon-domestic-onus, .ui-jqgrid-btable a.ui-icon.ui-icon-domestic-onus:hover {
    background-image: url(/Content/domestic_onus.gif) !important;
    background-position: 0 0;
}

.ui-jqgrid-btable a.ui-icon.ui-icon-domestic-offus, .ui-jqgrid-btable a.ui-icon.ui-icon-domestic-offus:hover {
    background-image: url(/Content/domestic_offus.gif) !important;
    background-position: 0 0;
}

.ui-widget-overlay {
    opacity: .8 !important;
}

.ui-jqgrid-btable a.ui-icon {
    background-image: url(/content/themes/paynow/images/ui-icons_0066ae_256x240.png) !important;
    border: 2px solid #fff;
    margin-right: 0 !important;
}

    .ui-jqgrid-btable a.ui-icon:hover {
        background-image: url(/content/themes/paynow/images/ui-icons_FFF_256x240.png) !important;
        background-color: #0066ae;
        border-color: #0066ae;
    }

.ui-jqgrid-btable td {
    background-color: #FFF;
}

.ui-pg-table td {
    background-color: #0066ae;
    color: #FFF;
    padding: 2px !important;
}

.ui-pg-table {
    padding-bottom: 0 !important;
}

.ui-pg-button .ui-icon {
    background-image: url(/content/themes/paynow/images/ui-icons_FFF_256x240.png) !important;
}

.ui-jqgrid-pager .ui-state-hover .ui-icon {
    background-image: url(/content/themes/paynow/images/ui-icons_0066ae_256x240.png) !important;
}

.ui-jqdialog .ui-jqdialog-content td, .ui-jqdialog .ui-jqdialog-content th {
    background-color: #fff;
}

.searchFilter {
    overflow: visible !important;
}

.ui-dialog-titlebar-close {
    background-color: #0066ae !important;
}

a.ui-icon {
    background-image: url(/content/themes/paynow/images/ui-icons_FFF_256x240.png);
}

body {
    background-color: #fff;
    font-family: 'SFUI-Text',Arial,sans-serif;
    font-size: 100%;
    line-height: 150%;
    margin: 0;
    padding: 0;
}

body, td, th {
    font-size: 14px;
    color: #000;
}

pre {
    margin: 0;
    font-family: 'SFUI-Text',Arial,sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
}


/* -----------------------------------
---------------------------------------------------------------------------------------------------- */


/* --- --- Typography --- --- */

h1, h2, h3, h4, h5, h6 {
    display: block;
    margin: .3em 0;
    font-weight: bold;
    font-family: 'SFUI-Display',Arial,sans-serif;
}

h1 {
    font-size: 1.6em;
}

h2 {
    font-size: 20px;
}

h3 {
    font-size: 15px;
}

h4.section-heading {
    border-bottom: 1px solid #0066ae;
    margin-top: 5px;
    margin-bottom: 15px;
    font-weight: normal;
    padding-bottom: 5px;
}


p {
    font-size: 1em;
    line-height: 1.5em !important;
}

ul {
    list-style: none;
    line-height: 1.5em !important;
}

li {
    font-size: 1em;
}

hr {
    margin: 1em 0;
    border-top: #ddd;
}

a {
    color: #0086bc;
}

    a, a:visited {
        text-decoration: none;
    }

        a:hover {
            text-decoration: underline;
        }


.btn {
    background: #0086BC;
    padding: 9px 12px;
    color: #fff !important;
    font-weight: 700;
    white-space: nowrap;
    line-height: 20px;
    text-decoration: none !important;
    border-color: #0098D6;
    border: 1px solid;
    border-bottom: 3px solid #00628A;
    border-radius: 4px 4px 6px 6px;
    transition: .2s all ease-out;
}

    .btn:hover {
        background: #0098D6;
        text-decoration: none
    }

    .btn.orange {
        background: #e6873d;
        border-color: #e49253;
        padding-top: .4em; /* fixing size difference illusion */
        border-bottom-color: #b55f1c;
        text-shadow: 1px 1px 1px #444;
    }

        .btn.orange:hover {
            background: #EFB181;
        }

    .btn[disabled], .btn[disabled]:hover {
        background: #bbb !important;
        border-color: #999 !important;
    }

    .btn.btn-link {
        border: none;
        background: none;
        color: #0066ae !important;
        font-weight: normal;
}

label {
    font-family: 'SFUI-Text',Arial,sans-serif;
    font-weight: bold;
}

span.label {
    font-family: 'SFUI-Text',Arial,sans-serif;
    padding-right: 1em;
    margin-right: .7em;
    display: inline-block;
    font-weight: bold;
    width: 13em;
}

.trans-details .address, .trans-details .address + pre {
    display: inline-table;
    max-width: 16em;
}

    .trans-details .address pre {
        padding-left: 1em;
    }

.box .trans-details p {
    margin-left: 0;
}

.merc-details p.address {
    margin-right: 0;
}


.merc-details .address, .merc-details .address + pre {
    display: inline-table;
    max-width: 16em;
}

    .merc-details .address pre {
        padding-left: 1em;
    }

.box .merc-details p {
    margin-left: 0;
}

.merc-details p.address {
    margin-right: 0;
}


.rating-label + pre {
    display: inline-table;
}

.rating-label pre {
    padding-left: 1em;
}

.box.trans-details p {
    margin-left: 0;
}

.rating-label {
    margin-right: 0;
}


small.fine-print {
    padding: 1em;
    display: block;
    background: #EBF5FA;
}


.highlight {
    display: inline-block;
    *display: inline;
    background: #FF6464;
    padding: .5em 1em;
    color: #fff;
}








/* --- --- Notifications --- --- */

.info,
.success,
.warning,
.important-notice {
    padding: 1em;
    color: #171717 !important;
    border: 1px solid;
    border-radius: 5px;
}

.warning {
    background: rgb(253, 230, 188);
    border-color: rgb(255, 201, 103);
}

.info {
    background: #d9edf7;
    border-color: #5bc0de;
    color: #31708f !important;
}

.success {
    background-color: rgb(218, 245, 182);
    border-color: rgb(176, 236, 95);
}

.important-notice {
    background-color: rgb(253, 217, 188);
    border-color: rgb(255, 171, 103);
}

    .info a,
    .success a,
    .warning a,
    .important-notice a {
        color: #006A94;
        text-decoration: underline;
    }

.info ul {
    margin: 0;
    margin-top: -0.5em;
    padding: 0;
}

    .info ul li {
        margin-top: 0.5em;
    }

.alert {
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 5px;
}

.alert-info {
    border-color: #bee5eb;
    background-color: #d1ecf1;
    color: #0c5460;
}

.alert-danger, .alert-error {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.alert-success, .alert-message {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.alert-warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}


#scartnot {
    background-color: #FFF7C1;
    color: #000;
    padding: 2px;
    border: 0;
}

    #scartnot a {
        color: #006A94 !important;
    }



/* --- --- Forms --- --- */


fieldset {
    margin: 1.5em 0 0 0;
    padding: 1em 0;
    border: none;
    border-top: 1px solid #D7EBF4;
    border-radius: 5px;
}

legend {
    color: #5FAFD2;
    padding: 0 5px 0 0;
    font-size: 1.25em;
    margin-bottom: 0;
    margin-left: 0;
}

fieldset label {
    display: block;
    line-height: 18px;
}

    fieldset label.inline {
        display: inline;
    }

.input-group {
    margin-bottom: .75em;
}

    .input-group label {
        width: 100%;
        display: block;
        font-weight: bold;
        margin-bottom: .25em;
    }

    .input-group input[type=text],
    .input-group input[type=email],
    .input-group input[type=tel],
    .input-group input[type=password],
    .input-group textarea,
    .input-group select {
        width: 90%;
    }

.box form p {
    margin-left: 0em;
}

.box form {
    padding-left: 1.5em;
    padding-right: 1.5em;
}

/* --- --- Utility Classes--- --- */

.loading {
    background: url(/Content/loader-new.svg) center no-repeat !important;
}

.noborder {
    border: none !important;
}

.nopadding {
    padding: 0 0 0 0 !important;
}

.clear {
    clear: both;
}

span.red {
    color: red;
}

a.pdf-dl {
    padding: 1em;
    padding-left: 1.5em;
    background: url(/Content/icons/pdf.png) no-repeat center left;
    color: #006A94;
}





/* --- Star Rating --- */

.star-rating {
    position: relative;
    width: 100px;
    overflow: hidden;
    height: 19px;
    margin: 10px 0;
    display: inline-block;
    vertical-align: middle;
    margin: 0;
}

    .star-rating .rating {
        width: 100%;
        height: 100%;
        background-color: gold;
        position: absolute;
        top: 0;
        z-index: 0;
    }

    .star-rating img {
        width: 100%;
        position: relative;
        z-index: 1;
    }
/* --- End Star Rating --- */

.transaction-status {
    padding: 4px 15px;
    border-radius: 3px;
    text-transform: uppercase;
}

    .transaction-status.paid,
    .transaction-status.awaitingdelivery,
    .transaction-status.delivered,
    .transaction-status.settled,
    .transaction-status.settleddirect,
    .transaction-status.liquidated
    {
        color: white;
        background-color: green;
    }

    .transaction-status.created,
    .transaction-status.sent
    {
        color: white;
        background-color: grey;
    }

    .transaction-status.returned,
    .transaction-status.reverse
    {
        color: white;
        background-color: purple;
    }

    .transaction-status.failed,
    .transaction-status.disputed,
    .transaction-status.frozen
    {
        color: white;
        background-color: darkred;
    }


/* --- Bank Logos --- */
ul.logos {
    padding-left: 0;
}

    ul.logos li {
        list-style: none;
        display: inline-block;
        *display: inline;
        margin: 0 5px;
    }

span[class^="bank-logo"] {
    display: block;
    width: 67px;
    height: 42px;
    text-indent: -999em;
    margin: 0 2px;
    background: url(/Content/img/bank_logos_sprite_67.png) no-repeat;
}

span.lrg {
    display: block;
    width: 138px;
    height: 42px;
    margin: 0 4px;
}

span.bank-logo-visa {
    background-position: -205px -336px;
}

span.bank-logo-mastercard {
    background-position: -205px -378px;
}

span.bank-logo-ecocash {
    background-position: -138px -42px;
}

span.bank-logo-cabs {
    background-position: -138px -294px;
}

span.bank-logo-cbz {
    background-position: -138px -126px;
}

span.bank-logo-stanbic {
    background-position: 0 -42px;
}

span.bank-logo-standard {
    background-position: -205px -210px;
}
/*span.bank-logo-barclays {background-position: 0 -168px;}*/
span.bank-logo-posb {
    background-position: -205px -168px;
}

span.bank-logo-zb {
    background-position: -205px -84px;
}

span.bank-logo-diners {
    background-position: -138px -378px;
}

span.bank-logo-amex {
    background-position: -205px -294px;
}

span.bank-logo-union {
    background-position: -138px -336px;
}

span.bank-logo-agribank {
    background-position: -138px 0;
}

span.bank-logo-bancabc {
    background-position: -138px -168px;
}

span.bank-logo-ecobank {
    background-position: -138px -84px;
}

span.bank-logo-fbc {
    background-position: 0 0;
}

span.bank-logo-steward {
    background-position: 0 -126px;
}

span.bank-logo-mbca {
    background-position: -138px -252px;
}

span.bank-logo-metbank {
    background-position: 0 -84px;
}

span.bank-logo-nmb {
    background-position: -138px -210px;
}
/*span.bank-logo-tetrad {background-position: -205px 0;}
span.bank-logo-tnbank {background-position: -205px -42px;}
span.bank-logo-trust {background-position: -205px -252px;}*/
span.bank-logo-zabg {
    background-position: -205px -126px;
}

span.bank-logo-vpayments {
    background-position: -71px -168px;
}

span.bank-logo-telecash {
    background-position: -205px -462px;
}

span.bank-logo-onemoney {
    background-position: -205px -504px;
}

span.bank-logo-internetmobilebanking {
    background-position: -205px -546px;
}

span.bank-logo-cashcollection {
    background-position: -205px -546px;
}

span.bank-logo-pos2u {
    background-position: -138px -546px;
}

span.bank-logo-innbucks {
    background-position: -205px -588px;
}

span.bank-logo-eftpay {
    background-position: -205px -420px;
}

span.bank-logo-paygo {
    background-position: -138px -588px;
}

/* -- BillPayments -- */

span.bank-logo-dstv {
    background-position: -71px -420px;
}

span.bank-logo-coh {
    background-position: -4px -252px;
}

/*span.bank-logo-zesa {background-position: -4px -462px;}*/
/*span.bank-logo-txt {background-position: -4px -294px;}*/
/*span.bank-logo-safeguard {background-position: -4px -504px;}*/


span.bank-logo-webdev {
    background-position: -71px -336px;
}

span.bank-logo-umax {
    background-position: -138px -504px;
}

span.bank-logo-telco {
    background-position: -205px -504px;
}

span.bank-logo-yoafrica {
    background-position: -4px -420px;
}

span.bank-logo-zol {
    background-position: -138px -462px;
}

span.bank-logo-powertel {
    background-position: -4px -336px;
}

span.bank-logo-sanctuary {
    background-position: -4px -546px;
}

span.bank-logo-clarion {
    background-position: -71px -546px;
}

span.bank-logo-zimbolove {
    background-position: -138px -546px;
}

span.bank-logo-vawz {
    background-position: -71px -504px;
}

span.bank-logo-hspca {
    background-position: -205px -546px;
}

span.bank-logo-imire {
    background-position: -4px -588px;
}


/* --- Payment Types Logos --- */

span[class^="payment-type-logo"] {
    display: block;
    width: 42px;
    height: 26px;
    text-indent: -999em;
    margin: 0 2px;
    background: url(/Content/img/payment-types_logos.png) no-repeat;
}


span.payment-type-logo-visa {
    background-position: 0px 0px;
}

span.payment-type-logo-mastercard {
    background-position: -42px 0px;
}

span.payment-type-logo-ecocash {
    background: url(/Content/svg/pm-logos/ecocash.svg) no-repeat;
    background-size: 42px 26px;
}

span.payment-type-logo-vpayments {
    background-position: -126px 0px;
}

span.payment-type-logo-telecash {
    background: url(/Content/svg/pm-logos/telecash.svg) no-repeat;
    background-size: 42px 26px;
}

span.payment-type-logo-onemoney {
    background: url(/Content/svg/pm-logos/onemoney.svg) no-repeat;
    background-size: 42px 26px;
}

span.payment-type-logo-internetmobilebanking {
    background-position: -252px 0px;
}

span.payment-type-logo-cashcollection {
    background-position: -252px 0px;
}

span.payment-type-logo-innbucks {
    background: url(/Content/svg/pm-logos/innbucks.svg) no-repeat;
    background-size: 42px 26px;
}

span.payment-type-logo-eftpay {
    background: url(/Content/svg/pm-logos/zimswitch.svg) no-repeat;
    background-size: 42px 26px;
}

span.payment-type-logo-paygo {
    background: url(/Content/svg/pm-logos/paygo.svg) no-repeat;
    background-size: 42px 26px;
}

span.payment-type-logo-pos2u {
    background-position: -420px 0px;
}

span[class^="payment-method-logo"] {
    display: inline-block;
    width: 59px;
    height: 36px;
    background-size: 63px 40px;
    background-repeat: no-repeat;
    background-position: -2px -2px;
}


span.payment-method-logo-visa {
    background-image: url(/Content/svg/pm-logos/visa.svg);
}

span.payment-method-logo-mastercard {
    background-image: url(/Content/svg/pm-logos/mastercard.svg);
}

span.payment-method-logo-ecocash {
    background-image: url(/Content/svg/pm-logos/ecocash.svg);
}

span.payment-method-logo-vpayments {
    background-image: url(/Content/svg/pm-logos/vpayments.svg);
}

span.payment-method-logo-telecash {
    background-image: url(/Content/svg/pm-logos/telecash.svg);
}

span.payment-method-logo-onemoney {
    background-image: url(/Content/svg/pm-logos/onemoney.svg);
}

span.payment-method-logo-internetmobilebanking {
    background-image: url(/Content/svg/pm-logos/imbanking.svg);
}

span.payment-method-logo-cashcollection {
    background-image: url(/Content/svg/pm-logos/cashcollection.svg);
}

span.payment-method-logo-innbucks {
    background-image: url(/Content/svg/pm-logos/innbucks.svg);
}

span.payment-method-logo-eftpay {
    background-image: url(/Content/svg/pm-logos/zimswitch.svg);
}

span.payment-method-logo-paygo {
    background-image: url(/Content/img/omari.png);
}

span.payment-method-logo-pos2u {
    background-image: url(/Content/svg/pm-logos/pos2u.svg);
}

/* --- Billpayment Icons --- */

span[class^="billpay-icon"] {
    display: block;
    width: 60px;
    height: 60px;
    float: left;
    margin: 0 1em 0 0;
    text-indent: -999em;
    background: url(/Content/icons/bill-payment_icons.png) no-repeat;
}

span.billpay-icon.comms {
    background-position: 0px 0px
}

span.billpay-icon.utils {
    background-position: 0px -60px
}

span.billpay-icon.insurance {
    background-position: 0px -120px
}

span.billpay-icon.ent {
    background-position: 0px -180px
}

span.billpay-icon.donations {
    background-position: 0px -240px
}

span.billpay-icon.bills {
    background-position: 0px -300px
}




/* --- Billpayment Category Tab Icons --- */

span[class^="billpay-mini-icon"] {
    display: block;
    width: 24px;
    height: 24px;
    float: left;
    margin: 0 1em 0 0 !important;
    text-indent: -999em;
    background: url(/Content/icons/bill-payment_small-icons.png) no-repeat;
}

span.billpay-mini-icon.comms {
    background-position: -24px 0px
}

span.billpay-mini-icon.utils {
    background-position: -24px -24px
}

span.billpay-mini-icon.insurance {
    background-position: -24px -48px
}

span.billpay-mini-icon.ent {
    background-position: -24px -72px
}

span.billpay-mini-icon.donations {
    background-position: -24px -96px
}

span.billpay-mini-icon.bills {
    background-position: -24px -120px
}





/* --- Availability Icons --- */

span[class^="util-icon"] {
    background: url(/Content/icons/util_icons.png) no-repeat;
    display: inline-block;
    *display: inline;
    width: 16px;
    height: 16px;
    margin-right: .8em;
}

span.util-icon-tick {
    background-position: 0px 0px;
    margin-left: 15px;
}

span.util-icon-cross {
    background-position: 0px -16px;
    margin-left: 15px;
}



/* --- --- Scafolding --- --- */

.container {
    width: 960px;
    margin: 0 auto;
}

.eighty {
    float: left;
    width: 78%;
    margin-right: 2%;
}

.sixty {
    float: left;
    width: 58%;
    margin-right: 2%;
}

.fifty {
    float: left;
    width: 48%;
    margin-right: 2%;
}

.fourty {
    float: left;
    width: 38%;
    margin-right: 2%;
}

.thirty {
    float: left;
    width: 31%;
    margin-right: 2%;
}

.twentyfive {
    width: 23.5%;
    float: left;
    margin-right: 2%;
}

.twentfive.fst {
    margin-left: 0;
}

form .fifty {
    margin-top: 0;
}


.box {
    padding: 0;
    background-color: #fff;
    margin-bottom: 1.7em;
    border-radius: 5px;
}

.merc-details,
.trans-details {
    padding-left: 1.5em;
    padding-bottom: 1em;
}



/* --- Responsive --- */

.show-mobile {
    display: none;
}

.show-tablet {
    display: none;
}

.mobile-btn {
    display: none;
}



/* --- padding ---*/
.bigvertical-padding {
    padding: 2em 0;
}



/* -- Shipping Options - Genreic option Select -- */

div.option.row {
    padding: .5em;
    margin-bottom: .2em;
    background: #006a94;
    color: #fff;
}

div.option .selector,
div.option .label {
    width: auto;
    float: left;
    margin-right: 1em;
    font-weight: normal;
}

div.option .amount {
    float: right;
}




/* --- --- Box Styling --- --- */

.box .captureForm {
    margin: 7px;
}

    .box .captureForm td {
        padding: 2px;
        line-height: 34px;
    }

.box table, .box p {
    margin: 10px;
}

.box td {
    background-color: #fff;
    vertical-align: top;
}

.box .border {
    border: 2px solid;
}

.light-grid table {
    border-collapse: collapse;
    margin: 0;
    padding: 0;
}

.light-grid td, .light-grid th {
    padding: 3px;
    background-color: #fff;
    border-bottom: 1px dotted #ccc;
}

.light-grid .total td {
    border-bottom: 0;
    font-weight: 700;
}

.msOddRow {
    background-color: #ccc;
}

.whiteButton {
    margin-top: 10px;
    color: #006A94;
    border-color: #006A94;
}

    .whiteButton:hover {
        color: #006A94;
        border-color: #006A94;
    }


div.section div.box {
    float: left;
    width: 100%;
    margin: 0 0 12px 0;
}


.box h1 {
    background-position: 5px 3px;
    background-repeat: no-repeat;
    padding: .272em .227em .409em 1.8em;
    font-size: 1.4em;
    margin: 0;
    margin-bottom: .75em;
    color: #fff;
}

.box h2 {
    padding: 10px;
    margin: 0;
    font-weight: 700;
}

.box-grid {
    border-collapse: collapse;
    width: 450px;
    margin: 0;
}

    .box-grid .cleartd {
        background-color: #fff !Important;
        text-align: right;
        padding: 0;
        border-bottom: 0;
    }

    .box-grid td {
        color: #fff;
        padding-left: 5px;
        padding-top: 7px;
        padding-bottom: 7px;
        border-bottom: 7px solid #fff;
    }

    .box-grid tr td:last-child {
        padding-right: 7px;
    }

    .box-grid th {
        background-color: #fff;
        padding-left: 5px;
        padding-top: 7px;
        padding-bottom: 7px;
        border-bottom: 7px solid #fff;
    }


/* --- --- Header --- --- */

#header {
    background-color: #006A94;
}

body.hpage #header {
    background: #fff;
    -webkit-box-shadow: 0 2px 3px #006A94;
    -moz-box-shadow: 0 2px 3px #006A94;
    box-shadow: 0 2px 3px #006A94;
    width: 100%;
    position: relative;
    z-index: 12;
}

body.hpage #personalHome #header {
    -webkit-box-shadow: 0 2px 3px #D0DEE4;
    -moz-box-shadow: 0 2px 3px #D0DEE4;
    box-shadow: 0 2px 3px #D0DEE4;
}

#header-content {
    padding-top: 10px;
}




/* --- --- Page Title --- --- */

#page-title {
    margin-bottom: .72em;
}

    #page-title h1 {
        border: 0;
        color: #006a94;
        padding: 1.3em 0 1em 0;
        margin: 0;
        font-size: 1.4em;
        font-weight: 700;
        text-align: center;
        text-transform: uppercase;
        border-bottom: 1px solid #D7EBF4;
        margin-bottom: 1.5em;
    }

        #page-title h1:empty {
            display: none;
        }

        #page-title h1 span.wuser {
            color: #5FAFD2;
        }



/* --- --- PayNow Intro --- --- */

.intro {
    border-bottom: 1px solid #D7EBF4;
    padding-bottom: 1em;
}

    .intro .blurb {
        padding-top: .8em;
        font-size: 1.3em;
        color: #006A94;
    }

        .intro .blurb p {
            margin: 0;
        }

        .intro .blurb a {
            color: #006A94;
            text-decoration: underline;
        }

    .intro .ptypes {
        float: left;
        margin-right: 2em;
    }



/* --- Inputs --- */

input[type=text], input[type=date], input[type=time], input[type=number], input[type=email], input[type=tel], input[type=password], textarea, select {
    background: #FFF;
    color: #2d3040;
    border: solid 1px #b6bac0;
    padding: 6px 12px;
    line-height: 1.43;
    font-size: 14px;
    border-radius: 5px;
    box-shadow: inset 0 1px 2px 0 rgba(182, 186, 191, .5);
}

    input[type=text].number {
        width: 35px;
    }

    input[type=text].numberbig {
        width: 70px;
    }

input[type=text], input[type=password] { /* min-width: 180px; */
}


p, ul {
    margin-bottom: 10px;
    line-height: 18px;
}

td.fieldHeader, tr.fieldHeader td {
    text-align: right;
    font-weight: 700;
    vertical-align: top;
    padding-right: 5px;
    line-height: 34px;
}

tr.tableTotals td {
    font-weight: 700;
}

td b {
    display: block;
    margin-bottom: 5px;
}

.rightColumn > h1,
.rightColumn > h2,
.leftColumn > h1,
.leftColumn > h2 {
    margin-top: 0;
}


table.warning {
    background-color: #fff;
    border-collapse: collapse;
    border: solid 1px #F88;
}

    table.warning th {
        color: #600;
        background-color: #F88;
        text-align: center;
        vertical-align: middle;
        padding: 0 5px;
        border-bottom: solid 1px #F88;
        height: 24px;
    }

    table.warning td {
        padding: 5px;
        border-bottom: 1px dotted #AAA;
    }


p.frame {
    margin: 0 0 5px;
    padding: 5px;
    border: 1px solid #CCC;
}


.error {
    color: Red;
}

div#title {
    display: block;
    float: left;
    text-align: left;
}


.field-validation-error {
    color: red;
}

.input-validation-error {
    border: 1px solid #F66 !important;
    background-color: #FEE !important;
}

.validation-summary-errors {
    --padding: 5px;
    --border: dotted 1px red;
    font-weight: 700;
    color: red;
    --background: #FEE;
}

th {
    vertical-align: top;
    text-align: left;
    font-weight: 700;
}


.headTitle {
    color: #fff;
    font-size: 28px;
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 10px;
    text-align: right;
    clear: right;
}


.frame {
}







/* --- --- Tooltips --- --- */

.itt {
    background: url(/Content/itt-bg.png) no-repeat 1px 2px;
    display: inline-block;
    *display: inline;
    position: relative;
    top: -5px;
    font-size: .65em;
    font-weight: 700;
    text-decoration: none !important;
    color: #fff !important;
    padding: .1em .8em .1em .8em;
    margin-left: .3em;
}

.fh .itt {
    background-position: 2px 2px;
}

ol.overview .itt {
    background-position: 0 2px;
}

#loginfo .inner.featlist li .itt,
#ovbps .inner.featlist li .itt {
    background-position: 1px 2px;
    padding: .1em 1em;
}


.ui-tooltip {
    padding: 0;
    position: absolute;
    z-index: 9999;
    max-width: 30em;
    background: #fff;
    color: #000;
    border-radius: 0;
    -webkit-box-shadow: 1px 0 1px #aaa;
    -moz-box-shadow: 1px 0 1px #aaa;
    box-shadow: 1px 0 1px #aaa;
    opacity: 1;
    filter: alpha(opacity=100);
}

body .ui-tooltip {
    border: 1px solid #006A94 !important;
}

.tiphead {
    background-color: #006A94;
    font-size: 14px;
    display: block;
    color: #fff;
    padding: .5em;
    margin-top: 0;
    margin-bottom: .5em;
}

    .tiphead + p {
        margin: 1em;
    }

.feedback-tooltip {
    padding: .8em !important;
}


.tipinfo {
    font-size: 14px;
    font-weight: bold;
    display: block;
    color: #006A94;
    padding: .5em 1em 0;
    margin-top: 0;
    margin-bottom: 0;
}

    .tipinfo + p {
        margin: 0 1em 1em;
    }






/* --- --- SWH Menu --- --- */

ul.swhmenu.hmenu > li > a {
    margin-bottom: 0;
    color: #0086bc;
}

    ul.swhmenu.hmenu > li > a:hover {
        color: #fff;
        background: #5FAFD2;
        border-radius: 15px;
    }

ul.swhmenu.hmenu li a {
    color: #0086bc;
    transition: .2s all ease-out;
}

ul.swhmenu.hmenu li.lst {
    border-bottom: 0 !important;
}

ul.swhmenu.hmenu li.submenu {
    padding: 0;
}


    ul.swhmenu.hmenu li.submenu > a {
        background: url(/Content/icons/smenu.png) no-repeat right 1.25em;
        padding-bottom: 1.65em;
        padding-right: 1.2em;
        cursor: default;
    }

        ul.swhmenu.hmenu li.submenu > a:hover {
            color: #006a94;
        }

    ul.swhmenu.hmenu li.submenu ul {
        border: 0;
        box-shadow: -2px 2px 3px #006a94;
    }

        ul.swhmenu.hmenu li.submenu ul li.flymenu {
            border-bottom: 1px solid #D7EBF4;
        }

            ul.swhmenu.hmenu li.submenu ul li.flymenu > a {
                background: url(/Content/icons/fmenu.png) no-repeat 9.2em center;
                padding-right: 3em;
                cursor: default;
            }

                ul.swhmenu.hmenu li.submenu ul li.flymenu > a:hover {
                    background: #5fafd2 url(/Content/icons/fmenu-hover.png) no-repeat 9em center;
                }

            ul.swhmenu.hmenu li.submenu ul li.flymenu ul {
                margin: -2.5em 0 0 11.13em;
                width: 15em;
            }

                ul.swhmenu.hmenu li.submenu ul li.flymenu ul li {
                    border-bottom: 1px solid #D7EBF4;
                }

                    ul.swhmenu.hmenu li.submenu ul li.flymenu ul li a:hover {
                        background-color: #5fafd2;
                    }







/* --- --- Branding - Logos --- --- */

#header-content a.logo, #sec-footermenu a.logo {
    display: block;
    width: 190px;
    height: 50px;
    float: left;
    margin-top: 4px;
}

body.hpage #header #header-content a.logo {
    background: url(/Content/icons/paynow-logo-blue.png) no-repeat;
}

body.hpage #sec-footermenu .container a.logo {
    background: url(/Content/icons/paynow-logo-blue.png) no-repeat;
}

#header-content a.logo {
    background: url(/Content/icons/paynow-logo.svg) no-repeat;
}

#sec-footermenu .container a.logo {
    background: url(/Content/icons/paynow-logo-blue.svg) no-repeat;
}

html.no-svg #header-content a.logo {
    background: url(/Content/icons/paynow-logo.png) no-repeat;
}

html.no-svg #sec-footermenu .container a.logo {
    background: url(/Content/icons/paynow-logo-blue.png) no-repeat;
}


#header-content a.logo h1,
#sec-footermenu .container a.logo h1 {
    display: none !important;
}







/* --- --- Landing Page Tab Styling --- --- */



#int-select {
    float: left;
}

    #int-select ul {
        margin: 0;
        padding-left: 15em;
        margin-top: .32em;
        margin-bottom: -.32em;
    }


        #int-select ul li {
            display: inline-block;
            padding: 0;
            border: 1px solid #ddd;
            border-bottom: 0;
            border-radius: 3px 3px 0 0;
            color: #bbb;
            font-weight: 700;
            letter-spacing: .15em;
        }

            #int-select ul li a {
                display: block;
                padding: 1em;
            }

            #int-select ul li:hover {
                cursor: pointer;
            }

            #int-select ul li a {
                text-decoration: none;
            }

                #int-select ul li a:focus {
                    outline: none;
                }

            #int-select ul li small {
                position: absolute;
                display: block;
                font-size: .6em;
                color: #bbb;
                bottom: 0;
            }

#personalHome #int-select ul li.pers {
    background: #FCFCFC;
    border: 1px solid #ddd;
    border-bottom: 6px solid #FCFCFC;
    color: #fff;
    box-shadow: inset 0 2px 2px #D0DEE4;
    cursor: default;
}

#businessHome #int-select ul li.bus {
    background: #5fafd2;
    border: 1px solid #5fafd2;
    border-bottom: 6px solid #5fafd2;
    color: #fff;
    box-shadow: inset 0 2px 2px #006A94;
    cursor: default;
}

    #businessHome #int-select ul li.bus a {
        color: #fff;
    }


.hpage .content section {
    display: none;
    margin: 0 auto;
}

    .hpage .content section:before,
    .hpage .content section:after {
        content: '';
        display: table;
    }

    .hpage .content section:after {
        clear: both;
    }

.no-js .content section {
    display: block;
    padding-bottom: 2em;
    border-bottom: 1px solid #47a3da;
}

.hpage .content section.content-current {
    display: block;
}








/* --- --- Landing Page - User Actions --- --- */

.uaction {
    float: right;
}

    .uaction ul {
        margin-top: .5em;
    }

        .uaction ul li {
            display: inline-block;
            *display: inline;
            margin-top: .2em;
        }

            .uaction ul li a {
                padding: .5em 1em;
                color: #fff;
                font-weight: 700;
                font-size: .9em;
                border: 1px solid;
                border-bottom: 3px solid;
                border-radius: 3px 3px 4px 4px;
                transition: .2s all ease-out;
            }

                .uaction ul li a:hover {
                    color: #fff;
                    text-decoration: none;
                }

                .uaction ul li a.signup {
                    background: #e6873d;
                    border-color: #e49253;
                    border-bottom-color: #b55f1c;
                    text-shadow: 1px 1px 1px #444;
                }

                    .uaction ul li a.signup:hover {
                        background: #EFB181;
                    }

                .uaction ul li a.login {
                    color: #5fafd2;
                    background: #fff;
                    border-color: #5fafd2;
                }

                    .uaction ul li a.login:hover {
                        color: #fff;
                        background: #5fafd2;
                    }




/* --- --- Landing Page - Hero --- --- */

.hero {
    box-shadow: inset 0 -2px 3px #006a94;
    background: #7DBEDA url(/Content/img/hero-bg.jpg) repeat-x;
}

#personalHome .hero {
    box-shadow: inset 0 -2px 3px #D0DEE4;
    background: #F3F7FA url(/Content/img/personal_hero.jpg) repeat-x;
}

.hero .container {
    margin: 0 auto;
    padding: 2em 0;
}

.hero h2 {
    font-size: 2em;
    font-weight: 700;
    line-height: 1em;
}

.personal h2,
.personal-intro {
    text-align: center;
}

.personal-intro {
    font-size: 2em;
    font-weight: bold;
    font-style: italic;
    line-height: 1.3em;
    color: #0086bc;
}

    .personal-intro span {
        font-size: .5em;
    }

.hero-form {
    width: 33%;
    margin-right: 3%;
    float: left;
    padding: 1em 0;
    border-radius: 6px;
    color: #fff;
}

#personalHome .hero-info,
#personalHome .hero-form {
    color: #0086bc;
}


.hero-form h3 {
    font-size: 1.8em;
}

.hero-form p {
    text-align: center;
    display: block;
    margin-top: .5em;
    font-weight: 700;
    font-size: 2em;
    font-style: italic;
}

    .hero-form p.reg-message {
        background: #0086BC;
        background: rgba(0,134,188,.7);
        padding: 2em;
        margin-top: 0;
        font-size: 1.5em;
        font-weight: 700;
        border-bottom: 4px solid #0086bc;
        border-radius: 6px;
    }

.hero-form.mform {
    display: none;
}

.hero-form form {
    padding: 1em;
    border: 2px solid #fff;
    background: rgba(95,175,210,.5);
    box-shadow: 0 0 2px #006A94;
    border-radius: 6px;
    color: #fff;
}

.hero-form fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    margin-bottom: 1em;
}

.hero-form .input-group {
    width: 48%;
    float: left;
    margin-right: 4%;
    margin-bottom: 0;
}

    .hero-form .input-group input {
        width: 92%;
        height: 2em;
        border-color: #ccc;
    }

        .hero-form .input-group input[placeholder] {
            color: #a9a9a9;
        }

    .hero-form .input-group select#business_type {
        width: 99%;
        padding: .64em;
        border-color: #ccc;
    }

    .hero-form .input-group.last {
        margin-right: 0;
    }

.hero-form button {
    width: 100%;
    padding: 1em;
    border: 1px solid #E49253;
    background: #e6873d;
    border-bottom: 4px solid #b55f1c;
    border-radius: 6px 6px 8px 8px;
    color: #fff;
    font-weight: 700;
    font-size: 1.2em;
    text-shadow: 1px 1px 1px #444;
}

    .hero-form button:hover {
        background: #e99554;
    }

    .hero-form button em {
        display: none !important;
    }




/* --- --- Mobile Recharge --- --- */


#mobile-recharge {
    padding: 1em;
    background: #f6f9fb;
    background: rgba(240, 247, 250, 0.6);
    box-shadow: none;
    border: 1px solid #b0d0df;
    border-radius: 6px;
    color: #fff;
}

    #mobile-recharge .hero-icon {
        width: 60px;
        height: 60px;
        float: left;
        background: url(/Content/icons/mobile-recharge-icons.png) no-repeat top left;
        margin: .5em .5em .5em 0;
        overflow: hidden;
    }

    #mobile-recharge h2 {
        font-size: 1.9em;
        font-weight: 700;
        line-height: .7em;
        text-align: left;
        margin-top: 0;
        margin-bottom: .5em;
        padding: 1em 0 .4em 0;
        border-bottom: 1px solid #d7ebf4;
        color: #0086bc;
    }

    #mobile-recharge span.dr-info {
        display: inline-block;
        *display: inline;
        color: #00587b;
        font-size: .5em;
        font-weight: 500;
    }

    #mobile-recharge .dr-operator-logos {
        padding-bottom: 1em;
        margin-bottom: 1em;
        border-bottom: 1px solid #d7ebf4;
    }

        #mobile-recharge .dr-operator-logos img {
            width: 100%;
        }

    #mobile-recharge .input-group label {
        font-weight: normal;
    }

    #mobile-recharge .input-group {
        width: 48%;
        float: left;
        margin-right: 4%;
        color: #00587b;
    }

        #mobile-recharge input[type=text].number,
        #mobile-recharge .input-group input {
            width: 92%;
            height: 2em;
            border-color: #b0d0df;
        }

            #mobile-recharge .input-group input[placeholder] {
                color: #a9a9a9;
            }

    #mobile-recharge input[type=checkbox] {
        margin-right: .5em;
    }

    #mobile-recharge .input-group.last {
        margin-right: 0;
    }


    #mobile-recharge .input-group.amount {
        width: 38%;
        float: left;
    }

    #mobile-recharge .input-group.mobile-number {
        width: 58%;
        float: left;
    }

        #mobile-recharge .input-group.mobile-number label {
            margin-left: 4em;
            width: 90%;
        }

    #mobile-recharge .input-group.email {
        width: 90%;
    }

    #mobile-recharge #additional-details .input-group {
        width: 100%;
    }

    #mobile-recharge button {
        height: auto;
        padding: 1em;
        border: 1px solid #E49253;
        background: #e6873d;
        border-bottom: 4px solid #b55f1c;
        border-radius: 6px 6px 8px 8px;
        color: #fff;
        font-weight: 700;
        font-size: 1.2em;
        text-shadow: 1px 1px 1px #444;
    }

        #mobile-recharge button:hover {
            background: #e99554;
            cursor: pointer;
        }

    #mobile-recharge button {
        width: 100%;
    }

    #mobile-recharge.dform img {
        width: 100%;
    }

    #mobile-recharge .prefix-wrapper {
        border: 1px solid #b0d0df;
        text-align: right;
    }

        #mobile-recharge .prefix-wrapper input {
            border: none;
            border-left: 1px solid #b0d0df;
        }

    #mobile-recharge .input-group .input-prefix {
        display: inline-block;
        *display: inline;
        text-align: center;
    }

    #mobile-recharge .input-group.amount .input-prefix {
        width: 30%;
    }

    #mobile-recharge .input-group.mobile-number .input-prefix {
        width: 28%;
    }

    #mobile-recharge .input-group.amount input {
        width: 50%;
    }

    #mobile-recharge .input-group.mobile-number input {
        width: 60%;
    }








.hero-info {
    float: left;
    width: 64%;
    color: #fff;
}


    .hero-info .info-row {
        margin-bottom: 1em;
    }

.personal.hero-info .info-row { /*border-bottom: 1px solid #91C8E0;*/
    margin-bottom: 2em;
}

    .personal.hero-info .info-row.lset {
        border-bottom: none;
    }


.hero-info .info-row [class^=info] {
    width: 47%;
    margin-left: 3%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
}


    .hero-info .info-row [class^=info] h4 {
        font-size: 18px;
        font-weight: 700;
    }

.hero-info .info-row .info-third {
    width: 31.3%;
    padding: 1em;
    margin-left: 0;
    border: 2px solid #fff;
    background: rgba(95,175,210,.5);
    box-shadow: 0 0 2px #006A94;
    border-radius: 6px;
}

    .hero-info .info-row .info-third.center {
        margin-left: 3%;
        margin-right: 3%;
    }

    .hero-info .info-row .info-half .hero-icon,
    .hero-info .info-row .info-third .hero-icon {
        width: 60px;
        height: 60px;
        float: left;
        background: url(/Content/icons/hero-icons.png) no-repeat top left;
        margin: .5em 1.5em 5em 0;
        overflow: hidden;
    }

.hero-info .info-row .hero-icon.setup {
    background-position: -60px;
}

.hero-info .info-row .hero-icon.fastpay {
    background-position: -120px;
}

.hero-info .info-row .hero-icon.eskrow {
    background-position: -180px;
}

.hero-info .info-row .hero-icon.secure {
    background-position: -240px;
}

.hero-info .info-row .hero-icon.vf-merch {
    background-position: -300px;
    width: 72px;
    margin-right: 1em;
}

.hero-info .info-row.fset {
    padding-top: 1.2em;
}

.hero-info ul.merchant-list {
    padding-left: 0;
    float: left;
}

    .hero-info ul.merchant-list li {
        display: inline-block;
        width: 47%;
        line-height: 1em;
        margin-right: 2%;
        border-radius: 3px;
        margin-bottom: .3em;
    }

        .hero-info ul.merchant-list li a {
            letter-spacing: .02em;
        }

            .hero-info ul.merchant-list li a:hover {
                cursor: pointer;
            }



/* --- Personal Tab Styling --- */

#personalHome .info-half {
    padding: 1em;
    border: 1px solid #91c8e0;
    border-radius: 4px;
}

#personalHome .hero-info h4 {
    font-size: 20px;
    text-align: left;
}

#personalHome .hero-info a {
    text-decoration: none;
}

    #personalHome .hero-info a:hover .info-half {
        background: #ffffff;
    }

#personalHome #sec-mecinfo {
    margin: 3.3em 0 3.5em 0;
}

.pay-bills a, a .pay-bills {
    color: #95a5a6;
}

.pay-comms a, a .pay-comms {
    color: #f39c12;
}

.pay-utils a, a .pay-utils {
    color: #3498db;
}

.pay-ent a, a .pay-ent {
    color: #e74c3c;
}

.pay-insurance a, a .pay-insurance {
    color: #1abc9c;
}

.pay-donations a, a .pay-donations {
    color: #9b59b6;
}


#personalHome #sec-banklogos {
    display: none;
}



/* ------- 
------------------    Billpayment Category Pages     ------------*/

.bill-category-page {
    margin-top: 3em;
}

    .bill-category-page h1 {
        font-size: 1.4em;
        text-transform: uppercase;
        font-weight: bold;
        line-height: 0.8em;
        padding: 0 0 1em 0;
    }

    .bill-category-page .bp-merchants-category {
        position: relative;
        z-index: 1;
        min-height: 36em;
        margin-top: 0;
        padding-bottom: 1em;
        margin-bottom: 5em;
        border-radius: .3em 0 .3em .3em;
    }

.bp-merchants-category {
    float: left;
    width: 74%;
    padding-right: 2%;
    margin: 3em 0;
    color: #6A6A6A;
    border-right: 2px solid;
}

.bp-short-details {
    display: inline-block;
    *display: inline;
    vertical-align: top;
    text-align: center;
    border: 1px solid #eee;
    padding: .6em;
    margin: 2% 1%;
    width: 200px;
}

    .bp-short-details img {
        width: 100%;
    }

.bp-company-name {
    font-weight: bold;
}

.bp-payment-link {
    font-size: .8em;
}



/* -- Category Tabs -- */

.category-tabs {
    float: left;
    width: 24%;
    margin-left: -2px;
}

    .category-tabs h2 {
        padding: 1em;
        margin-top: 0;
        font-size: 0.88em;
        margin-bottom: .5em;
        border: 1px solid #D7EBF4;
        font-weight: bold;
        border-radius: 0 .2em .2em 0;
        color: #4BA5CC;
    }

        .category-tabs h2:hover {
            background: #FCFCFC;
        }

    .category-tabs a:hover {
        text-decoration: none !important;
    }



/* -- Comms -- */

.bill-category-page.comms h1 {
    color: #f39c12;
}

.bill-category-page.comms .bp-merchants-category {
    border-color: #f39c12;
}

.bill-category-page.comms .bp-short-details {
    border: 1px solid #F2DBB5;
}

.bill-category-page.comms a {
    color: #f39c12;
}

.bill-category-page.comms .category-tabs .pay-comms {
    border: 2px solid #f39c12;
    background: #ffffff;
    color: #f39c12;
    border-left: none;
    position: relative;
    z-index: 2;
}

.category-tabs a:hover h2.pay-comms {
    color: #f39c12;
}

.category-tabs a:hover span.billpay-mini-icon.comms {
    background-position: 0px 0px;
}

.bill-category-page.comms .category-tabs span.billpay-mini-icon.comms {
    background-position: 0px 0px;
}


/* -- Utils -- */

.bill-category-page.utils h1 {
    color: #3498db;
}

.bill-category-page.utils .bp-merchants-category {
    border-color: #3498db;
}

.bill-category-page.utils .bp-short-details {
    border: 1px solid #3498db;
}

.bill-category-page.utils a {
    color: #3498db;
}

.bill-category-page.utils .category-tabs .pay-utils {
    border: 2px solid #3498db;
    background: #ffffff;
    color: #3498db;
    border-left: none;
    position: relative;
    z-index: 2;
}

.category-tabs a:hover h2.pay-utils {
    color: #3498db;
}

.category-tabs a:hover span.billpay-mini-icon.utils {
    background-position: 0px -24px;
}

.bill-category-page.utils .category-tabs span.billpay-mini-icon.utils {
    background-position: 0px -24px;
}



/* -- Insurance -- */

.bill-category-page.insurance h1 {
    color: #1abc9c;
}

.bill-category-page.insurance .bp-merchants-category {
    border-color: #1abc9c;
}

.bill-category-page.insurance .bp-short-details {
    border: 1px solid #BBDDD6;
}

.bill-category-page.insurance a {
    color: #1abc9c;
}

.bill-category-page.insurance .category-tabs .pay-insurance {
    border: 2px solid #1abc9c;
    background: #ffffff;
    color: #1abc9c;
    border-left: none;
    position: relative;
    z-index: 2;
}

.category-tabs a:hover h2.pay-insurance {
    color: #1abc9c;
}

.category-tabs a:hover span.billpay-mini-icon.insurance {
    background-position: 0px -48px;
}

.bill-category-page.insurance .category-tabs span.billpay-mini-icon.insurance {
    background-position: 0px -48px;
}



/* -- Entertainment -- */

.bill-category-page.ent h1 {
    color: #e74c3c;
}

.bill-category-page.ent .bp-merchants-category {
    border-color: #e74c3c;
}

.bill-category-page.ent .bp-short-details {
    border: 1px solid #E4CBC8;
}

.bill-category-page.ent a {
    color: #e74c3c;
}

.bill-category-page.ent .category-tabs .pay-ent {
    border: 2px solid #EC9C98;
    background: #ffffff;
    color: #e74c3c;
    border-left: none;
    position: relative;
    z-index: 2;
}

.category-tabs a:hover h2.pay-ent {
    color: #e74c3c;
}

.category-tabs a:hover span.billpay-mini-icon.ent {
    background-position: 0px -72px;
}

.bill-category-page.ent .category-tabs span.billpay-mini-icon.ent {
    background-position: 0px -72px;
}




/* -- Donations -- */

.bill-category-page.donations h1 {
    color: #9b59b6;
}

.bill-category-page.donations .bp-merchants-category {
    border-color: #9b59b6;
}

.bill-category-page.donations .bp-short-details {
    border: 1px solid #D7C7DD;
}

.bill-category-page.donations a {
    color: #9b59b6;
}

.bill-category-page.donations .category-tabs .pay-donations {
    border: 2px solid #C498D3;
    background: #ffffff;
    color: #9b59b6;
    border-left: none;
    position: relative;
    z-index: 2;
}

.category-tabs a:hover h2.pay-donations {
    color: #9b59b6;
}

.category-tabs a:hover span.billpay-mini-icon.donations {
    background-position: 0px -96px;
}

.bill-category-page.donations .category-tabs span.billpay-mini-icon.donations {
    background-position: 0px -96px;
}


/* -- Other Services -- */

.bill-category-page.bills h1 {
    color: #95a5a6;
}

.bill-category-page.bills .bp-merchants-category {
    border-color: #95a5a6;
}

.bill-category-page.bills .bp-short-details {
    border: 1px solid #D4D4D4;
}

.bill-category-page.bills a {
    color: #95a5a6;
}

.bill-category-page.bills .category-tabs .pay-bills {
    border: 2px solid #95a5a6;
    background: #ffffff;
    color: #95a5a6;
    border-left: none;
    position: relative;
    z-index: 2;
}

.category-tabs a:hover h2.pay-bills {
    color: #95a5a6;
}

.category-tabs a:hover span.billpay-mini-icon.bills {
    background-position: 0px -120px;
}

.bill-category-page.bills .category-tabs span.billpay-mini-icon.bills {
    background-position: 0px -120px;
}



/* --- --- Category Footer  --- --- */


.category-footer {
    padding: 2em 0;
}

    .category-footer .link-block {
        width: 10.4em;
        float: left;
        margin-right: 1.15em;
    }

        .category-footer .link-block.lst {
            margin-right: 0;
        }

    .category-footer h3 {
        font-size: 1.1em;
        font-weight: bold;
        color: #0086bc;
        border-bottom: 1px solid;
        padding-bottom: .5em;
        margin-bottom: 1em;
        min-height: 3em;
    }

    .category-footer .pay-bills h3 {
        border-color: #95a5a6;
    }

    .category-footer .pay-comms h3 {
        border-color: #f39c12;
    }

    .category-footer .pay-utils h3 {
        border-color: #3498db;
    }

    .category-footer .pay-ent h3 {
        border-color: #e74c3c;
    }

    .category-footer .pay-insurance h3 {
        border-color: #1abc9c;
    }

    .category-footer .pay-donations h3 {
        border-color: #9b59b6;
    }

    .category-footer h3 a:hover {
        text-decoration: none;
    }

    .category-footer ul {
        padding-left: 0;
    }

    .category-footer h3 a {
        color: #006a94;
    }

    .category-footer ul a {
        color: #006A94;
    }






/* --- --- Landing Page - Logo-Slider --- --- */

#sec-banklogos {
    background: #f4f4f4;
    border-bottom: 1px solid #eee;
    margin-bottom: 3.3em;
}

    #sec-banklogos .container {
        padding: 1em 0;
    }

.lslider {
    margin: 20px auto;
}

    .lslider .als-item {
        text-align: center;
    }

        .lslider .als-item img {
            display: block;
            margin: 0 auto;
            vertical-align: middle;
        }

.als-container {
    position: relative;
    width: 100%;
    margin: 0 auto;
    z-index: 0;
}

.als-viewport {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    padding-top: 1em;
    padding-bottom: 1em;
    border-right: 1px solid #eee;
    border-left: 1px solid #eee;
}

.als-wrapper {
    position: relative;
    list-style: none;
    margin: 0;
}

.als-item {
    position: relative;
    display: block;
    text-align: center;
    float: left;
}



/* --- --- Landing Page Seconday Info --- --- */

#sec-mecinfo ul.basic-info {
    margin: 0;
    padding: 0;
    display: table-cell;
}

    #sec-mecinfo ul.basic-info li {
        display: inline-block;
        *display: inline;
        vertical-align: top;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width: 23.1%;
        min-height: 18em;
        margin-right: 2%;
        padding: 1em;
        border: 1px solid #D7EBF4;
        color: #0086bc;
        font-weight: 700;
        font-size: 1.5em;
        text-align: center;
    }

        #sec-mecinfo ul.basic-info li span {
            display: block;
            margin-top: 1em;
            margin-bottom: 1.5em;
            font-size: .6em;
            font-weight: 400;
        }

#sec-mecinfo .container ul.basic-info li a.btn {
    font-size: .6em;
}

#sec-mecinfo ul.basic-info li span.info-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto;
    margin-bottom: 1em;
    background: url(/Content/icons/info-icons.png) no-repeat;
}

#sec-mecinfo ul.basic-info li span.dev {
    background-position: -80px 0;
}

#sec-mecinfo ul.basic-info li span.fees {
    background-position: -160px 0;
}

#sec-mecinfo ul.basic-info li span.b2b {
    background-position: -240px 0;
}

#sec-mecinfo ul.basic-info li.last {
    margin-right: 0;
}


/* -- Personal Sec Info -- */
#personalHome #sec-mecinfo ul.basic-info li {
    min-height: 11em;
}

#personalHome #sec-mecinfo li span.instant {
    background-position: 0 -80px;
}

#personalHome #sec-mecinfo li span.secure {
    background-position: -80px -80px;
}

#personalHome #sec-mecinfo li span.convinient {
    background-position: -160px -80px;
}

#personalHome #sec-mecinfo li span.receipts {
    background-position: -240px -80px;
}

/* removing bank logos */
#personalHome #sec-banklogos .container {
    display: none;
}



/* --- --- Mega - Footer Menu --- --- */
#sec-megafooter {
    background: #fcfcfc;
    margin-bottom: -3.5em;
    border-bottom: 1px solid #ffffff;
    border-top: 1px solid #eee;
}

/* --- --- Footer - Menu --- --- */
#sec-footermenu {
    background: #fbfbfb;
    margin-top: 3.5em;
    border-bottom: 1px solid #eee;
    border-top: 1px solid #eee;
}

    #sec-footermenu .container {
        padding: 1.5em 0;
    }

    #sec-footermenu ul.footermenu {
        display: inline-block;
        *display: inline;
        margin: 0;
        padding: 0;
    }

        #sec-footermenu ul.footermenu li {
            display: inline-block;
            *display: inline;
            padding: 0.75em;
        }

            #sec-footermenu ul.footermenu li:first-child {
                padding-left: 0;
            }

            #sec-footermenu ul.footermenu li a {
                color: #006A94;
            }

    #sec-footermenu a.logo {
        float: right;
    }

.hpage #sec-footermenu .container {
    border: none;
    margin-top: 0;
    margin-bottom: 0;
}

#footer {
    height: auto;
    clear: both;
    background: #f8f8f8;
    color: #999;
    padding: 1em 0;
    border-top: 1px solid #ffffff;
}

#footer-content {
    text-align: center;
}




::-webkit-input-placeholder {
    color: #eee !important;
}

.placeholder {
    color: #999 !important;
}




/* ------- 
------------------    Log-in - Page     ------------*/


#login-container {
    margin: 5em 0 2em;
}

#otpform h2, #loginform h2 {
    color: #5FAFD2;
    font-weight: 700;
    padding: .8em 0;
    margin-bottom: 1em;
    border-bottom: 1px solid #D7EBF4;
    text-transform: uppercase;
}

    #otpform h2 small {
        text-transform: lowercase;
    }

#otpform a, #loginbox a {
    color: #006A94;
}

#otpform .input-group input[type=text], #otpform .input-group input[type=email], #otpform .input-group input[type=password], #otpform .input-group textarea, #otpform .input-group select,
#loginbox .input-group input[type=text], #loginbox .input-group input[type=email], #loginbox .input-group input[type=password], #loginbox .input-group textarea, #loginbox .input-group select {
    border: 1px solid #0086BC;
}


.or-box {
    position: relative;
    padding: .5em;
    background: #fff;
    color: #5FAFD2;
    border: 1px solid #D7EBF4;
    top: -100px;
    left: 116.5%;
    z-index: 3;
}

.acc-invite {
    margin-top: 1em;
}

.otp-btn {
    padding: .2em .5em 0.3em;
    margin-top: -.2em;
}

.acc-invite h4 {
    margin-bottom: 1em;
    color: #000;
    font-weight: 700;
}

.acc-invite .btn {
    display: inline-block;
    margin-right: .5em;
    margin-top: -0.7em;
    padding-top: .25em;
}

#loginbox button {
    margin-top: .5em;
    margin-left: -.1em;
}

.loghalf {
    width: 46%;
    float: left;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

    .loghalf.fst {
        border-right: 1px solid #D7EBF4;
        padding-right: 8%;
        margin-right: 8%;
    }



/* --- About - Partial --- */

#customer-faq {
    padding: 2em 0;
}

    #customer-faq a {
        color: #006A94;
    }

    #customer-faq > .fst, #customer-faq > .lst {
        width: 50%;
        float: left;
    }

#sec-seals ul.logos {
    padding-left: 0;
}

    #sec-seals ul.logos li {
        display: inline-block;
        *display: inline;
        margin-right: 1%;
        width: 21%;
    }



/* --- Feel safe --- */

#feel-safe #sec-seals {
    padding-top: 0;
    border: none;
}

#feel-safe a {
    color: #006A94;
}



/* --- Accordion --- */

.accordion {
    margin-top: 0;
}

    .accordion dt {
        border: 1px solid #D7EBF4;
        border-bottom: 0;
    }

    .accordion dd {
        padding: .8em;
        border: 1px solid #D7EBF4;
        border-bottom: 0;
        margin-left: 0;
    }

        .accordion dt:last-of-type, .accordion dd:last-of-type {
            border-bottom: 1px solid #D7EBF4;
        }

    .accordion dt a {
        background: url(/Content/expand_icon.png) no-repeat 2% center;
        padding: .7em 3em;
        text-decoration: none;
        outline: none;
    }

        .accordion dt a.open {
            background: url(/Content/contract_icon.png) no-repeat 2% center;
        }

        .accordion dt a.closed {
            background: url(/Content/expand_icon.png) no-repeat 2% center;
        }

    .accordion.no-plus dt a {
        background: none;
        padding: .7em;
    }

    .accordion dt a:hover, .accordion dt a.open {
        background-color: #F3FAFD;
    }

    .accordion dt a, .accordion dd a {
        display: block;
        color: #0086bc;
    }

    .accordion dd {
        border-top: 0;
    }

        .accordion dd:last-of-type {
            border-top: 1px solid white;
            position: relative;
            top: -1px;
        }
/*.accordion ol { padding-left: 30px; padding-right: 10px; }*/






/* --- Info Boxes --- */

.box-transactionhistory, .box-help {
    width: 49%;
    float: left;
}

.box-transactionhistory {
    margin-right: 1.55%;
}



/* --- Register - Interest --- */

.register-interest form {
    width: 60%;
}


/* --- Logged - Home --- */

.logged-home {
    margin: 5em 0;
}

    .logged-home h1 {
        font-size: 2em;
        padding: 1em;
        padding-left: 0;
        border-radius: 5px 5px 0 0;
        font-weight: 700;
    }

    .logged-home h4 {
        font-size: 1.1em;
        padding: .5em;
        border: 1px solid #E3EFF6;
        padding-bottom: .7em;
        margin-bottom: .5em;
    }

        .logged-home h4 a.itt {
            float: right;
            top: 0;
        }

    .logged-home h1 {
        color: #006a94;
        font-weight: 700;
    }

    .logged-home h4 a {
        color: #006a94;
        text-decoration: none;
    }



span[class^="action-icon"] {
    display: block;
    float: left;
    background: url(/Content/icons/action_icons.svg);
    width: 24px;
    height: 24px;
    padding: 0;
    margin-right: 1em;
}

html.no-svg span[class^="action-icon"] {
    background: url(/Content/icons/action_icons.png);
}



span.action-icon-payment-request {
    background-position: 0px 0px;
}

span.action-icon-payment-button {
    background-position: 0px -24px;
}

span.action-icon-payment-methods {
    background-position: 0px -48px;
}

span.action-icon-bank {
    background-position: 0px -72px;
}

span.action-icon-transaction {
    background-position: 0px -96px;
}

span.action-icon-manage {
    background-position: 0px -120px;
}

span.action-icon-info {
    background-position: 0px -144px;
}

span.action-icon-bills {
    background-position: -24px 0px;
}

span.action-icon-verified {
    background-position: -24px -24px;
}

span.action-icon-find {
    background-position: 24px -48px;
}

span.action-icon-cart {
    background-position: 24px -120px;
}

span.action-icon-fees {
    background-position: 24px -96px;
}

span.action-icon-incoming {
    background-position: 24px -144px;
}

span.action-icon-virtual-terminal {
    background-position: 0px -168px;
}


.logged-home.rm .payment-type-title h1 {
    padding-top: 0;
}

.logged-home.rm .payment-type-title a {
    text-decoration: underline;
}


table.payment-type-status tr {
    background: none;
}

table.payment-type-status td {
    font-size: 12px;
    line-height: 12px;
    padding: .2em 0;
}

table.payment-type-status tr:nth-of-type(2n+2) {
    background: #F6FBFF;
}



/* --- Ways to get paid --- */

.payment-type {
    margin: 3em 0;
    padding-bottom: 3em;
    border-bottom: 1px solid #D7EBF4;
}

    .payment-type h2 {
        color: #0086bc;
        font-weight: bold;
        margin-bottom: 1.5em;
    }

    .payment-type h3 {
        font-weight: bold;
    }

    .payment-type a {
        color: #0086bc;
        text-decoration: underline;
    }


.payment-type-title {
    width: 38%;
    float: left;
    padding-right: 4%;
    color: #0086bc;
}

.payment-type-body {
    float: left;
    width: 53%;
    padding-left: 4%;
    border-left: 1px solid #0086bc;
}

.payment-type ul.checklist {
    padding-left: 0;
}


.payment-type span.payment-icon {
    display: block;
    width: 80px;
    height: 100px;
    float: left;
    margin-right: 2em;
    margin-bottom: 1em;
    background: url(/Content/icons/payment-icons.png) no-repeat;
}

.payment-type span.button-generator {
    background-position: -80px 0;
}

.payment-type span.shopping-carts {
    background-position: -160px 0;
}

.payment-type span.developers {
    background-position: -240px 0;
}


.payment-type tr {
    background: #0086bc;
}

.payment-type.template .box-grid {
    width: 100%;
    margin-bottom: 2em;
}

    .payment-type.template .box-grid tr td:last-child {
        text-align: right;
    }


/* --- Payment Types --- */

.box-billpayment > .fifty {
    padding-left: 1.5em;
    margin-bottom: 1em;
}

    .box-billpayment > .fifty span.label {
        float: right;
    }


/* Email Payment Request */
.payment-type-request .payment-type-title p {
    color: #000;
}

.payment-type-request {
    border: none;
}





/* --- Verified Merchant  --- */

.vf-merchants-category {
    margin: 3em 0;
    color: #6A6A6A;
    text-align: center;
}

    .vf-merchants-category h2 {
        color: #0086bc;
        font-weight: bold;
        padding-bottom: 1em;
        border-bottom: 1px solid #D7EBF4;
    }

.vf-short-details {
    display: inline-block;
    *display: inline;
    vertical-align: top;
    text-align: center;
    border: 1px solid #eee;
    padding: .6em;
    margin: 2% 1%;
    width: 150px;
}

.vf-company-name {
    font-weight: bold;
}

.vf-payment-link {
    font-size: .8em;
}





/* --- Bill Payments  --- */


#pay-bills .payment-type-body h4 {
    display: inline-block;
    *display: inline;
    margin-right: 1em;
    margin-bottom: 1em;
    font-weight: bold;
}

#pay-bills span[class^="bank-logo"] {
    margin: 0;
}




/* --- Merchant / Ads  --- */

.merchant-ads-wrap {
    padding: 2em 0;
    margin: 3em 0;
    padding-bottom: 3em;
    border-bottom: 1px solid #D7EBF4;
    padding-top: 0;
}

ul.merchant-ads {
    margin: 0;
    padding: 0;
    display: table-cell;
}

    ul.merchant-ads li {
        display: inline-block;
        *display: inline;
        vertical-align: top;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width: 23.2%;
        margin-right: 2%;
        padding: 0;
        color: #0086bc;
        font-weight: 700;
        font-size: 1.5em;
        text-align: center;
    }

        ul.merchant-ads li.last {
            margin-right: 0;
        }

        ul.merchant-ads li img {
            width: 100%;
        }

        ul.merchant-ads li a.btn {
            font-size: .6em;
            display: none;
            position: relative;
        }







/* --- Documentation / Steps  --- */

.doc-wrap {
    padding-left: 2.5em;
    border-left: 1px solid #D7EBF4;
    margin-bottom: 5em;
}

    .doc-wrap h2 {
        margin-top: -1.5em;
        padding-top: 0;
        color: #0086bc;
        font-weight: bold;
    }

.doc-blurb {
    padding: 2em 1em;
    font-size: 1.3em;
    color: #006A94;
    text-align: center;
    margin-bottom: 2em;
}


.doc-wrap ul {
    border-left: 1px solid #D7EBF4;
}

    .doc-wrap ul li {
        margin-bottom: 1.7em;
    }


span.doc-step {
    display: inline-block;
    *display: inline;
    background: #5FAFD2;
    position: relative;
    left: -3.8em;
    font-size: 1em;
    font-weight: 700;
    text-decoration: none !important;
    color: #fff !important;
    padding: .55em 1em;
    border-radius: 2em;
}





/* --- To Sort --- */


.ui-widget-header {
    border: 1px solid #006A94;
    background: #006A94;
}

.ui-pg-table td {
    background-color: #006A94;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    font-weight: 400;
    color: #006A94;
}



/* --- Fees Tables  --- */

.tfees {
    margin-top: 1em;
    margin-bottom: 1em;
}

    .tfees td {
        padding: .5em 1em;
        border: 1px solid #AFD7E8;
    }

    .tfees tr:nth-of-type(2n+2) {
        background: #F6FBFF;
    }

    .tfees tr td:first-child {
        background: #5FAFD2;
        color: #fff;
    }

    .tfees th {
        padding: .5em 1em;
        border: 1px solid #AFD7E8;
        background-color: #5FAFD2;
        color: #fff;
        font-weight: normal;
    }

    .tfees thead tr:first-child th {
        border: 1px solid #AFD7E8;
        background: none;
    }



/* --- Confirm Payment  --- */

.confirmpayment div[class$="row"] label {
    width: 90%;
    padding: .5em 1em;
    margin-bottom: .5em;
    border: 1px solid #D7EBF4;
    cursor: pointer;
    background-position: 2em center;
}

.confirmpayment div.testing-row label {
    color: #171717 !important;
    background: rgb(253, 230, 188);
    border: 1px solid rgb(255, 201, 103);
}

.confirmpayment div[class$="row"] label.unavailable {
    color: lightgrey;
    cursor: default;
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

    .confirmpayment div[class$="row"] label.unavailable:hover {
        background-color: inherit;
        border-color: inherit;
    }

.confirmpayment div[class$="row"] label:hover {
    background-color: #F3FAFD;
    border-color: #D7EBF4;
}


.confirmpayment .payment-type-logo {
    display: inline-block;
    width: 67px;
    height: 42px;
    text-indent: -999em;
    margin: 0 2px;
    background: url(/Content/img/bank_logos_sprite_67.png) no-repeat;
}

    .confirmpayment .payment-type-logo.lrg {
        display: block;
        width: 138px;
        height: 42px;
        margin: 0 4px;
    }

.visa-row .payment-type-logo {
    background-position: -205px -336px;
}

.mastercard-row .payment-type-logo {
    background-position: -205px -378px;
}

.ecocash-row .payment-type-logo {
    background-position: -138px -42px;
}

.diners-row .payment-type-logo {
    background-position: -138px -378px;
}

.amex-row .payment-type-logo {
    background-position: -205px -294px;
}

.union-row .payment-type-logo {
    background-position: -138px -336px;
}

.vpayments-row .payment-type-logo {
    background-position: -71px -168px;
}

.telecash-row .payment-type-logo {
    background-position: -205px -462px;
}

.onemoney-row .payment-type-logo {
    background-position: -205px -504px;
}

.internetmobilebanking-row .payment-type-logo {
    background-position: -205px -546px;
}

.cashcollection-row .payment-type-logo {
    background-position: -205px -546px;
}

.pos2u-row .payment-type-logo {
    background-position: -138px -546px;
}

.innbucks-row .payment-type-logo {
    background-position: -205px -588px;
}

.eftpay-row .payment-type-logo {
    background-position: -205px -420px;
}

.paygo-row .payment-type-logo {
    background-position: -138px -588px;
}

.payment-method-instruction {
    height: 20px;
    text-transform: uppercase;
    color: white;
    font-size: 10px;
    text-align: center;
    background-color: #3798CC;
    margin-right: 5px;
}

.payment-selector {
    padding-top: .8em;
}

.confirmpayment .payment-type-logo,
.payment-type-name,
.payment-selector,
.payment-label {
    float: left;
    margin-right: 1em;
}

.payment-total {
    font-weight: bold;
}

.confirmpayment button {
    margin-bottom: 1em;
}

.scart-items td, .scart-items th {
    border-right: 1px solid #F9F9F9;
    padding-right: .7em;
}

.confirmpayment .payment-type-name {
    width: 30%;
    font-weight: normal;
}

.confirmpayment div[class$='row'] {
    float: left;
    width: 47%;
    margin-right: 3%;
}

    .confirmpayment div[class$="row"] label {
        padding: .5em .7em;
    }

.confirmpayment button[type="submit"] + button {
    border: 1px solid #D7EBF4;
    color: #3798CC;
}

.payment-total {
    float: left;
}

.payment-selector input {
    position: relative;
    left: -9em;
}

.payment-selector {
    height: 24px;
    width: 24px;
    border: 2px solid #ddd;
    border-radius: 1em;
    overflow: hidden;
    padding: 0;
    margin-top: 0.5em;
    float: right;
    transition: all .2s ease-out;
}

    .payment-selector.selected {
        background: #009412 url(/Content/icons/payment-type-selector.png) no-repeat;
        border-color: #009412;
    }

.confirmpayment legend {
    color: #0086bc;
    padding-left: 0;
}

.confirmpayment fieldset p:first-of-type {
    margin-top: 0;
}




/* --- Payment Type Views --- */

.confirmpayment button.btn,
.box-ecocash button.btn,
.box-onemoney button.btn,
.box-visa button.btn,
.box-telecash button.btn {
    margin-bottom: 1em;
}




/* --- Ecocash Dial Bubbles --- */

.dial-number a:hover {
    text-decoration: none;
}

span.bubble {
    background: #c32119;
    color: #fff;
    padding: .1em .3em;
    font-size: 2em;
    margin-bottom: 1em;
    border-radius: 1em;
}

span.instruction {
    display: inline-block;
    *display: inline;
    color: #fff;
    background: #c32119;
    position: relative;
    font-weight: bold;
    letter-spacing: .1em;
    padding: .3em;
    border-radius: .5em 1em;
    top: -20px;
    left: 6px;
}

span.bubble {
    display: inline-block;
    padding: .5em;
    margin-left: -.16em;
    border-radius: 1em;
    line-height: .5em
}

.dial-link {
    background: #79AF27;
    padding: 1em;
    border-bottom-color: #3F5B14;
    text-align: center;
}

    .dial-link:hover {
        background: #6B9A22;
    }

/* ----- */









/* --- Fixing Stuff - Temporary Styles --- */

.box-grid form {
    width: 100%;
    padding: 0;
}

/* -- Shopping Cart -- */
.scart.box-grid {
    width: 96%;
    margin: 2%;
}

    .scart.box-grid td, .scart.box-grid th {
        padding-right: .6em;
    }

    .scart.box-grid td {
        border-right: 1px solid #70A4B9;
    }

        .scart.box-grid td.cleartd {
            border-right: none;
        }


.rating-form .ratingbox {
    padding-left: 1.5em;
}



/* payment request landing */

.box-billpayment.request > .fifty {
    padding-left: 1.5em;
    margin-bottom: 1em;
    width: 45%;
}
/* To Review */



/* --- Make Payment Page --- */

.make-payment .fourty.transaction {
    width: 40%;
    border: 1px solid #D7EBF4;
    background-color: #F2FAFF;
    padding: 2%;
    margin-right: 7.7%;
}

.make-payment .fifty {
    margin-right: 0;
}

.make-payment .fourty.transaction h2 {
    font-weight: bold;
    display: inline-block;
    margin-top: 1em;
    margin-bottom: .7em;
}

.make-payment .fourty.transaction img.merchant-logo {
    float: left;
    margin-right: 1em;
}



/* --- Temp Homepage News --- */

#news {
    padding: 1em;
    margin-bottom: 2em;
    border: 2px solid #fff;
    background: #fff;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 2px #006A94;
    border-radius: 6px;
    color: #0086BC;
    text-align: center;
}

    #news h3 {
        font-size: 1.6em;
        line-height: 1.2em;
        font-weight: bold;
    }

    #news .cta {
        display: inline-block;
        *display: inline;
        width: 41%;
        padding: 0.5em;
        border: 1px solid #E49253;
        background: #e6873d;
        border-bottom: 4px solid #b55f1c;
        border-radius: 6px 6px 8px 8px;
        color: #fff;
        font-weight: 700;
        font-size: 1.2em;
        text-shadow: 1px 1px 1px #444;
        text-align: center;
        margin-top: 1.6em;
        margin-bottom: 1.6em;
    }

    #news p {
        display: block;
        margin: .0;
        font-weight: 600;
        font-size: 1em;
        font-style: inherit;
        line-height: 0em;
    }







@media (min-width: 64em) {

    .payment-type span.payment-icon {
        margin-bottom: 3em;
    }

    .payment-type.payment-type-request span.payment-icon {
        margin-bottom: 4em;
    }

    #mobile-recharge .input-group.amount .prefix-wrapper {
        width: 6em;
    }
}




@media (max-width: 64em) {

    .show-tablet {
        display: block;
    }

    .hide-tablet {
        display: none;
    }

    .container {
        padding-left: 2.5em !important;
        padding-right: 2.5em !important;
    }

    .hero #msbox > .hero-form {
        padding-top: 1em;
    }

    .hero .hero-form.dform,
    .hero .hero-form .dform {
        display: none;
    }

    .hero .hero-form.mform {
        display: block;
    }

    .hero .hero-form h2 {
        text-align: center;
    }

    .hero .hero-form h3 {
        font-size: 1.8em;
        text-align: center;
    }

    .hero .hero-form .input-group input {
        width: 94%;
    }

        .hero .hero-form .input-group input#contact_email {
            width: 202% !important;
        }


    #als-viewport_0 {
        width: 100% !important;
        overflow: hidden;
    }

    #sec-footermenu .container {
        border: none;
        margin-top: 0;
    }

    #ovsr .fifty,
    #ovbps .fifty {
        width: 95%;
        margin: 0;
        padding-left: .5em;
    }

    /* -- Forms -- */
    .box form {
        padding-left: 1.5em;
        padding-right: 1.5em;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .rating-form .ratingbox {
        padding-left: 1.5em;
        padding-right: 1.5em;
    }

    .box-transactionhistory {
        margin-right: 1.4%;
    }

    .merc-details span.label {
        border: none;
        width: 30%;
    }

    .trans-details p.address, .merc-details p.address {
        display: initial;
    }

    .merc-details p.address {
        margin-right: -0.2em;
    }

    ul.merchant-ads li {
        width: 22.9%;
        margin-bottom: 1em;
    }


    .bill-category-page.donations .bp-short-details {
        min-height: 9em;
    }

    .category-footer .link-block {
        margin-bottom: 2em;
    }


    /* Personal Tab */
    #personalHome .hero-info {
        width: 64%;
    }

    #personalHome .hero-form.mform {
        width: 33%;
        margin: 0;
        margin-left: 3%;
        float: left;
    }

    #personalHome .hero-info h4 {
        text-align: center;
        font-size: 1.2em;
        min-height: 7.1em;
    }

    span[class^="billpay-icon"] {
        float: none;
        margin: 0 auto;
        margin-bottom: 1em;
    }


    #mobileRechargePage form#mobile-recharge {
        width: auto;
        max-width: 20em;
    }

    #mobile-recharge h2 {
        line-height: 1em;
        padding-bottom: 0.2em;
        padding-top: .5em;
    }

    #mobile-recharge span.dr-info {
        font-size: 0.4em;
    }
}
/* End MQ */





@media (min-width: 40.1em) and (max-width: 64em) {

    .show-tablet {
        display: block;
    }

    .container {
        box-sizing: border-box;
        width: 100% !important;
        padding: 0em 2.5em;
    }


    body.hpage #header {
        position: relative;
        height: auto;
    }

        body.hpage #header #header-content {
            height: auto;
            padding-bottom: 0;
        }

            body.hpage #header #header-content a.logo {
                float: none;
            }

            body.hpage #header #header-content #int-select {
                float: none;
                position: relative;
                bottom: -.28em;
                margin-top: -3.7em;
            }

                body.hpage #header #header-content #int-select ul {
                    margin: 0;
                    padding-left: 35%;
                }

                    body.hpage #header #header-content #int-select ul li small {
                        bottom: .7em;
                    }

            body.hpage #header #header-content .uaction {
                float: none;
                position: absolute;
                top: .7em;
                right: 1em;
            }


    .hero,
    #personalHome .hero {
        background-size: contain;
    }

        .hero .hero-info {
            color: #fff;
            width: 100%;
        }

        .hero .hero-form,
        .hero-form.mform {
            width: 100%;
        }

            .hero .hero-form.mform {
                margin-right: 0;
            }

                .hero .hero-form.mform .mobile-half {
                    width: 60%;
                    float: left;
                    margin-right: 2%;
                }

            .hero .hero-form button {
                float: left;
                width: 38%;
                padding: 1.68em;
            }


    #sec-mecinfo .container ul.basic-info li {
        width: 48.6%;
        margin-bottom: 1em;
    }

        #sec-mecinfo .container ul.basic-info li:nth-child(2) {
            margin-right: 0;
        }

    #sec-mecinfo .container ul.basic-info li {
        min-height: 14em;
    }

    /* Payment Types */
    .payment-type span.payment-icon {
        float: none;
    }

    .payment-type-request span.payment-icon {
        margin-bottom: 2em;
    }

    .make-payment .fourty.transaction {
        margin-right: 7.6%;
    }


    /* Billpayment Category Page & Footer */
    .bp-merchants-category {
        width: 68%;
    }

    .category-tabs {
        width: 30%;
    }

        .category-tabs h2 {
            padding: 1.5em;
            font-size: 0.8em;
        }

    .bp-short-details {
        width: 26%;
    }

    .category-footer .link-block {
        width: 31.3%;
        margin-right: 3%;
    }

        .category-footer .link-block:nth-child(3) {
            margin-right: 0;
        }


    /* Mobile Recharge */
    #mobile-recharge .mform {
        width: 95.8%;
    }

        #mobile-recharge .mform .mobile-half {
            width: 60%;
            float: left;
            margin-right: 2%;
        }

    #mobile-recharge .input-group.amount,
    #mobile-recharge .input-group.mobile-number,
    #mobile-recharge .input-group input[type=email] {
        margin-bottom: .7em;
    }

        #mobile-recharge .input-group.mobile-number label {
            width: 64%;
            margin-left: 0;
        }
}
/* End MQ */






@media (max-width: 47em) {

    .box-transactionhistory, .box-help {
        width: 100%;
    }

    div.option.row {
        padding-left: 1em;
    }

    div.option .amount {
        float: left;
        font-weight: bold;
    }

    .intro .blurb p:last-child {
        float: none;
    }

    #sec-footermenu a.logo {
        display: none;
    }

    #personalHome .hero-info h4 {
        text-align: center;
        font-size: 1.2em;
    }

    /* Mobile Recharge */
    #mobile-recharge {
        padding: .8em;
        font-size: 1em;
    }

        #mobile-recharge h2 {
            font-size: 1.2em;
            padding-top: 1.2em;
        }

        #mobile-recharge span.dr-info {
            font-size: 0.68em;
        }

        #mobile-recharge .prefix-wrapper {
            margin: 0 auto;
        }

        #mobile-recharge .input-group.mobile-number .prefix-wrapper {
            width: 10em;
        }

        #mobile-recharge .input-group.amount .prefix-wrapper {
            width: 6em;
        }

        #mobile-recharge .input-group.mobile-number input {
            width: 58%;
        }

        #mobile-recharge .dr-operator-logos {
            padding-bottom: 0.2em;
        }

        #mobile-recharge .input-group.amount .input-prefix {
            width: 21%;
        }

        #mobile-recharge .input-group.mobile-number .input-prefix {
            width: 25%;
            font-size: 0.8em;
        }

        #mobile-recharge .input-group.mobile-number label {
            width: 100%;
            margin-right: 0;
        }

        #mobile-recharge .input-group {
            width: 100% !important;
            margin-right: 0;
            margin-bottom: 1em;
        }

            #mobile-recharge .input-group.amount,
            #mobile-recharge .input-group.mobile-number,
            #mobile-recharge .input-group.email {
                text-align: center;
            }

        #mobile-recharge button {
            font-size: 1em;
        }
}
/* End MQ */





@media (max-width: 40em) {

    .hide-mobile {
        display: none;
    }

    .show-mobile {
        display: block;
    }

    #paynow-intro {
        display: none;
    }

    .container {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width: 100% !important;
        padding: 1em !important;
    }

    .fourty,
    .fifty,
    .sixty {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        float: none;
    }

    .merc-details,
    .trans-details {
        padding-left: 1em;
    }

    span.label {
        border: none;
        width: 100%;
        padding: 0;
    }

    #page-title h1 span.wuser {
        display: block;
    }

    #page-title h1 {
        text-align: left;
    }

    #page-title {
        margin-bottom: .5em;
        font-size: .7em;
    }

    #main-content {
        padding-top: 0 !important;
    }

    #header-content a.logo {
        height: 36px;
    }

    #sec-footermenu .container {
        padding-top: 2em !important;
    }

    /* Mobile Menu */

    .mobile-btn {
        display: block;
        background: url(/Content/icons/mobile-menu-close.svg) no-repeat .5em 48%;
        background-image: url(/Content/icons/mobile-menu.svg);
        padding: .35em .5em .4em 1.8em;
        color: #fff;
        border: 1px solid #fff;
        border-radius: 2px;
        cursor: pointer;
        text-transform: uppercase;
        transition: .4s all ease-out;
    }

        .mobile-btn.open {
            background: url(/Content/icons/mobile-menu-close.svg) no-repeat 3.8em 48%;
            padding: .35em 2em .4em .5em;
        }

    ul[class*="swhmenu"] {
        display: block;
        padding: 1em 2em 2em 1.5em !important;
        z-index: 99998;
        position: absolute;
        top: 0;
        background: #006A94;
        border-right: 4px solid #5FAFD4;
        border-bottom: 4px solid #5FAFD4;
        transition: .4s all ease-out;
    }


    ul.swhmenu li.submenu {
        background: none;
        display: block;
        margin-bottom: 1em;
    }

        ul.swhmenu li.submenu > a {
            font-weight: bold;
        }

    ul.swhmenu.closed {
        left: -285px;
    }

    ul.swhmenu.open {
        left: 0;
    }

    ul.swhmenu li.spacer {
        display: none;
    }

    ul.swhmenu li a {
        color: #fff;
    }

    ul.swhmenu li ul {
        display: block;
        position: relative;
        background: none;
        border: 1px solid #5FAFD4
    }

        ul.swhmenu li ul li a:hover {
            background: #379BCA
        }

    li.submenu li a {
        padding: 1em;
    }


    /* Modals */
    .ui-dialog {
        left: .5em;
        right: .5em;
    }


    body.hpage #header {
        position: relative;
        height: auto;
    }

        body.hpage #header #header-content {
            height: auto;
            padding-left: 1.5em;
        }

            body.hpage #header #header-content a.logo {
                float: none;
                width: 150px;
                background-size: contain;
                margin-top: 0;
                margin-bottom: 1.2em;
            }

            body.hpage #header #header-content #int-select {
                float: none;
                margin-bottom: -1.4em;
            }

                body.hpage #header #header-content #int-select ul {
                    margin: 0;
                    padding-left: 0;
                    text-align: center;
                }

                    body.hpage #header #header-content #int-select ul li { /*padding: .7em;*/
                        letter-spacing: .1em;
                    }

                        body.hpage #header #header-content #int-select ul li.pers {
                            position: relative; /*top: -.1em;padding-top: .4em;*/
                        }

            body.hpage #header #header-content .uaction {
                float: none;
                position: absolute;
                top: .6em;
                right: 1em;
            }

    .hero,
    #personalHome .hero {
        padding-top: 0;
        background-size: contain;
        background-repeat: no-repeat;
    }

        .hero .hero-info {
            width: auto;
            margin-top: -1.5em;
            color: #fff;
        }

            .hero .hero-info .info-row {
                margin-bottom: 0;
            }

                .hero .hero-info .info-row .info-half {
                    width: auto;
                    margin-bottom: 1em;
                }

                    .hero .hero-info .info-row .info-half .hero-icon {
                        margin-bottom: 2.5em;
                    }

        .hero .hero-form {
            width: 100%;
            margin: 0;
            color: #fff;
        }

    /* Personal Home */
    #personalHome .hero-info {
        box-sizing: border-box;
        padding: 1em;
    }

    .personal-intro {
        margin-top: 0.6em;
    }

    #personalHome .hero-info,
    #personalHome .hero-form.mobile {
        width: 100%;
        margin: 0;
        margin-bottom: 1em;
    }

    #personalHome .info-half {
        width: 47%;
        margin-left: 1.5%;
        margin-right: 1.5%;
        margin-bottom: 1em;
    }

    .personal h3 {
        margin-top: .6em;
    }

    #sec-banklogos {
        margin-bottom: 2em;
    }

    #personalHome #sec-mecinfo {
        margin: 2em 0;
    }

    #sec-mecinfo ul.basic-info li {
        display: block;
        width: 100%;
        margin: 0;
        margin-bottom: 1.5em;
    }

    #sec-mecinfo ul.basic-info li {
        min-height: 13em;
    }

    #personalHome #sec-mecinfo ul.basic-info li {
        min-height: 11em;
    }

    #sec-mecinfo ul.basic-info li.last {
        margin-bottom: 0;
    }

    #sec-footermenu {
        margin-top: 2em !important;
    }

        #sec-footermenu ul.footermenu {
            width: 100%;
            display: block;
        }

            #sec-footermenu ul.footermenu li {
                display: block;
                padding: 0;
                margin-bottom: 1em;
                text-align: center;
            }

    /* -- Login Page -- */
    .intro {
        text-align: center;
    }

        .intro .ptypes {
            margin: 0;
            margin-bottom: 1em;
            width: 100%;
        }

    #login-container .loghalf, #login-container .loghalf,
    #customer-faq .fst, #customer-faq .lst {
        width: 100%;
        padding: 0 0 1em;
        border: none;
    }

    #login-container {
        margin: 0 0 .5em;
        padding: 0 1em;
    }

    #otpbox input#email {
        max-width: 90% !important;
    }

    .otp-btn {
        padding: .46em 1em;
        margin-top: .5em;
        margin-right: 1em;
        float: left;
    }

    .acc-invite h4 {
        float: left;
        margin-right: 1em;
    }

    .or-box {
        top: auto;
        left: auto;
        margin-top: 1em;
        display: inline-block;
        border: none;
    }

    #loginform h2 {
        margin-top: 0;
        padding-top: 0;
    }

    #otpform h2 {
        padding-top: .5em;
    }

    #otpform h2,
    #loginform h2 {
        font-size: 1.2em;
        padding-bottom: .2em;
    }

    #loginfo {
        margin-top: 1em;
        border-top: 1px solid #D7EBF4;
        padding-top: 1em;
    }

    #customer-faq {
        padding: 0 1em;
    }

    /* -- Logged Home -- */
    .logged-home {
        width: 100%;
        margin: 2em 0;
    }

        .logged-home.sm {
            margin-bottom: 0;
            margin-right: 0;
        }

    table.payment-type-status {
        margin-bottom: .5em;
    }

        table.payment-type-status td {
            padding: .5em .5em;
            padding-left: 0;
        }

        table.payment-type-status tr:nth-of-type(1n+2) {
            background: none;
            border-bottom: 1px solid #E3EFF6;
        }

    .logged-home.rm .payment-type-body {
        margin-top: 2em;
    }

    .register-interest form {
        width: 100%;
        padding-left: .5em;
    }

    label {
        width: 100%;
        display: block;
    }

        label[for] {
            cursor: pointer;
        }

    .input-group {
        margin-bottom: 1em;
    }

        .input-group input[type=text],
        .input-group input[type=password],
        .input-group textarea {
            width: 90%;
        }

        .input-group select {
            width: 70%;
        }

    .box-billpayment > .fifty span.label {
        float: left;
        border: none;
    }

    div.option .label {
        margin-right: 1em;
        border-bottom: 1px dotted #ddd;
        margin-bottom: .5em;
    }

    .payment-label {
        margin-right: 1em;
        border-bottom: 1px dotted #ddd;
        margin-bottom: .5em;
    }


    /* Payment Types */
    .payment-type {
        padding-left: 1em;
        padding-right: 1em;
        border-bottom: 1px solid #0086bc;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .payment-type-body, .payment-type-title {
        float: none;
        width: 100%;
        padding: 0;
        border: none;
    }

    .payment-type-title {
        margin-bottom: 2em;
    }

    .payment-type span.payment-icon {
        margin-bottom: 2em;
    }

    .payment-type-request span.payment-icon {
        margin-bottom: 5em;
    }

    .payment-type-request .payment-type-body {
        border-top: 1px solid #D7EBF4;
        padding-top: 1em;
    }

    .payment-type-request {
        border: none;
    }

    ul.merchant-ads li {
        width: 48.4%;
    }

        ul.merchant-ads li:nth-child(2) {
            margin-right: 0;
        }

    #frmMakePayment {
        text-align: center;
    }

    .make-payment .fourty.transaction {
        width: 100%;
        margin: 0;
        padding: 0;
        padding-top: .5em;
    }

        .make-payment .fourty.transaction h2 {
            display: block;
        }

        .make-payment .fourty.transaction img.merchant-logo,
        .make-payment .fourty.transaction h2 {
            clear: both;
            float: none;
            text-align: center;
            margin-top: .5em;
        }

    .doc-wrap {
        margin-left: 1em;
    }

        .doc-wrap ul {
            border-left: 1px solid #D7EBF4;
            padding-left: .5em;
        }

    .payment-total {
        float: left;
    }

    .confirmpayment .payment-type-name {
        width: 50%;
    }

    form.confirmpayment {
        margin-top: 1.7em;
    }

    .confirmpayment .payment-type-logo {
        margin-bottom: 0em !important;
    }

    .confirmpayment .payment-type-name {
        width: 33%;
    }

    .confirmpayment .payment-selector {
        margin-right: 0;
    }

    .confirmpayment div[class$='row'] {
        width: 48.5%;
        margin-right: 1%;
    }

        .confirmpayment div[class$='row']:nth-of-type(2n) {
            margin-left: 1%;
            margin-right: 0;
        }

        .confirmpayment div[class$="row"] label {
            width: 91%;
            margin-right: 0;
        }

    .confirmpayment button.mmpb {
        margin-top: .7em;
        margin-bottom: 3em;
    }


    /* Billpayment Category Page */

    .bill-category-page .bp-merchants-category {
        width: 84%;
        text-align: center;
        min-height: 24em;
    }

    .bill-category-page h1 {
        font-size: 1em;
    }

    .bp-short-details {
        width: 130px;
    }

    .category-tabs {
        width: 3.6em;
    }

        .category-tabs h2 {
            text-indent: -999em;
        }

    .category-footer {
        margin-bottom: 0;
        text-align: center;
    }

        .category-footer .link-block {
            width: 47%;
            margin-right: 6%;
        }

            .category-footer .link-block:nth-of-type(2n+2) {
                margin-right: 0;
            }

    /* Mobile Recharge */
    #mobile-recharge {
        max-width: 21em;
        margin: 0 auto;
    }

        #mobile-recharge h2 {
            font-size: 1.9em;
            padding-top: .9em;
        }

        #mobile-recharge span.dr-info {
            font-size: 0.48em;
        }

        #mobile-recharge .input-group.amount,
        #mobile-recharge .input-group.mobile-number,
        #mobile-recharge .input-group.email {
            text-align: left;
        }

        #mobile-recharge .input-group.amount {
            width: 38% !important;
            margin-right: 8%;
        }

        #mobile-recharge .input-group.mobile-number {
            width: 54% !important;
        }

        #mobile-recharge .prefix-wrapper {
            margin: 0;
        }

        #mobile-recharge .input-group.mobile-number .prefix-wrapper {
            width: auto;
        }

        #mobile-recharge .input-group.mobile-number .input-prefix {
            width: 25%;
            font-size: 1em;
        }

        #mobile-recharge .input-group.mobile-number label {
            margin-left: 0;
        }
}
/* End MQ */





@media (min-width: 37.6em) and (max-width: 47em) {


    #sec-mecinfo .container ul.basic-info li {
        min-height: 15.5em;
    }

    #personalHome #sec-mecinfo ul.basic-info li {
        min-height: 11em;
    }

    .confirmpayment .payment-type-logo {
        margin-bottom: .3em;
    }

    .confirmpayment .payment-type-name {
        width: 45%;
    }
}
/* End MQ */



@media(min-width: 47.1em) and (max-width: 56em) {

    .confirmpayment .payment-type-logo {
        margin-bottom: .5em;
    }

    .confirmpayment .payment-type-name {
        width: 55%;
    }
}
/* End MQ */




@media (max-width: 25em) {

    .thirty {
        float: left;
        width: 100%;
        margin-right: 2%;
    }

    body.hpage #header #header-content .uaction {
        right: 0.3em;
    }

    .uaction ul li a {
        padding: .5em .7em .7em .7em;
    }

    .hero .hero-info .info-row .info-half .hero-icon {
        margin-bottom: 5em;
    }

    .hero .hero-form .input-group {
        width: 100%;
        margin-right: 0;
        margin-bottom: 1em;
    }

        .hero .hero-form .input-group input,
        .hero .hero-form .input-group input#contact_email {
            width: 95% !important;
        }

    /* Personal Home */
    #personalHome .hero-info {
        padding: 0;
    }

        #personalHome .hero-info h4 {
            min-height: 8.3em;
            font-size: .8em;
            line-height: 1em;
        }

    span[class^="billpay-icon"] {
        margin-bottom: 1em;
    }

    .ptypes img {
        width: 100%;
    }

    .payment-type span.payment-icon {
        float: none;
    }

    .payment-type-request span.payment-icon {
        margin-bottom: 2em;
    }

    #login-container a.signup {
        margin-top: 1em;
        display: block;
    }

    ul.merchant-ads li {
        width: 100%;
        margin: 0;
        margin-bottom: 1.5em;
    }

    .confirmpayment div[class$="row"] label {
        width: 85%;
    }

    .confirmpayment .payment-type-name {
        width: 36%;
    }

    .confirmpayment .payment-selector {
        margin-right: 1em;
    }

    .confirmpayment .payment-type-name {
        width: 40%;
    }

    .confirmpayment div[class$='row'] {
        width: 100%;
        margin-right: 0;
        margin-left: 0 !important;
    }

        .confirmpayment div[class$="row"] label {
            width: 93%;
        }

    .confirmpayment button.mmpb {
        margin-top: .7em;
        margin-bottom: 3em;
    }

    .box-ecocash button.btn,
    .box-onemoney button.btn,
    .box-visa button.btn,
    .box-telecash button.btn,
    .confirmpayment button.btn {
        width: 100%;
        padding: 1em;
        margin-top: 0;
        margin-bottom: 1.5em;
    }


    /* Billpayment Categories */
    .bill-category-page .bp-merchants-category {
        width: 100%;
        border: none;
        padding-left: 0;
        min-height: initial;
    }

    .category-tabs {
        display: none;
    }

    .category-footer .link-block {
        width: 100%;
        margin-right: 0;
    }

    .category-footer h3 {
        min-height: 1em;
        display: inline-block;
        padding-left: 3em;
        padding-right: 3em;
    }


    /* Mobile Recharge */
    #mobile-recharge h2 {
        font-size: 2em;
        padding-top: .5em;
    }

    #mobile-recharge .prefix-wrapper {
        margin: 0 auto;
    }

    #mobile-recharge .input-group.amount,
    #mobile-recharge .input-group.mobile-number {
        width: 100% !important;
    }

        #mobile-recharge .input-group.mobile-number .prefix-wrapper {
            width: 10em;
        }

        #mobile-recharge .input-group.amount .prefix-wrapper {
            width: 6em;
        }

        #mobile-recharge .input-group.mobile-number input {
            width: 58% !important;
        }

    #mobile-recharge .input-group {
        width: 100% !important;
        margin-right: 0;
        margin-bottom: 1em;
    }

        #mobile-recharge .input-group.mobile-number label {
            width: 100%;
            margin-right: 0;
            margin-bottom: .25em;
        }

        #mobile-recharge .input-group.amount,
        #mobile-recharge .input-group.mobile-number,
        #mobile-recharge .input-group.email {
            text-align: center;
        }

    #mobile-recharge button {
        font-size: 1em;
    }
}
/* End MQ */


input[readonly="readonly"] {
    background-color: lightgray;
}

.currency-tag {
    border-radius: 11px;
    color: white;
    background-color: grey;
    padding: 4px 6px;
    font-size: 12px;
}

    .currency-tag.white {
        color: black;
        background-color: white;
    }

.box-telecash .currency-tag.white {
    color: #bb211f;
}

.box-ecocash .currency-tag.white {
    color: #f00;
}

.box-internetmobilebanking .currency-tag.white {
    color: #E50086;
}

.box-cashcollection .currency-tag.white {
    color: #12ae00;
}

.box-pos2u .currency-tag.white {
    color: #00a7cb;
}

.box-onemoney .currency-tag.white {
    color: #F68B1E;
}

.box-visa .currency-tag.white {
    color: #0f61a3;
}

.box-vpayments .currency-tag.white {
    color: #5d538f;
}

.box-innbucks .currency-tag.white {
    color: #8c4a97;
}

.box-eftpay .currency-tag.white {
    color: #f0c500;
}

.box-paygo .currency-tag.white {
    color: #8c04a8;
}

/* LOADING SPINNER */

.loader-container {
    margin: auto;
    text-align: center;
    color: #3498db;
    font-weight: bold;
    font-size: 24px;
    position: relative;
    width: 80px;
}

.loader-text {
    position: absolute;
    top: 28px;
    left: 0;
    width: 80px;
}

.loader {
    border: 10px solid #f3f3f3; /* Light grey */
    border-top: 10px solid #3498db; /* Blue */
    border-bottom: 10px solid #3498db; /* Blue */
    border-radius: 50%;
    animation: spin 2s linear infinite;
    width: 60px;
    height: 60px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes spin2 {
    0% {
        transform: rotate(225deg);
    }

    50% {
        transform: rotate(405deg);
    }

    100% {
        transform: rotate(405deg);
    }
}


.box {
    border: 1px solid;
}


/* --- Used on Generic Boxes Front/Admin  --- */
.box-blue {
    border-color: #006a94;
}

    .box-blue h1 {
        background-image: url(icons/detail.png);
        background-color: #006a94;
    }

    .box-blue a,
    .box-blue h2 {
        color: #006a94;
    }

    .box-blue .box-grid td {
        background-color: #006a94;
    }

    .box-blue button {
        border-color: #006a94;
        color: #006a94;
    }

    .box-blue input[type=text],
    .box-blue input[type=password],
    .box-blue select,
    .box-blue textarea {
        border-color: #006a94;
    }




/* --- Admin -> Settlement Visa - Blocked Cards  --- */
.box-red {
    border-color: #bb211f;
}

    .box-red h1 {
        background-image: url(icons/detail.png);
        background-color: #bb211f;
    }

    .box-red a, .box-red h2 {
        color: #bb211f;
    }

    .box-red .box-grid td {
        background-color: #bb211f;
    }

    .box-red button {
        border-color: #bb211f;
        color: #bb211f;
    }

    .box-red input[type=text],
    .box-red input[type=password],
    .box-red select,
    .box-red textarea {
        border-color: #bb211f;
    }



.box-login {
    border-color: #5fafd2;
}

    .box-login h1 {
        background-image: url(icons/login.png);
        background-color: #5fafd2;
    }

    .box-login a, .box-login h2 {
        color: #5fafd2;
    }

    .box-login .box-grid td {
        background-color: #5fafd2;
    }

    .box-login button {
        border-color: #5fafd2;
        color: #5fafd2;
    }

    .box-login input[type=text], .box-login input[type=password], .box-login select, .box-login textarea {
        border-color: #5fafd2;
    }



.box-otp {
    border-color: #006a94;
}

    .box-otp h1 {
        background-image: url(icons/guest.png);
        background-color: #006a94;
    }

    .box-otp a, .box-otp h2 {
        color: #006a94;
    }

    .box-otp .box-grid td {
        background-color: #006a94;
    }

    .box-otp button {
        border-color: #006a94;
        color: #006a94;
    }

    .box-otp input[type=text], .box-otp input[type=password], .box-otp select, .box-otp textarea {
        border-color: #006a94;
    }

.box-overview {
    border-color: #0086bc;
}

    .box-overview h1 {
        background-image: url(icons/overview.png);
        background-color: #0086bc;
    }

    .box-overview a, .box-overview h2 {
        color: #0086bc;
    }

    .box-overview .box-grid td {
        background-color: #0086bc;
    }

    .box-overview button {
        border-color: #0086bc;
        color: #0086bc;
    }

    .box-overview input[type=text], .box-overview input[type=password], .box-overview select, .box-overview textarea {
        border-color: #0086bc;
    }

.box-find {
    border-color: #006a94;
}

    .box-find h1 {
        background-image: url(icons/user_find.png);
        background-color: #006a94;
    }

    .box-find a, .box-find h2 {
        color: #006a94;
    }

    .box-find .box-grid td {
        background-color: #006a94;
    }

    .box-find button {
        border-color: #006a94;
        color: #006a94;
    }

    .box-find input[type=text], .box-find input[type=password], .box-find select, .box-find textarea {
        border-color: #006a94;
    }

.box-vpayments {
    border-color: #5d538f;
}

    .box-vpayments h1 {
        background-image: url(icons/vpayments.png);
        background-color: #5d538f;
    }

    .box-vpayments a {
        color: #5d538f;
    }

    .box-vpayments .box-grid td, .box-vpayments-row td {
        background-color: #5d538f;
    }

    .box-vpayments button {
        border-color: #5d538f;
        color: #5d538f;
    }

    .box-vpayments input[type=text], .box-vpayments input[type=password], .box-vpayments select, .box-vpayments textarea {
        border-color: #5d538f;
    }





/* --- Visa --- */

.box-visa {
    border-color: #0f61a3;
}

    .box-visa h1 {
        background-image: url(icons/visa.png);
        background-color: #0f61a3;
        color: #fff;
    }

    .box-visa a {
        color: #0f61a3;
    }

    .box-visa input[type=text],
    .box-visa input[type=number],
    .box-visa input[type=password],
    .box-visa select,
    .box-visa textarea {
        border-color: #0f61a3;
    }

    .box-visa .box-grid td {
        background-color: #0f61a3;
    }

    .box-visa button {
        border-color: #0f61a3;
        color: #0f61a3;
    }
        /* for pm pages */
        .box-visa button.btn {
            border-color: #0f61a3;
            background: #0f61a3;
            border-bottom: 3px solid #09375e;
        }

            .box-visa button.btn:hover {
                background: #137dd2;
                border-color: #137dd2;
                border-bottom: 3px solid #0f61a3;
            }





/* --- Mastercard --- */

.box-mastercard {
    border-color: #edb802;
}

    .box-mastercard h1 {
        background-image: url(icons/visa.png);
        background-color: #edb802;
    }

    .box-mastercard a {
        color: #edb802;
    }

    .box-mastercard input[type=text],
    .box-mastercard input[type=password],
    .box-mastercard select,
    .box-mastercard textarea {
        border-color: #edb802;
    }

    .box-mastercard .box-grid td {
        background-color: #edb802;
    }

    .box-mastercard button {
        border-color: #edb802;
        color: #edb802;
    }

        .box-mastercard button.btn {
            border-color: #edb802;
            background: #edb802;
            border-bottom: 3px solid #bb9002;
        }

            .box-mastercard button.btn:hover {
                background: #d4a402;
                border-color: #d4a402;
                border-bottom: 3px solid #edb802;
            }





/* --- Ecocash ---*/


.box-ecocash {
    border-color: #bb211f;
}

    .box-ecocash h1 {
        background-image: url(icons/ecocash.png);
        background-color: #bb211f;
        color: #fff;
    }

    .box-ecocash a {
        color: #bb211f;
    }

    .box-ecocash input[type=text],
    .box-ecocash input[type=tel],
    .box-ecocash input[type=password],
    .box-ecocash select,
    .box-ecocash textarea {
        border-color: #bb211f;
    }

    .box-ecocash .box-grid td {
        background-color: #bb211f;
    }

    .box-ecocash button {
        border-color: #bb211f;
        color: #bb211f;
    }
        /* for pm pages */
        .box-ecocash button.btn {
            border-color: #bb211f;
            background: #bb211f;
            border-bottom: 3px solid #901716;
        }

            .box-ecocash button.btn:hover {
                background: #dd3230;
                border-color: #dd3230;
                border-bottom: 3px solid #bc1e1d;
            }

/* --- OneMoney ---*/


.box-onemoney {
    border-color: #F68B1E;
}

    .box-onemoney h1 {
        background-image: url(icons/onemoney.png);
        background-color: #F68B1E;
        color: #fff;
    }

    .box-onemoney a {
        color: #F68B1E;
    }

    .box-onemoney input[type=text],
    .box-onemoney input[type=tel],
    .box-onemoney input[type=password],
    .box-onemoney select,
    .box-onemoney textarea {
        border-color: #F68B1E;
    }

    .box-onemoney .box-grid td {
        background-color: #F68B1E;
    }

    .box-onemoney button {
        border-color: #F68B1E;
        color: #F68B1E;
    }
        /* for pm pages */
        .box-onemoney button.btn {
            border-color: #F68B1E;
            background: #F68B1E;
            border-bottom: 3px solid #8e5216;
        }

            .box-onemoney button.btn:hover {
                background: #de8931;
                border-color: #de8931;
                border-bottom: 3px solid #bb6d1d;
            }

/* --- Internet/Mobile Banking ---*/


.box-internetmobilebanking {
    border-color: #E50086;
}

    .box-internetmobilebanking h1 {
        background-image: url(icons/paabb.png);
        background-color: #E50086;
        color: #fff;
    }

    .box-internetmobilebanking a {
        color: #E50086;
    }

    .box-internetmobilebanking input[type=text],
    .box-internetmobilebanking input[type=date],
    .box-internetmobilebanking input[type=time],
    .box-internetmobilebanking input[type=email],
    .box-internetmobilebanking input[type=number],
    .box-internetmobilebanking input[type=tel],
    .box-internetmobilebanking input[type=password],
    .box-internetmobilebanking select,
    .box-internetmobilebanking textarea {
        border-color: #E50086;
    }

    .box-internetmobilebanking .box-grid td {
        background-color: #E50086;
    }

    .box-internetmobilebanking button {
        border-color: #E50086;
        color: #E50086;
    }
        /* for pm pages */
        .box-internetmobilebanking button.btn {
            border-color: #E50086;
            background: #E50086;
            border-bottom: 3px solid #900055;
        }

            .box-internetmobilebanking button.btn:hover {
                background: #E50086;
                border-color: #E50086;
                border-bottom: 3px solid #ae136e;
            }



/* --- Cash Collection ---*/


.box-cashcollection {
    border-color: #03a700;
}

    .box-cashcollection h1 {
        background-image: url(icons/paabb.png);
        background-color: #03a700;
        color: #fff;
    }

    .box-cashcollection a {
        color: #03a700;
    }

    .box-cashcollection input[type=text],
    .box-cashcollection input[type=date],
    .box-cashcollection input[type=time],
    .box-cashcollection input[type=email],
    .box-cashcollection input[type=number],
    .box-cashcollection input[type=tel],
    .box-cashcollection input[type=password],
    .box-cashcollection select,
    .box-cashcollection textarea {
        border-color: #03a700;
    }

    .box-cashcollection .box-grid td {
        background-color: #03a700;
    }

    .box-cashcollection button {
        border-color: #03a700;
        color: #03a700;
    }
        /* for pm pages */
        .box-cashcollection button.btn {
            border-color: #03a700;
            background: #03a700;
            border-bottom: 3px solid #006200;
        }

            .box-cashcollection button.btn:hover {
                background: #03a700;
                border-color: #03a700;
                border-bottom: 3px solid #0e7c0e;
            }



/* --- POS2U ---*/


.box-pos2u {
    border-color: #00abcc;
}

    .box-pos2u h1 {
        background-image: url(icons/pos2u.png);
        background-color: #00abcc;
        color: #fff;
    }

    .box-pos2u a {
        color: #00abcc;
    }

    .box-pos2u input[type=text],
    .box-pos2u input[type=date],
    .box-pos2u input[type=time],
    .box-pos2u input[type=email],
    .box-pos2u input[type=number],
    .box-pos2u input[type=tel],
    .box-pos2u input[type=password],
    .box-pos2u select,
    .box-pos2u textarea {
        border-color: #00abcc;
    }

    .box-pos2u .box-grid td {
        background-color: #00abcc;
    }

    .box-pos2u button {
        border-color: #00abcc;
        color: #00abcc;
    }

/* --- INNBUCKS ---*/
.box-innbucks {
    border-color: #8c4a97;
}

    .box-innbucks h1 {
        background-image: url(icons/innbucks.png);
        background-color: #8c4a97;
        color: #fff;
    }

    .box-innbucks a {
        color: #8c4a97;
    }

    .box-innbucks input[type=text],
    .box-innbucks input[type=date],
    .box-innbucks input[type=time],
    .box-innbucks input[type=email],
    .box-innbucks input[type=number],
    .box-innbucks input[type=tel],
    .box-innbucks input[type=password],
    .box-innbucks select,
    .box-innbucks textarea {
        border-color: #8c4a97;
    }

    .box-innbucks .box-grid td {
        background-color: #8c4a97;
    }

    .box-innbucks button {
        border-color: #8c4a97;
        color: #8c4a97;
    }

/* --- EFTPAY ---*/
.box-eftpay {
    border-color: #f0c500;
}

    .box-eftpay h1 {
        background-image: url(icons/zimswitch.png);
        background-color: #f0c500;
        color: #fff;
    }

    .box-eftpay a {
        color: #f0c500;
    }

    .box-eftpay input[type=text],
    .box-eftpay input[type=date],
    .box-eftpay input[type=time],
    .box-eftpay input[type=email],
    .box-eftpay input[type=number],
    .box-eftpay input[type=tel],
    .box-eftpay input[type=password],
    .box-eftpay select,
    .box-eftpay textarea {
        border-color: #f0c500;
    }

    .box-eftpay .box-grid td {
        background-color: #f0c500;
    }

    .box-eftpay button {
        border-color: #f0c500;
        color: #f0c500;
    }

        /* for pm pages */
        .box-eftpay button.btn {
            border-color: #f0c500;
            background: #f0c500;
            border-bottom: 3px solid #ad9700;
        }

            .box-eftpay button.btn:hover {
                background: #f0c500;
                border-color: #f0c500;
                border-bottom: 3px solid #ad9700;
            }

/* --- PAYGO ---*/
.box-paygo {
    border-color: #8c04a8;
}

    .box-paygo h1 {
        background-image: url(icons/paygo.png);
        background-color: #8c04a8;
        color: #fff;
    }

    .box-paygo a {
        color: #8c04a8;
    }

    .box-paygo input[type=text],
    .box-paygo input[type=date],
    .box-paygo input[type=time],
    .box-paygo input[type=email],
    .box-paygo input[type=number],
    .box-paygo input[type=tel],
    .box-paygo input[type=password],
    .box-paygo select,
    .box-paygo textarea {
        border-color: #8c04a8;
    }

    .box-paygo .box-grid td {
        background-color: #8c04a8;
    }

    .box-paygo .btn, .box-paygo button {
        border-color: #8c04a8;
        background: #8c04a8;
        border-bottom: 3px solid #4c025c;
        color: white;
    }

        .box-paygo .btn:hover, .box-paygo button:hover {
            background: #8c04a8;
            border-color: #8c04a8;
            color: white;
            border-bottom: 3px solid #4c025c;
        }

/* --- Telecash --- */

.box-telecash {
    border-color: #bb211f;
}

    .box-telecash h1 {
        background-image: url(icons/telecash.png);
        background-color: #bb211f;
        color: #fff;
    }

    .box-telecash a {
        color: #bb211f;
    }

    .box-telecash input[type=text],
    .box-telecash input[type=tel],
    .box-telecash input[type=password],
    .box-telecash select,
    .box-telecash textarea {
        border-color: #bb211f;
    }

    .box-telecash .box-grid td {
        background-color: #bb211f;
    }

    .box-telecash button {
        border-color: #bb211f;
        color: #bb211f;
    }
        /* for pm pages */
        .box-telecash button.btn {
            border-color: #bb211f;
            background: #bb211f;
            border-bottom: 3px solid #901716;
        }

            .box-telecash button.btn:hover {
                background: #dd3230;
                border-color: #dd3230;
                border-bottom: 3px solid #bc1e1d;
            }





fieldset.box.box-inactive legend {
    color: #aaa;
}





.box-billpayment {
    border-color: #0086bc;
}

    .box-billpayment h1 {
        background-image: url(icons/bpay.png);
        background-color: #0086bc;
    }

    .box-billpayment a {
        color: #0086bc;
    }

    .box-billpayment .box-grid td {
        background-color: #0086bc;
    }

    .box-billpayment button {
        border-color: #0086bc;
        color: #0086bc;
    }

    .box-billpayment input[type=text], .box-billpayment input[type=password], .box-billpayment select, .box-billpayment textarea {
        border-color: #0086bc;
    }



.box-externalsite {
    border-color: #006a94;
}

    .box-externalsite h1 {
        background-image: url(icons/extlink.png);
        background-color: #006a94;
    }

    .box-externalsite a {
        color: #006a94;
    }

    .box-externalsite .box-grid td {
        background-color: #006a94;
    }

    .box-externalsite button {
        border-color: #006a94;
        color: #006a94;
    }

    .box-externalsite input[type=text], .box-externalsite input[type=password], .box-externalsite select, .box-externalsite textarea {
        border-color: #006a94;
    }



.box-shoppingcart {
    border-color: #5fafd2;
}

    .box-shoppingcart h1 {
        background-image: url(icons/cart.png);
        background-color: #5fafd2;
    }

    .box-shoppingcart a {
        color: #006a94;
    }

    .box-shoppingcart .box-grid td {
        background-color: #5fafd2;
    }

    .box-shoppingcart button {
        border-color: #006a94;
        color: #006a94;
    }

    .box-shoppingcart input[type=text], .box-shoppingcart input[type=password], .box-shoppingcart select, .box-shoppingcart textarea {
        border-color: #5fafd2;
    }



.box-receive {
    border-color: #006a94;
}

    .box-receive h1 {
        background-image: url(icons/payment.png);
        background-color: #006a94;
    }

    .box-receive a {
        color: #006a94;
    }

    .box-receive .box-grid td {
        background-color: #006a94;
    }

    .box-receive button {
        border-color: #006a94;
        color: #006a94;
    }

    .box-receive input[type=text], .box-receive input[type=password], .box-receive select, .box-receive textarea {
        border-color: #006a94;
    }



.box-send {
    border-color: #5fafd2;
}

    .box-send h1 {
        background-image: url(icons/smoney.png);
        background-color: #5fafd2;
    }

    .box-send a {
        color: #5fafd2;
    }

    .box-send .box-grid td {
        background-color: #5fafd2;
    }

    .box-send button {
        border-color: #5fafd2;
        color: #5fafd2;
    }

    .box-send input[type=text], .box-send input[type=password], .box-send select, .box-send textarea {
        border-color: #5fafd2;
    }



.box-help {
    border-color: #aaa;
}

    .box-help h1 {
        background-image: url(icons/help.png);
        background-color: #aaa;
    }

    .box-help a {
        color: #006a94;
    }

    .box-help .box-grid td {
        background-color: #aaa;
    }

    .box-help button {
        border-color: #aaa;
        color: #aaa;
    }

    .box-help input[type=text], .box-help input[type=password], .box-help select, .box-help textarea {
        border-color: #aaa;
    }



.box-transactionhistory {
    border-color: #aaa;
}

    .box-transactionhistory h1 {
        background-image: url(icons/transhist.png);
        background-color: #aaa;
    }

    .box-transactionhistory a {
        color: #006a94;
    }

    .box-transactionhistory .box-grid td {
        background-color: #aaa;
    }

    .box-transactionhistory button {
        border-color: #aaa;
        color: #aaa;
    }

    .box-transactionhistory input[type=text], .box-transactionhistory input[type=password], .box-transactionhistory select, .box-transactionhistory textarea {
        border-color: #aaa;
    }




/*new styling guide*/

/*.box-miscpayment {
    border-color: #006a94;
}

    .box-miscpayment h1 {
        background-image: url(icons/bpay.png);
        background-color: #006a94;
    }

    .box-miscpayment a {
        color: #006a94;
    }

    .confirmpayment .box-grid td {
        background-color: #006a94;
    }

    .confirmpayment button {
        border-color: #006a94;
        color: #006a94;
    }

    .confirmpayment legend {
        color: #006a94;
    }

    .confirmpayment fieldset {
        border-color: #006a94;
    }

    .confirmpayment input[type=text], input[type=email], input[type=tel], input[type=number], .box-miscpayment input[type=password], .box-miscpayment select, .box-miscpayment textarea {
        border: 1px solid;
        border-color: #006a94;
    }*/



.box-generatekey {
    border-color: #aaa;
}

    .box-generatekey h1 {
        background-image: url(icons/gkeys.png);
        background-color: #aaa;
    }

    .box-generatekey a {
        color: #aaa;
    }

    .box-generatekey .box-grid td {
        background-color: #aaa;
    }

    .box-generatekey input[type=text], .box-generatekey input[type=password], .box-generatekey select, .box-generatekey textarea {
        border-color: #aaa;
    }




.box-shipping {
    color: #006a94;
}

    .box-shipping h1 {
        background-image: url(icons/ship.png);
        background-color: #006a94;
    }

    .box-shipping a {
        color: #006a94;
    }

    .box-shipping .box-grid td {
        background-color: #006a94;
    }

    .box-shipping button {
        border-color: #006a94;
        color: #006a94;
    }

    .box-shipping input[type=text], .box-shipping input[type=password], .box-shipping select, .box-shipping textarea {
        border-color: #006a94;
    }




.box-shoppingcartitems {
    border-color: #5fafd2;
}

    .box-shoppingcartitems h1 {
        background-image: url(icons/cart-items.png);
        background-color: #5fafd2;
    }

    .box-shoppingcartitems a {
        color: #5fafd2;
    }

    .box-shoppingcartitems .box-grid td {
        background-color: #5fafd2;
    }

    .box-shoppingcartitems button {
        border-color: #5fafd2;
        color: #5fafd2;
    }

    .box-shoppingcartitems input[type=text], .box-shoppingcartitems input[type=password], .box-shoppingcartitems select, .box-shoppingcartitems textarea {
        border-color: #5fafd2;
    }



.box-extrafields {
    border-color: #006a94;
    color: #006a94;
}

    .box-extrafields h1 {
        background-image: url(icons/detail.png);
        background-color: #006a94;
    }

    .box-extrafields a {
        color: #006a94;
    }

    .box-extrafields .box-grid td {
        background-color: #006a94;
    }

    .box-extrafields button {
        border-color: #006a94;
        color: #006a94;
    }

    .box-extrafields input[type=text], .box-extrafields input[type=password], .box-extrafields select, .box-extrafields textarea {
        border-color: #006a94;
    }



.box-company {
    border-color: #006a94;
}

    .box-company h1 {
        background-image: url(icons/login.png);
        background-color: #006a94;
    }

    .box-company a {
        color: #006a94;
    }

    .box-company .box-grid td {
        background-color: #006a94;
    }

    .box-company button {
        border-color: #006a94;
        color: #006a94;
    }

    .box-company input[type=text], .box-company input[type=password], .box-company select, .box-company textarea {
        border-color: #006a94;
    }



.box-transaction {
    border-color: #aaa;
}

    .box-transaction h1 {
        background-image: url(icons/transdet.png);
        background-color: #aaa;
    }

    .box-transaction a {
        color: #aaa;
    }

    .box-transaction .box-grid td {
        background-color: #aaa;
    }

    .box-transaction button {
        border-color: #aaa;
        color: #aaa;
    }

    .box-transaction input[type=text], .box-transaction input[type=password], .box-transaction select, .box-transaction textarea {
        border-color: #aaa;
    }



.box-info {
    border-color: #aaa;
}

    .box-info h1 {
        background-image: url(icons/info.png);
        background-color: #aaa;
    }

    .box-info a {
        color: #aaa;
    }

    .box-info .box-grid td {
        background-color: #aaa;
    }

    .box-info button {
        border-color: #aaa;
        color: #aaa;
    }

    .box-info input[type=text], .box-info input[type=password], .box-info select, .box-info textarea {
        border-color: #0f61a3;
    }



.box-payment {
    border-color: #0f61a3;
}

    .box-payment h1 {
        background-image: url(icons/visa.png);
        background-color: #0f61a3;
    }

    .box-payment a {
        color: #0f61a3;
    }

    .box-payment .box-grid td, .box-payment-row td {
        background-color: #0f61a3;
    }

    .box-payment button {
        border-color: #0f61a3;
        color: #0f61a3;
    }

    .box-payment input[type=text], .box-payment input[type=password], .box-payment select, .box-payment textarea {
        border-color: #0f61a3;
    }



.box-rating {
    border-color: #5fafd2;
}

    .box-rating h1 {
        background-image: url(icons/rating.png);
        background-color: #5fafd2;
    }

    .box-rating a {
        color: #5fafd2;
    }

    .box-rating .box-grid td {
        background-color: #5fafd2;
    }

    .box-rating button {
        border-color: #5fafd2;
        color: #5fafd2;
    }

    .box-rating input[type=text], .box-rating input[type=password], .box-rating select, .box-rating textarea {
        border-color: #5fafd2;
    }



.box-user {
    border-color: #0086bc;
}

    .box-user h1 {
        background-image: url(icons/guest.png);
        background-color: #0086bc;
    }

    .box-user a {
        color: #0086bc;
    }

    .box-user .box-grid td {
        background-color: #0086bc;
    }

    .box-user button {
        border-color: #0086bc;
        color: #0086bc;
    }

    .box-user input[type=text], .box-user input[type=password], .box-user select, .box-user textarea {
        border-color: #0086bc;
    }



.box-active {
    border-color: #006a94;
}

    .box-active h1 {
        background-image: url(icons/detail.png);
        background-color: #006a94;
    }

    .box-active a {
        color: #006a94;
    }

    .box-active .box-grid td {
        background-color: #006a94;
    }

    .box-active button {
        border-color: #006a94;
        color: #006a94;
    }

    .box-active input[type=text], .box-active input[type=password], .box-active select, .box-active textarea {
        border-color: #006a94;
    }



.box-inactive {
    border-color: #aaa;
}

    .box-inactive legend {
        color: #777;
    }

    .box-inactive h1 {
        background-image: url(icons/detail.png);
        background-color: #aaa;
    }

    .box-inactive a {
        color: #aaa;
    }

    .box-inactive .box-grid td {
        background-color: #aaa;
    }

    .box-inactive button {
        border-color: #aaa;
    }

    .box-inactive input[type=text], .box-inactive input[type=email], .box-inactive input[type=tel], .box-inactive input[type=password], .box-inactive select, .box-inactive textarea {
        border-color: #aaa;
    }






.box-find h1 {
    background-image: url(icons/user_find.png);
}

.dark-box {
    border-color: #006a94;
}

    .dark-box h1 {
        background-color: #006a94;
    }

    .dark-box a {
        color: #006a94;
    }

    .dark-box .box-grid td {
        background-color: #006a94;
    }

    .dark-box button {
        border-color: #006a94;
        color: #006a94;
    }

    .dark-box input[type=text], .dark-box input[type=password], .dark-box select, .dark-box textarea {
        border-color: #006a94;
    }



.med-box {
    border-color: #0086bc;
}

    .med-box h1 {
        background-color: #0086bc;
    }

    .med-box a {
        color: #0086bc;
    }

    .med-box .box-grid td {
        background-color: #0086bc;
    }

    .med-box button {
        border-color: #0086bc;
        color: #0086bc;
    }

    .med-box input[type=text], .med-box input[type=password], .med-box select, .med-box textarea {
        border-color: #0086bc;
    }



.lit-box {
    border-color: #5fafd2;
}

    .lit-box h1 {
        background-color: #5fafd2;
    }

    .lit-box a {
        color: #5fafd2;
    }

    .lit-box .box-grid td {
        background-color: #5fafd2;
    }

    .lit-box button {
        border-color: #5fafd2;
        color: #5fafd2;
    }

    .lit-box input[type=text], .lit-box input[type=password], .lit-box select, .lit-box textarea {
        border-color: #5fafd2;
    }


.box-active .box-telecash-row td {
    background-color: #bb211f;
}

.box-active .box-visa-row td {
    background-color: #0f61a3;
}

.box-active .box-ecocash-row td {
    background-color: #f00;
}

.box-active .box-onemoney-row td {
    background-color: #F68B1E;
}

.box-active .box-vpayments-row td {
    background-color: #5d538f;
}

.box-active .box-mastercard-row td {
    background-color: #edb802;
}


.box-active div.box-telecash-row {
    background-color: #bb211f;
}

.box-active div.box-visa-row {
    background-color: #0f61a3;
}

.box-active div.box-ecocash-row {
    background-color: #f00;
}

.box-active div.box-onemoney-row {
    background-color: #F68B1E;
}

.box-active div.box-vpayments-row {
    background-color: #5d538f;
}

.box-active div.box-mastercard-row {
    background-color: #edb802;
}



.box-ecocash-row,
.box-onemoney-row,
.box-telecash-row,
.box-visa-row,
.box-mastercard-row,
.box-vpayments-row {
    color: #fff;
}

/* DATE PICKER */
input.date {
    width: 90px !important;
    background: #FFF url(/content/datepicker.png) no-repeat 6px center !important;
    padding-left: 26px !important;
}

/* UPLOAD PROGRESS BAR */

#uploadProgress {
    display: block;
    height: 20px;
    width: 200px;
}

pre {
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

/* DISABLE PAGE */
#disablepage {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.4;
    filter: alpha(opacity=40);
    display: none;
    z-index: 97;
}

#modalcontainer {
    display: none;
    overflow: auto;
    z-index: 98;
    padding: 0;
    margin: 0;
}

    #modalcontainer h3 {
        font: bold 11px 'SFUI-Text',Arial,sans-serif;
        padding: 5px;
        margin: 3px;
        cursor: move;
    }

#loading {
    display: none;
    width: 100px;
    font-weight: bold;
    color: #666;
    border: 3px solid #999;
    background: #FFF;
    padding: 15px;
    z-index: 99;
}

/* FILTER BOX */
div.filter {
    border: 1px solid #EEE;
    background-color: #F9F9F9;
    padding: 10px;
    margin-bottom: 10px;
}


/* CUSTOM BUTTONS */

button {
    font-weight: normal;
    font-family: 'SFUI-Text',Arial,sans-serif;
    border: 1px solid;
    background-color: white;
    cursor: pointer;
    margin: 0;
    padding: 9px 12px;
    white-space: nowrap;
    width: auto;
    overflow: visible;
    vertical-align: middle;
    border: 1px solid #0066ae;
    color: #0066ae;
    border-radius: 4px;
    line-height: 20px;
}

    button em {
        vertical-align: text-bottom;
        margin: 0 3px 0 0;
        display: inline-block;
        width: 16px;
        height: 16px;
        margin-top: 3px;
        background-image: url(/content/themes/paynow/images/ui-icons_0066ae_256x240.png);
    }

    button span {
        display: inline-block;
        padding: 0 2px;
        margin-top: 2px;
        vertical-align: top;
    }

.buttonpicture-email {
    background-position: -80px -96px;
}

.buttonpicture-delete {
    background-position: -176px -96px;
}

.buttonpicture-add {
    background-position: -16px -128px;
}

.buttonpicture-pdf {
    background-position: -32px -96px;
}

.buttonpicture-edit {
    background-position: -64px -112px;
}

.buttonpicture-refresh {
    background-position: -64px -80px;
}

.buttonpicture-save {
    background-position: -96px -112px;
}

.buttonpicture-cancel {
    background-position: -80px -128px;
}

.buttonpicture-dropdown {
    background-position: -64px -15px;
}

.buttonpicture-next {
    background-position: -32px -16px;
}

.buttonpicture-back {
    background-position: -96px -16px;
}

.buttonpicture-find {
    background-position: -160px -112px;
}

.buttonpicture-browse {
    background-position: -16px -96px;
}

.buttonpicture-none {
    background: none;
}

.buttonmenu {
    display: none;
}

.contextMenuLoading {
    width: 120px;
    padding: 5px;
    position: absolute;
    color: #E00;
    border: solid 1px #F66;
    background: #FEE;
}

.contextMenu li.title {
    color: #FFF;
    font-weight: bold;
    line-height: 23px;
    text-align: center;
    vertical-align: middle;
    cursor: default;
    border-bottom: solid 1px #999;
}

/* JQGRID ALTERATIONS AND EXTRAS */
#GridInfo {
    height: 20px;
    display: block;
    border: 1px solid #F33;
    border-bottom: none;
    background-color: #FEE;
    color: #F33;
    text-align: center;
    padding-top: 7px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
}

a.ui-icon, a.ui-icon-withtext {
    vertical-align: middle;
    margin: 1px;
    display: inline-block;
    *float: left;
    *display: block;
}

.ui-jqgrid .ui-pg-input {
    width: auto;
}

/* SCROLLABLE CHECKBOX LIST (AKA SELECT LIST WITH CHECKBOXES) */

.scroll_checkboxes {
    height: 120px;
    width: 130px;
    padding: 3px;
    overflow: auto;
    border: 1px solid #ccc;
    background: #FFF;
    clear: left;
}

    .scroll_checkboxes span {
        white-space: nowrap;
        display: block;
    }

        .scroll_checkboxes span label {
            display: inline !important;
            margin-left: 3px;
        }

input.search {
    width: 77px;
    margin-bottom: 1px;
    margin-right: 1px;
    padding-left: 20px;
    background: #FFF url(./icons/search.png) no-repeat 1px 1px;
}

/* WARNING AND MESSAGE BOX STUFF */
.warningbox a, .infobox a, .successbox a {
    color: Blue;
    text-decoration: underline;
}

.warningbox-row {
    vertical-align: middle !important;
    color: #E00 !important;
    background: #FEE !important;
}

    .warningbox-row img {
        vertical-align: bottom !important;
    }

.successbox, .warningbox, .infobox {
    margin-bottom: 10px;
    -moz-box-shadow: 0px 2px 3px #666;
    -webkit-box-shadow: 0px 2px 3px #666;
    box-shadow: 0px 2px 3px #666;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=180, Color='#BBBBBB')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=180, Color='#BBBBBB');
    width: 100%;
}

    .successbox pre, .warningbox pre, .infobox pre {
        white-space: normal;
    }

    .successbox td, .warningbox td, .infobox td, div.warningbox, div.successbox, div.infobox {
        color: #000;
        position: relative;
        font-weight: normal;
        display: block;
        padding: 10px 34px 10px 10px !important;
        text-align: left;
        min-height: 13px;
    }

.warningbox {
    color: #E00;
    border: solid 1px #F66;
}

    .warningbox td, div.warningbox {
        background: #FFDFE5 url(./errbox_bg.gif) repeat-x;
        background-size: contain;
    }

.infobox {
    color: #F0B400;
    border: solid 1px #FFBF00;
}

    .infobox td, div.infobox {
        background: #FFF0AE url(./infobox_bg.gif) repeat-x;
        background-size: contain;
    }

.warningbox-line {
    color: #E00;
    font-weight: normal;
    margin-left: 15px;
}

.successbox {
    color: #090;
    border: solid 1px #393;
}

    .successbox td, div.successbox {
        background: #E6FFDF url(./msgbox_bg.gif) repeat-x;
        background-size: contain;
    }

.successbox-line {
    color: #090;
    font-weight: normal;
    margin-left: 15px;
}

.alert .closeButton, .successbox .closeButton, .warningbox .closeButton, .infobox .closeButton {
    position: absolute;
    width: 16px;
    height: 16px;
    top: 9px;
    right: 8px;
    cursor: pointer;
}

.alert-error .closeButton, .warningbox .closeButton {
    background: url(./closeRedCold.png);
}

    .alert-error .closeButton:hover, .warningbox .closeButton:hover {
        background: url(./closeRedHot.png);
    }

.alert-info .closeButton, .infobox .closeButton {
    background: url(./closeYellowCold.png);
}

.alert-info .closeButton:hover, .infobox .closeButton:hover {
        background: url(./closeYellowHot.png);
    }

.alert-message .closeButton, .successbox .closeButton:hover {
    background: url(./closeGreenCold.png);
}

    .alert-message .closeButton:hover, .successbox .closeButton {
        background: url(./closeGreenHot.png);
    }

/* AUTOCOMPLETE */

input.autocomplete {
    width: 200px !important;
}


/* STRIPED ROW IN REPORTS */
tr.stripeRow td {
    background-color: #F0F0F0;
}

/* TAB ALTERATIONS 
div#tabs
{
    display: none;
}
*/

.content h1, .content h2 {
    padding-top: 20px;
}

.content li {
    padding-top: 10px;
}

.content a, .content a:hover, .content a:visited {
    color: #006a94;
}

ul.swhmenu {
    padding: 0;
    z-index: 99998;
    margin: 0;
}

    ul.swhmenu li {
        margin: 0;
        list-style-image: none;
        list-style-position: outside;
        list-style-type: none;
        display: block;
    }

        ul.swhmenu li a {
            color: #FFF;
        }

        ul.swhmenu > li.submenu {
            padding-right: 6px;
            background: url(/Content/submenu_downarrow.gif) no-repeat right center;
        }

    ul.swhmenu > li {
        display: inline-block;
        *display: inline;
    }

    ul.swhmenu li a {
        display: block;
        padding: 7px 10px;
        border: none;
        color: #555;
        text-decoration: none;
    }

    ul.swhmenu ul li a:hover {
        color: #FFF;
        background-color: #006a94;
    }

    ul.swhmenu > li > a {
        display: block;
        padding: 10px;
        border: none;
        color: #edf6fd;
        margin-bottom: 1px;
        text-decoration: none;
    }

        ul.swhmenu > li > a:hover {
            color: #FFF;
        }

    ul.swhmenu li ul {
        display: none;
        position: absolute;
        margin: 0;
        padding: 0;
        background-color: #FFF;
        border: 1px solid #006a94;
        z-index: 99999;
        font-size: 13px;
    }

    ul.swhmenu li:hover > ul, ul.swhmenu li:focus > ul {
        display: block;
    }

    ul.swhmenu li ul li {
        display: block;
    }

    ul.swhmenu li.submenu li.submenu > a {
        padding-right: 10px;
        background: url(/Content/submenu_rightarrow_dark.gif) no-repeat right center;
    }

    ul.swhmenu li.submenu li.submenu {
        padding-right: 10px;
    }

    ul.swhmenu li.submenu li.submenu:hover {
        background-color: #006a94;
    }

ul.swhmenu li.submenu li.submenu:hover > a {
    color: #FFF;
    padding-right: 10px;
    background: url(/Content/submenu_rightarrow.gif) no-repeat right center;
    background-color: #006a94;
}

ul.swhmenu li.submenu li.submenu:hover ul {
    display: block;
    left: 100%;
    top: 100%;
    margin-top: -33px;
    width: 100%;
    background-color: white;
    color: #555;
}

.ui-jqgrid {
    position: relative
}

    .ui-jqgrid .ui-jqgrid-view {
        position: relative;
        left: 0;
        top: 0;
        padding: .0em;
        font-size: 14px
    }

    .ui-jqgrid .ui-jqgrid-titlebar {
        padding: .3em .2em .2em .3em;
        position: relative;
        border-left: 0 none;
        border-right: 0 none;
        border-top: 0 none
    }

    .ui-jqgrid .ui-jqgrid-title {
        float: left;
        margin: .1em 0 .2em
    }

    .ui-jqgrid .ui-jqgrid-titlebar-close {
        position: absolute;
        top: 50%;
        width: 19px;
        margin: -10px 0 0 0;
        padding: 1px;
        height: 18px
    }

        .ui-jqgrid .ui-jqgrid-titlebar-close span {
            display: block;
            margin: 1px
        }

        .ui-jqgrid .ui-jqgrid-titlebar-close:hover {
            padding: 0
        }

    .ui-jqgrid .ui-jqgrid-hdiv {
        position: relative;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
        border-left: 0 none !important;
        border-top: 0 none !important;
        border-right: 0 none !important
    }

    .ui-jqgrid .ui-jqgrid-hbox {
        float: left;
        padding-right: 20px
    }

    .ui-jqgrid .ui-jqgrid-htable {
        table-layout: fixed;
        margin: 0
    }

        .ui-jqgrid .ui-jqgrid-htable th {
            height: 22px;
            padding: 4px 2px
        }

            .ui-jqgrid .ui-jqgrid-htable th div {
                overflow: hidden;
                position: relative;
                height: 17px
            }

            .ui-th-column, .ui-jqgrid .ui-jqgrid-htable th.ui-th-column {
                overflow: hidden;
                white-space: nowrap;
                text-align: center;
                border-top: 0 none;
                border-bottom: 0 none
            }

            .ui-th-ltr, .ui-jqgrid .ui-jqgrid-htable th.ui-th-ltr {
                border-left: 0 none
            }

            .ui-th-rtl, .ui-jqgrid .ui-jqgrid-htable th.ui-th-rtl {
                border-right: 0 none
            }

.ui-first-th-ltr {
    border-right: 1px solid
}

.ui-first-th-rtl {
    border-left: 1px solid
}

.ui-jqgrid .ui-th-div-ie {
    white-space: nowrap;
    zoom: 1;
    height: 17px
}

.ui-jqgrid .ui-jqgrid-resize {
    height: 20px !important;
    position: relative;
    cursor: e-resize;
    display: inline;
    overflow: hidden
}

.ui-jqgrid .ui-grid-ico-sort {
    overflow: hidden;
    position: absolute;
    display: inline;
    cursor: pointer !important
}

.ui-jqgrid .ui-icon-asc {
    margin-top: -3px;
    height: 12px
}

.ui-jqgrid .ui-icon-desc {
    margin-top: 3px;
    height: 12px
}

.ui-jqgrid .ui-i-asc {
    margin-top: 0;
    height: 16px
}

.ui-jqgrid .ui-i-desc {
    margin-top: 0;
    margin-left: 13px;
    height: 16px
}

.ui-jqgrid .ui-jqgrid-sortable {
    cursor: pointer
}

.ui-jqgrid tr.ui-search-toolbar th {
    border-top-width: 1px !important;
    border-top-color: inherit !important;
    border-top-style: ridge !important
}

tr.ui-search-toolbar input {
    margin: 1px 0 0 0
}

tr.ui-search-toolbar select {
    margin: 1px 0 0 0
}

.ui-jqgrid .ui-jqgrid-bdiv {
    position: relative;
    margin: 0;
    padding: 0;
    overflow: auto;
    text-align: left
}

.ui-jqgrid .ui-jqgrid-btable {
    table-layout: fixed;
    margin: 0;
    outline-style: none
}

.ui-jqgrid tr.jqgrow {
    outline-style: none
}

.ui-jqgrid tr.jqgroup {
    outline-style: none
}

.ui-jqgrid tr.jqgrow td {
    font-weight: normal;
    overflow: hidden;
    height: 22px;
    padding: 3px;
    padding-right: 6px;
    border-bottom-width: 1px;
    border-bottom-color: inherit;
    border-bottom-style: dotted
}

.ui-jqgrid tr.jqgfirstrow td {
    padding: 0 2px 0 2px;
    border-right-width: 1px;
    border-right-style: solid
}

.ui-jqgrid tr.jqgroup td {
    font-weight: normal;
    overflow: hidden;
    white-space: pre;
    height: 22px;
    padding: 0 2px 0 2px;
    border-bottom-width: 1px;
    border-bottom-color: inherit;
    border-bottom-style: solid
}

.ui-jqgrid tr.jqfoot td {
    font-weight: bold;
    overflow: hidden;
    white-space: pre;
    height: 22px;
    padding: 0 2px 0 2px;
    border-bottom-width: 1px;
    border-bottom-color: inherit;
    border-bottom-style: solid
}

.ui-jqgrid tr.ui-row-ltr td {
    text-align: left;
    border-right-width: 1px;
    border-right-color: inherit;
    border-right-style: dotted
}

.ui-jqgrid tr.ui-row-rtl td {
    text-align: right;
    border-left-width: 1px;
    border-left-color: inherit;
    border-left-style: solid
}

.ui-jqgrid td.jqgrid-rownum {
    padding: 0 2px 0 2px;
    margin: 0;
    border: 0 none
}

.ui-jqgrid .ui-jqgrid-resize-mark {
    width: 2px;
    left: 0;
    background-color: #777;
    cursor: e-resize;
    cursor: col-resize;
    position: absolute;
    top: 0;
    height: 100px;
    overflow: hidden;
    display: none;
    border: 0 none;
    z-index: 99999
}

.ui-jqgrid .ui-jqgrid-sdiv {
    position: relative;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-left: 0 none !important;
    border-top: 0 none !important;
    border-right: 0 none !important
}

.ui-jqgrid .ui-jqgrid-ftable {
    table-layout: fixed;
    margin-bottom: 0
}

.ui-jqgrid tr.footrow td {
    font-weight: bold;
    overflow: hidden;
    white-space: nowrap;
    height: 21px;
    padding: 0 2px 0 2px;
    border-top-width: 1px;
    border-top-color: inherit;
    border-top-style: solid
}

.ui-jqgrid tr.footrow-ltr td {
    text-align: left;
    border-right-width: 1px;
    border-right-color: inherit;
    border-right-style: solid
}

.ui-jqgrid tr.footrow-rtl td {
    text-align: right;
    border-left-width: 1px;
    border-left-color: inherit;
    border-left-style: solid
}

.ui-jqgrid .ui-jqgrid-pager {
    border-left: 0 none !important;
    border-right: 0 none !important;
    border-bottom: 0 none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    font-size: 14px
}

.ui-jqgrid .ui-pager-control {
    position: relative
}

.ui-jqgrid .ui-pg-table {
    position: relative;
    padding-bottom: 2px;
    width: auto;
    margin: 0
}

    .ui-jqgrid .ui-pg-table td {
        font-weight: normal;
        vertical-align: middle;
        padding: 1px
    }

.ui-jqgrid .ui-pg-button {
    height: 19px !important
}

    .ui-jqgrid .ui-pg-button span {
        display: block;
        margin: 1px;
        float: left
    }

    .ui-jqgrid .ui-pg-button:hover {
        padding: 0
    }

.ui-jqgrid .ui-state-disabled:hover {
    padding: 1px
}

.ui-jqgrid .ui-pg-input {
    height: 13px;
    font-size: .8em;
    margin: 0
}

.ui-jqgrid .ui-pg-selbox {
    font-size: .8em;
    line-height: 22px;
    display: block;
    height: 22px;
    margin: 0
}

.ui-jqgrid .ui-separator {
    height: 18px;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    margin: 1px;
    float: right
}

.ui-jqgrid .ui-paging-info {
    font-weight: normal;
    height: 19px;
    margin-top: 3px;
    margin-right: 4px
}

.ui-jqgrid .ui-jqgrid-pager .ui-pg-div {
    padding: 1px 0;
    float: left;
    position: relative
}

.ui-jqgrid .ui-jqgrid-pager .ui-pg-button {
    cursor: pointer
}

.ui-jqgrid .ui-jqgrid-pager .ui-pg-div span.ui-icon {
    float: left;
    margin: 0 2px
}

.ui-jqgrid td input, .ui-jqgrid td select .ui-jqgrid td textarea {
    margin: 0
}

.ui-jqgrid td textarea {
    width: auto;
    height: auto
}

.ui-jqgrid .ui-jqgrid-toppager {
    border-left: 0 none !important;
    border-right: 0 none !important;
    border-top: 0 none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
    height: 25px !important;
    white-space: nowrap;
    overflow: hidden
}

    .ui-jqgrid .ui-jqgrid-toppager .ui-pg-div {
        padding: 1px 0;
        float: left;
        position: relative
    }

    .ui-jqgrid .ui-jqgrid-toppager .ui-pg-button {
        cursor: pointer
    }

    .ui-jqgrid .ui-jqgrid-toppager .ui-pg-div span.ui-icon {
        float: left;
        margin: 0 2px
    }

.ui-jqgrid .ui-jqgrid-btable .ui-sgcollapsed span {
    display: block
}

.ui-jqgrid .ui-subgrid {
    margin: 0;
    padding: 0;
    width: 100%
}

    .ui-jqgrid .ui-subgrid table {
        table-layout: fixed
    }

    .ui-jqgrid .ui-subgrid tr.ui-subtblcell td {
        height: 18px;
        border-right-width: 1px;
        border-right-color: inherit;
        border-right-style: solid;
        border-bottom-width: 1px;
        border-bottom-color: inherit;
        border-bottom-style: solid
    }

    .ui-jqgrid .ui-subgrid td.subgrid-data {
        border-top: 0 none !important
    }

    .ui-jqgrid .ui-subgrid td.subgrid-cell {
        border-width: 0 0 1px 0
    }

.ui-jqgrid .ui-th-subgrid {
    height: 20px
}

.ui-jqgrid .loading {
    position: absolute;
    top: 45%;
    left: 45%;
    width: auto;
    z-index: 101;
    padding: 6px;
    margin: 5px;
    text-align: center;
    font-weight: bold;
    display: none;
    border-width: 2px !important;
    font-size: 14px
}

.ui-jqgrid .jqgrid-overlay {
    display: none;
    z-index: 100
}

* html .jqgrid-overlay {
    width: expression(this.parentNode.offsetWidth+'px');
    height: expression(this.parentNode.offsetHeight+'px')
}

* .jqgrid-overlay iframe {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: expression(this.parentNode.offsetWidth+'px');
    height: expression(this.parentNode.offsetHeight+'px')
}

.ui-jqgrid .ui-userdata {
    border-left: 0 none;
    border-right: 0 none;
    height: 21px;
    overflow: hidden
}

.ui-jqdialog {
    display: none;
    width: 300px;
    position: absolute;
    padding: 0;
    font-size: 14px;
    overflow: visible
}

    .ui-jqdialog .ui-jqdialog-titlebar {
        padding: .3em .2em;
        position: relative
    }

    .ui-jqdialog .ui-jqdialog-title {
        margin: .1em 0 .2em
    }

    .ui-jqdialog .ui-jqdialog-titlebar-close {
        position: absolute;
        top: 50%;
        width: 19px;
        margin: -10px 0 0 0;
        padding: 1px;
        height: 18px
    }

        .ui-jqdialog .ui-jqdialog-titlebar-close span {
            display: block;
            margin: 1px
        }

        .ui-jqdialog .ui-jqdialog-titlebar-close:hover, .ui-jqdialog .ui-jqdialog-titlebar-close:focus {
            padding: 0
        }

    .ui-jqdialog-content, .ui-jqdialog .ui-jqdialog-content {
        border: 0;
        padding: .3em .2em;
        background: 0;
        background-color: #FFF !important;
        height: auto
    }

    .ui-jqdialog .ui-jqconfirm {
        padding: .4em 1em;
        border-width: 3px;
        position: absolute;
        bottom: 10px;
        right: 10px;
        overflow: visible;
        display: none;
        height: 80px;
        width: 220px;
        text-align: center
    }

.ui-jqdialog-content .FormGrid {
    margin: 0
}

.ui-jqdialog-content .EditTable {
    width: 100%;
    margin-bottom: 0
}

.ui-jqdialog-content .DelTable {
    width: 100%;
    margin-bottom: 0
}

.EditTable td input, .EditTable td select, .EditTable td textarea {
    margin: 0
}

.EditTable td textarea {
    width: auto;
    height: auto
}

.ui-jqdialog-content td.EditButton {
    text-align: right;
    border-top: 0 none;
    border-left: 0 none;
    border-right: 0 none;
    padding-bottom: 5px;
    padding-top: 5px
}

.ui-jqdialog-content td.navButton {
    text-align: center;
    border-left: 0 none;
    border-top: 0 none;
    border-right: 0 none;
    padding-bottom: 5px;
    padding-top: 5px
}

.ui-jqdialog-content input.FormElement {
    padding: .3em
}

.ui-jqdialog-content .data-line {
    padding-top: .1em;
    border: 0 none
}

.ui-jqdialog-content .CaptionTD {
    vertical-align: middle;
    border: 0 none;
    padding: 2px;
    white-space: nowrap
}

.ui-jqdialog-content .DataTD {
    padding: 2px;
    border: 0 none;
    vertical-align: top
}

.ui-jqdialog-content .form-view-data {
    white-space: pre
}

.fm-button {
    display: inline-block;
    margin: 0 4px 0 0;
    padding: .4em .5em;
    text-decoration: none !important;
    cursor: pointer;
    position: relative;
    text-align: center;
    zoom: 1
}

.fm-button-icon-left {
    padding-left: 1.9em
}

.fm-button-icon-right {
    padding-right: 1.9em
}

.fm-button-icon-left .ui-icon {
    right: auto;
    left: .2em;
    margin-left: 0;
    position: absolute;
    top: 50%;
    margin-top: -8px
}

.fm-button-icon-right .ui-icon {
    left: auto;
    right: .2em;
    margin-left: 0;
    position: absolute;
    top: 50%;
    margin-top: -8px
}

#nData, #pData {
    float: left;
    margin: 3px;
    padding: 0;
    width: 15px
}

.ui-jqgrid .selected-row, div.ui-jqgrid .selected-row td {
    font-style: normal;
    border-left: 0 none
}

.ui-inline-del.ui-state-hover span, .ui-inline-edit.ui-state-hover span, .ui-inline-save.ui-state-hover span, .ui-inline-cancel.ui-state-hover span {
    margin: -1px
}

.ui-jqgrid .tree-wrap {
    float: left;
    position: relative;
    height: 18px;
    white-space: nowrap;
    overflow: hidden
}

.ui-jqgrid .tree-minus {
    position: absolute;
    height: 18px;
    width: 18px;
    overflow: hidden
}

.ui-jqgrid .tree-plus {
    position: absolute;
    height: 18px;
    width: 18px;
    overflow: hidden
}

.ui-jqgrid .tree-leaf {
    position: absolute;
    height: 18px;
    width: 18px;
    overflow: hidden
}

.ui-jqgrid .treeclick {
    cursor: pointer
}

* iframe.jqm {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: expression(this.parentNode.offsetWidth+'px');
    height: expression(this.parentNode.offsetHeight+'px')
}

.ui-jqgrid-dnd tr td {
    border-right-width: 1px;
    border-right-color: inherit;
    border-right-style: solid;
    height: 20px
}

.ui-jqgrid .ui-jqgrid-title-rtl {
    float: right;
    margin: .1em 0 .2em
}

.ui-jqgrid .ui-jqgrid-hbox-rtl {
    float: right;
    padding-left: 20px
}

.ui-jqgrid .ui-jqgrid-resize-ltr {
    float: right;
    margin: -2px -2px -2px 0
}

.ui-jqgrid .ui-jqgrid-resize-rtl {
    float: left;
    margin: -2px 0 -1px -3px
}

.ui-jqgrid .ui-sort-rtl {
    left: 0
}

.ui-jqgrid .tree-wrap-ltr {
    float: left
}

.ui-jqgrid .tree-wrap-rtl {
    float: right
}

.ui-jqgrid .ui-ellipsis {
    text-overflow: ellipsis
}