@font-face {
    font-family: 'Sinkin Sans 600';
    src: url('../fonts/SinkinSans-600SemiBold.eot');
    src: url('../fonts/SinkinSans-600SemiBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SinkinSans-600SemiBold.woff2') format('woff2'),
        url('../fonts/SinkinSans-600SemiBold.woff') format('woff'),
        url('../fonts/SinkinSans-600SemiBold.ttf') format('truetype'),
        url('../fonts/SinkinSans-600SemiBold.svg#SinkinSans-600SemiBold') format('svg');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Sinkin Sans 300';
    src: url('../fonts/SinkinSans-300Light.eot');
    src: url('../fonts/SinkinSans-300Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SinkinSans-300Light.woff2') format('woff2'),
        url('../fonts/SinkinSans-300Light.woff') format('woff'),
        url('../fonts/SinkinSans-300Light.ttf') format('truetype'),
        url('../fonts/SinkinSans-300Light.svg#SinkinSans-300Light') format('svg');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Sinkin Sans 400';
    src: url('../fonts/SinkinSans-400Regular.eot');
    src: url('../fonts/SinkinSans-400Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SinkinSans-400Regular.woff2') format('woff2'),
        url('../fonts/SinkinSans-400Regular.woff') format('woff'),
        url('../fonts/SinkinSans-400Regular.ttf') format('truetype'),
        url('../fonts/SinkinSans-400Regular.svg#SinkinSans-400Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

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;
	box-sizing: border-box;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1.5;
	font:14px 'Sinkin Sans 400',sans-serif;
	color:#636363;
	background: #f7f7f7;
}
ol, ul {
	list-style: none;
}
img{
	vertical-align: top;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
html,body{overflow-x: hidden}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
a{font-size: 14px;text-decoration: none;}
strong{font-weight: bold;}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #636363;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #636363;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #636363;
}
:-moz-placeholder { /* Firefox 18- */
  color: #636363;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 30px white inset;
}

input, select,textarea{ -webkit-appearance: none;}
.clear_fix{clear:both;display: block;}
.text_right{text-align: right}
.text_center{text-align: center}
.container{width: 100%;max-width:968px;margin: 25px auto 0;border: 1px solid #155B75;position: relative;background: #fff;}

/* header css */
.main_header{padding: 20px;background:#155B75;}
.main_header .logo span{vertical-align:middle;font-size: 24px;color: #fff;margin-left:20px;}
.main_header .logo img{vertical-align: middle;}

.main_container {padding: 20px;}
.main_container > h2{font-size: 20px;color: #000;font-family: 'Sinkin Sans 600', sans-serif;}
.recharge_steps_cnt{padding: 20px 0}
.form_cnt .form_row{margin-bottom: 15px;}
.form_cnt:last-child{margin-bottom: 0;}
.form_cnt label{font-size: 12px;display: block;margin-bottom: 3px;color: #4a4a4a;}
.form_cnt .input_group{position: relative;margin-bottom: 30px;}
.form_cnt .input_group input,.form_cnt .input_group select{width: 100%;background: #fff;color: #636363;border: none;border-bottom: 1px solid #ccc;font:13px 'Sinkin Sans 400',sans-serif;outline: none;height: 33px;box-sizing: border-box;transition: all 0.3s ease;-moz-transition: all 0.3s ease;-webkit-transition: all 0.3s ease;}
.form_cnt .input_group input:active,.form_cnt .input_group input:focus,.form_cnt .input_group select:active,.form_cnt .input_group select:focus{border-color: #308ee0}
.row{margin: 0 -15px;}
.step_content .form_cnt{width: 65%;}
.form_cnt .input_group label{position:absolute;top: 4px;left:0;font-size: 14px;color: #636363;pointer-events: none;transition: all 0.3s ease;-moz-transition: all 0.3s ease;-webkit-transition: all 0.3s ease;}
.form_cnt .input_group input:active + label,.form_cnt .input_group input:focus + label,.form_cnt .input_group select:active + label,.form_cnt .input_group select:focus + label,.form_cnt .input_group.selected label,.form_cnt .input_group.selected label{font-size: 11px;color: #308ee0;top: -15px;}
.form_cnt .input_group.selected label,.form_cnt .input_group.selected label{color: #a0a0a0;font-size: 11px;}
.steps{margin-top: 20px;}
.row:after{display: block;clear: both;content:"";}
.steps .inner_content{padding: 40px 30px 30px 60px;display: none;transition: all 0.3s ease;-moz-transition: all 0.3s ease;-webkit-transition: all 0.3s ease;}
.steps.active .inner_content{display: block;}
.steps .step_content{position: relative;}
.steps .step_content:before{position: absolute;top:8px;left:20px;height:calc(100% + 12px);width: 1px;background: #ddd;content:"";}
.steps.last_step .step_content:before{display: none;}
.steps h3{font-size: 16px;color: #000;position: relative;padding: 7px 0 0 55px}
.steps h5{font-size: 14px;margin:0 0 30px;}
.steps h3 span{height: 40px;width: 40px;border-radius: 50%;text-align: center;line-height: 40px;background: #ddd;margin-right: 15px;position: absolute;top:0;left:0;}
.steps.active h3{color: #155B75}
.steps.active h3 span{background: #155B75;color: #fff}
.steps.completed h3{font-family: 'Sinkin Sans 600', sans-serif;}
.steps.completed h3 span{background: #00a855;color: #fff}
.btn{padding: 13px 20px;background: rgba(255,145,10,1);display: inline-block;background: #155B75;min-width: 200px;border: none;font-size: 16px;color: #fff;text-transform: uppercase;border-radius:5px;margin-right: 10px;cursor: pointer;outline: none;vertical-align: top}
.secondary_btn{background:#ddd;color: #000;}
.col{float:left;padding: 0 15px;}
.col_12{width: 100%;}
.col_4{width: 33.3333%;}
.col_6{width: 50%;}
.col_5{width: 41.66666667%;}
.col_7{width: 58.33333333%;}
.recharge_detail_cnt {margin-bottom: 40px;}
.recharge_detail_cnt li,.transaction_details_cnt li {display: flex;justify-content: flex-start;margin-bottom: 15px;list-style: none}
.recharge_detail_cnt li span,.transaction_details_cnt li span{font-size: 13px;}
.recharge_detail_cnt li span.label_cnt{width: 30%;font-weight: 600;text-transform:capitalize;}
.recharge_detail_cnt li span.value_cnt{width: 70%;line-height: 22px;}
.tag{padding: 2px 8px;font-size: 12px;color: #fff;border-radius: 3px;margin-right: 5px;text-transform: uppercase}
.failed_tag{background-color:#f44336;}
.success_tag{background-color: #66bb6a;}
.pending_tag{background-color: #03a9f4;}
.loader{position:absolute;top:0;left:0;width:100%;height: 100%;z-index:999;text-align: center;background: rgba(255,255,255,0.8);display: none}
.loader .inner_cnt{position: relative;top: 50%;margin: auto;transform: translate(0,-50%);padding: 0 20px}
.loader .inner_cnt p{font-size: 16px;margin: 30px 0 0;}
.mobile_steps_track{display: none;}
.notification{padding: 10px;font-size: 12px;color: #df484a;background: rgba(223,72,74,0.2);border-left: 3px solid #df484a;margin-bottom: 20px;display: none;}
.last_step .btn img{margin-right: 10px;}
.last_step .transaction_details_cnt li span.label_cnt{width: 55%;font-weight: 600;text-transform:capitalize;}
.last_step .transaction_details_cnt li span.value_cnt{width: 45%;}
.last_step h2{font-size: 16px;margin-bottom: 20px;font-weight: 600;color: #155B75}
.transaction_details_cnt li{float: left; width: 50%;padding: 0 20px;min-height: 23px;}
.last_step .transaction_details_cnt:after{display: block;content:"";clear: both;}
.last_step .transaction_details_cnt{margin:0 -20px 30px;}
.transaction_details_cnt li span.tag{font-size: 12px;}
.steps .step_content .button_cnt{margin-top: 30px;}
.success_msg,.data_cnt{display:none;}
@media only screen and (max-width: 768px) {
	.container{margin: 0;border: none;}
	.btn{min-width: 180px;}
	 body {line-height: 1.5;}
} 
@media only screen and (max-width: 640px) {
	.main_header{padding: 10px 20px;}
	.main_header .logo img{width: 45px;}
	.main_header .logo span{display: inline-block;width: 70%;font-size: 16px;}
	.mobile_steps_track{display: block;margin-top: 20px;}
	.mobile_steps_track ul:after{clear: both;display: block;content:"";}
	.mobile_steps_track li{float:left;width: 25%;text-align:center;font-size: 12px;font-weight: 300;position: relative}
	.mobile_steps_track li span,.recharge_detail_cnt li{display: block;}
	.steps h3 span,.steps .step_content:before{display: none;}
	.steps h5{margin-left: 0;margin-top: 10px;color: #000}
	.step_content .form_cnt,.col_6{width: 100%;}
	.steps .inner_content{padding: 0 20px 20px;}
	.btn{min-width: 0;padding: 10px 30px;font-size: 14px;width: 45%;}
	.recharge_detail_cnt li{margin-bottom: 20px;}
	.recharge_detail_cnt li span.label_cnt{margin-bottom:7px;}
	.recharge_detail_cnt li span.label_cnt,.recharge_detail_cnt li span.value_cnt{width: 100%;display: block}
	.main_container{padding: 20px 0;}
	.steps{margin-top: 10px;}
	.recharge_steps_cnt .steps .heading{padding:15px 20px;background: #f7f7f7;border-top: 1px solid #ddd;border-bottom: 1px solid #ddd;display: none;}
	.main_container > h2{text-align:center;font-size: 18px;}
	.mobile_steps_track li span{height: 30px;width: 30px;margin: 0 auto 10px;line-height: 30px;background: #ddd;border-radius: 50%;position: relative; z-index:99;}
	.mobile_steps_track li.active,.mobile_steps_track li.completed{font-weight: 600;color: #000}
	.mobile_steps_track li.active span{background: #155B75;color: #fff;}
	.mobile_steps_track li.completed span{background: #00a855;color: #fff;}
	.loader{position:fixed;}
	.steps h3{font-weight: 600;padding:0;}
	.steps.completed,.recharge_steps_cnt .steps{display: none;}
	.steps.active{display: block;}
	.mobile_steps_track li:after {width: 100%;height: 1px;background: #ddd;left: 50px;top: 25%;content: "";position: absolute;}
	.mobile_steps_track li.active:after{background:#155B75;}
	.mobile_steps_track li.completed:after{background:#00a855;}
	.mobile_steps_track li:last-child:after{display: none;}
	.tag{padding: 5px 8px;display:inline-block;}
	.last_step .btn{width: 100%;display: block;margin-bottom:10px;}
	.last_step .transaction_details_cnt li span.label_cnt,.last_step .transaction_details_cnt li span.value_cnt{width: 100%;margin-bottom:5px;display: block;font-size: 12px;}
	.last_step .transaction_details_cnt{margin: 0 0 25px;}
	.transaction_details_cnt li{float: none;width: 100%;display: block;padding: 0;min-height: 0}
}

@media only screen and (max-width: 320px) {
	.btn{min-width: 125px;}
	.main_header .logo span{font-size: 14px;}
	.steps h5{font-size: 11px;}
	.steps h3{font-size: 14px;}

}

@media print {
	#step1,#step2,#step3,.button_cnt,.main_container > h2{display: none;}
}