.divFooterAccordion .form-field input[type="date"],
.divFooterAccordion .form-field input[type="text"],
.divFooterAccordion .form-field textarea,
.divFooterAccordion .form-field input[type="tel"],
.divFooterAccordion .form-field input[type="email"],
.divFooterAccordion .form-field select,
.divFooterAccordion .form-field input[type="number"],
.divFooterAccordion .form-field input[type="time"],
.divFooterAccordion input.inline-table-field[type="date"],
.divFooterAccordion input.inline-table-field[type="text"],
.divFooterAccordion textarea.inline-table-field,
.divFooterAccordion input.inline-table-field[type="tel"],
.divFooterAccordion input.inline-table-field[type="email"],
.divFooterAccordion select.inline-table-field, input.inline-table-field[type="number"],
.divFooterAccordion input.inline-table-field[type="time"] {
    width: 100%;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #A5A5A5;
    background-color: white;
    font-size:12px
}
.divFooterAccordion .responsive-table {font-size:12px}
.divFooterAccordion #divCaptureCardDetails .form-field input[type="text"] {width: 97%}
.divFooterAccordion .form-field-label + select {
    height: auto
}
.divFooterAccordion.ui-widget input {font-size:12px}
.divFooterAccordion [type="radio"]:checked + span {
    font-size: inherit
}
.payment-method-details-table [type="radio"]:checked + span:after,
.payment-method-details-table [type="radio"].with-gap:checked + span:before,
.payment-method-details-table [type="radio"].with-gap:checked + span:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
[type="radio"] + span:before,
[type="radio"] + span:after {
    border-radius: 50%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.divFooterAccordion [type="radio"]:not(:checked) + span, 
.divFooterAccordion [type="radio"]:checked + span {
    font-size: 12px; /* Styles in sitetheme.css stylesheet overwritten to be in line with current/old styling.*/
}

.divFooterAccordion {
    /*font-family: "Source Sans Pro", sans-serif; Changed to match current/old styling 
    font-size: 1em;*/
    color: #333;
    font-size: 12px;
}

.divFooterAccordion .h3FooterTotalTripCost.ui-accordion-header-collapsed .ui-icon,
.divFooterAccordion .h3FooterTotalTripCost.ui-state-hover .ui-icon,
.divFooterAccordion .h3FooterTotalTripCost.ui-state-focus .ui-icon,
.divFooterAccordion .ui-icon,
.divFooterAccordion .h3FooterTotalTripCost.yellow.ui-accordion-header-active .ui-icon {
    background-image: url("../images/shopping_cart_black_24x24.png");
}



.divFooterAccordion .h3FooterTotalTripCost.ui-accordion-header-active .ui-icon {
    background-image: url("../images/shopping_cart_white_24x24.png");
}



.divFooterAccordion .h3FooterCostCenter.ui-accordion-header-collapsed .ui-icon, 
.divFooterAccordion .h3FooterCostCenter .ui-icon:focus, 
.divFooterAccordion .h3FooterCostCenter.ui-state-hover .ui-icon, 
.divFooterAccordion .h3FooterCostCenter.ui-state-focus .ui-icon, 
.h3FooterCostCenter .ui-icon, 
.divFooterAccordion .h3FooterCostCenter.yellow.ui-accordion-header-active .ui-icon {
    background-image: url("../images/pie_chart_black_24x24.png");
}

.divFooterAccordion .h3FooterCostCenter.ui-accordion-header-active .ui-icon {
    background-image: url("../images/pie_chart_white_24x24.png");
}

.divFooterAccordion .h3FooterPaymentMethod.ui-accordion-header-collapsed .ui-icon, 
.divFooterAccordion .h3FooterPaymentMethod.ui-state-hover .ui-icon, 
.divFooterAccordion .h3FooterPaymentMethod.ui-state-focus .ui-icon, 
.h3FooterPaymentMethod .ui-icon, 
.divFooterAccordion .h3FooterPaymentMethod.yellow.ui-accordion-header-active .ui-icon {
    background-image: url("../images/credit_card_black_24x24.png");
}

.divFooterAccordion .h3FooterPaymentMethod.ui-accordion-header-active .ui-icon {
    background-image: url("../images/credit_card_black_24x24.png"); /* Changed to accommodate current styling. The original image was ../images/credit_card_white_24x24.png */
}
.divFooterAccordion .h3FooterPaymentMethod.ui-accordion-header-active.red .ui-icon {
    background-image: url("../images/credit_card_white_24x24.png"); /* Changed to accommodate current styling. The original image was ../images/credit_card_white_24x24.png */
}

.divFooterAccordion .h3FooterClientAccount.ui-accordion-header-collapsed .ui-icon, 
.divFooterAccordion .h3FooterClientAccount.ui-state-hover .ui-icon, 
.divFooterAccordion .h3FooterClientAccount.ui-state-focus .ui-icon, 
.h3FooterPaymentMethod .ui-icon, 
.divFooterAccordion .h3FooterClientAccount.yellow.ui-accordion-header-active .ui-icon {
    background-image: url("../images/settings_black_24x24.png");
}

.divFooterAccordion .h3FooterClientAccount.ui-accordion-header-active .ui-icon {
    background-image: url("../images/settings_white_24x24.png");
}


.divFooterAccordion h3.ui-accordion-header:focus {
    outline: none
}

.divFooterAccordion h3.ui-accordion-header::before {
    content: "";
    width: 5px;
    min-height: 38px;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
}

.divFooterAccordion h3.ui-accordion-header {
    overflow: hidden;
    font-weight: 600;
}

.divFooterAccordion  h3.ui-accordion-header.ui-accordion-header-active::before {
    content: none
}

.divFooterAccordion h3.ui-accordion-header.grey::before,
.divFooterAccordion h3.ui-accordion-header-active.grey {
    background: #888;
    border-color: #888;
    color: #FFFFFF;
    background-image: url("../images/keyboard_arrow_up-24px-white.png");
    background-position: 99% 50%;
    background-repeat: no-repeat;
}

    .divFooterAccordion h3.ui-accordion-header.orange::before,
    .divFooterAccordion h3.ui-accordion-header-active.orange {
        background: #FFAA00; /* Colour changed to match old/current styling. Original colour was #42B31E */
        border-color: #FFAA00; /* Colour changed to match old/current styling. Original colour was #42B31E */
        color: #FFFFFF; /* Colour changed to match old/current styling. Original colour was #fff */
        background-image: url("../images/keyboard_arrow_up-24px-white.png");
        background-position: 99% 50%;
        background-repeat: no-repeat;
        height: 100%;
    }


    .divFooterAccordion h3.ui-accordion-header.green::before,
    .divFooterAccordion h3.ui-accordion-header-active.green {
        background: #ADDE9E; /* Colour changed to match old/current styling. Original colour was #42B31E */
        border-color: #ADDE9E; /* Colour changed to match old/current styling. Original colour was #42B31E */
        color: #414141; /* Colour changed to match old/current styling. Original colour was #fff */
        background-image: url("../images/keyboard_arrow_up-24px-white.png");
        background-position: 99% 50%;
        background-repeat: no-repeat;
        height: 100%;
    }

.divFooterAccordion h3.ui-accordion-header.yellow::before,
.divFooterAccordion h3.ui-accordion-header-active.yellow {
    background: #FFFFA4;
    color: #555;
    color: #000000;
    background-image: url("../images/keyboard_arrow_up-24px-white.png");
    background-position: 99% 50%;
    background-repeat: no-repeat;
}

.divFooterAccordion h3.ui-accordion-header.blue::before,
.divFooterAccordion h3.ui-accordion-header-active.blue {
    background: #00b4f7;
    border-color: #00b4f7;
    color: #FFFFFF;
    background-image: url("../images/keyboard_arrow_up-24px-white.png");
    background-position: 99% 50%;
    background-repeat: no-repeat;
}

.divFooterAccordion h3.ui-accordion-header.red::before,
.divFooterAccordion h3.ui-accordion-header-active.red {
    background: #cc0000;
    border-color: #cc0000;
    color: #FFFFFF;
    background-image: url("../images/keyboard_arrow_up-24px-white.png");
    background-position: 99% 50%;
    background-repeat: no-repeat;
}
.divFooterAccordion h3.ui-accordion-header-active {
    border-radius: 3px 3px 0px 0px;
}
.divFooterAccordion h3.ui-accordion-header-active.ui-state-hover {
    border-radius: 3px 3px 0px 0px;
}
.divFooterAccordion .ui-accordion-header {
    padding: .68em .5em .5em .7em;
    border: 1px solid #c5c5c5;
    background: #f6f6f6;
    color: #454545;
    background-image: url("../images/keyboard_arrow_down-24px-black.png");
    background-position: 99% 50%;
    background-repeat: no-repeat;
    border-radius: 3px;
    font-size: 12px; /* match with old/current styling */
}
.divFooterAccordion .ui-accordion-header.ui-state-hover {
    padding: .68em .5em .5em .7em;
    border: 1px solid #cccccc;
    background: #ededed;
    color: #454545;
    background-image: url("../images/keyboard_arrow_down-24px-black.png");
    background-position: 99% 50%;
    background-repeat: no-repeat;
    border-radius: 3px;
}

#divCaptureCardDetails .form-field {margin-bottom:20px}


.divFooterAccordion .ui-accordion-header .ui-icon {
    background-position: 50% 50%;
    background-size: contain;
    width: 16px; /* Size of icon was made smaller to be in line with old/current site design. Original value was 24px */
    height: 16px; /* Size of icon was made smaller to be in line with old/current site design. Original value was 24px */
    margin-right: 5px
}

.divFooterAccordion .divFooterTotalTripCost,
.divFooterAccordion .divFooterCostCenter,
.divFooterAccordion .divFooterPaymentMethod {
    border-radius: 0px 0px 3px 3px;
}

.divFooterAccordion .grey-btn {
    background-image: linear-gradient(rgba(252,252,252), rgb(217,215,215));
    border-radius: 5px;
    /*padding: 9px;  Omitted to be in line with old/current styling. */
    height: auto;
    border: #AAAAAA solid 1px
}

.divFooterAccordion .grey-btn:hover {
    cursor: pointer;
    box-shadow: none;
    border: none;
    border: #AAAAAA solid 1px;
    background-image: linear-gradient(rgba(217,215,215), rgb(238,238,238));
}
    .divFooterAccordion .currency-table-field {
        text-align: right
    }

.info_btn {
    display: inline-block;
    margin: 0 auto;
    background-image: url("../images/info_outline_grey_24x24.png");
    background-repeat: no-repeat;
    width: 58px;
    height: 18px;
    padding: 20px;
    background-color: #fafafa;
    border: solid 1px #ccc;
    text-align: center;
    background-position: 50% 50%;
}

.info_btn:hover {
    background-image: url("../images/info_outline_black_24x24.png");
    cursor: pointer
}
.delete_btn {
    background-image: url("../images/delete_forever_24px-grey.png");
    background-repeat: no-repeat;
    display: block;
    border: solid 1px #ccc;
    margin: auto;
    width: 58px;
    height: 18px;
    text-align: center;
    background-position: center;
    padding: 20px;
    background-color: #fafafa
}

    .delete_btn:hover {
        cursor: pointer;
        background-image: url("../images/delete_forever_24px-red.png")
    }


.divFooterAccordion .form-field-label {
    font-size: 0.85em;
    display: block;
    color: #777
}

.payment-methods-accepted li {
    width: 45%;
    margin-right: 5%;
    float: left
}

.payment-methods-accepted li:last-child {
    margin-right: 0
}

.divFooterBelowAccordion {padding:0 10px}
.divFooterBelowAccordion .missed_savings_total {
    background-color: #cc0000;
    color: #fff;
    padding: 2px 5px;
    display: block;
    text-align: center
}

.divFooterBelowAccordion .orange-btn {
    background-color: #ffa500;
    color: #000;
    border: none;
    border-radius: 5px;
    padding: 10px;
    height: auto;
}

.divFooterBelowAccordion .orange-btn:hover {
    cursor: pointer;
    box-shadow: none;
    border: none;
    background-color: #ffc862;
}

.old-styling .form-field input, .old-styling .form-field select {
    height: auto
}

@media only screen and (min-width:1025px) {
    .payment-methods-accepted li {
        max-width: 45%;
        margin-right: 5%;
        float: left
    }

        .payment-methods-accepted li:nth-child(2n+1) {
            clear: left
        }
}
@media only screen and (max-width: 760px), 
    (min-device-width: 768px) and (max-device-width: 1024px), 
    (max-width:1024px) {
        .tblFooterCostCenterTable > tfoot > tr > td.tdCostCentreSelected {content: "CC Description"}
        .tblFooterCostCenterTable > tfoot > tr > td.tdCostCentrePercentage {
            content: "Percentage"
        }
        .tblFooterCostCenterTable > tfoot > tr > td.tdCostCentreAmount {
            content: "Amount"
        }
        .tblFooterCostCenterTable > tfoot > tr > td:nth-of-type(4):before {content: ""}
        .payment-method-details-table > tbody > tr > td:nth-of-type(1):before {content: "Card Desc."}
        .payment-method-details-table > tbody > tr > td:nth-of-type(2):before {content: "Card Type"}
        .payment-method-details-table > tbody > tr > td:nth-of-type(3):before {content: "Card Holder"}
        .payment-method-details-table > tbody > tr > td:nth-of-type(4):before {content: "Card Number"}
        .payment-method-details-table > tbody > tr > td:nth-of-type(5):before {content: "Expiry date"}
        .responsive-table.tblFooterCostCenterTable > tbody > tr > td,
        .responsive-table.tblFooterCostCenterTable > tfoot > tr > td,
        .responsive-table.payment-method-details-table > tbody > tr > td,
        .responsive-table.payment-method-details-table > tfoot > tr > td {
            min-height: 40px;
            line-height:40px
        }
        .responsive-table.tblFooterCostCenterTable td:before,
        .responsive-table.payment-method-details-table td:before {
            white-space: initial;
        }
        .tblFooterCostCenterTable  tr {border-bottom:none}
}
@media only screen and (min-width:601px) {
    .divFooterBelowAccordion .missed_savings_total {
        float: right;
        display: inline-block
    }
    .floatrightondesktop {float:right}
    .cost-centre-footer td {height:67px}
}
@media only screen and (min-width:601px) and (max-width:1024px) {
    .payment-methods-accepted li {
        max-width: 30%;
        margin-right: 5%;
        float: left
    }

        .payment-methods-accepted li:nth-child(2n+1) {
            clear: left
        }
}