/*----------------------------------*/
/*bill*/
.billTitle{ font-size: 27px; font-weight: 500; color: #333; background-color: #fff; margin: 35px auto 10px auto; text-align: center;}
.billSubTitle{font-size: 22px; color: #486483; margin: 0 0 10px 0;}
.billTotal{font-size: 25px; color: #d0011a; text-align: center; padding: 25px 0;}

.checkoutAmount {height: 110px; }
.checkoutAmount .text1{text-align: center; font-size: 40px;}
.checkoutAmount .text2{text-align: center; font-size: 18px;}
.checkoutAmount p{text-align: center; font-size: 18px; margin: 0;}

@media screen and (max-width: 1199px){
.billTitle{ margin: 0 auto 10px auto;}
}
@media screen and (max-width: 991px){
.checkoutAmount {height: 100px; }
}
@media screen and (max-width: 900px){
.billSubTitle{padding: 1em 0 0 .5em; }
.billTotal{background-color: #fff;}
.checkoutAmount {height: auto; line-height: 1.3;}
.checkoutAmount .text1{text-align: left; font-size: 22px;}
.checkoutAmount .text2{text-align: left; font-size: 15px;}
.checkoutAmount p ,.hiddenText{display: none!important;}
}
@media screen and (max-width: 768px){
.billTitle{ font-size: 25px; }
.billSubTitle{font-size: 20px; color: #486483; margin: 0 0 10px 0;}
.billTotal{font-size: 20px;  padding: 20px 0;}
}
@media screen and (max-width: 480px){
.billTitle{ font-size: 18px;}  
.billSubTitle{font-size: 17px;}
}


/*----------------------------------*/
.titleBar{padding: 0 3.5em; margin: 0 auto; color: #fff;
    background: #3583d2; /* Old browsers */
	background: -moz-linear-gradient(top, #3583d2 0%, #0d3b6b 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #3583d2 0%,#0d3b6b 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #3583d2 0%,#0d3b6b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3583d2', endColorstr='#0d3b6b',GradientType=0 ); /* IE6-9 */ }
.dataBox{color: #486483; background-color: #FFF; padding: 1em 3.5em 1.3em 3.5em; margin: 18px auto 0 auto; border-radius: 1.5em;}
.dataList{ display: block; border-bottom: 1px solid #efefef;}
.dataList:last-child{border-bottom: none;}
.dataList select{height: 40px; padding: 0 12px; border: 1px solid #a2b3c4;}
.dataList li .logoPayment img{max-width: 70%; max-height: 60%;}
.dataList li{padding: 0.8em 1em; font-size: 18px; font-weight: 500; text-align: center; display: inline-block; position: relative; }
.dataList .linkBox{color: #0089d1;}
.dataList .linkBox:hover{color: #00c8f7;}
.dataList [class*=w-]{display:inline-block;}
.dataList .w-10{width: 9.5%;}
.dataList .w-15{width: 14.5%;}
.dataList .w-20{width: 19.5%;}
.dataList .w-25{width: 24.5%;}
.dataList .w-30{width: 29.5%;}
.dataList .w-35{width: 34.5%;}
.dataList .w-40{width: 39.5%;}
.dataList .w-50{width: 49.5%;}
.dataList .w-60{width: 59.5%;}
.detailData{background-color: #f8f8f8; border-radius: 1.5em; padding: 25px 45px; border: 1px solid #f4f4f4; color: #333; position: relative;}
.detailData::after{color: #f4f4f4; font-family: 'FontAwesome'; content: "\f0d8"; font-size: 35px; position: absolute; top: -37px; right: 90px;}
.detailData dd{width: 49.5%; display: inline-block; font-size: 18px; color: #486483; line-height: 1.8;}
.detailData dd label{color: #333;}

/* postPopOver */
.postPopOver{ display:block; cursor:pointer; color:#38B3DF; position: relative ; z-index: 99;}
.postPopOver .postPopOverMain{position:absolute; display:none; left: 135px; top:-15px; z-index: 9999;}
.postPopOver:hover .postPopOverMain{display:block;}
.postPopOverMain{ font-size: 15px; width: 160px; margin: 0 auto 5% auto; padding: 7px 10px; line-height: 1.5; border-radius: 0.5em; background-color: #ffccd2; color: #333;}
.postPopOverMain::after{color: #ffccd2; font-family: 'FontAwesome'; content: "\f0d9"; font-size: 35px; position: absolute; top: 5px; left: -10px;}

/* postQueryMsg */
.postQueryMsg{font-size: 18px; color: #d0011a; margin: 10px 0; text-align: center;}

/*----------------------------------*/
/* newBinding */
.newBinding li{width: 100%;}
.newBinding label{font-size:18px; }
.newBinding input{}


@media (max-width: 1199px){
.detailData::after{right: 8%;}
.postPopOver .postPopOverMain{left: 115px; }
}
@media (max-width: 991px){
.titleBar{padding: 0 1.5em;}
.dataBox{padding: 1em 1.5em 2em 1.5em; } 
.detailData dd{width: 99.5%;}
}
@media (max-width: 900px){
.titleBar{display: none; }
.dataBox{padding: 1em; margin: 25px auto 0 auto; padding: 0; background-color: #f3f3f3;}
.dataBox .dataList{background-color: #FFF; padding: 1em 1.5em 0.7em 1.5em; margin:0 auto 1em auto; }
.dataList{background-color: #efefef; padding: 1em 1.5em; margin:0 auto 1em auto; border-radius: 0; position: relative; display: block;}
.dataList li{width: 100%; font-size: 16px; padding: 0.2em 0 0.2em 0.5em; display: block; overflow: hidden; position: relative; text-align: left; border-bottom: none solid #efefef;}
.dataList li:last-child{border-bottom: none; margin:0 auto;}
.dataList select{height: 30px;}

[class*=dataList] li:before{content: attr(data-title) ""; text-transform: uppercase; width:85px; }
.dataList li:before {padding: 0 5px 0 0;}
.dataListCheck li:before {padding: 0 5px 0 20px;}

.dataList [class*=w-]{width: 100%;}
.dataList li .logoPayment img{transform-origin:left; max-width: 60%; max-height: 60%;
    -moz-transform:scale(0.65);
    -webkit-transform:scale(0.65);
    -o-transform:scale(0.65);
    -ms-transform:scale(0.65);
    transform:scale(0.65);}
.detailData{padding: 15px 10px; margin: 10px 0 0 0; }
.detailData::after{font-family: 'FontAwesome'; content: "\f0d8"; font-size: 35px; position: absolute; top: -36px; left: 160px;}
.detailData dd{font-size: 16px;}
.postPopOver{ display:block; cursor:pointer; color:#38B3DF; position: absolute ; z-index: 9999; left: 100px; top: 0; padding: 2px 12px;}
.postPopOverMain{display: none;}
.postPopOver:hover .postPopOverMain{display:none;}
}
@media (max-width: 768px){
.postQueryMsg{font-size: 16px; }
}
@media (max-width: 480px){
.dataBox{margin: 15px auto 0 auto;}
.dataList{background-color: #FFF; padding: 1em;}
.dataList li{font-size: 15px; }
.detailData::after{top: -38px; }
.detailData dd{font-size: 15px;}
}


/*----------------------------------
checkBill
------------------------------------*/
.stepBar{display: block; text-align: center; margin:-100px auto 20px auto;}
.stepBar li{width: 150px; height: 150px; border-radius: 99em; display: inline-block; margin: 0 25px; vertical-align: top;
	background: #81d8d8; /* Old browsers */
	background: -moz-linear-gradient(top, #81d8d8 0%, #7fc7e5 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #81d8d8 0%,#7fc7e5 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #81d8d8 0%,#7fc7e5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#81d8d8', endColorstr='#7fc7e5',GradientType=0 ); /* IE6-9 */ 
}
.stepBar span{width: 115px; height: 115px; background-color: #fff; display: inline-block; text-align: center; border-radius: 99em; position: relative; top:50%; transform:translateY(-50%);}
.stepBar p{margin: 0;}
.stepBar .text1{ font-size: 25px; color: #73b1df; text-align: center; margin: 18px 0 0 0;}
.stepBar .text2{ font-size: 17px; color: #737373; text-align: center;}
.stepBar .active{
	background: #02afb5; /* Old browsers */
	background: -moz-linear-gradient(top, #02afb5 0%, #008bd0 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #02afb5 0%,#008bd0 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #02afb5 0%,#008bd0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#02afb5', endColorstr='#008bd0',GradientType=0 ); /* IE6-9 */ 
}
.stepBar .active .text1{ color: #0089d1; }
.stepBar .active .text2{ color: #000; }
@media (max-width: 991px){
.stepBar{display: block; text-align: center; margin:25px auto 45px auto;}
}
@media (max-width: 768px){
.stepBar li{width: 130px; height: 130px; margin: 0 10px;}
.stepBar span{width: 105px; height: 105px;}
.stepBar .text1{ font-size: 22px;}
.stepBar .text2{ font-size: 15px;}       
}
@media (max-width: 510px){
.stepBar li{width: 95px; height: 95px; margin: 0 5px;}
.stepBar span{width: 90px; height: 90px;}
.stepBar .active span{ background-color:rgba(255, 255, 255, 0)}
.stepBar .active span .text1{ color: #fff;}
.stepBar .active span .text2{ color: #fff;}

.stepBar .text1{ font-size: 18px;}
.stepBar .text2{ font-size: 13px;}       
}


/*----------------------------------
paymentBox
------------------------------------*/
.paymentBox{padding: 20px -15px 10px -15px;}
.paymentBox li{display: inline-block; width: 33%; padding: 5px 15px; margin: 10px 0 0 0; text-align: center; vertical-align: top;}
.paymentBox .btnPayment{border-radius: 0.5em; padding: 15px 0; width: 100%; height: 80px; display: inline-block; border: 1px solid #e8e8e8;
	background: #fefefe; /* Old browsers */
	background: -moz-linear-gradient(top, #fefefe 0%, #e8e8e8 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #fefefe 0%,#e8e8e8 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #fefefe 0%,#e8e8e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#e8e8e8',GradientType=0 ); /* IE6-9 */ 
}
.paymentBox .on{border: 1px solid #0089d1;}
.paymentBox .btnPayment:hover{border: 1px solid #e1e1e1;
	background: #f9f9f9; /* Old browsers */
	background: -moz-linear-gradient(top, #f9f9f9 0%, #d7d7d7 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #f9f9f9 0%,#d7d7d7 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #f9f9f9 0%,#d7d7d7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#d7d7d7',GradientType=0 ); /* IE6-9 */ 
}

.paymentBox .off{border: 1px solid #e8e8e8;}
.paymentBox .btnPayment img{position: relative; top:50%; transform:translateY(-50%); max-width: 80%; max-height: 100%;}
.paymentBox p{font-size: 16px; margin: 5px 0 0 0;}
.paymentBox li > p{width: 80%; text-align: center; margin: 0 auto;}
.paymentBox .queryMsg{font-size: 18px; color: #d0011a; margin: 20px 0 0 0; }
@media (max-width: 991px){
.paymentBox li{ width: 32.8%; padding: 5px 7px;}
}
@media (max-width: 768px){
.paymentBox .btnPayment{height: 65px;}
.paymentBox .btnPayment img{max-width: 80%; max-height: 100%;}
.paymentBox .queryMsg{font-size: 16px;}
}
@media (max-width: 560px){
.paymentBox li{ width: 49%;}    
}


/*----------------------------------
coop
------------------------------------*/
.coop b{text-align: center; display: block; font-size: 30px; margin: 55px 0 50px 0;}
.coop p{width: 600px; text-align: center; margin: 0 auto 60px auto; font-size: 18px;}
.coop .paymentproviders{padding: 20px 0 30px 0; width: 80%; margin: 0 auto;}
.coop .paymentproviders li{display: inline-block; width: 32%; height: 70px; text-align: center; border: 1px solid #f1f1f1; vertical-align: top; margin: 0.5%;}
.coop .paymentproviders li img{position: relative; top:50%; transform:translateY(-50%); max-width: 80%; max-height: 70%;}
@media (max-width: 1199px){
.coop p{width: 90%;}
.coop .paymentproviders li{ width: 31.5%; padding: 5px 7px;}
}
@media (max-width: 991px){
.coop .paymentproviders{width: 100%;}
}
@media (max-width: 768px){
.coop b{font-size: 25px; margin: 25px 0 20px 0;}
.coop p{font-size: 16px; margin: 0 auto 20px auto;}
.coop .paymentproviders li{ width: 48%;}    
.coop .paymentproviders li img{max-width: 80%; max-height: 100%;}
}
@media (max-width: 480px){
.coop .paymentproviders li{margin: 4px 2px;}    
}