/**
 * Defines visual styles for form components
 * The settings here are primarily used by the Contact Us form
 * Also has form-specific formatting for the MailChimp mailing list sign up forms
 */

form .field-multiple-table {
  margin: 0;
}
form .field-multiple-table .field-multiple-drag {
  width: 30px;
  padding-right: 0; /* LTR */
}
label 
[dir="rtl"] form .field-multiple-table .field-multiple-drag {
  padding-left: 0;
}
form .field-multiple-table .field-multiple-drag .tabledrag-handle {
  padding-right: 0.5rem; /* LTR */
}
[dir="rtl"] form .field-multiple-table .field-multiple-drag .tabledrag-handle {
  padding-right: 0;
  padding-left: 0.5rem;
}
form .field-add-more-submit {
  margin: 0.5rem 0 0;
}

/**
 * Markup generated by Form API.
 * .form-item covers the form's input boxes, such as the "Subject" and "Message" on the Contact Us page 
 * .form-actions covers the action buttons, such as "Send Message" and "Preview" on the Contact Us page
 */
.form-item,
.form-actions {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
/* The Search Block form in the header needs to align with the main menu */
.search-block-form .form-item,
.search-block-form .form-actions {
  margin-top: 0;
}	

tr.odd .form-item,
tr.even .form-item {
  margin-top: 0;
  margin-bottom: 0;
}
.form-composite > .fieldset-wrapper > .description,
.form-item .description {
  font-size: 0.85rem;
}
/* Label is used to identify what input is expected in each of the form input boxes  */
label {
  display: block;
  font-weight: bold;
  margin-bottom: 0.5rem;
}
label.option {
  display: inline;
  font-weight: normal;
}
.form-composite > legend,
.label {
  display: inline;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: bold;
}
.form-checkboxes .form-item,
.form-radios .form-item {
  margin-top: 0.4em;
  margin-bottom: 0.4em;
}
.form-type-radio .description,
.form-type-checkbox .description {
  margin-left: 2.4em; /* LTR */
}
[dir="rtl"] .form-type-radio .description,
[dir="rtl"] .form-type-checkbox .description {
  margin-right: 2.4em;
  margin-left: 0;
}
.marker {
  color: #e00;
}
.form-required:after {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 0.3em;
  content: "";
  vertical-align: super;
  /* Use a background image to prevent screen readers from announcing the text. */
  background-image: url(../../images/icons/required.svg);
  background-repeat: no-repeat;
  background-size: 6px 6px;
}
abbr.tabledrag-changed,
abbr.ajax-changed {
  border-bottom: none;
}
.form-item input.error,
.form-item textarea.error,
.form-item select.error {
  border: 2px solid red;
}

/* Inline error messages. */
.form-item--error-message:before {
  display: inline-block;
  width: 14px;
  height: 14px;
  content: "";
  vertical-align: sub;
  background: url(../../images/icons/error.svg) no-repeat;
  background-size: contain;
}

.region-content form  {
	padding: 0 0.5rem;
}

.region-content .sermon-search form  {
	padding-top: 0;
}

.user-logged-in form.node-page-edit-form  {
	margin-top: 1.5rem;
}

.node-ccnm-sermon-form  {
	margin-bottom: 0.5rem;
}

#contact-message-contact-us-form input {
  max-width: 100%;
  box-sizing: border-box;
}

/* MailChimp Embedded Sign Up form */
.region-content #mc_embed_signup {
	background-color: #e0e0e0;
	margin-bottom: 0.75rem;
}

.region-content #mc_embed_signup,
.region-footer #mc_embed_signup {
	margin-left: auto;
	margin-right: auto;
}

.region-footer #mc_embed_signup form {
	margin: 1rem;
}

.region-content #mc_embed_signup form {
	margin: 0;
}

.region-footer #mc_embed_signup h2,
.region-content #mc_embed_signup h2 {
	margin: 1rem 0;
	padding-top: 1rem;
	font-size: 1.25rem;
}

.region-footer #mc_embed_signup .brandingLogo {
  justify-self: center;
}

.region-content #mc_embed_signup .button,
.region-footer #mc_embed_signup .button  {
	border-radius: 0;
	background-color: #606060;
	font-size: 1rem;
	vertical-align: middle;
	margin: 0 0 4px 0;
	padding: 0 1.25rem;
}

.region-content #mc_embed_signup .button:hover,
.region-footer #mc_embed_signup .button:hover  {
	background-color: #282828;
}

/**
 * Visual styles for a resizable textarea
 * - incorporated from textarea.css
 * From https://www.w3schools.com/tags/tag_textarea.asp :
 * - The <textarea> tag defines a multi-line text input control.
 * - The <textarea> element is often used in a form, to collect user inputs like comments or reviews.
 * Used in the Contact Us form, not sure if used anywhere else
 */

.form-textarea-wrapper textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
}

/* Mail sign-up form space is set at 640px which is the maximum normal screen width */
@media all and (min-width: 640px) { 

.region-content #mc_embed_signup  {
	width: 640px;
}

}

/* Mail sign-up form space should shrink to fit the page on smaller screens */
@media all and (max-width: 639px) { 

.region-content #mc_embed_signup  {
	width: 100%;
}

}