#applicationform {width:100%;padding:20px;background-color: #FFFFFF;text-align: center;}

/* Paragraphs */
#applicationform p {margin:8px 4px;padding:0;text-align: left; line-height: 1.3em;}
#applicationform p.warning {color:red;}
#applicationform p.warning input, #applicationform p.warning select, #applicationform p.warning textarea  { border-color: red; }
#applicationform p.loading { background-image: url('805.gif'); width: 100%; height: 64px; display: block; background-position: center center; background-repeat: no-repeat; }

/* Fieldsets */
#applicationform div.fieldsets { width: 100%; background-color: #FFFFFF;position: relative; overflow: hidden;  -webkit-transition: height 1s; /* Safari prior 6.1 */ transition: height 1s;}
#applicationform div.fieldsets fieldset { width: 100%; display: none; position: absolute;  border: none; float: left; padding:0;margin:0;}
#applicationform fieldset h2 {color:#15528c;padding: 0;text-align: center;}
#applicationform fieldset div.left{float:left;width:100%;padding: 0;text-align: left;line-height: 1.1em;margin: 10px 0 0 0;font-weight:300;}
#applicationform fieldset div.right{float:right;width:100%;padding: 0;line-height: 1.5em;margin: 2px 0;text-align: left; font-weight: 300;}

#applicationform fieldset div.right .warning {border-color: red;}
#applicationform fieldset div.right .warning .image_upload_preview {border-color: red;}

h2.section_success_title {color:#FFF;}

/* Inputs */
#applicationform input[type=button] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

#applicationform span.select {
	position: relative !important;
	display: block !important;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	width: auto;
}
#applicationform input[type=text], #applicationform input[type=number], #applicationform input[type=tel], #applicationform input[type=email], #applicationform select, #applicationform textarea {
	padding: 10px;
	border: 1px solid #0e5e9b;
	margin: 3px 0 10px 0;
	width: 100%;
	box-sizing: border-box;
	color: #2C3E50;
    font-size: 16px;
    outline: none;
}

#applicationform input[type=range] {
    background: none;
    border:none;
    padding:0;
    margin: 0;
}

.dategrid {display: grid;
    grid-template-columns: 32.66% 32.66% 32.66%;
    grid-gap: 1%;
}

.applicationform,
.applicationform__fill {
    background: #ccc;display: block;height: 1em;
    -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
}

.applicationform {position: relative;height: 1em;width: 100%;margin:1em 0;}

.applicationform--disabled {filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);opacity: 0.4;}

.applicationform__fill {height: 1em;width: 100%;background: #0e5e9b;position: absolute;top: 0;}

.applicationform__handle {
    background: #fff;
    border: 4px solid #0e5e9b;
    cursor: pointer;
    display: inline-block;
    width: 2em;
    height: 2em;
    position: absolute;
    top: -0.5em;
}

#applicationform select {
    -webkit-appearance: none;
    -moz-appearance: none;
    background: white;
    margin-right:6px;
    padding: 6px 10px;
}

#applicationform select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

#applicationform input[type="checkbox"] {display:none;}
#applicationform input[type="checkbox"] + label::before {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    border: 1px solid #ccc;
    background-color: #fff;
    display: block;
    content: "";
    float: left;
    margin-right: 5px;
}

#applicationform input[type="checkbox"].required+ label::before {border-color: #15528c;}

#applicationform input[type="checkbox"].warning + label::before {border-color: red;}

#applicationform input[type="checkbox"]:checked+label::before {
    box-shadow: inset 0px 0px 0px 3px #fff;
    background-color: #15528c;
}

#applicationform ::placeholder {color: #CCCCCC;}
.entry #applicationform p, #applicationform span {margin: 10 10px 4px 10px;}
#applicationform input[type=text]:focus, #applicationform textarea:focus, #applicationform select:focus{border: 1px solid #000 !important;}

#applicationform p.warning > label { color: red;}
#applicationform .errormessage {clear:both;color: red;font-weight: 900; display:block;opacity:0;margin-top:12px;}
#applicationform .validator {margin-left: -999px;height:0;}

/* Arrows */
#applicationform select.minimal {
  background-image:
    linear-gradient(45deg, transparent 50%, gray 50%),
    linear-gradient(135deg, gray 50%, transparent 50%),
    radial-gradient(#ddd 70%, transparent 72%);
  background-position:
    calc(100% - 20px) calc(13px),
    calc(100% - 12px) calc(13px),
    calc(100% - .5em) 4px;
  background-size:
    8px 8px,
    8px 8px,
    1.5em 1.5em;
  background-repeat: no-repeat;
}

/* Buttons */

.buttons { height: 50px; clear:both;}
#applicationform .action-button {
	width: 100px;
	background: #333333;
	color: white;
	border: 0 none;
	cursor: pointer;
	padding: 10px 5px;
	margin: 0;
	bottom: 0;
}
#applicationform .action-button:hover, #applicationform .action-button:focus {
	background: #555555;
}

#applicationform .nextslide, #applicationform .submit {position:absolute;right:0;}
#applicationform .previousslide {position:absolute; left:0;}

.employerdetails, .businessdetails {display:none;}

/* The Modal */
#applicationform .modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}

/* Modal Content */
#applicationform .modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 90%;
}

#applicationform .modal-content p,
#applicationform .modal-content h2,
#applicationform .modal-content li {
    color: #343848;
}

/* The Close Button */
#applicationform .closemodal {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

#applicationform .closemodal:hover,
#applicationform .closemodal:focus {
    color: #343848;
    text-decoration: none;
    cursor: pointer;
}

/* Outputs */
.applicationform-outputs table {width:100%;border-collapse: collapse;}
.applicationform-outputs table td {padding: 10px 0;border-bottom: 1px solid #0e5e9b !important;vertical-align: middle !important;}
.applicationform-outputs table td.table-label {text-align: left;color:#0e5e9b; font-weight: 400;}
.applicationform-outputs table td.table-output {text-align: right;color:#0e5e9b;font-weight: 900;}

/* Progressbar */
#progressbar {
	margin: 10px 0 25px 0;
	overflow: hidden;
	counter-reset: step;
    line-height: 30px;
}

#progressbar ul {padding-inline-start: 0;}

#progressbar li {
	list-style-type: none;
	color: white;
	font-size: 16px;
	width: 33.33%;
	float: left;
	position: relative;
}
#progressbar li:before {
	content: counter(step);
	counter-increment: step;
	font-weight: 600;
	width: 30px;
	line-height: 30px;
	display: block;
	color: #000000;
	background: #ccc;
	border-radius: 15px;
	margin: 0 auto;
}
/* Progressbar connectors */
#progressbar li:after {
	content: '';
	width: calc(100% - 30px);
	height: 2px;
	background: #ccc;
	position: absolute;
	left: -50%;
    margin: 0 15px;
	top: 14px;
}
#progressbar li.active:first-child:after {
	/*connector not needed before the first step*/
	content: none; 
}
/* Marking active/completed steps */
/* The number of the step and the connector before it*/
#progressbar li.active:before,  #progressbar li.active:after{
    background: #15528c;
	color: white;
}

/* Regular Rules Now */
.image_upload_preview { width: 108px; height: 108px; border: 1px solid #0e5e9b; background-color: #EEAAEE; cursor: pointer; background: url('img/upload.png') no-repeat center center; white-space: nowrap; position: relative; }
.image_upload_preview .helper { display: inline-block; height: 100%; width: 0px; vertical-align: middle; display: none; }
.image_upload_preview.has_image {text-align: center; }
.image_upload_preview.has_pdf { background-image: url('img/pdf.png'); }
.image_upload_preview img { max-width: 100%; max-height: 100%; vertical-align: middle; display: none; }
.image_upload_preview.has_image img { display: block; margin: auto; }
.image_upload_preview .progress { display: none; width: 100%; height: 100%; opacity: .1;position: absolute; bottom: 0; left: 0; }
.image_upload_preview .progress .bar { background-color: green; width: 0; height: 100%;
	-webkit-transition: width 2s; /* Safari */
	transition: width 2s;
}

/* Small Screens */
@media only screen and (max-width: 800px) {
    .applicationform_page {border: 3px solid #d9d9d9;border-radius: 15px;}
    #applicationform fieldset {padding: 5px 10px 80px 10px;box-sizing: border-box;border-radius: 10px;width: 100%;}
}

/* Submitting Animation */
.working_loading {
	font: 300 4em/150% Impact;
	color: rgba(6, 115, 152, 1);
	text-align: right;
	position: relative;
	left: calc(100% - 30px);
	bottom: 18px;
}

.buttons_working { display: none; }

.working_loading:after {
	content: ' .';
	animation: dots 1s steps(5, end) infinite;
	color: rgba(6, 115, 152, 1);
}

@keyframes dots {
	0%, 20% {
		color: rgba(6, 115, 152, 0);
		text-shadow:
			-.25em 0 0 rgba(6, 115, 152, 0),
			-.5em 0 0 rgba(6, 115, 152, 0);
	}
	40% {
		color: rgba(6, 115, 152, 0);
		text-shadow:
			-.25em 0 0 rgba(6, 115, 152, 0),
			-.5em 0 0 rgba(6, 115, 152, 1);
	}
	60% {
		color: rgba(6, 115, 152, 0);
		text-shadow:
			-.25em 0 0 rgba(6, 115, 152, 1),
			-.5em 0 0 rgba(6, 115, 152, 1);
	}
	80%, 100% {
		color: rgba(6, 115, 152, 1);
		text-shadow:
			-.25em 0 0 rgba(6, 115, 152, 1),
			-.5em 0 0 rgba(6, 115, 152, 1);
	}
}