/* ============================================================
ChildCareCRM Tour Form - Custom Layout Fixes
Load this AFTER the ChildCareCRM v1.css file so it overrides it.
Add it as an additional tag or paste into your site's
stylesheet, placed below the ChildCareCRM in your .
============================================================ */
#childcarecrm-tour-form {
max-width: 700px;
margin: 0 auto;
font-family: inherit;
}
/* Give text inputs a consistent, full-width look inside their column */
#childcarecrm-tour-form input[type="text"],
#childcarecrm-tour-form input[type="email"],
#childcarecrm-tour-form input[type="tel"],
#childcarecrm-tour-form select {
width: 100%;
box-sizing: border-box;
padding: 8px 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
/* --- Fix the broken checkbox + disclaimer text rows --- */
/* Target the row that holds a checkbox next to its consent text.
ChildCareCRM typically wraps each pair in its own row/column div;
the selectors below hit the common patterns. Adjust the class
name after inspecting the live DOM if it doesn't match. */
#childcarecrm-tour-form .form-row,
#childcarecrm-tour-form [class*="consent"],
#childcarecrm-tour-form [class*="checkbox"] {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 20px;
width: 100%;
}
#childcarecrm-tour-form input[type="checkbox"] {
flex: 0 0 auto;
width: 18px;
height: 18px;
margin-top: 3px;
cursor: pointer;
}
/* The disclaimer/consent paragraph next to each checkbox should take
the remaining width and wrap normally, not squeeze into a narrow column */
#childcarecrm-tour-form .form-row label,
#childcarecrm-tour-form [class*="consent"] p,
#childcarecrm-tour-form [class*="consent"] label,
#childcarecrm-tour-form [class*="checkbox"] label {
flex: 1 1 auto;
max-width: none;
font-size: 13px;
line-height: 1.5;
color: #333;
text-align: left;
}
/* If the two consent checkboxes are meant to sit side by side on
desktop, stack them on a single flex row with a gap instead of
using fixed pixel columns */
#childcarecrm-tour-form .consent-group,
#childcarecrm-tour-form [class*="marketing-consent"] {
display: flex;
flex-wrap: wrap;
gap: 24px;
align-items: flex-start;
}
#childcarecrm-tour-form .consent-group > *,
#childcarecrm-tour-form [class*="marketing-consent"] > * {
flex: 1 1 260px;
}
/* Bold text inside the consent copy (pricing, availability, services,
general communications, service) should stay bold but inherit color */
#childcarecrm-tour-form strong,
#childcarecrm-tour-form b {
font-weight: 700;
}
/* Two-column name/field rows (First/Last name, Child First/Last name) */
#childcarecrm-tour-form .field-row,
#childcarecrm-tour-form [class*="two-col"] {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
#childcarecrm-tour-form .field-row > div,
#childcarecrm-tour-form [class*="two-col"] > div {
flex: 1 1 260px;
}
/* Terms & Conditions / Privacy Policy links row */
#childcarecrm-tour-form .terms-links,
#childcarecrm-tour-form [class*="terms"] {
text-align: center;
margin: 16px 0;
font-size: 13px;
}
/* Responsive: stack everything on small screens */
@media (max-width: 600px) {
#childcarecrm-tour-form .field-row,
#childcarecrm-tour-form [class*="two-col"],
#childcarecrm-tour-form .consent-group,
#childcarecrm-tour-form [class*="marketing-consent"] {
flex-direction: column;
gap: 12px;
}
}
Skip to main content
