/* =========================================================
CTMS GLOBAL VARIABLES
========================================================= */:root {
/* Testing value. Later this can be: var(--e-global-color-primary, #00ADEE); */
--site-primary-override: #00ADEE;
--site-font-family: "DM Sans", sans-serif;--site-heading: #14284B;
--site-text: #1C3144;
--site-muted: #65758B;--site-card-bg: #F3FAFD;
--site-card-border: #E3EEF3;/* Form colours */
--form-bg: #F3F3F3;
--form-text: #374151;
--form-heading: #123B7A;
--form-border: #E2E8F0;
--form-placeholder: #A3AAB5;/* Form field colours */
--form-field-bg: #FFFFFF;
--form-field-border: #D1D5DB;
--form-field-focus-border: #9CA3AF;
}/* =========================================================
GLOBAL FONT
Defined once and applied to CTMS listing, study detail and form.
========================================================= */.rt-embed.rt-container,
.rt-embed.rt-container *,
.rt-embed.rt-container *::before,
.rt-embed.rt-container *::after,
.study-page,
.study-page *,
.study-page *::before,
.study-page *::after,
.osBox.osBox-100.osDetail.osContent,
.osBox.osBox-100.osDetail.osContent *,
.osBox.osBox-100.osDetail.osContent *::before,
.osBox.osBox-100.osDetail.osContent *::after {
font-family: var(--site-font-family) !important;
}/* =========================================================
MAIN CONTAINER
========================================================= */.rt-embed.rt-container {
width: 100% !important;
max-width: 100% !important;
margin: 0 auto !important;
padding: 0 !important;
box-sizing: border-box !important;color: var(--site-text) !important;
}/* =========================================================
LINK COLOUR
========================================================= */.osTitle .rt-home-button {
color: var(--site-primary-override);
}/* =========================================================
SEARCH BAR
========================================================= */.ctms-study-search {
display: flex !important;
align-items: center !important;width: 100% !important;gap: clamp(8px, 0.55vw, 12px) !important;margin: 0 0 clamp(20px, 1.56vw, 30px) !important;
padding: 0 !important;box-sizing: border-box !important;
}/* =========================================================
SEARCH INPUT WRAPPER
========================================================= */.ctms-search-input-wrapper {
position: relative !important;flex: 1 1 auto !important;width: auto !important;
min-width: 0 !important;margin: 0 !important;
padding: 0 !important;box-sizing: border-box !important;
}/* =========================================================
SEARCH ICON
========================================================= */.ctms-search-input-wrapper::before {
content: "" !important;position: absolute !important;top: 50% !important;
left: clamp(14px, 0.9vw, 18px) !important;width: 15px !important;
height: 15px !important;transform: translateY(-50%) !important;background: #8B99A8 !important;-webkit-mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='4.5' fill='none' stroke='black' stroke-width='1.2'/%3E%3Cpath d='M10.5 10.5L14 14' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E")
center / contain no-repeat !important;mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='4.5' fill='none' stroke='black' stroke-width='1.2'/%3E%3Cpath d='M10.5 10.5L14 14' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E")
center / contain no-repeat !important;pointer-events: none !important;z-index: 5 !important;
}/* =========================================================
SEARCH INPUT
========================================================= */.rt-embed.rt-container
.ctms-study-search
input.ctms-study-search-input {
display: block !important;width: 100% !important;
height: clamp(42px, 2.65vw, 52px) !important;
min-height: clamp(42px, 2.65vw, 52px) !important;margin: 0 !important;padding:
0 clamp(40px, 2.8vw, 50px)
0 clamp(38px, 2.6vw, 48px) !important;box-sizing: border-box !important;background: #FFFFFF !important;border: 1px solid #E1E7EC !important;
border-radius: 999px !important;color: var(--site-text) !important;font-family: var(--site-font-family) !important;
font-size: clamp(11px, 0.68vw, 14px) !important;
font-weight: 400 !important;line-height: 1 !important;outline: none !important;box-shadow: none !important;appearance: none !important;
-webkit-appearance: none !important;
}.rt-embed.rt-container
.ctms-study-search
input.ctms-study-search-input::placeholder {
color: #98A5B3 !important;
opacity: 1 !important;
}.rt-embed.rt-container
.ctms-study-search
input.ctms-study-search-input:focus {
border-color: var(--site-primary-override) !important;outline: none !important;box-shadow:
0 0 0 2px
color-mix(
in srgb,
var(--site-primary-override) 12%,
transparent
) !important;
}/* Hide browser's native search X */.rt-embed.rt-container
.ctms-study-search
input.ctms-study-search-input::-webkit-search-cancel-button {
-webkit-appearance: none !important;
appearance: none !important;
}/* =========================================================
CLEAR BUTTON
========================================================= */.ctms-search-clear {
position: absolute !important;top: 50% !important;
right: 14px !important;display: none !important;align-items: center !important;
justify-content: center !important;width: 24px !important;
height: 24px !important;padding: 0 !important;
margin: 0 !important;transform: translateY(-50%) !important;border: 0 !important;
border-radius: 50% !important;background: transparent !important;color: #7A8795 !important;font-family: Arial, sans-serif !important;
font-size: 19px !important;
font-weight: 400 !important;line-height: 1 !important;cursor: pointer !important;z-index: 10 !important;box-shadow: none !important;appearance: none !important;
-webkit-appearance: none !important;
}.ctms-search-clear:hover {
background: #F0F3F5 !important;
color: var(--site-text) !important;
}/* =========================================================
SEARCH BUTTON
========================================================= */.rt-embed.rt-container
.ctms-study-search
button.ctms-study-search-button {
display: inline-flex !important;align-items: center !important;
justify-content: center !important;flex: 0 0 clamp(140px, 10.2vw, 196px) !important;width: clamp(140px, 10.2vw, 196px) !important;height: clamp(42px, 2.65vw, 52px) !important;
min-height: clamp(42px, 2.65vw, 52px) !important;margin: 0 !important;
padding: 0 20px !important;box-sizing: border-box !important;border: 1px solid var(--site-primary-override) !important;
border-radius: 999px !important;background-color: var(--site-primary-override) !important;
background: var(--site-primary-override) !important;color: #FFFFFF !important;font-family: var(--site-font-family) !important;
font-size: clamp(12px, 0.68vw, 14px) !important;
font-weight: 500 !important;line-height: 1 !important;
text-align: center !important;
white-space: nowrap !important;cursor: pointer !important;opacity: 1 !important;
visibility: visible !important;outline: none !important;box-shadow: none !important;appearance: none !important;
-webkit-appearance: none !important;transition:
opacity 0.2s ease,
transform 0.2s ease !important;
}.rt-embed.rt-container
.ctms-study-search
button.ctms-study-search-button:hover {
background-color: var(--site-primary-override) !important;
background: var(--site-primary-override) !important;border-color: var(--site-primary-override) !important;color: #FFFFFF !important;opacity: 0.88 !important;
}/* =========================================================
MAIN HEADER
========================================================= */.rt-embed .osHeader .osTitle {
margin:
0 0 clamp(18px, 1.25vw, 24px) !important;padding: 0 !important;color: var(--site-heading) !important;font-size:
clamp(
22px,
calc(18.85px + 0.817vw),
34px
) !important;font-style: normal !important;
font-weight: 600 !important;line-height: 1.2 !important;letter-spacing: -0.02em !important;
}/* =========================================================
STUDY AREA HEADING
========================================================= */.rt-embed h2.osArea {
margin:
0 0 clamp(12px, 0.83vw, 16px) !important;padding: 0 !important;color: var(--site-heading) !important;font-size:
clamp(
22px,
calc(18.85px + 0.817vw),
34px
) !important;font-style: normal !important;
font-weight: 600 !important;line-height: 1.2 !important;letter-spacing: -0.02em !important;
}/* =========================================================
KEYWORD PILLS
========================================================= */.rt-embed .rt-keyword-container {
display: inline-block !important;width: auto !important;
max-width: 100% !important;float: none !important;margin:
0 6px 8px 0 !important;padding: 0 !important;vertical-align: middle !important;box-sizing: border-box !important;
}.rt-embed .rt-keyword-container p.osStudyItem,
.rt-embed .rt-keyword-container p.keyword-indiv-elem {
display: inline-block !important;width: auto !important;margin: 0 !important;
padding: 0 !important;line-height: 1 !important;
}.rt-embed .rt-keyword {
display: inline-flex !important;align-items: center !important;
justify-content: center !important;min-height:
clamp(28px, 1.46vw, 32px) !important;padding:
5px clamp(12px, 0.68vw, 14px) !important;box-sizing: border-box !important;border:
1px solid
color-mix(
in srgb,
var(--site-primary-override) 40%,
white
) !important;border-radius: 999px !important;background:
color-mix(
in srgb,
var(--site-primary-override) 8%,
white
) !important;color: var(--site-text) !important;font-family: var(--site-font-family) !important;font-size:
clamp(
9px,
calc(8px + 0.16vw),
12px
) !important;font-weight: 400 !important;line-height: 1.2 !important;white-space: nowrap !important;text-decoration: none !important;cursor: pointer !important;
}.rt-embed .rt-keyword:hover {
background: var(--site-primary-override) !important;border-color: var(--site-primary-override) !important;color: #FFFFFF !important;
}/* =========================================================
STUDY CARD
========================================================= */.rt-embed .osListing {
position: relative !important;display: block !important;width: 100% !important;height: auto !important;min-height: 84px !important;margin:
0 0 clamp(8px, 0.63vw, 12px) !important;padding:
clamp(14px, 0.83vw, 16px)
clamp(120px, 9vw, 150px)
clamp(14px, 0.83vw, 16px)
clamp(16px, 1.25vw, 24px) !important;box-sizing: border-box !important;overflow: hidden !important;background: var(--site-card-bg) !important;border:
1px solid var(--site-card-border) !important;border-radius:
clamp(9px, 0.63vw, 12px) !important;
}/* =========================================================
HIDE CTMS THUMBNAIL
========================================================= */.rt-embed .osListing .osThumb {
display: none !important;
}/* =========================================================
STUDY DETAILS
========================================================= */.rt-embed .osListing .osDetail {
width: 100% !important;float: none !important;margin: 0 !important;
padding: 0 !important;box-sizing: border-box !important;
}/* =========================================================
STUDY TITLE
========================================================= */.rt-embed .osListing .osDetail > h2 {
margin:
0 0 4px !important;padding: 0 !important;color: var(--site-text) !important;font-family: var(--site-font-family) !important;font-size:
clamp(
16px,
calc(15px + 0.18vw),
18.407px
) !important;font-style: normal !important;font-weight: 600 !important;line-height:
clamp(
24px,
calc(22px + 0.4vw),
27.61px
) !important;letter-spacing: -0.46px !important;
}/* =========================================================
DESCRIPTION
========================================================= */.rt-embed .osListing .osDetail p {
margin: 0 !important;
padding: 0 !important;color: var(--site-text) !important;font-family: var(--site-font-family) !important;font-size:
clamp(
11px,
calc(10px + 0.16vw),
13px
) !important;font-weight: 400 !important;line-height: 1.4 !important;
}/* Override CTMS inline Verdana */.rt-embed .osListing .osDetail p[style] {
font-family: var(--site-font-family) !important;font-size:
clamp(
11px,
calc(10px + 0.16vw),
13px
) !important;line-height: 1.4 !important;
}.rt-embed .osListing .osDetail p > div {
margin: 0 !important;
padding: 0 !important;font-family: var(--site-font-family) !important;color: var(--site-text) !important;font-size: inherit !important;
line-height: inherit !important;
}.rt-embed .osListing .osDetail p > div p {
margin: 0 !important;
padding: 0 !important;font-family: var(--site-font-family) !important;color: inherit !important;font-size: inherit !important;
line-height: inherit !important;
}/* =========================================================
CTA CONTAINER
========================================================= */.rt-embed .osListing .rt-study-area-buttons {
position: absolute !important;top: 50% !important;
right: clamp(12px, 0.83vw, 16px) !important;display: flex !important;align-items: center !important;width: auto !important;
height: auto !important;margin: 0 !important;
padding: 0 !important;transform: translateY(-50%) !important;z-index: 10 !important;
}/* =========================================================
CTA ARROW
========================================================= */.rt-embed .osListing
.rt-study-area-buttons::after {
content: "" !important;position: absolute !important;top: 50% !important;
right: 13px !important;width: 14px !important;
height: 14px !important;transform: translateY(-50%) !important;background: var(--site-primary-override) !important;-webkit-mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
center / contain no-repeat !important;mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
center / contain no-repeat !important;pointer-events: none !important;
}/* =========================================================
CTA BUTTON
========================================================= */.rt-embed .osListing
input.osButton.osButton-inline {
display: inline-flex !important;align-items: center !important;
justify-content: center !important;width: auto !important;min-width:
clamp(
118px,
7.7vw,
148px
) !important;height:
clamp(
36px,
2.3vw,
44px
) !important;min-height:
clamp(
36px,
2.3vw,
44px
) !important;margin: 0 !important;padding:
0 36px 0 16px !important;box-sizing: border-box !important;border:
0.92px solid
var(--site-primary-override) !important;border-radius: 999px !important;background: #FFFFFF !important;color: var(--site-primary-override) !important;font-family: var(--site-font-family) !important;font-size:
clamp(
12px,
0.625vw,
13px
) !important;font-weight: 400 !important;line-height: 1 !important;cursor: pointer !important;text-shadow: none !important;outline: none !important;box-shadow: none !important;appearance: none !important;
-webkit-appearance: none !important;
}.rt-embed .osListing
input.osButton.osButton-inline:hover {
background:
var(--site-primary-override) !important;border-color:
var(--site-primary-override) !important;color: #FFFFFF !important;
}.rt-embed .osListing
.rt-study-area-buttons:hover::after {
background: #FFFFFF !important;
}/* Remove CTMS inline margin */.rt-embed .osListing
.rt-study-area-buttons input {
margin-right: 0 !important;
}/* =========================================================
NO RESULTS
========================================================= */.ctms-no-results {
display: none !important;width: 100% !important;margin:
0 0 16px !important;padding:
24px 20px !important;box-sizing: border-box !important;background:
var(--site-card-bg) !important;border:
1px solid var(--site-card-border) !important;border-radius:
12px !important;color:
var(--site-muted) !important;font-family:
var(--site-font-family) !important;font-size:
14px !important;line-height:
1.5 !important;text-align:
center !important;
}.ctms-no-results.ctms-show {
display: block !important;
}/* =========================================================
PAGINATION
========================================================= */.ctms-pagination {
display: flex !important;align-items: center !important;
justify-content: center !important;flex-wrap: wrap !important;gap: 6px !important;width: 100% !important;margin:
clamp(20px, 1.56vw, 30px)
0 0 !important;padding: 0 !important;
}.ctms-pagination button {
display: inline-flex !important;align-items: center !important;
justify-content: center !important;width:
clamp(30px, 2vw, 38px) !important;height:
clamp(30px, 2vw, 38px) !important;min-width:
clamp(30px, 2vw, 38px) !important;padding: 0 !important;margin: 0 !important;box-sizing: border-box !important;border:
1px solid var(--site-card-border) !important;border-radius: 999px !important;background: #FFFFFF !important;color: var(--site-text) !important;font-family:
var(--site-font-family) !important;font-size:
clamp(
10px,
0.625vw,
13px
) !important;font-weight: 500 !important;line-height: 1 !important;cursor: pointer !important;opacity: 1 !important;visibility: visible !important;box-shadow: none !important;
}.ctms-pagination button:hover {
border-color:
var(--site-primary-override) !important;color:
var(--site-primary-override) !important;
}.ctms-pagination
button.ctms-page-active {
background:
var(--site-primary-override) !important;border-color:
var(--site-primary-override) !important;color:
#FFFFFF !important;
}.ctms-pagination
button.ctms-page-arrow {
font-size: 16px !important;
}.ctms-pagination
button:disabled {
opacity: 0.35 !important;cursor: default !important;
}/* =========================================================
MOBILE
========================================================= */@media (max-width: 767px) {.ctms-study-search {
gap: 8px !important;
}.ctms-study-search-button {
flex: 0 0 105px !important;width: 105px !important;
}.ctms-study-search-input {
height: 42px !important;
min-height: 42px !important;
}.rt-embed .osHeader .osTitle,
.rt-embed h2.osArea {
font-size:
clamp(
22px,
5.8vw,
30px
) !important;
}.rt-embed .rt-keyword-container {
margin:
0 5px 7px 0 !important;
}.rt-embed .osListing {
min-height: 88px !important;padding:
12px
104px
12px
12px !important;
}.rt-embed .osListing
.osDetail > h2 {
font-size: 15px !important;line-height: 1.35 !important;
}.rt-embed .osListing
.osDetail p {
font-size: 11px !important;
}.rt-embed .osListing
.rt-study-area-buttons {
right: 9px !important;
}.rt-embed .osListing
input.osButton.osButton-inline {
min-width: 94px !important;height: 34px !important;
min-height: 34px !important;padding:
0 30px 0 10px !important;font-size: 11px !important;
}.rt-embed .osListing
.rt-study-area-buttons::after {
right: 10px !important;width: 13px !important;
height: 13px !important;
}
}/* =========================================================
SMALL MOBILE
========================================================= */@media (max-width: 480px) {.ctms-study-search-button {
flex:
0 0 90px !important;width:
90px !important;padding:
0 10px !important;
}.ctms-study-search-input {
padding-left: 38px !important;
padding-right: 38px !important;
}.rt-embed .osListing {
min-height: 86px !important;padding:
12px
96px
12px
12px !important;
}.rt-embed .osListing
input.osButton.osButton-inline {
min-width: 88px !important;height: 33px !important;
min-height: 33px !important;padding:
0 28px 0 9px !important;font-size: 10px !important;
}
}/* =========================================================
STUDY DETAIL — RESEARCH STUDIES TITLE
========================================================= *//* =========================================================
RESEARCH STUDIES TITLE
18px → 24px using clamp
========================================================= */.osTitle,
.osTitle *,
.osTitle *::before,
.osTitle *::after {
font-family: var(--site-font-family) !important;
}.osTitle {
font-size:
clamp(
18px,
calc(16.54px + 0.388vw),
24px
) !important;font-weight:
600 !important;line-height:
1.2 !important;
}/* =========================================================
CTMS
========================================================= */.study-page {
--site-primary:
var(--site-primary-override) !important;
}/* =========================================================
SECTION TITLES
=========================================================
Study Overview
WHO CAN PARTICIPATE
JOURNEY
BENEFITS
FAQ
Existing CTMS content is NOT changed.
Only styling is applied.
========================================================= */.study-page .section-label {
color:
var(--site-primary-override) !important;
}/* =========================================================
PILLS
========================================================= */.study-page .study-tag {color:
var(--site-primary-override) !important;border-color:
var(--site-primary-override) !important;background:
var(--form-bg) !important;
}/* =========================================================
PARTICIPATION BULLETS
========================================================= */.study-page
.participation-list li::before {background:
var(--site-primary-override) !important;
}/* =========================================================
JOURNEY / FLOW
========================================================= *//* Number colour only.
Circle background remains unchanged. */.study-page .journey-number {color:
var(--site-primary-override) !important;
}/* Flow title */.study-page .journey-title {color:
var(--site-primary-override) !important;
}/* Dashed connecting line */.study-page .journey-line {border-top-color:
var(--site-primary-override) !important;
}/* =========================================================
BENEFITS
========================================================= */.study-page .benefit-title {color:
var(--site-primary-override) !important;
}/* Benefit underline, if present */.study-page .benefit-title::after {background:
var(--site-primary-override) !important;
}/* =========================================================
APPLICATION FORM
========================================================= *//* =========================================================
FORM VARIABLES + CONTAINER
========================================================= */.osBox.osBox-100.osDetail.osContent {/* Form width */width:
100% !important;max-width:
100% !important;margin:
0 auto !important;/* Responsive padding */padding:
clamp(
24px,
calc(16px + 0.83vw),
32px
)
clamp(
16px,
calc(12px + 0.42vw),
20px
) !important;/* Requested form background */background:
var(--form-bg) !important;border:
1px solid var(--form-border) !important;border-radius:
clamp(
18px,
1.15vw,
22px
) !important;box-sizing:
border-box !important;color:
var(--form-text) !important;
}/* =========================================================
FORM BOX SIZING
========================================================= */.osBox.osBox-100.osDetail.osContent *,
.osBox.osBox-100.osDetail.osContent *::before,
.osBox.osBox-100.osDetail.osContent *::after {box-sizing:
border-box;
}/* =========================================================
FORM HEADING
=========================================================
Existing CTMS heading/content remains unchanged.
Only styling is applied.
========================================================= */.osBox.osBox-100.osDetail.osContent
> h1 {margin:
0 0 clamp(
16px,
1.25vw,
24px
) !important;padding:
0 !important;color:
var(--form-heading) !important;font-size:
clamp(
28px,
2.5vw,
42px
) !important;font-weight:
600 !important;line-height:
1.2 !important;text-align:
center !important;
}/* =========================================================
FORM PARAGRAPH
========================================================= */.osBox.osBox-100.osDetail.osContent
p {font-size:
clamp(
13px,
calc(11px + 0.26vw),
16px
) !important;font-weight:
400 !important;line-height:
1.5 !important;color:
var(--form-text) !important;
}/* =========================================================
FIELD WRAPPERS
========================================================= */.osBox.osBox-100.osDetail.osContent
> div[style*="margin: 3px"] {margin:
0 0 18px !important;padding:
0 !important;border:
0 !important;
}/* =========================================================
FORM LABELS
========================================================= */.osBox.osBox-100.osDetail.osContent
.osFormLabel.singlePageBlockElem {margin:
0 0 7px !important;padding:
0 !important;color:
var(--form-text) !important;font-size:
clamp(
13px,
calc(11px + 0.26vw),
16px
) !important;font-weight:
400 !important;line-height:
1.3 !important;
}/* =========================================================
FORM VALUE
========================================================= */.osBox.osBox-100.osDetail.osContent
.osFormValue.singlePageBlockElem {width:
100% !important;margin:
0 !important;padding:
0 !important;
}/* =========================================================
TEXT INPUTS
========================================================= */.osBox.osBox-100.osDetail.osContent
input[type="text"],.osBox.osBox-100.osDetail.osContent
input[type="email"],.osBox.osBox-100.osDetail.osContent
input[type="tel"],.osBox.osBox-100.osDetail.osContent
input[type="number"] {width:
100% !important;height:
clamp(
50px,
calc(46px + 0.42vw),
54px
) !important;margin:
0 !important;padding:
14px 16px !important;color:
var(--form-text) !important;background:
var(--form-field-bg) !important;border:
1px solid var(--form-border) !important;border-radius:
8px !important;outline:
none !important;font-size:
clamp(
14px,
calc(12px + 0.21vw),
16px
) !important;font-weight:
400 !important;line-height:
1.5 !important;
}/* =========================================================
PLACEHOLDER
========================================================= */.osBox.osBox-100.osDetail.osContent
input::placeholder {color:
var(--form-placeholder) !important;opacity:
1 !important;
}/* =========================================================
FORM FIELDS — STANDARD COLOUR
========================================================= */.osBox.osBox-100.osDetail.osContent
input[type="text"],
.osBox.osBox-100.osDetail.osContent
input[type="email"],
.osBox.osBox-100.osDetail.osContent
input[type="tel"],
.osBox.osBox-100.osDetail.osContent
input[type="number"],
.osBox.osBox-100.osDetail.osContent
select,
.osBox.osBox-100.osDetail.osContent
textarea {border:
1px solid var(--form-field-border) !important;background:
var(--form-field-bg) !important;outline:
none !important;
}/* =========================================================
FORM FIELDS — FOCUS
========================================================= */.osBox.osBox-100.osDetail.osContent
input[type="text"]:focus,
.osBox.osBox-100.osDetail.osContent
input[type="email"]:focus,
.osBox.osBox-100.osDetail.osContent
input[type="tel"]:focus,
.osBox.osBox-100.osDetail.osContent
input[type="number"]:focus,
.osBox.osBox-100.osDetail.osContent
select:focus,
.osBox.osBox-100.osDetail.osContent
textarea:focus {border-color:
var(--form-field-focus-border) !important;outline:
none !important;box-shadow:
none !important;
}/* =========================================================
FORM FIELDS — ERROR / INVALID
========================================================= */.osBox.osBox-100.osDetail.osContent
input:invalid,
.osBox.osBox-100.osDetail.osContent
input.error,
.osBox.osBox-100.osDetail.osContent
input.invalid,
.osBox.osBox-100.osDetail.osContent
select.error,
.osBox.osBox-100.osDetail.osContent
select.invalid,
.osBox.osBox-100.osDetail.osContent
textarea.error,
.osBox.osBox-100.osDetail.osContent
textarea.invalid {border-color:
var(--form-field-border) !important;box-shadow:
none !important;outline:
none !important;
}/* =========================================================
FIRST NAME / LAST NAME
========================================================= */.osBox.osBox-100.osDetail.osContent
> div:has(input[name="FirstName"]) {display:
inline-block !important;width: 100%;margin-right:
8px !important;vertical-align:
top !important;
}.osBox.osBox-100.osDetail.osContent
> div:has(input[name="LastName"]) {display:
inline-block !important;width: 100%;vertical-align:
top !important;
}/* =========================================================
SELECT
========================================================= */.osBox.osBox-100.osDetail.osContent
select {width:
100% !important;height:
clamp(
50px,
calc(46px + 0.42vw),
54px
) !important;margin:
0 !important;padding:
12px 16px !important;color:
var(--form-text) !important;background:
var(--form-field-bg) !important;border:
1px solid var(--form-border) !important;border-radius:
8px !important;font-size:
clamp(
14px,
calc(12px + 0.21vw),
16px
) !important;font-weight:
400 !important;
}/* =========================================================
DATE OF BIRTH
========================================================= */.osBox.osBox-100.osDetail.osContent
select[data-field="dob_day"] {width: 100%;
margin-bottom: 10px !important;
}.osBox.osBox-100.osDetail.osContent
select[data-field="dob_day"] + select {
width:100%;
margin-bottom: 10px !important;
}.osBox.osBox-100.osDetail.osContent
select[data-field="dob_day"] + select + select {
width: 100%;
margin-bottom: 10px !important;
}/* =========================================================
RADIO
========================================================= */.osBox.osBox-100.osDetail.osContent
input[type="radio"] {width:
16px !important;height:
16px !important;margin:
0 7px 0 0 !important;accent-color:
var(--site-primary-override) !important;vertical-align:
middle !important;
}/* =========================================================
RADIO LABEL
========================================================= */.osBox.osBox-100.osDetail.osContent
input[type="radio"] + label {color:
var(--form-text) !important;font-size:
clamp(
13px,
calc(11px + 0.26vw),
16px
) !important;
}/* =========================================================
CHECKBOX
========================================================= */.osBox.osBox-100.osDetail.osContent
input[type="checkbox"] {width:
16px !important;height:
16px !important;margin:
0 8px 0 0 !important;accent-color:
var(--site-primary-override) !important;vertical-align:
middle !important;
}/* =========================================================
CHECKBOX LABEL
========================================================= */.osBox.osBox-100.osDetail.osContent
input[type="checkbox"] + label {color:
var(--form-text) !important;font-size:
clamp(
13px,
calc(11px + 0.26vw),
16px
) !important;
}/* =========================================================
SEARCH INPUT
========================================================= */.osBox.osBox-100.osDetail.osContent
input[data-field^="search_"] {width:
100% !important;height:
44px !important;margin:
0 0 10px !important;padding:
10px 14px !important;color:
var(--form-text) !important;background:
var(--form-field-bg) !important;border:
1px solid var(--form-border) !important;border-radius:
8px !important;font-size:
clamp(
13px,
calc(11px + 0.26vw),
15px
) !important;
}/* =========================================================
CHECKBOX LIST
========================================================= */.osBox.osBox-100.osDetail.osContent
.osFormValue > div[style*="height: 256px"] {width:
100% !important;height:
256px !important;padding:
0 !important;
}/* =========================================================
CHECKBOX LIST ROWS
========================================================= */.osBox.osBox-100.osDetail.osContent
.osFormValue > div[style*="height: 256px"] p {margin:
0 0 12px !important;padding:
0 !important;font-size:
clamp(
13px,
calc(11px + 0.26vw),
16px
) !important;line-height:
1.5 !important;
}/* =========================================================
CHECKBOX LIST TEXT
========================================================= */.osBox.osBox-100.osDetail.osContent
.osFormValue > div[style*="height: 256px"] label {color:
var(--form-text) !important;font-size:
clamp(
13px,
calc(11px + 0.26vw),
16px
) !important;font-weight:
400 !important;line-height:
1.5 !important;
}/* =========================================================
CONTACT TIME CHECKBOX
========================================================= */.osBox.osBox-100.osDetail.osContent
input[name="_ContactTime[]"] {margin-right:
8px !important;accent-color:
var(--site-primary-override) !important;
}/* =========================================================
CONFIDENTIAL MESSAGE
========================================================= */.osBox.osBox-100.osDetail.osContent
.webint-notice-confidential {margin:
20px 0 !important;padding:
0 !important;color:
#505665 !important;font-size:
clamp(
13px,
calc(11px + 0.26vw),
16px
) !important;line-height:
1.5 !important;
}/* =========================================================
SUBMIT BUTTON
=========================================================
DESIGN ONLY.
The existing value="Submit Application"
remains untouched.
========================================================= */.osBox.osBox-100.osDetail.osContent
.rt-application-button-container {width:
100% !important;margin:
28px 0 0 !important;padding:
0 !important;text-align:
center !important;
}.osBox.osBox-100.osDetail.osContent
input.osButton {width:
50% !important;height: clamp( 32px, 8vw + 10px, 70px ) !important;min-height:
0 !important;margin:
0 !important;padding:
0 30px !important;background:
var(--site-primary-override) !important;color:
#FFFFFF !important;border:
none !important;border-radius:
999px !important;/* 12px minimum → 18px maximum */font-size:
clamp(
12px,
1.55vw,
18px
) !important;font-weight:
400 !important;line-height:
1 !important;text-align:
center !important;box-shadow:
none !important;cursor:
pointer !important;
}/* =========================================================
SUBMIT BUTTON HOVER
========================================================= */.osBox.osBox-100.osDetail.osContent
input.osButton:hover {background:
var(--site-primary-override) !important;color:
#FFFFFF !important;border:
none !important;box-shadow:
none !important;
}/* =========================================================
MOBILE
========================================================= */@media (max-width: 767px) {.osBox.osBox-100.osDetail.osContent {padding:
24px 16px !important;border-radius:
18px !important;
}/* First / Last name become full width */.osBox.osBox-100.osDetail.osContent
> div:has(input[name="FirstName"]),.osBox.osBox-100.osDetail.osContent
> div:has(input[name="LastName"]) {display:
block !important;width:
100% !important;margin-left:
0 !important;margin-right:
0 !important;
}/* Inputs */.osBox.osBox-100.osDetail.osContent
input[type="text"],.osBox.osBox-100.osDetail.osContent
input[type="email"],.osBox.osBox-100.osDetail.osContent
input[type="tel"],.osBox.osBox-100.osDetail.osContent
input[type="number"],.osBox.osBox-100.osDetail.osContent
select {height:
52px !important;
}/* Submit button */.osBox.osBox-100.osDetail.osContent
input.osButton {width:
100% !important;height:
64px !important;min-height:
0 !important;padding:
0 24px !important;border-radius:
999px !important;font-size:
clamp(
12px,
5vw,
18px
) !important;
}}/* =========================================================
375px - 400px
========================================================= */@media (min-width: 375px) and (max-width: 400px) {.osBox.osBox-100.osDetail.osContent {padding:
22px 14px !important;
}}/* =========================================================
PRIMARY-COLOUR DEPENDENT FORM BACKGROUND
If primary colour is #FB3231, form background becomes #F3F3F3.
Otherwise the default --form-bg value is used.
========================================================= */:root.ctms-primary-red {
--form-bg: #F3F3F3;
}
(function () {/* =====================================================
PRIMARY-COLOUR DEPENDENT FORM BACKGROUND
=====================================================
Testing primary colour is #00ADEE.
If the primary colour becomes #FB3231, the form
background is changed to #F3F3F3 automatically.
*/function updatePrimaryDependentStyles() {const primary =
getComputedStyle(document.documentElement)
.getPropertyValue('--site-primary-override')
.trim();const probe = document.createElement('span');probe.style.color = primary;
probe.style.display = 'none';document.body.appendChild(probe);const resolvedPrimary =
getComputedStyle(probe).color;probe.remove();const isRedPrimary =
resolvedPrimary === 'rgb(251, 50, 49)';document.documentElement.classList.toggle(
'ctms-primary-red',
isRedPrimary
);
}/* =====================================================
SETTINGS
===================================================== */const ITEMS_PER_PAGE = 8;/* =====================================================
INITIALISE
===================================================== */updatePrimaryDependentStyles();function initialiseCTMSStudyList() {const container =
document.querySelector(
'.rt-embed.rt-container'
);if (!container) {
return false;
}const listings =
container.querySelectorAll(
'.osListing'
);if (!listings.length) {
return false;
}/*
* Prevent duplicate initialisation.
*/if (
container.dataset.ctmsEnhanced === 'true'
) {
return true;
}container.dataset.ctmsEnhanced =
'true';/* =================================================
SEARCH BAR
================================================= */const searchWrapper =
document.createElement(
'div'
);searchWrapper.className =
'ctms-study-search';const inputWrapper =
document.createElement(
'div'
);inputWrapper.className =
'ctms-search-input-wrapper';/* Search input */const searchInput =
document.createElement(
'input'
);searchInput.type =
'search';searchInput.className =
'ctms-study-search-input';searchInput.placeholder =
'Search study...';searchInput.setAttribute(
'aria-label',
'Search study title'
);/* Clear button */const clearButton =
document.createElement(
'button'
);clearButton.type =
'button';clearButton.className =
'ctms-search-clear';clearButton.innerHTML =
'×';clearButton.setAttribute(
'aria-label',
'Clear search'
);inputWrapper.appendChild(
searchInput
);inputWrapper.appendChild(
clearButton
);/* Search button */const searchButton =
document.createElement(
'button'
);searchButton.type =
'button';searchButton.className =
'ctms-study-search-button';searchButton.textContent =
'Search';searchWrapper.appendChild(
inputWrapper
);searchWrapper.appendChild(
searchButton
);/* =================================================
INSERT SEARCH BAR
================================================= */const header =
container.querySelector(
'.osHeader'
);if (header) {header.parentNode.insertBefore(
searchWrapper,
header
);} else {container.prepend(
searchWrapper
);
}/* =================================================
NO RESULTS
================================================= */const noResults =
document.createElement(
'div'
);noResults.className =
'ctms-no-results';noResults.textContent =
'No studies found matching your search.';/* =================================================
PAGINATION
================================================= */const pagination =
document.createElement(
'div'
);pagination.className =
'ctms-pagination';const listingParent =
listings[0].parentNode;listingParent.appendChild(
noResults
);listingParent.appendChild(
pagination
);/* =================================================
STATE
================================================= */let currentPage = 1;let currentSearch = '';/* =================================================
STUDY TITLE
================================================= */function getStudyTitle(
listing
) {const title =
listing.querySelector(
'.osDetail > h2'
);if (!title) {
return '';
}return title.textContent
.replace(
/\s+/g,
' '
)
.trim()
.toLowerCase();
}/* =================================================
FILTER STUDIES
================================================= */function getFilteredListings() {return Array
.from(listings)
.filter(
function (listing) {const title =
getStudyTitle(
listing
);/*
* No search =
* show every study.
*/if (
currentSearch === ''
) {return true;
}/*
* Search ONLY
* study title.
*/return title.indexOf(
currentSearch
) !== -1;
}
);
}/* =================================================
CLEAR SEARCH ICON
================================================= */function updateClearButton() {if (
searchInput.value.trim() !== ''
) {clearButton.style.setProperty(
'display',
'inline-flex',
'important'
);} else {clearButton.style.setProperty(
'display',
'none',
'important'
);
}
}/* =================================================
PAGINATION
================================================= */function renderPagination(
totalPages
) {pagination.innerHTML =
'';if (
totalPages 1
) {currentPage--;renderStudies();
}
}
);pagination.appendChild(
previousButton
);/* Page numbers */for (
let page = 1;
page <= totalPages;
page++
) {const pageButton =
document.createElement(
'button'
);pageButton.type =
'button';pageButton.textContent =
page;if (
page === currentPage
) {pageButton.classList.add(
'ctms-page-active'
);
}pageButton.addEventListener(
'click',
function () {currentPage =
page;renderStudies();
}
);pagination.appendChild(
pageButton
);
}/* Next */const nextButton =
document.createElement(
'button'
);nextButton.type =
'button';nextButton.className =
'ctms-page-arrow';nextButton.innerHTML =
'›';nextButton.disabled =
currentPage === totalPages;nextButton.addEventListener(
'click',
function () {if (
currentPage totalPages
) {currentPage =
totalPages;
}/*
* Calculate current range.
*/const startIndex =
(
currentPage - 1
) *
ITEMS_PER_PAGE;const endIndex =
startIndex +
ITEMS_PER_PAGE;/*
* Show only the
* current 8 studies.
*/filteredListings
.slice(
startIndex,
endIndex
)
.forEach(
function (listing) {listing.style.setProperty(
'display',
'block',
'important'
);
}
);/*
* Update pagination.
*/renderPagination(
totalPages
);
}/* =================================================
PERFORM SEARCH
================================================= */function performSearch() {currentSearch =
searchInput.value
.trim()
.toLowerCase();/*
* New search always
* starts from page 1.
*/currentPage = 1;renderStudies();
}/* =================================================
SEARCH BUTTON CLICK
================================================= */searchButton.addEventListener(
'click',
function () {performSearch();
}
);/* =================================================
ENTER KEY
================================================= */searchInput.addEventListener(
'keydown',
function (event) {if (
event.key === 'Enter'
) {event.preventDefault();performSearch();
}
}
);/* =================================================
INPUT CHANGE
================================================= */searchInput.addEventListener(
'input',
function () {updateClearButton();
}
);/* =================================================
CLEAR SEARCH
================================================= */clearButton.addEventListener(
'click',
function () {searchInput.value =
'';currentSearch =
'';currentPage =
1;updateClearButton();renderStudies();/*
* Put focus back into
* the search field.
*/searchInput.focus();
}
);/* =================================================
INITIAL RENDER
================================================= */updateClearButton();renderStudies();return true;
}/* =====================================================
INITIAL ATTEMPT
===================================================== */if (
initialiseCTMSStudyList()
) {return;
}/* =====================================================
CTMS DYNAMIC CONTENT
===================================================== */const observer =
new MutationObserver(
function () {if (
initialiseCTMSStudyList()
) {observer.disconnect();
}
}
);observer.observe(
document.body,
{
childList: true,
subtree: true
}
);/* =====================================================
STOP OBSERVER AFTER 30 SECONDS
===================================================== */setTimeout(
function () {observer.disconnect();},
30000
);})();
