/** 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/black_linen_v2.jpg');
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. HIDE DEFAULT TITLE/DESCRIPTION
   ======================================================= */
#form_container h1,
#form_container .form_description {
    display: none !important;
}

/* =======================================================
   2. BOX MODEL SAFETY NET (scoped, not blanket)
   ======================================================= */
#form_container,
#form_container ul,
#form_container li,
#form_container input,
#form_container textarea {
    box-sizing: border-box !important;
}

html, body, #main_body, form {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* =======================================================
   3. FORM CARD — BACKGROUND, WIDTH & CENTERING
   ======================================================= */
#form_container {
    background: rgba(62, 72, 85, 0.85) !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 24px 30px !important;
    width: 80% !important;
    max-width: none !important;
    margin: 0 auto !important;
}

/* =======================================================
   4. SELF-WRAPPING NAME / EMAIL / PHONE ROW
   ======================================================= */
#form_container form > ul {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2% !important;
}

#li_6, #li_2, #li_8 {
    flex: 1 1 220px !important;
    min-width: 220px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 0 10px 0 !important;
    float: none !important;
    clear: none !important;
}

#li_7, #li_captcha {
    flex: 1 1 100% !important;
    width: 100% !important;
    margin: 0 !important;
    clear: both !important;
    padding-top: 15px !important;
}

/* =======================================================
   5. INPUTS
   ======================================================= */
#form_container input.text,
#form_container textarea.textarea {
    width: 100% !important;
    max-width: 100% !important;
    background-color: #ffffff !important;
    border: none !important;
    border-bottom: 3px solid #efe480 !important;
    border-radius: 2px !important;
    padding: 10px 12px !important;
    color: #333333 !important;
    font-size: 16px !important;
    box-shadow: none !important;
}

#form_container input.text:focus,
#form_container textarea.textarea:focus {
    border-bottom: 3px solid #f04147 !important;
    outline: none !important;
}

#form_container ::-webkit-input-placeholder { color: #999999 !important; }
#form_container ::-moz-placeholder { color: #999999 !important; }
#form_container :-ms-input-placeholder { color: #999999 !important; }

/* =======================================================
   6. ALTCHA WIDGET
   ======================================================= */
altcha-widget {
    --altcha-max-width: 100% !important;
    width: 100% !important;
    display: block !important;
}

/* =======================================================
   7. LABELS & REQUIRED INDICATOR — desktop
   ======================================================= */
#form_container label.description {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    color: #ffffff !important;
    font-weight: normal !important;
    font-size: 14px !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;
}

/* =======================================================
   8. SUBMIT BUTTON
   ======================================================= */
#form_container .buttons button {
    background-color: #f04147 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 10px 28px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    cursor: pointer !important;
}

/* =======================================================
   9. SMALL SCREENS
   ======================================================= */
@media only screen and (max-width: 600px) {
    #form_container {
        width: 88% !important;
        margin: 0 auto 0 1% !important;
        padding: 20px 16px !important;
    }
    #form_container form > ul {
        gap: 0 !important;
    }
    #form_container label.description {
        padding-right: 0 !important;
    }
    #form_container span.required {
        position: static !important;
        display: inline-block !important;
        margin-left: 8px !important;
        white-space: nowrap !important;
    }
}