@import url("//fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url("//fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap"); 

html, body {
height: 100%;
width:100%;  
background-color:#fff; 
}
  

* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
color:#333333;
text-decoration: none;
text-align:left;
margin:0; 
padding:0;
border:0px;
list-style:none; 
letter-spacing:normal;
/*-webkit-text-size-adjust: 100%; 
*/
border-radius:0px;-webkit-appearance: none;
z-index:1;font-size: 14px;
font-family:"Poppins",Arial, Helvetica, sans-serif;
font-weight:500 ;
background-repeat: no-repeat;
}

#applicationLoading{
display: none; 
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	position: fixed;
	background-image: url(../images/loading-circle.gif);
	background-position: 50% 40%;
	z-index: 111111;
	background-color: #fff;	
	opacity: 0.8; 
} 

#wrapper{width: 100%; max-width:790px; margin:6px auto; padding: 10px 20px  ; position:relative;  z-index:1; }

#progressSlider{
	width: 100%;
	height: 20px;
	border: 0px solid #e1e1e1;
	background-color: #FF6600;
	border-radius: 16px;overflow: hidden;
}
#progressSlider span{
	display: block;
	height: 20px;
	float: left;
	background-color: #749B00;
	border-radius: 1px;
	width: 0px;
	transition: all 1s
}

.sections{position: relative;margin: 5px auto ;border: 1px solid #e1e1e1; padding: 6px 15px;border-radius:5px; }

.buttonsWrapper{ height: 44px; clear: both; margin: 5px auto ; border: 0px solid red}
.progressButtons, input.progressButtons{display: block;float: right;cursor: pointer;width: 48%; height: 44px;  background: #006699; color: #fff; line-height: 44px; text-align: center; margin: 0px auto; transition: 0.2s}
	.previousButton{background-color: #FF6600; float: left}
 .progressButtonsFull, input.progressButtonsFull{ float: none; width: 100%;}
	.progressButtons:hover{ background: #222;}


#applyButton:disabled{opacity: 0.4}

select ,input[type=text], input[type=password] , input[type=tel] { background: #fff; height: 44px; border: 1px solid #ccc; width: 100%;background: #fff;text-indent: 5px; border-radius: 3px;padding: 0; outline:none}

.customQ, textarea.customQ{background: #fff; height: 80px; border: 1px solid #ccc; width: 100%;background: #fff;text-indent: 0px; padding: 4px; outline:none; border-radius: 3px;}

input[type=text]:disabled{ display: none; opacity: 0;}

select{
	background-image: url(../images/selectDD.png); background-position: 100% 50%; background-repeat: no-repeat; background-size: 26px auto;
} 

select:focus  ,input[type=text]:focus , input[type=password]:focus  , input[type=tel]:focus {
	border-color: #9F9F9F
}

select.err  ,input[type=text].err , input[type=password].err  , input[type=tel].err  {border: 1px solid red;}

#salary_expectation{
	background-image: url(../images/pounds.png); background-position: 5px 55%; background-repeat: no-repeat; padding-left: 10px;
}

p{ margin: 6px auto}

.infoPanels{ margin: 6px auto}
.infoPanels *{ font-size: 12.8px;}

#job_intro_text, #job_intro_text *{font-size: 12.8px;}
#job_intro_text a{ color: #006699; text-decoration: underline}

h1#applyLogoText{ font-size: 22px; font-weight: bold;  margin: 0px 0 2px 0} /* client if no logo*/
h2#applyJobTitle{ font-size: 15px; font-weight: bold;  margin:  0px 0  5px 0}/* job desc*/
h5.applyHeader{ font-size: 14.1px; font-weight: bold; border-bottom: 0px solid #e1e1e1; margin: 20px 0 0px 0; line-height: 16px;display: block; clear: both;}

#job_logo {width: 250px; height: 80px; display: block; margin: 10px 0; padding: 0px;border: 0px solid #e1e1e1;}
#job_logo span {display: block; width: 100%; height: 100%;  background-repeat:no-repeat; background-position:  00%  50% ; background-size: contain; } 
 
em.otherBoxNote{ color: #777; font-size: 11px;}
 
	 
#cvUpload, #coverLetterUpload{position: absolute; top: 0; left: -2000000px;} 
#cvUploadLabel, #coverLetterUploadLabel{
	display: inline-block;
	margin: 10px 0 10px 0;
	cursor: pointer;
	text-align: left;
	padding-left: 50px;
	height: 48px;
	line-height: 42px;
	border-radius: 5px;
	background-color: #787A71;
	transition: all 0.3s;
	color: #FBFBFB;
	font-weight: bold;
	font-size: 12.8px;
	background-image: url(../images/cv.png);
	background-size: auto 20px;
	background-position: 12px 50%;
}
#coverLetterUploadLabel{background-image: url("../images/coverLetter.png");	background-size: auto 20px ;}

@media only screen and (min-width:1120px){/* scr*/
#cvUploadLabel{ float: left;	width: 48%;}
#coverLetterUploadLabel{ float: right;	width: 48%;}
}

@media only screen and (max-width:1120px){/* mb*/
#cvUploadLabel, #coverLetterUploadLabel{width: 100%;}
}

#cvUploadLabel:hover, #coverLetterUploadLabel:hover{
  background-size:auto 22px ; background-position: 12px 50%;
 background-color: #444;
}

#cvUploadErrMsg, #coverLetterUploadErrMsg{ font-weight: bold;color: #ff0000; display:none; margin-left: 0 auto;  line-height: 44px; clear: both; width: 100%;}

@media only screen and (max-width:1120px){/* mb*/
#cvUploadErrMsg, #coverLetterUploadErrMsg{ clear:both; width: 100%;line-height: 24px; float: none; margin: 0}
}

#cvUploadLabel.cvUploadErr, #coverLetterUploadLabel.coverLetterUploadErr{ background-color: #FF0000}

#cvUploadLabel.cvUploaded, #cvUploadLabel.cvUploaded:hover,
#coverLetterUploadLabel.coverLetterUploaded, #coverLetterUploadLabel.coverLetterUploaded:hover{ 
background-color: #7AA300;
 background-size:auto 18px ;  background-position: 15px 50%;
background-image: url("../images/cvUploaded.png")
}


#cvUploadLabel span , #coverLetterUploadLabel span  { font-style:normal;display: inline-block; font-size: 12.8px; padding: 0  0 0 10px; color: #fff; }

#cvUploadLabel span sup, #coverLetterUploadLabel span  sup{color: #fff;font-style:normal; font-weight: 700; padding: 0 0 0 3px; font-size: 11.6px;}