/*Toyota Style */

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;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, main {
	display: block;
}
body {
	line-height: 1;

}
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;
}
 a{ text-decoration:none}
h1, h2, h3, h4, h5, h6, .btn, .form-input, button{font-family: 'Montserrat', sans-serif;}
body{font-family: 'Montserrat', sans-serif; margin:0; padding:0;  }

header{ border-top:2px solid #d71921; float:left; width:100%; padding:10px 10px 20px}
header img{ float:left}
header h2{ float:left; text-transform:uppercase; font-size:18px; color:#52494a; padding:20px}

.page-tag{ float:left; width:100%; background:#393939; padding:12px 20px}
.page-tag h2{ font-size:14px; color:#fff; text-transform:uppercase; float:left}
.page-tag h2 span{ color:#bab3b3}
.side-guide{ float:right; background:#f8f8f8; border-left:1px solid #ececec; padding:25px 65px; width:36%; min-height:550px}
.side-guide h3{ color:#c53f45; font-size:18px; text-transform:uppercase; margin:0 0 25px 0}
.side-guide .steps{ float:left; width:100%; margin:15px 0}
.side-guide .steps img{ float:left; margin:0 10px 0 0}
.side-guide .steps h6{ font-size:14px; color:#515151; text-transform:uppercase; margin:8px 0 5px 0}
.side-guide .steps p{ font-size:12px; color:#b3a6a6; line-height:16px}

.filter-steps{ float:left; width:64%;  }
.full-area{ float:left; width:100%}
.radio-check ul{  list-style: none;  float:left;  width: 100%;  margin: 0;  padding: 0;}
.radio-check ul li{  color: #515151;  display: block;  position: relative;  float: left;  width:26%; }
.radio-check ul li input[type=radio]{  position: absolute;  visibility: hidden;}
.radio-check ul li label{ color: #515151; display: block;  position: relative;  font-size:14px; text-transform:uppercase;  padding: 10px 5px 10px 35px;  z-index: 9;  cursor: pointer;  -webkit-transition: all 0.25s linear;}
.radio-check ul li:hover label{	color: #515151;}
.radio-check ul li .check{  display: block;  position: absolute;  border: 3px solid #bababa;  border-radius: 100%;
  height: 25px;  width: 25px;  top: 5px;  left: 0px;	z-index: 5;	transition: border .25s linear;	-webkit-transition: border .25s linear;}

.radio-check ul li:hover .check {  border: 5px solid #d71921;}
.radio-check ul li .check::before {  display: block;  position: absolute;	content: '';  border-radius: 100%;  height: 9px;
  width: 9px;  top: 5px;	left: 5px;  margin: auto;	transition: background 0.25s linear;	-webkit-transition: background 0.25s linear;}
.radio-check input[type=radio]:checked ~ .check {  border: 3px solid #d71921;}
.radio-check input[type=radio]:checked ~ .check::before{  background: #d71921;}
.searching-area .input-groups{ margin:15px 0}
.input-groups{ float:left; width:100%}
.input-groups label{ clear: both; max-width: 325px; width: 100%; text-transform:uppercase; font-size:16px; color:#4b4646; padding:0 25px 0 35px; float:left; line-height:30px}
.input-groups .form-input{ border-radius:13px ; border:1px solid #e6e1e1; padding:5px 15px; width:35%}
.form-input{ border-radius:13px ; border:1px solid #e6e1e1; padding:5px 15px; width:90%}
.btn{ color:#fff; border-radius:13px ; text-transform:uppercase; padding: 7px 14px; cursor:pointer}
.red-btn{ background:#d71921; font-size:12px; border:1px solid #cf171f; margin-left: 35px; width: 100%; max-width: 115px;}
.red-btn:hover{ background:#c0171e }
.g-recaptcha{padding-left: 35px;}

.searching-area{ float:left; width:100%; padding:45px 25px 60px}
.otp-confirm p{ font-size:12px; color:#7f7f7f; margin:8px 0 0 0; padding:0 0 0 175px}
.line-link{ color:#e95a5a; font-size:12px; text-decoration:none; border-bottom:1px solid #f4a2a2; padding-bottom:1px}

.bredcrumb{ font-size:12px; padding:10px 20px; float:left; width:100%}
.bredcrumb label{ color:#4b4646; text-transform:uppercase; }
.bredcrumb label:after{ background:url(arrow.png) no-repeat; width:15px; height:12px; position:absolute; z-index:1; content:""; margin:0 4px}
.bredcrumb span{ color:#7f7f7f; text-transform:uppercase; padding:0 15px}
.pull-right{ float:right}
.process-btn{  text-transform:uppercase; font-size:14px; color:#fff; background:#5dbf15; border-radius:4px ; border:1px solid #5ab914; padding:8px 10px}
.process-btn:hover{ background:#5ab914}
.ajs-button{ cursor:pointer; font-family: 'Montserrat', sans-serif;}
.ajs-button.ajs-ok{ text-transform:uppercase; font-size:14px ; color:#fff; background:#5dbf15; border-radius:4px ; border:1px solid #5ab914; padding:8px 10px}
.ajs-button.ajs-cancel{ text-transform:uppercase; font-size:14px ; color:#6a6a6a; background:#d0d0d0; border-radius:4px ; border:1px solid #c9c8c8; padding:8px 10px}
.invoices{ padding:40px}
.invoices h2{ text-transform:uppercase; font-size:14px; color:#d71921; font-weight:bold; margin-bottom:15px}
.bill_wo_box{ float:left; width:100%; margin:5px 0 20px 0; border-radius:13px; padding:5px 10px; border:1px solid #ededed}
.payall-btn{ margin:-20px 0 0 0}
.bill-details{ float:left; width:45%; padding:10px 25px 5px 5px}
.bill-numbers{ float:left; width:15%}
.bill-payments{ float:left; width:40%}

.bill-details header{ float:left; border:none; padding:0 0 15px 0}
.bill-details header h5{ float:left; font-size:14px; color:#393939; text-transform:uppercase; margin:0 20px 0 0}
.bill-details header h6{ color:#e1555b; float:left; font-size:14px;  }
.bill-details article{ float:left; font-size:12px; color:#7f7f7f}
.bill-details article p{ line-height:18px}

.bill-numbers .amount-box{ float:left; background:#f2f2f2; border:1px solid #ebebeb; border-radius:10px; width:100%; padding:6px 15px; margin:5px 0}
.bill-numbers .amount-box span{ font-size:12px}
.bill-numbers .amount-box h3{ font-size:18px; font-weight:bold; line-height:20px}
.bill-numbers .amount-box.remaining span, .bill-numbers .amount-box.remaining h3	{ color:#4b4b4b}
.bill-numbers .amount-box.total span, .bill-numbers .amount-box.total h3	{ color:#d71921}

.bill-payments{ padding:0 0 0 20px}
.bill-payments span{ background:#de2c34; line-height:90px; border-radius:10px; padding:10px; float:left; margin:5px; width:85px; text-transform:uppercase; color:#fff; font-size:12px; text-align:center; height:110px}
.bill-payments span:after{background:url(arrow.png) no-repeat; width:15px; height:12px; position:absolute; z-index:1; content:""; margin:38px 0  0 11px}

.payment-methord{ float:left; width:80%; padding:25px 0 0 20px}
.payment-methord input{ float:left; margin:10px 0 0 0}

/*.final-pay{ padding:15px 0}*/
.final-pay h2{ font-size:18px; color:#404040; text-transform:uppercase; margin:8px 15px}
.final-pay p{	float: right;	clear: right; margin:10px 0 0 0; color:#de2c34; font-style: italic; }
.searching-area h4{ font-size:16px; line-height:24px; margin:2px 0 15px 0; color:#4b4646; border-bottom:1px solid #dcdcdc; padding-bottom:15px}
.radio-check ul li.clear-select{ float:right; width:35%}
.btn-reset{ float: right; color:#d2a9a9; text-decoration:underline; font-size:11px ; padding:10px}
.btn-reset:hover{text-decoration :none}
.process-btn{ cursor:pointer}
.sure-box h5{ color:#393939; text-transform:uppercase; font-size:15px}
.process-btn.cancel-btn{color:#6a6a6a; background:#d0d0d0; border:1px solid #c9c8c8; padding:11px; margin:0 10px}
.errorTxt, .errors{    color:#d71921; font-size: 12px; float:left; clear:left; padding:0 0 0 175px; width:100%}
#errors{  display: block;         color: #de2c34;      }
.error{ padding:8px 0; float:left; color:#d71921; font-size: 12px;}
span.error{margin-left: 10px;}
/*.errors{padding:10px 0 10px 175px;}*/
.errors{padding: 0 30px 0 30px;}
.success{    color:#6abc12; font-size: 14px; float:left; clear:left; padding:10px; width:100%}
.sure-box h5, .sure-box h2{ float:left}
.sure-box h2{ clear:left; margin: 8px 0}
.sure-box{ padding:15px 5px 5px 10px}
.bill_wo_box.confirm-area .bill-details header h5{  margin-bottom: 5px}
.bill_wo_box.confirm-area .bill-numbers{ width:25%}
.response-payment{ float:left; width:100%; padding:25px}
.response-payment h2 .errors { background:#c71243; color: #fff; font-size: 18px; padding: 15px; border-radius: 3px}
.response-payment h2 .success { background:#6abc12; color: #fff; font-size: 18px; padding: 15px; border-radius: 3px}
.searching-area .response-payment{ padding:0; margin:-15px 0 20px 0}
.response-payment h2 .errors li {  color: #fff; font-size: 16px; padding: 0px; border-radius: 3px; width:100%}
.response-payment h2 .success li {  color: #fff; font-size: 16px; padding: 0px; border-radius: 3px; width:100%}
.searching-area .response-payment h2 .errors, .response-payment .errors ul li{ background:#c71243; color: #fff; font-size: 16px; padding: 15px; border-radius: 3px}
.searching-area .response-payment h2 .success { background:#6abc12; color: #fff; font-size: 16px; padding: 15px; border-radius: 3px}
.payment-methord.radio-check .errors{ padding:10px 0 10px 40px}
.full-area.final-pay button:disabled,.full-area.final-pay button[disabled]{ background:#cbcbcb; border: 1px solid #aaa;}
.input-groups .errorTxt{ padding:0 0 0 16%}
#default_no_id button:disabled {background: #cbcbcb;border: 1px solid #aaa;}
button#btn_otp:disabled  {background: #cbcbcb;border: 1px solid #aaa;}
#btn_search:disabled  {background: #cbcbcb;border: 1px solid #aaa;}
.btn-go-back-to-home { float: left; margin: 0 auto; padding-left:50px; padding-bottom:15px;}
.text_messsage_default_no { color: #4b4646;}

.receipt-download{ float: left; clear :left; width:100%;	padding:10px 50px}
.receipt-download p a{ font-size: 14px; background: #de2c34; color:#fff; padding:2px 5px; border-radius: 3px}
footer{ position: fixed; bottom: 0; float:left; width:100%; background: #1f1f1f;
	padding:5px 25px; font-size:11px}
footer p{  color: #ccc}
footer p a{  color: #ccc}
.btn-logout{
	float: right;
	text-transform: uppercase;
	font-size: 14px;
	color: #fff;
	background: #de2c34;
	border-radius: 4px;
	border: 1px solid #de2c34;
	margin-top: 15px;
	padding-top: 10px;
	padding-bottom: 10px;
}
.btn-logout a{	color: #fff;}

#verify_token-error{ margin-left: 3.5em;}

.bill-numbers.custom-box{ float: right; }

.four-four{ text-align: center; margin-top: 2em; }
.four-four h1{ font-size: 4em}
.four-four h2{ font-size: 2em; padding-bottom: 10px;}
.back-to-home{ margin-top: 2em; display: inline-block;}
.confirm-btn{ margin:-16px 0 0 0}
.final-pay .proceed_error{ font-style:normal; font-size:12px; }
.payment-logos {display: inline-block;	border-left: 1px solid #ccc;margin-left: 1em;padding-left: 1em;}
.payment-logos img {width: 70px;margin-top: 3px;}
.thankyou{
	display: inline-block;
}



@media  screen and (max-width : 480px) {
	header img{ width:46%}
	header h2{ padding:15px 10px; font-size:14px}
	.filter-steps{ width:100%}
	.searching-area	{ padding:30px 20px}
	.radio-check ul li{ width:100%; margin:10px 0}
	.payment-methord.radio-check ul li{ width:50%; }
	.input-groups label, .g-recaptcha{ padding:0}
	.input-groups .form-input{ width:90%; margin-bottom:10px}
	.red-btn{ float:right}
	.side-guide{ width:100%; padding:25px 30px}
	.page-tag h2 span{ float:left; width:100%; margin:0 0 5px 0}
	.otp-confirm p{ float:left; padding:5px 0}
	.invoices{ padding:40px 20px}
	.bill-details header h5{ margin:0 20px 10px 0}
	.bill-details, .bill-numbers, .bill-payments{padding:10px; width:100%}
	.bill-payments span{ height:auto; border-radius:0; width:100%; color:#de2c34; background:none; line-height:16px; text-align:left; border-bottom:1px solid #e95a5a; padding:0}
	.bill-payments span:after{ background:none}
	.payment-methord{ padding:0 ; width:100%}
	.payment-methord .radio-check ul li{ width:50%}
	.final-pay h2{ float:left; margin:0; width:60%}
	.btn-logout{    float: right;padding: 8px;font-size: 11px;margin-top: 10px;}
	.radio-check ul li.clear-select{ float:left; width:100%}
	.radio-check ul li.clear-select .btn-reset{ float:left; padding:10px 0 10px 0}
	.full-area.final-pay{ height:75px; position:fixed; left:0; width:100%; padding:15px; background:#1f1f1f; border-top:2px solid #d71921; bottom:0; z-index:9;  font-size:16px}
	.full-area.final-pay h2{color:#fff; font-size:16px}
	.confirm-btn{ margin:5px 0 0 0; float:left; clear:left}
	.bill_wo_box.confirm-area .bill-numbers{ float:left; width:100%}
	.input-groups .errorTxt{ padding:0}
	.input-groups .errorTxt span{ float:right}
	.payment-methord.radio-check .errors{ padding:10px 0}
	.final-pay .proceed_error{ float:left; clear:none; margin:5px 0 0 0}

}

@media  screen and (min-width :481px) and (max-width : 768px) {
	header img{ width:46%}
	header h2{ padding:15px 10px; font-size:14px}
	.filter-steps{ width:100%}
	.searching-area	{ padding:30px 20px}
	.radio-check ul li{ width:100%; margin:10px 0}
	.input-groups label{ padding:0}
	.input-groups .form-input{ width:90%; margin-bottom:10px}
	.red-btn{ float:right}
	.side-guide{ width:100%; padding:25px 30px}
	.page-tag h2 span{ float:left; width:100%; margin:0 0 5px 0}
	.otp-confirm p{ float:left; padding:5px 0}
	.invoices{ padding:40px 20px}
	 .bill-details header h5{ margin:0 20px 10px 0}
	.bill-details, .bill-numbers, .bill-payments{padding:10px; width:100%}
	.bill-payments span{ height:auto; border-radius:0; width:100%; color:#de2c34; background:none; line-height:16px; text-align:left; border-bottom:1px solid #e95a5a; padding:0}
	.bill-payments span:after{ background:none}
	.payment-methord{ padding:0 ; width:100%}
	.payment-methord .radio-check ul li{ width:50%}
	.final-pay h2{ float:left; margin:0; width:60%}
	.full-area.final-pay{ height:75px; position:fixed; left:0; width:100%; padding:15px; background:#1f1f1f; border-top:2px solid #d71921; bottom:0; z-index:9;  font-size:16px}
	.full-area.final-pay h2{color:#fff; font-size:16px}
	.final-pay .proceed_error{ float:left; clear:none; margin:5px 0 0 0}
	.payment-methord.radio-check .errors{ padding:10px 0}

}

@media  screen and (max-width : 1024px) {
	.payment-logos img {
		width: 50px;
		margin-top: 0;
	}
	.payment-logos {
		display: inline-block;
		border-left: 0;
		margin-left: 0;
		padding-left: 0;
		clear: both;
		float: left;
	}
}

@media  screen and (min-width :768px) and (max-width : 1024px) {
	header img{ width:auto}
	header h2{ padding:20px; font-size:18px}
	.radio-check ul li{ width:26%; margin:10px 0}
	.input-groups label{ padding:0 25px 0 35px}
	.input-groups .form-input{ width:45%; margin-bottom:10px}
	.red-btn{ float:none}
	.bill-numbers{ width:30%}
	.bill-details{ width:100%; padding:10px 5px 5px; margin-bottom:15px}
	.bill-payments{ width:70%}
	.payment-methord{ width:75%}
	.bill_wo_box{ padding:5px 10px 15px}
	.confirm-btn{ margin:-22px 0 0 0; float:right;  }
	.bill_wo_box.confirm-area .bill-numbers{ float:left; width:100%}
	.payment-methord.radio-check .errors{ padding:10px 0}
	.amount-box{width: 100%;}
	section.full-area.final-pay {
		position: fixed;
		bottom: 0;
		background: #fff;
		z-index: 99;
		box-shadow: 0px 0px 20px #ccc;
		padding: 15px 40px 5px;
	}
}

@media  screen
and (min-width :1000px)
and (max-width : 1050px) {
	.radio-check ul li{ width:30%}
	.bill-details{ width:100%; margin:0}
	.bill-details header h5{margin:0 20px 10px 0}
	.bill-numbers{ width:21%}
	.bill-payments{ width:44%}
	.bill-payments{ width:73%}


}

@media screen and (min-width:1024px ) {
	section.full-area.final-pay {
		position: fixed;
		bottom: 0;
		background: #fff;
		z-index: 99;
		box-shadow: 0px 0px 20px #ccc;
		padding: 15px 40px 5px;
	}
}