/* Reset Styles */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
a{
	text-decoration: none;
	text-transform: none;
	color: #4A90E2;
}

body {
	line-height: 1;
	font-weight: normal;
  font-family: "Arial","sans-serif" !important;
  letter-spacing: 0.001em;
  color: #505050;
	text-rendering : optimizeLegibility;
	-webkit-font-smoothing : antialiased;
	font-size: 14px;
	background-color: #FEFEFE;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
.red-notification{font-size: 10px;color: #a94442; padding: 2px;float: right;width: 100%;text-align: right;}
strong {
	font-weight: 600;
}
p{padding: 5px; font-size: 12px;}
div , footer {
	box-sizing: border-box;
}

/* Reset ends */

.main-container{
  min-height: 450px;
  width: 100%;
  float: left;
}
/*Hero section*/
.header-container{
  width: 100%;
	height: auto;	
  background-color: #F0F0F0; 
  float: left;
  text-align: center;
  padding: 10px;
  margin-bottom: 25px;
}

.hero {
	margin: auto;
  position: relative;
  text-align: center;
  padding: 10px;
  width: 85%;
}
.hero img{max-width: 250px;max-height:80px; min-height:50px; min-width:150px;}
.container {
	width: 85%;
	min-height: 500px;
	margin: 30px auto;  
  border-bottom: 1px solid #dcdcdc;
  border-top: 1px solid #dcdcdc;
  padding: 20px 0px;
  display: table;
}
.left-sections{
  float: left;
  width: 70%;
  min-height: 450px;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  display: table;
}
.right-sections{
  float: right;
  width: 28%;
  min-height: 450px;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  background-color: #F0F0F0; 
  display: table;
}
.header{width: 100%; line-height: 35px; color: #000; background-color:#dcdcdc;padding: 0px 10px; }
.left-sec{width:25%;float: left;min-height: 420px;padding: 10px;}
.right-sec{width:75%;float: right;min-height: 420px;border-left: 1px solid #dcdcdc;}
.payment-logo{max-width: 100%; padding: 25px 10px 10px;}
.client-logo{max-width: 100%; padding: 25px 0px 10px;}
.content{padding: 5px;}
.footer-div{
  background-color: #F0F0F0;
  float: left;
  width: 100%
}
.footer{width: 85%;
    margin: 20px auto;
    font-size: 12px;
    font-weight: normal;
    font-family: "Arial","sans-serif" !important;
    letter-spacing: 0.001em;
    color: #505050;
}
.footer .pull-left{float: left; width: 75%;text-align: left; margin: 20px 0px;}
.footer .pull-right{float: right; width: 20%;text-align: right; padding: 0px 2%;margin: 20px 0px;}
.payment-table{font-size: 12px;font-weight: normal;font-family: "Arial","sans-serif" !important;border-radius: 5px; margin:10px; padding: 20px; border: 1px solid #dcdcdc;float:left;}
.half{float: left; width: 50%;word-break: break-word;}
.full{float: left; width: 100%; padding:2px;}
.full label{width: 100%; float: left; padding: 5px 0px;}
.values span{font-weight: 700; text-align: right;padding: 5px 2px; width: 100%;float: right;font-size: 12px;}
.border_buttom{border-bottom:2px solid #dcdcdc; width: 100%; float: left;padding: 7px 0px;}
.term{padding: 5px 0px;}
.term label{width: 100% !important; float: left; padding: 5px 0px;}
.term input[type=checkbox]{float:left;margin: 0px 5px 0px 0px;}
.full input[type=text],.full input[type=email], select, textarea{width: 100%;padding: 7px;border: 1px solid #ccc;border-radius: 4px;box-sizing: border-box;resize: vertical;}
.full .expiry select{margin-right: 5px;}
.full .expiry .sr-only{display:none;}
label.required:after {
    content: "*";
    color: #a94442;
    padding-left: 1px;
}
.has-error .form-control {
    border-color: #a94442 !important;
}
#payment_request_expiry_error,#payment_request_card_number_valid_error{display:none;}
#payment_request_expiry_error,#payment_request_card_number_valid_error,.parsley-errors-list li, .has-error ul li, .help-block ul li{color: #a94442;padding: 5px 0px; font-size:10px;font-family: "Arial","sans-serif" !important;float: left; }
.card-info{position: relative; border-radius: 4px; float: left;width: 100%; border: 1px solid #dcdcdc; padding: 15px 5px;text-align: center;}
.card-info .img{border-top:  1px solid #dcdcdc; text-align: center;}
.card-info:after{
   content: '';
    position: absolute;
    left: 100%;
    top: 27%;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #e8e8e8;
    clear: both;
}
.total-amount{width:100%;padding: 5px;color: #000;background-color: #dcdcdc;}
.full .half:first-child{ padding-right: 0px;}
.full .half:last-child{ padding-left: 10px;}
input[type=submit] {
  background-color: #4CAF50;border: none;color: white;padding: 10px 20px;text-align: center;
  text-decoration: none; display: inline-block;    font-size: 16px;    border-radius: 4px;
  cursor: pointer;
}
input[type=reset] {
  background-color: #e7e7e7; color: black;border: none;padding: 10px 20px;text-align: center;
  text-decoration: none;    display: inline-block;    font-size: 16px;    border-radius: 4px;
  cursor: pointer;
}
.term label{cursor: pointer;}

.alert-error {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}
.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    margin-left: 10px;
    margin-right: 10px;
    text-align: left;
}
.alert-success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}
.alert-warning {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
}
#payment_request_mobile_help{
  margin: 5px 0px;
  float: left;
  width: 100%;
  color:#929292;
}
.col-form-label{padding: 5px 0px;}
.ajax-loader {
  display: none;opacity: 0.7;
   background-color: #fff;
  width: 100%;height: 100%;top: 0px;left: 0px;position: fixed;z-index: 99
}
.ajax-loader img {
  position: absolute;top: 40%;left: 45%;z-index: 100
}

.example-wrapper { margin: 1em auto; max-width: 900px; width: 95%; font: 18px/1.5 sans-serif; }
.example-wrapper code { background: #F5F5F5; padding: 2px 6px; }
.counterDiv{float: left;    width: 100%;    margin: 10% auto;    text-align: center;}
.conter{float: left;    width: 100%; font-size: 20px; text-align: center; font-weight: 700px;}    
@-webkit-keyframes 
load { 0% {
stroke-dashoffset:0
}
}
@-moz-keyframes 
load { 0% {
stroke-dashoffset:0
}
}
@keyframes 
load { 0% {
stroke-dashoffset:0
}
}
.progress {
  position: relative;
  display: inline-block;
  padding: 0;
  text-align: center;
}
.progress>li {
  display: inline-block;
  position: relative;
  text-align: center;
  color: #93A2AC;
  font-family: Lato;
  font-weight: 100;
  margin: 2rem;
}
.progress>li:before {
  content: attr(data-name);
  position: absolute;
  width: 100%;
  bottom: -2rem;
  font-weight: 400;
}
.progress>li:after {
  content: attr(data-percent);
  position: absolute;
  width: 100%;
  top: 3.7rem;
  left: 0;
  font-size: 2rem;
  text-align: center;
}
.progress svg {
  width: 10rem;
  height: 10rem;
}
.progress svg:nth-child(2) {
  position: absolute;
  left: 0;
  top: 0;
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
}
.progress svg:nth-child(2) path {
  fill: none;
  stroke-width: 25;
  stroke-dasharray: 629;
  stroke: rgba(255, 255, 255, 0.9);
  -webkit-animation: load 15s;
  -moz-animation: load 15s;
  -o-animation: load 15s;
  animation: load 15s;
}

.exception h1{    font-size: 40px;
    text-align: center;
    color: red;
    padding-top: 10%;
}
.exception h2{font-size: 25px;
    text-align: center;
    padding: 20px;}
.exception p{padding: 5px;
    font-size: 12px;
    text-align: center;}