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

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

/*fieldsets*/
#loan_application div.fieldsets { width: 100%; background-color: #FFFFFF;position: relative; overflow: hidden;  -webkit-transition: height 1s; /* Safari prior 6.1 */ transition: height 1s;}
#loan_application div.fieldsets fieldset { width: 100%; display: none; position: absolute;  border: none; float: left; padding:0;margin:0;}
.buttons { height: 50px; clear:both;}

h2.section_success_title {color:#FFF;}

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

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

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

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

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

#loan_application input[type="checkbox"] {display:none;}
#loan_application 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;
}

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

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

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

#loan_application ::placeholder {color: #CCCCCC;}
.entry #loan_application p, #loan_application span {margin: 10 10px 4px 10px;}
#loan_application input[type=text]:focus, #loan_application textarea:focus, #loan_application select:focus{border: 1px solid #000 !important;}
#loan_application fieldset h2 {color:#15528c;padding: 0;text-align: center;}
#loan_application fieldset h3 {color:#15528c;padding: 1px 0 1px 0;text-align: center;}
#loan_application fieldset div.left{float:left;width:100%;padding: 0 4px 0 4px;text-align: left;line-height: 1.1em;margin: 10px 0 0 0;font-weight:300;}
#loan_application fieldset div.right{float:right;width:100%;padding: 0 4px 0 4px;line-height: 1.5em;margin: 2px 0;text-align: left; font-weight: 300;}

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

#loan_application p.warning > label { color: red;}


#loan_application .validator {margin-left: -999px;height:0;}

/* Arrows */
#loan_application 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*/
#loan_application .action-button {
	width: 100px;
	background: #333333;
	color: white;
	border: 0 none;
	cursor: pointer;
	padding: 10px 5px;
	margin: 0;
	bottom: 0;
}
#loan_application .action-button:hover, #loan_application .action-button:focus {
	background: #555555;
}

#loan_application .next, #loan_application .submit {position:absolute;right:0;}
#loan_application .previous {position:absolute; left:0;}

/*progressbar*/
#progressbar {
	margin: 10px 0 25px 0;
	overflow: hidden;
	/*CSS counters to number the steps*/
	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 green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before,  #progressbar li.active:after{
    background: #15528c;
	color: white;
}

/* PreLoad Loading Gif */
.image_upload_preview { background-image: url('img/loading.gif'); }

/* Regular Rules Now */
.image_upload_preview { width: 108px; height: 108px; border: 1px solid black; 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 { background-color: black; text-align: center; background-image: url('img/loading.gif'); }
.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: 80%; height: 20px; opacity: .5; border: 1px solid green; border-radius: 5px; position: absolute; bottom: 10%; left: 10%; }
.image_upload_preview .progress .bar { background-color: green; width: 0; height: 100%;
	-webkit-transition: width .3s; /* Safari */
	transition: width .3s;
}

/* Buttons */
.mortbutton {display: grid;
    grid-template-columns: 49.5% 49.5%;
    grid-gap: 1%;
    cursor: pointer;
    margin: 12px 0 0 0;
}
.mortbutton input[type="radio"] {
  opacity: 0;
  position: fixed;
  width: 0;
}
.mortbutton label {
    display: inline-block;
    text-align: center;
    line-height: 30px;
    font-size: 12px;
    font-weight: 600;
    background-color:#999999;
    color: #FFFFFF;
}
.mortbutton label:hover, .mortbutton input[type="radio"]:checked + label {background-color:#58595B;}

/* RADIO */
.checkradio.credit{display: grid;
    grid-template-columns: 32.6666666% 32.6666666% 32.6666666%;
    grid-gap: 1%;
    cursor: pointer;
}
.checkradio.acom{display: grid;
    grid-template-columns: 49.5% 49.5%;
    grid-gap: 1%;
    cursor: pointer;
    margin-bottom: 2em;
}

.checkradio input[type="radio"] {
  opacity: 0;
  position: fixed;
  width: 0;
}
.checkradio label {
    display: inline-block;
    text-align: center;
    line-height: 30px;
    font-size: 14px;
    opacity: .5;
	border-radius: 5px;
}
.checkradio input[type="radio"]:checked + label {
    border-color: #4c4;
    opacity: 1; 
    color:#FFF;
}
.checkradio label:hover {
    opacity: .7;
}

/*cell phone*/
@media only screen and (max-width: 800px) {
    .loan_application_homepage {
        display: block;
        padding: 20px;
    }
    .loan_application_page {
    border: 3px solid #d9d9d9;
    border-radius: 15px;
    }
    #loan_application fieldset {
	   padding: 5px 10px 80px 10px;
	   box-sizing: border-box;
        border-radius: 10px;
	   width: 100%;
    }
    .gridcontent {
    padding: 20px;
    }
    .gridcontent h1{
        font-size: 1.8rem;
        line-height: 2rem;
    }
}

/* 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);
	}
}