.contact-form { margin: 0 auto 20px;  }
.contact-form .default-intro-text, .content-feature-136 .content-feature p.default-intro-text { margin: 0 0 20px; }
.contact-form .contact-msg { display:none; }
.contact-form .flexbox.flex-justify { margin-webkit-justify-content: space-between !important; justify-content:space-between !important; } /** overrides mobile core.ss **/

.contact-form .content-title {
	display: -ms-flexbox; display: -webkit-flex; display: flex;
	-ms-flex-align: flex-end; -webkit-align-items: flex-end; -webkit-box-align: flex-end; align-items: flex-end;
	-webkit-flex-wrap: wrap; flex-wrap: wrap;
	column-gap: 20px; row-gap: 10px;
}
.contact-form .content-title span { font-size:.9em; color:#666; padding-bottom: 5px; }

.contact-form .order-completed { display:none; }
.contact-form.completed .order-completed, 
.content.content-feature-136.form-completed .order-completed,
.contact-form.complete-message.form-completed .order-completed
{ display:block; }
.contact-form.completed form, 
.content.content-feature-136.form-completed form,
.contact-form.complete-message.form-completed form
{ display:none; }
.contact-form.completed .review, 
.content.content-feature-136.form-completed .review
{ display:none; }
.content.content-feature-136.form-completed .content-title:not(.tab-title),
.content.content-feature-136.form-completed .content-gallery,
.content.content-feature-136.form-completed .content-image,
.content.content-feature-136.form-completed .content-text,
.content.content-feature-136.form-completed .content-embed-code,
.content.content-feature-136.form-completed .content-external
{ display:none; }

/** save and exit **/
.contact-form .form-saved { display:none; } 
.content.content-feature-136.form-saved .form-saved { display:block; }
.content.content-feature-136.form-saved form { display:none; }

.contact-form .row.section-payment, .contact-form .row.submit { /*border-top: 1px solid #ccc; padding: 25px 0 0;*/ }
.contact-form .row.submit .buttons { column-gap: 10px; row-gap: 10px; }
.contact-form .row > .inner {  }
.contact-form .column {}

.contact-form .column .content-title { margin: 25px 0 15px; }
.contact-form .column .content-title:first-child { margin-top:0px; }

.validation-message-container { position:relative; width:100%;  }
.contact-form .validation-message {
	opacity:0;
	z-index:0;
	background: rgb(67, 155, 115);
	border-radius: 3px;
    box-shadow: rgb(0 0 0 / 20%) 0px 1px 4px;
    color:#fff;
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    min-width: 310px;
	padding:12px;
	text-align:center;
	top: 0px;
    position: absolute;
    left: 0px;
}
.content.content-feature-136 .validation-message.error { 
	background:rgb(248, 100, 105);
	
}

/** form builder **/
.contact-form .formbuilder { margin: 0 0 20px; }
.contact-form .formbuilder .flexbox.horizontal { column-gap: 15px;  flex-direction: row; } /** for radio/checkboxes **/
.contact-form .formbuilder .flexbox.vertical { 
	row-gap: 10px;  flex-direction: column; 
	-ms-flex-align: flex-start; -webkit-align-items: flex-start; -webkit-box-align: flex-start; align-items: flex-start;
} /** for radio/checkboxes **/
.contact-form .formbuilder .label {
	position:relative;
    margin: 0 0 5px;
    font-size: 1.2em;
}

.contact-form .formbuilder.uploader .label { margin: 0 0 15px; }
.contact-form .formbuilder.uploader .params { margin: 0 0 15px; font-size:.9em; }
.contact-form .formbuilder.uploader .flexbox { column-gap: 70px; }
.contact-form .formbuilder.uploader .tools { width: 200px; text-align:center; }
.contact-form .formbuilder.uploader .tools .image-display { margin: 0 0 10px; border: 1px solid #dedede; }
.contact-form .formbuilder.uploader .tools img { max-width: 100%; max-height:100px; }
.contact-form .formbuilder.uploader .tools button { /*width: 100%;*/ }
.contact-form .formbuilder.uploader .error { color: red; font-weight:bold; margin: 10px 0; }

.contact-form .formbuilder .value-item { /*margin-bottom:5px;*/ } /** replaced with flexbox.vertical **/
.contact-form .formbuilder .value-item.flexbox { column-gap: 10px; }
.contact-form .formbuilder .value-label { /*margin-left:5px;*/ } /** replaced with flexbox **/
.contact-form .formbuilder .value-label.selected { color: red; }
.contact-form .formbuilder .value-extra { margin-top:10px;  } 
.contact-form .terms.flexbox { column-gap: 10px; }

/** phone number fields **/
.contact-form .fieldset.phone { width:500px; } /** set to same width as text fields **/
.contact-form .fieldset.phone > .flexbox { column-gap: 10px; }
.contact-form .fieldset.phone > .flexbox > select { flex: 0 0 140px; width: 140px;  }
.contact-form .fieldset.phone > .flexbox > div { flex: 1; }
.contact-form .fieldset.phone .field-text { width:350px !important; }

/** signaure fields **/
.contact-form .fieldset.signature div.label { margin: 0 0 8px; }
.contact-form .fieldset.signature .flexbox .name { /*flex: 1;*/ }
.contact-form .fieldset.signature .flexbox .date { /*flex: 0 0 150px;*/ width:250px; }
.contact-form .fieldset.signature input { max-width:100%; }

/** price fields **/
.contact-form .fieldset.price .curr { flex: 0 0 30px; width:30px; font-size: 1.2rem;  }
.contact-form .fieldset.price > .flexbox > div:not(.curr) { flex: 0 0 500px; width:500px; } /** this needs to be updated for non required styles **/
.contact-form .fieldset.price > .flexbox > div:not(.curr) input { max-width:100%; }

/** fields **/
.contact-form .fieldset .label { font-weight:bold; }
.contact-form .section-payment .fieldset .label { flex:0 0 250px; width:250px; }

.contact-form .fieldset.sub-options .option { margin: 0 0 5px; }
.contact-form .fieldset.sub-options .option div:first-child { margin-right: 5px; }

.contact-form .fieldset.coupon .field-text { width:200px; font-size: 14px; margin: 0 5px 0 0; padding:10px; }
.contact-form .fieldset.coupon .buttonize { width:100px; min-width:100px; margin: 0 0 0 5px; }
.contact-form .fieldset.coupon [name=coupon_remove] { display:none; }
.contact-form .fieldset.coupon .coupon-error { color: var(--red); margin: 5px 0 0 200px; }

.contact-form .amount, .contact-form .total, .contact-form .setup, .contact-form .coupon > .flexbox { column-gap: 20px; row-gap: 10px; }
#payment-total-amount-saved { font-weight:bold; color: var(--red); }
#payment-total-recur {  }

.contact-form .fieldset.stripe { margin-top: 40px; flex:0 0 650px; width:650px; }
.contact-form .fieldset.stripe-error { font-weight:bold; color: var(--red); font-size: 17px; }

.contact-form .payment-options {  }
.contact-form .payment-options .options { column-gap: 20px; row-gap: 20px; align-items: stretch !important; }
.contact-form .payment-options .option { 
	border: 1px solid #dedede; border-radius: 5px;padding: 20px; text-align:center;
	flex-direction: column; -webkit-justify-content: space-between; justify-content:space-between;
	max-width:360px;
}
.contact-form .payment-options .option .top p { margin: 0 0 15px; }
.contact-form .payment-options .option h3 { margin: 0 0 15px; }
.contact-form .payment-options .option p { /*margin: 0 0 20px;*/ }
.contact-form .payment-options .option .pricing { column-gap: 10px; }
.contact-form .payment-options .option .price-item .price { font-weight:bold; font-size: 16px; margin: 0 0 5px; }
.contact-form .payment-options .option .price-item .desc { height:30px; overflow:hidden; color: #666; font-size: 11px; font-family:verdana, arial, sans-serif; } /** to keep same height **/
.contact-form .payment-options .option .price-item .selector { margin: 10px 0 0 0; width:150px; text-align:center; }
.contact-form .payment-options .option .price-item svg { display:none; margin: 0 auto; width:39px; height:39px; }
.contact-form .payment-options .option.selected { border: 1px solid #be0e26; border-width: 2px; }
.contact-form .payment-options .option.selected .price-item.selected .site-button { display:none; background-color: #be0e26; border-color: #be0e26;  color: #fff; }
.contact-form .payment-options .option.selected .price-item.selected svg { display:block; fill:#be0e26  }

.contact-form .contact-error, .contact-form #payment-errors { color: var(--red); font-weight:bold; }
.contact-form #payment-errors { margin-top:10px; }

.contact-form .order-completed h1, .contact-form .form-saved h1 { font-size:27px; margin: 0 0 20px; color: var(--red); }
.contact-form .order-completed p, .contact-form .form-saved p { margin: 0 0 7px; }

.contact-form .row.section-payment .column { /*flex:0 0 650px; width:650px;*/ } /** to keep stripe fields from fluctuating when updating total **/

.contact-form .review { padding-bottom: 20px; }
.contact-form .review .row .inner { -webkit-justify-content: flex-start; justify-content:flex-start; }
.contact-form .review .column { flex:0 0 40%; width:40%; }

.contact-form input[name=contact_edit] { display:none; margin-left: 15px; }

.contact-form .sub-options { display:flex; }
.contact-form .coupon { display:block; }
.contact-form .continue { display:none; }
.contact-form .reviewable { display:block; }
.contact-form .review { display:none; }

.contact-form.pageable .group.page { display:none; }
.contact-form.pageable .group.page.current { display:block; }
.contact-form.pageable .continue { display:block; }
.contact-form.pageable .submit { /*display:none;*/ }

.contact-form.stripe .continue { display:block; }
.contact-form.stripe .submit { display:none; }
.contact-form.stripe.striping .continue { display:none; }
.contact-form.stripe.striping .submit { display:block; }
.contact-form.stripe.striping .reviewable { display:none; }
.contact-form.stripe.striping .review { display:block; }
.contact-form.stripe.striping input[name=contact_edit] { display:block;  }
.contact-form.stripe.striping .coupon { display:none; }
.contact-form.stripe.striping .sub-options { display:none; }
.contact-form.stripe.striping .payment-options { display:none; }
.contact-form.stripe.striping .setup { display:none; }

/** --------REQUIRED STYLES --------- **/
.contact-form.required-styles .fieldset { width:100%; }

/** so that when fields are 100% on mobile, there's still some room to the right for the astrisk **/
.contact-form.required-styles .fieldset.radio.required .label,
.contact-form.required-styles .fieldset.checkbox.required .label,
.contact-form.required-styles .fieldset .fl-wrap-input,
.contact-form.required-styles .fieldset .fl-wrap-textarea,
.contact-form.required-styles .fieldset .fl-wrap-select
{ padding-right:30px; }

/** 
radio/checkbox fields only, so the astrisk shows right after the text, since it may or not be full width
we can't apply this to text, select fields because they are 100% on mobile and it won't work
**/
.contact-form.required-styles .fieldset.radio.required .label,
.contact-form.required-styles .fieldset.checkbox.required .label
{ max-width: fit-content; }

.contact-form.required-styles .fieldset.required > div > .fl-wrap-input:before, /** specify direct descendants only so it doesn't apply to nested fieldsets (inputs in contact method field type) **/
.contact-form.required-styles .fieldset.phone.required .fl-wrap-input:before, /** exception for the above rule **/
.contact-form.required-styles .fieldset.price.required .fl-wrap-input:before, /** exception for the above rule **/
.contact-form.required-styles .fieldset.required .fl-wrap-textarea:before,
.contact-form.required-styles .fieldset.country.required:before,
.contact-form.required-styles .fieldset.state.required:before,
.contact-form.required-styles .fieldset.select.required .fl-wrap-select:before,
.contact-form.required-styles .fieldset.radio.required .label:before,
.contact-form.required-styles .fieldset.checkbox.required .label:before
{
    opacity: 1;
    content: "*";
    display: block;
    position: absolute;
    right: 10px;
	top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    line-height: 1.75;
    color: #d32f2f;
    padding: 6px 0 0;
    z-index: 1
}


/** ------- CERT FORM --------- **/
.form-type-4 .row > .inner { row-gap: 0; } /** this is set to 30px for normal paragraphs, and is creating extra spacing on the form **/
.form-type-4 .certs .column { flex: 0 0 100%; width:100%; }
.form-type-4 .fl-form textarea.fl-textarea { width:100%;  }
.form-type-4 .fl-form .group.certs textarea.fl-textarea { height:75px }
.form-type-4 .fl-form .fl-wrap-textarea.fl-is-active textarea.fl-textarea { padding-top:25px !important; } /** add a little extra padding to the label on text areas **/
.form-type-4 .fl-form .fl-wrap-textarea .fl-label { background: #fff; width:calc(100% - 42px); } /** so text doesn't scroll over label; 42px = padding right of parent div + padding right of textarea **/

/** first page, app fields **/
.form-type-4 .app-fields .buttonize { width: 180px; background-color: #7ebab5 !important; border:1px solid #7ebab5 !important; }

/** page nav **/
.form-type-4 .page-nav { font-size: .8rem; letter-spacing: -0.05rem; word-spacing: -0.05rem; }

/** cert fields only, add extra margin **/
.form-type-4 .group.certs .formbuilder { margin: 0 0 30px; }
.form-type-4 .group.certs .formbuilder:not(.primary) { margin-top: -15px; }
.form-type-4 .group.certs .formbuilder.primary { /*padding-top: 10px;*/ }

/** required fields **/
.form-type-4 .fieldset { width:100%; }

/** primary fields **/
.form-type-4 .fieldset.primary .label { /*font-size: 1.3em;*/ }
.form-type-4 .fieldset:not(.primary) .label { /*color: #333;*/ }


/** cert group title **/
.form-type-4 .group.certs .content-title { margin: 0 0 20px; }

/** cert title - not used **/
.form-type-4 .group.certs .feature-title { border-top: 1px solid #dedede; padding-top: 25px; margin-top:25px; margin-bottom:20px; }

/** submits **/
.form-type-4 .row.submit { margin-top: 30px; }

/** so that when fields are 100% on mobile, there's still some room to the right for the astrisk **/
.form-type-4 .fieldset.radio.required .label,
.form-type-4 .fieldset.checkbox.required .label,
.form-type-4 .fieldset .fl-wrap-input,
.form-type-4 .fieldset .fl-wrap-textarea,
.form-type-4 .fieldset .fl-wrap-select
{ /*max-width: fit-content;*/ padding-right:30px; }

/** 
radio/checkbox fields only, so the astrisk shows right after the text, since it may or not be full width
we can't apply this to text, select fields because they are 100% on mobile and it won't work
**/
.form-type-4 .fieldset.radio.required .label,
.form-type-4 .fieldset.checkbox.required .label
{ max-width: fit-content; }

.form-type-4 .fieldset.required > div > .fl-wrap-input:before, /** specify direct descendants only so it doesn't apply to nested fieldsets (inputs in contact method field type) **/
.form-type-4 .fieldset.phone.required .fl-wrap-input:before, /** exception for the above rule **/
.form-type-4 .fieldset.required .fl-wrap-textarea:before,
.form-type-4 .fieldset.country.required:before,
.form-type-4 .fieldset.state.required:before,
.form-type-4 .fieldset.radio.required .label:before,
.form-type-4 .fieldset.checkbox.required .label:before
{
    opacity: 1;
    content: "*";
    display: block;
    position: absolute;
    right: 10px;
	top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    line-height: 1.75;
    color: #d32f2f;
    padding: 6px 0 0;
    z-index: 1
}

/** contact method field type **/
.form-type-4 .fieldset[data-type=17] {}

/** about **/
/*
.form-type-4 .about { margin: 15px 0 0 0; }
.form-type-4 .about .column { flex: 0 0 530px; width: 530px; max-width:100%; }
*/
.form-type-4 .about textarea { height:280px; }


/** printable form **/
.contact-form.printable {}
.contact-form.printable .label { font-weight:bold; margin: 0 0 7px; font-size: 1.2em; }
.contact-form.printable .value { max-width: 500px; word-wrap: break-word; }


@media (max-width: 1250px) {

	/** cert title **/
	.form-type-4 .group.certs .feature-title { padding-left: 0; padding-right:0; }

}

@media (max-width: 900px) {

	.contact-form .row > .inner { display:block;  }	

	.contact-form .content-title { margin: 30px 0 15px !important; }
	.contact-form form { margin-top: -20px; } /** can't match just the first headline **/

	.contact-form .sub-options .label { display:none; }
	.contact-form .coupon .label { display:none; }
	.contact-form .total .label { flex:0 0 130px; width:130px; }

	.contact-form .review .column { flex:0 0 100%; width:100%; }	
	.contact-form .fieldset.stripe { flex:0 0 100%; width:100%; }

	/** phone number fields **/
	.contact-form .fieldset.phone { width:100%; } 
	.contact-form .fieldset.phone > .flexbox > select { flex: 0 0 110px; width: 110px;  }
	.contact-form .fieldset.phone .field-text { width:100% !important; }

	/** cert form, hide page nav **/
	.form-type-4 .page-nav { display:none !important; }




}

/** mobile portrait **/
@media (max-width: 480px) {

	.contact-form .payment-options .options { display:block; }
	.contact-form .payment-options .option { margin: 0 0 20px; max-width:100%; }

	.contact-form .fieldset.coupon .coupon-error { margin: 5px 0 0 0; }

	/** uploader fields **/
	.contact-form .formbuilder.uploader .flexbox { column-gap: 0; row-gap: 20px; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
	.contact-form .formbuilder.uploader .tools { flex: 0 0 100%; width:100%; text-align:center; }

	.content.content-feature-136 .validation-message {
		width:100%;
	}

	/** price fields **/
	.contact-form .fieldset.price .curr { flex: 0 0 20px; width:20px; font-size: 1.2rem;  }
	.contact-form .fieldset.price > .flexbox > div:not(.curr) { flex: 1; width:100%; } /** this needs to be updated for non required styles **/

	/** cert form, first page, app fields **/
	.form-type-4 .app-fields .inner > .flexbox > div { flex: 0 0 100%; width: 100%; padding-right:30px; /** padding to match fields so they are the same length **/ }
	.form-type-4 .app-fields .buttonize { width:100%; }
	.form-type-4 .app-fields img { display:none; } /* hide qr code - not needed on mobile **/



	

}