/*==MPS Shared Form Style==*/

/*remove Chrome border on user focus--apply to all mps-form-group inputs/textareas
awful for accessibility though - outline-style: none; box-shadow: none;*/
.mps-form-group.focus input, .mps-form-group.focus textarea, .mps-form-group.focus select {
outline-style: none;
box-shadow: none;	
}

/*MPS FORM GROUP & CHILD STYLES*/

/*focus class applied to mps-form-group for script.js - creates orange line*/
.mps-form-group.focus input, .mps-form-group.focus textarea {
border-top: none;
border-right: none;
border-bottom:2px solid var(--wp--preset--color--medium-orange);
border-left: none;
transition:all 0.3s ease-out;
}

.mps-form-group.check-group {
margin-top:1rem;
margin-bottom:1rem;    
}

.mps-form-group {
position:relative;
margin-top:.5rem;
margin-bottom:.5rem;
padding-left: .3em;
}

/*LABEL STYLES*/
.mps-form-group label {
font-size:16px;
font-weight:400;
text-transform:uppercase;
letter-spacing: .025rem;
line-height:10px;/*important for transition on input*/
transition: all 0.3s ease-out;
z-index: 1;
margin-bottom: .5em;	
}

.mps-form-group label.mps-inline-label {
margin-right: 1em;
}

/*span within label for validation messages*/
.mps-form-group span.error-text, .mps-form-group span.newsletter-error-text {
font-size:14px;
font-weight: 500;
color: var(--wp--preset--color--medium-orange) !important;
}

/***INPUT, TEXTAREA, SELECT STYLES
Note: mps-form-control on input, textarea, select is used in script.js not for style
***/
.mps-form-group input, .mps-form-group textarea, .mps-form-group select {
border-radius: 2px;
display: block;
width: 95%;
margin-top: .25rem;
padding: .3em .5em .3em .2em;
font-size: 1rem;/*16px - make 18px like short form??*/
line-height: 1.4em;
color: var(--wp--preset--color--dark-grey);
background-color: rgba(0, 0, 0, 0);
background-image: none;
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: none;
z-index: 2;
}

/*padding has to be slightly larger top & bottom*/
.mps-form-group select {
padding: .4em .5em .4em .2em;
width: 99%;
}

/*used only in check-group to introduce checkbox list*/
.checkbox-guide {
margin-top: .5em;
margin-bottom: .5em;
font-weight: 600;
font-size: var(--wp--preset--font-size--x-small); /*.9rem*/
}

.comments-guide {
margin-top: .5em;
margin-bottom: .5em;
padding-left: 1em;
font-weight: 400;
font-style: italic;
font-size: var(--wp--preset--font-size--x-small); /*.9rem*/
text-transform: none;
}

/*==Submit Fail Message for Ajax to Server==*/
#contact-submit-error {
display: none;
background: rgba(211, 109, 0, .125);/*medium-orange-alpha*/
margin-top: .5rem;
margin-bottom: .5rem;
padding: .75em;
font-weight: 400;
font-size: var(--wp--preset--font-size--medium); /*16px*/
color: var(--wp--preset--color--medium-orange);
}

#contact-submit-error a {
color: var(--wp--preset--color--medium-blue);
}

@media (min-width: 481px) and (max-width: 800px) {
	.mps-form-group input, .mps-form-group textarea, .mps-form-group select {
		max-width: 85vw !important;
	}
}