/*---Styling for Payment and its Options---*/

/*---Styling for Credit Cards---*/
#scg_creditcardnumber {
    padding-right: 70px !important;
}

.amexCard {
    background: url("/IconAmericanExpress.png") !important;
}

.masterCard {
    background: url("/IconMastercard.png") !important;
}

.visaCard {
    background: url("/IconVisaCard.png") !important;
}

.dinersclubCard {
    background: url("/IconDinersclubCard.png") !important;
}

.amexCard,
.masterCard,
.visaCard,
.dinersclubCard {
    background-size: 25px !important;
    background-repeat: no-repeat !important;
    background-position: calc(100% - 12px) 50% !important;
    
}



/*.paymentclass,
#scg_creditcardtype,
#scg_amount,
#scg_memberid_name,
#scg_paymenttype,
#scg_paymentstatus,
#scg_creditcardtype_label,
#scg_amount_label,
#scg_paymenttype_label,
#scg_paymentstatus_label,
#scg_memberid_label,
.input-group-addon,
.btn.btn-default.clearlookupfield,
.btn.btn-default.launchentitylookup,
.fa-search {
    display: none;
}*/

.info, .control {
    display: inline-block;
}

.crmEntityFormView .tab .tab-column {
    width: 100% !important;
}

.info,
.control {
    width: 100%;
}
/*
.paymentOption{
    width: 300px;
    margin: 0 auto;
}

.paymentOption .creditCard,
.paymentOption .bPay{
    width: 130px;
    height: 70px;
    border: solid 1px #666;
    margin-right: 20px;
    text-align: right;
    vertical-align: middle;
    line-height: 70px;
    padding-right: 10px;
    color: #666;
    position: relative;
    margin: 0;
    margin-top: 50px;
}

.paymentOption .creditCard.active:after,
.paymentOption .bPay.active:after {
    content: "";
    background: url(/tick.png) no-repeat;
    width: 30px;
    height: 30px;
    position: absolute;
    left: 50%;
    top: -15px;
    z-index: 1000;
    margin-left: -15px;
}

.paymentOption .creditCard{
    float: left;
    margin-right: 20px;
}

.paymentOption .bPay{
    float: right;
    margin-left: 20px;
}
*/
.paymentOption{
    width: auto;
    margin: 0;
    display: table;
    float: left;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}

.paymentOption .fill-div {
    min-width: 170px;
    height: 65px;
    display: block;
    margin: 0 auto 20px;
}

.paymentOption .fill-div:first-child:not(.hide) {
    margin-left: 0;
}

.paymentOption .fill-div:last-child:not(.hide) {
    margin-right: 0;
}

/* One item */
.paymentOption .fill-div:first-child:nth-last-child(1) {
    margin: 0;
}


/* Two items */
/*
.paymentOption .fill-div:first-child:nth-last-child(2){
    margin: 0 15px 0 215px;
}

.paymentOption .fill-div:first-child:nth-last-child(2) ~ div {
    margin: 0 215px 0 15px;
} 
*/
/* Three items */
/*
.paymentOption .fill-div:first-child:nth-last-child(3){
    margin: 0 15px 0 215px;
}

.paymentOption .fill-div:first-child:nth-last-child(3) ~ div {
    margin: 0 215px 0 15px;
}   
*/
/*
.paymentOption .fill-div:nth-child(1) {
    margin:0 auto;
}
*/
.paymentOption .fill-div > div{
    background : #FFFFFF;
    border-style : Solid;
    border-color : #E1E1E1;
    border-width : 1px;
    position: relative;
    height: 100%;
    font-size: 16px;
    color: #6E6F71;
    line-height: 65px;
    padding-right: 20px;
}

.paymentOption .fill-div > div.active{
    border-color : #6D6E70;
}

.paymentOption .fill-div > div.active:before{
    content: "";
    background: url(/tick.png) no-repeat;
    width: 30px;
    height: 30px;
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}

.paymentOption .fill-div > div.payment {
    width: 100%;
}

.paymentOption .fill-div > div.payment,
.paymentOption .fill-div > div.creditCard, 
.paymentOption .fill-div > div.directDebit{
    background: url(/credir-card-icon.png) no-repeat 20px 20px;
    text-indent: 77px;
}

.paymentOption .fill-div > div.bPay{
    background: url(/Bpay-icon.png) no-repeat 40px 20px;
    text-indent: 90px;
}

.select-membership.payment table.section{
    overflow: hidden;
}

/*changes*/
.paymentOptionDD {
    width: auto;
    margin: 0;
    display: table;
    float: left;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}

.paymentOptionDD .fill-div {
    min-width: 170px;
    height: 65px;
    display: block;
    margin: 0 auto 20px;
}

    .paymentOptionDD .fill-div:first-child:not(.hide) {
        margin-left: 0;
    }

    .paymentOptionDD .fill-div:last-child:not(.hide) {
        margin-right: 0;
    }

    /* One item */
    .paymentOptionDD .fill-div:first-child:nth-last-child(1) {
        margin: 0;
    }


    /* Two items */
    /*
.paymentOption .fill-div:first-child:nth-last-child(2){
    margin: 0 15px 0 215px;
}

.paymentOption .fill-div:first-child:nth-last-child(2) ~ div {
    margin: 0 215px 0 15px;
} 
*/
    /* Three items */
    /*
.paymentOption .fill-div:first-child:nth-last-child(3){
    margin: 0 15px 0 215px;
}

.paymentOption .fill-div:first-child:nth-last-child(3) ~ div {
    margin: 0 215px 0 15px;
}   
*/
    /*
.paymentOption .fill-div:nth-child(1) {
    margin:0 auto;
}
*/
    .paymentOptionDD .fill-div > div {
        background: #FFFFFF;
        border-style: Solid;
        border-color: #E1E1E1;
        border-width: 1px;
        position: relative;
        height: 100%;
        font-size: 16px;
        color: #6E6F71;
        line-height: 65px;
        padding-right: 20px;
    }

        .paymentOptionDD.fill-div > div.active {
            border-color: #6D6E70;
        }

            .paymentOptionDD.fill-div > div.active:before {
                content: "";
                background: url(/tick.png) no-repeat;
                width: 30px;
                height: 30px;
                position: absolute;
                top: -15px;
                left: 50%;
                transform: translateX(-50%);
                -ms-transform: translateX(-50%);
                -moz-transform: translateX(-50%);
                -webkit-transform: translateX(-50%);
            }

        .paymentOptionDD .fill-div > div.payment {
            width: 100%;
        }

        .paymentOptionDD .fill-div > div.payment,
        .paymentOptionDD .fill-div > div.creditCard,
        .paymentOptionDD .fill-div > div.directDebit {
            background: url(/credir-card-icon.png) no-repeat 20px 20px;
            text-indent: 77px;
        }

        .paymentOptionDD.fill-div > div.bPay {
            background: url(/Bpay-icon.png) no-repeat 40px 20px;
            text-indent: 90px;
        }


/*---Payment for Profile Pages---*/
.profilePage .payment{
    width: 100%;
    margin: 0;
}


#tblPaymentPlan{
    text-align: center;
}

#tblPaymentPlan input[type="radio"]{
    margin: 7px auto 0;
}


#tblPaymentPlan.table>thead>tr>th:first-child,
#tblPaymentPlan.table>tbody>tr>td:first-child{
    width: 10%;
    margin-right: 0 50px 0 5px;
}

#tblPaymentPlan.table>thead>tr>th:nth-child(2),
#tblPaymentPlan.table>tbody>tr>td:nth-child(2){
    width: 20%;
    margin-right: 0 50px 0 5px;
}

#tblPaymentPlan.table>thead>tr>th:nth-child(3),
#tblPaymentPlan.table>tbody>tr>td:nth-child(3){
    width: 20%;
    margin-right: 0 50px 0 5px;
}


#tblPaymentPlan.table>thead>tr>th,
#tblPaymentPlan.table>thead>tr>td{
    white-space: nowrap;
}

#tblPaymentPlan.table>thead>tr>th{
    padding: 0px;
    padding-right: 0 50px 0 5px;
}

#tblPaymentPlan.table>thead>tr>th,
#tblPaymentPlan.table>thead>tr>th,
#tblPaymentPlan.table>tbody>tr>td,
#tblPaymentPlan.table>tbody>tr>td div,
#tblPaymentPlan.table>tbody>tr>td>label,
#tblPaymentPlan.table>tbody>tr>td>label input
{
    text-align: left;
    margin: 5px;
    padding-right: 0 50px 0 5px;
}

#tblPaymentPlan.table>tbody>tr>td>label input
{
    margin: 10px 0px;
}




#tblPaymentPlan.table>thead>tr>th{
    font-weight: normal;
    border-bottom: 1px solid #ddd;
}

#tblPaymentPlan.table>tbody>tr>td{
    padding: 5px 0;
}

#tblPaymentPlan.table>tbody>tr>td>label{
    padding: 0;
}

#divSummaryCalculations .table>tbody>tr>td{
    vertical-align: middle;
    text-align: right;
    padding-right: 15px;
}

#divSummaryCalculations .table{
    border-collapse: collapse;
}
#divSummaryCalculations .table>tbody>tr>td input#divDepositAmount{
    background: #FFFFFF;
    height: 35px;
}

#divSummaryCalculations .table > tbody > tr {
    border-bottom: solid transparent 15px;
}

#divSummaryCalculations .table>tbody>tr>td #divInstallmentWithSurcharge{
    width: 100%;
}

#divSummaryCalculations .table tr td:last-child > div{
    padding-bottom: 0;
}

.select-membership.payment #bpaymessage{
    width: 100%;
    text-align: left;
    margin: 20px auto 40px;
}

 @media (min-width: 768px) {
    .crmEntityFormView.tab.tab-column {
        width: 50% !important;
    }

    .info {
        width: 100%;
    }

    .control {
        width: 50%;
    }

    /*---Payment for Profile Pages---*/
    .profilePage .payment{
        width: 370px;
    }

    
    .paymentOption .fill-div{
        display: inline-block;
        margin: 0 15px;
    }

    .paymentOptionDD .fill-div {
        display: inline-block;
        margin: 0 15px;
    }

    
    .select-membership.payment #bpaymessage{
        width: 590px;
        text-align: left;
        margin: 60px auto 40px;
    }
	.select-membership.payment #spncheckbox {
		width: 590px;
		text-align: center;
		margin: 10px auto 40px;
		font-weight: bold;
	}
}

.paymentclass {
        display: none;
    }