/*--- HTML ele ----*/
hr{
	margin-bottom: 0px;
    margin-top: 0px;
}
input.form-control{
	border-radius: 20px;
	height: 40px;
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}
input[type=number] {
    -moz-appearance:textfield;
}
ul{
	list-style:none;
    padding-left:0;
}
:lang(en) .errorAchList li + li:before {
    content: ", ";
}
:lang(zh-HK) .errorAchList li + li:before, :lang(zh-CN) .errorAchList li + li:before  {
    content: "\FF0C";
} 

/*--- class ----*/ 


.access {
    left: -9999px;
    margin-bottom: 0;
    position: absolute;
    top: -9999px;
}
.alert  h3 {
    margin-top: 10px !important;
}
.addMoreBill > .glyphicon,.ClearAllBill > .glyphicon, .upload-label-btn > .glyphicon{
	color: #D2771F;
} 
.bs-wizard {border-bottom: solid 1px #e0e0e0;margin: 20px auto 0; padding: 0 0 8px 0;position: relative;}
.bs-wizard > .bs-wizard-step {padding: 0; position: relative; }
.bs-wizard > .bs-wizard-step + .bs-wizard-step {}
.bs-wizard > .bs-wizard-step .bs-wizard-stepnum {color: #595959; font-size: 16px; margin-bottom: 5px;}
.bs-wizard > .bs-wizard-step .bs-wizard-info {
	color: #999; font-size: 14px;
	
}
.bs-wizard > .bs-wizard-step.active .bs-wizard-info::after {
    border-color: transparent transparent #fbbd19;
    border-image: none;
    border-style: solid;
    border-width: 10px;
    content: " ";
    opacity: 1;
    position: relative;
}
.bs-wizard > .bs-wizard-step > .bs-wizard-dot {position: absolute; width: 30px; height: 30px; display: block; background: #fbe8aa; top: 45px; left: 50%; margin-top: -15px; margin-left: -15px; border-radius: 50%;} 
.bs-wizard > .bs-wizard-step > .bs-wizard-dot > i {color: rgb(248, 152, 28); left: 8px; top: 8px;}
/* .bs-wizard > .bs-wizard-step > .bs-wizard-dot:after {content: ' '; width: 14px; height: 14px; background: #fbbd19; border-radius: 50px; position: absolute; top: 8px; left: 8px; } */ 
.bs-wizard > .bs-wizard-step > .progress {position: relative; border-radius: 0px; height: 8px; box-shadow: none; margin: 20px 0;}
.bs-wizard > .bs-wizard-step > .progress > .progress-bar {width:0px; box-shadow: none; background: #fbe8aa;}
.bs-wizard > .bs-wizard-step.complete > .progress > .progress-bar {width:100%;}
.bs-wizard > .bs-wizard-step.active > .progress > .progress-bar {width:50%;}
.bs-wizard > .bs-wizard-step:first-child.active > .progress > .progress-bar {width:0%;}
.bs-wizard > .bs-wizard-step:last-child.active > .progress > .progress-bar {width: 100%;}
.bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot {background-color: #f5f5f5;}
.bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot:after {opacity: 0;}
.bs-wizard > .bs-wizard-step:first-child  > .progress {left: 50%; width: 50%;}
.bs-wizard > .bs-wizard-step:last-child  > .progress {width: 50%;}
.bs-wizard > .bs-wizard-step.disabled a.bs-wizard-dot{ pointer-events: none; }

.btn-link{
    cursor: pointer;
}
.btn-upload,.btn-abort {
	margin: 5px;
	 min-width: 150px;
}
.banner-container{
	background-attachment: scroll, scroll;
    background-clip: border-box, border-box;
    background-color: rgba(0, 0, 0, 0);
    background-image: linear-gradient(rgba(0, 0, 0, 0.49), rgba(0, 0, 0, 0.5)), url("../images/cheque2.jpg");
    background-origin: padding-box, padding-box;
    background-position: 0 0%, 100% 60%;
    background-repeat: no-repeat;
    background-size: auto auto, auto 2500px;
    color: #c4c4c4;
    font-size: 24px;
    padding: 30px 0;
    position: relative;
    text-align: left;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}	
.banner-container h1 {
    color: #fff;
    margin-top: 0;
	font-size: 50px
}

.btn-brown {
	color: #fef4e9;
	border: solid 1px #1a0c04;
	background: #886555;
	background: -webkit-gradient(linear, left top, left bottom, from(#886555), to(#281f19));
	background: -moz-linear-gradient(top,  #886555,  #281f19);
	background: -ms-linear-gradient(top, #886555, #281f19);  
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#886555', endColorstr='#281f19');
	box-shadow: #B7B8B8 0px 1px 0px inset; 
	-webkit-box-shadow: #B7B8B8 0px 1px 0px inset;
	-moz-box-shadow: #B7B8B8 0px 1px 0px inset; 
	font-weight:bold;
}
.btn-brown:hover,.btn-brown:active,.btn-brown:focus {
	color: #fef4e9;
	background: #281f19;
	background: -webkit-gradient(linear, left top, left bottom, rom(#281f19), to(#886555));
	background: -moz-linear-gradient(top,  #281f19,  #886555);
	background: -ms-linear-gradient(top, #281f19, #886555);  
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#281f19', endColorstr='#886555');
	box-shadow:1px 1px 3px #BE9E8D;
	-webkit-box-shadow: #B7B8B8 0px 1px 0px inset;
	-moz-box-shadow: #B7B8B8 0px 1px 0px inset; 
	font-weight:bold;
}

.btn-grey {
	/* color: #873f00; */
	padding: 3px 12px;
	margin-top: 5px;
	border:1px solid #CCCCCC;
	border-radius: 3px;
	background: #FFFFFF;
	background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#D8D8D8));
	background: -moz-linear-gradient(top,  #FFFFFF,  #D8D8D8);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#D8D8D8');
	background: -ms-linear-gradient(top, #FFFFFF, #D8D8D8);  
	box-shadow: 1px 1px 0 #b0b0b0;
	-webkit-box-shadow: 1px 1px 0 #b0b0b0;
	-moz-box-shadow: 1px 1px 0 #b0b0b0;
	color: #000;
}
.btn-grey:hover,.btn-grey:active,.btn-grey:focus,.btn-grey.hover {
	 color: #D2771F; 
	padding: 3px 12px;
	margin-top: 5px;
	border:1px solid #DA9335;
	background: #FFFFFF;
	background: -webkit-gradient(linear, left top, left bottom, rom(#D8D8D8), to(#FFFFFF));
	background: -moz-linear-gradient(top,  #D8D8D8,  #FFFFFF);
	background: -ms-linear-gradient(top, #D8D8D8, #FFFFFF);  
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#D8D8D8', endColorstr='#FFFFFF');
	box-shadow:1px 1px 3px #D3C8AE;
	-webkit-box-shadow: #B7B8B8 0px 1px 0px inset;
	-moz-box-shadow: #B7B8B8 0px 1px 0px inset; 
}
.bill-ul .bs-callout {
	margin: 1px 0;
}
.bill-button-panel .panel-body{
		padding-top: 0px;
}
.bill-ul{
	margin-bottom: 0px;
}

.billPanelTable {
	display: block;
	width: 100%;
}
.billPanelRow {
	display: block;
}
.billPanelCell {
	display: block;
}
 

@media (min-width: 992px) {
	.billPanelTable {
		display: table;
		width: 100%;
	}
	.billPanelRow {
		display: table-row;
	}
	.billPanelCell {
		display: table-cell;
		float: none;
		vertical-align: bottom;
	}	
}
.chequeInfo{
	text-align: left;
    word-wrap: break-word;
}
.chequeInfo-label{
	min-width: 80px;
	display:inline-block;
}
.country-code-select{
	padding: 0px;
	width: 18px !important;
}
.cross-btn-panel{
	padding-left: 0px;
}
.dropdown-menu {
    max-height: 250px;
    overflow-y: auto;
}
.drag-drop-box.focus{
	border: 2px solid #a9a9a9;
}
.drag-drop-box{
    border: 2px solid #eee;
    border-radius: 8px;
    padding: 5px 10px;
    position: relative;
    text-align: center;
	overflow:hidden;
}
.deptTypeTab{
    border-bottom: 1px solid #aa4f00;
}
.deptTypeTab > li.active > a{
	font-weight: bold;
	background: #FFFFFF;
	box-shadow: 2px 0px 0 -1px #A0A0A0;
}	
.deptTypeTab > li.active > a, .deptTypeTab > li.active > a:focus, .deptTypeTab > li.active > a:hover{
	border-color: #aa4f00 #aa4f00 transparent;
	background: #FFFFFF;
}
.deptTypeTab li a {
 	background-color: #f5f5f5;
    border-color: #cccccc #cccccc #aa4f00;
    padding: 10px;
    background: #FFFFFF;
	background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#D8D8D8));
	background: -moz-linear-gradient(top,  #FFFFFF,  #D8D8D8);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#D8D8D8');
	background: -ms-linear-gradient(top, #FFFFFF, #D8D8D8);  
	color: #000;
}
.deptTypeTab > li > a:hover,.deptTypeTab > li > a:focus{
    border-color: #aa4f00 #aa4f00 #aa4f00;  
    background: #FFFFFF;
	background: -webkit-gradient(linear, left top, left bottom, rom(#D8D8D8), to(#FFFFFF));
	background: -moz-linear-gradient(top,  #D8D8D8,  #FFFFFF);
	background: -ms-linear-gradient(top, #D8D8D8, #FFFFFF);  
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#D8D8D8', endColorstr='#FFFFFF');
}
.errorAchList{
	margin: 0 0 0 25px;
}

.errMsg{
	color: #a94442;
}
.errMsg a{
	color: #a94442;
	text-decoration: underline;
}
.errMsg a:focus, .errMsg a:hover {
    color: #23527c;
}
.errMsgTxt{
	color: #a94442;
	border: 1px solid;
    display: block;
    margin: 5px 0;
    padding: 10px;
    border-radius: 8px;
    padding: 10px;
}
.errMsgTxtH{
	color: #a94442;
}
.errMsgPanel{
	background: #fff;
	padding: 10px;
	border-radius: 8px;
	border-color: #dca7a7;
	color: #a94442;
}
.errMsgPanel h2{
	font-size:16px;
	font-weight:bold;
	margin: 10px 0 10px 0;
}
.error-hidden .form-control {
    border: 1px solid #ccc;
}
.footer {
    background-color: #f5f5f5;
    border-top: 1px solid #e5e5e5;
    margin-top: 70px;
    padding: 30px 0;	
}

.footer-link li {
	display: block;	 
	margin: 15px 0;
}
.glyphicon{
	top:2px;
}
.header, .marketing, .footer {
    padding-left: 15px;
    padding-right: 15px;
}
.header {
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 0;
}
.header-nav-right{
	display:inline-block;
	float: right;
	
}
@media (max-width: 767px){ 
	.header-nav-right { 
    	right: 0;
    	top: 0;
    	position: absolute;
    	display: table;
	    height: 50px;
	}
	.header-nav-right li{
		/* line-height:40px; */
		float:none;
		display: table-cell;
	    right: 0;
	    top:0;
	    vertical-align: middle;
	}
}
.something-semantic {
  display: table;
  width: 100%;
}
.something-else-semantic {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.header-logo {
    background-image: url("../images/govhk.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 310px 36px;
    height: 36px;
    margin-top:5px;
}
@media (max-width: 767px){ 
	.header-logo { 
    	background-image: url("../images/GovHK_logo_vtRGB.png");
    	background-size: auto 80px;
    	height: 40px;
	}
}

.header-nav .nav > li > a{
	padding: 5px 10px;
}
.has-error.drag-drop-box{
	border-color: #a94442;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}
.has-error .form-control {
    border: 2px solid #a94442;
}
.has-error.error-hidden .form-control {
    border: none;
}	
.h1-container{ 
    background: url("../images/header1_mid.png") 0px -10px repeat-x ;
    border-radius: 8px;
    color: white;
    display: block;
    font-size: 20px;
    font-weight: bold;
    height: 45px;
    line-height: 45px;
    padding: 0 10px; 
    margin: 0 0px;
}
@media (max-width: 767px){ 
	.h1-container{ 
    margin: 0 1px;
}
}	
.h1-title{
	font-size: 20px;
    font-weight: bold;
    line-height: 45px;
    margin-bottom: 0;
    margin-top: 0;
}
.h1-title span{
	font-size: 16px;
}
#JSFFrameId{
	display:none;
}
.label-danger, .label-warning{
	margin: 0 5px 0 0;
	padding: .3em .6em .3em;
}
.left-panel{
	padding-left: 0px;
  	padding-right: 0px;
}
 
.left-nav{
    background-color: #f5f5f5;
    border-radius: 4px 4px 0 0;
    padding-left: 0;
    padding-right: 0;
    border: 1px solid #ddd;
    border-radius:8px;
}


.loading{
	background:url("../images/loading.gif") no-repeat scroll center center / 50px auto rgba(0, 0, 0, 0);
	height:50px;
}
.m-5000[class*="col-md-"]{
	margin: 5px 0 0 0;
}
.navbar-right{
	margin-right:0;
}
.navbar{
	margin-bottom: 0px;
}
.notransition{
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
}
.page-step-nav li{
	background-color: #fff;
}
.page-step-nav .nav-pills > li.active{
    background-color: #AA4F00;
    color: #fff;
}
.page-step-nav .nav-pills > li{
    border-radius: 0 0 0 0;
}
.page-step-nav .nav-pills > li.first{
    border-radius: 8px 8px 0 0;
}
.page-step-nav .nav-pills > li.last{
    border-radius: 0 0 8px 8px;
}
.page-step-nav .nav > li{
    display: block;
    padding: 15px;
    position: relative;
    font-size: 16px;
}
.pdfObj,.pdfFrame{
	width: 100%; 
	height: 360px;
}
.pdfContanier{
	width: 100%; 
	position: relative;
    overflow:auto;
}
.progress-bar{
	 transition: width 0.1s ease 0s;
}
.panel{
	border-radius: 8px;
	 margin-bottom: 10px;
}
 
.panel-default > .panel-heading {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    /* background-image: linear-gradient(to bottom, #C8C5B5 0px, #E8E4D4 100%); */
    background-image: url("../images/header2_mid@2x.png");
    background-repeat: repeat-x;
    background-size: auto 40px;
    
}
.payment-info-table{
	margin-bottom: 0px;
} 
.pdfMsgPanel{
	margin : 20px;
	font-size: 16px;	
}
.row.no-gutters {
  margin-right: 0;
  margin-left: 0;
}
.row.no-gutters > [class^="col-"],
.row.no-gutters > [class*=" col-"] {
  padding-right: 0;
  padding-left: 0;
}
.terms-of-use-box-scroll, #terms-of-use-box-scroll {
    height: 200px;
    position: relative;
    overflow:auto;
}
.tou-faq-link-list{
	padding: 0 0 0 20px;
}
.top-left-navbar a>span:hover {
    border-bottom: 1px solid #000
}
 
.tou-list,.tou-list ul{
	 list-style: inside none disc;
	 padding-left:10px;
}
.toTop{
	position: fixed;
	bottom: 10px;
	right: 10px;
	cursor: pointer;
	display: none;
	border: 1px solid #dfdfdf;
	font-size: 25px;
	padding: 10px 15px;
	border-radius: 8px;
	background-image: linear-gradient(to bottom, #fff 0px, #F7F7F7  100%);
} 
.upload-panel-body{
	padding: 5px;
}
.upload-btn-panel{
	margin-bottom: 10px;
}
.ul-err-msg{
    list-style: disc outside none;
    padding-left: 20px;
}
.upload-icon{
	background:url(../images/echeque_upload.png) 0 0 no-repeat;
	background-size: 200px 100px;
	display: inline-block;
	width: 200px;
	height: 100px;
}
.vertical-align {
    display:table-cell;
    vertical-align:middle;
    float:none;
} 
/*--- ID ----*/


/*--- responsive >768px----*/
@media (min-width: 768px) {
	.container {
	    max-width: 1024px;
	}
	.bill-li{
		
	}
	.container-narrow > hr {
	    margin: 30px 0;
	}
	.jumbotron {
	    border-bottom: 1px solid #e5e5e5;
	    text-align: center;
	}
	.jumbotron .btn {
	    font-size: 21px;
	    padding: 14px 24px;
	}
	
}
/*--- responsive <768px----*/
@media (max-width: 767px){ 
 	.brandhk{
	width:120px;
	}
	.deptTypeTab.nav > li > a{
	padding: 5px;
	max-width: 140px;
	}
	.drag-drop-box{
    padding: 5px 5px;
	}
	.col-xs-12.text-right,.col-xs-12.xs-center{
             
       } 
}
/*--- responsive <375px----*/
@media (max-width: 375px){ 
	.billNumber-label, .payAmount-label{
		height: 40px;
	}
} 

/*--- responsive <320px----*/
@media (max-width: 320px){ 
 	.pdfObj,.pdfFrame{
	height: 200px;
	-webkit-transform:scale(0.8);
	-webkit-transform-origin: 0 0;
	
}