/* ==========================================================================
   Custom CSS specific to the QuickPay application
   ========================================================================== */

/* step process - start */
/*
* 1. width for a 3 step process
* 2. width for a 4 step process
* 3. width for a 5 step process
* 4. width for a 6 step process
*/
.step-process {
  list-style: none;
  padding: 0;
  margin: 0;
  zoom: 1;
  margin: 1.0em 0;
}
.step-process:before,
.step-process:after {
  content: "";
  display: table;
}

.step-process:after {
  clear: both;
}
.step-process li {
  float: left;
}
.step-process a {
  display: block;
  border-bottom: 5px solid #eeeeee;
  text-indent: -9999px;
  height: 0;
}
.step-process a.complete {
  border-color: #983222;
  margin-left: 1px;
}
.step3 li {
  /* 1 */
  width: 33.33332%;
}
.step4 li {
  /* 2 */
  width: 25%;
}
.step5 li {
  /* 3 */
  width: 20%;
}
.step6 li {
  /* 4 */
  width: 16.66667%;
}
.step-process a {
	font: 15px/30px "Arimo", "Arial", "Helvetica Neue", Helvetica, sans-serif;
	text-decoration: none;
	color: #333333;
	text-indent: 0;
	height: auto;
	padding: 15px 0;
	margin-bottom: 10px; 
}
.step-process a.complete {
	color: #983222;
}
/* step process - end */

/* tooltip - start */
.helptooltip + .tooltip > .tooltip-inner {
	background-color: black; 
	color: #fff;  
	padding: 10px;
}

.helptooltip {
	display: inline-block;
	margin-left: 10px;
	font-size: 12px;
	color: #999999;
}

.helptooltip:hover {
	color: #1A1A1A;
}

.infotooltip {
	margin-right: 10px;
	color: darkgreen;
}
/* tooltip - end */

/*wells - start */

/*payment details spacing*/
.payment-details {
	margin-top: 15px;
}

.payment-details .payment-details-label {
	font-size: 15px;
	font-weight: bold;
}

.payment-details .payment-details-total {
	margin: 15px 0;
	font-size: 24px;
	font-weight: bold; 
}

.payment-details .receipt-details-label {
	font-size: 15px;
	font-weight: bold;  
}

.payment-details .receipt-details-receipt {
	margin: 15px 0;
	font-size: 24px;
	font-weight: bold;
}

.payment-details .receipt-details-value {
	margin: 0 0 15px 0;
	font-size: 15px;
} 

.payment-detail-table {
	margin-top: 20px;
}

.well { 
	background: #eeeeee; 
}


.center {
      left: 50%;
      bottom:5px;
}

.well:before {
	border-left: 15px solid #eeeeee; 
	top: -15px;
}
/*wells - end */

/* form buttons adjustment overide - start */
.btn-lg, .btn-group-lg > .btn {
	border-radius: 6px; 
	font-size: 17px;
}
/* form buttons adjustment overide - end */

/* page content alignment adjustments and spacing - start */
.page-content {
	clear: both;	
}

.page-content:before {
	content: "";
	height: 20px;
	display: inline-block;
}
/* page content alignment adjustments and spacing - end */


/*payment details spacing - start */
.bpoint-footer {
	clear: both;
	padding-top: 20px;
	padding-bottom: 40px;
}
/*payment details spacing - end */

/*main adjustments and spacing - start */
.main {
	padding-bottom: 0px; 
}
/*main adjustments and spacing - end */

/* processing content alignment adjustments and spacing - start */
.processing-content {
	clear: both;
	display: inline-block;
	text-align: center;
	min-height: 250px;	
}

.unsuccessful-content {
	clear: both;
	display: inline-block;
	text-align: center;
}

.receipt-content {
	clear: both;
	display: inline-block;
	text-align: center;
}

.make-another-payment {
	padding-top: 60px;  /* applies some padding to the top of the button */
	padding-bottom: 40px;
}
/* end */


/* payment successful icon 'green tick' - start */
.payment-success-icon {
	color: #007402;	
}
/* end */

.left-margin-35 {
    margin-left: 35%
}

.left-margin-5 {
    margin-left: 5%
}

.margin-bottom-20 { margin-bottom: 20px; }

/* overides bootstrap and removes the 15px gutter padding on left and right side - start */
.no-gutter > [class*='col-'] {
    padding-right:0;
    padding-left:0;
}
/* end */


/* add spacing inbetween the credit card icons - start */
.creditcard-spacing {
	margin-right: 10px;
}
/* end */

.autowidth {
    width: auto !important;
}




/********************************************************************************************
*medium devices
*********************************************************************************************/
@media only screen and (min-width:1200px){


/* step process - start - width for a 3 step process */
.step-process {
	width: 66.66667%;
}
/* end */


/* footer - start */
.footer .row > [class*='col-'] {
	text-align: right;
}

.footer .row > [class*='col-']:first-child {
	text-align: left;
}
/* end */


/* form control feedback icon adjustment overide - start */
.has-feedback label ~ .form-control-feedback {
  top: 38px;
}
/* end */


/* form validation help-block text alignment - start */
/*validation -green*/
.has-success .help-block, .has-success .control-label, .has-success .radio, .has-success .checkbox, .has-success .radio-inline, .has-success .checkbox-inline, .has-success.radio label, .has-success.checkbox label, .has-success.radio-inline label, .has-success.checkbox-inline label {
	padding-top: 0px;
}

/*validation - red*/
.has-error .help-block, .has-error .control-label, .has-error .radio, .has-error .checkbox, .has-error .radio-inline, .has-error .checkbox-inline, .has-error.radio label, .has-error.checkbox label, .has-error.radio-inline label, .has-error.checkbox-inline label {
	padding-top: 0px;
}

/*validation - warning yellow*/
.has-warning .help-block, .has-warning .control-label, .has-warning .radio, .has-warning .checkbox, .has-warning .radio-inline, .has-warning .checkbox-inline, .has-warning.radio label, .has-warning.checkbox label, .has-warning.radio-inline label, .has-warning.checkbox-inline label {
	padding-top: 0px;
}
/* end */
.part-payment-amount {
    height: 35px !important;
    width: 50%;
    padding-top: 5px !important;
}


}





/********************************************************************************************
*small devices
*********************************************************************************************/
@media only screen and (min-width:768px){


/* footer - start */
.footer .row > [class*='col-'] {
	text-align: right;
}

.footer .row > [class*='col-']:first-child {
	text-align: left;
}
/* end */

/* form control feedback icon adjustment overide - start */
.has-feedback label ~ .form-control-feedback {
  top: 38px;
}
/* end */

/* form validation help-block text alignment - start */
/*validation -green*/
.has-success .help-block, .has-success .control-label, .has-success .radio, .has-success .checkbox, .has-success .radio-inline, .has-success .checkbox-inline, .has-success.radio label, .has-success.checkbox label, .has-success.radio-inline label, .has-success.checkbox-inline label {
	padding-top: 0px;
}

/*validation - red*/
.has-error .help-block, .has-error .control-label, .has-error .radio, .has-error .checkbox, .has-error .radio-inline, .has-error .checkbox-inline, .has-error.radio label, .has-error.checkbox label, .has-error.radio-inline label, .has-error.checkbox-inline label {
	padding-top: 0px;
}

/*validation - warning yellow*/
.has-warning .help-block, .has-warning .control-label, .has-warning .radio, .has-warning .checkbox, .has-warning .radio-inline, .has-warning .checkbox-inline, .has-warning.radio label, .has-warning.checkbox label, .has-warning.radio-inline label, .has-warning.checkbox-inline label {
	padding-top: 0px;
}
/* end */


}





/********************************************************************************************
*mobile devices
*********************************************************************************************/
@media only screen and (max-width:768px) {


/* step process - start */	
.step-process a {
	text-indent: 9999em;
	overflow: hidden;
	height: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
}	
/* end */	

/* row spacer for 'xs' size - start */	
.xs-row-spacer:after {
	content: "";
	height: 10px;
	display: inline-block;
}
/* end */


/* row spacer for credit card icons for 'xs' size - start */	
.xs-creditcard-padding {
	padding-bottom: 10px;
}
/* end */


/* corrects the font size of the form field labels. when viewed in XS mobile mode - start */
.form-horizontal .form-group-lg .control-label {
	font-size: 17px;
}
/* end */


/* overides bootstrap and removes the 15px gutter padding on left and right side - start */
.xs-no-gutter {
    padding-right:0;
    padding-left:0;
}
/* end */


}