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

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

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

#dmapplication fieldset div.right.uploads {display:grid;grid-template-columns: 33.3333% 33.3333% 33.3333%;}

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

#dmapplication .moneycheck {line-height 30px;}

.section_success, .section_success_title, .section_success_blurb p {text-align: center;}
h2.section_success_title {color:#FFF;}

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

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

#dmapplication 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%;
}

.dmapplication,
.dmapplication__fill {
	background: #e6e6e6;display: block;height: 10px;
	box-sizing: border-box;
}

.dmapplication {position: relative;height: 10px;width: 100%;margin:1em 0 0.5em 0;border-radius: 5px;}

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

.dmapplication__fill {height: 10px;width: 100%;background: #15528c;position: absolute;top: 0;border-radius: 5px;}

.dmapplication__handle {
	background: #fff;
	border: 5px solid #0e5e9b;
	cursor: pointer;
	display: inline-block;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	position: absolute;
	top: -10px;
}

#dmapplication .mortgagecontact {font-weight: 900;}

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

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

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

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

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

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

/* Radio Buttons */
#dmapplication .selectbutton input[type="radio"] {
  opacity: 0;
  position: fixed;
  width: 0;
}
#dmapplication .selectbutton label {
    display: block;
    text-align: center;
    line-height: 30px;
    margin-top:12px;
    width: 100%;
    background-color:#E6E6E6;
    color: #09233a;
    cursor: pointer;
    box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.4);
}
#dmapplication .selectbutton label:hover, #dmapplication .selectbutton  input[type="radio"]:checked + label {color:#ffffff;background-color:#09233a !important;}

/* YesNo Buttons */
#dmapplication .yesno {display:grid;grid-template-columns: 49% 49%;grid-gap: 2%;}
#dmapplication .triple {display:grid;grid-template-columns: 33% 33% 33%;grid-gap: 0.5%;}

#dmapplication .yesnobutton input[type="radio"] {
  opacity: 0;
  position: fixed;
  width: 0;
}
#dmapplication .yesnobutton label {
    display: block;
    text-align: center;
    line-height: 1.1em;
    width: 100%;
    background-color:#E6E6E6;
    color: #0e5e9b;
    cursor: pointer;
    padding: 6px 0;
}
#dmapplication .yesnobutton label:hover, #dmapplication .yesnobutton input[type="radio"]:checked + label {color:#ffffff;background-color:#0e5e9b !important;}

#dmapplication ::placeholder {color: #CCCCCC;}
#dmapplication input[type=text]:focus, #dmapplication textarea:focus, #dmapplication select:focus{border: 1px solid #000 !important;}

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

/* Arrows */
#dmapplication 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 */

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

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

.employerdetails, .businessdetails, .businesspurchase, .debtdetails, .mortgagetype_hidden, .mortgagedetails, .vehicledetails_hidden, .billsother_hidden, .coborrower_hidden, .accomodation_hidden, .mortgagecontact {display:none;}

/* The Modal */
#dmapplication .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 */
#dmapplication .modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 90%;
}

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

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

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

/* Outputs */
div.table-label {text-align: center; font-weight: 400;}
div.table-label span {text-align: center; font-weight: 900;font-size:22px;}
div.totals {text-align: center; font-weight: 400;font-size:12px;}

/* Progressbar */
#dmapplication progress[value] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 20px;
    background-color: #eee;
    color: #15528c;
	position: absolute;
	left: 0;
}

#dmapplication progress::-webkit-progress-value { background-color: #15528c; }
#dmapplication progress::-webkit-progress-bar {background-color: #eee;}

#dmapplication .progresslabel {color: #15528c; font-style: italic;margin: 25px 0 12px 0;}

/* Regular Rules Now */
.file_input_holder {margin-top: 12px;font-style:italic;}
.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;
}

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

/* Small Screens */
@media only screen and (max-width: 800px) {
    .dmapplication_page {border: 3px solid #d9d9d9;border-radius: 15px;}
    #dmapplication fieldset {padding: 5px 10px 80px 10px;box-sizing: border-box;border-radius: 10px;width: 100%;}
    #dmapplication fieldset div.right.uploads {display:grid;grid-template-columns: 50% 50%;}

}