@import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&display=swap%27");

/* 1. Center & restyle the form header + subhead */

.wufoo .info {
    text-align: center;
    padding: 1rem 0;
    background: none; /* if there’s a bg set higher up */
}

.wufoo .info h2 {
    font-size: 2em;
    color: #00b5d8; /* turquoise */
    margin: 0 0 0.25em;
    font-family: "GT America", "Archivo", "sans-serif";
}

.wufoo .info div {
    font-size: 1rem;
    color: #666;
}

/* 2. Two‐column “Full Name” row */

.full-name {
    display: flex;
    /*gap: 1rem;*/
    gap: 0rem;
    justify-content: center;
}

.full-name span {
    width: 100%;
}

form li:after {
    content: none !important;
    display: none !important;
}

form li span {
    margin-right: 0;
}

/* This hides the original Wufoo labels, so your placeholders show in their place */

label.desc,
.wufoo legend.desc {
    display: none !important;
}

/* 3. Inputs: border radius, padding, placeholder */

.wufoo input.text,
.wufoo input[type="email"],
.wufoo select.select,
.wufoo textarea.textarea {
    border-radius: 3px;
    /*padding: 0.6rem 0.8rem;*/
    border: 1px solid #00afcf;
    background-color: #fff;
    box-shadow: none;
    max-width: 100%;
    color: #ababab !important;
    font-size: 14px;
    padding: 8px 10px;
}
/* Focus State */
.wufoo input.text:focus,
.wufoo input[type="email"]:focus,
.wufoo select.select:focus,
.wufoo textarea.textarea:focus {
    border-color: #007c94;
    outline: none;
    box-shadow: none;
}
/* Error State */
li.error input.text,
li.error input[type="email"],
li.error select.select,
li.error textarea.textarea {
    border-color: #FE6569;
    background: rgba(254, 101, 105, .05) !important;
    box-shadow: none;                 /* kill error shadow */
}

/* 4. Sign-Up button in turquoise */

#saveForm,
input.btTxt {
    background-color: #00b5d8 !important;
    border-color: #00b5d8 !important;
    color: #fff !important;
    padding: 0.75rem 2rem;
    font-size: 1rem;
    text-transform: uppercase;
    margin: 0 auto;
    display: block;
    border-radius: 3px;
}
#mi #saveForm,
#mi input.btTxt {
    /*background-color: #2c48dc !important;
    border-color: #2c48dc !important;*/
}

#cj #saveForm,
#cj input.btTxt {
    /*background-color: #00b5d8 !important;
    border-color: #00b5d8 !important;*/
}

.wufoo input.btTxt:hover {
    cursor: pointer;
}

/* 5) Make the email field span the full form width */

.wufoo input[type="email"] {
    max-width: none !important; /* let it grow to container’s width */
    margin-bottom: 10px;
}

/* 6) Remove that blue bar behind the name fields */

.full-name {
    background: none !important;
}

/* 7) match the exact built-in selector, loaded last to outrank it */

.redesigned-theme-2018 .wufoo .info h2 {
    color: #00b5d8 !important;
    font-weight: 700 !important;
}

/* 8) Center the button container */

.redesigned-theme-2018 .wufoo .buttons,
.redesigned-theme-2018 .wufoo .buttonrow {
    text-align: center !important;
    padding-block: 0 !important;
}

header#header {
    display: none;
}

h1#logo {
    display: none;
}

form.wufoo.topLabel {
    padding-bottom: 0;
}

.wufoo li.email {
    padding-bottom: 0 !important;
}

/* ------------------------------MODIFICATIONS-----------------------------------*/

/* 1) Wrap the whole form in a light gray panel */

.u_sticky-content .wufoo {
    max-width: 380px; /* same width as your example */
    margin: 2rem auto; /* center on the page */
    padding: 1.5rem; /* inner breathing room */
    background-color: #f5f7f9; /* very light gray */
    border: 1px solid #ddd; /* subtle border */
    border-radius: 6px; /* slightly rounded corners */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

/* 2) Headings: teal title + gray subhead */

.wufoo .info h2 {
    font-weight: 700 !important;
    color: #00b5d8 !important; /* your teal */
    margin-bottom: 0.25em !important;
}

.wufoo .info div {
    color: #666 !important; /* mid-gray */
}

/* 3) Two-column “First” / “Last” name row */

.full-name {
    display: flex;
    justify-content: space-between;
    background: none !important; /* remove any stray bg */
}

.full-name input.text {
    width: calc(100% - 1.6rem); /* each takes 50% of the flex parent */
}

/* hide those default “First”/“Last” labels under each field */

label[for^="Field1"],
label[for^="Field2"] {
    display: none !important;
}

/* 4) Email field full-width */

.wufoo input[type="email"] {
    width: calc(100% - 1.6rem);
    max-width: none !important;
}

/* 5) Center & restyle the button */

.wufoo .buttons,
.wufoo .buttonrow {
    text-align: center !important;
}

.wufoo #saveForm,
.wufoo input.btTxt {
    display: inline-block !important;
    float: none !important;
    margin: 0 !important; /* text-align on parent handles centering */
    padding: 0.5rem 1rem !important;
    border: transparent;
    color: #fff !important;
    text-transform: none !important; /* “Sign Up” instead of all-caps */
    font-size: 1rem !important;
    border-radius: 0 !important;
    font-weight: bold;
    font-family: "GT America", "Archivo", sans-serif;
    background-color: #00afcf !important;
}
#mi .wufoo #saveForm,
#mi .wufoo input.btTxt,
input#saveForm {
    /*background-color: #2c48dc !important;*/
}
#cj .wufoo #saveForm,
#cj .wufoo input.btTxt {
    /*background-color: #00afcf !important;*/
}

.recaptcha-text {
    /*padding-bottom: 16px !important;
    padding-top: 6px !important;*/
    padding: 10px 0 0 0 !important;
    font-size: 11px !important;
}

#errorLi {
    display: none;
}

form li.error.full-name {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
}

@media only screen and (max-width: 580px) {
    .redesigned-theme-2018 form.wufoo {
        padding-bottom: 0;
    }
}

@media only screen and (max-width: 580px) {
    .redesigned-theme-2018 .form.wufoo {
        padding-bottom: 0 !important;
    }
}

.full-name.error {
    display: grid !important;
    background: transparent !important;
    grid: auto-flow / 1fr 1fr;
}

.email.error {
    background: transparent !important;
}

li.error input.text {
    border-color: #FE6569;
    background: rgba(254, 101, 105, .05) !important;
}

#wufoo-q1l1r2140z9y7o5 {
    display: none;
}

.wufoo li.focused {
    background-color: transparent !important;
}

/* Keep file inputs aligned without fighting text inputs */
.wufoo input.file { border: 1px solid #00afcf; background:#fff; color:#000; box-shadow: none; }

/* ===== Error message layout ===== */
.wufoo li.error p.error {
    margin-top: 6px;      /* gap beneath field */
    padding-top: 0;
    line-height: 1.25;
}

form li.full-name.error > p.error {
    margin-top: 6px !important;  /* grouped name row */
    padding-top: 0 !important;
}

/* Email row: match same spacing as other errors */
.wufoo li.email.error p.error {
    margin-top: 6px !important;
    padding-top: 0 !important;
}

/* -------------------- SITE SPECIFIC STYLING ------------------------------*/
/* CJ site */
form.wufoo:has(input[name="Field116"][value*="CJ" i]) input.text,
form.wufoo:has(input[name="Field116"][value*="CJ" i]) input[type="email"],
form.wufoo:has(input[name="Field116"][value*="CJ" i]) select,
form.wufoo:has(input[name="Field116"][value*="CJ" i]) textarea {
    border-color: #00afcf !important;
}
form.wufoo:has(input[name="Field116"][value*="CJ" i]) input#saveForm.btTxt.submit {
    background-color: #00afcf !important;
    border-color: #00afcf !important;
    color: #fff !important; /* keep text white */
}

/* MI site */
form.wufoo:has(input[name="Field116"][value*="MI" i]) input.text,
form.wufoo:has(input[name="Field116"][value*="MI" i]) input[type="email"],
form.wufoo:has(input[name="Field116"][value*="MI" i]) select,
form.wufoo:has(input[name="Field116"][value*="MI" i]) textarea {
    border-color: #2c48dc !important;
}
form.wufoo:has(input[name="Field116"][value*="MI" i]) input#saveForm.btTxt.submit {
    background-color: #2c48dc !important;
    border-color: #2c48dc !important;
    color: #fff !important; /* keep text white */
}

/* AdamSmith site */
form.wufoo:has(input[name="Field116"][value*="AdamSmith" i]) input.text,
form.wufoo:has(input[name="Field116"][value*="AdamSmith" i]) input[type="email"],
form.wufoo:has(input[name="Field116"][value*="AdamSmith" i]) select,
form.wufoo:has(input[name="Field116"][value*="AdamSmith" i]) textarea {
    border-color: #138999 !important;
}
form.wufoo:has(input[name="Field116"][value*="AdamSmith" i]) input#saveForm.btTxt.submit {
    background-color: #138999 !important;
    border-color: #138999 !important;
    color: #fff !important; /* keep text white */
}

/* Remove gradient/graphic "shadows" painted as backgrounds or border images */
.wufoo input.text,
.wufoo input[type="email"],
.wufoo select.select,
.wufoo textarea.textarea {
    background-image: none !important;    /* kill gradient/bg art */
    border-image: none !important;         /* in case the border uses a gradient */
    filter: none !important;               /* guard against drop-shadow filters */
    background: #fff none !important;      /* ensure a plain background */
    background-clip: padding-box !important; /* prevents bg bleeding under border radius */
}

/* Do the same for focus and error states */
.wufoo input.text:focus,
.wufoo input[type="email"]:focus,
.wufoo select.select:focus,
.wufoo textarea.textarea:focus,
.wufoo li.error input.text,
.wufoo li.error input[type="email"],
.wufoo li.error select.select,
.wufoo li.error textarea.textarea {
    background-image: none !important;
    border-image: none !important;
    filter: none !important;
    background: #fff none !important;
    background-clip: padding-box !important;
}

/* Safari/WebKit sometimes adds built-in styling (including inner glow) */
.wufoo input.text,
.wufoo input[type="email"],
.wufoo select.select,
.wufoo textarea.textarea,
.wufoo input.text:focus,
.wufoo input[type="email"]:focus {
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* If your email field is treated as a search field by the theme, cover that too */
.wufoo input[type="search"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    background-image: none !important;
    border-image: none !important;
}

/* Remove gap under the Email input when the row is in error */
.wufoo li.email.error input[type="email"] {
    margin-bottom: 0 !important;
}

/* Remove browser invalid-state glow/gradient for email */
.wufoo input[type="email"]:invalid {
    box-shadow: none !important;
    background-image: none !important;
    border-image: none !important;
    outline: none !important;
}

/* ===== FINAL WIDTH FIX (300px) ===== */
/* Force the panel to be exactly 300px outer width (incl. padding + side borders)
   and size the iframe to the resulting inner width (266px). Place at end of file. */
@media (min-width: 680px) {
    .left-sidebar div.u_sticky-content,
    #article-content div.u_sticky-content,
    div.u_sticky-content {
        box-sizing: border-box;
        width: 300px !important;                  /* exact outer width you want */
        padding: 5px 16px 10px 16px !important;   /* as per your computed styles */
        border-top: 1px solid #ababab !important;
        border-bottom: 1px solid #ababab !important;
        border-left: 1px solid #e8ecfc !important;
        border-right: 1px solid #e8ecfc !important;
        border-radius: 0 !important;
        background-color: #fff !important;
        box-shadow: none !important;
        margin: 0 0 30px 0;
        /* guard against layout stretch */
        flex: 0 0 auto !important;
        align-self: flex-start !important;
    }
}

/* Inner content width = 300 - 16 - 16 - 1 - 1 = 266px */
.left-sidebar .u_sticky-content iframe[src*="wufoo.com"],
#article-content .u_sticky-content iframe[src*="wufoo.com"],
.u_sticky-content iframe[src*="wufoo.com"] {
    display: block;
    width: 100% !important;
    max-width: 266px !important;
    margin: 0 auto;
}