/* Custom Styles */

.wrapper { overflow:visible; }/* overriding screen-contentColumns.css */
section .row { display:flex; }

/* Form */
#appointment { margin:30px 0; }
span.smallText { display:block; font-size:1rem; margin-bottom:10px; }

.alert { position: relative; padding: .75rem 1.25rem; margin-bottom: 1rem; border-radius: .25rem; }
.alert-danger { color: #721c24; background-color: #f8d7da; border-color: #f5c6cb;}

/* Fieldsets separating each group */
fieldset { border:0; padding:0; margin-bottom:30px; }
	fieldset legend { margin:0; padding:0; font-size: 1.278em; border:none; color: #262f3e; font-family: "Roboto-Medium", sans-serif; }
	.notation { margin-bottom:50px; }
fieldset:first-child { margin-top:30px; }

/* Wrap each of the colums and fields */
.inputWrapper { display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:flex-start; align-content:flex-start; align-items:flex-start; margin-bottom:10px; }

/* colum 1: contains the label */
.col1 { flex:0 1 25%; align-self:auto; }

/* Column 2: One textimput or textarea. (radio buttons up to 2 are in col2 and col3) */
.col2 { flex:1 1 50%; align-self:auto; }
	.columnAuto .col2 { flex:0 1 auto; }
	.column30 .col2 { flex:0 1 30%; }
	.column15 .col2 { flex:0 1 15%; }
	.column5 .col2 { flex:0 1 42%; }

/* Column 3: second radio where applicable */
.col3 { flex:1 1 25%; align-self:auto; }
	.gender .col3, .vmessage .col3, .emessage .col3 { flex:0 1 60%; }
	.phone .col3 { flex:0 1 25%; }

.col4 { flex:1 1 10%; align-self:auto; }

/* All Columns: cancelling out margin/padding for paragraph tags */
.col1 p, .col2 p, .col3 p { margin:0; padding:0; }

/* general label styling used by field label and error label */
	.gender label, .preference label { padding-right:30px; }

/* Fields */
.wrapper input { display:block; width:auto; min-height:auto; }
/* .wrapper select { display:block; border:1px solid #E7E7E7; padding:7px; font-size:12px; } */
	.wrapper .label { font-weight:normal; }/*overriding findadoctor.css for selectric.js class dynamically added*/
.wrapper input[type=text],
.wrapper input[type=email],
.wrapper input[type=password],
.wrapper input[type=tel],
.wrapper input[type=date],
.wrapper textarea { display:block; width:33%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing:border-box; border:1px solid #9F9F9F; padding:8px; margin-bottom:8px; position:relative; }
.wrapper input[type=email] { width:50%; }
.wrapper input[type=tel] { width:50%; }

.wrapper input[type=text]:focus,
.wrapper input[type=email]:focus,
.wrapper input[type=password]:focus,
.wrapper input[type=tel]:focus,
.wrapper input[type=date]:focus,
.wrapper textarea:focus { outline:none; border:1px solid #22918b; }

.wrapper input[type=radio] { margin:6px; display:inline-block; background:none; }
.wrapper input[type=checkbox] { display:inline; background:none; }

.wrapper input#address1 { width:100%; }
.wrapper input#city { width:100%; }
.wrapper select#state { width:70px!important; padding: 0.3rem 0.6rem; }
/* .wrapper input#zip { width:100px; } */

#content textarea { width:50%; min-height:100px; }/*overriding screen.css*/

/* DENOTATION OF REQUIRED FIELDS */
.requiredAsterick { display:none; }
.patientform .requiredAsterick { display:inline; color:#ee0000; font-weight:bold; font-size:0.9em; top:-0.2em}
label[for="preferredphysician"] .requiredAsterick,
label[for="primaryphone"] .requiredAsterick,
label[for="referringphysicianname"] .requiredAsterick,
label[for="referringphysicianaddress"] .requiredAsterick,
label[for="referringphysicianphone"] .requiredAsterick,
label[for="patientfirstname"] .requiredAsterick,
label[for="patientlastname"] .requiredAsterick,
label[for="patientdob"] .requiredAsterick,
label[for="apptReason"] .requiredAsterick,
label[for="address1"] .requiredAsterick,
label[for="city"] .requiredAsterick,
label[for="state"] .requiredAsterick,
label[for="zip"] .requiredAsterick,
label[for="primaryphone"] .requiredAsterick,
label[for="email"] .requiredAsterick,
label[for="emailconfirm"] .requiredAsterick,
label[for="diagnosiscomment"] .requiredAsterick,
label[for="referralpurpose"] .requiredAsterick,
p .requiredAsterick { display:inline; color:red; }

/* Validation Errors */
.wrapper .error {  color:#bf2424;  display:block; }
.wrapper input.error, textarea.error {  border-color:#bf2424; }
	.wrapper input.error { display:inline!important; }
.wrapper input.error:focus,.wrapper textarea.error:focus {  border-color:#bf2424; }

	.wrapper label.error { display:inline!important; margin-bottom:20px; padding-left:20px; }
		label#primary_phone-error { left:410px; margin-top:-35px; }
		label#apptReason-error { padding-left:0; }
	.wrapper label.error.group { /*margin-left:-8px;*/ margin-left:10px; padding-left:0; }

/* Valid Fields or Error to Valid Fields */
.wrapper input.valid {  color:green; }
.wrapper input + .valid, .wrapper textarea + .valid {  display:none; }
.valid + .valid {  display:inline;  position:absolute;  left:390px;  margin-top:-43px;  color:green; }
input[type=radio] + .valid {  left:400px; }
input[type=email] + .valid {  left:500px; }
input[type=checkbox] + .valid {  display:none!important; }

label.error.group.valid { margin-top:0; /*margin-left:-10px;*/ margin-left:10px; padding-left:0; color:green; }
label#apptReason-error.error.valid { display:none!important; }

/* Submit Button */
/* .wrapper input[type=submit] { border:none; padding:13px 20px; background-color:#266999; color:#FFFFFF; } */

.btn--primary:disabled { background-color:#e7e7e7;color:#CCC; }
.btn--primary:disabled:hover { background-color:#e7e7e7;color:#CCC; }

.btn-form-submit { margin: 30px 0; padding: 10px 20px; }

.bannerCTA { margin:2rem 0 2rem; padding:52px; overflow:hidden; border-radius:3px; border:1px solid #dbdfe6;  box-shadow:1px 1px 8px 0.3px rgba(0, 0, 0, 0.06); }
	.rowCTA { display:flex; align-items: stretch; justify-content: center;}
.card-title { margin:0; font-size:1.6666rem; color:#242D4B; font-weight:bold; }
.card-subtitle { margin:0; color:#012C57; font-weight:bold; text-align:right; font-size:1.55rem;}
.guidelist { margin-bottom: 40px; }
.guidelist li { margin-top:0; }
.indent { margin-left:75px; }

/* MOBILE VIEWS */
/* Landscape Tablets -----------
(e.g. Apple iPad 2-3rd, mini) Size: 1024x768, Ratio: 4:3 */
@media only screen
and (max-width:1024px) {

}

/* Portrait Tablets and Mini's ----------- */
@media only screen
and (max-width:800px) {
	section .row,
	.rowCTA { display:block; }
	.bannerCTA { padding:0 0 20px 0; }
	.bannerCTA .card-image { padding:0; }
	.card-subtitle { text-align:left; }
	.indent { margin-left:auto; }
}

/* Landscape Phones and Smaller ----------- */
@media only screen
and (max-width : 640px) {
	.wrapper label.error { display:block!important; margin-bottom:10px; padding-left:0; padding-top:0; }
	label#primary_phone-error { left:0px; margin-top:0px; }

	.wrapper input[type=text],
	.wrapper input[type=email],
	.wrapper input[type=password],
	.wrapper input[type=tel],
	.wrapper input[type=date],
	.wrapper select#state,
	.wrapper input#zip,
	#content textarea { width:100%; }


	.inputWrapper { flex-direction:column; width:100%; }
	.col1, .col { flex:0 0 auto; width:100%; }
	.col2 { flex:0 0 auto; width:100%; }
		.column5 .col2 { flex:0 0 auto; width:100%; }
	.col3 { flex:0 0 auto; width:100%; }
		.phone .col3, .gender .col3, .vmessage .col3, .emessage .col3 { flex:0 0 auto; }

	.aside-content { padding-right:0; }
}

/* Landscape Phones and Smaller ----------- */
@media only screen
and (max-width : 480px) {

}
