/* form elements */

/*custom form and anchor buttons are styled in content.css*/

div.form-field {
    width: 95%;
    margin: 1em 0;
    border: none;
	float: left;
}

div.form-field .left, div.form-field .label {
    float: left;
    width: 34%;
}

div.form-field .right, div.form-field .input {
    float: left !important;
    width: 60%;
}

div.form-field div.submit {
    border-top: solid 1px #ddd;
    padding: 0.7em 0;
    margin: 1em 0 0 0;
    float: right;
   /* width: 60%; cuts off contact submit button at mobile size */
}

div.form-field .button.submit {width: auto; float:right;}

div.form-field.rule {/*login form div.form-field exception for horizontal line*/
    border-bottom: solid 1px #BAC7C6 !important;
    padding: 0;
    margin: 0 0 4px 0;
}

input[type=text], input[type=tel], input[type=password], input[type=email], textarea { width: 99%; }

	@media screen and (max-width:640px) {

	form { margin: auto; }

	div.form-field {
	    width: 96%;
	    margin: 1em 0;
	    border: none;
	}

	div.form-field .left, div.form-field .label, div.form-field .right, div.form-field .input {
	    float: none;
	    width: 100%;
	    clear: both;
	}
}

form {
    margin: 0;
    padding: 0;
}

label { display: block; }

/*labels within radio or checkbox groups*/
div.input ul li label {
    display: inline-block;
    margin: 0 10px;
}

input {
    font-weight: normal;
    padding: 3px;
    margin: 0;
}

textarea { height: 140px; }

input[type=text], input[type=tel], input[type=password], input[type=email], textarea, select {
    font-size: 0.9em;
    font-weight: normal;
    padding: 0.5em 3%;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border: solid 1px #ccc;
}

input[type=button] {
    float: right;
    margin: 10px;
}

input[type=text]:focus, input[type=tel]:focus, input[type=password]:focus, input[type=email]:focus, textarea:focus, select:focus {
    box-shadow: inset 1px 1px 5px #ccc;
    -moz-box-shadow: inset 1px 1px 5px #ccc;
    -webkit-box-shadow: inset 1px 1px 5px #ccc;
}

textarea { width: 99%; }

select { font-weight: normal; }

input.formkey { width: inherit; }

input.error, textarea.error, select.error, input.errormsg, textarea.errormsg, select.errormsg { border: solid 1px #d13836 !important; }

.errormsg {
    color: #d13836;
    padding: 1px 0 10px 0;
    font-size: 0.8em;
    text-align: left;
}

.form_label_req { color: #006990; letter-spacing:normal;}

input.field, textarea { font-size: 1em; }

input.upload {
    font-size: 11px; font-size: 0.6875rem;
    width: 99%;
}

input.short, textarea.short { width: 33%; }

input.wide, textarea.wide { width: 90%; }

input.small, textarea.small { font-size: .9em; }

input.large, textarea.large { font-size: 1em; }

input.tiny {
    height: 12px;
    font-size: .8em;
    font-weight: bold;
}

select.select { }

select.wide { width: 99%; }

select.short { width: 33%; }

select.small { font-size: .9em; }

select.large { font-size: 1.3em; }

select.multiple {
    width: 50%;
    height: 100px;
    overflow: auto;
}

select.multiple_wide {
    width: 99%;
    height: 100px;
    overflow: auto;
}

.aid {
    color: #999;
    font-size: 12px; font-size: 0.75rem;
    line-height: 14px;
}

.aid ul {
    margin: 0 0 0 20px;
    padding: 0px;
}

div.fields ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

div.fields ul li { height: 80px; }

div.form-field div.error_message, div.error {
    color: #c34d52 !important;
    font-size: .8em;
    margin: 0 0 3px 0;
    font-weight: normal !important;
}

.status label {
    font-weight: normal;
    text-transform: none;
    color: #3a3a3a;
    display: inline;
    font-size: 14px; font-size: 0.875rem;
}

/*use font awesome for check boxes and radio buttons*/
/*input[type="radio"],
input[type="checkbox"] {
  display:none;
}

input[type="radio"] + span:before,
input[type="checkbox"] + span:before {
  font-family: 'FontAwesome';
  font-size: 20px;
  width:27px;
  display:inline-block;
}

input[type="radio"] + span:before {
  content: "\f10c"; 
}

input[type="radio"]:checked + span:before {
  content: "\f111"; 
}

input[type="checkbox"] + span:before {
  content: "\f096"; 
}

input[type="checkbox"]:checked + span:before {
  content: "\f046"; 
}*/






/* ================= FORMS TOOL OUTPUT =================*/
.formerrors {
    color: #B22222;
    padding: 0px 0px 0px 10px;
    text-align: left;
}

.form_err_msg_area {
    color: #B22222;
    padding: 0.5em 0;
    font-size: 1em;
}

/* Generated Form styles */

ul#form_elements, ul#form_elements li {
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
}

div.section_title { font-size: 1.2em; }

input[type=radio], input[type=checkbox] {
    display: inline-block;
    vertical-align: middle;
}

select {
    min-width: 50%;
    max-width: 100%;
}

div.form-field.consent label {
    display: inline-block;
    font-size: 0.7em;
    line-height: normal;
}

div.form-field.consent input[type=checkbox] {
    display: inline-block;
    float: right;
    margin: 0 10px 0 0;
}

.ui-sortable-placeholder { display: none !important; }

div.form-field div.label label {
    word-wrap: break-word;
    width: auto;
}

#form_div { width: 100%; }

#form_div h2, wrapper-survey h2 { border-bottom: solid 1px #DDDFE0; }

ul.radio-list, ul.check-list {
    margin: 0;
    padding: 4px 0;
    list-style: none;
}

ul.radio-list li, ul.check-list li {
    display: block;
    float: left;
    padding: 2px 8px;
}

input.med { width: 60%; }

/*disabled poll button*/
input[disabled="disabled"] {
    background-color: #DDDFE0 !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}

input[disabled="disabled"]:hover {
  
    background-color: #DDDFE0 !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    cursor: default;
}

#form_elements_panel #form_elements, .form-panel div.form-field { }

#form_elements_panel ul#form_elements, #form_elements_panel ul#form_elements li {
    list-style: none;
    margin: 0;
    padding: 0;
}

#form_elements_panel ul#form_elements { }

.JQcaptcha {
    width: 30% !important;
    margin: 0 1em 0 0;
    float: left;
}

	@media screen and (max-width:768px) {
	.JQcaptcha {width: auto !important; min-width: 50%;}
	}


.contact_form_area {
    width: auto;
    /* padding: 1% 2% 4% 2%; */
    padding: 0;
    margin: 0 0 40px 0;
}