/* 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 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: Roboto, 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: Roboto, 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: 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: 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; text-align:center;
                }

#payment-method-option > div > table.list-payment input[type=radio] + label img {
    width: 70%;
    height: auto;
}

.bank {
    font-family: 'Roboto', Arial;
    font-weight: 700;
    margin-bottom: 15px;
    text-align:center;
}

    .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: #575757;
    font-family: 'Cairo', 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*/
@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:1em 4em;}
    .buttonCheckout{position:relative;}
    .bank img{width:50%!important;}
}