﻿
.left2n { width:677px; float:left; }
.left2n h1 { font-size:26px; color:#1f1f1f; font-weight:bold; margin:10px 0 10px 0; }
.left2n p { font-size:13px; color:#1f1f1f; font-weight:normal; margin:5px 0 10px 0; font-family:Arial,Helvetica,sans-serif; }
.container-box-bg-2n { background-color:#f2faff; margin:0; border-right:solid #dedede 1px; border-left:solid #dedede 1px; float:left; width:627px; padding-bottom:20px; }
.container-box-bottom-2n { background-image:url(../images/courses-image-buttom2.jpg); background-repeat:no-repeat; margin:0; height:8px; width:629px; float:left; display:block; }
.container-box-top-2n { background-image:url(../images/courses-image-top.jpg); background-repeat:no-repeat; margin:0; height:8px; width:629px; float:left; display:block; }
.contact-body-2n { width:530px; margin:10px 0 0 85px; }

.enroll_input { border:1px solid #7f9db9; color:#000; font-size:14px; font-weight:normal; height:18px; line-height:18px; margin:0; padding:6px; width:243px; }
.enroll_input2 { border:1px solid #7f9db9; color:#000; font-size:14px; font-weight:normal; height:18px; line-height:18px; margin:0; padding:6px; width:120px; }
.enroll_input3 { border:1px solid #7f9db9; color:#000; font-size:14px; font-weight:normal; height:18px; line-height:18px; margin:0; padding:6px; width:53px; }
.enroll_input4 { border:1px solid #7f9db9; color:#000; font-size:14px; font-weight:normal; height:18px; line-height:18px; margin:0; padding:6px; width:79px; }
.select_input { border:1px solid #7f9db9; color:#000; font-size:14px; font-weight:normal; height:32px; line-height:32px; margin:0; padding:6px; width:173px; }
.label-text { font-family:Arial,Helvetica,sans-serif; font-size:16px; color:#000; font-weight:bold; margin:10px 0 0 0; padding-bottom:10px; }

/* Submit button — desktop */
.contact-submit-btn {
    background: #e85d00;
    color: #fff;
    border: none;
    padding: 10px 40px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 4px;
}
.contact-submit-btn:hover { background: #c94e00; }


/* =============================================
   Mobile fixes for contact page
   ============================================= */
@media (max-width: 768px) {

    /* ================================================================
       THE ROOT CAUSE: base CSS sets .box { width:650px } which makes
       the form 650px wide regardless of viewport. Override it here.
       Also zero the 40px padding wrappers in contactus.aspx.
       ================================================================ */
    .cain-bg .box {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        overflow: hidden !important;
    }
    .cain-bg .box > div[style*="padding-left"],
    .cain-bg .box > form > div[style*="padding-left"],
    .cain-bg .box > div {
        padding-left: 14px !important;
        padding-right: 14px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    .cain-bg .box form {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Remove extra line breaks */
    .cain-bg .box br { display: none !important; }

    /* ---- Form table layout ---- */
    .cain-bg table[role="presentation"] {
        display: block !important; width: 100% !important; box-sizing: border-box !important;
    }
    .cain-bg table[role="presentation"] tbody { display: block !important; width: 100% !important; }
    .cain-bg table[role="presentation"] tr { display: block !important; width: 100% !important; }

    /* Hide spacer rows */
    .cain-bg table[role="presentation"] tr:has(td[height]) {
        display: none !important; height: 0 !important; overflow: hidden !important;
    }

    /* All cells: full width — NO pseudo-elements */
    .cain-bg table[role="presentation"] td {
        display: block !important; width: 100% !important;
        box-sizing: border-box !important; padding: 0 !important; border: none !important;
    }

    /* Label cells */
    .cain-bg table[role="presentation"] td.label-text {
        font-size: 15px !important; font-weight: bold !important;
        padding: 12px 0 4px 0 !important; color: #1a1a1a !important;
    }
    .cain-bg table[role="presentation"] td.label-text:empty {
        display: none !important; padding: 0 !important;
    }

    /* Full-width inputs */
    .cain-bg .enroll_input,
    .cain-bg .enroll_input2 {
        width: 100% !important; box-sizing: border-box !important;
        font-size: 16px !important; height: auto !important; line-height: normal !important;
        padding: 11px 10px !important; border: 1px solid #7f9db9 !important;
        border-radius: 4px !important; margin: 0 !important; display: block !important;
    }

    /* Phone fields */
    .cain-bg .enroll_input3 {
        width: 28% !important; box-sizing: border-box !important; font-size: 16px !important;
        height: auto !important; padding: 11px 6px !important; border: 1px solid #7f9db9 !important;
        border-radius: 4px !important; display: inline-block !important; margin: 0 1% 0 0 !important;
    }
    .cain-bg .enroll_input4 {
        width: 35% !important; box-sizing: border-box !important; font-size: 16px !important;
        height: auto !important; padding: 11px 6px !important; border: 1px solid #7f9db9 !important;
        border-radius: 4px !important; display: inline-block !important; margin: 0 !important;
    }

    /* State dropdown */
    .cain-bg .select_input {
        width: 100% !important; box-sizing: border-box !important; font-size: 16px !important;
        height: 44px !important; padding: 8px 10px !important; border: 1px solid #7f9db9 !important;
        border-radius: 4px !important; display: block !important; margin: 0 !important;
    }

    /* Textarea */
    .cain-bg textarea:not(.g-recaptcha-response) {
        width: 100% !important; box-sizing: border-box !important; font-size: 16px !important;
        padding: 10px !important; border: 1px solid #7f9db9 !important; border-radius: 4px !important;
        min-height: 100px !important; display: block !important; margin: 0 !important;
    }

    /* ================================================================
       HIDE the reCAPTCHA hidden response textarea that renders as
       a white box on mobile (Google injects it with no styling)
       ================================================================ */
    .cain-bg textarea.g-recaptcha-response {
        display: none !important;
        position: absolute !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
    }

    /* reCAPTCHA widget — space above */
    .cain-bg .g-recaptcha {
        margin-top: 14px !important;
        transform: scale(0.88) !important;
        transform-origin: left top !important;
    }

    /* Submit button — full width orange */
    .contact-submit-btn {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        background: #e85d00 !important;
        background-image: none !important;
        color: #fff !important;
        font-size: 17px !important;
        font-weight: bold !important;
        text-align: center !important;
        padding: 15px !important;
        border: none !important;
        border-radius: 6px !important;
        cursor: pointer !important;
        margin: 14px 0 20px 0 !important;
        height: auto !important;
    }
}
