/* ===================================================================
CX Platform Theme Variables for Receive and Verify Modules
Last Update 04 October 2025 v.12
This section contains all primary CSS custom properties (variables)
used to control the appearance of the survey interface within the
#surveyWrapper container.
Instructions:
- Modify the values below to apply custom branding and styling
to your survey pages without touching the main component styles.
- All variables are scoped to #surveyWrapper, so they only affect
surveys rendered inside this container.
- Use valid CSS values. For colours, use hex codes or rgba().
- For responsive layout, adjust the width variables according to
device breakpoints:
• Desktop: ≥ 1200px
• Tablet: 768px – 1199px
• Mobile: < 768px
Supports:
Verify CSS > /cdn/ChandlerVerify.v2.0.min.css
/cdn/ChandlerVerify.Main.v2.0.min.js
=================================================================== */
/* ==========================================================================
Import your custom web fonts
--------------------------------------------------------------------------
HOW TO USE
1) Setup an application in the Send module to upload and host your fonts
2) In the assets folder copy the link of the hosted font and add to the src: url
3) Keep the same "font-family" name across all @font-face blocks
4) Create one @font-face per weight/style (Thin 200, Regular 400, Bold 700, etc).
5) Order sources woff2 first, then woff as a fallback.
6) Use `font-display: swap` for good perceived performance.
7) Reference in your CSS: `font-family: "yourfont", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
Example
@font-face { font-family: Inter;
src: url(https://tenantname-test-cdn.cxengine.com.au/resources/ethical/t/22/Inter.woff2) format("woff2"),
url(https://tenantname-test-cdn.cxengine.com.au/resources/ethical/t/22/Inter.woff)
format("woff");
font-weight: 200;
font-style: normal;
font-display: swap
=================================================================== */
/* NGS Avenir Black */
@font-face {
font-family: 'Avenir';
src: url('https://ngs-test-cdn.cxengine.com.au/resources/ngs/tg/9/avenir-black.woff2') format('woff2'),
url('https://ngs-test-cdn.cxengine.com.au/resources/ngs/tg/9/avenir-black.woff') format('woff');
font-weight: 900;
font-style: normal;
font-display: swap;
}
/* Avenir Roman */
@font-face {
font-family: 'Avenir';
src: url('https://ngs-test-cdn.cxengine.com.au/resources/ngs/tg/9/avenir-roman.woff2') format('woff2'),
url('https://ngs-test-cdn.cxengine.com.au/resources/ngs/tg/9/avenir-roman.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* Avenir Heavy */
@font-face {
font-family: 'Avenir Heavy';
src: url('https://ngs-test-cdn.cxengine.com.au/resources/ngs/tg/9/avenir-heavy.woff2') format('woff2'),
url('https://ngs-test-cdn.cxengine.com.au/resources/ngs/tg/9/avenir-heavy.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
.survey-page {
/* Page Backgrounds Colors by Breakpoint */
--cx-body-background-color: #faf6f3;
--cx-body-background-color-tablet: #faf6f3;
--cx-body-background-color-mobile: #faf6f3;
/* Form Background Colors, Border Colors, and Form Corners */
--cx-body-survey-background-color: #ffffff;
--cx-body-survey-border-color: #ffffff;
--cx-body-survey-border-radius: 12px;
/* Form Border Widths by Breakpoint */
--cx-body-survey-border-width-desktop: 0px;
--cx-body-survey-border-width-tablet: 0px;
--cx-body-survey-border-width-mobile: 0px;
/* Form Internal Padding by Breakpoint */
--cx-body-survey-padding-desktop: 60px;
--cx-body-survey-padding-tablet: 40px;
--cx-body-survey-padding-mobile: 15px 15px 15px 15px;
/* Form External Margins by Breakpoint */
--cx-body-survey-margin-desktop: 0px;
--cx-body-survey-margin-tablet: 0px;
--cx-body-survey-margin-mobile: 0px;
/* Form Width by Breakpoint */
--cx-body-survey-width-desktop: 1200px;
--cx-body-survey-width-tablet: 100%;
--cx-body-survey-width-mobile: 100%;
}
/* ------------------------------------------------------------------------------ */
/* Component + modal variable scope */
#surveyWrapper,
.modal,
.modal-cont,
.svd_surveyjs_designer_container,
survey-tester .sv_container {
/* ------------------------------------------------------------------------------ */
/* Logo Source and Size by Breakpoint */
--cx-logo-url: url("");
--cx-logo-height-desktop: 50px;
--cx-logo-height-tablet: 42px;
--cx-logo-height-mobile: 42px;
--cx-logo-width: auto;
--cx-logo-top-padding: 0px;
/* Logo Postion by Breakpoint */
--cx-logo-pos-desktop: right 0 top 0;
--cx-logo-pos-tablet: left 10px top 0;
--cx-logo-pos-mobile: left 10px top 0;
--cx-logo-spacing-desktop: 0px;
--cx-logo-spacing-tablet: 0px;
--cx-logo-spacing-mobile: 30px;
/* ------------------------------------------------------------------------------ */
/* Typography Setup */
--cx-font-heading: "Avenir", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
--cx-font-body: "Avenir", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
--cx-font-buttons: "Avenir Heavy", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
--cx-primary-text-color: #003c3c; /* Controls color of all Headers */
--cx-secondary-text-color: #273236; /* Controls color of body font, labels and inputs */
/* Anchor and Links */
--cx-link-color: #003c3c;
--cx-link-text-decoration:underline;
--cx-link-text-decoration-hover:underline;
--cx-link-color-hover: #003c3c;
/* Form Header Section Width by Breakpoint */
--cx-form-header-section-width-desktop: 100%;
--cx-form-header-section-width-tablet: 100%;
--cx-form-header-section-width-mobile: 100%;
--cx-form-header-section-text-alignment-desktop: center;
--cx-form-header-section-text-alignment-tablet: center;
--cx-form-header-section-text-alignment-mobile: center;
/* Form Title */
--cx-form-title-font-size-desktop: 2rem;
--cx-form-title-font-size-tablet: 1.525rem;
--cx-form-title-font-size-mobile: 1.525rem;
--cx-form-title-font-weight: 700;
--cx-form-title-margin-desktop: 15px 0px 0px 0px;
--cx-form-title-margin-tablet: 0px;
--cx-form-title-margin-mobile: 0px;
/* Form Description */
--cx-form-description-font-size-desktop: 1rem;
--cx-form-description-font-size-tablet: 1rem;
--cx-form-description-font-size-mobile: 1rem;
--cx-form-description-font-weight: 400;
/* Page Title */
--cx-form-page-title-font-size-desktop: 1.625rem;
--cx-form-page-title-font-size-tablet: 1.325rem;
--cx-form-page-title-font-size-mobile: 1rem;
--cx-form-page-title-font-weight: 700;
/* Page Description */
--cx-form-page-description-font-size-desktop: 1rem;
--cx-form-page-description-font-size-tablet: 1rem;
--cx-form-page-description-font-size-mobile: 1rem;
--cx-form-page-description-font-weight: 400;
/* Body Font Sizes and Weights */
--cx-body-font-size-desktop: 1.125rem;
--cx-body-font-size-tablet: 1rem;
--cx-body-font-size-mobile: 1rem;
--cx-body-font-line-height-desktop: 1.6;
--cx-body-font-line-height-tablet: 1.6;
--cx-body-font-line-height-mobile: 1.6;
--cx-body-font-weight: 400;
/* Header Font Type, Sizes and Weights */
--cx-h1-font-family: "Avenir", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
--cx-h1-weight: 700;
--cx-h1-size-desktop: 2rem;
--cx-h1-size-tablet: 1.75rem;
--cx-h1-size-mobile: 1.5rem;
--cx-h2-font-family: "Avenir", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
--cx-h2-weight: 700;
--cx-h2-size-desktop: 1.625rem;
--cx-h2-size-tablet: 1.5rem;
--cx-h2-size-mobile: 1.25rem;
--cx-h3-font-family: "Avenir", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
--cx-h3-weight: 700;
--cx-h3-size-desktop: 1.5rem;
--cx-h3-size-tablet: 1.25rem;
--cx-h3-size-mobile: 1.125rem;
--cx-h4-font-family: "Avenir", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
--cx-h4-weight: 700;
--cx-h4-size-desktop: 1.325rem;
--cx-h4-size-tablet: 1.125rem;
--cx-h4-size-mobile: 1rem;
/* The .h5 font style controls form label font size and weight */
--cx-h5-font-family: "Avenir", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
--cx-h5-weight: 700;
--cx-h5-size-desktop: 1.125rem;
--cx-h5-size-tablet: 1rem;
--cx-h5-size-mobile: 1rem;
/* Form Input Text Color, Font Sizes and Weights */
--cx-input-text-color: var(--cx-secondary-text-color);
--cx-input-font-size-desktop: 1.125rem;
--cx-input-font-size-tablet: 1rem;
--cx-input-font-size-mobile: 1rem;
--cx-input-font-weight: 400;
/* ------------------------------------------------------------------------------ */
/* Accessibility Settings > Keyboard Focus States */
--cx-input-boxshadow-color-focus: #268147; /* The last 2 digits of the hex code is opacity */
--cx-input-outline-width-focus: 4px;
--cx-input-outline-offset-focus: 1px;
/* ------------------------------------------------------------------------------ */
/* Button Global Styles */
--cx-button-font-size-desktop: 1.125rem;
--cx-button-font-size-tablet: 1rem;
--cx-button-font-size-mobile: 1rem;
--cx-button-font-weight: 600;
--cx-button-text-decoration:none;
--cx-button-text-decoration-hover:none;
--cx-button-border-width: 1px;
--cx-button-border-radius: 50px;
--cx-button-padding: 18px 20px 15px 20px;
--cx-button-min-width-desktop: 120px;
--cx-button-min-width-tablet: 120px;
--cx-button-min-width-mobile: 120px;
/* Primary Buttons */
--cx-button-primary-bg: #268147;
--cx-button-primary-text: #fff;
--cx-button-primary-border: #39c06a;
--cx-button-primary-hover-bg: #ff96a3;
--cx-button-primary-hover-text: #273236;
--cx-button-primary-hover-border: #ff96a3;
--cx-button-primary-active-bg: #ff96a3;
--cx-button-primary-active-text: #ffffff;
--cx-button-primary-active-border: #ff96a3;
--cx-button-primary-focus-bg: #ff96a3;
--cx-button-primary-focus-text: #ffffff;
--cx-button-primary-focus-border: #ff96a3;
/* Secondary Buttons */
--cx-button-secondary-bg: #ffffff;
--cx-button-secondary-text: #003c3c;
--cx-button-secondary-border: #003c3c;
--cx-button-secondary-hover-bg: #ff96a3;
--cx-button-secondary-hover-text: #fff;
--cx-button-secondary-hover-border: #003c3c;
--cx-button-secondary-active-bg: #ff96a3;
--cx-button-secondary-active-text: #273236;
--cx-button-secondary-active-border: #003c3c;
--cx-button-secondary-focus-bg: #ff96a3;
--cx-button-secondary-focus-text: #273236;
--cx-button-secondary-focus-border: #003c3c;
/* Save for Later Button */
--cx-button-save-bg: #ffffff;
--cx-button-save-text: #003c3c;
--cx-button-save-border: #003c3c;
--cx-button-save-text-decoration: none;
--cx-button-save-hover-bg: #ff96a3;
--cx-button-save-hover-text: #fff;
--cx-button-save-hover-border: #003c3c;
--cx-button-save-hover-text-decoration: none;
--cx-button-save-active-bg: #ff96a3;
--cx-button-save-active-text: #273236;
--cx-button-save-active-border: #003c3c;
--cx-button-save-focus-bg: #ff96a3;
--cx-button-save-focus-text: #273236;
--cx-button-save-focus-border: #003c3c;
/* Choose Files Button > Upload Documents */
--cx-button-upload-bg: #268147;
--cx-button-upload-text: #ffffff;
--cx-button-upload-border: #268147;
--cx-button-upload-text-decoration: none;
--cx-button-upload-padding-desktop:12px 30px 12px 30px;
--cx-button-upload-padding-tablet:12px 30px 12px 30px;
--cx-button-upload-padding-mobile:12px 30px 12px 30px;
--cx-button-upload-width-desktop:auto;
--cx-button-upload-width-tablet:auto;
--cx-button-upload-width-mobile:auto;
--cx-button-upload-hover-bg: #003c3c;
--cx-button-upload-hover-text: #ffffff;
--cx-button-upload-hover-border: #ff96a3;
--cx-button-upload-hover-text-decoration: none;
--cx-button-upload-active-bg: #268147;
--cx-button-upload-active-text: #ffffff;
--cx-button-upload-active-border: #ff96a3;
--cx-button-upload-focus-bg: #268147;
--cx-button-upload-focus-text: #ffffff;
--cx-button-upload-focus-border: #ff96a3;
/* Uploaded Documents Container */
--cx-upload-documents-icon-color: #268147;
--cx-upload-documents-icon-size: 20px;
--cx-upload-documents-icon-weight: 400;
--cx-upload-documents-close-icon-color: #39c06a;
--cx-upload-documents-border-radius: 6px;
--cx-upload-documents-bg: #fff;
--cx-upload-documents-border-color: #AEAFB5;
--cx-upload-documents-border-width: 1px;
--cx-upload-documents-box-padding: 10px;
--cx-upload-documents-box-width-desktop: 60%;
--cx-upload-documents-box-width-tablet: 400px;
--cx-upload-documents-box-width-mobile: 100%;
--cx-upload-documents-font-size-desktop: 1rem;
--cx-upload-documents-font-size-tablet: 0.875rem;
--cx-upload-documents-font-size-mobile: 0.875rem;
--cx-upload-documents-text-decoration: none;
--cx-upload-documents-hover-text-decoration: underline;
/* Navigation Buttons Footer */
--cx-navigation-footer-margin-desktop: 60px 0px 0px 0px;
--cx-navigation-footer-margin-tablet: 60px 0px 0px 0px;
--cx-navigation-footer-margin-mobile: 60px 0px 0px 0px;
--cx-navigation-footer-padding-desktop: 60px 18px 0px 18px;
--cx-navigation-footer-padding-tablet: 60px 18px 40px 18px;
--cx-navigation-footer-padding-mobile: 40px 18px 40px 18px;
--cx-navigation-footer-border-top-width-desktop: 0px;
--cx-navigation-footer-border-top-width-tablet: 0px;
--cx-navigation-footer-border-top-width-mobile: 0px;
--cx-navigation-footer-border-top-color: #000000;
--cx-navigation-footer-row-gap-mobile: 10px;
/* ------------------------------------------------------------------------------ */
/* Boolean Component */
--cx-boolean-color-bg: #39c06a;
/* ------------------------------------------------------------------------------ */
/* Progress Bar Slider Component*/
--cx-progress-fg: #bcd700;
--cx-progress-bg: #faf6f3;
--cx-progress-text: #bcd700;
--cx-progress-border: #faf6f3;
--cx-progress-outer-radius-desktop: 50px;
--cx-progress-outer-radius-tablet: 50px;
--cx-progress-outer-radius-mobile: 50px;
--cx-progress-inner-radius-desktop: 0px 50px 50px 0px; /* 4 values: top-left | top-right | bottom-right | bottom-left */
--cx-progress-inner-radius-tablet: 0px 4px 4px 0px; /* 4 values: top-left | top-right | bottom-right | bottom-left */
--cx-progress-inner-radius-mobile: 0px 4px 4px 0px; /* 4 values: top-left | top-right | bottom-right | bottom-left */
--cx-progress-text-size-desktop: 0.7rem;
--cx-progress-text-size-tablet: 0.7rem;
--cx-progress-text-size-mobile: 0rem;
--cx-progress-height-desktop: 8px;
--cx-progress-height-tablet: 8px;
--cx-progress-height-mobile: 8px;
--cx-progress-outer-width-desktop: 100%;
--cx-progress-outer-width-tablet: 100%;
--cx-progress-outer-width-mobile: 70%;
--cx-progress-mb-desktop: 30px 18px 80px 18px; /* Controls margin of the progress indicator to add or remove white space*/
--cx-progress-mb-tablet: 30px 18px 60px 18px; /* Controls margin of the progress indicator to add or remove white space*/
--cx-progress-mb-mobile: 30px 18px 40px 18px; /* Controls margin of the progress indicator to add or remove white space*/
/* ------------------------------------------------------------------------------ */
/* Alerts > In App Notifications for Validation Guidance and Errors */
--cx-alert-bg: #DD3B52;
--cx-alert-border: #DD3B52;
--cx-alert-text: #ffffff;
--cx-alert-font-size: 0.875rem;
--cx-alert-border-width: 1px;
--cx-alert-radius: 4px;
--cx-alert-padding: 8px 10px;
/* ------------------------------------------------------------------------------ */
/* Panel Components */
--cx-panel-bg: transparent;
--cx-panel-border-color: transparent;
--cx-panel-border-width: 0px;
--cx-panel-radius: 0px;
--cx-panel-padding-desktop: 0px;
--cx-panel-padding-tablet: 0px;
--cx-panel-padding-mobile: 0px;
/* ------------------------------------------------------------------------------ */
/* Table Borders inside the Matrix Components */
--cx-table-border-width: 1px;
--cx-table-border-color: #AEAFB5;
--cx-table-header-weight: 400;
/* ------------------------------------------------------------------------------ */
/* Image Picker Component */
--cx-image-picker-border-width: 1px;
--cx-image-picker-border-color: #AEAFB5;
--cx-image-picker-radius: 4px;
--cx-image-picker-bg: #ffffff;
--cx-image-picker-selected-border: #39C06A;
--cx-image-picker-selected-bg: #39C06A;
/* ------------------------------------------------------------------------------ */
/* Signature Component */
--cx-signature-border-width: 1px;
--cx-signature-border-color: #AEAFB5;
--cx-signature--border-radius: 6px;
/* ------------------------------------------------------------------------------ */
/* Spinner 'Loading' Indicator Color */
--cx-spinner-color: #39C06A;
/* ------------------------------------------------------------------------------ */
/* Modal > Pop Up Borders, Font Sizes and Padding */
--cx-modal-content-bg:#ffffff;
--cx-modal-content-border-radius:6px;
--cx-modal-content-border-width:0px;
--cx-modal-content-border-color:transparent;
--cx-modal-header-font-size: 1.325rem;
--cx-modal-header-font-weight: 700;
--cx-modal-header-padding-desktop: 40px 40px 0px 40px;
--cx-modal-header-padding-tablet: 40px 40px 0px 40px;
--cx-modal-header-padding-mobile: 30px 30px 15px 30px;
--cx-modal-header-border-bottom-width: 0px;
--cx-modal-header-border-bottom-color: #AEAFB5;
--cx-modal-header-bg: #ffffff;
--cx-modal-body-padding-desktop: 30px 30px 30px 30px;
--cx-modal-body-padding-tablet: 30px 30px 30px 30px;
--cx-modal-body-padding-mobile: 30px 30px 30px 30px;
--cx-modal-body-bg: #ffffff;
--cx-modal-footer-padding-desktop: 15px 30px 30px 30px;
--cx-modal-footer-padding-tablet: 15px 30px 30px 30px;
--cx-modal-footer-padding-mobile: 15px 30px 30px 30px;
--cx-modal-footer-border-top-width: 0px;
--cx-modal-footer-border-top-color: #AEAFB5;
--cx-modal-footer-bg: #ffffff;
--cx-modal-close-color:#39C06A;
/* ------------------------------------------------------------------------------ */
/* Ranking Component */
--cx-ranking-number-bg: #E6F3EB;
--cx-ranking-drag: #39C06A;
--cx-ranking-bg: #fff;
--cx-ranking-border-width: 0px;
--cx-ranking-border-color: #39C06A;
--cx-ranking-border-radius: 4px;
--cx-ranking-padding: 20px 20px 20px 35px;
/* ----------------------------------Form Input Control Settings------------------------------------ */
/* Input Fields */
--cx-input-border-radius: 6px;
--cx-input-border-color: #AEAFB5;
--cx-input-bg-color: #ffffff;
--cx-input-border-width: 1px;
--cx-input-label-weight: 700;
--cx-input-border-color-focus: #003c3c;
--cx-input-border-width-focus: 1px;
--cx-input-min-height-desktop: 45px;
--cx-input-min-height-tablet: 45px;
--cx-input-min-height-mobile: 45px;
--cx-input-form-padding: .375rem .75rem;
/* Placeholder Text Font Color > Global */
--cx-form-placeholder-color: var(--cx-secondary-text-color);
/* Checkbox Components */
--cx-checkbox-size: 22px;
--cx-checkbox-border-width: 1px;
--cx-checkbox-radius: 4px;
--cx-checkbox-border-color: #AEAFB5;
--cx-checkbox-border-checked-color: #39C06A;
--cx-checkbox-accent-color: #ffffff;
--cx-checkbox-bg: #ffffff;
--cx-checkbox-bg-checked: #39C06A;
/* Radio Components */
--cx-radio-size: 22px;
--cx-radio-border-width: 1px;
--cx-radio-radius: 50px;
--cx-radio-border-color: #AEAFB5;
--cx-radio-bg: #ffffff;
--cx-radio-bg-checked: #39C06A;
--cx-radio-border-checked-color: #39C06A;
--cx-radio-inner-type: "\f111"; /* Circle Solid use "\f111" | Dot Circle use "\f192" | Tick use "\f00c" */
--cx-radio-inner-accent-color: #ffffff;
--cx-radio-inner-size-checked: 8px;
/* ----------------------------------Verify JavaScript Plugin Settings------------------------------------ */
/* Verify Document Select Box */
--cx-verify-document-select-bg: #ffffff;
--cx-verify-document-select-border-width: 1px;
--cx-verify-document-select-border-color: #AEAFB5;
--cx-verify-document-select-border-radius: 8px;
--cx-verify-document-select-text-transform: Capitalize;
--cx-verify-document-select-padding: 20px 20px 20px 20px;
--cx-verify-document-select-margin: 10px 0px 10px 0px;
/* Verify Input Field Numbers - Prefix */
--cx-verify-field-numbers-display: none; /* Set to: inline OR none */
--cx-verify-field-numbers-color: transparent;
--cx-verify-field-numbers-font-weight: 400;
/* Verify Mandatory Asterisk */
--cx-verify-field-mandatory-display: none;
--cx-verify-field-mandatory-color: #39c06a;
/* Verify Instruction Box */
--cx-verify-instructions-bg: #F6EEE8;
--cx-verify-instructions-radius: 10px;
--cx-verify-instructions-padding-desktop: 40px;
--cx-verify-instructions-padding-tablet: 30px;
--cx-verify-instructions-padding-mobile: 20px;
--cx-verify-instructions-margin-desktop: 110px 0px 40px 40px;
--cx-verify-instructions-margin-tablet: 0px;
--cx-verify-instructions-margin-mobile: 0px;
/* Verify Modal Settings */
--cx-verify-modal-bg: #ffffff;
--cx-verify-modal-radius: 10px;
--cx-verify-modal-padding: 40px;
/* Verify Consent Checkbox Container */
--cx-verify-consent-bg: #faf6f3;
--cx-verify-consent-radius: 10px;
--cx-verify-consent-padding: 1.25rem 1.25rem 1.25rem 3.5rem;
--cx-verify-consent-border-color: #00A275;
--cx-verify-consent-border-width: 1px;
/* =======================================================================================
Custom Component Classes (Advanced Use Only)
The following CSS components are custom and require configuration for usage.
======================================================================================= */
/* Pill Radio Group > Custom Implementation > Target class = Field Name */
--pill-font-weight: 400;
--pill-outer-bg: #ffffff;
--pill-outer-border-color: #AEAFB5;
--pill-outer-border-width: 1px;
--pill-outer-margin: 0px;
--pill-border-radius: 9999px;
--pill-label-button-padding:13px 30px 12px 30px;
--pill-label-button-bg:transparent;
--pill-label-color: #003c3c;
--pill-label-border-color: transparent;
--pill-label-border-width: 1px;
--pill-label-bg-hover: #003c3c;
--pill-label-border-hover: #ff96a3;
--pill-label-color-hover: #ffffff;
--pill-label-bg-checked: #268147;
--pill-label-color-checked: #fff;
--pill-label-font-weight-checked: 600;
--pill-label-border-checked: #268147;
--pill-label-bg-focus: #268147;
--pill-label-border-focus: #268147;
--pill-label-color-focus: #fff;
/* ------------------------------------------------------------------------------ */
/* Use HTML Component for container > Apply custom class = .highlight-container */
/* For container header > Apply custom class to paragraph = .highlight-container-header */
--cx-highlight-container-font-size-desktop: 1.325rem;
--cx-highlight-container-font-size-tablet: 1.225rem;
--cx-highlight-container-font-size-mobile: 1.125rem;
--cx-highlight-container-font-color: #39c06a;
--cx-highlight-container-font-weight: 600;
--cx-highlight-container-border-radius: 15px;
--cx-highlight-container-border-width: 2px;
--cx-highlight-container-border-color: #39c06a;
--cx-highlight-container-bg: #fff;
--cx-highlight-container-padding-desktop: 30px 30px 14px 30px; /* Offset bottom padding by 16px to ensure consistent spacing */
--cx-highlight-container-padding-tablet: 30px 30px 14px 30px; /* Offset bottom padding by 16px to ensure consistent spacing */
--cx-highlight-container-padding-mobile: 25px 25px 9px 25px; /* Offset bottom padding by 16px to ensure consistent spacing */
/* ------------------------------------------------------------------------------ */
}
/* =======================================================================================
Advanced Component Classes (Advanced Use Only)
The following CSS classes are intended for advanced users who need full control over
component styling beyond what is possible with CSS variables detailed above.
IMPORTANT:
- These classes override structural and visual elements directly, including CSS variables.
- Use them with caution to avoid conflicts or unintended layout issues.
- For simple visual adjustments (e.g., colour, spacing, borders),
we strongly recommend using the CSS variables defined above instead.
Only use these styles if your use case requires full customisation beyond the variable layer.
======================================================================================= */
/* Form Page Background Color by Breakpoint */
body.survey-page { background-color: var(--cx-body-background-color);
}
@media (max-width: 1199px) {
body.survey-page {
background-color: var(--cx-body-background-color-tablet);
}
}
@media (max-width: 768px) { body.survey-page { background-color: var(--cx-body-background-color-mobile);
}
}
/* ------------------------------------------------------------------------------ */
/* Form Width by Breakpoint */
@media (min-width: 1200px) {
.container, .container-lg, .container-md, .container-sm, .container-xl {
max-width: var(--cx-body-survey-width-desktop); }
}
@media (max-width: 1199px) {
.container, .container-md, .container-sm {
max-width: var(--cx-body-survey-width-tablet); }
}
@media (max-width: 768px) {
.container, .container-md, .container-sm {
max-width: var(--cx-body-survey-width-mobile); }
}
/* ------------------------------------------------------------------------------ */
/* Form Settings for Padding, Margin and Borders */
.card {
border: 0;
border-radius: var(--cx-body-survey-border-radius);
background-color: transparent;
overflow: hidden;
}
.card-body {
padding: var(--cx-body-survey-padding-desktop);
background-color: var(--cx-body-survey-background-color);
border-radius: var(--cx-body-survey-border-radius);
border: var(--cx-body-survey-border-width-desktop) solid var(--cx-body-survey-border-color);
margin: var(--cx-body-survey-margin-desktop);
}
@media (max-width: 1199px) {
.card-body {
padding: var(--cx-body-survey-padding-tablet);
margin: var(--cx-body-survey-margin-tablet);
border: var(--cx-body-survey-border-width-tablet) solid var(--cx-body-survey-border-color);
}
}
@media (max-width: 768px) {
.card-body {
padding: var(--cx-body-survey-padding-mobile);
margin: var(--cx-body-survey-margin-mobile);
border: var(--cx-body-survey-border-width-mobile) solid var(--cx-body-survey-border-color);
}
.card {
border-radius: 0; /* Do not edit */
}
.sv_p_wrapper {
margin-left: 0; /* Do not edit */
margin-right: 0; /* Do not edit */
}
.col.col-12 {
padding-left: 0; /* Do not edit */
padding-right: 0; /* Do not edit */
}
}
/* ------------------------------------------------------------------------------ */
/* Global Typography, Header and Body Font Settings */
#surveyWrapper .sv_main .sv_container {
color: var(--cx-secondary-text-color) !important;
}
#surveyWrapper {
font-family: var(--cx-font-body) !important;
}
#surveyWrapper .sv_main {
font-family: var(--cx-font-body) !important;
}
/* ------------------------------------------------------------------------------ */
/* Body Font Settings by Breakpoint */
#surveyWrapper,
#surveyWrapper p,
#surveyWrapper ul,
#surveyWrapper li{
font-size: var(--cx-body-font-size-desktop) !important;
font-weight: var(--cx-body-font-weight) !important;
line-height: var(--cx-body-font-line-height-desktop) !important;
color: var(--cx-secondary-text-color) !important;
}
@media (max-width: 1199px) {
#surveyWrapper,
#surveyWrapper p,
#surveyWrapper ul,
#surveyWrapper li{
font-size: var(--cx-body-font-size-tablet) !important;
line-height: var(--cx-body-font-line-height-tablet) !important;
color: var(--cx-secondary-text-color) !important;
}
}
@media (max-width: 768px) {
#surveyWrapper,
#surveyWrapper p,
#surveyWrapper ul,
#surveyWrapper li{
font-size: var(--cx-body-font-size-mobile) !important;
line-height: var(--cx-body-font-line-height-mobile) !important;
color: var(--cx-secondary-text-color) !important;
}
}
/* ------------------------------------------------------------------------------ */
/* Form Input and Label Font Settings by Breakpoint */
#surveyWrapper,
#surveyWrapper .sv_main .sv_container,
#surveyWrapper .sv_qstn .checkbox label,
#surveyWrapper .sv_qstn .radio label,
#surveyWrapper .form-check label, /* radios/checkboxes in modals */
#surveyWrapper .sv_q_matrix .sv_q_m_label, /* matrix cell label wrapper */
#surveyWrapper .sv_q_matrix .sv_q_m_label * /* nested spans inside matrix labels */
{
font-size: var(--cx-input-font-size-desktop) !important;
line-height: var(--cx-body-font-line-height-desktop)!important;
font-weight: var(--cx-body-font-weight) !important;
}
@media (max-width: 1199px) {
#surveyWrapper,
#surveyWrapper .sv_main .sv_container,
#surveyWrapper .sv_qstn .checkbox label,
#surveyWrapper .sv_qstn .radio label,
#surveyWrapper .form-check label,
#surveyWrapper .sv_q_matrix .sv_q_m_label,
#surveyWrapper .sv_q_matrix .sv_q_m_label *
{
font-size: var(--cx-input-font-size-tablet) !important;
line-height: var(--cx-body-font-line-height-mobile)!important;
}
}
@media (max-width: 768px) {
#surveyWrapper,
#surveyWrapper .sv_main .sv_container,
#surveyWrapper .sv_qstn .checkbox label,
#surveyWrapper .sv_qstn .radio label,
#surveyWrapper .form-check label,
#surveyWrapper .sv_q_matrix .sv_q_m_label,
#surveyWrapper .sv_q_matrix .sv_q_m_label *
{
font-size: var(--cx-input-font-size-mobile) !important;
line-height: var(--cx-body-font-line-height-mobile)!important;
}
}
/* ------------------------------------------------------------------------------ */
/* Form Header Font Settings by Breakpoint */
#surveyWrapper h1, #surveyWrapper .h1 {
font-size: var(--cx-h1-size-desktop) !important;
font-weight: var(--cx-h1-weight) !important;
font-family: var(--cx-h1-font-family) !important;
color: var(--cx-primary-text-color) !important;
margin-bottom: 20px !important; }
#surveyWrapper h2, #surveyWrapper .h2 {
font-size: var(--cx-h2-size-desktop) !important;
font-weight: var(--cx-h2-weight) !important;
font-family: var(--cx-h2-font-family) !important;
color: var(--cx-primary-text-color) !important;
margin-bottom: 20px !important; }
#surveyWrapper h3, #surveyWrapper .h3 {
font-size: var(--cx-h3-size-desktop) !important;
font-weight: var(--cx-h3-weight) !important;
font-family: var(--cx-h3-font-family) !important;
color: var(--cx-primary-text-color) !important;
margin-bottom: 5px !important; }
#surveyWrapper h4, #surveyWrapper .h4 {
font-size: var(--cx-h4-size-desktop) !important;
font-weight: var(--cx-h4-weight) !important;
font-family: var(--cx-h4-font-family) !important;
color: var(--cx-primary-text-color) !important;
margin-bottom: 20px !important; }
#surveyWrapper h5, #surveyWrapper .h5 {
font-size: var(--cx-h5-size-desktop) !important;
font-weight: var(--cx-h5-weight) !important;
font-family: var(--cx-h5-font-family) !important;
color: var(--cx-primary-text-color) !important;
margin-bottom: 10px !important;
}
@media (max-width: 1199px) {
#surveyWrapper h1, #surveyWrapper .h1 {
font-size: var(--cx-h1-size-tablet) !important;
}
#surveyWrapper h2, #surveyWrapper .h2 {
font-size: var(--cx-h2-size-tablet) !important;
}
#surveyWrapper h3, #surveyWrapper .h3 {
font-size: var(--cx-h3-size-tablet) !important;
}
#surveyWrapper h4, #surveyWrapper .h4 {
font-size: var(--cx-h4-size-tablet) !important;
}
#surveyWrapper h5, #surveyWrapper .h5 {
font-size: var(--cx-h5-size-tablet) !important;
}
}
@media (max-width: 768px) {
#surveyWrapper h1, #surveyWrapper .h1 {
font-size: var(--cx-h1-size-mobile) !important;
}
#surveyWrapper h2, #surveyWrapper .h2 {
font-size: var(--cx-h2-size-mobile) !important;
}
#surveyWrapper h3, #surveyWrapper .h3 {
font-size: var(--cx-h3-size-mobile) !important;
}
#surveyWrapper h4, #surveyWrapper .h4 {
font-size: var(--cx-h4-size-mobile) !important;
}
#surveyWrapper h5, #surveyWrapper .h5 {
font-size: var(--cx-h5-size-mobile) !important;
}
}
/* ------------------------------------------------------------------------------ */
/* Anchor or Link Color Settings and Text Decoration */
#surveyWrapper a {
color: var(--cx-link-color) !important;
text-decoration: var(--cx-link-text-decoration)!important;
text-underline-offset: .15em !important;
}
#surveyWrapper a:hover {
color: var(--cx-link-color-hover) !important;
text-decoration: var(--cx-link-text-decoration-hover)!important;
}
/* ------------------------------------------------------------------------------ */
/* Form Header Logo Position by Breakpoint */
.card-header {
padding: .75rem 1.25rem;
margin-bottom: 0;
background-color: transparent;
border-bottom: 0;
}
.sv_main .sv_container .page-title,
.sv_main .sv_container .page-description,
.sv_main .sv_container .panel-heading.card-header {
padding-left: 18px!important;
padding-right: 18px!important;
}
.panel-heading.card-header {
background-image: var(--cx-logo-url)!important;
background-size: var(--cx-logo-width) var(--cx-logo-height-desktop)!important;
background-repeat: no-repeat;
background-position: var(--cx-logo-pos-desktop)!important;
padding-top: var(--cx-logo-spacing-desktop)!important;
}
@media (max-width: 1199px) {
.panel-heading.card-header {
background-size: var(--cx-logo-width) var(--cx-logo-height-tablet)!important;
background-position: var(--cx-logo-pos-tablet)!important;
padding-top: var(--cx-logo-spacing-tablet)!important;
}
}
@media (max-width: 768px) {
.panel-heading.card-header {
background-size: var(--cx-logo-width) var(--cx-logo-height-mobile)!important;
background-position: var(--cx-logo-pos-mobile)!important;
padding-top: var(--cx-logo-spacing-mobile)!important;
}
}
/* ------------------------------------------------------------------------------ */
/* Form Header Section > Page Title and Page Description Container Width by Breakpoint */
.sv_main .sv_header__text, .sv_header__text {
max-width: var(--cx-form-header-section-width-desktop)!important;
text-align: var(--cx-form-header-section-text-alignment-desktop)!important;
display: inline-block;
vertical-align: top;
}
@media (max-width: 1199px) {
.sv_main .sv_header__text, .sv_header__text {
max-width: var(--cx-form-header-section-width-tablet)!important;
text-align: var(--cx-form-header-section-text-alignment-tablet)!important;
display: inline-block;
vertical-align: top;
}}
@media (max-width: 768px) {
.sv_main .sv_header__text, .sv_header__text {
max-width: var(--cx-form-header-section-width-mobile)!important;
text-align: var(--cx-form-header-section-text-alignment-mobile)!important;
display: inline-block;
vertical-align: top;
}}
/* ------------------------------------------------------------------------------ */
/* Form Title by Breakpoint */
#surveyWrapper .sv_header__text h3 {
font-size: var(--cx-form-title-font-size-desktop) !important;
font-weight: var(--cx-form-title-font-weight) !important;
font-family: var(--cx-font-heading) !important;
color: var(--cx-primary-text-color) !important;
margin: var(--cx-form-title-margin-desktop)!important;
padding-top:10px!important;
}
@media (max-width: 1199px) {
#surveyWrapper .sv_header__text h3 {
font-size: var(--cx-form-title-font-size-tablet) !important;
margin: var(--cx-form-title-margin-tablet)!important;
padding-top:30px!important;
}
}
@media (max-width: 768px) {
#surveyWrapper .sv_header__text h3 {
font-size: var(--cx-form-title-font-size-mobile) !important;
margin: var(--cx-form-title-margin-mobile)!important;
}
}
/* ------------------------------------------------------------------------------ */
/* Form Description by Breakpoint */
#surveyWrapper .sv_header__text h5 {
font-size: var(--cx-form-description-font-size-desktop) !important;
font-weight: var(--cx-form-description-font-weight) !important;
font-family: var(--cx-font-heading) !important;
color: var(--cx-secondary-text-color) !important;
}
@media (max-width: 1199px) {
#surveyWrapper .sv_header__text h5 {
font-size: var(--cx-form-description-font-size-tablet) !important;
}
}
@media (max-width: 768px) {
#surveyWrapper .sv_header__text h5 {
font-size: var(--cx-form-description-font-size-mobile) !important;
}
}
/* ------------------------------------------------------------------------------ */
/* Page Title by Breakpoint */
#surveyWrapper h4.page-title {
font-size: var(--cx-form-page-title-font-size-desktop) !important;
font-weight: var(--cx-form-page-title-font-weight) !important;
font-family: var(--cx-font-heading) !important;
color: var(--cx-primary-text-color) !important;
margin-bottom: 5px !important;
}
@media (max-width: 1199px) {
#surveyWrapper h4.page-title {
font-size: var(--cx-form-page-title-font-size-tablet) !important;
}
}
@media (max-width: 768px) {
#surveyWrapper h4.page-title {
font-size: var(--cx-form-page-title-font-size-mobile) !important;
}
}
/* ------------------------------------------------------------------------------ */
/* Page Description by Breakpoint */
#surveyWrapper .page-description {
font-size: var(--cx-form-page-description-font-size-desktop) !important;
font-weight: var(--cx-form-page-description-font-weight) !important;
font-family: var(--cx-font-body) !important;
color: var(--cx-secondary-text-color) !important;
margin-bottom: 40px !important;
}
@media (max-width: 1199px) {
#surveyWrapper .page-description {
font-size: var(--cx-form-page-description-font-size-tablet) !important;
}
}
@media (max-width: 768px) {
#surveyWrapper .page-description {
font-size: var(--cx-form-page-description-font-size-mobile) !important;
}
}
/* ============================================================================
Primary Button Component
----------------------------------------------------------------------------
Purpose: Styles the main call-to-action buttons across the survey UI.
Scope/Targets:
- .btn-primary, input.btn.btn-primary, a.btn.btn-primary
- Scoped inside #surveyWrapper (and modal equivalents)
============================================================================ */
/* Default State */
:is(#surveyWrapper, .modal-save, .modal-save .modal-content) .btn {
font-weight: var(--cx-button-font-weight) !important;
font-size: var(--cx-button-font-size-desktop) !important;
border-radius: var(--cx-button-border-radius) !important;
padding: var(--cx-button-padding) !important;
line-height: 1 !important;
min-width: var(--cx-button-min-width-desktop) !important;
text-decoration: var(--cx-button-text-decoration)!important;
font-family: var(--cx-font-buttons)!important;
}
:is(#surveyWrapper, .modal-save, .modal-save .modal-content) .btn-primary,
:is(#surveyWrapper, .modal-save, .modal-save .modal-content) input.btn.btn-primary,
:is(#surveyWrapper, .modal-save, .modal-save .modal-content) a.btn.btn-primary {
background-color: var(--cx-button-primary-bg) !important;
color: var(--cx-button-primary-text) !important;
border: var(--cx-button-border-width) solid var(--cx-button-primary-border) !important;
}
/* Hover State */
:is(#surveyWrapper, .modal-save, .modal-save .modal-content) .btn-primary:hover,
:is(#surveyWrapper, .modal-save, .modal-save .modal-content) input.btn.btn-primary:hover,
:is(#surveyWrapper, .modal-save, .modal-save .modal-content) a.btn.btn-primary:hover {
background-color: var(--cx-button-primary-hover-bg) !important;
color: var(--cx-button-primary-hover-text) !important;
border-color: var(--cx-button-primary-hover-border) !important;
text-decoration: var(--cx-button-text-decoration-hover)!important;
}
/* Active State */
:is(#surveyWrapper, .modal-save, .modal-save .modal-content) .btn-primary:active,
:is(#surveyWrapper, .modal-save, .modal-save .modal-content) .btn-primary.active,
:is(#surveyWrapper, .modal-save, .modal-save .modal-content) input.btn.btn-primary:active,
:is(#surveyWrapper, .modal-save, .modal-save .modal-content) a.btn.btn-primary:active {
background-color: var(--cx-button-primary-active-bg) !important;
color: var(--cx-button-primary-active-text) !important;
border-color: var(--cx-button-primary-active-border) !important;
text-decoration: var(--cx-button-text-decoration-hover)!important;
}
/* Focus State */
:is(#surveyWrapper, .modal-save, .modal-save .modal-content) .btn-primary:focus,
:is(#surveyWrapper, .modal-save, .modal-save .modal-content) .btn-primary:focus-visible,
:is(#surveyWrapper, .modal-save, .modal-save .modal-content) input.btn.btn-primary:focus,
:is(#surveyWrapper, .modal-save, .modal-save .modal-content) input.btn.btn-primary:focus-visible,
:is(#surveyWrapper, .modal-save, .modal-save .modal-content) a.btn.btn-primary:focus,
:is(#surveyWrapper, .modal-save, .modal-save .modal-content) a.btn.btn-primary:focus-visible {
background-color: var(--cx-button-primary-focus-bg) !important;
color: var(--cx-button-primary-focus-text) !important;
border-color: var(--cx-button-primary-focus-border) !important;
box-shadow: none !important;
outline: var(--cx-input-outline-width-focus) solid var(--cx-input-boxshadow-color-focus) !important;
outline-offset: var(--cx-input-outline-offset-focus) !important;
text-decoration: var(--cx-button-text-decoration-hover)!important;
}
/* Font Size and Button Width > Tablet Viewports */
@media (max-width: 1199px) {
:is(#surveyWrapper, .modal-save, .modal-save .modal-content) .btn {
font-size: var(--cx-button-font-size-tablet) !important;
min-width: var(--cx-button-min-width-tablet) !important;
}
}
/* Font Size and Button Width > Mobile Viewports */
@media (max-width: 768px) {
:is(#surveyWrapper, .modal-save, .modal-save .modal-content) .btn {
font-size: var(--cx-button-font-size-mobile) !important;
min-width: var(--cx-button-min-width-mobile) !important;
}
}
/* ----------------------------------------------------------------------------
Secondary Button Component
----------------------------------------------------------------------------
Purpose:
Styles non-primary actions (outlined/secondary CTAs) to complement the
primary button while remaining visually distinct.
Scope / Targets:
- .btn-secondary, input.btn.btn-secondary, a.btn.btn-secondary
- .btn.btn-outline-primary (treated as secondary)
- Typically scoped within #surveyWrapper and modal contexts
---------------------------------------------------------------------------- */
/* Default State */
:is(#surveyWrapper, .modal-save, .modal-save .modal-content)
:is(.btn-secondary, .btn.btn-outline-primary,
input.btn.btn-secondary, a.btn.btn-secondary) {
background-color: var(--cx-button-secondary-bg) !important;
color: var(--cx-button-secondary-text) !important;
padding:var(--cx-button-padding)!important;
border: var(--cx-button-border-width) solid var(--cx-button-secondary-border) !important;
text-decoration: var(--cx-button-text-decoration)!important;
font-family: var(--cx-font-buttons)!important;
min-width: var(--cx-button-min-width-desktop) !important;
}
/* Hover State */
:is(#surveyWrapper, .modal-save, .modal-save .modal-content)
:is(.btn-secondary, .btn.btn-outline-primary,
input.btn.btn-secondary, a.btn.btn-secondary):hover {
background-color: var(--cx-button-secondary-hover-bg) !important;
color: var(--cx-button-secondary-hover-text) !important;
border-color: var(--cx-button-secondary-hover-border) !important;
text-decoration: var(--cx-button-text-decoration-hover)!important;
}
/* Active State */
:is(#surveyWrapper, .modal-save, .modal-save .modal-content)
:is(.btn-secondary, .btn.btn-outline-primary,
input.btn.btn-secondary, a.btn.btn-secondary):active,
:is(#surveyWrapper, .modal-save, .modal-save .modal-content)
:is(.btn-secondary, .btn.btn-outline-primary,
input.btn.btn-secondary, a.btn.btn-secondary).active {
background-color: var(--cx-button-secondary-active-bg) !important;
color: var(--cx-button-secondary-active-text) !important;
border-color: var(--cx-button-secondary-active-border) !important;
text-decoration: var(--cx-button-text-decoration-hover)!important;
}
/* Focus State */
:is(#surveyWrapper, .modal-save, .modal-save .modal-content)
:is(.btn-secondary, .btn.btn-outline-primary,
input.btn.btn-secondary, a.btn.btn-secondary):focus,
:is(#surveyWrapper, .modal-save, .modal-save .modal-content)
:is(.btn-secondary, .btn.btn-outline-primary,
input.btn.btn-secondary, a.btn.btn-secondary):focus-visible {
background-color: var(--cx-button-secondary-focus-bg) !important;
color: var(--cx-button-secondary-focus-text) !important;
border-color: var(--cx-button-secondary-focus-border) !important;
box-shadow: none !important;
outline: var(--cx-input-outline-width-focus) solid var(--cx-input-boxshadow-color-focus) !important;
outline-offset: var(--cx-input-outline-offset-focus) !important;
text-decoration: var(--cx-button-text-decoration-hover)!important;
}
:is(#surveyWrapper, .modal-save, .modal-save .modal-content) .btn:focus {
box-shadow: none !important;
}
:is(#surveyWrapper, .modal-save, .modal-save .modal-content)
:is(.btn-secondary, .btn.btn-outline-primary,
input.btn.btn-secondary, a.btn.btn-secondary):focus-within {
background-color: var(--cx-button-secondary-focus-bg) !important;
color: var(--cx-button-secondary-focus-text) !important;
border-color: var(--cx-button-secondary-focus-border) !important;
box-shadow: none !important;
outline: var(--cx-input-outline-width-focus) solid var(--cx-input-boxshadow-color-focus) !important;
outline-offset: var(--cx-input-outline-offset-focus) !important;
}
/* Font Size and Button Width > Tablet Viewports */
@media (max-width: 1199px) {
:is(#surveyWrapper, .modal-save, .modal-save .modal-content)
:is(.btn-secondary, .btn.btn-outline-primary,
input.btn.btn-secondary, a.btn.btn-secondary) {
font-size: var(--cx-button-font-size-tablet) !important;
min-width: var(--cx-button-min-width-tablet) !important;
}
}
/* Font Size and Button Width > Mobile Viewports */
@media (max-width: 768px) {
:is(#surveyWrapper, .modal-save, .modal-save .modal-content)
:is(.btn-secondary, .btn.btn-outline-primary,
input.btn.btn-secondary, a.btn.btn-secondary) {
font-size: var(--cx-button-font-size-mobile) !important;
min-width: var(--cx-button-min-width-mobile) !important;
}
}
/* ----------------------------------------------------------------------------
Rating Button Component
---------------------------------------------------------------------------- */
#surveyWrapper .sv-rating .sv-rating__item:focus,
#surveyWrapper .sv-rating .sv-rating__item:focus-visible,
#surveyWrapper .sv-rating .sv-rating__item:focus-within {
background-color: var(--cx-button-secondary-focus-bg) !important;
color: var(--cx-button-secondary-focus-text) !important;
border-color: var(--cx-button-secondary-focus-border) !important;
box-shadow: none !important;
outline: var(--cx-input-outline-width-focus) solid var(--cx-input-boxshadow-color-focus) !important;
outline-offset: var(--cx-input-outline-offset-focus) !important;
text-decoration: var(--cx-button-text-decoration)!important;
}
#surveyWrapper .sv-rating input[type="radio"]:focus + .sv-rating__item,
#surveyWrapper .sv-rating input[type="radio"]:focus-visible + .sv-rating__item,
#surveyWrapper .sv-rating input[type="radio"]:focus + label.sv-rating__item,
#surveyWrapper .sv-rating input[type="radio"]:focus-visible + label.sv-rating__item {
background-color: var(--cx-button-secondary-focus-bg) !important;
color: var(--cx-button-secondary-focus-text) !important;
border-color: var(--cx-button-secondary-focus-border) !important;
box-shadow: none !important;
outline: var(--cx-input-outline-width-focus) solid var(--cx-input-boxshadow-color-focus) !important;
outline-offset: var(--cx-input-outline-offset-focus) !important;
}
/* ----------------------------------------------------------------------------
Save for Later Button
----------------------------------------------------------------------------
Purpose:
Styles the “Save for later” action, including its left-side icon and the
button’s default/hover/active/focus states.
Scope / Targets:
- .btn-save (and any element also carrying .btn-secondary/.btn-outline-primary)
Icon Color — How to change it:
The icon is injected via a background-image (SVG data URI). To control its color
via tokens, use one of these approaches:
---------------------------------------------------------------------------- */
/* Default State */
:is(#surveyWrapper, .modal-save, .modal-save .modal-content)
:is(.btn-save, .btn.btn-secondary.btn-save, .btn.btn-outline-primary.btn-save) {
border-radius: var(--cx-button-border-radius) !important;
border: var(--cx-button-border-width) solid var(--cx-button-save-border) !important;
font-weight: var(--cx-button-font-weight) !important;
color: var(--cx-button-save-text) !important;
padding:var(--cx-button-padding)!important;
background-color: var(--cx-button-save-bg) !important;
background-repeat: no-repeat !important;
background-position: 12px center !important;
background-size: 20px 20px !important;
text-decoration: var(--cx-button-save-text-decoration) !important;
font-family: var(--cx-font-buttons)!important;
}
/* Hover State */
:is(#surveyWrapper, .modal-save, .modal-save .modal-content)
:is(.btn-save, .btn.btn-secondary.btn-save, .btn.btn-outline-primary.btn-save):hover {
color: var(--cx-button-save-hover-text) !important;
background-color: var(--cx-button-save-hover-bg) !important;
border-color: var(--cx-button-save-hover-border) !important;
text-decoration: var(--cx-button-save-hover-text-decoration) !important;
}
/* Active State */
:is(#surveyWrapper, .modal-save, .modal-save .modal-content)
:is(.btn-save, .btn.btn-secondary.btn-save, .btn.btn-outline-primary.btn-save):active,
:is(#surveyWrapper, .modal-save, .modal-save .modal-content)
:is(.btn-save, .btn.btn-secondary.btn-save, .btn.btn-outline-primary.btn-save).active {
color: var(--cx-button-save-active-text) !important;
background-color: var(--cx-button-save-active-bg) !important;
border-color: var(--cx-button-save-active-border) !important;
}
/* Focus State */
:is(#surveyWrapper, .modal-save, .modal-save .modal-content)
:is(.btn-save, .btn.btn-secondary.btn-save, .btn.btn-outline-primary.btn-save):focus,
:is(#surveyWrapper, .modal-save, .modal-save .modal-content)
:is(.btn-save, .btn.btn-secondary.btn-save, .btn.btn-outline-primary.btn-save):focus-visible {
color: var(--cx-button-save-focus-text) !important;
background-color: var(--cx-button-save-focus-bg) !important;
border-color: var(--cx-button-save-focus-border) !important;
box-shadow: none !important;
outline: var(--cx-input-outline-width-focus) solid var(--cx-input-boxshadow-color-focus) !important;
outline-offset: var(--cx-input-outline-offset-focus) !important;
}
@media (max-width: 768px) {
:is(#surveyWrapper, .modal-save, .modal-save .modal-content)
:is(.btn-save, .btn.btn-secondary.btn-save, .btn.btn-outline-primary.btn-save) {
padding-left: 0px!important;
padding-right:0px!important;
background-image: none !important;
}}
/* ----------------------------------------------------------------------------
Progress Bar Component
---------------------------------------------------------------------------- */
#surveyWrapper .progress {
height: var(--cx-progress-height-desktop)!important;
margin: var(--cx-progress-mb-desktop)!important;
background-color: var(--cx-progress-bg)!important;
font-size: var(--cx-progress-text-size-desktop)!important;
border-radius: var(--cx-progress-outer-radius-desktop)!important;
width: var(--cx-progress-outer-width-desktop)!important;
}
#surveyWrapper .progress-bar {
background-color: var(--cx-progress-fg);
color: var(--cx-progress-text);
border-radius: var(--cx-progress-inner-radius-desktop);
}
@media (max-width: 1199px) { #surveyWrapper .progress {
height: var(--cx-progress-height-tablet)!important;
margin: var(--cx-progress-mb-tablet)!important;
background-color: var(--cx-progress-bg)!important;
font-size: var(--cx-progress-text-size-tablet)!important;
border-radius: var(--cx-progress-outer-radius-tablet)!important;
width: var(--cx-progress-outer-width-tablet)!important;
}
#surveyWrapper .progress-bar {
background-color: var(--cx-progress-fg);
color: var(--cx-progress-text);
border-radius: var(--cx-progress-inner-radius-tablet);
}
}
@media (max-width: 768px) {
#surveyWrapper .progress {
height: var(--cx-progress-height-mobile)!important;
margin: var(--cx-progress-mb-mobile)!important;
background-color: var(--cx-progress-bg)!important;
font-size: var(--cx-progress-text-size-mobile)!important;
border-radius: var(--cx-progress-outer-radius-mobile)!important;
width: var(--cx-progress-outer-width-mobile)!important;
}
#surveyWrapper .progress-bar {
background-color: var(--cx-progress-fg);
color: var(--cx-progress-text);
border-radius: var(--cx-progress-inner-radius-mobile);
}
}
/* ----------------------------------------------------------------------------
Panels Component
---------------------------------------------------------------------------- */
#surveyWrapper .sv_main .sv_p_container {
padding: var(--cx-panel-padding-desktop);
background-color: var(--cx-panel-bg);
border-radius: var(--cx-panel-radius);
border: var(--cx-panel-border-width) solid var(--cx-panel-border-color);
margin: 0 10px 20px;
}
@media (max-width: 1199px) {
#surveyWrapper .sv_main .sv_p_container {
padding: var(--cx-panel-padding-tablet); }
}
@media (max-width: 476px) {
#surveyWrapper .sv_main .sv_p_container {
padding: var(--cx-panel-padding-mobile); }
}
#surveyWrapper .panel-component {
margin-left: -10px;
}
/* Expandable Panel Icon Accordion > Chevron */
#surveyWrapper .sv_p_title .sv_panel_icon::before {
content: "";
display: inline-block;
padding: .5em;
background-repeat: no-repeat;
background-position: center;
background-size: 20px;
background-image: url("data:image/svg+xml;utf8,");
}
/* ----------------------------------------------------------------------------
Matrix Component Table Settings
---------------------------------------------------------------------------- */
#surveyWrapper .table {
color: var(--cx-secondary-text-color);
}
#surveyWrapper .table thead th {
vertical-align: bottom;
border-bottom: 0;
}
#surveyWrapper .table td, #surveyWrapper .table th {
padding: .75rem;
vertical-align: top;
border-top: var(--cx-table-border-width) solid var(--cx-table-border-color);
font-weight: var(--cx-table-header-weight);
}
#surveyWrapper .table tbody+tbody {
border-top: 0;
}
/* ----------------------------------------------------------------------------
Form Control Global Settings
---------------------------------------------------------------------------- */
:is(#surveyWrapper, .modal, .modal-content) .form-control {
min-height: var(--cx-input-min-height-desktop)!important;
max-height: none !important;
padding: var(--cx-input-form-padding)!important;
font-size: var(--cx-input-font-size-desktop)!important;
font-weight: var(--cx-input-font-weight)!important;
color: var(--cx-input-text-color)!important;
background-color: var(--cx-input-bg-color)!important;
border: var(--cx-input-border-width) solid var(--cx-input-border-color)!important;
border-radius: var(--cx-input-border-radius)!important;
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
:is(#surveyWrapper, .modal, .modal-content) .form-control:focus {
border-color: var(--cx-input-border-color-focus)!important;
box-shadow: none !important;
outline: var(--cx-input-outline-width-focus) solid var(--cx-input-boxshadow-color-focus) !important;
outline-offset: var(--cx-input-outline-offset-focus) !important;
}
@media (max-width: 1199px) { #surveyWrapper .form-control {
font-size: var(--cx-input-font-size-tablet)!important;
}
}
@media (max-width: 768px) { #surveyWrapper .form-control {
font-size: var(--cx-input-font-size-mobile)!important;
}
}
.col-form-label {
font-weight: var(--cx-input-label-weight)!important;
color:var(--cx-primary-text-color)!important;
}
/* Date input with calendar icon */
#surveyWrapper .form-control[type="date"] {
padding-right: 0;
background: url("data:image/svg+xml;utf8,") no-repeat right .65rem center / 1rem 1rem;
}
#surveyWrapper .form-control[type="date"]::-webkit-calendar-picker-indicator {
opacity: 0;
width: 1.75rem;
height: 100%;
}
/* ----------------------------------------------------------------------------
Inmage Picker Component
---------------------------------------------------------------------------- */
/* Base */
#surveyWrapper .sv_qstn .sv_q_imgsel label > div {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding: 3px 10px;
border: var(--cx-image-picker-border-width) solid var(--cx-image-picker-border-color);
border-radius: var(--cx-image-picker-radius);
background-color: var(--cx-image-picker-bg);
}
/* When Selected */
#surveyWrapper .sv_main .sv_q_imgsel.checked label > div {
background-color: var(--cx-image-picker-selected-bg);
border-color: var(--cx-image-picker-selected-border);
}
#surveyWrapper .sv_qstn .sv_q_imgsel label {
position: relative;
}
#surveyWrapper .sv_qstn .sv_q_imgsel label:focus-within::after,
#surveyWrapper .sv_qstn .sv_q_imgsel label:has(input:focus-visible)::after {
content: "";
position: absolute;
inset: -3px; /* ring sits outside the tile */
border-radius: calc(var(--cx-image-picker-radius) + 3px);
pointer-events: none;
box-shadow: none !important;
outline: var(--cx-input-outline-width-focus) solid var(--cx-input-boxshadow-color-focus) !important;
outline-offset: var(--cx-input-outline-offset-focus) !important;
}
#surveyWrapper .sv_qstn .sv_q_imgsel label:focus-within > div {
border-color: var(--cx-image-picker-focus-border) !important;
}
/* Remove UA yellow outline on the inputs themselves */
#surveyWrapper .sv_qstn .sv_q_imgsel input[type="radio"]:focus,
#surveyWrapper .sv_qstn .sv_q_imgsel input[type="checkbox"]:focus {
outline: none !important;
}
/* ----------------------------------------------------------------------------
Boolean Component
---------------------------------------------------------------------------- */
/* Base (kept) */
#surveyWrapper .sv-boolean__switch {
background-color: var(--cx-boolean-color-bg) !important;
position: relative; /* anchor for the focus ring */
border-radius: var(--cx-boolean-radius, 9999px); /* used for ring shape */
}
/* Remove UA yellow outline on the actual checkbox */
#surveyWrapper .sv-boolean input[type="checkbox"]:focus {
outline: none !important;
}
/* Focus ring on the switch (keyboard/programmatic) */
#surveyWrapper .sv-boolean:focus-within .sv-boolean__switch::after,
#surveyWrapper .sv-boolean input[type="checkbox"]:focus + .sv-boolean__switch::after,
#surveyWrapper .sv-boolean input[type="checkbox"]:focus-visible + .sv-boolean__switch::after {
content: "";
position: absolute;
inset: -3px;
border-radius: calc(var(--cx-boolean-radius, 9999px) + 3px);
pointer-events: none;
box-shadow: none !important;
outline: var(--cx-input-outline-width-focus) solid var(--cx-input-boxshadow-color-focus) !important;
outline-offset: var(--cx-input-outline-offset-focus) !important;
}
/* Optional: also tint the switch border when focused */
#surveyWrapper .sv-boolean:focus-within .sv-boolean__switch {
box-shadow: none !important;
outline: var(--cx-input-outline-width-focus) solid var(--cx-input-boxshadow-color-focus) !important;
outline-offset: var(--cx-input-outline-offset-focus) !important;
}
/* ----------------------------------------------------------------------------
Ranking Component
---------------------------------------------------------------------------- */
#surveyWrapper .sv-ranking-item__content {
display: inline-block !important;
background-color: var(--cx-ranking-bg) !important;
padding: var(--cx-ranking-padding) !important;
border-radius: var(--cx-ranking-border-radius) !important;
border: var(--cx-ranking-border-width) solid var(--cx-ranking-border-color) !important; /* fixed typo */
color: var(--cx-secondary-text-color) !important;
outline: none;
}
#surveyWrapper .sv-ranking-item__content:focus,
#surveyWrapper .sv-ranking-item__content:focus-visible,
#surveyWrapper .sv-ranking-item:focus-within .sv-ranking-item__content {
border-color: var(--cx-ranking-focus-border-color, #032d60) !important;
box-shadow: none !important;
outline: var(--cx-input-outline-width-focus) solid var(--cx-input-boxshadow-color-focus) !important;
outline-offset: var(--cx-input-outline-offset-focus) !important;
}
#surveyWrapper .sv-ranking-item__index {
display: inline-block !important;
padding: 10px 16px !important;
background: var(--cx-ranking-number-bg) !important;
border-radius: var(--cx-ranking-border-radius) !important;
border: 2px solid transparent !important;
margin-right: 10px !important;
}
#surveyWrapper .sv-ranking--mobile .sv-ranking-item__icon--hover {
visibility: visible !important;
fill: var(--cx-ranking-drag) !important;
}
#surveyWrapper .sv-ranking-item__icon {
visibility: hidden !important;
left: 10px !important;
top: 20px !important;
fill: var(--cx-ranking-drag)!important;
position: absolute !important;
}
/* ----------------------------------------------------------------------------
Alerts Component
---------------------------------------------------------------------------- */
/* Base alert styles for any of the three classes */
:is(#surveyWrapper, .modal, .modal-content) :is(.alert, .alert-danger, .alert-warning) {
position: relative;
padding: var(--cx-alert-padding);
margin-bottom: 1rem;
border: var(--cx-alert-border-width) solid var(--cx-alert-border);
border-radius: var(--cx-alert-radius);
}
/* Shared layout/colour styles for the variant classes */
:is(#surveyWrapper, .modal, .modal-content) :is(.alert-danger, .alert-warning) {
color: var(--cx-alert-text);
background-color: var(--cx-alert-bg);
border-color: var(--cx-alert-border);
display: flex;
justify-content: space-between;
flex-direction: row;
align-items: center;
font-size: var(--cx-alert-font-size);
min-width: 100% !important;
}
/* Responsive behaviour for the variant classes */
@media (max-width: 768px) {
:is(#surveyWrapper, .modal, .modal-content) :is(.alert-danger, .alert-warning) {
flex-direction: column;
row-gap: 15px;
}
}
/* Try again buttons inside alerts | Matrix Dynamic Row Buttons*/
#surveyWrapper .sv_main input[type="button"], #surveyWrapper .sv_main button {
color: var(--cx-button-secondary-text);
background-color: var(--cx-button-secondary-bg);
border: var(--cx-button-border-width) solid var(--cx-button-secondary-border);
border-radius: var(--cx-button-border-radius);
text-decoration: var(--cx-button-text-decoration)!important;
font-family: var(--cx-font-buttons)!important;
}
#surveyWrapper .sv_main input[type="button"], #surveyWrapper .sv_main button:hover {
color: var(--cx-button-secondary-hover-text);
background-color: var(--cx-button-secondary-hover-bg);
border: var(--cx-button-border-width) solid var(--cx-button-secondary-hover-border);
border-radius: var(--cx-button-border-radius);
}
#surveyWrapper .sv_main input[type="button"], #surveyWrapper .sv_main button:active {
color: var(--cx-button-secondary-active-text);
background-color: var(--cx-button-secondary-active-bg);
border: var(--cx-button-border-width) solid var(--cx-button-secondary-active-border);
border-radius: var(--cx-button-border-radius);
}
#surveyWrapper .sv_main input[type="button"], #surveyWrapper .sv_main button:focus {
color: var(--cx-button-secondary-focus-text);
background-color: var(--cx-button-secondary-focus-bg);
border: var(--cx-button-border-width) solid var(--cx-button-secondary-focus-border);
border-radius: var(--cx-button-border-radius);
}
/* ----------------------------------------------------------------------------
File Upload Component
---------------------------------------------------------------------------- */
#surveyWrapper input[type="file"].sv_q_file_input {
background-color:transparent !important;
width:100%!important;
padding:4px!important;
}
#surveyWrapper .sv_q_file_input::file-selector-button {
background-color: var(--cx-button-upload-bg) !important;
color: var(--cx-button-upload-text) !important;
padding: var(--cx-button-upload-padding-desktop)!important;
text-align: center !important;
font-weight: var(--cx-button-font-weight) !important;
font-size: var(--cx-button-font-size-desktop) !important;
border-radius: var(--cx-button-border-radius) !important;
cursor: pointer !important;
text-decoration: var(--cx-button-upload-text-decoration)!important;
border: var(--cx-button-border-width) solid var(--cx-button-upload-border)!important;
min-width: var(--cx-button-upload-width-desktop)!important;
font-family: var(--cx-font-buttons)!important;
}
#surveyWrapper .sv_q_file_input::file-selector-button:hover {
background-color: var(--cx-button-upload-hover-bg) !important;
color: var(--cx-button-upload-hover-text) !important;
text-decoration: var(--cx-button-upload-hover-text-decoration)!important;
border: var(--cx-button-border-width) solid var(--cx-button-upload-hover-border)!important;
}
#surveyWrapper .sv_q_file_input:active::file-selector-button {
background-color: var(--cx-button-upload-active-bg) !important;
color: var(--cx-button-upload-active-text) !important;
border: var(--cx-button-border-width) solid var(--cx-button-upload-active-border)!important;
}
#surveyWrapper .sv_q_file_input:focus::file-selector-button {
background-color: var(--cx-button-upload-focus-bg) !important;
color: var(--cx-button-upload-focus-text) !important;
box-shadow: none !important;
outline: var(--cx-input-outline-width-focus) solid var(--cx-input-boxshadow-color-focus) !important;
outline-offset: var(--cx-input-outline-offset-focus) !important;
}
@media (max-width: 1199px) {
#surveyWrapper .sv_q_file_input::file-selector-button {
padding: var(--cx-button-upload-padding-tablet)!important;
min-width: var(--cx-button-upload-width-tablet)!important;
}
}
@media (max-width: 768px) {
#surveyWrapper .sv_q_file_input::file-selector-button {
padding: var(--cx-button-upload-padding-mobile)!important;
min-width: var(--cx-button-upload-width-mobile)!important;
}
}
/* Removes File Upload Clear Button */
#surveyWrapper button.sv_q_file_remove_button {
display:none!important;
}
/* ----------------------------------------------------------------------------
File Upload Container > Shows when document has been uploaded
---------------------------------------------------------------------------- */
#surveyWrapper .sv_q_file_preview2 svg {
height: 25px;
width: 25px;
fill: var(--cx-upload-documents-close-icon-color)!important;
}
#surveyWrapper .sv_q_icon {
display: flex;
align-items: center;
width: 100%;
text-align: left;
}
#surveyWrapper .sv_q_file_preview2 {
display: flex;
border: var(--cx-upload-documents-border-width) solid var(--cx-upload-documents-border-color)!important;
border-radius: var(--cx-upload-documents-border-radius)!important;
width: var(--cx-upload-documents-box-width-desktop)!important;
padding: var(--cx-upload-documents-box-padding)!important;
background-color: var(--cx-upload-documents-bg)!important;
box-shadow: 4px 2px 22px -7px rgba(0,0,0,.15);
flex-direction: column-reverse;
justify-content: flex-end;
align-items: flex-start;
height: auto!important;
}
#surveyWrapper .sv_q_icon::before {
display: inline-flex;
align-items: center;
justify-content: center;
background-image: none !important;
margin-bottom: 0 !important;
width: 60px;
height: 40px;
content: "\f15b" !important;
font-family: "Font Awesome 6 Free","Font Awesome 5 Free","FontAwesome",sans-serif !important;
font-style: normal !important;
font-weight: var(--cx-upload-documents-icon-weight) !important; /* 900=Solid, 400=Regular */
font-size: var(--cx-upload-documents-icon-size) !important;
color: var(--cx-upload-documents-icon-color) !important;
text-decoration: var(--cx-upload-documents-text-decoration) !important;
}
#surveyWrapper .sv_q_icon a {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: var(--cx-upload-documents-font-size-desktop)!important;
text-decoration:var(--cx-upload-documents-text-decoration)!important;
}
#surveyWrapper .sv_q_icon a:hover {
text-decoration:var(--cx-upload-documents-hover-text-decoration)!important;
}
@media (max-width: 1199px) {
#surveyWrapper .sv_q_icon a {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: var(--cx-upload-documents-font-size-mobile)!important;
text-decoration:var(--cx-upload-documents-text-decoration)!important;
}
#surveyWrapper .sv_q_file_preview2 {
width: var(--cx-upload-documents-box-width-tablet)!important;
}}
@media (max-width: 768px) {
#surveyWrapper .sv_q_icon a {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: var(--cx-upload-documents-font-size-mobile)!important;
}
#surveyWrapper .sv_q_file_preview2 {
width: var(--cx-upload-documents-box-width-mobile)!important;
}}
/* ----------------------------------------------------------------------------
Matrix Dynamic Panel Component > Add and Remove Buttons
---------------------------------------------------------------------------- */
/* Default State*/
#surveyWrapper :is(
input.button.sv-paneldynamic__add-btn.sv-paneldynamic__add-btn--list-mode,
.sv_p_remove_btn
) {
border-radius: var(--cx-button-border-radius) !important;
border-width: var(--cx-button-border-width) !important;
border-style: solid !important;
border-color: var(--cx-button-secondary-border) !important;
font-weight: var(--cx-button-font-weight) !important;
color: var(--cx-button-secondary-text) !important;
background-color: var(--cx-button-secondary-bg) !important;
margin-left:0px!important;
font-family: var(--cx-font-buttons)!important;
}
/* Hover State */
#surveyWrapper :is(
input.button.sv-paneldynamic__add-btn.sv-paneldynamic__add-btn--list-mode,
.sv_p_remove_btn
):hover {
border-color: var(--cx-button-secondary-hover-border) !important;
color: var(--cx-button-secondary-hover-text) !important;
background-color: var(--cx-button-secondary-hover-bg) !important;
}
/* Active State */
#surveyWrapper :is(
input.button.sv-paneldynamic__add-btn.sv-paneldynamic__add-btn--list-mode,
.sv_p_remove_btn
):active,
#surveyWrapper :is(
input.button.sv-paneldynamic__add-btn.sv-paneldynamic__add-btn--list-mode,
.sv_p_remove_btn
).active {
border-color: var(--cx-button-secondary-active-border) !important;
color: var(--cx-button-secondary-active-text) !important;
background-color: var(--cx-button-secondary-active-bg) !important;
}
/* Focus State */
#surveyWrapper :is(
input.button.sv-paneldynamic__add-btn.sv-paneldynamic__add-btn--list-mode,
.sv_p_remove_btn
):focus,
#surveyWrapper :is(
input.button.sv-paneldynamic__add-btn.sv-paneldynamic__add-btn--list-mode,
.sv_p_remove_btn
):focus-visible {
border-color: var(--cx-button-secondary-focus-border) !important;
color: var(--cx-button-secondary-focus-text) !important;
background-color: var(--cx-button-secondary-focus-bg) !important;
box-shadow: none !important;
outline: var(--cx-input-outline-width-focus) solid var(--cx-input-boxshadow-color-focus) !important;
outline-offset: var(--cx-input-outline-offset-focus) !important;
}
/* Remove button left alignment with dynamic panel */
#surveyWrapper .sv_p_remove_btn {
margin-left: 18px !important;
}
/* ----------------------------------------------------------------------------
Signature Pad Component
---------------------------------------------------------------------------- */
/* Clear Button > Default State */
#surveyWrapper .sjs_sp_clear {
border-radius: var(--cx-button-border-radius) !important;
font-weight: var(--cx-button-font-weight) !important;
font-size: var(--cx-button-font-size-desktop) !important;
font-family: var(--cx-font-buttons)!important;
background-color: var(--cx-button-secondary-bg) !important;
color: var(--cx-button-secondary-text) !important;
border: var(--cx-button-border-width) solid var(--cx-button-secondary-border) !important;
cursor: pointer;
outline: none;
}
/* Clear Button > Hover State */
#surveyWrapper .sjs_sp_clear:hover {
background-color: var(--cx-button-secondary-hover-bg) !important;
color: var(--cx-button-secondary-hover-text) !important;
border-color: var(--cx-button-secondary-hover-border) !important;
}
/* Clear Button > Active State */
#surveyWrapper .sjs_sp_clear:active,
#surveyWrapper .sjs_sp_clear.active {
background-color: var(--cx-button-secondary-active-bg) !important;
color: var(--cx-button-secondary-active-text) !important;
border-color: var(--cx-button-secondary-active-border) !important;
}
/* Clear Button > Focus State */
#surveyWrapper .sjs_sp_clear:focus,
#surveyWrapper .sjs_sp_clear:focus-visible {
background-color: var(--cx-button-secondary-focus-bg) !important;
color: var(--cx-button-secondary-focus-text) !important;
border-color: var(--cx-button-secondary-focus-border) !important;
box-shadow: none !important;
outline: var(--cx-input-outline-width-focus) solid var(--cx-input-boxshadow-color-focus) !important;
outline-offset: var(--cx-input-outline-offset-focus) !important;
}
#surveyWrapper canvas {
border: var(--cx-signature-border-width) solid var(--cx-signature-border-color)!important;
border-radius: var(--cx-signature--border-radius)!important;
}
#surveyWrapper .sv_main .sjs_sp_controls {
position: absolute;
left: 10px!important;
bottom: 20px!important;
}
@media (min-width: 768px) {
#surveyWrapper .canvas {
width: 100%;
max-width: 100%;
height: auto; /* preserve aspect ratio if height is flexible */
display: block; /* avoid inline-gap issues */
}
}
/* ----------------------------------------------------------------------------
Checkbox Component and Labels
---------------------------------------------------------------------------- */
/* Checkbox Labels by Breakpoint */
#surveyWrapper .sv_qstn .checkbox label {
line-height: 1.6;
margin: 5px 0;
font-size: var(--cx-input-font-size-desktop);
color: var(--cx-secondary-text-color);
display: flex;
align-items: flex-start;
column-gap: 5px;
}
@media (max-width: 1199px) { #surveyWrapper .sv_qstn .checkbox label {
font-size: var(--cx-input-font-size-tablet); }
}
@media (max-width: 768px) { #surveyWrapper .sv_qstn .checkbox label {
font-size: var(--cx-input-font-size-mobile); }
}
/* Checkbox Input > Size, Radius and Border Color*/
#surveyWrapper .sv_bootstrap_css .sv_qcbc input[type="checkbox"] {
appearance: none;
outline: none;
width: var(--cx-checkbox-size) !important;
height: var(--cx-checkbox-size) !important;
min-width: var(--cx-checkbox-size) !important;
min-height: var(--cx-checkbox-size) !important;
box-sizing: border-box;
margin-top: 2px;
border: var(--cx-checkbox-border-width) solid var(--cx-checkbox-border-color);
border-radius: var(--cx-checkbox-radius);
background: var(--cx-checkbox-bg) !important;
display: inline-grid;
place-content: center;
position: relative;
}
/* Checkbox Input > Font Awesome Tick and Accent Color */
#surveyWrapper .sv_bootstrap_css .sv_qcbc input[type="checkbox"]::after {
font-family: "FontAwesome";
content: "\f00c";
font-size: calc(var(--cx-checkbox-size) * 0.65);
line-height: 1;
color: var(--cx-checkbox-accent-color); /* Color of Tick*/
transform: scale(0);
transition: transform .12s ease-in-out;
pointer-events: none;
}
/* Checkbox Input > Checked State Settings */
#surveyWrapper .sv_bootstrap_css .sv_qcbc input[type="checkbox"]:checked {
background-color: var(--cx-checkbox-bg-checked) !important;
border-color: var(--cx-checkbox-border-checked-color) !important;
}
#surveyWrapper .sv_bootstrap_css .sv_qcbc input[type="checkbox"]:checked::after {
transform: scale(1);
}
/* Checkbox Input > Focus State */
#surveyWrapper .sv_bootstrap_css .sv_qcbc input[type="checkbox"]:focus-visible {
box-shadow: none !important;
outline: var(--cx-input-outline-width-focus) solid var(--cx-input-boxshadow-color-focus) !important;
outline-offset: var(--cx-input-outline-offset-focus) !important;
}
/* ----------------------------------------------------------------------------
Radio Component and Labels
---------------------------------------------------------------------------- */
#surveyWrapper .sv_qcbc input[type="radio"],
#surveyWrapper .form-check input[type="radio"] {
appearance: none;
-webkit-appearance: none; /* Safari */
width: var(--cx-radio-size);
height: var(--cx-radio-size);
border-radius: var(--cx-radio-radius);
border: var(--cx-radio-border-width) solid var(--cx-radio-border-color);
background-color: var(--cx-radio-bg);
position: relative;
display: inline-grid;
place-content: center!important;
align-items: center!important;
justify-content: center!important;
}
/* Radio Input > Font Awesome Tick and Accent Color */
#surveyWrapper .sv_qcbc input[type="radio"]::after,
#surveyWrapper .form-check input[type="radio"]::after {
content: var(--cx-radio-inner-type) !important;
font-family: "Font Awesome 6 Free","Font Awesome 5 Free","FontAwesome",sans-serif !important;
font-weight: 900;
font-size: var(--cx-radio-inner-size-checked);
line-height: 1;
color: var(--cx-radio-inner-accent-color);
transform: scale(0);
transition: transform .12s ease-in-out;
pointer-events: none;
}
/* Radio Input > Checked State Settings */
#surveyWrapper .sv_qcbc input[type="radio"]:checked,
#surveyWrapper .form-check input[type="radio"]:checked {
background-color: var(--cx-radio-bg-checked);
border-color: var(--cx-radio-border-checked-color);
}
#surveyWrapper .sv_qcbc input[type="radio"]:checked::after,
#surveyWrapper .form-check input[type="radio"]:checked::after {
transform: scale(1);
}
/* Radio Input > Focus State Settings */
#surveyWrapper .sv_qcbc input[type="radio"]:focus,
#surveyWrapper .form-check input[type="radio"]:focus,
#surveyWrapper .sv_qcbc input[type="radio"]:focus:not(:focus-visible),
#surveyWrapper .form-check input[type="radio"]:focus:not(:focus-visible) {
outline: none !important;
box-shadow: none !important;
}
#surveyWrapper .sv_qcbc input[type="radio"]:focus-visible,
#surveyWrapper .form-check input[type="radio"]:focus-visible {
box-shadow: none !important;
outline: var(--cx-input-outline-width-focus) solid var(--cx-input-boxshadow-color-focus) !important;
outline-offset: var(--cx-input-outline-offset-focus) !important;
}
/* Radio Input > Label Settings */
#surveyWrapper .sv_qstn .radio label, #surveyWrapper .form-check label {
display: flex;
align-items: center;
column-gap: 5px;
padding: 5px 0 10px 0px;
color: var(--cx-secondary-text-color);
}
/* ----------------------------------------------------------------------------
Radio Buttons inside Modal Component
---------------------------------------------------------------------------- */
/* Row layout: keep input and label separated with gap (prevents overlap/wrapping issues) */
:is(.modal, .modal-content) .form-check {
display: flex;
align-items: center;
gap: 10px; /* controls spacing between radio and label */
padding: 5px 0 0 20px; /* vertical rhythm */
}
/* Optional: ensure label can wrap cleanly without colliding with the input */
:is(.modal, .modal-content) .form-check .form-check-label {
line-height: 1.4;
word-break: normal;
overflow-wrap: anywhere;
}
/* Radio input base */
:is(.modal, .modal-content) .form-check input[type="radio"] {
appearance: none;
width: var(--cx-radio-size);
height: var(--cx-radio-size);
border-radius: var(--cx-radio-radius);
border: var(--cx-radio-border-width) solid var(--cx-radio-border-color, #c9d3e5);
background-color: var(--cx-radio-bg, #ffffff);
position: relative;
display: inline-grid;
place-content: center;
vertical-align: middle;
top:-2px;
}
:is(.modal, .modal-content) .form-check input[type="radio"]:checked {
background-color: var(--cx-radio-bg-checked);
border-color: var(--cx-radio-border-checked-color);
}
:is(.modal, .modal-content) .form-check input[type="radio"]::after {
content: var(--cx-radio-inner-type) !important;
font-family: "Font Awesome 6 Free","Font Awesome 5 Free","FontAwesome",sans-serif !important;
font-weight: 900;
font-size: var(--cx-radio-inner-size-checked);
line-height: 1;
color: var(--cx-radio-inner-accent-color);
transform: scale(0);
transition: transform .12s ease-in-out;
pointer-events: none;
}
:is(.modal, .modal-content) .form-check input[type="radio"]:checked::after {
transform: scale(1);
}
/* Accessible focus ring (keeps Bootstrap shadows out) */
:is(.modal, .modal-content) .form-check input[type="radio"]:focus-visible {
box-shadow: none !important;
outline: var(--cx-input-outline-width-focus) solid var(--cx-input-boxshadow-color-focus) !important;
outline-offset: var(--cx-input-outline-offset-focus) !important;
}
/* If your modal uses .form-check-inline, keep the gap */
:is(.modal, .modal-content) .form-check.form-check-inline {
gap: 10px;
}
/* If a framework adds margin-left to the label, neutralize and let gap handle spacing */
:is(.modal, .modal-content) .form-check .form-check-input + .form-check-label {
margin-left: 0;
}
/* ----------------------------------------------------------------------------
Matrix Single Choice Component
---------------------------------------------------------------------------- */
#surveyWrapper {
--cx-radio-label-gap: 10px; /* spacing token */
--cx-radio-line-height: 1.3;
}
/* Make the label an inline flex row so the control + text stay on one line */
#surveyWrapper .sv_q_matrix .sv_q_m_label {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
gap: var(--cx-radio-label-gap) !important;
line-height: var(--cx-radio-line-height) !important;
min-height: var(--cx-radio-size) !important;
cursor: pointer !important;
padding-inline-start: 0 !important; /* override padding-based spacers */
white-space: nowrap !important; /* prevent wrap under the control; remove if you want wrapping */
max-width: 30px;
margin-left: -10px;
top:-4px;
}
/* Visual radio box (kept in flow) */
#surveyWrapper .sv_q_matrix .sv_q_m_label .circle {
position: relative !important;
inline-size: var(--cx-radio-size) !important;
block-size: var(--cx-radio-size) !important;
flex: 0 0 var(--cx-radio-size) !important;
border-radius: var(--cx-radio-radius) !important;
border: var(--cx-radio-border-width) solid var(--cx-radio-border-color) !important;
background: var(--cx-radio-bg) !important;
margin: 0 !important;
pointer-events: none !important; /* clicks go to the input */
}
/* Radio Input > Checked State Settings */
#surveyWrapper .sv_q_matrix .sv_q_m_label .circle::after {
content: var(--cx-radio-inner-type)!important;
font-family: "FontAwesome"!important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) scale(0) !important;
transform-origin: center !important;
transition: transform .12s ease-in-out !important;
pointer-events: none !important;
font-weight: 900 !important; /* solid */
font-size: var(--cx-radio-inner-size-checked) !important;
line-height: 1 !important;
color: var(--cx-radio-inner-accent-color) !important;
}
#surveyWrapper .sv_q_matrix .sv_q_m_label > input[type="radio"] {
appearance: none !important;
position: absolute !important;
inset: 0 !important;
opacity: 0 !important;
margin: 0 !important;
}
#surveyWrapper .sv_q_matrix .sv_q_m_label > input[type="radio"]:checked ~ .circle {
background: var(--cx-radio-bg-checked) !important;
border-color: var(--cx-radio-border-checked-color) !important;
}
#surveyWrapper .sv_q_matrix .sv_q_m_label > input[type="radio"]:checked ~ .circle::after {
transform: translate(-50%, -50%) scale(1) !important;
}
/* Radio Input > Focus State Settings */
#surveyWrapper .sv_q_matrix .sv_q_m_label > input[type="radio"]:focus-visible ~ .circle {
box-shadow: none !important;
outline: var(--cx-input-outline-width-focus) solid var(--cx-input-boxshadow-color-focus) !important;
outline-offset: var(--cx-input-outline-offset-focus) !important;
}
/* ----------------------------------------------------------------------------
Modal Component
---------------------------------------------------------------------------- */
/* Modal Close X Button */
.close,
.btn-close,
button.bootbox-close-button.close{
appearance: none;
border: 0;
background: transparent;
border-radius: var(--cx-modal-close-radius)!important;
width: 2rem;
height: 2rem;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
color: var(--cx-modal-close-color)!important;
text-shadow: none;
opacity: 1;
}
.close{ float: right; }
.close:focus,
.btn-close:focus{
outline: none !important;
box-shadow: none !important;
}
.close:focus-visible,
.btn-close:focus-visible,
.close:focus-within,
.btn-close:focus-within{
box-shadow: none !important;
outline: var(--cx-focus-width, var(--cx-input-outline-width-focus)) solid
var(--cx-focus-color, var(--cx-input-boxshadow-color-focus)) !important;
outline-offset: var(--cx-focus-offset, var(--cx-input-outline-offset-focus)) !important;
color: var(--cx-modal-close-focus-color, var(--cx-modal-close-color, currentColor));
}
/* Modal Content > Outer Container */
.modal-content {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
pointer-events: auto;
background-color: var(--cx-modal-content-bg)!important;
background-clip: padding-box;
border: var(--cx-modal-content-border-width) solid var(--cx-modal-content-border-color)!important;
border-radius: var(--cx-modal-content-border-radius)!important;
outline: 0;
}
/* Modal Header */
.modal .modal-header > h4.title {
font-size: var(--cx-modal-header-font-size);
font-weight: var(--cx-modal-header-font-weight);
text-transform: capitalize;
}
.modal-save .modal-header {
border-bottom: var(--cx-modal-header-border-bottom-width) solid var(--cx-modal-header-border-bottom-color);
padding: var(--cx-modal-header-padding-desktop);
font-family: var(--cx-font-heading);
color: var(--cx-primary-text-color);
background-color: var(--cx-modal-header-bg);
border-top-left-radius: var(--cx-modal-content-border-radius)!important;
border-top-right-radius: var(--cx-modal-content-border-radius)!important;
}
/* Modal Body */
.modal-body {
position: relative;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: var(--cx-modal-body-padding-desktop)!important;
font-family:var(--cx-font-body)!important;
font-weight: var(--cx-body-font-weight)!important;
color:var(--cx-secondary-text-color)!important;
}
.modal-save .modal-body {
padding: var(--cx-modal-body-padding-desktop)!important;
font-family: var(--cx-font-body)!important;
color: var(--cx-secondary-text-color)!important;
background-color: var(--cx-modal-body-bg)!important;
border-bottom-left-radius: var(--cx-modal-content-border-radius)!important;
border-bottom-right-radius: var(--cx-modal-content-border-radius)!important;
}
/* Modal Footer */
.modal-footer {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: end;
justify-content: flex-end;
padding: var(--cx-modal-footer-padding-desktop)!important;
border-top: var(--cx-modal-footer-border-top-width) solid var(--cx-modal-footer-border-top-color)!important;
border-bottom-right-radius: var(--cx-modal-content-border-radius)!important;
border-bottom-left-radius: var(--cx-modal-content-border-radius)!important;
}
@media (max-width: 1199px) {
.modal-save .modal-header {
padding: var(--cx-modal-header-padding-tablet);
}
}
@media (max-width: 768px) {
.modal-save .modal-header {
padding: var(--cx-modal-header-padding-mobile);
}
}
@media (max-width: 1199px) {
.modal-save .modal-body {
padding: var(--cx-modal-body-padding-tablet); }
}
@media (max-width: 768px) {
.modal-save .modal-body {
padding: var(--cx-modal-body-padding-mobile); }
}
/* Bootbox modal: default button sizing/shape */
.bootbox.modal .btn {
font-weight: var(--cx-button-font-weight) !important;
font-size: var(--cx-button-font-size-desktop) !important;
border-radius: var(--cx-button-border-radius) !important;
padding: 10px 20px !important;
line-height: 1.5rem !important;
min-width: var(--cx-button-min-width-desktop) !important;
}
/* Bootbox modal: primary button (Accept) */
/* Default */
.bootbox.modal .btn.btn-primary.bootbox-accept {
background-color: var(--cx-button-primary-bg) !important;
color: var(--cx-button-primary-text) !important;
border: var(--cx-button-border-width) solid var(--cx-button-primary-border) !important;
}
/* Hover */
.bootbox.modal .btn.btn-primary.bootbox-accept:hover {
background-color: var(--cx-button-primary-hover-bg) !important;
color: var(--cx-button-primary-hover-text) !important;
border-color: var(--cx-button-primary-hover-border) !important;
}
/* Active */
.bootbox.modal .btn.btn-primary.bootbox-accept:active,
.bootbox.modal .btn.btn-primary.bootbox-accept.active {
background-color: var(--cx-button-primary-active-bg) !important;
color: var(--cx-button-primary-active-text) !important;
border-color: var(--cx-button-primary-active-border) !important;
}
/* Focus */
.bootbox.modal .btn.btn-primary.bootbox-accept:focus,
.bootbox.modal .btn.btn-primary.bootbox-accept:focus-visible {
background-color: var(--cx-button-primary-focus-bg) !important;
color: var(--cx-button-primary-focus-text) !important;
border-color: var(--cx-button-primary-focus-border) !important;
box-shadow: none !important;
outline: var(--cx-input-outline-width-focus) solid var(--cx-input-boxshadow-color-focus) !important;
outline-offset: var(--cx-input-outline-offset-focus) !important;
}
@media (max-width: 1199px) {
.bootbox.modal .btn {
font-size: var(--cx-button-font-size-tablet) !important;
}
}
@media (max-width: 768px) {
.bootbox.modal .btn {
font-size: var(--cx-button-font-size-mobile) !important;
}
}
/* ----------------------------------------------------------------------------
Navigation Footer and Button Positioning by Breakpoint
---------------------------------------------------------------------------- */
#surveyWrapper .sv_container .panel-footer.card-footer, .mfa-footer {
padding: var(--cx-navigation-footer-padding-desktop)!important;
margin-top: var(--cx-navigation-footer-margin-desktop)!important;
background-color: transparent;
border-top: var(--cx-navigation-footer-border-top-width-desktop) solid var(--cx-navigation-footer-border-top-color)!important;
row-gap: var(--cx-navigation-footer-row-gap-desktop)!important;
}
@media (max-width: 1199px) {
#surveyWrapper .sv_container .panel-footer.card-footer, .mfa-footer {
padding: var(--cx-navigation-footer-padding-tablet)!important;
margin-top: var(--cx-navigation-footer-margin-tablet)!important;
background-color: transparent;
border-top: var(--cx-navigation-footer-border-top-width-tablet) solid var(--cx-navigation-footer-border-top-color)!important;
row-gap: var(--cx-navigation-footer-row-gap-tablet)!important;
}}
@media (max-width: 768px) {
#surveyWrapper .sv_container .panel-footer.card-footer, .mfa-footer {
padding: var(--cx-navigation-footer-padding-mobile)!important;
margin-top: var(--cx-navigation-footer-margin-mobile)!important;
background-color: transparent;
border-top: var(--cx-navigation-footer-border-top-width-mobile) solid var(--cx-navigation-footer-border-top-color)!important;
row-gap: var(--cx-navigation-footer-row-gap-mobile)!important;
}}
/* ----------------------------------------------------------------------------
Pill Button Component
This CSS turns targeted radio button components into pill selector
Instructions:
To adjust this CSS for other fields:
1. Edit each selector of the form
fieldset.sv_qcbc.form-inline:has(input[name*="Pill_1"])
or
fieldset.sv_qcbc.form-inline:has(input[name*="Pill_2"])
2. Replace "Pill_1" and "Pill_2" with the target field names as defined in your SurveyJS question "name" property.
3. For multiple fields, add more selectors separated by commas:
fieldset.sv_qcbc.form-inline:has(input[name*="YourFieldName1"]),
fieldset.sv_qcbc.form-inline:has(input[name*="YourFieldName2"])
4. This method ensures your styles only affect radio groups containing inputs with those specific field names.
---------------------------------------------------------------------------- */
#surveyWrapper fieldset.sv_qcbc.form-inline:has(input[name*="ContactMethod"]){
display: inline-flex!important;
align-items: stretch;
gap: 2px;
padding: var(--pill-outer-inner-padding)!important; /* Pill wrapper inner padding */
border-radius: var(--pill-border-radius) !important;
background-color: var(--pill-outer-bg) !important;
border: var(--pill-outer-border-width) solid var(--pill-outer-border-color) !important; /* Pill wrapper outer border */
justify-content: space-between;
}
#surveyWrapper fieldset.sv_qcbc.form-inline:has(input[name*="ContactMethod"]):focus {
border: var(--pill-outer-border-width) solid var(--pill-label-border-focus) !important; /* Pill wrapper outer border */
box-shadow: 0 0 0 0 rgba(14, 165, 233, .35);
}
/* Normalise the SurveyJS wrappers and give each pill equal width */
#surveyWrapper fieldset.sv_qcbc.form-inline:has(input[name*="ContactMethod"]) .radio {
margin: 0 !important;
padding: 0 !important;
flex: 1 1 0 !important;
display: flex !important;
}
/* Pill labels centred horizontally and vertically */
#surveyWrapper fieldset.sv_qcbc.form-inline:has(input[name*="ContactMethod"]) .radio label {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
gap: .5rem;
min-height: 2.25rem;
margin: var(--pill-outer-margin)!important;
border-radius: var(--pill-border-radius)!important;
padding: var(--pill-label-button-padding)!important;
background: var(--pill-label-button-bg)!important;
color: var(--pill-label-color)!important;
font-weight: var(--pill-font-weight)!important;
border: var(--pill-label-border-width) solid var(--pill-label-border-color);
cursor: pointer;
line-height: 1 !important;
user-select: none;
transition: background-color .15s ease, color .15s ease,
border-color .15s ease, box-shadow .15s ease, transform .05s;
}
/* Hover State*/
#surveyWrapper fieldset.sv_qcbc.form-inline:has(input[name*="ContactMethod"]) .radio label:hover {
background: var(--pill-label-bg-hover)!important;
border-color: var(--pill-label-border-hover)!important;
color:var(--pill-label-color-hover)!important;
}
/* Selected */
#surveyWrapper fieldset.sv_qcbc.form-inline:has(input[name*="ContactMethod"]) .radio.checked label {
background: var(--pill-label-bg-checked) !important;
color: var(--pill-label-color-checked) !important;
font-weight: var(--pill-label-font-weight-checked) !important;
border-color: var(--pill-label-border-checked) !important;
font-family: var(--cx-font-buttons)!important;
}
/* Focus State (keyboard) */
#surveyWrapper fieldset.sv_qcbc.form-inline:has(input[name*="ContactMethod"]) .radio label:focus-within,
#surveyWrapper fieldset.sv_qcbc.form-inline:has(input[name*="ContactMethod"]) .radio label:focus-visible {
outline: 0 solid transparent;
color: var(--pill-label-color-focus) !important;
background-color: var(--pill-label-bg-focus);
border-color:var(--pill-label-border-focus)!important;
font-weight: var(--pill-label-font-weight-checked) !important;
box-shadow: 0 0 0 0 rgba(14, 165, 233, .35);
}
/* Optional: keep captions on one line */
#surveyWrapper fieldset.sv_qcbc.form-inline:has(input[name*="ContactMethod"]) .radio label > span:last-child {
white-space: nowrap;
}
/* Hide the default radio visuals */
#surveyWrapper fieldset.sv_qcbc.form-inline:has(input[name*="ContactMethod"]) .radio .circle,
#surveyWrapper fieldset.sv_qcbc.form-inline:has(input[name*="ContactMethod"]) .radio .check,
#surveyWrapper fieldset.sv_qcbc.form-inline:has(input[name*="ContactMethod"]) .radio svg {
display: none !important;
}
/* Hide the input but keep it accessible */
#surveyWrapper fieldset.sv_qcbc.form-inline:has(input[name*="ContactMethod"]) .radio input[type="radio"] {
position: absolute;
inset: 0; /* optional: expand hit area to the whole pill */
opacity: 0;
cursor: pointer;
}
/* ------------------ Global Adjustments for CXP Receive ------------------ */
#surveyWrapper .btn:focus { box-shadow: none !important; }
.panel-body.form-completed {
padding: 12px 18px!important;
}
.spinner-wrapper .spinner-border.text-primary {
color: var(--cx-spinner-color)!important;
}
/* -----Global mobile row fix to remove negative margins causing overflow ------ */
@media (max-width: 768px) {
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: 0px;
margin-left: -12px!important;
}
/* Suppress SurveyJS column padding inside this pill field */
#surveyWrapper fieldset.sv_qcbc.form-inline .sv_q_select_column.sv-q-column-3,
#surveyWrapper fieldset.sv_qcbc.form-inline .sv_q_select_column[class*="sv-q-column-"] {
padding-right: 0 !important; /* kill the 1em */
}
/* Optional: normalise the column wrappers so they don't add layout quirks */
#surveyWrapper fieldset.sv_qcbc.form-inline .sv_q_select_column {
display: flex !important; /* let label fill */
flex: 1 1 0 !important; /* equal widths per option */
margin: 0 !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
.small, small {
font-size: 80%;
font-weight: 400;
margin-top: 5px!important;
}
}
/* ========================================================================
Verify Javascript Plugin Component Settings (container-level)
Notes:
- Styles specific to the Verify JavaScript plugin.
- Keep overrides scoped to plugin containers to avoid clashes.
======================================================================== */
/* ------------------------------------------------------------------------------ */
/* Apply Top Margin to Verify Container | Use when Verify is embedded into CX Platform Receive Only */
div#chandler-verify-container {
margin-top: 60px;
}
h2.mb-0{
text-transform: capitalize!important;
}
/* ------------------------------------------------------------------------------ */
/* Remove Chandler Verify Powered by Logo */
.ChandlerVerify-container .panelFooter {
display: none;
}
/* ------------------------------------------------------------------------------ */
/* Document Type Selector */
#surveyWrapper .ChandlerVerify-container #selectDocumentType > .documentType {
padding: var(--cx-verify-document-select-padding)!important;
border-radius: var(--cx-verify-document-select-border-radius)!important;
background-color: var(--cx-verify-document-select-bg)!important;
border: var(--cx-verify-document-select-border-width) solid var(--cx-verify-document-select-border-color)!important;
min-height: 40px;
margin: var(--cx-verify-document-select-margin)!important;
display: flex;
align-items: center;
cursor: pointer;
text-transform: var(--cx-verify-document-select-text-transform)!important;
line-height: 1!important;
}
/* ------------------------------------------------------------------------------ */
/* Document Type Selector > Checkbox */
/* Checkbox Input > Size, Radius and Border Color*/
#surveyWrapper #selectDocumentType .documentType > input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: var(--cx-checkbox-size);
height: var(--cx-checkbox-size);
background: var(--cx-checkbox-bg);
border: var(--cx-checkbox-border-width) solid var(--cx-checkbox-border-color);
border-radius: var(--cx-checkbox-radius);
display: inline-grid;
place-content: center;
position: relative!important;
top: -2px!important;
margin: 0 10px 0 0; /* spacing before label text */
outline: none;
transition:
background var(--cx-checkbox-transition, .16s ease),
border-color var(--cx-checkbox-transition, .16s ease),
box-shadow var(--cx-checkbox-transition, .16s ease),
transform var(--cx-checkbox-transition, .16s ease);
}
/* Checkbox Input > Font Awesome Tick and Accent Color */
#surveyWrapper #selectDocumentType .documentType > input[type="checkbox"]::after {
font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
font-weight: 900;
content: "\f00c";
font-size: calc(var(--cx-checkbox-size) * 0.65)!important;
line-height: 1;
color: var(--cx-checkbox-accent-color)!important;
display: block;
transform: scale(0);
transform-origin: center;
transition: transform .12s ease-in-out;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* Checkbox Input > Checked State Settings */
#surveyWrapper #selectDocumentType .documentType > input[type="checkbox"]:checked {
background: var(--cx-checkbox-bg-checked);
border-color: var(--cx-checkbox-border-checked-color);
}
#surveyWrapper #selectDocumentType .documentType > input[type="checkbox"]:checked::after {
transform: scale(1); /* show icon (no rotation) */
}
/* Checkbox Input > Focus State */
#surveyWrapper #selectDocumentType .documentType > input[type="checkbox"]:hover {
border-color: var(--cx-checkbox-border-hover-color, var(--cx-checkbox-border-color));
}
#surveyWrapper #selectDocumentType .documentType > input[type="checkbox"]:focus-visible {
box-shadow: none !important;
border: var(--cx-input-border-width-focus) solid var(--cx-input-border-color-focus)!important;
outline: var(--cx-input-outline-width-focus) solid var(--cx-input-boxshadow-color-focus) !important;
outline-offset: var(--cx-input-outline-offset-focus) !important;
}
/* ------------------------------------------------------------------------------ */
/* Custom select dropdown selector field */
#surveyWrapper .custom-select {
width: 100%;
min-height: var(--cx-input-min-height-desktop);
padding: var(--cx-input-form-padding);
font-size: var(--cx-input-font-size-desktop);
color: var(--cx-input-text-color);
border: var(--cx-input-border-width) solid var(--cx-input-border-color);
border-radius: var(--cx-input-border-radius);
appearance: none;
background-color: var(--cx-input-bg-color);
}
#surveyWrapper .custom-select:focus {
border-color: var(--cx-input-border-color-focus) !important;
box-shadow: none !important;
outline: var(--cx-input-outline-width-focus) solid var(--cx-input-boxshadow-color-focus) !important;
outline-offset: var(--cx-input-outline-offset-focus) !important;
}
@media (max-width: 1199px){
#surveyWrapper .custom-select {
height: var(--cx-input-min-height-tablet);
}
}
@media (max-width: 768px){
#surveyWrapper .custom-select {
height: var(--cx-input-min-height-mobile);
}
}
/* ------------------------------------------------------------------------------ */
/* Instructions Panel */
#surveyWrapper .ChandlerVerify-container .panelPreview {
background-color: var(--cx-verify-instructions-bg)!important;
padding: var(--cx-verify-instructions-padding-desktop)!important;
border-radius: var(--cx-verify-instructions-radius)!important;
margin: var(--cx-verify-instructions-margin-desktop)!important;
}
#surveyWrapper .ChandlerVerify-container a[data-modal-message] {
cursor: pointer;
color: var(--cx-secondary-text-color);
}
#surveyWrapper .ChandlerVerify-container a[data-modal-message]:hover {
text-decoration: underline;
}
#surveyWrapper .ChandlerVerify-container .panelPreview h3 {
font-size: 1.5rem;
text-align: left;
margin-bottom: 2rem;
}
@media (max-width: 1199px){
#surveyWrapper .ChandlerVerify-container .panelPreview {
background-color: var(--cx-verify-instructions-bg)!important;
padding: var(--cx-verify-instructions-padding-tablet)!important;
border-radius: var(--cx-verify-instructions-radius)!important;
margin: var(--cx-verify-instructions-margin-tablet)!important;
} }
@media (max-width: 768px){
#surveyWrapper .ChandlerVerify-container .panelPreview {
background-color: var(--cx-verify-instructions-bg)!important;
padding: var(--cx-verify-instructions-padding-mobile)!important;
border-radius: var(--cx-verify-instructions-radius)!important;
margin: var(--cx-verify-instructions-margin-mobile)!important;
} }
/* ------------------------------------------------------------------------------ */
/* Input Fields > Field Number */
#surveyWrapper .ChandlerVerify-container span.field-number{
color: var(--cx-verify-field-numbers-color) !important;
font-weight: var(--cx-verify-field-numbers-font-weight)!important;
display:var(--cx-verify-field-numbers-display)!important;
}
/* ------------------------------------------------------------------------------ */
/* Input Fields > Mandatory Asterisk */
#surveyWrapper .ChandlerVerify-container span.required {
margin-left: 3px;
color: var(--cx-verify-field-mandatory-color)!important;
}
/* ------------------------------------------------------------------------------ */
/* Input Fields */
#surveyWrapper .ChandlerVerify-container span.field-name{
font-size: var(--cx-h5-size-desktop) !important;
font-weight: var(--cx-h5-weight) !important;
font-family: var(--cx-h5-font-family) !important;
color: var(--cx-primary-text-color) !important;
margin-bottom: 10px !important;
}
@media (max-width: 1199px){
#surveyWrapper .ChandlerVerify-container span.field-name{
font-size: var(--cx-h5-size-tablet) !important;
} }
@media (max-width: 768px){
#surveyWrapper .ChandlerVerify-container span.field-name{
font-size: var(--cx-h5-size-mobile) !important;
} }
/* ------------------------------------------------------------------------------ */
/* Input Fields > Date Input Field Widths */
@media (max-width: 768px){
#surveyWrapper input#input-ExpiryDate-day, input#input-DateOfBirth-day {
min-width: 20%;
}
input#input-ExpiryDate-month, input#input-DateOfBirth-month {
min-width: 20%;
}
input#input-ExpiryDate-year, input#input-DateOfBirth-year {
min-width: 20%;
}}
/* ------------------------------------------------------------------------------ */
/* Modal in Verify JS Plugin */
#surveyWrapper .ChandlerVerify-container .modal-content-wrapper {
padding: var(--cx-verify-modal-padding);
background-color: var(--cx-verify-modal-bg);
border-radius: var(--cx-verify-modal-radius);
width: 95%;
max-width: 500px;
}
/* ------------------------------------------------------------------------------ */
/* User Consent for KYC Search */
#surveyWrapper .ChandlerVerify-container .ConsentPrompt {
padding: var(--cx-verify-consent-padding)!important;
margin-top: 1rem;
color: var(--cx-secondary-text-color);
background-color: var(--cx-verify-consent-bg);
border: var(--cx-verify-consent-border-width) solid var(--cx-verify-consent-border-color);
border-radius: var(--cx-verify-consent-radius);
display: flex;
align-items: flex-start;
gap: 10px;
}
/* Checkbox */
#surveyWrapper .ConsentPrompt input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: var(--cx-checkbox-size)!important;
height: var(--cx-checkbox-size)!important;
min-width: var(--cx-checkbox-size)!important;
min-height: var(--cx-checkbox-size)!important;
border: var(--cx-checkbox-border-width) solid var(--cx-checkbox-border-color)!important;
border-radius: var(--cx-checkbox-radius)!important;
background-color: var(--cx-checkbox-bg)!important;
display: grid; /* for centring the pseudo-element */
place-items: center; /* centre the icon */
position: relative;
top:7px;
cursor: pointer;
margin: 0; /* reset if needed */
}
/* Check icon: define once, hidden by default */
#surveyWrapper .ConsentPrompt input[type="checkbox"]::after {
font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
font-weight: 900; /* solid style for FA5/6 */
content: "\f00c"; /* check icon */
font-size: calc(var(--cx-checkbox-size) * 0.65);
line-height: 1;
color: var(--cx-checkbox-accent-color);
display: block;
transform: scale(0); /* hidden by default */
transform-origin: center;
transition: transform .12s ease-in-out;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
pointer-events: none;
}
/* Checked visuals + show icon (no rotation) */
#surveyWrapper .ConsentPrompt input[type="checkbox"]:checked {
background-color: var(--cx-checkbox-bg-checked)!important;
border-color: var(--cx-checkbox-border-checked-color)!important;
}
#surveyWrapper .ConsentPrompt input[type="checkbox"]:checked::after {
transform: scale(1);
}
/* (Optional) Hover/Focus */
#surveyWrapper .ConsentPrompt input[type="checkbox"]:hover {
border-color: var(--cx-checkbox-border-hover-color, var(--cx-checkbox-border-color));
}
#surveyWrapper .ConsentPrompt input[type="checkbox"]:focus-visible {
box-shadow: var(--cx-checkbox-focus-ring, 0 0 0 3px rgba(57,192,106,.35));
}
/* (Optional) Disabled */
#surveyWrapper .ConsentPrompt input[type="checkbox"]:disabled {
opacity: .6;
cursor: not-allowed;
}
@media (min-width: 1199px) {
.ChandlerVerify-container .ConsentPrompt {
margin-right: 0px!important;
} }
/* ------------------------------------------------------------------------------ */
/* Verify Navigation Footer Placement */
#surveyWrapper .ChandlerVerify-container .panelButtons {
margin: var(--cx-navigation-footer-margin-desktop)!important;
display: flex;
flex-wrap: wrap;
}
@media (max-width: 1199px) {
#surveyWrapper .ChandlerVerify-container .panelButtons {
margin: var(--cx-navigation-footer-margin-tablet)!important;
display: flex;
flex-wrap: wrap;
} }
@media (max-width: 768px) {
#surveyWrapper .ChandlerVerify-container .panelButtons {
margin: var(--cx-navigation-footer-margin-mobile)!important;
display: flex;
flex-wrap: wrap;
} }
/* ------------------------------------------------------------------------------ */
/* Verify Input Field Validation */
#surveyWrapper .ChandlerVerify-container .validation-label:empty {
visibility: hidden!important; /* keeps layout space */
}
#surveyWrapper .ChandlerVerify-container .validation-label:not(:empty) {
display: inline-block; /* ensure it occupies space when shown */
font-size: var(--cx-alert-font-size)!important;
margin-top: 10px!important;
margin-bottom: 15px!important;
background-color: var(--cx-alert-bg)!important;
color: var(--cx-alert-text)!important;
display: block;
padding: var(--cx-alert-padding)!important;
border: var(--cx-alert-border-width) solid var(--cx-alert-border)!important;
border-radius: var(--cx-alert-radius)!important;
}
/* ------------------------------------------------------------------------------ */
/* Optional: set a token once */
:root {
--cx-form-placeholder-color: #6b7280; /* tweak as needed */
}
/* Global placeholder colour */
.form-control::placeholder {
color: var(--cx-form-placeholder-color);
opacity: 1;
}
/* Older engines (optional) */
.form-control::-webkit-input-placeholder { color: var(--cx-form-placeholder-color); opacity: 1; }
.form-control:-ms-input-placeholder { color: var(--cx-form-placeholder-color); }
.form-control::-ms-input-placeholder { color: var(--cx-form-placeholder-color); }
/* “Position”: move the field’s content (affects both text & placeholder) */
.form-control {
/* adjust to suit your theme */
text-align: left; /* or center / right */
line-height: 1.4;
}
/* If you only want the spacing change on textareas */
textarea.form-control {
padding: 16px 12px; /* extra top room feels nicer for multi-line */
line-height: 1.5;
}
/* ==========================================================================
Custom CSS Section
--------------------------------------------------------------------------
Use this area to add your own custom styles to override or extend the
default styling of the form elements (titles, descriptions, inputs, etc.).
Best Practices:
- Use specific selectors to avoid unintended overrides.
- Where possible, avoid using !important unless necessary.
- Use CSS variables (e.g., --cx-*) for consistent theming.
- Group related styles (e.g., form title, description, inputs) with
clear comments for easier maintenance.
Responsive styles:
- Use media queries to customise styles for mobile and tablet devices.
Purpose:
- This section allows flexibility to tailor the forms visual presentation
to your brand, accessibility standards, or UX/UI requirements.
--------------------------------------------------------------------------
Add your custom CSS below:
========================================================================== */
/* HTML Component */
/* Global kill switch for HTML component */
#lt-accessibility-devtools {
display: none !important;
}
.highlight-container #lt-accessibility-devtools {
display: none !important;
}
/* ------------------------------------------------------------------------------ */
/* HTML Component > Highlight Container and Header Font */
#surveyWrapper .highlight-container {
border-radius: var(--cx-highlight-container-border-radius);
border: var(--cx-highlight-container-border-width, 1px) solid var(--cx-highlight-container-border-color);
background-color: var(--cx-highlight-container-bg);
color: var(--cx-highlight-container-font-color);
padding: var(--cx-highlight-container-padding-desktop);
}
#surveyWrapper .highlight-container-header {
font-size:var(--cx-highlight-container-font-size-desktop)!important;
font-weight:var(--cx-highlight-container-font-weight)!important;
color:var(--cx-highlight-container-font-color)!important;
}
/* Tablet Viewport */
@media (max-width: 1199px) {
#surveyWrapper .highlight-container,
.highlight-container {
padding: var(--cx-highlight-container-padding-tablet)!important;
}
#surveyWrapper .highlight-container-header {
font-size:var(--cx-highlight-container-font-size-tablet)!important;
}
}
/* Mobile */
@media (max-width: 768px) {
#surveyWrapper .highlight-container,
.highlight-container {
padding: var(--cx-highlight-container-padding-mobile)!important;
}
#surveyWrapper .highlight-container-header {
font-size:var(--cx-highlight-container-font-size-mobile)!important;
}
}