@charset "utf-8";

/* CSS Document */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, hr, big, cite, code, del, dfn, em, font, 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 { margin:0; padding:0; border:0; outline:0; }

* { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;  }

body { 
	width:100%; height:100%; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333;  margin:0 auto; text-align:center;
	background: #ccc no-repeat top center; background-size:cover;
}

.pull-left					{ float:left; }
.pull-right					{ float:right; }

#header 					{ width:100%; height:70px; background:#F5F5F5; text-align:left;}
#header div.logo			{ max-width:960px; width:100%; margin:auto; text-align:left; padding:10px; }
#main_wapper 				{ max-width:960px; width:100%; margin:auto; text-align:left; }
.responsive-image 			{ height:auto; width:100%; }


#merchantSection 			{ display:block;  background:#fff; margin:10px 0px;  }
#merchantSection div.col 	{ width:50%; float:left; text-align:center; padding:16px 10px; text-transform:uppercase; font-weight:bold; color:#939598; }
#merchantSection div.col h1 { line-height:24px; color:#FF5400; font-size:20px; }
#merchantSection div.col h1.amount { font-size:24px; }
#merchantSection div.col p 	{ font-size:12px; }

.confirmBtn					{ background-color:#004685; border-radius:8px; padding:10px; box-sizing:border-box; width:100%; color:#fff; 
								  -webkit-box-shadow: inset 0 0 1px 1px rgba(0,0,0,0.2); box-shadow: inset 0 0 1px 1px rgba(0,0,0,0.2); text-shadow: 0 1px 0 rgba(0,0,0,0.2);
								  cursor:pointer;background-color: #004685;
								}
.confirmBtn h2 				{ text-transform:uppercase; font-size:16px; margin:8px auto 0px; }
.confirmBtn:hover 				{ background-image:none; background-color:#004685 !important; }
.confirmBtn p 					{ font-size:12px; color:rgba(255,255,255,0.9); }

#mainSection					{ display:block;  background-color:#fff; min-height:50vh;position:relative; padding-bottom: 60px}
/* .upimobile					{ background:#fff url(../images/UPI.png) no-repeat left center;background-size: contain;} */
.upimobile {
    /* background: #fff url(../images/UPI.png) no-repeat left center; */
    /* background-size: contain; */
    /* position: absolute; */
    left: 0px;
    top: 0px;
    max-width: 225px;
    display: block;
    float: left;
    width: 35%;
}
#mainSection div.col 			{ width:50%; float:left; text-align:center; padding:25px 10px 0px; color:#939598; text-align:center; }
#mainSection div.row 			{ display:block; margin:10px auto; width:430px; }
#mainSection div.row div.td-col	{ width:33%; float:left; color:#FF5400; font-weight:bold; padding-left:30px; font-size:14px; 
								  text-align:left; position:relative; margin-right:10px; 
								}
#mainSection div.row div.td-col::last-child { width:25% !important; margin-right:0px !important; }
#mainSection div.row div.td-col img { position:absolute; left:10px; top:50%; transform:translate(-50%,-50%); }


#mainSection div.row.leftCol 	{ margin-top:0px;  }
#mainSection div.row.leftCol div.col { padding:0px; }

#mainSection::after {
    content: '';
    display: block;
    background: url(/PaymentGateway/UPI/images/powered-by-upi.png) no-repeat center center;
    padding-bottom: 40px !important;
    background-size: 70px;
    margin: 50px 10px 10px 10px;
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

#text2 { width:50%; height:70px; margin:0px; padding:0px; float:right; text-align:center; background:#FFF; }

#upiprobg { width: 100%; height: auto; margin: 0px; padding: 0px; background: #B2DCF2; text-align: center; border-bottom: 2px solid #004C8A; }

#npciprobg { width: 100%; height: auto; margin: 0px; padding: 0px; background: #FFF; text-align: center; border-bottom: 2px solid #004C8A; padding: 10px; box-sizing: border-box;}

.npci-banner-header{
	font-size: 26px;
	font-weight: normal;
    margin: 15px 0 0 0;
}

ul.blue-clr li 	{ list-style:none; padding:0px; margin:54px 0px 40px 0px; }
.blue-clr 		{ color:#004685; text-align:left; font-size:14px; font-weight:700; }
.blue-clr span 	{ background-color:#fcb315; border-radius:50%; color:#fff; display: block; float: left; 
				font-weight:bold; height:23px; line-height:23px; margin-right: 10px; text-align:center; width:23px; }

.qrcodeblock	{ background-color:#004685; text-align:center; padding:15px 10px !important; width:202px;}
.qrcodeblock img:first-child { margin-bottom:20px; }

.TrxnErr 		{ background-color: #f9a9a9; border-radius: 4px; color: #ac0a05; padding: 10px; }
.errMsg			{ margin:0px auto; padding:10px 10px 10px 40px; border-radius:2px; font-size:13px; font-weight:700; 
				  background-color: #ffeff2; border:1px solid #ebccd1; color: #f6504d; position:relative; text-align:left; }

				  
.errMsg i 		{ width:18px; height:18px; color:#fff; font-style:normal; background:#d60600; border-radius:100%; display:inline-block; text-align:center; position:absolute; left:15px; top:50%; transform:translate(-20%,-50%) }

.ErrorContainer { margin: 150px auto 25px; width: 46.66666667%; position:relative;  }
.content-container {
	background:#fff;
	margin:90px auto;
	font: 13px/20px Arial, Tahoma, Verdana, sans-serif; font-weight:400;
	color:#424e5a; padding:15px 15px 40px;  border-radius: 4px; text-align:left; border:1px solid #ccc; text-shadow: 0 0 0;
}
.content-container h1 { line-height: auto; font-size: 19px; font-weight: bold;  color: #414141; text-shadow: 0 1px white; margin:15px 0px 10px; padding-bottom:10px; }
.ErrorContent { font-size:14px; color:#4a4a4a; line-height:1.8em; margin-bottom:10px; }
.contentPad100 { padding-left:100px; } 
.error { background:#fff url(images/error-icon.png) no-repeat 30px 30px; }


div#countDown {
	display: inline-block;
    font-size: 16px;
    line-height: 21px; text-align:center;
    vertical-align: top; font-style:normal;
	position:absolute; top:-1px; bottom:-1px; left:-1px; width:75px; padding:7px;
	background-color:rgba(108,187,255,0.7);
	
	-webkit-transition: -webkit-transform ease-out 0.1s, background 0.2s;
	-moz-transition: -moz-transform ease-out 0.1s, background 0.2s;
	transition: transform ease-out 0.1s, background 0.2s;
}


.btn div#countDown p { font-size:11px; margin:0px; padding:0px; }
.btn div#countDown ul, .btn div.countDown li { padding:0px; margin:0px; list-style:none; float:left; }
.btn div#countDown ul { width:100%; }
.btn div#countDown li { width:42%; float:left; line-height:normal; font-size:10px; text-transform:uppercase;}
.btn div#countDown li:first-child { text-align:right; padding:0px 6px 0px 0px;  }
.btn div#countDown li:first-child + li { text-align:left; }
.btn div#countDown li span { display:block; font-size:15px; }
.btn div#countDown::after {
    background: rgba(255, 255, 255, 0.3) none repeat scroll 0 0;
    content: "";
    height: 36px;
    position: absolute;
    top: 6px;
    width: 1px;
	right:0px; z-index:5;
	
	-webkit-transform: scale(0.9);
	-moz-transform: scale(0.9);
	-ms-transform: scale(0.9);
	transform: scale(0.9);
}
.app-loader{
	display:none;
	height:40px;
	background:url(../images/app-loader.gif) no-repeat center center;
}


@media screen and (max-width: 768px){
	#main_wapper, #merchantSection div.col, .boxleft , .boxright, #mainSection div.col, #mainSection div.row { width:100%; float:none; }
	.npci-banner-header{
		font-size: 18px;
    	margin: 10px 0 0 0;
	}
}



.upi-note {
    width: 65% !important;
    float: left !important;
    max-width: 430px;
}   

.glyph-icon{
	position: absolute;
    top: 28px;
    right: 10px;
    bottom: 0;
    text-align: right;
	font-family: bolder;
	font-size: 18px;
}

.success-icon{
	color:green;
}

.fail-icon{
	color:red;
}

#loaderContainer{
  /* position: absolute;
  z-index:100000;
  left:50%;
  top:50%; transform: translate(-50%,-50%);
  height:300px;
  width:300px;
  background:red;
  color:#fff;  */
  display:none;
}

.loader {
  position:fixed;
  width:100%;
  left:0;right:0;top:0;bottom:0;
  background-color: rgba(255,255,255,0.7);
  z-index:9999;
}

@-webkit-keyframes spin {
  from {-webkit-transform:rotate(0deg);}
  to {-webkit-transform:rotate(360deg);}
}

@keyframes spin {
  from {transform:rotate(0deg);}
  to {transform:rotate(360deg);}
}

.loader::after {
  content:'';
  display:block;
  position:absolute;
  left:48%;top:40%;
  width:40px;height:40px;
  border-style:solid;
  border-color:#2869ac;
  border-top-color:transparent;
  border-width: 4px;
  border-radius:50%;
 -webkit-animation: spin .8s linear infinite;
  animation: spin .8s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}