/*------------------------------------*\
    NEW USER INTERFACE
\*------------------------------------*/

/* DEFAULT STYLES */
* { font-family: 'Open Sans', sans-serif !important;}

body { background: #e0e0e0; color: #333333; line-height: 1em;  }

#page {
	border-radius: 16px !important;
	-webkit-border-radius: 16px !important;
	-moz-border-radius: 16px !important;
	box-shadow: none !important;
	border:none !important;

	position: relative;
	margin-top: 3vh !important;
    margin-bottom: 3vh !important;
	padding-bottom: 30px;
}

.app-logo { float: right; padding-top: 5px; padding-left: 15px; padding-right: 10px; } /* THE CLASS WILL NEED TO BE IMPLEMENTED ON views/layouts/main.php, agentdirectory, NewSellerListingCept.php.page.fail.html, AgentDirectoryCept.php.page.fail.html  */
.app-logo a { display: block; }

#content { float: left; width: 100%; margin: 0; padding: 0 20px; }
#footer { float: left; width: 100%; margin: 0; padding: 20px 20px; border: none; }
#footer::before { content:""; display: block; width: 100%; height: 1px; background:#ccc; margin-bottom: 10px; }

h1 { font-size: 3em; font-weight: 800; margin-bottom: 30px; }
/* h1::after { content: ""; display: block; width: 2em; height: 0.2em; background: #ff6600; margin-top: 0.35em; } */

h2 { font-size: 2.25em; font-weight: 700; margin-bottom:0.5em; }
h3 { font-size: 2em; font-weight: 600; margin-bottom:0.5em; }
h4 { font-size: 1.6em; font-weight: 600; margin-bottom:0.5em; }

.space-top { margin-top: 20px; }
.space-bottom { margin-bottom: 20px; }
.section-space { margin-bottom: 40px; }

div.form .row { margin: 5px 0; width: 100%; float:left; }

table {
	/* border: none !important;
	margin-bottom: 0px !important; */
}

td {
	/* font-weight: inherit !important; */
	/* border-right: none !important;
	border-bottom: none !important; */
	/* width: auto !important; */
}

/* FORM ELEMENT STYLES */
.form-intro-question { font-size: 2em; font-weight: 400; margin:1em 0 0.5em; }

label,
input,
select,
textarea,
div.form label,
.chosen-container { font-size: 1.2em; line-height: 1em; font-weight: 400; color: #333333; }

	.not-required-faded label,
	.not-required-faded input,
	.not-required-faded select,
	.not-required-faded textarea,
	div.form .not-required-faded label {
		color: #ccc;
	}


label,
div.form label { font-weight: 500; clear: both; padding-right: 6px; }

label i,
div.form label i { font-size: 0.7em; }

.hidden-form-section { display: none; }

.dropdown { padding: 5px 15px 5px 0; }

.chosen-container,
.select-style,
.textBoxes,
.dropdown,
div.form input,
div.form textarea,
div.form select { width: calc( 100% - 214px ) !important; /* +14px to make room for input indicators */ }

div.form input.submitBtn {
	width: auto !important;
	border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
 }

/* .chosen-container { width: calc( 100% - 154px ); } */

.row label { width: 200px; }
.label-above,
.row label.label-above { width: 100%; }


.long-labels label { width: 400px; }
.long-labels .chosen-container,
.long-labels .select-style,
.long-labels .textBoxes,
.long-labels .dropdown,
div.form .long-labels input,
div.form .long-labels textarea,
div.form .long-labels select { width: calc( 100% - 414px ) !important; /* +14px to make room for input indicators */ }

.textarea-full { width: 100%; }

.dropdown,
.textBoxes,
.chosen-container-single .chosen-single,
div.form input,
div.form textarea,
div.form select {
	border: none !important;
	border-bottom-style: solid !important;
	border-bottom-color: #e0e0e0 !important;
	border-bottom-width: 1px !important;
	padding-left: 0;
	border-radius: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
}

/* .select-style {
	margin-top: 10px !important;
	margin-bottom: 15px !important;
} */

.chosen-container {}
	.chosen-container-active .chosen-single { box-shadow: none; background: none; }
	.chosen-container-single .chosen-single { box-shadow: none; background: none;  border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; padding-left: 0; }

input[type="checkbox"],
div.form input[type="checkbox"],
input[type="radio"],
div.form input[type="radio"] {
	width: unset !important;
	padding: 0 !important; margin: 0 !important;
}

div.form fieldset {
    border: 1px solid #DDD;
    padding: 10px;
    margin: 0 0 10px 0;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.cta-button {
    border: 2px solid #ff6600;
    font-size: 1.2em;
    font-weight: 500;
    display: inline-block;
    padding: 6px 22px 6px 10px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
	position: relative;
	cursor: pointer;
	margin-right: 8px;
}

div > .cta-button:last-of-type { margin-right: 0px; }

	.cta-button::before,
	.cta-button::after {
		content:""; display: block; width: 8px; height: 2px; background:#333; position: absolute;
		top: 50%; right: 10px; transform: rotate(45deg); margin-top: -2px;
	}
	.cta-button::after { transform: rotate(-45deg); margin-top: 2px; }

span.inline-cta-button {
    text-decoration: underline;
	position: relative;
	padding-right: 11px;
	cursor: pointer;
}
	.inline-cta-button::before,
	.inline-cta-button::after {
		content:""; display: block; width: 8px; height: 1px; background:#333; position: absolute;
		top: 50%; right: 0px; transform: rotate(45deg); margin-top: -2px;
	}
	.inline-cta-button::after { transform: rotate(-45deg); margin-top: 3px; }

.button {
	border-radius: 0px !important;
}

.submitBtn {
	position: relative;
	border-style: none !important;
	border-radius: 4px;
	-webkit-border-radius: 4px;
    -moz-border-radius: 4px;
	padding: 10px !important;
	padding-right: 11px;

	background-color: none;
	background: #ff6600;
	color: white;
	/* box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%); */
	/* margin-top: 15px; */
	cursor: pointer;
}


/* MESSAGES AND ERRORS */

ui-dialog .ui-dialog-titlebar { background: #333; }
.ui-dialog .ui-dialog-buttonset .ui-button { background: #ff6600; color: #fff; }

.form-error-notice { display: none; }
div.flash-error { background: #e82d1a; border: none; border-radius: 4px; clear: both; }
div.flash-notice { background: #24ceea; border: none; border-radius: 4px; clear: both; }
div.flash-thankyou { background: #0dd149; border: none; border-radius: 4px; padding: 0.8em; clear: both; }

	div.flash-notice,
	div.flash-notice a,
	div.flash-notice h3,
	div.flash-error,
	div.flash-error a,
	div.flash-error h3,
	div.flash-thankyou,
	div.flash-thankyou a,
	div.flash-thankyou h3 { color: #fff; font-weight: 600; }

	div.flash-notice strong,
	div.flash-error strong,
	div.flash-thankyou strong { color: #fff; }

div.form div.error input,
div.form div.error textarea,
div.form div.error select,
div.form input.error,
div.form textarea.error,
div.form select.error {
	border-bottom-color:#e82d1a !important;
}
input[type="checkbox"] { border-color:#e82d1a !important; }

div.form label.error {
	position: relative;
	margin: 5px 18px 2px 0;
	display: block;
	float: right;
	width: auto;
	border-radius: 4px;
	box-shadow: none;
	border: 1px solid #ccc;
	padding: 4px;
	font-size: 0.75em;
	line-height: 1em;
	height: auto;
}
div.form label.error:before,
div.form label.error:after {
	display: none;
}

.links {
	float: right;
	text-decoration: none;
}

@media only screen and (max-width: 600px) {
	.textBoxes {
		/* border: none !important;
		border-bottom-style: solid !important;
		border-bottom-color: dimgray !important;
		border-bottom-width: thin !important;
		display: table !important;
		margin-bottom: 25px !important;
		width: 40% !important; */
	}

	.select-style {
		/* width: 40% !important;
		margin-top: 10px !important;
		margin-bottom: 15px !important; */
	}

	.fileUploadStyle {
		border: solid 0px #CCC;
		margin-bottom: 8px !important;
		width: 11%;
	}

	div.flash-notice {
		width: 100% !important;
		/* margin-top: 40px !important; */
	}
}

@media only screen and (max-width: 480px) {
	label,
	input,
	select,
	textarea,
	div.form label,
	.chosen-container { font-size: 1.2em; }

	.chosen-container,
	.select-style,
	.textBoxes,
	.dropdown,
	div.form input,
	div.form textarea,
	div.form select { width: 100% !important; /* +14px to make room for input indicators */ }

	.row label { width: 100%; }
	.form-intro-question { font-size: 1em; font-weight: 400; margin:1em 0 0.5em; }

}