/******************** 
Import Font
********************/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap');
@import url('../css/icon-font/css/line-awesome.css');


/******************** 
Normalize
********************/

html, body {
	height:100%;
}

body {
	font-family: 'Poppins', sans-serif;
	font-size: 15px;
	font-weight:300;
	color:#333;
	background:url(../images/body-bg.jpg) no-repeat center center fixed;
	background-size:cover;
	margin:0;
	padding:0;
	overflow-y:scroll;
}

.center {
	text-align:center;
}
.right {
	text-align:right;
}

/*--------------------------------------------------------------
# Responsive Grid
--------------------------------------------------------------*/
.grid{
max-width:1220px;
margin:0 auto;
}

.grid.flex{
width:100%;
max-width:100%;

}

.row{
display:block;
/*overflow:hidden;*/
clear:both;
}

.row:before,
.row:after {
  content: "";
  display: table;
}

.row:after {
  clear: both;
}

.row {
  zoom: 1; /* ie 6/7 */
}


/*.{ width:95%; margin:0 auto;}*/

*[class*="col_"].alpha{margin-left:0;}
*[class*="col_"].omega{margin-right:0;}
 
.col_1  { width: 6.6666666666667%; }
.col_2  { width: 15%; }
.col_3  { width: 23.333333333333%; }
.col_4  { width: 31.666666666667%; }
.col_5  { width: 40%; }
.col_6  { width: 48.333333333333%; }
.col_7  { width: 56.666666666667%; }
.col_8  { width: 65%; }
.col_9  { width: 73.333333333333%; }
.col_10 { width: 81.666666666667%; }
.col_11 { width: 90%; }
.col_12 { width: 98.333333333333%; }

*[class*="col_"]{
margin-left: 0.83333333333333%;
margin-right: 0.83333333333333%;
margin-top:0.5em;
margin-bottom:0.5em;
float: left;
display: block;
}

.grid img{
max-width: 100%;
height:auto;
}

.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}
.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}
* html .clearfix, *:first-child+html .clearfix{zoom:1}

/* Viewable Grids 
	To view your grids, add the class .visible to any grid container.
	This will add a background color so you can see the layout of your grids. 
*/
*[class*="col_"].visible{
background:#eee;
border:1px dotted #ccc;
}


/*---------------------------------
	Responsive Grid Media Queries - 1280, 1024, 768, 480
	1280-1024 	- desktop (default grid)
	1024-768 	- tablet landscape
	768-480 	- tablet 
	480-less 	- phone landscape & smaller
-----------------------------------*/
@media all and (min-width: 1024px) and (max-width: 1280px) {
	
	.grid *[class*="col_"]{}
	.grid{max-width: 1024px;}
	.show-desktop	{display:block;}
	.hide-desktop	{display:none;}
	.show-tablet	{display:none;}
	.hide-tablet	{display:block;}
	.show-phone		{display:none;}
	.hide-phone		{display:block;}
	
}

@media all and (min-width: 768px) and (max-width: 1024px) {
	
	.grid *[class*="col_"]{}
	.grid{max-width: 768px;}
	.show-desktop	{display:none;}
	.hide-desktop	{display:block;}
	.show-tablet	{display:block;}
	.hide-tablet	{display:none;}
	.show-phone		{display:none;}
	.hide-phone		{display:block;}
	
}


@media all and (min-width: 480px) and (max-width: 768px) {

	.grid *[class*="col_"]{
	float:none;
	width:auto;
	clear:both;
	display:block;
	}
	
	/* columns inside of columns */
	.grid *[class*="col_"] [class*="col_"]{
	margin-left:0;
	margin-right:0;
	width:100%;
	}
	
	.grid{max-width: 480px;}
	.show-desktop	{display:none;}
	.hide-desktop	{display:block;}
	.show-tablet	{display:block;}
	.hide-tablet	{display:none;}
	.show-phone		{display:none;}
	.hide-phone		{display:block;}
	
}

@media all and (max-width: 480px) {
	
	.grid *[class*="col_"]{
	float:none;
	width:auto;
	clear:both;
	display:block;
	}
	
	/* columns inside of columns */
	.grid *[class*="col_"] [class*="col_"]{
	margin-left:0;
	margin-right:0;
	width:100%;
	}
	
	.grid{max-width: 100%;/*320*/}
	.show-desktop	{display:none;}
	.hide-desktop	{display:block;}
	.show-tablet	{display:none;}
	.hide-tablet	{display:block;}
	.show-phone		{display:block;}
	.hide-phone		{display:none;}
	
}

/*--------------------------------------------------------------
# Form Styling
--------------------------------------------------------------*/
input, select, textarea, button {
	font-family: 'Poppins', sans-serif;
}

input[type=text], input[type=password], select, textarea {
border: 1px solid #ccc;
font-size: 14px;
padding: 12px 13px;
width: 100%;
border-radius: 4px;
box-sizing:border-box;
}
input[type=text], input[type=password], select {
/*	height:35px;
	line-height:35px;*/
}
textarea {
	height:80px;
}

select {
	color:#666;
}


input.disabled, select.disabled {
	background:#efefef;
	border:none;
}
.price-sign {
	position:absolute;
	font-size:20px;
	line-height:45px;
	padding-left:3px;
}
.price-field {
	padding-left:25px!important;
}

/*--------------------------------------------------------------
# Form Page Styling
--------------------------------------------------------------*/

.form-outer-wrapper h1 {
	text-align:center;
	color:#fff;
	font-weight:500;

}
.form-white-wrapper {
	background:#fff;
	border-radius:5px;
	padding:15px;
	position:relative;
	padding-bottom:75px;
}
.call-center-details {
	padding-bottom:10px;
	margin-bottom:20px;
	border-bottom:solid 1px #999;
}
.form-white-wrapper h3 {
	text-align:center;
	color:#ff7e18;
	font-weight:500;
	letter-spacing:0.5px;
	margin:0;
	padding:10px;
	font-size:20px;
	display:flex;
	align-items:center;
	justify-content:center;
}
.form-white-wrapper h3 i {
	font-size:25px;
	margin-right:5px;
}
.note {
	font-size:13px;
	color:#666;
	/*padding:4px 0;*/
	font-style:italic;
}

.questionlabel {
	padding: 25px 5px 0 5px;
	font-size: 16px;
	/*font-weight:400;*/
	display: block;
	font-weight: bold;
}
.questionlabel span {
	color:#ff0000;
}
.previous-next-button-container {
	position:absolute;
	width:100%;
	bottom:0;
	background:#ff7e18;
	padding:10px;
	color:#fff;
	left:0;
	border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
box-sizing:border-box;
}
.previous-next-button-container button {
	background:none;
	border:none;
	cursor:pointer;
	color:#fff;
	font-size:16px;
	font-weight:500;
}
.primary-button {
	color:#fff;
	background:#ff7e18;
	padding:10px 20px;
	text-align:center;
	border:solid 1px #ff7e18;
	font-size:15px;
	font-weight:500;
	border-radius:5px;
	cursor:pointer;
	margin:0 5px;
	display:inline-block;
}
.copy-button {
	color: #fff;
	background: #ff7e18;
	padding: 10px 20px;
	text-align: center;
	border: solid 1px #ff7e18;
	font-size: 15px;
	font-weight: 500;
	border-radius: 5px;
	cursor: pointer;	
	display: inline-block;
}
.secondary-button {
	color:#ff7e18;
	background:#fff;
	padding:10px 20px;
	text-align:center;
	border:solid 1px #ff7e18;
	font-size:15px;
	font-weight:500;
	border-radius:5px;
	cursor:pointer;
	margin:0 5px;
}

.submit-button-div {
	padding:30px 0;
}
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.7);
    z-index: 1001;
}
.popupbox {
	position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
padding: 25px;
border-radius: 10px;
max-width: 400px;
position:relative;
text-align:center;
}

.popupMessage {
	padding:20px 0;
}

.popupclose {
	position:absolute;
	top:10px;
	right:10px;
	font-size:18px;
	color:#000;
	font-weight:500;
	cursor:pointer;
}
.previous-button {
	width:45%;
	float:left;
}
.next-button {
	width:45%;
	float:right;
	text-align:right;
}
.form-label {
	font-size:13px;
	font-weight:500;
	/*padding:10px 0 0 0;*/
	display:block;
}
.form-label span {
	color:#ff0000;
}
.top-right-buttons {
	position:fixed;
	top:0;
	right:0;
	padding:10px;
	color:#fff;
	/*background:#ff7e18;*/

}
.top-right-buttons a {
	color:#fff;
	margin:3px;
	background:#ff7e18;
	border-radius:5px;
	padding:7px 15px;
	cursor:pointer;
	display:inline-flex;
	align-items:center;
}
.top-right-buttons a i {
	font-size:20px;
	margin-right:5px;
}

.errorMessage{
	color: #ff0000;
	font-size: 14px;
	font-weight: 400;
}
.mphoneerrorMessage {
	color: #ff0000;
	font-size: 14px;
	font-weight: 400;
}
.hphoneerrorMessage {
	color: #ff0000;
	font-size: 14px;
	font-weight: 400;
}

.callerinfo {
	padding: 5px;
	font-size: 15px;
	text-align: right;
	border: solid 1px #ff7e18;
	border-radius: 5px;
	color: #ff7e18;
}
.callerinfo span {
	color:#000;
	font-weight:500;
}
/*--------------------------------------------------------------
# Login Page Styling
--------------------------------------------------------------*/

.login-div-outer {
	position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
padding: 15px;
border-radius: 10px;
width:350px;
max-width: 400px;
text-align:center;
}

.login-div-outer h2 {
	margin-bottom:0;
	font-weight:500;
	color:#ff7e18;
}
.login-div-outer h3 {
	margin-top:0;
	font-weight:400;
}
.login-formfield {
	position:relative;
	margin:10px 0;
}
.login-formfield i {
	position: absolute;
    left: 3px;
    top: 8px;
    font-size: 25px;
    color: #999;
}
.login-formfield input {
	padding-left:30px;
	/*height:40px;*/
}


#loader {
	background: #e5e5e5;
	color: #666666;
	position: fixed;
	height: 100%;
	width: 100%;
	z-index: 5000;
	top: 0;
	left: 0;
	float: left;
	text-align: center;
	padding-top: 20%;
	opacity: .80;
}

.spinner {
	margin: 0 auto;
	height: 64px;
	width: 64px;
	animation: rotate 0.8s infinite linear;
	border: 5px solid darkorange;
	border-right-color: transparent;
	border-radius: 50%;
}

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

	100% {
		transform: rotate(360deg);
	}
}

.ddlHeight {
	height: 50px;
	overflow-y: scroll;
	overflow-x: hidden;
}


.note-banner-disqualified {
	font-size: 12px;
	background-color: #FF0000;
	color: #FFF;
	border: 1px solid #FF0000;
	height: 24px;
	line-height: 24px;
	width: 99%;
	display: block;
	margin: 8px 0px 0px 0px;
	padding: 8px 4px;
	border-radius: 4px;
	font-weight: 600;
}

.note-banner-warning {
	font-size: 12px;
	background-color: #ff7e18;
	color: #FFF;
	border: 1px solid #ff7e18;
	height: 24px;
	line-height: 24px;
	width: 99%;
	display: block;
	margin: 8px 0px 0px 0px;
	padding: 8px 4px;
	font-weight: 600;
	border-radius: 4px;
}

.note-banner-information {
	background-color: #ff4d4d;
	font-size: 20px;
	color: #FFF;
	font-weight: 400;
	height: 32px;
	line-height: 32px;
	width: 98%;
	display: block;
	margin: 8px 0px 0px 0px;
	padding: 8px 0 8px 16px;
	border: 1px solid #FF0000;
	border-radius: 4px;
}

input:focus {
	outline: none !important;
}

#priceNegotiationMessageContainer {
	background-color: #FCFCFC;
	font-size: 16px;
	color: #FF0000;
	font-weight: 400;	
	width: 98%;
	display: block;
	margin: 8px 0px 0px 0px;
	padding: 8px 0 8px 16px;
	border: 1px solid #FF0000;
	border-radius: 4px;
	text-align:center;
}

.cancel-button-container {	
	padding: 10px;
	color: #fff;
	/*background:#ff7e18;*/
}

.cancel-button-container a {
	color: #fff;
	margin: 3px;
	background: #ff7e18;
	border-radius: 5px;
	padding: 7px 15px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
}

.cancel-button-container a i {
	font-size: 20px;
	margin-right: 5px;
}

.spacer{
	display:block;
	height:64px;
	/*background-color:#EEE;*/
}

.offline-banner {
	background-color: #ff4d4d;
	font-size: 20px;
	color: #FFF;
	font-weight: 400;
	height: 32px;
	line-height: 32px;
	width: 98%;
	display: block;
	margin: 8px 0px 0px 0px;
	padding: 8px 0 8px 16px;
	border: 1px solid #FF0000;
	border-radius: 4px;
}