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

#main_body h1 a
{
background-image: url('https://forms.tactwire.com/form/data/themes/images/img_8bea9406d1f7b87e2172f55e6bb174f6-lets-get-started.png');
height: 45px;
}

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

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

#form_container
{
background-color: #3e4855;
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: #a3a3a3;
}

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

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

#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: 'InterVariable','InterVariable',Tahoma,Arial,sans-serif;
font-weight: 400;
font-style: normal;
font-size: 100%;
color: #666666;
}

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

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

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

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

#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: 'InterVariable','InterVariable',Tahoma,Arial,sans-serif;
font-weight: 700;
font-style: normal;
font-size: 95%;
color: #ffffff;
}

#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: 'InterVariable','InterVariable',Tahoma,Arial,sans-serif;
color: #ffffff;
}

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

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

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



/** Advanced CSS **/

/* =======================================================
   1. OVERRIDE MACHFORM DEFAULT FIELD SIZES
   ======================================================= */
#form_container input.text,
#form_container textarea.textarea,
#form_container .g-recaptcha {
    width: 100% !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
}

/* =======================================================
   2. SELF-WRAPPING NAME / EMAIL / PHONE ROW
   Sits on one line whenever there's room for all three at
   their minimum width; wraps automatically when there isn't.
   No fixed breakpoint needed — this adapts to any container width.
   ======================================================= */
#form_container form > ul {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1.25% !important;
}

#form_container form > ul > li:nth-child(1),
#form_container form > ul > li:nth-child(2),
#form_container form > ul > li:nth-child(3) {
    flex: 1 1 150px !important;   /* grow to fill, never shrink below 190px */
    min-width: 150px !important;
    width: auto !important;
    float: none !important;
    margin-right: 0 !important;   /* gap handles spacing now */
    padding-bottom: 15px !important;
    box-sizing: border-box !important;
}

/* Textarea and reCAPTCHA always take the full row */
#form_container form > ul > li:nth-child(4),
#form_container form > ul > li:nth-child(5) {
    flex: 1 1 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* =======================================================
   3. CUSTOM "● required" INDICATOR
   ======================================================= */
#form_container label.description {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    padding-right: 70px !important;
    box-sizing: border-box !important;
}

#form_container span.required {
    color: transparent !important;
    font-size: 0 !important;
    position: absolute !important;
    right: 0 !important;
    bottom: -6px !important;
}

#form_container span.required::after {
    content: '\25CF  required' !important;
    color: #efe480 !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: normal !important;
    letter-spacing: normal !important;
}



/* =======================================================
   5. FORCE BACKGROUND IN EMBEDDED CONTEXT
   MachForm discards the theme background when loaded via
   embed.php (by design) — this restores it explicitly.
   ======================================================= */
#form_container,
#main_body {
    background-color: #3e4855 !important;
}

/* =======================================================
   6. MOBILE — un-hide MachForm's default-hidden banner
   Unrelated to the field layout above; this is its own quirk.
   ======================================================= */
@media only screen and (max-width: 650px) {
    .embed #top, .embed #bottom, .embed h1,
    #top, #bottom, h1 {
        display: block !important;
    }
}