/* =============================================================================
   Discount Embroidery — Machform Loud Craft theme (v2, AGGRESSIVE)
   Paste this into Machform's custom CSS for form 10689 (quote) and 11178 (payment).

   NOTE ON SPECIFICITY:
   Machform ships its own default theme CSS that loads AFTER custom CSS in some
   configurations. To defeat it reliably, every critical layout declaration here
   uses either:
     (a) !important, or
     (b) a higher-specificity selector prefix like `body #form_container ...`
   You will see a lot of !important — that's intentional. It's a theme override,
   not base application CSS.
   ============================================================================= */

/* ---- Fonts ----------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@400;500;600;700&family=Bungee&family=Space+Mono:wght@400;700&display=swap');

/* ---- Design tokens --------------------------------------------------------- */
:root {
  --ink: #0D0D0D;
  --ink-soft: #1A1A1A;
  --paper: #F4EFE5;
  --paper-2: #ECE6D9;
  --white: #FFFFFF;
  --pink: #FF2D87;
  --acid: #D4FF3D;
  --blue: #1E4FFF;
  --orange: #FF5B1F;
  --muted: #6B6257;
  --danger: #D4344D;

  --f-display: 'Anton', Impact, sans-serif;
  --f-accent:  'Bungee', system-ui, sans-serif;
  --f-body:    'Archivo', system-ui, sans-serif;
  --f-mono:    'Space Mono', ui-monospace, monospace;

  --s-hard:    6px 6px 0 var(--ink);
  --s-hard-sm: 4px 4px 0 var(--ink);
  --s-pink:    4px 4px 0 var(--pink);
  --s-acid:    4px 4px 0 var(--acid);
}

/* ---- Base / reset inside the form ------------------------------------------ */
html, body {
  background: transparent !important;
  color: var(--ink) !important;
  font-family: var(--f-body) !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  padding: 0 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  padding: 24px 20px !important;
}

*, *::before, *::after { box-sizing: border-box !important; }

/* Kill Machform default wrapper styles that add unwanted chrome */
body #main_body,
body #wrapper,
body.mf_main #form_container_wrapper {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ---- Form container -------------------------------------------------------- */
body #form_container {
  max-width: 760px !important;
  margin: 0 auto !important;
  background: var(--paper) !important;
  border: 3px solid var(--ink) !important;
  /* box-shadow intentionally omitted — the host page's .form-wrap already
     provides the hard shadow. Adding one here creates a visible ink bar
     sandwiched between the inner paper card and the outer white card when
     the form is embedded via iframe. */
  padding: 40px 36px !important;
  border-radius: 0 !important;
  width: auto !important;
}

/* Hide the redundant "Free Quote" h1 and .form_description — the host page
   already provides the page title and intro. */
body #form_container > h1,
body #form_container .form_title,
body #form_container > h2,
body #form_container .form_description,
body #form_container .form_description h2,
body #form_container .form_description p {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* ---- List layout ----------------------------------------------------------- */
body form.appnitro {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

body form.appnitro ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px 20px !important;
  background: transparent !important;
}

body form.appnitro ul > li,
body form.appnitro ul > li.section_break,
body form.appnitro ul > li.notes,
body form.appnitro ul > li.buttons {
  grid-column: 1 / -1 !important;   /* default: full width */
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  list-style: none !important;
  clear: none !important;
  float: none !important;
  width: auto !important;
}

/* Two-column rows where Machform sets column_2 */
body form.appnitro ul > li.column_2 {
  grid-column: span 1 !important;
  float: none !important;
  width: auto !important;
}

/* Machform sometimes adds clear floats — kill them so grid can lay out cleanly */
body form.appnitro ul > li.clear,
body form.appnitro ul::after,
body form.appnitro ul::before {
  display: none !important;
  content: none !important;
}

@media (max-width: 640px) {
  body form.appnitro ul {
    grid-template-columns: 1fr !important;
  }
  body form.appnitro ul > li.column_2 { grid-column: 1 / -1 !important; }
}

/* ---- Labels ---------------------------------------------------------------- */
body form.appnitro label.description,
body form.appnitro li > .description,
body form.appnitro fieldset > .description {
  display: block !important;
  font-family: var(--f-mono) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--ink) !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  line-height: 1.2 !important;
  width: auto !important;
  float: none !important;
  text-align: left !important;
}

/* Red asterisk for required */
body form.appnitro span.required {
  color: var(--pink) !important;
  font-family: var(--f-mono) !important;
  font-weight: 700 !important;
  margin-left: 2px !important;
}

/* Field-level helper labels below the input (e.g. "###" under phone parts) */
body form.appnitro .phone_1 label,
body form.appnitro .phone_2 label,
body form.appnitro .phone_3 label,
body form.appnitro .date_mm label,
body form.appnitro .date_dd label,
body form.appnitro .date_yyyy label {
  display: block !important;
  font-family: var(--f-mono) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  color: var(--muted) !important;
  text-transform: none !important;
  letter-spacing: 0.06em !important;
  margin-top: 4px !important;
  text-align: center !important;
}

/* ---- Text inputs / textareas / selects ------------------------------------- */
body form.appnitro input.element.text,
body form.appnitro input[type="text"],
body form.appnitro input[type="email"],
body form.appnitro input[type="tel"],
body form.appnitro input[type="number"],
body form.appnitro input[type="url"],
body form.appnitro textarea.element,
body form.appnitro textarea,
body form.appnitro select.element,
body form.appnitro select {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  font-family: var(--f-body) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  background: var(--white) !important;
  border: 3px solid var(--ink) !important;
  border-radius: 0 !important;
  padding: 12px 14px !important;
  line-height: 1.3 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  outline: none !important;
  transition: box-shadow .12s ease, transform .12s ease, border-color .12s ease !important;
  box-shadow: none !important;
  display: block !important;
  float: none !important;
  height: auto !important;
  margin: 0 !important;
}

/* Override Machform size variants */
body form.appnitro input.element.text.small,
body form.appnitro input.element.text.medium,
body form.appnitro input.element.text.large,
body form.appnitro select.element.select.small,
body form.appnitro select.element.select.medium,
body form.appnitro select.element.select.large,
body form.appnitro textarea.element.textarea.small,
body form.appnitro textarea.element.textarea.medium,
body form.appnitro textarea.element.textarea.large {
  width: 100% !important;
  max-width: 100% !important;
}

body form.appnitro textarea.element,
body form.appnitro textarea {
  min-height: 140px !important;
  resize: vertical !important;
  line-height: 1.5 !important;
}

/* Focus: lift, acid highlight, hard shadow */
body form.appnitro input.element.text:focus,
body form.appnitro input[type="text"]:focus,
body form.appnitro input[type="email"]:focus,
body form.appnitro input[type="tel"]:focus,
body form.appnitro input[type="number"]:focus,
body form.appnitro textarea.element:focus,
body form.appnitro textarea:focus,
body form.appnitro select.element:focus,
body form.appnitro select:focus {
  border-color: var(--ink) !important;
  box-shadow: var(--s-acid) !important;
  transform: translate(-2px, -2px) !important;
  background: var(--white) !important;
}

/* Placeholder */
body form.appnitro ::placeholder {
  color: var(--muted) !important;
  opacity: 1 !important;
  font-family: var(--f-body) !important;
}

/* Select caret */
body form.appnitro select.element,
body form.appnitro select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%) !important;
  background-position:
    calc(100% - 18px) 52%,
    calc(100% - 12px) 52% !important;
  background-size: 6px 6px, 6px 6px !important;
  background-repeat: no-repeat !important;
  padding-right: 40px !important;
  cursor: pointer !important;
}

/* ---- Compound fields (phone, date) ----------------------------------------- */
/* These need special handling because Machform's HTML for phone/date fields
   varies by version — sometimes segments are wrapped in <span class="phone_1">,
   sometimes in bare <span>, sometimes in <div>. We defend against all of them
   plus Machform's mobile media query that stacks segments vertically when the
   container is narrow.                                                         */

body form.appnitro li.phone,
body form.appnitro li.date_field {
  /* Override any narrow-container rule Machform uses */
  min-width: 0 !important;
}

body form.appnitro li.phone fieldset,
body form.appnitro li.date_field fieldset {
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  width: 100% !important;
  white-space: nowrap !important;  /* prevent wrapping of inline segments */
}

/* Main description label above the segments */
body form.appnitro li.phone > label.description,
body form.appnitro li.date_field > label.description,
body form.appnitro li.phone fieldset > label.description,
body form.appnitro li.date_field fieldset > label.description,
body form.appnitro li.phone fieldset > legend,
body form.appnitro li.date_field fieldset > legend {
  display: block !important;
  width: 100% !important;
  margin-bottom: 8px !important;
  white-space: normal !important;
}

/* AGGRESSIVE: ALL direct children of the fieldset EXCEPT the top label are
   forced inline-block. Covers <span>, <div>, <span class="phone_1">, whatever. */
body form.appnitro li.phone fieldset > *,
body form.appnitro li.date_field fieldset > * {
  display: inline-block !important;
  vertical-align: top !important;
  float: none !important;
  clear: none !important;
  width: auto !important;
  margin-right: 4px !important;
  margin-bottom: 0 !important;
  text-align: center !important;
}

/* Re-promote the main label back to block (the * selector above hit it too) */
body form.appnitro li.phone fieldset > label.description,
body form.appnitro li.date_field fieldset > label.description {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  margin-right: 0 !important;
  margin-bottom: 8px !important;
}

/* Kill any <br> tags Machform may inject between segments */
body form.appnitro li.phone fieldset br,
body form.appnitro li.date_field fieldset br {
  display: none !important;
}

/* The inputs themselves */
body form.appnitro li.phone input.element.text,
body form.appnitro li.phone input[type="text"],
body form.appnitro li.date_field input.element.text,
body form.appnitro li.date_field input[type="text"] {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  text-align: center !important;
  padding: 12px 4px !important;
  font-family: var(--f-mono) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: 0.05em !important;
  display: inline-block !important;
  float: none !important;
}

/* Narrower segment widths so 3 phone parts fit inside a column_2 cell even
   at ~340px cell width */
body form.appnitro li.phone input[id$="_1"],
body form.appnitro li.phone .phone_1 input { width: 50px !important; }
body form.appnitro li.phone input[id$="_2"],
body form.appnitro li.phone .phone_2 input { width: 50px !important; }
body form.appnitro li.phone input[id$="_3"],
body form.appnitro li.phone .phone_3 input { width: 66px !important; }

body form.appnitro li.date_field input[id$="_1"],
body form.appnitro li.date_field .date_mm input { width: 44px !important; }
body form.appnitro li.date_field input[id$="_2"],
body form.appnitro li.date_field .date_dd input { width: 44px !important; }
body form.appnitro li.date_field input[id$="_3"],
body form.appnitro li.date_field .date_yyyy input { width: 66px !important; }

/* Helper labels under segments stay narrow + centered */
body form.appnitro li.phone fieldset > * label,
body form.appnitro li.date_field fieldset > * label {
  display: block !important;
  text-align: center !important;
  font-size: 10px !important;
  font-family: var(--f-mono) !important;
  color: var(--muted) !important;
  margin-top: 4px !important;
  text-transform: none !important;
  letter-spacing: 0.06em !important;
  white-space: nowrap !important;
}

/* Defeat Machform's default mobile media query that stacks phone/date
   segments. Machform ships rules like:
     @media (max-width: 640px) { .phone span { display: block } }
   We reinforce inline-block at ALL widths until OUR 540px breakpoint. */
@media (max-width: 768px) {
  body form.appnitro li.phone fieldset > *:not(.description):not(legend),
  body form.appnitro li.date_field fieldset > *:not(.description):not(legend) {
    display: inline-block !important;
    width: auto !important;
    float: none !important;
  }
}

/* Datepicker trigger */
body form.appnitro #calendar_5,
body form.appnitro span.calendar,
body form.appnitro img.datepicker {
  display: inline-block !important;
  vertical-align: top !important;
  margin-left: 6px !important;
  padding-top: 6px !important;
}
body form.appnitro .datepicker.datepick-trigger,
body form.appnitro img.datepick-trigger {
  cursor: pointer !important;
  border: 3px solid var(--ink) !important;
  padding: 4px !important;
  background: var(--acid) !important;
  box-shadow: var(--s-hard-sm) !important;
  transition: transform .12s ease !important;
}
body form.appnitro .datepicker.datepick-trigger:hover,
body form.appnitro img.datepick-trigger:hover {
  transform: translate(-2px, -2px) !important;
}

/* ---- Radio & checkbox ------------------------------------------------------ */
body form.appnitro li.multiple_choice fieldset,
body form.appnitro li.checkbox fieldset {
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

body form.appnitro li.multiple_choice fieldset > span,
body form.appnitro li.checkbox fieldset > span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-right: 20px !important;
  margin-bottom: 6px !important;
}

body form.appnitro input.element.radio,
body form.appnitro input.element.checkbox,
body form.appnitro input[type="radio"],
body form.appnitro input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  border: 3px solid var(--ink) !important;
  background: var(--white) !important;
  cursor: pointer !important;
  display: inline-block !important;
  position: relative !important;
  flex-shrink: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
body form.appnitro input[type="radio"] { border-radius: 50% !important; }

body form.appnitro input[type="radio"]:checked::after {
  content: "" !important;
  position: absolute !important;
  top: 3px !important; left: 3px !important;
  width: 10px !important; height: 10px !important;
  background: var(--pink) !important;
  border-radius: 50% !important;
}
body form.appnitro input[type="checkbox"]:checked::after {
  content: "" !important;
  position: absolute !important;
  top: 1px !important; left: 5px !important;
  width: 6px !important; height: 12px !important;
  border: solid var(--ink) !important;
  border-width: 0 3px 3px 0 !important;
  transform: rotate(45deg) !important;
  background: transparent !important;
}
body form.appnitro input[type="checkbox"]:checked {
  background: var(--acid) !important;
}

body form.appnitro input[type="radio"]:focus-visible,
body form.appnitro input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--acid) !important;
  outline-offset: 3px !important;
}

body form.appnitro label.choice {
  font-family: var(--f-body) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  cursor: pointer !important;
  line-height: 1.2 !important;
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ---- File upload (Uploadifive) --------------------------------------------- */
body form.appnitro .uploadifive-button,
body form.appnitro #uploadifive-element_14 {
  height: auto !important;
  line-height: 1 !important;
  width: auto !important;
  display: inline-block !important;
  background: var(--ink) !important;
  color: var(--acid) !important;
  border: 3px solid var(--ink) !important;
  box-shadow: var(--s-pink) !important;
  padding: 12px 22px !important;
  font-family: var(--f-body) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  cursor: pointer !important;
  transition: transform .12s ease, box-shadow .12s ease !important;
  border-radius: 0 !important;
}
body form.appnitro .uploadifive-button:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 6px 6px 0 var(--pink) !important;
}

body form.appnitro .file_queue {
  margin-top: 12px !important;
  font-family: var(--f-mono) !important;
  font-size: 13px !important;
}
body form.appnitro .file_queue > div,
body form.appnitro .uploadifive-queue-item {
  background: var(--paper-2) !important;
  border: 2px solid var(--ink) !important;
  padding: 8px 12px !important;
  margin-bottom: 6px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
body form.appnitro .file_queue .filename,
body form.appnitro .uploadifive-queue-item .filename {
  font-weight: 700 !important;
  color: var(--ink) !important;
}
body form.appnitro .file_queue .fileinfo,
body form.appnitro .uploadifive-queue-item .fileinfo {
  color: var(--muted) !important;
  font-size: 12px !important;
}
body form.appnitro .uploadifive-queue-item.error {
  background: #FFF1F2 !important;
  border-color: var(--danger) !important;
  color: var(--danger) !important;
}
body form.appnitro .uploadifive-queue-item .progress {
  flex: 1 !important;
  height: 6px !important;
  background: var(--white) !important;
  border: 2px solid var(--ink) !important;
  overflow: hidden !important;
}
body form.appnitro .uploadifive-queue-item .progress-bar {
  background: var(--acid) !important;
  height: 100% !important;
}

/* ---- reCAPTCHA ------------------------------------------------------------- */
body form.appnitro #li_captcha { margin-top: 8px !important; }
body form.appnitro #li_captcha label.description { display: none !important; }
body form.appnitro #li_captcha .g-recaptcha {
  border: 3px solid var(--ink) !important;
  box-shadow: var(--s-hard-sm) !important;
  display: inline-block !important;
  padding: 4px !important;
  background: var(--white) !important;
}

/* Hide the hidden response-token textarea that reCAPTCHA injects. Our generic
   `textarea { display: block !important }` rule above was overriding the
   inline `display:none` that Google ships, making the token string visible. */
body form.appnitro textarea[name="g-recaptcha-response"],
body form.appnitro textarea#g-recaptcha-response,
body form.appnitro .g-recaptcha textarea,
body form.appnitro textarea[name^="g-recaptcha-response"],
body textarea[name="g-recaptcha-response"],
body textarea[name^="g-recaptcha-response"] {
  display: none !important;
  visibility: hidden !important;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip: rect(0 0 0 0) !important;
  overflow: hidden !important;
}

/* ---- Submit button --------------------------------------------------------- */
body form.appnitro li.buttons,
body form.appnitro #li_buttons {
  margin-top: 16px !important;
  text-align: left !important;
  padding-top: 24px !important;
  border-top: 3px solid var(--ink) !important;
  grid-column: 1 / -1 !important;
}

body form.appnitro #submit_form,
body form.appnitro input.button_text,
body form.appnitro input[type="submit"],
body form.appnitro button[type="submit"] {
  font-family: var(--f-body) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--ink) !important;
  background: var(--acid) !important;
  border: 3px solid var(--ink) !important;
  box-shadow: var(--s-hard) !important;
  padding: 18px 36px !important;
  cursor: pointer !important;
  transition: transform .12s ease, box-shadow .12s ease !important;
  border-radius: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  min-width: 240px !important;
  width: auto !important;
  height: auto !important;
  line-height: 1 !important;
  display: inline-block !important;
}
body form.appnitro #submit_form:hover,
body form.appnitro input.button_text:hover,
body form.appnitro input[type="submit"]:hover {
  transform: translate(-3px, -3px) !important;
  box-shadow: 9px 9px 0 var(--ink) !important;
}
body form.appnitro #submit_form:active,
body form.appnitro input.button_text:active {
  transform: translate(0, 0) !important;
  box-shadow: 2px 2px 0 var(--ink) !important;
}
body form.appnitro #submit_form:focus-visible {
  outline: 3px solid var(--pink) !important;
  outline-offset: 4px !important;
}

/* ---- Error states ---------------------------------------------------------- */
body form.appnitro li.error label.description,
body form.appnitro li.error > label,
body form.appnitro li.error .description {
  color: var(--danger) !important;
}

body form.appnitro li.error input.element.text,
body form.appnitro li.error select.element,
body form.appnitro li.error textarea.element,
body form.appnitro li.error input,
body form.appnitro li.error select,
body form.appnitro li.error textarea {
  border-color: var(--danger) !important;
  background: #FFF1F2 !important;
}

body form.appnitro p.error,
body form.appnitro .error_message,
body form.appnitro li .error {
  background: var(--danger) !important;
  color: var(--white) !important;
  font-family: var(--f-mono) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 6px 10px !important;
  margin-top: 6px !important;
  border: 2px solid var(--ink) !important;
  display: inline-block !important;
}

/* Kill Machform's yellow data-highlightcolor inline background */
body form.appnitro input.element.text[style*="FFF7C0"],
body form.appnitro select.element[style*="FFF7C0"],
body form.appnitro textarea.element[style*="FFF7C0"] {
  background: #FFFBE0 !important;
}

/* ---- Footer ---------------------------------------------------------------- */
body #footer {
  margin-top: 24px !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--paper-2) !important;
  font-family: var(--f-mono) !important;
  font-size: 11px !important;
  color: var(--muted) !important;
  text-align: center !important;
  letter-spacing: 0.05em !important;
  background: transparent !important;
}

/* ---- Confirmation page (after submit) -------------------------------------- */
body .mf-confirmation,
body #form_container.form-success {
  text-align: center !important;
}
body .mf-confirmation h1,
body .mf-confirmation h2 {
  font-family: var(--f-display) !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
  display: block !important;
  visibility: visible !important;
  height: auto !important;
}

/* ---- Tighten spacing on mobile --------------------------------------------- */
@media (max-width: 540px) {
  body #form_container { padding: 28px 20px !important; }
  body { padding: 12px 8px !important; }
  body form.appnitro #submit_form { width: 100% !important; min-width: 0 !important; }
  body form.appnitro li.phone input.element.text,
  body form.appnitro li.date_field input.element.text { padding: 10px 6px !important; }
}

/* ---- Print ----------------------------------------------------------------- */
@media print {
  body #form_container { border: 2px solid var(--ink) !important; box-shadow: none !important; }
  body form.appnitro #submit_form,
  body form.appnitro #li_captcha { display: none !important; }
}

/** DO NOT MODIFY THIS FILE. All code here are generated by MachForm Theme Editor **/

#main_body h1 a
{
background-image: url('https://forms.discount-embroidery.com/images/form_resources/machform.png');
background-repeat: no-repeat;
height: 40px;
}

html
{
background-image: url('https://forms.discount-embroidery.com/images/form_resources/grey-mild.png');
background-repeat: repeat;
}

#main_body h1
{
background-color: #525252;
background-image: none;
}

#form_container
{
background-color: #ffffff;
border-width: 0px;
border-style: solid;
border-color: #CCCCCC;
}

#main_body form li.highlighted,#main_body .matrix tbody tr:hover td,#machform_review_table tr.alt
{
background-color: #FFF7C0;
}

#main_body form .guidelines
{
background-color: #F5F5F5;
border-width: 1px;
border-style: solid;
border-color: #CCCCCC;
}

#main_body form .guidelines small
{
font-family: 'Lucida Grande','Lucida Grande',Tahoma,Arial,sans-serif;
font-weight: 400;
font-style: normal;
font-size: 80%;
color: #444444;
}

#main_body input.text,#main_body input.file,#main_body textarea.textarea,#main_body select.select,#main_body input.checkbox,#main_body input.radio
{
background-color: #FBFBFB;
font-family: 'Lucida Grande','Lucida Grande',Tahoma,Arial,sans-serif;
font-weight: 400;
font-style: normal;
font-size: 100%;
color: #666666;
}

#machform_review_table td.mf_review_value
{
font-family: 'Lucida Grande','Lucida Grande',Tahoma,Arial,sans-serif;
font-weight: 400;
font-style: normal;
font-size: 100%;
color: #444444;
}

#main_body .form_description h2,#main_body .form_success h2
{
font-family: 'Lucida Grande','Lucida Grande',Tahoma,Arial,sans-serif;
font-weight: 400;
font-style: normal;
font-size: 160%;
color: #444444;
}

#main_body .form_description p,#main_body form ul.payment_list_items li
{
font-family: 'Lucida Grande','Lucida Grande',Tahoma,Arial,sans-serif;
font-weight: 400;
font-style: normal;
font-size: 95%;
color: #444444;
}

#main_body form li span.ap_tp_text
{
color: #444444;
}

#main_body form li label.description,#main_body form li span.description,#main_body .matrix caption,#main_body .matrix td.first_col,#main_body form li.total_payment span,#machform_review_table td.mf_review_label
{
font-family: 'Lucida Grande','Lucida Grande',Tahoma,Arial,sans-serif;
font-weight: 700;
font-style: normal;
font-size: 95%;
color: #444444;
}

#main_body form li span label,#main_body label.choice,#main_body .matrix th,#main_body form li span.symbol,.mf_sigpad_clear,#main_body form li div label,#main_body form li div span.label
{
font-family: 'Lucida Grande','Lucida Grande',Tahoma,Arial,sans-serif;
color: #444444;
}

#main_body form .section_break h3,#main_body form .media h3,#machform_review_table td .mf_section_title
{
font-family: 'Lucida Grande','Lucida Grande',Tahoma,Arial,sans-serif;
font-weight: 400;
font-style: normal;
font-size: 110%;
color: #444444;
}

#main_body form .section_break p,#main_body form .media p,#machform_review_table td .mf_section_content
{
font-family: 'Lucida Grande','Lucida Grande',Tahoma,Arial,sans-serif;
font-weight: 400;
font-style: normal;
font-size: 85%;
color: #444444;
}

#main_body form li.section_break
{
border-top-width: 1px;
border-top-style: dotted;
border-top-color: #CCCCCC;
}