@charset "UTF-8"; /* Color variables */ :root, .hl-app, .form-builder--wrap-questions { --primary: #839539; --primary-light: #f5f7f0; --gray-200: #e5e7eb; --gray-300: #d1d5db; --gray-900: #111827; --white: #fff; --black: #000; --hover-color: #fba10b; --progress-bar-color: #fba10b; } /* Global Font */ body, .hl-app, .form-builder--wrap-questions, .ghl-progress-status, .hl-app .field-label, .field-label, .form-builder--item > div > label, .hl-app .option-radio label, .option-radio label { font-family: "Outfit", sans-serif !important; color: var(--black) !important; } .hl-app .hl_form-builder--main { padding: 0 !important; margin-top: 0 !important; margin-bottom: -85px !important; } .hl-app .hl_form-builder--main > .ghl-form-wrap { margin-bottom: 0 !important; } .hl-app .hl_wrapper--inner { padding-top: 0 !important; } /** Input Focus **/ #_builder-form input[type="text"], #_builder-form input[type="email"], #_builder-form input[type="tel"] { background-color: transparent !important; color: var(--black) !important; border: 1px solid var(--gray-200) !important; } #_builder-form input[type="text"][class="form-control"]:focus, #_builder-form input[type="email"][class="form-control"]:focus, #_builder-form input[type="tel"]:focus { border-color: var(--primary) !important; background-color: transparent !important; color: var(--black) !important; } /** Input Label **/ .form-builder--item-input.form-builder--item label { margin-bottom: 0; } .form-builder--item-input.form-builder--item label span { display: none; } /* Progress Bar Styles */ .ghl-question-set form { position: relative; padding-top: 10px !important; } /* Progress container */ .ghl-progress-bar { padding: 20px; padding-bottom: 0px; text-align: center; background: transparent !important; z-index: 1; } /* Question counter text */ .ghl-progress-status { font-size: 24px; font-weight: 700; color: #111827; margin-bottom: 12px; } /* Progress bar container */ .ghl-progress-track { height: 8px; background: #e5e7eb; border-radius: 4px; overflow: hidden; margin: 0 auto; max-width: 600px; } /* Progress bar fill */ .ghl-progress-fill { height: 100%; background: var(--progress-bar-color) !important; border-radius: 4px; transition: width 0.3s ease; } /* Question title styling */ .hl-app .field-label, .field-label, .form-builder--item > div > label { font-size: 20px !important; font-weight: 500 !important; text-align: center !important; margin-bottom: 2.5rem !important; line-height: 1.2 !important; display: block !important; } .hl-app .field-label span, .field-label span, .form-builder--item > div > label > span { display: none; } /* Option container */ .hl-app .option-radio, .option-radio { width: 100% !important; position: relative !important; display: block !important; } /* The main clickable wrapper div */ .hl-app .option-radio > div, .option-radio > div { position: relative !important; border: 2px solid var(--gray-200) !important; border-radius: 8px !important; padding: 16px !important; cursor: pointer !important; transition: all 0.15s ease-in-out !important; display: flex !important; align-items: center !important; background-color: transparent !important; min-height: 60px !important; } /* Make the radio input cover the entire area */ .hl-app .option-radio input[type="radio"], .option-radio input[type="radio"] { cursor: pointer !important; position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; opacity: 0 !important; z-index: 1 !important; } /* Selected state */ .hl-app .option-radio > div:has(input:checked), .option-radio > div:has(input:checked) { background-color: var(--primary-light) !important; border: 2px solid var(--primary) !important; } /* Label styling */ .hl-app .option-radio label, .option-radio label { font-size: 17px !important; font-weight: 300 !important; } /* Icons using SVG data URLs */ .hl-app .option-radio > div::before, .option-radio > div::before { content: "" !important; width: 24px !important; height: 24px !important; margin-right: 12px !important; background-position: center !important; background-repeat: no-repeat !important; background-size: contain !important; flex-shrink: 0 !important; } /* Add hover effect */ .hl-app .option-radio > div:hover, .option-radio > div:hover { border-color: var(--hover-color) !important; } /* Ensure proper spacing between options */ .hl-app .option-radio + .option-radio, .option-radio + .option-radio { margin-top: 8px !important; } /* All other styles remain the same, including icon rules */ /* Icons section omitted for brevity */ /* Priority Icons */ /*Page 1*/ .option-radio:has(input[value="Under 6%"]) > div::before { background-image: url("data:image/svg+xml;charset=UTF-8,") !important; } .option-radio:has(input[value="6% – 8%"]) > div::before { background-image: url("data:image/svg+xml;charset=UTF-8,") !important; } .option-radio:has(input[value="8% – 10%"]) > div::before { background-image: url("data:image/svg+xml;charset=UTF-8,") !important; } .option-radio:has(input[value="Over 10%"]) > div::before { background-image: url("data:image/svg+xml;charset=UTF-8,") !important; } .option-radio:has(input[value="Not sure"]) > div::before { background-image: url("data:image/svg+xml;charset=UTF-8,") !important; } /*Page 2*/ .option-radio:has(input[value="Less than $10,000"]) > div::before { background-image: url("data:image/svg+xml;charset=UTF-8,") !important; } .option-radio:has(input[value="$10,000 – $20,000"]) > div::before { background-image: url("data:image/svg+xml;charset=UTF-8,") !important; } .option-radio:has(input[value="$20,000 – $30,000"]) > div::before { background-image: url("data:image/svg+xml;charset=UTF-8,") !important; } .option-radio:has(input[value="Over $30,000"]) > div::before { background-image: url("data:image/svg+xml;charset=UTF-8,") !important; } /*Page 3*/ .option-radio:has(input[value="Under $200"]) > div::before { background-image: url("data:image/svg+xml;charset=UTF-8,") !important; } .option-radio:has(input[value="$200 – $400"]) > div::before { background-image: url("data:image/svg+xml;charset=UTF-8,") !important; } .option-radio:has(input[value="$400 – $600"]) > div::before { background-image: url("data:image/svg+xml;charset=UTF-8,") !important; } .option-radio:has(input[value="Over $600"]) > div::before { background-image: url("data:image/svg+xml;charset=UTF-8,") !important; } /*Page 4*/ .option-radio:has(input[value="Within the last year"]) > div::before { background-image: url("data:image/svg+xml;charset=UTF-8,") !important; } .option-radio:has(input[value="1 – 3 years ago"]) > div::before { background-image: url("data:image/svg+xml;charset=UTF-8,") !important; } .option-radio:has(input[value="3 – 5 years ago"]) > div::before { background-image: url("data:image/svg+xml;charset=UTF-8,") !important; } .option-radio:has(input[value="Over 5 years ago"]) > div::before { background-image: url("data:image/svg+xml;charset=UTF-8,") !important; } /*Page 5*/ .option-radio:has(input[value="New (2022 or newer)"]) > div::before { background-image: url("data:image/svg+xml;charset=UTF-8,") !important; } .option-radio:has(input[value="Used (2017 – 2021)"]) > div::before { background-image: url("data:image/svg+xml;charset=UTF-8,") !important; } .option-radio:has(input[value="Older than 2017"]) > div::before { background-image: url("data:image/svg+xml;charset=UTF-8,") !important; } /*Page 6*/ .option-radio:has(input[value="Lower my monthly payments"]) > div::before { background-image: url("data:image/svg+xml;charset=UTF-8,") !important; } .option-radio:has(input[value="Pay off my loan faster"]) > div::before { background-image: url("data:image/svg+xml;charset=UTF-8,") !important; } .option-radio:has(input[value="Both"]) > div::before { background-image: url("data:image/svg+xml;charset=UTF-8,") !important; } /*Page 7*/ .option-radio:has(input[value="Yes"]) > div::before { background-image: url("data:image/svg+xml;charset=UTF-8,") !important; } .option-radio:has(input[value="No"]) > div::before { background-image: url("data:image/svg+xml;charset=UTF-8,") !important; } /*Page 8*/ .option-radio:has(input[value="Yes!"]) > div::before { background-image: url("data:image/svg+xml;charset=UTF-8,") !important; } .option-radio:has(input[value="No, I want to start paying right away"]) > div::before { background-image: url("data:image/svg+xml;charset=UTF-8,") !important; } /* Target the Email field label */ .ghl-question-set input[type="email"] + label, .ghl-question-set .form-group.email label { text-align: center !important; display: block; width: 100%; }