/* 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 {width:100%; 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 1px #e5e5e5 !important;
        border-radius: 12px;
        max-width: calc(93%/2);
    }

        #payment-method-option > .ui-tabs-nav li:hover {
            border: solid 1px #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: #000;
            font-size: 16px;
            font-weight: 500;
            font-family: 'DM Sans', 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: #000;
                font-family: 'DM Sans', Arial;
                font-weight: 500;
                font-size: 16px;
            }

        #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 1px #fbab31 !important;
        }

    #payment-method-option > .ui-tabs-panel > * {
        animation: fade 1s;
    }

    #payment-method-option > div {
        /*border: solid 1px #ddd;*/
        border-radius: 8px;
        /*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: 15px 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;
            }

            #payment-method-option > div > table.list-payment input[type=radio] {
                margin: 1em;
                margin-left: 0;
            }

                #payment-method-option > div > table.list-payment input[type=radio] + label {
                    margin-right: 3em;
                }

.bank {
    font-family: 'DM Sans', Arial;
    font-weight: 500;
    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: #000;
    font-family: 'DM Sans', Arial;
    padding-top: 15px;
    margin-top: 15px;
    line-height: 30px;
    border-top: solid 1px #ddd;
}
.divPaymentInfo a {color:#fe971e;}

@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:500;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;}

.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%;
}
@media only screen and (max-width:700px){
.list-payment input{-webkit-appearance:none;-moz-appearance:none;}
.divPayOnSiteOptions{display:none;text-align:center;}
.divPaymentOptionInner{width:100%;}
.webq-bank-image img{width:80%;}
.divBankSplitter:first-child{display:none;}
 .buttonCheckout{height:unset;position:relative;}
    .buttonCheckoutFix{position:fixed;}
    .divPaymentOuter {padding:0 15px;}
    .list-payment td img{width:100%;}
}

@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 input{-webkit-appearance:auto;}
    .list-payment tbody{display:flex;align-items:center;}
    .divPaymentOptionInner{display:flex;align-items:center;width:100%;height:200px;}
    .divPayOnSiteOptions{text-align:left;}
    .divPaymentOptionSelectionDetails{border:none;padding:0px 55px;margin:unset;}
    .divPaymentOptionSelection{padding:0px 30px;border-right:1px solid #ccc;width:25%;}
    .divPaymentOptionSelection label{padding:0px 0px 0px 30px;}
    .divPaymentOptionSelection i{padding:0px 10px 0px 0px;}
    .bank{display: flex;align-items: center;font-family: 'DM Sans', Arial; font-weight: 500;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%; padding-left:10px;}
    .list-payment td{display:inline-flex;align-items:center; text-align:left;}
    .lblOrder h3 {font-size:24px; line-height:24px; margin-bottom:10px;}
    .divPaymentOuter {padding-top:20px;}
    .buttonCheckoutFix{position:fixed;width:94%; right:0; left:unset;}
}