html {
    position: relative;
    min-height: 100%;
}

body {
    /* Margin bottom by footer height */
    margin-bottom: 60px;
    width: 80%;
    margin: auto;
    /*background: #f3f3f3;*/
    font-family: Lato,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;
    font-weight: 400;
    line-height: 1.5;
    color: #444;
    -webkit-font-smoothing: antialiased;
}

.cph-header-logo {
    padding-top: 10px;
    padding-bottom: 10px;
}

.footer {
    bottom: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 60px;
    background-color: white;
    font-size: 10px;
    margin: auto;
}

p, label, span, h4, h5 {
    word-wrap: break-word;
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
    background-color: #8f4552;
    color: white;
}

.nav-pills > li > a:hover,
.nav-pills > li > a:focus, .nav .open > a, .nav .open > a:focus, .nav .open > a:hover {
    background-color: grey;
    color: white;
}

.nav > li > a {
    padding: 8px 15px;
    color: #8f4552;
}

.btn:active, .btn:focus, .btn:hover {
    outline: none;
}

.pay-now-button{
    padding-left: 30px;
    padding-right: 30px;
}

.caret {
    position: absolute;
    right: 1%;
    top: 49%;
    margin-right: 4px;
}

#paymentOptionMore{
    padding-right: 19px;
}

.btn-dropdown {
    min-width: 0px;
    padding: 0px;
}

#submitFormLink, #chequeSubmitFormLink, #mpaisaSubmitFormLink {
    background-color: #8f4552;
    color: white;
    font-weight: bold;
}

#submitFormLink:hover, #chequeSubmitFormLink:hover, #mpaisaSubmitFormLink:hover {
    background-image: linear-gradient(to bottom,#458f82 0,#458f82 100%) !important;
    color: white;
    font-weight: bold;
}

.pay-now-button, .pay-now-button:active, .pay-now-button:focus, .pay-now-button:visited {
    background-color: #8f4552;
    color: white;
    font-weight: bold;
}

    .pay-now-button:hover {
        background-color: #458f82;
        color: white;
        font-weight: bold;
    }

.pay-now-cancel:hover, .pay-now-cancel:focus {
    background-color: #d1d1d1;
}

.pay-now-cancel {
    background-color: #efefef;
    margin-right: 5px;
}

.payment-icon {
    color: #8f4552;
    padding-right: 5px;
}

.payment-icon-selected {
    color: white;
    padding-right: 5px;
}

.payment-option-container .btn:hover, .payment-option-container .btn:focus {
    background-color: #8f4552;
}
.payment-option-container .dropdown-toggle, .payment-option-container.open > .dropdown-toggle.btn-default, .payment-option-container > .dropdown-toggle.btn-default:hover, .payment-option-container.open > .dropdown-toggle.btn-default:active {
    background-image: -webkit-linear-gradient(top,#8f4552 0,#8f4552 100%);
    background-image: -o-linear-gradient(top,#8f4552 0,#8f4552 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,from(#8f4552),to(#8f4552));
    background-image: linear-gradient(to bottom,#8f4552 0,#8f4552 100%);
    color: white;
    background-color: #8f4552;
}

.payment-option-panel {
    padding-bottom: 10px;
    padding-top: 10px;
    background-color: #efefef;
    height: auto;
    min-height: 420px;
    border-radius: 10px 0px 0px 10px;
}

.payment-option-cancel{
    padding-right: 0px;
}

#paymentOptionInstruction {
    color: #8f4552;
}

#amount-details {
    padding-left: 17px;
}

#amount-details-big {
    padding-left: 17px;
    font-size: 200%;
}

.order-detail-panel {
    border-radius: 0px 10px 10px 0px;
    background-color: #8f4552;
    color: white;
    display: inline;
    min-height: 420px;
}

#last-order-detail{
    margin-bottom: 15px;
}

.order-detail {
    padding: 15px 0px 15px;
    border-bottom: 1px solid #817C79;
}

.order-detail-amount {
    padding: 15px 0px 15px;
}

.order-detail-summary-panel {
    background-color: #8f4552;
    color: white;
    border-radius: 10px 10px 10px 10px;
    margin-bottom: 5px;
}

.panel-cph-header {
    background-image: linear-gradient(to bottom, #8f4552 0, #8f4552 100%) !important;
    color: #FFFFFF !important;
}

.panel-cph-body {
    background-color: #efefef;
}

.transaction-subtitle {
    color: #8f4552;
    font-weight: bold;
    font-size: 25px;
}

.payment-mobile {
    display: none;
}

.paymentOptionMenu > .active > a, .paymentOptionMenu > .active > a:focus, .paymentOptionMenu > .active > a:hover {
    background-color: #8f4552;
    background-image: linear-gradient(to bottom,#8f4552 0,#8f4552 100%)
}

.payment-detail{
    margin-bottom: 10px;
}

@media only screen and (min-width: 768px) {
    .order-detail-summary-panel {
        display: none;
    }

    .payment-mobile {
        display: none;
    }

    #paymentOptionNormal {
        display: block;
    }
}

@media only screen and (max-width: 1023px) {
    .payment-option-panel {
        height: 485px;
    }

    .order-detail-panel {
        height: 485px;
    }

    .payment-mobile {
        display: none;
    }

    #paymentOptionNormal {
        display: block;
    }

    .payment-detail {
        margin-right: 15px;
        margin-left: 15px;
    }
}

@media only screen and (max-width: 767px) {
    body {
        width: 90%;
    }

    .panel-body {
        padding: 15px 0px;
    }

    input[type=file] {
        width: 90%;
    }

    .order-detail-panel {
        display: none;
    }

    .payment-option-panel {
        border-radius: 10px 10px 10px 10px;
        height: auto;
    }

    .payment-mobile {
        display: block;
    }

    #paymentOptionNormal {
        display: none;
    }
}


ul.payment-option-container > li.active:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-width: 13px 13px 0;
    border-color: #8f4552 transparent;
    border-style: solid;
}



#paymentOptionList {
    width: 100%;
    padding-left: 5px;
    background-color: #8f4552;
    color: white;
    padding: .375rem 1.75rem .375rem .75rem;
    line-height: 1.5;
}

.payment-option {
    padding: .375rem 1.75rem .375rem .75rem;
}

/**
 * The CSS shown here will not be introduced in the Quickstart guide, but shows
 * how you can use CSS to style your Element's container.
 */
.StripeElement {
    background-color: white;
    padding: 4px 12px;
    border-radius: 4px;
    border: 1px solid #ccc;
    box-shadow: 0 1px 3px 0 #e6ebf1;
    -webkit-transition: box-shadow 150ms ease;
    transition: box-shadow 150ms ease;
    /*margin: 0 15px 15px 15px;*/
}

.StripeElement--invalid {
    border-color: #fa755a;
}

.StripeElement--webkit-autofill {
    background-color: #fefde5 !important;
}

.field {
    color:#32325d;
    font-size: 16px;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    border: 0;
    outline: none;
    cursor: text;
    display: block;
    width: 100%;
    line-height: 32px;
    padding-bottom: 3px;
    transition: opacity 200ms ease-in-out;
}

.stripeLabels{
    font-size: 14px;
    padding-left: 12px;
}

.error{
    font-weight: 700;
    color: red;
}
.dataTables_info{
    padding-left: 10px;
}

#amount-bold {
    font-weight: bold;
    font-size: 120%;
}

#mpaisaSubmitFormLink {
    border-radius: 10px;
    width: 25%;
    margin-bottom: -15px;
}

.loader {
    margin-left: 50%;
    border: 10px solid #f3f3f3;
    border-radius: 50%;
    border-top: 10px solid #1ab394;
    width: 40px;
    height: 40px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.align-text-right {
    text-align:right;
}

.payment-label {
    padding-top: 7px;
    font-weight: normal;
}