/* Payment */
.tdLabelPayment {padding-top:4px; vertical-align:top; width:90px;}

.lblOrder {padding-top:10px; padding-bottom:0px; font-size:12px;}
.divOrdSummaryOuter {margin:0; height:auto; overflow:hidden;}
.divOrdSummary {height:auto; overflow:hidden; padding-bottom:25px;}
.divOrderDetials {height:auto; overflow:hidden; border:1px solid #cccccc; padding:10px;}
.divPaymentOuter {width:auto; height:auto; overflow:hidden; position:relative;}

.divPaymentDesc {height:auto; overflow:hidden; padding-bottom:20px; }
.divPaymentType {height:auto; overflow:hidden;}
.divPaymentMethodDesc {height:auto; overflow:hidden; padding-bottom:5px;}
.divBankTransfer {height:auto; overflow:hidden;}
.divDesc {clear:both; height:auto; overflow:hidden; padding-left:0px;}
.divBankDesc {height:auto; overflow:hidden; border:1px solid #cccccc; background:#fff; color:#000; width:auto; padding:20px; margin-bottom:20px;}
.tblBankDetailsOuter {width:100%}
.imgBankLogo {height:auto !important; width:100% !important; max-width:200px; padding-bottom:10px;}
.divBankSplitter {height:1px; background:#cccccc; margin-top:15px; margin-bottom:15px;}

.tblBankDetailsOuter {width:100%}
.tblBankDetailsOuter .tdBankDetailsOuter {padding-left:0px;}
.tblBankDetails .tdBankDetailsLabel {padding-right:10px;}

.divNotes {padding-bottom:40px; width:auto; margin:auto;}
.tdLabelBank {padding-top:4px; vertical-align:top; width:80px;}
.payonlineTbl {width:100%;}
.divBtnCenter {height:auto; overflow:hidden; text-align:center;padding-top:0px;}
.divPayOnline {padding-top:20px;}
.tdBtnPayOnline {text-align:center;}
.imgBankPic {margin-left:50px;}

.divPaymentNotes {height:auto; overflow:hidden; padding-bottom:20px;}

.divOrdId {font-weight:bold;}

.divInfoLogo {height:40px; overflow:hidden; width:50px;  display:table-cell; vertical-align:top;}
.divInfoDesc {float:left; width:auto; font-style:italic; /*padding-left:20px;*/ display:table-cell; vertical-align:top;}

.divPaymentTypeSelection {padding-bottom:15px;}
/*Table*/
.frmTblPayment {padding-left:0px;}
.frmTblPayment td {padding:2px;}
.tdPaymentDetail {width:auto;}
/*End Table*/

#payment-method-option {
    padding: 0;
    border: none;
    background: none;
}

    #payment-method-option > ul.ui-tabs-nav {
        display: flex;
        padding: 0;
        background: none;
        border: none;
        border-radius: 0;
    }

    #payment-method-option > .ui-tabs-nav li {
        width: 100%;
        height: 122px;
        margin: 0;
        padding-bottom: 0;
        border: none;
        background: none;
        font-weight: 400;
        border: solid 4px #e5e5e5 !important;
        border-radius: 12px;
        max-width: calc(90%/2);
    }

        #payment-method-option > .ui-tabs-nav li:hover {
            border: solid 2px #ddd !important;
            border-radius: 8px;
        }

        #payment-method-option > .ui-tabs-nav li:first-child {
            background-color: #fff;
            /*background: url(../img/usr/icon-banktransfer.png) no-repeat center top 40px;*/
            margin-right: 1em;
        }

        #payment-method-option > .ui-tabs-nav li:last-child {
            background-color: #fff;
            /*background: url(../img/usr/icon-online.png) no-repeat center top 40px;*/
        }

        #payment-method-option > .ui-tabs-nav li a {
            width: 100%;
            height: 100%;
            text-align: center;
            color: #222;
            font-size: 18px;
            font-weight: 700;
            font-family: Quicksand, Arial;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center; /*padding:1.5em 1em;*/
        }

            #payment-method-option > .ui-tabs-nav li a i {
                font-size: 48px;
            }

            #payment-method-option > .ui-tabs-nav li a:hover, #payment-method-option > .ui-tabs-nav li.ui-state-active a {
                color: #222;
                font-family: Quicksand, Arial;
                font-weight: 700;
                font-size: 18px;
            }

        #payment-method-option > .ui-tabs-nav li:hover, #payment-method-option > .ui-tabs-nav li.ui-state-active {
            background-color: #ffffff;
            background-position-y: -100px;
            border: solid 4px #00aff0 !important;
        }

    #payment-method-option > .ui-tabs-panel > * {
        animation: fade 1s;
    }

    #payment-method-option > div {
        /*border: solid 2px #ddd;*/
        border-radius: 10px;
        /*margin-top: 2em;*/
        /*padding: 40px 20px;*/
        padding: unset;
    }

        #payment-method-option > div > table.list-payment {
            width: 100%;
            margin-top: 1em;
        }

            #payment-method-option > div > table.list-payment tr {
                display: flex;
                padding: 10px 0;
            }

                #payment-method-option > div > table.list-payment tr:last-child {
                    padding-bottom: 0;
                }

                #payment-method-option > div > table.list-payment tr:not(:last-child) {
                    border-bottom: solid 2px #ddd;
                }

            #payment-method-option > div > table.list-payment td {
                display: flex;
                align-items: center;
                width:100%;
            }

            #payment-method-option > div > table.list-payment input[type=radio] {
                margin: 1em;
                margin-left: 0;
                -webkit-appearance:none;
                margin:unset;
                outline:unset;
            }

                #payment-method-option > div > table.list-payment input[type=radio] + label {
                    /*margin-right: 3em;*/
                    margin:auto;
                }

.bank {
    font-family: Quicksand, Arial;
    font-weight: 700;
    margin-bottom: 15px;    
}

    .bank > div > span:first-child {
        display: inline-block;
        width: 100px;
    }

    .bank > *:not(:last-child) {
        /*margin-bottom: 15px;*/
    }

.bank-in-form {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 15px;
    margin-top: 15px;
    border-top: solid 2px #ddd;
}

    .bank-in-form h3 {
        margin-bottom: 15px;
    }

.divPaymentInfo {
    color: #292929;
    font-family: Quicksand, Arial;
    padding-top: 15px;
    /*margin-top: 15px;*/
    line-height: 30px;
    border-top: solid 2px #ddd;
}

@keyframes fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/*For desktop view*/
.divPaymentOption {
    background-color: #f4f4f4;
    border-radius: 10px;
    margin: 20px 0px;
    border: none;
    color:#292929;
}
.divPaymentOptionSelection{height:100px;font-size:18px;font-weight:700;display:flex;align-items:center;padding:0px 15px;}
.divPaymentOptionSelection label{padding:0px 15px;display:flex;align-items:center;}
.divPaymentOptionSelection i{font-size:40px;padding:0px 20px 0px 0px;}
.divPaymentOptionSelectionDetails{padding:10px 0px;margin:0px 15px;border-top:1px solid #ddd;}
.divPaymentOptionSelectionDetails b{color:#292929;}
.list-payment{width:100%;}
.list-payment td{text-align:center;padding:5px;border:1px solid #ddd;}
.list-payment td.divBorder{border:1px solid #00aff0;}

.rblPaymentOption{display:flex;align-items:center;}
.pnlBank{background-color:#f4f4f4;}
.opacity1{opacity:1;}

.divCheckOutAction{ bottom: 0px;width: 100%;left: 0px;z-index: 101;position:relative;}
.buttonCheckoutFix{position:fixed;}
input[type=radio] {
    border-radius: 50%;
}
.list-payment input{-webkit-appearance:none;-moz-appearance:none;margin:unset;padding:unset;}
@media only screen and (max-width:700px){
.divPayOnSiteOptions{display:none;text-align:center;}
.divPaymentOptionInner{width:100%;}
.webq-bank-image img{width:auto;height:60px;}
.divBankSplitter:first-child{display:none;}
 .buttonCheckout{height:unset;position:relative;}
    .buttonCheckoutFix{position:fixed;}
    .list-payment td img{max-width:75%;}
}

@media only screen and (min-width:960px) {
    #payment-method-option > div > table.list-payment{padding:2em;}
    .bank{display: block;padding: 0em 4em;margin:unset;}
    .divPaymentInfo{padding:unset;border:none;}
    .buttonCheckout{position:relative;}   
    .list-payment tbody{display:flex;align-items:center;}
    .divPaymentOptionInner{display:flex;align-items:center;width:100%;padding:30px 0;}
    .divPayOnSiteOptions{text-align:left;}
    .divPaymentOptionSelectionDetails{border:none;padding:0px 55px;margin:unset;width:67%; border-left:1px solid #ccc; box-sizing:border-box;}
    .divPaymentOptionSelection{padding:0px 30px;/*border-right:1px solid #ccc;*/width:33%; box-sizing:border-box;}
    .divPaymentOptionSelection label{padding:0px 0px 0px 30px;}
    .divPaymentOptionSelection i{padding:0px 10px 0px 0px;}
    .bank{display: flex;align-items: center;font-family: Quicksand, Arial; font-weight: 700;padding:unset;}
    .webq-bank-image{width:25%;padding:0px 60px;}
    .webq-image-center{display: block; margin: 0 auto; width: 100%; height: auto;}
    .divBankSplitter{margin:0px 30px;}
    .webq-bank-detail{width:75%;padding: 0px 55px;text-align:left;}
    .list-payment td img{/*width:50%;*/ height:60px;}
    .list-payment td{display:inline-flex;align-items:center;height:50px;margin:10px 10px 0px 0px;padding:10px 30px; max-width:375px;}
}