/******************
User custom CSS
---------------
In this file you can add your own custom CSS
It will be loaded last, so you can override any other property.
Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/
:root {
--bs-blue: #0d6efd;
--bs-indigo: #6610f2;
--bs-purple: #6f42c1;
--bs-pink: #d63384;
--bs-red: #dc3545;
--bs-orange: #FFBA68;
--bs-yellow: #ffc107;
--bs-green: #198754;
--bs-teal: #20c997;
--bs-cyan: #0dcaf0;
--bs-white: #fff;
--bs-gray: #6c757d;
--bs-gray-dark: #343a40;
--bs-gray-100: #f8f9fa;
--bs-gray-200: #e9ecef;
--bs-gray-300: #dee2e6;
--bs-gray-400: #ced4da;
--bs-gray-500: #adb5bd;
--bs-gray-600: #6c757d;
--bs-gray-700: #495057;
--bs-gray-800: #343a40;
--bs-gray-900: #212529;
--bs-primary: #66FFCC;
--bs-secondary: #8380FF;
--bs-success: #4DD753;
--bs-danger: #FF515F;
--bs-warning: #FFE046;
--bs-info: #8146F6;
--bs-light: #EEEFF7;
--bs-dark: #1E1E1E;
--bs-black60: #666666;
--bs-cancel: #9094A7;
--bs-primary-rgb: 102, 255, 204;
--bs-secondary-rgb: 144, 148, 167;
--bs-success-rgb: 77, 215, 83;
--bs-danger-rgb: 255, 81, 95;
--bs-warning-rgb: 255, 224, 70;
--bs-info-rgb: 129, 70, 246;
--bs-light-rgb: 238, 239, 247;
--bs-dark-rgb: 30, 30, 30;
--bs-black60-rgb: 102, 102, 102;
--bs-cancel-rgb: 144, 148, 167;
--bs-white-rgb: 255, 255, 255;
--bs-black-rgb: 0, 0, 0;
--bs-body-color-rgb: 33, 37, 41;
--bs-body-bg-rgb: 255, 255, 255;
--bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
--bs-body-font-family: var(--bs-font-sans-serif);
--bs-body-font-size: 1.14rem;
--bs-body-font-weight: 400;
--bs-body-line-height: 1.5;
--bs-body-color: #212529;
--bs-body-bg: #fff;
}
/*
Checkmk UX Research: public survey list (dark).
LimeSurvey loads this file only on the survey list page, so nothing here
reaches the survey pages. Colors and sizes are taken from the
Checkmk UI Component Library tokens (dark theme).
*/
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../files/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../files/Inter-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../files/Inter-Bold.woff2") format("woff2"); }
body.ckux-page {
/* Checkmk tokens */
--ck-green-20: rgb(147 234 211);
--ck-green-40: rgb(68 218 179);
--ck-green-50: rgb(21 209 160);
--ck-green-90: rgb(9 88 67);
--ck-yellow-50: rgb(255 215 3);
--ck-grey-0: rgb(251 251 254);
--ck-grey-60: rgb(220 220 224);
--ck-grey-80: rgb(174 174 183);
--ck-grey-90: rgb(147 147 159);
--ck-night-40: rgb(62 74 91);
--ck-night-50: rgb(48 57 70);
--ck-night-60: rgb(37 44 54);
--ck-night-80: rgb(32 39 46);
--ck-night-90: rgb(28 34 40);
--ck-night-100: rgb(15 18 21);
--ck-radius: 4px;
--ck-font: "Inter", Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0 !important;
min-height: 100vh;
background: var(--ck-night-90) !important;
color: var(--ck-grey-0);
font-family: var(--ck-font);
font-size: 14px;
line-height: 1.5;
color-scheme: dark;
}
body.ckux-page ::selection { background: var(--ck-green-90); color: var(--ck-grey-0); }
body.ckux-page a { color: var(--ck-green-40); text-underline-offset: 2px; }
body.ckux-page a:hover { color: var(--ck-green-20); }
body.ckux-page a:focus-visible,
body.ckux-page .ckux-btn:focus-visible {
outline: 2px solid var(--ck-green-50);
outline-offset: 2px;
border-radius: 2px;
}
.ckux-shell { min-height: 100vh; display: flex; flex-direction: column; }
.ckux-wrap { max-width: 1120px; margin: 0 auto; padding-left: 24px; padding-right: 24px; box-sizing: border-box; }
/* Brand lockup (top of hero) */
.ckux-hero__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.ckux-page .ckux-brand { display: inline-flex; align-items: center; gap: 20px; color: var(--ck-grey-0); text-decoration: none; }
.ckux-page .ckux-brand:hover { color: var(--ck-grey-0); }
.ckux-page .ckux-brand__logo { display: block; height: 64px; width: auto; max-width: none; }
.ckux-brand__wordmark { font-size: 32px; font-weight: 700; }
.ckux-brand__divider { width: 1px; height: 44px; background: var(--ck-night-40); }
.ckux-brand__name { font-size: 22px; font-weight: 600; }
.ckux-lang select {
background: var(--ck-night-80);
color: var(--ck-grey-0);
border: 1px solid var(--ck-night-50);
border-radius: var(--ck-radius);
height: 32px;
padding: 0 8px;
font: inherit;
}
/* Hero with status grid */
.ckux-hero { position: relative; overflow: hidden; background: var(--ck-night-90); border-bottom: 1px solid var(--ck-night-60); }
.ckux-hero__grid { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.ckux-hero__inner { position: relative; display: flex; flex-direction: column; gap: 12px; padding-top: 40px; padding-bottom: 56px; }
.ckux-hero__title { margin: 0; max-width: 720px; font-family: var(--ck-font); font-size: 32px; line-height: 1.2; font-weight: 700; color: var(--ck-grey-0); text-wrap: balance; }
.ckux-hero__lead { margin: 0; max-width: 64ch; font-size: 16px; color: var(--ck-grey-60); }
/* Survey cards */
.ckux-main { flex: 1 0 auto; }
.ckux-main > .ckux-wrap { display: flex; flex-direction: column; gap: 16px; padding-top: 32px; padding-bottom: 64px; }
.ckux-section-title { margin: 0; font-family: var(--ck-font); font-size: 20px; font-weight: 600; color: var(--ck-grey-0); }
/* Stacked list: one survey per row, same shape for 1 to 5 surveys */
.ckux-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
/* Card = one link: title on top, quiet "Start survey ->" cue below. No divider, no shadow. */
.ckux-page .ckux-card {
flex: none;
width: 100%;
min-width: 0;
box-sizing: border-box;
display: flex;
background: var(--ck-night-80);
border: 1px solid var(--ck-night-50);
border-radius: var(--ck-radius);
box-shadow: inset 0 3px 0 0 transparent;
transition: background-color 150ms ease-out, border-color 150ms ease-out, box-shadow 150ms ease-out;
}
.ckux-page .ckux-card__link {
flex: 1;
display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 24px;
min-height: 72px; box-sizing: border-box;
padding: 18px 24px;
color: var(--ck-grey-0);
text-decoration: none;
border-radius: var(--ck-radius);
}
.ckux-page .ckux-card__title {
margin: 0;
font-family: var(--ck-font); font-size: 17px; font-weight: 600; line-height: 1.35;
color: var(--ck-grey-0);
flex: 1 1 auto; min-width: 0;
text-wrap: pretty; overflow-wrap: anywhere;
}
.ckux-page .ckux-card__cta {
flex: none;
display: inline-flex; align-items: center; gap: 6px;
white-space: nowrap;
font-size: 14px; font-weight: 600;
color: var(--ck-grey-60);
transition: color 150ms ease-out;
}
.ckux-page .ckux-card__cta-text { text-underline-offset: 2px; }
.ckux-page .ckux-card__arrow { flex: none; transition: transform 150ms ease-out; }
/* Hover / keyboard focus: green top edge (as on the welcome card), one step lighter surface,
green underlined cue, arrow nudges right. No lift, scale or shadow. */
.ckux-page .ckux-card:hover,
.ckux-page .ckux-card:focus-within {
background: rgb(38 46 54); /* midnight-grey-70 */
border-color: var(--ck-night-40);
box-shadow: inset 0 3px 0 0 var(--ck-green-50);
}
.ckux-page .ckux-card:hover .ckux-card__cta,
.ckux-page .ckux-card:focus-within .ckux-card__cta { color: var(--ck-green-40); }
.ckux-page .ckux-card:hover .ckux-card__cta-text,
.ckux-page .ckux-card:focus-within .ckux-card__cta-text { text-decoration: underline; }
.ckux-page .ckux-card:hover .ckux-card__arrow,
.ckux-page .ckux-card:focus-within .ckux-card__arrow { transform: translateX(4px); }
.ckux-page .ckux-card__link:focus-visible { outline: 2px solid var(--ck-green-50); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
.ckux-page .ckux-card, .ckux-page .ckux-card__cta, .ckux-page .ckux-card__arrow { transition: none; }
.ckux-page .ckux-card:hover .ckux-card__arrow,
.ckux-page .ckux-card:focus-within .ckux-card__arrow { transform: none; }
}
/* Buttons (rebuilt from CmkButton) */
.ckux-page .ckux-btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 32px;
padding: 0 12px;
border-radius: var(--ck-radius);
font-family: var(--ck-font);
font-size: 12px;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
transition: background-color 120ms ease-out;
}
.ckux-page .ckux-btn--primary { background: var(--ck-green-50); border: 1px solid var(--ck-green-50); color: rgb(0 0 0); }
.ckux-page .ckux-btn--primary:hover { background: color-mix(in srgb, var(--ck-green-50) 70%, white 30%); color: rgb(0 0 0); }
.ckux-page .ckux-btn--secondary { background: var(--ck-night-100); border: 1px solid var(--ck-green-50); color: var(--ck-grey-0); }
.ckux-page .ckux-btn--secondary:hover { background: var(--ck-night-60); color: var(--ck-grey-0); }
/* Empty state */
.ckux-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 40px 24px;
text-align: center;
background: var(--ck-night-80);
border: 1px solid var(--ck-night-50);
border-radius: var(--ck-radius);
}
.ckux-empty__title { margin: 0; font-family: var(--ck-font); font-size: 16px; font-weight: 600; color: var(--ck-grey-0); }
.ckux-empty__text { margin: 0 0 8px; max-width: 52ch; color: var(--ck-grey-80); }
/* Footer */
.ckux-footer { background: var(--ck-night-100); border-top: 1px solid var(--ck-night-60); font-size: 12px; color: var(--ck-grey-80); }
.ckux-footer > .ckux-wrap { padding-top: 20px; padding-bottom: 20px; }
@media (max-width: 600px) {
/* phones: cue below the title */
.ckux-page .ckux-card__link { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 18px; }
.ckux-hero__inner { padding-top: 24px; padding-bottom: 40px; }
.ckux-hero__top { margin-bottom: 20px; }
.ckux-page .ckux-brand__logo { height: 44px; }
.ckux-brand__divider { height: 32px; }
.ckux-brand__name { font-size: 18px; }
.ckux-hero__title { font-size: 26px; }
.ckux-hero__lead { font-size: 15px; }
}
/*
Checkmk UX Research: survey welcome screen and completed page (dark, "card continues").
Paste at the END of css/custom.css.
Every rule is scoped to elements that only exist on the welcome screen
(.ckux-welcome, .ckux-card, :is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav)), so question pages,
the end page and all question types keep the default theme.
*/
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../files/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../files/Inter-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../files/Inter-Bold.woff2") format("woff2"); }
:root {
--ckw-green-20: rgb(147 234 211);
--ckw-green-40: rgb(68 218 179);
--ckw-green-50: rgb(21 209 160);
--ckw-green-90: rgb(9 88 67);
--ckw-grey-0: rgb(251 251 254);
--ckw-grey-30: rgb(240 240 244);
--ckw-grey-60: rgb(220 220 224);
--ckw-grey-80: rgb(174 174 183);
--ckw-night-0: rgb(106 124 149);
--ckw-night-40: rgb(62 74 91);
--ckw-night-50: rgb(48 57 70);
--ckw-night-80: rgb(32 39 46);
--ckw-night-90: rgb(28 34 40);
--ckw-font: "Inter", Verdana, Arial, Helvetica, sans-serif;
--ckw-measure: 680px; /* shared text width for welcome text and privacy notice */
}
/* ---------- Page ---------- */
body:has(.ckux-welcome) {
background: var(--ckw-night-90) !important;
color: var(--ckw-grey-0);
font-family: var(--ckw-font);
color-scheme: dark;
}
body:has(.ckux-welcome) ::selection { background: var(--ckw-green-90); color: var(--ckw-grey-0); }
/* One centered column (1024px incl. padding) for alerts and the card */
body:has(.ckux-welcome) #outerframeContainer > .row { justify-content: center; margin-left: 0; margin-right: 0; }
body:has(.ckux-welcome) #outerframeContainer .col-centered {
width: 100%;
max-width: 1024px;
margin-left: auto !important;
margin-right: auto !important;
left: auto; right: auto; float: none;
padding-left: 24px;
padding-right: 24px;
flex: 0 1 auto;
}
/* No progress bar on the welcome screen (it always shows 0%) */
body:has(.ckux-welcome) .top-container { display: none; }
.ckux-welcome { padding: 32px 0 96px; font-family: var(--ckw-font); }
/* ---------- Header (welcome screen only) ---------- */
:is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav) {
background: var(--ckw-night-90) !important;
border: 0;
box-shadow: none;
min-height: 68px;
padding-top: 10px;
padding-bottom: 10px;
font-family: var(--ckw-font);
}
:is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav) > .container-fluid { display: flex; flex-wrap: nowrap; align-items: center; gap: 0; width: 100%; max-width: 1024px; margin: 0 auto; padding: 0 24px; flex: 0 1 auto; }
:is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav) .navbar-brand { margin: 0; padding: 0; }
:is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav) .navbar-brand { display: flex; align-items: center; }
:is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav) .logo-container > img,
:is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav) .navbar-brand .logo { display: block; height: 44px !important; max-height: none !important; width: auto !important; max-width: none !important; padding: 0 !important; }
:is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav) .ckux-nav__divider { width: 1px; height: 26px; margin: 0 12px; background: var(--ckw-night-50); }
:is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav) .ckux-nav__name { font-size: 14px; font-weight: 600; color: var(--ckw-grey-60); white-space: nowrap; }
:is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav) .ckux-nav__lang form { margin: 0; }
:is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav) .ckux-nav__lang .form-change-lang { margin: 0; padding: 0; flex-wrap: nowrap; align-items: center; }
:is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav) .ckux-nav__lang .control-label {
display: inline-flex; align-items: center; gap: 6px; padding: 0;
font-size: 12px; font-weight: 500 !important; color: var(--ckw-grey-80);
}
:is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav) .ckux-nav__lang .language-icon { font-size: 16px; }
:is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav) #language-changer-select {
height: 40px; padding: 0 10px; margin: 0;
background: transparent; color: var(--ckw-grey-0);
border: 1px solid var(--ckw-night-50); border-radius: 4px;
font-family: var(--ckw-font); font-size: 13px; line-height: 1;
}
:is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav) #language-changer-select:hover { border-color: var(--ckw-night-0); }
:is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav) #language-changer-select option { background: var(--ckw-night-80); color: var(--ckw-grey-0); }
:is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav) #navbar-menu { margin-left: 12px; }
:is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav) .navbar-toggler {
width: 40px; height: 40px; padding: 0;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--ckw-night-50); border-radius: 4px;
}
:is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav) .navbar-toggler:hover { border-color: var(--ckw-night-0); }
:is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav) .navbar-toggler .ri-more-fill { font-size: 20px; color: var(--ckw-grey-60); }
/* Tools menu (dropdown) in the dark style */
:is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav) #main-dropdown {
min-width: 240px;
margin-top: 8px;
padding: 6px;
background: var(--ckw-night-80);
border: 1px solid var(--ckw-night-50);
border-radius: 4px;
box-shadow: 0 8px 24px rgb(0 0 0 / 40%);
font-family: var(--ckw-font);
}
:is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav) #main-dropdown .dropdown-header {
padding: 8px 10px 4px;
font-size: 12px !important;
font-weight: 500;
line-height: 1.4;
letter-spacing: 0;
text-transform: none !important;
color: var(--ckw-grey-80);
}
:is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav) #main-dropdown > li > a,
:is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav) #main-dropdown .dropdown-item,
:is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav) #main-dropdown .list-group-item a {
display: block;
padding: 8px 10px;
border-radius: 3px;
font-size: 14px !important;
font-weight: 400;
line-height: 1.4;
color: var(--ckw-grey-0) !important;
background: transparent;
text-decoration: none;
}
:is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav) #main-dropdown > li > a:hover,
:is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav) #main-dropdown .dropdown-item:hover,
:is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav) #main-dropdown .list-group-item a:hover,
:is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav) #main-dropdown > li > a:focus-visible,
:is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav) #main-dropdown .dropdown-item:focus-visible {
background: var(--ckw-night-50);
color: var(--ckw-grey-0) !important;
outline: none;
}
:is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav) #main-dropdown > li > a:focus-visible,
:is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav) #main-dropdown .dropdown-item:focus-visible { box-shadow: inset 0 0 0 2px var(--ckw-green-50); }
/* Bootstrap's focus/active highlight uses the theme's primary green with white text (too low contrast); replace it */
:is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav) #main-dropdown > li > a:focus,
:is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav) #main-dropdown > li > a:active,
:is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav) #main-dropdown > li > a.active,
:is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav) #main-dropdown .dropdown-item:focus,
:is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav) #main-dropdown .dropdown-item:active,
:is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav) #main-dropdown .dropdown-item.active,
:is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav) #main-dropdown .list-group-item a:focus,
:is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav) #main-dropdown .list-group-item a:active,
:is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav) #main-dropdown .list-group-item.active,
:is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav) #main-dropdown .list-group-item.active a {
background: var(--ckw-night-50) !important;
color: var(--ckw-grey-0) !important;
outline: none;
}
/* Current entry (e.g. selected language): marked by weight, not by a colored fill */
:is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav) #main-dropdown .active > a,
:is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav) #main-dropdown a.active,
:is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav) #main-dropdown .dropdown-item.active { font-weight: 600; }
:is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav) #main-dropdown .dropdown-divider { margin: 6px 4px; border-top: 1px solid var(--ckw-night-50); opacity: 1; }
:is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav) #main-dropdown .list-group-item { background: transparent; border: 0; padding: 0; color: var(--ckw-grey-0); }
:is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav) #main-dropdown a.disabled,
:is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav) #main-dropdown .disabled { color: var(--ckw-grey-80) !important; }
:is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav) #main-dropdown .dropdown-toggle::after { color: var(--ckw-grey-80); }
:is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav) .navbar-toggler[aria-expanded="true"] { background: var(--ckw-night-80); border-color: var(--ckw-night-0); }
:is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav) a:focus-visible,
:is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav) button:focus-visible,
:is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav) select:focus-visible { outline: 2px solid var(--ckw-green-50); outline-offset: 2px; }
/* ---------- Card ---------- */
.ckux-welcome .ckux-card {
background: var(--ckw-night-80);
border: 1px solid var(--ckw-night-50);
border-radius: 4px;
color: var(--ckw-grey-0);
}
.ckux-welcome .ckux-card--picked { box-shadow: inset 0 3px 0 0 var(--ckw-green-50); }
.ckux-welcome .ckux-card__body { display: flex; flex-direction: column; gap: 40px; padding: 48px 48px 40px; }
/* LimeSurvey wraps welcome and privacy in containers with their own width and padding; let them span the card */
.ckux-welcome .ckux-card__body > *,
.ckux-welcome .ckux-card__body > .row,
.ckux-welcome .ckux-card__body > .row > [class*="col"] { margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: none !important; flex: none; }
.ckux-welcome .ckux-card .ckux-w-desc p, .ckux-welcome .ckux-card .ckux-w-desc:empty { margin: 0; }
.ckux-welcome .ckux-card .ckux-w-title {
margin: 0 0 12px;
font-family: var(--ckw-font);
font-size: 36px; line-height: 1.2; font-weight: 700;
color: var(--ckw-grey-0);
width: auto !important; max-width: none !important;
text-wrap: pretty;
}
.ckux-welcome .ckux-card .ckux-w-desc {
margin: 0;
max-width: var(--ckw-measure);
font-size: 18px; line-height: 1.45; font-weight: 400;
color: var(--ckw-grey-30);
}
.ckux-welcome .ckux-card .ckux-w-desc:empty { display: none; }
.ckux-welcome .ckux-card .ckux-w-text {
margin: 24px 0 0;
max-width: var(--ckw-measure);
font-size: 16px; line-height: 1.65; font-weight: 400;
color: var(--ckw-grey-60);
}
.ckux-welcome .ckux-card .ckux-w-text p { margin: 0 0 16px; }
.ckux-welcome .ckux-card .ckux-w-text > :last-child { margin-bottom: 0; }
/* Empty paragraphs from the editor (e.g.
or
) would add uneven gaps */
.ckux-welcome .ckux-card .ckux-w-text p:empty,
.ckux-welcome .ckux-card .ckux-w-text p:has(> br:only-child) { display: none; }
/* Links (Checkmk style): semibold in the text color; on hover underlined and green */
/* !important because links written in the survey editor often carry inline colors or wrappers */
.ckux-welcome .ckux-card a,
.ckux-welcome .ckux-card a * { color: inherit !important; font-weight: 600 !important; text-decoration: none !important; text-underline-offset: 2px; }
.ckux-welcome .ckux-card a:hover,
.ckux-welcome .ckux-card a:hover * { color: var(--ckw-green-40) !important; text-decoration: underline !important; }
.ckux-welcome .ckux-card a:focus-visible,
.ckux-welcome .ckux-card button:focus-visible,
.ckux-welcome .ckux-card input:focus-visible { outline: 2px solid var(--ckw-green-50); outline-offset: 2px; }
/* Privacy: anonymity notice and policy checkbox, aligned with the welcome text */
.ckux-welcome .ckux-card .ls-privacy-block { margin: 0; padding: 0; background: none; border: 0; max-width: var(--ckw-measure); }
.ckux-welcome .ckux-card .ls-privacy-block .row { margin: 0; }
.ckux-welcome .ckux-card .ls-privacy-block [class*="col"] { padding: 0; width: 100%; }
/* "This survey is anonymous." as a quiet note: divider above, lock icon, small text */
.ckux-welcome .ckux-card .ls-privacy-block:has([role="heading"]) {
padding-top: 24px;
border-top: 1px solid var(--ckw-night-50);
}
.ckux-welcome .ckux-card .ls-privacy-block [role="heading"] {
display: flex; align-items: center; gap: 8px;
margin: 0 0 8px;
font-size: 15px; font-weight: 600; line-height: 1.4;
color: var(--ckw-grey-30);
text-transform: none !important;
}
.ckux-welcome .ckux-card .ls-privacy-block [role="heading"]::before {
content: "";
flex: none;
width: 16px; height: 16px;
background: var(--ckw-green-40);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ckux-welcome .ckux-card .ls-privacy-block p {
margin: 0 0 8px;
padding-left: 24px; /* aligns with the heading text after the icon */
font-size: 14px; line-height: 1.55;
color: var(--ckw-grey-80);
hyphens: manual;
}
.ckux-welcome .ckux-card .ls-privacy-block p:last-child { margin-bottom: 0; }
.ckux-welcome .ckux-card .ls-privacy-block + .ls-privacy-block { margin-top: 24px; }
/* Policy checkbox row: the default theme floats the box with a negative margin and draws its own styles; reset both */
.ckux-welcome .ckux-card .datasecurity-checkbox-container { margin: 0 !important; }
.ckux-welcome .ckux-card .datasecurity-checkbox-container .checkbox-item {
display: flex !important; align-items: flex-start; gap: 12px;
width: 100%; margin: 0 !important; padding: 0 !important;
}
.ckux-welcome .ckux-card .ls-privacy-block input[type="checkbox"] {
-webkit-appearance: none; appearance: none;
position: static !important; float: none !important; opacity: 1 !important;
display: block !important; visibility: visible !important; clip: auto !important; clip-path: none !important;
z-index: auto;
flex: none;
width: 20px !important; height: 20px !important; min-width: 20px; margin: 1px 0 0 !important;
background: transparent no-repeat center / 14px 14px;
border: 1px solid var(--ckw-grey-80); border-radius: 3px;
box-shadow: none;
cursor: pointer;
}
.ckux-welcome .ckux-card .ls-privacy-block input[type="checkbox"]:hover { border-color: var(--ckw-grey-30); }
.ckux-welcome .ckux-card .ls-privacy-block input[type="checkbox"]:checked {
background-color: var(--ckw-green-50);
border-color: var(--ckw-green-50);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.ckux-welcome .ckux-card .ls-privacy-block input[type="checkbox"]:focus-visible { outline: 2px solid var(--ckw-green-50); outline-offset: 2px; }
.ckux-welcome .ckux-card .datasecurity-checkbox-label {
position: static !important;
margin: 0 !important; padding: 0 !important;
font-size: 15px; font-weight: 400 !important; line-height: 1.45;
color: var(--ckw-grey-30) !important;
cursor: pointer;
}
.ckux-welcome .ckux-card .datasecurity-checkbox-label::before,
.ckux-welcome .ckux-card .datasecurity-checkbox-label::after { display: none !important; }
.ckux-welcome .ckux-card .datasecurity-checkbox-label a,
.ckux-welcome .ckux-card .show-policy {
color: var(--ckw-grey-0) !important;
font-weight: 600 !important;
text-decoration: none !important;
text-underline-offset: 2px;
cursor: pointer;
}
.ckux-welcome .ckux-card .datasecurity-checkbox-label a:hover,
.ckux-welcome .ckux-card .show-policy:hover { color: var(--ckw-green-40) !important; text-decoration: underline !important; }
/* Error shown when the box was not ticked: Checkmk error alert (dark theme) instead of the theme's pink */
.ckux-welcome .ckux-card .ls-privacy-block .alert-danger,
.ckux-welcome .ckux-card #datasecurity_error {
position: relative;
display: flex; align-items: flex-start; gap: 10px;
margin: 0 0 16px;
padding: 12px 44px 12px 14px;
background: rgb(110 28 28) !important; /* dark-red-80 */
border: 0 !important;
border-radius: 4px;
color: var(--ckw-grey-0) !important;
font-size: 14px; line-height: 1.45; font-weight: 400;
box-shadow: none;
}
.ckux-welcome .ckux-card .ls-privacy-block .alert-danger.ls-js-hidden,
.ckux-welcome .ckux-card #datasecurity_error.ls-js-hidden { display: none !important; }
.ckux-welcome .ckux-card .ls-privacy-block .alert-danger::before,
.ckux-welcome .ckux-card #datasecurity_error::before {
content: "";
flex: none;
width: 18px; height: 18px; margin-top: 1px;
background: rgb(230 161 161); /* dark-red-20 */
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.01'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ckux-welcome .ckux-card .ls-privacy-block .alert-danger .btn-close,
.ckux-welcome .ckux-card #datasecurity_error .btn-close {
position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
width: 20px; height: 20px; padding: 0; margin: 0;
background-size: 10px; opacity: 0.8;
filter: invert(1) grayscale(1) brightness(2);
}
.ckux-welcome .ckux-card .ls-privacy-block .alert-danger .btn-close:hover,
.ckux-welcome .ckux-card #datasecurity_error .btn-close:hover { opacity: 1; }
/* Checkbox outline turns red while the error is shown */
.ckux-welcome .ckux-card .ls-privacy-block:has(.alert-danger:not(.ls-js-hidden)) + .ls-privacy-block input[type="checkbox"]:not(:checked) {
border-color: rgb(211 91 91) !important; /* dark-red-40 */
}
/* Footer: question count left, buttons right */
.ckux-welcome .ckux-card__foot {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: 12px 16px;
padding: 20px 48px;
border-top: 1px solid var(--ckw-night-50);
}
.ckux-welcome .ckux-card__count { font-size: 13px; color: var(--ckw-grey-80); }
.ckux-welcome .ckux-card__foot .navigator { display: flex; flex-wrap: nowrap; gap: 12px; width: auto; margin: 0 0 0 auto !important; padding: 0; }
.ckux-welcome .ckux-card__foot .navigator > [class*="col-"] { width: auto; flex: none; padding: 0; margin: 0; }
.ckux-welcome .ckux-card__foot .navigator > [class*="col-"]:empty { display: none; }
.ckux-welcome .ckux-card__foot .btn {
display: inline-flex; align-items: center; justify-content: center;
height: 44px; padding: 0 24px; margin: 0;
border-radius: 4px;
font-family: var(--ckw-font); font-size: 15px; line-height: 1;
box-shadow: none;
transition: background-color 120ms ease-out, border-color 120ms ease-out;
}
.ckux-welcome .ckux-card__foot .btn-primary { background: var(--ckw-green-50); border: 1px solid var(--ckw-green-50); color: rgb(0 0 0); font-weight: 700; }
.ckux-welcome .ckux-card__foot .btn-primary:hover,
.ckux-welcome .ckux-card__foot .btn-primary:focus { background: color-mix(in srgb, var(--ckw-green-50) 75%, white 25%); border-color: var(--ckw-green-50); color: rgb(0 0 0); }
.ckux-welcome .ckux-card__foot .btn-outline-secondary { background: transparent; border: 1px solid var(--ckw-night-40); color: var(--ckw-grey-30); font-weight: 600; }
.ckux-welcome .ckux-card__foot .btn-outline-secondary:hover,
.ckux-welcome .ckux-card__foot .btn-outline-secondary:focus { background: var(--ckw-night-90); border-color: var(--ckw-night-0); color: var(--ckw-grey-0); }
/* ---------- Completed page ---------- */
/* Wrapper carries .ckux-welcome too, so the dark page, header and column rules above apply. */
/* "All OK" icon: ring draws, inside fills, check draws, icon pops once */
.ckux-ok { display: block; width: 64px; height: 64px; overflow: visible; transform-origin: center; }
.ckux-ok__fill { fill: rgb(21 209 160 / 14%); }
.ckux-ok__ring { fill: none; stroke: var(--ckw-green-50); stroke-width: 3; stroke-dasharray: 100; }
.ckux-ok__check { fill: none; stroke: var(--ckw-green-50); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; }
/* The body reset above stretches direct children; keep icon size and text measure */
.ckux-welcome .ckux-card__body > .ckux-ok { width: 64px !important; max-width: 64px !important; }
.ckux-complete .ckux-card__body > .ckux-c-text,
.ckux-complete .ckux-card__body > .ckux-c-assessment { max-width: var(--ckw-measure) !important; }
/* Light sweep across the card, once, after the check has landed */
.ckux-welcome .ckux-card--sweep { position: relative; overflow: hidden; }
.ckux-sweep {
position: absolute; top: 0; bottom: 0; left: 0; width: 45%;
pointer-events: none;
transform: translateX(-110%);
background: linear-gradient(100deg,
rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 5%) 40%,
rgb(147 234 211 / 9%) 50%,
rgb(255 255 255 / 5%) 60%, rgb(255 255 255 / 0%) 100%);
}
.ckux-welcome .ckux-card--sweep > .ckux-card__body,
.ckux-welcome .ckux-card--sweep > .ckux-card__foot { position: relative; }
@media (prefers-reduced-motion: no-preference) {
.ckux-ok__ring { animation: ckux-draw 700ms cubic-bezier(.2,.8,.2,1) 150ms backwards; }
.ckux-ok__fill { animation: ckux-fade 500ms ease-out 650ms backwards; }
.ckux-ok__check { animation: ckux-draw 450ms cubic-bezier(.2,.8,.2,1) 750ms backwards; }
.ckux-ok { animation: ckux-pop 500ms cubic-bezier(.2,.8,.2,1) 1150ms; }
.ckux-sweep { animation: ckux-sweep 1100ms cubic-bezier(.45,0,.25,1) 1200ms forwards; }
}
@keyframes ckux-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes ckux-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ckux-pop { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.08); } }
@keyframes ckux-sweep { from { transform: translateX(-110%); } to { transform: translateX(240%); } }
/* Text: default "Thank you!" heading or the survey's own end text */
.ckux-complete .ckux-card__body { gap: 32px; }
.ckux-complete .ckux-c-text { max-width: var(--ckw-measure); font-size: 16px; line-height: 1.65; color: var(--ckw-grey-60); }
.ckux-complete .ckux-c-text > :first-child { margin-top: 0; }
.ckux-complete .ckux-c-text > :last-child { margin-bottom: 0; }
.ckux-complete .ckux-c-text p { margin: 0 0 16px; }
.ckux-complete .ckux-c-text p:empty,
.ckux-complete .ckux-c-text p:has(> br:only-child) { display: none; }
.ckux-complete .ckux-c-text strong,
.ckux-complete .ckux-c-text b { font-weight: 600; color: var(--ckw-grey-30); }
.ckux-complete .ckux-c-text h1,
.ckux-complete .ckux-c-title {
margin: 0 0 12px;
font-family: var(--ckw-font); font-size: 36px; line-height: 1.2; font-weight: 700;
color: var(--ckw-grey-0);
}
.ckux-complete .ckux-c-text h2,
.ckux-complete .ckux-c-text h3 { margin: 0 0 12px; font-size: 20px; font-weight: 600; color: var(--ckw-grey-0); }
.ckux-complete .ckux-c-lead { margin: 0; font-size: 18px; line-height: 1.45; color: var(--ckw-grey-30); }
/* LimeSurvey notices inside the end text, e.g. "Did not save" for inactive surveys */
.ckux-complete .ckux-c-text .alert,
.ckux-complete .ckux-card__body > .alert {
margin: 0 0 24px;
padding: 12px 14px;
background: rgb(84 70 0) !important; /* dark yellow surface */
border: 0 !important; border-radius: 4px;
color: var(--ckw-grey-0) !important;
font-size: 14px; line-height: 1.45;
}
.ckux-complete .ckux-c-text .alert * { color: inherit !important; font-size: inherit !important; }
.ckux-complete .ckux-c-text .alert strong,
.ckux-complete .ckux-c-text .alert .h3,
.ckux-complete .ckux-c-text .alert span:first-child { font-weight: 600; margin-right: 6px; }
/* Assessment result (only when assessments are enabled) */
.ckux-complete .ckux-c-assessment { max-width: var(--ckw-measure); color: var(--ckw-grey-60); font-size: 15px; }
.ckux-complete .ckux-c-assessment table,
.ckux-complete .ckux-c-assessment .table { --bs-table-bg: transparent; --bs-table-color: var(--ckw-grey-60); color: var(--ckw-grey-60); background: transparent; margin: 0; }
.ckux-complete .ckux-c-assessment th,
.ckux-complete .ckux-c-assessment td { background: transparent !important; color: inherit; border-color: var(--ckw-night-50) !important; padding: 10px 0; }
.ckux-complete .ckux-c-assessment th { color: var(--ckw-grey-30); font-weight: 600; }
/* Footer with print / statistics / end URL links */
.ckux-welcome .ckux-card__foot--links { justify-content: flex-start; gap: 12px 28px; font-size: 14px; }
.ckux-welcome .ckux-card__foot--links .ri-printer-line { margin-right: 4px; }
/* Link cue (end URL, e.g. "View all surveys"): semibold, arrow nudges right, green + underline on hover */
.ckux-welcome .ckux-cue { display: inline-flex; align-items: center; gap: 6px; text-decoration: none !important; }
.ckux-welcome .ckux-cue__text { text-underline-offset: 2px; }
.ckux-welcome .ckux-cue__arrow { flex: none; transition: transform 150ms ease-out; }
.ckux-welcome .ckux-cue:hover,
.ckux-welcome .ckux-cue:hover * { color: var(--ckw-green-40) !important; }
.ckux-welcome .ckux-cue:hover .ckux-cue__text { text-decoration: underline !important; }
.ckux-welcome .ckux-cue:hover .ckux-cue__arrow { transform: translateX(4px); text-decoration: none !important; }
@media (prefers-reduced-motion: reduce) { .ckux-welcome .ckux-cue__arrow { transition: none; } .ckux-welcome .ckux-cue:hover .ckux-cue__arrow { transform: none; } }
/* ---------- Phones ---------- */
@media (max-width: 640px) {
.ckux-welcome { padding: 24px 0 56px; }
.ckux-welcome .ckux-card__body { padding: 28px 20px 24px; gap: 28px; }
.ckux-welcome .ckux-card .ckux-w-title { font-size: 30px; }
.ckux-welcome .ckux-card .ckux-w-desc { font-size: 17px; }
.ckux-welcome .ckux-card .ckux-w-text { margin-top: 24px; }
.ckux-welcome .ckux-card__foot { padding: 16px 20px; }
.ckux-welcome .ckux-card__foot .navigator { flex-direction: column-reverse; width: 100%; margin: 0 !important; }
.ckux-welcome .ckux-card__foot .navigator .btn { width: 100%; }
:is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav) { min-height: 56px; }
:is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav) .logo-container > img,
:is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav) .navbar-brand .logo { height: 34px !important; }
:is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav) .ckux-nav__name { font-size: 13px; }
/* show only the globe icon; the text stays available to screen readers */
:is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav) .ckux-nav__lang .control-label > span { font-size: 0; }
:is(#survey-nav.ckux-nav, body:has(.ckux-welcome) #survey-nav) .ckux-nav__lang .control-label .language-icon { font-size: 18px; }
}
/*
Checkmk UX Research: legal footer (Privacy policy, Imprint, Legal) on every page.
Paste at the END of css/custom.css (after the welcome part).
Light pages (questions) use dark text; the dark pages (survey list, welcome, completed) use light text.
*/
.ckux-legal {
margin-top: 48px;
border: 0;
font-family: "Inter", Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 1.4;
}
.ckux-legal__inner {
max-width: 1024px;
margin: 0 auto;
padding: 10px 24px 12px;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 4px 20px;
}
/* Quiet links: regular weight in a muted grey; underline and green on hover */
.ckux-legal a {
display: inline-flex;
align-items: center;
min-height: 22px;
color: rgb(110 116 140); /* muted grey, AA on white */
font-size: 11px !important;
font-weight: 400;
text-decoration: none;
text-underline-offset: 2px;
}
.ckux-legal a:hover { color: rgb(12 115 88); text-decoration: underline; } /* green-80: readable on white */
.ckux-legal a:focus-visible { outline: 2px solid rgb(21 209 160); outline-offset: 2px; border-radius: 2px; }
/* Dark pages */
body.ckux-page .ckux-legal a,
body:has(.ckux-welcome) .ckux-legal a { color: rgb(147 147 159); } /* daylight-grey-90, AA on the dark page */
body.ckux-page .ckux-legal a:hover,
body:has(.ckux-welcome) .ckux-legal a:hover { color: rgb(68 218 179); } /* green-40 */
/* Survey list: let the page content end above the footer instead of filling the whole window */
body.ckux-page .ckux-shell { min-height: calc(100vh - 47px); }
body.ckux-page .ckux-legal { margin-top: 0; }
body.ckux-page .ckux-legal__inner { max-width: 1120px; } /* same width as the survey list content */
/* Welcome and completed pages: footer sits at the bottom of the window when the page is short
(the pattern LimeSurvey suggests in footer.twig: body as a column, the article takes the free space) */
body:has(.ckux-welcome) { display: flex; flex-direction: column; min-height: 100vh; box-sizing: border-box; }
body:has(.ckux-welcome) > article { flex: 1 0 auto; }
body:has(.ckux-welcome) .ckux-legal { margin-top: 0; flex: none; }
body:has(.ckux-welcome) .ckux-welcome { padding-bottom: 48px; }
/*
Checkmk UX Research: question pages, full dark theme.
Paste at the END of css/custom.css (after the welcome and footer parts).
Scope: every rule starts with the dark survey header marker, so the survey list and
other themes are not affected. Each question sits in its own dark card.
Colors: Checkmk UI Component Library, dark theme.
*/
/* ---------- Page and column ---------- */
body:has(#survey-nav.ckux-nav) {
background: var(--ckw-night-90) !important;
color: var(--ckw-grey-0);
font-family: var(--ckw-font);
color-scheme: dark;
}
body:has(#survey-nav.ckux-nav) ::selection { background: var(--ckw-green-90); color: var(--ckw-grey-0); }
body:has(#survey-nav.ckux-nav) #outerframeContainer > .row { justify-content: center; margin-left: 0; margin-right: 0; }
body:has(#survey-nav.ckux-nav) #outerframeContainer .col-centered {
width: 100%; max-width: 1024px; flex: 0 1 auto; float: none;
margin-left: auto !important; margin-right: auto !important;
padding-left: 24px; padding-right: 24px;
}
body:has(#survey-nav.ckux-nav) #outerframeContainer { padding-top: 24px; padding-bottom: 48px; }
/* Footer at the bottom of the window on short pages (body as a column, the article takes the free space) */
body:has(#survey-nav.ckux-nav) { display: flex; flex-direction: column; min-height: 100vh; box-sizing: border-box; }
body:has(#survey-nav.ckux-nav) > article { flex: 1 0 auto; }
body:has(#survey-nav.ckux-nav) .ckux-legal { margin-top: 0; flex: none; }
/* ---------- Progress bar ----------
LimeSurvey's bar is re-created on every page change, which makes animating it jumpy.
It stays in the page for screen readers but is visually hidden; scripts/custom-questions.js
shows one persistent bar (.ckux-progress) that is never replaced and glides to each new value. */
body:has(#survey-nav.ckux-nav) .top-container {
position: absolute !important; width: 1px !important; height: 1px !important;
overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap; margin: 0 !important; padding: 0 !important;
}
.ckux-progress {
position: fixed; z-index: 1031; /* just above the fixed header */
left: 50%; transform: translateX(-50%);
width: min(976px, calc(100% - 48px));
height: 4px;
background: rgb(48 57 70); /* midnight-grey-50 */
border-radius: 2px;
overflow: hidden;
opacity: 1;
transition: opacity 250ms ease-out;
pointer-events: none;
}
.ckux-progress.is-hidden { opacity: 0; }
.ckux-progress__fill {
width: 0; height: 100%;
background: rgb(21 209 160); /* corporate-green-50 */
border-radius: 2px;
transition: width 520ms cubic-bezier(.2,.8,.2,1);
}
/* While the next page loads: a soft shimmer runs over the track */
.ckux-progress.is-loading::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(90deg, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 18%) 50%, rgb(255 255 255 / 0%) 100%);
transform: translateX(-100%);
animation: ckux-shimmer 1100ms ease-in-out infinite;
}
@keyframes ckux-shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
.ckux-progress, .ckux-progress__fill { transition: none; }
.ckux-progress.is-loading::after { animation: none; display: none; }
}
@media (max-width: 640px) { .ckux-progress { width: calc(100% - 24px); } }
body:has(#survey-nav.ckux-nav) #outerframeContainer { padding-top: 36px; }
/* ---------- Group title and description ---------- */
body:has(#survey-nav.ckux-nav) .group-title {
margin: 8px 0 8px; font-family: var(--ckw-font);
font-size: 28px; line-height: 1.25; font-weight: 700; color: var(--ckw-grey-0);
}
body:has(#survey-nav.ckux-nav) .group-description { max-width: var(--ckw-measure); margin: 0 0 24px; font-size: 16px; line-height: 1.6; color: var(--ckw-grey-60); }
body:has(#survey-nav.ckux-nav) .group-description p { margin: 0 0 12px; }
/* ---------- Question card ---------- */
body:has(#survey-nav.ckux-nav) .question-container {
margin: 0 0 24px !important;
padding: 32px 40px;
background: var(--ckw-night-80);
border: 1px solid var(--ckw-night-50);
border-radius: 4px;
color: var(--ckw-grey-30);
}
body:has(#survey-nav.ckux-nav) .question-container > [class*="col"] { padding-left: 0; padding-right: 0; }
/* Error state: LimeSurvey's container class, or any validation message currently in its error state
(some types, e.g. numerical input, only mark the message). Updates live as soon as the error is fixed. */
body:has(#survey-nav.ckux-nav) .question-container:is(.input-error, :has(.question-valid-container :is(.ls-em-error, .text-danger, .ls-error-mandatory):not(.ls-hidden):not(.d-none):not(.hide))) {
border-color: rgb(211 91 91); /* dark-red-40 */
}
/* Title row: number/code before the text, "Required" flows right after the last word */
body:has(#survey-nav.ckux-nav) .question-title-container { display: block; margin: 0 0 28px; padding: 0; background: none; }
body:has(#survey-nav.ckux-nav) .question-title-container > * { margin: 0; padding: 0; width: auto; }
body:has(#survey-nav.ckux-nav) .question-title-container .question-number,
body:has(#survey-nav.ckux-nav) .question-title-container .question-code { display: inline; margin-right: 8px; }
body:has(#survey-nav.ckux-nav) .question-title-container > .question-text,
body:has(#survey-nav.ckux-nav) .question-title-container .ls-label-question { display: inline; }
body:has(#survey-nav.ckux-nav) .question-title-container .ls-label-question > p:last-child { display: inline; }
body:has(#survey-nav.ckux-nav) .question-text,
body:has(#survey-nav.ckux-nav) .ls-label-question {
font-family: var(--ckw-font);
font-size: 20px; line-height: 1.4; font-weight: 600;
color: var(--ckw-grey-0);
}
/* "Required" label: right after the last word of the question, on a soft shape (no outline) */
body:has(#survey-nav.ckux-nav) .question-title-container .ckux-required {
display: inline-block;
margin-left: 10px;
padding: 1px 9px;
border-radius: 999px;
background: var(--ckw-night-40);
color: var(--ckw-grey-30);
font-size: 12px; font-weight: 600; line-height: 1.6;
vertical-align: 3px;
white-space: nowrap;
}
body:has(#survey-nav.ckux-nav) .question-container:is(.input-error, :has(.question-valid-container :is(.ls-em-error, .text-danger, .ls-error-mandatory):not(.ls-hidden):not(.d-none):not(.hide))) .ckux-required {
background: rgb(110 28 28); color: rgb(238 191 191); /* dark-red-80 / dark-red-10 */
}
/* Older template output: hide the lone asterisk if it is still rendered */
body:has(#survey-nav.ckux-nav) .question-title-container .asterisk { display: none; }
body:has(#survey-nav.ckux-nav) .question-title-container .question-number,
body:has(#survey-nav.ckux-nav) .question-title-container .question-code { font-size: 14px; font-weight: 500; }
body:has(#survey-nav.ckux-nav) .ls-label-question p { margin: 0 0 8px; }
body:has(#survey-nav.ckux-nav) .ls-label-question p:last-child { margin-bottom: 0; }
body:has(#survey-nav.ckux-nav) .asterisk,
body:has(#survey-nav.ckux-nav) .asterisk * { color: rgb(218 118 118) !important; } /* dark-red-30 */
body:has(#survey-nav.ckux-nav) .question-number,
body:has(#survey-nav.ckux-nav) .question-code,
body:has(#survey-nav.ckux-nav) .text-muted { color: var(--ckw-grey-80) !important; }
/* Help and validation tips */
body:has(#survey-nav.ckux-nav) .question-help-container,
body:has(#survey-nav.ckux-nav) .ls-questionhelp,
body:has(#survey-nav.ckux-nav) .question-container .help-block { color: var(--ckw-grey-80); font-size: 14px; }
body:has(#survey-nav.ckux-nav) .question-valid-container { margin: 0 0 16px; font-size: 14px; color: var(--ckw-grey-80); }
body:has(#survey-nav.ckux-nav) .question-container .ls-question-message,
body:has(#survey-nav.ckux-nav) .question-container .ls-em-tip { color: var(--ckw-grey-80); }
/* Hints and validation tips: same quiet grey as the help text, never purple, green or italic */
body:has(#survey-nav.ckux-nav) .question-valid-container,
body:has(#survey-nav.ckux-nav) .question-valid-container *,
body:has(#survey-nav.ckux-nav) .question-container .ls-em-tip,
body:has(#survey-nav.ckux-nav) .question-container .text-info,
body:has(#survey-nav.ckux-nav) .question-container .text-primary,
body:has(#survey-nav.ckux-nav) .question-container .ls-questionhelp,
body:has(#survey-nav.ckux-nav) .question-container .question-help-container * {
color: var(--ckw-grey-80) !important;
font-style: normal !important;
font-size: 14px;
font-weight: 400;
}
body:has(#survey-nav.ckux-nav) .question-valid-container { margin: -12px 0 20px; line-height: 1.5; }
/* A violated tip switches to the error color (these rules come after the grey ones on purpose) */
body:has(#survey-nav.ckux-nav) .question-container .text-danger,
body:has(#survey-nav.ckux-nav) .question-container .ls-em-error,
body:has(#survey-nav.ckux-nav) .question-container .ls-error-mandatory,
body:has(#survey-nav.ckux-nav) .question-container .has-error .radio,
body:has(#survey-nav.ckux-nav) .question-container .has-error .checkbox { color: rgb(218 118 118) !important; }
body:has(#survey-nav.ckux-nav) .question-valid-container .ls-em-error,
body:has(#survey-nav.ckux-nav) .question-valid-container .ls-em-error *,
body:has(#survey-nav.ckux-nav) .question-valid-container .text-danger,
body:has(#survey-nav.ckux-nav) .question-valid-container .text-danger * { color: rgb(218 118 118) !important; }
/* A fulfilled tip goes back to the quiet grey (no green "success" highlight) */
body:has(#survey-nav.ckux-nav) .question-container .ls-em-success,
body:has(#survey-nav.ckux-nav) .question-container .ls-em-success *,
body:has(#survey-nav.ckux-nav) .question-container .text-success { color: var(--ckw-grey-80) !important; }
/* Links inside questions: semibold, underline and green on hover */
body:has(#survey-nav.ckux-nav) .question-container a:not(.btn),
body:has(#survey-nav.ckux-nav) .group-description a { color: inherit; font-weight: 600; text-decoration: none; text-underline-offset: 2px; }
body:has(#survey-nav.ckux-nav) .question-container a:not(.btn):hover,
body:has(#survey-nav.ckux-nav) .group-description a:hover { color: var(--ckw-green-40); text-decoration: underline; }
/* "Continue without answering" (soft mandatory): checkbox before its text, styled like all other checkboxes */
body:has(#survey-nav.ckux-nav) .question-valid-container :has(> input[type=checkbox]) {
display: flex !important; align-items: center; gap: 10px;
margin: 6px 0;
}
body:has(#survey-nav.ckux-nav) .question-valid-container input[type=checkbox] {
order: -1;
-webkit-appearance: none; appearance: none;
flex: none;
width: 20px; height: 20px; margin: 0;
background: transparent no-repeat center / 14px 14px;
border: 1px solid var(--ckw-grey-80); border-radius: 3px;
cursor: pointer;
}
body:has(#survey-nav.ckux-nav) .question-valid-container input[type=checkbox]:hover { border-color: var(--ckw-grey-30); }
body:has(#survey-nav.ckux-nav) .question-valid-container input[type=checkbox]:checked {
background-color: var(--ckw-green-50); border-color: var(--ckw-green-50);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
body:has(#survey-nav.ckux-nav) .question-valid-container input[type=checkbox]:focus-visible { outline: 2px solid var(--ckw-green-50); outline-offset: 2px; }
/* It is a control, not a hint: readable text, clickable */
body:has(#survey-nav.ckux-nav) .question-valid-container :has(> input[type=checkbox]),
body:has(#survey-nav.ckux-nav) .question-valid-container :has(> input[type=checkbox]) label,
body:has(#survey-nav.ckux-nav) .question-valid-container label:has(input[type=checkbox]) { color: var(--ckw-grey-30) !important; cursor: pointer; }
/* ---------- Answer text and labels ---------- */
body:has(#survey-nav.ckux-nav) .answer-container { padding: 0; color: var(--ckw-grey-30); }
body:has(#survey-nav.ckux-nav) .ls-answers label,
body:has(#survey-nav.ckux-nav) .answer-item label,
body:has(#survey-nav.ckux-nav) .question-container .control-label { color: var(--ckw-grey-30); font-size: 15px; font-weight: 400; line-height: 1.45; }
/* No automatic hyphenation in answers and scale labels ("dissatis-fied") */
body:has(#survey-nav.ckux-nav) .answer-container,
body:has(#survey-nav.ckux-nav) .answer-container * { hyphens: manual; -webkit-hyphens: manual; }
body:has(#survey-nav.ckux-nav) .ls-answers.answers-list .answer-item .othertext-suffix-label,
body:has(#survey-nav.ckux-nav) .answer-item .othertext-suffix-label { color: var(--ckw-grey-80); }
/* ---------- Text fields, numbers, dropdowns ---------- */
body:has(#survey-nav.ckux-nav) .question-container .form-control,
body:has(#survey-nav.ckux-nav) .question-container .form-select,
body:has(#survey-nav.ckux-nav) .question-container select,
body:has(#survey-nav.ckux-nav) .question-container textarea {
background-color: var(--ckw-night-90);
color: var(--ckw-grey-0);
border: 1px solid var(--ckw-night-0);
border-radius: 4px;
box-shadow: none;
}
body:has(#survey-nav.ckux-nav) .question-container .form-control::placeholder,
body:has(#survey-nav.ckux-nav) .question-container textarea::placeholder { color: var(--ckw-grey-90); opacity: 1; }
body:has(#survey-nav.ckux-nav) .question-container .form-control:hover,
body:has(#survey-nav.ckux-nav) .question-container .form-select:hover { border-color: var(--ckw-grey-80); }
body:has(#survey-nav.ckux-nav) .question-container .form-control:focus,
body:has(#survey-nav.ckux-nav) .question-container .form-select:focus,
body:has(#survey-nav.ckux-nav) .question-container select:focus,
body:has(#survey-nav.ckux-nav) .question-container textarea:focus {
border-color: var(--ckw-green-50);
box-shadow: 0 0 0 2px rgb(21 209 160 / 30%);
outline: none;
color: var(--ckw-grey-0);
background-color: var(--ckw-night-90);
}
body:has(#survey-nav.ckux-nav) .question-container .form-control[disabled],
body:has(#survey-nav.ckux-nav) .question-container .form-control[readonly],
body:has(#survey-nav.ckux-nav) .question-container .form-select:disabled {
background-color: var(--ckw-night-80);
color: var(--ckw-grey-90);
border-color: var(--ckw-night-50);
}
body:has(#survey-nav.ckux-nav) .question-container .form-control[disabled].total { color: var(--ckw-grey-30); }
body:has(#survey-nav.ckux-nav) .question-container .form-control.ls-important-field,
body:has(#survey-nav.ckux-nav) .question-container .form-select.ls-important-field { border: 2px solid var(--ckw-grey-80) !important; }
body:has(#survey-nav.ckux-nav) .question-container .form-select,
body:has(#survey-nav.ckux-nav) .question-container select:not([multiple]) {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23dcdce0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 14px 10px;
}
body:has(#survey-nav.ckux-nav) .question-container option { background: var(--ckw-night-80); color: var(--ckw-grey-0); }
/* Prefix / suffix boxes next to fields */
body:has(#survey-nav.ckux-nav) .question-container .input-group-text,
body:has(#survey-nav.ckux-nav) .question-container .input-group-addon,
body:has(#survey-nav.ckux-nav) .question-container .ls-input-group-extra {
background: var(--ckw-night-50); color: var(--ckw-grey-30);
border: 1px solid var(--ckw-night-0);
}
/* ---------- Radio buttons and checkboxes (the theme draws them with ::before / ::after) ---------- */
/* Radio buttons: same outline as the checkboxes; selected = green fill with a black dot */
body:has(#survey-nav.ckux-nav) .radio-item label::before { background-color: transparent; border: 2px solid var(--ckw-grey-80); }
body:has(#survey-nav.ckux-nav) .radio-item label::after,
body:has(#survey-nav.ckux-nav) .radio-item input[type=radio] + label::after,
body:has(#survey-nav.ckux-nav) .radio-item input[type=radio]:checked + label::after { background-color: rgb(0 0 0); }
body:has(#survey-nav.ckux-nav) .radio-item input[type=radio]:checked + label::before { background-color: var(--ckw-green-50); border-color: var(--ckw-green-50); }
body:has(#survey-nav.ckux-nav) .radio-item input[type=radio]:checked + label,
body:has(#survey-nav.ckux-nav) .checkbox-item input[type=checkbox]:checked + label { color: var(--ckw-grey-0); }
/* Checkboxes: identical to the privacy checkbox on the welcome screen
(20px, 1px light grey outline, 3px corners; checked = green fill with a centred black check).
The check is drawn as an image on the box itself, so the theme's icon glyph is hidden. */
body:has(#survey-nav.ckux-nav) .question-container .checkbox-item label::before {
width: 20px !important; height: 20px !important;
background-color: transparent;
background-repeat: no-repeat; background-position: center; background-size: 14px 14px;
border: 1px solid var(--ckw-grey-80) !important;
border-radius: 3px !important;
box-sizing: border-box;
}
body:has(#survey-nav.ckux-nav) .question-container .checkbox-item input[type=checkbox]:checked + label::before {
background-color: var(--ckw-green-50);
border-color: var(--ckw-green-50) !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
body:has(#survey-nav.ckux-nav) .question-container .checkbox-item label::after,
body:has(#survey-nav.ckux-nav) .question-container .checkbox-item input[type=checkbox]:checked + label::after { display: none !important; content: none !important; }
body:has(#survey-nav.ckux-nav) .question-container .checkbox-item label:hover::before { border-color: var(--ckw-grey-30) !important; }
body:has(#survey-nav.ckux-nav) .question-container .checkbox-item input[type=checkbox]:checked + label:hover::before { border-color: var(--ckw-green-50) !important; }
body:has(#survey-nav.ckux-nav) .radio-item input:focus-visible + label::before,
body:has(#survey-nav.ckux-nav) .checkbox-item input:focus-visible + label::before { outline: 2px solid var(--ckw-green-50); outline-offset: 2px; }
body:has(#survey-nav.ckux-nav) .radio-item label:hover::before,
body:has(#survey-nav.ckux-nav) .checkbox-item label:hover::before { border-color: var(--ckw-grey-30); }
/* Native checkboxes/radios that are not drawn by the theme */
body:has(#survey-nav.ckux-nav) .question-container input.form-check-input { background-color: var(--ckw-night-90); border: 1px solid var(--ckw-grey-80); }
body:has(#survey-nav.ckux-nav) .question-container input.form-check-input:checked { background-color: var(--ckw-green-50); border-color: var(--ckw-green-50); }
/* ---------- Button-style answers (yes/no, gender, list shown as buttons) ---------- */
body:has(#survey-nav.ckux-nav) .question-container .btn-check + .btn {
background-color: var(--ckw-night-90);
color: var(--ckw-grey-30);
border: 2px solid var(--ckw-night-0);
}
body:has(#survey-nav.ckux-nav) .question-container .btn-check + .btn:hover { border-color: var(--ckw-grey-80); color: var(--ckw-grey-0); background-color: var(--ckw-night-80); }
body:has(#survey-nav.ckux-nav) .question-container .btn-check:checked + .btn,
body:has(#survey-nav.ckux-nav) .question-container .btn-check:active + .btn,
body:has(#survey-nav.ckux-nav) .question-container .btn-check + .btn.active,
body:has(#survey-nav.ckux-nav) .question-container .btn-check:checked + .btn:focus {
background-color: var(--ckw-green-50); border-color: var(--ckw-green-50); color: rgb(0 0 0);
}
body:has(#survey-nav.ckux-nav) .question-container .btn-check:focus-visible + .btn { outline: 2px solid var(--ckw-green-50); outline-offset: 2px; }
/* ---------- Array / matrix tables ---------- */
body:has(#survey-nav.ckux-nav) .question-container table,
body:has(#survey-nav.ckux-nav) .question-container .table {
--bs-table-bg: transparent;
--bs-table-accent-bg: transparent;
--bs-table-striped-bg: transparent;
--bs-table-hover-bg: rgb(255 255 255 / 5%);
--bs-table-color: var(--ckw-grey-30);
color: var(--ckw-grey-30);
background: transparent;
border-color: var(--ckw-night-50);
}
body:has(#survey-nav.ckux-nav) .question-container table th,
body:has(#survey-nav.ckux-nav) .question-container table td { border-color: var(--ckw-night-50) !important; color: inherit; }
/* Scale and column labels: clearly below the question text */
body:has(#survey-nav.ckux-nav) .ls-answers th,
body:has(#survey-nav.ckux-nav) .ls-answers .ls-heading th,
body:has(#survey-nav.ckux-nav) .ls-answers th * { color: var(--ckw-grey-60); font-size: 14px !important; font-weight: 500 !important; line-height: 1.35; }
body:has(#survey-nav.ckux-nav) .ls-answers thead th { padding-bottom: 12px; vertical-align: bottom; }
/* No zebra stripes: rows are separated by space; the hover tint helps track a row */
body:has(#survey-nav.ckux-nav) .question-container .ls-answers .ls-even,
body:has(#survey-nav.ckux-nav) .question-container .ls-answers .ls-odd,
body:has(#survey-nav.ckux-nav) .question-container .ls-even,
body:has(#survey-nav.ckux-nav) .question-container .ls-odd,
body:has(#survey-nav.ckux-nav) .question-container .ls-answers > tbody > tr > td,
body:has(#survey-nav.ckux-nav) .question-container .ls-answers > tbody > tr > th { background-color: transparent; }
body:has(#survey-nav.ckux-nav) .question-container table { --bs-table-striped-bg: transparent; }
body:has(#survey-nav.ckux-nav) .question-container .ls-answers > tbody > tr > td,
body:has(#survey-nav.ckux-nav) .question-container .ls-answers > tbody > tr > th { padding-top: 14px; padding-bottom: 14px; vertical-align: middle; }
body:has(#survey-nav.ckux-nav) .ls-answers > tbody > tr.ls-even:hover,
body:has(#survey-nav.ckux-nav) .ls-answers > tbody > tr:hover { background-color: rgb(255 255 255 / 5%); }
body:has(#survey-nav.ckux-nav) .question-container .ls-heading,
body:has(#survey-nav.ckux-nav) .question-container thead { background: transparent; }
/* Hover in arrays and scales: subtle tint, text stays light */
body:has(#survey-nav.ckux-nav) .question-container table { --bs-table-hover-color: var(--ckw-grey-30); }
body:has(#survey-nav.ckux-nav) .question-container .table-hover > tbody > tr:hover > td,
body:has(#survey-nav.ckux-nav) .question-container .table-hover > tbody > tr:hover > th,
body:has(#survey-nav.ckux-nav) .question-container .ls-answers > tbody > tr:hover > td,
body:has(#survey-nav.ckux-nav) .question-container .ls-answers > tbody > tr:hover > th {
background-color: rgb(255 255 255 / 5%) !important;
box-shadow: none !important;
color: var(--ckw-grey-30) !important;
}
body:has(#survey-nav.ckux-nav) .question-container .ls-answers > tbody > tr:hover > th,
body:has(#survey-nav.ckux-nav) .question-container .ls-answers > tbody > tr:hover > th * { color: var(--ckw-grey-0) !important; }
body:has(#survey-nav.ckux-nav) .question-container col.hover,
body:has(#survey-nav.ckux-nav) .question-container .table-col-hover col.hover { background-color: rgb(255 255 255 / 4%) !important; }
/* ---------- Slider ---------- */
body:has(#survey-nav.ckux-nav) .slider .slider-track { background: var(--ckw-night-50); background-image: none; box-shadow: none; }
body:has(#survey-nav.ckux-nav) .slider-list .slider .slider-selection,
body:has(#survey-nav.ckux-nav) .slider .slider-selection { background: var(--ckw-green-50); background-image: none; }
body:has(#survey-nav.ckux-nav) .slider-list .slider .slider-handle,
body:has(#survey-nav.ckux-nav) .slider .slider-handle { background: var(--ckw-green-50); background-image: none; box-shadow: 0 0 0 3px var(--ckw-night-80); }
body:has(#survey-nav.ckux-nav) .slider-list .slider.slider-untouched .slider-handle { background: var(--ckw-grey-90); }
body:has(#survey-nav.ckux-nav) .slider-list .slider .slider-handle.custom,
body:has(#survey-nav.ckux-nav) .slider-list .slider.slider-untouched .slider-handle.custom { background: transparent; box-shadow: none; }
body:has(#survey-nav.ckux-nav) .slider-list .slider .tooltip .tooltip-inner { color: var(--ckw-green-40); }
body:has(#survey-nav.ckux-nav) .slider .tooltip-inner { background: var(--ckw-night-50); color: var(--ckw-grey-0); }
/* ---------- Ranking ---------- */
body:has(#survey-nav.ckux-nav) .question-container .list-group-item {
background: var(--ckw-night-90);
color: var(--ckw-grey-30);
border: 1px solid var(--ckw-night-0);
}
body:has(#survey-nav.ckux-nav) .select-sortable-lists:not(.ranking-advanced-style) .ranking-available-items .sortable-item { color: var(--ckw-grey-30); }
body:has(#survey-nav.ckux-nav) .select-sortable-lists:not(.ranking-advanced-style) .ranking-sorted-items { background-color: rgb(255 255 255 / 3%); border-color: var(--ckw-night-50); }
body:has(#survey-nav.ckux-nav) .select-sortable-lists:not(.ranking-advanced-style) .ranking-sorted-items .sortable-item { border-color: var(--ckw-green-50); color: var(--ckw-grey-0); background: var(--ckw-night-90); }
body:has(#survey-nav.ckux-nav) .select-sortable-lists .selector__dragHandle { color: var(--ckw-grey-80); }
/* ---------- Advanced ranking: soft tiles instead of outlined boxes ----------
Works for all visualizations (list, buttons, blocks, bubbles); the ranking logic is untouched. */
/* Two columns: available items | your ranking (stacked on phones) */
body:has(#survey-nav.ckux-nav) .question-container .ranking-advanced-style :has(> .ranking-advanced-available-items) {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 16px 28px;
margin: 0;
}
body:has(#survey-nav.ckux-nav) .question-container .ranking-advanced-style .ranking-advanced-available-items,
body:has(#survey-nav.ckux-nav) .question-container .ranking-advanced-style .ranking-advanced-sorted-items {
width: auto; max-width: none; padding: 0; margin: 0;
display: flex; flex-direction: column;
}
/* Column labels: like the scale labels in matrices */
body:has(#survey-nav.ckux-nav) .question-container .ranking-advanced-style .sortable-rank-subtitle,
body:has(#survey-nav.ckux-nav) .question-container .ranking-advanced-style .sortable-subtitle {
display: block; margin: 0 0 10px;
font-size: 14px; font-weight: 500; line-height: 1.4;
color: var(--ckw-grey-60);
}
/* Lists */
body:has(#survey-nav.ckux-nav) .question-container .ranking-advanced-style .sortable-list {
display: flex !important; flex-direction: column; flex-wrap: nowrap; gap: 8px;
margin: 0; padding: 0;
border: 0 !important; box-shadow: none !important; background: none;
min-height: 44px;
}
/* Ranking area: recessed surface with faint empty slots (44px tile + 8px gap) */
body:has(#survey-nav.ckux-nav) .question-container .ranking-advanced-style .sortable-rank {
flex: 1 1 auto;
padding: 8px;
border-radius: 6px;
background-color: rgb(15 18 21 / 45%) !important;
background-image: repeating-linear-gradient(to bottom, rgb(255 255 255 / 3.5%) 0 44px, transparent 44px 52px);
background-origin: content-box; background-clip: padding-box;
background-repeat: no-repeat;
counter-reset: ckux-rank;
transition: background-color 150ms ease-out;
}
/* While an item is dragged over the ranking: subtle green tint, no frame */
body:has(#survey-nav.ckux-nav) .question-container .ranking-advanced-style .sortable-rank:has(.sortable-ghost) { background-color: rgb(21 209 160 / 7%) !important; }
/* Tiles */
body:has(#survey-nav.ckux-nav) .question-container .ranking-advanced-style .sortable-item {
position: relative;
display: flex !important; align-items: center; gap: 10px;
width: auto !important; min-height: 44px; height: auto !important;
margin: 0 !important; padding: 10px 14px !important;
background: var(--ckw-night-90) !important;
border: 0 !important; border-radius: 4px !important; box-shadow: none !important;
color: var(--ckw-grey-30) !important;
font-family: var(--ckw-font); font-size: 15px; font-weight: 400; line-height: 1.35;
text-align: left; white-space: normal;
cursor: grab;
animation: none !important; /* "bubbles" visualization wobbles its items */
transition: background-color 120ms ease-out;
}
body:has(#survey-nav.ckux-nav) .question-container .ranking-advanced-style .sortable-item:hover { background: rgb(38 46 54) !important; color: var(--ckw-grey-0) !important; }
body:has(#survey-nav.ckux-nav) .question-container .ranking-advanced-style .sortable-item:active { cursor: grabbing; }
/* "blocks" visualization draws squares with an absolutely positioned content box: make it a normal row */
body:has(#survey-nav.ckux-nav) .question-container .ranking-advanced-style .sortable-block { padding-top: 10px !important; }
body:has(#survey-nav.ckux-nav) .question-container .ranking-advanced-style .sortable-block .sortable-block-content { position: static !important; display: flex; align-items: center; gap: 10px; }
/* Hide the theme's own handles / dividers / index numbers; the tile draws its own */
body:has(#survey-nav.ckux-nav) .question-container .ranking-advanced-style .selector__dragHandle,
body:has(#survey-nav.ckux-nav) .question-container .ranking-advanced-style .icon-divider,
body:has(#survey-nav.ckux-nav) .question-container .ranking-advanced-style .selector__index_row { display: none !important; }
/* Available items: six-dot grip in front */
body:has(#survey-nav.ckux-nav) .question-container .ranking-advanced-style .sortable-choice .sortable-item::before {
content: ""; flex: none; width: 10px; height: 16px;
background: var(--ckw-grey-80);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cg fill='black'%3E%3Ccircle cx='2' cy='2' r='1.5'/%3E%3Ccircle cx='8' cy='2' r='1.5'/%3E%3Ccircle cx='2' cy='8' r='1.5'/%3E%3Ccircle cx='8' cy='8' r='1.5'/%3E%3Ccircle cx='2' cy='14' r='1.5'/%3E%3Ccircle cx='8' cy='14' r='1.5'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cg fill='black'%3E%3Ccircle cx='2' cy='2' r='1.5'/%3E%3Ccircle cx='8' cy='2' r='1.5'/%3E%3Ccircle cx='2' cy='8' r='1.5'/%3E%3Ccircle cx='8' cy='8' r='1.5'/%3E%3Ccircle cx='2' cy='14' r='1.5'/%3E%3Ccircle cx='8' cy='14' r='1.5'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
/* Ranked items: position number on a green shape instead of the grip */
body:has(#survey-nav.ckux-nav) .question-container .ranking-advanced-style .sortable-rank .sortable-item { counter-increment: ckux-rank; color: var(--ckw-grey-0) !important; }
body:has(#survey-nav.ckux-nav) .question-container .ranking-advanced-style .sortable-rank .sortable-item::before {
content: counter(ckux-rank);
flex: none;
min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 999px;
background: var(--ckw-green-50); color: rgb(0 0 0);
font-size: 12px; font-weight: 700; line-height: 1;
}
/* Drag feedback (SortableJS classes) */
body:has(#survey-nav.ckux-nav) .question-container .ranking-advanced-style .sortable-chosen { background: rgb(48 57 70) !important; color: var(--ckw-grey-0) !important; }
body:has(#survey-nav.ckux-nav) .question-container .ranking-advanced-style .sortable-ghost { opacity: 0.45; }
body:has(#survey-nav.ckux-nav) .question-container .ranking-advanced-style .sortable-drag { box-shadow: 0 6px 18px rgb(0 0 0 / 35%) !important; }
body:has(#survey-nav.ckux-nav) .question-container .ranking-advanced-style .ls-remove { display: none !important; }
@media (max-width: 640px) {
body:has(#survey-nav.ckux-nav) .question-container .ranking-advanced-style :has(> .ranking-advanced-available-items) { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
body:has(#survey-nav.ckux-nav) .question-container .ranking-advanced-style .sortable-item, body:has(#survey-nav.ckux-nav) .question-container .ranking-advanced-style .sortable-rank { transition: none; }
}
/* ---------- Date picker (Tempus Dominus, used by LimeSurvey 6) ----------
The pop-up is attached to the page body, so it is styled here without the question card scope. */
body:has(#survey-nav.ckux-nav) .tempus-dominus-widget {
background: var(--ckw-night-80) !important;
color: var(--ckw-grey-30) !important;
border: 1px solid var(--ckw-night-50) !important;
border-radius: 4px !important;
box-shadow: 0 8px 24px rgb(0 0 0 / 40%) !important;
font-family: var(--ckw-font);
padding: 8px;
}
/* Header: month/year switch and arrows */
body:has(#survey-nav.ckux-nav) .tempus-dominus-widget .calendar-header { border: 0 !important; margin-bottom: 4px; }
body:has(#survey-nav.ckux-nav) .tempus-dominus-widget .calendar-header .picker-switch { color: var(--ckw-grey-0) !important; font-size: 15px; font-weight: 600; border-radius: 4px; }
body:has(#survey-nav.ckux-nav) .tempus-dominus-widget .calendar-header .previous,
body:has(#survey-nav.ckux-nav) .tempus-dominus-widget .calendar-header .next { color: var(--ckw-grey-80) !important; border-radius: 4px; }
body:has(#survey-nav.ckux-nav) .tempus-dominus-widget .calendar-header .previous:hover,
body:has(#survey-nav.ckux-nav) .tempus-dominus-widget .calendar-header .next:hover,
body:has(#survey-nav.ckux-nav) .tempus-dominus-widget .calendar-header .picker-switch:hover { color: var(--ckw-grey-0) !important; background: rgb(255 255 255 / 6%) !important; }
body:has(#survey-nav.ckux-nav) .tempus-dominus-widget .calendar-header .previous::before,
body:has(#survey-nav.ckux-nav) .tempus-dominus-widget .calendar-header .next::before { border-color: currentColor !important; }
/* Weekday names */
body:has(#survey-nav.ckux-nav) .tempus-dominus-widget .dow { color: var(--ckw-grey-60) !important; font-size: 12px !important; font-weight: 500; }
body:has(#survey-nav.ckux-nav) .tempus-dominus-widget .cw { color: var(--ckw-grey-90) !important; font-size: 11px; }
/* Days, months, years, decades, hours, minutes */
body:has(#survey-nav.ckux-nav) .tempus-dominus-widget :is(.day, .month, .year, .decade, .hour, .minute, .second) {
color: var(--ckw-grey-30) !important;
background: transparent !important;
border-radius: 4px !important;
font-size: 14px;
}
body:has(#survey-nav.ckux-nav) .tempus-dominus-widget :is(.day, .month, .year, .decade, .hour, .minute, .second):not(.disabled):hover {
background: rgb(255 255 255 / 7%) !important; color: var(--ckw-grey-0) !important;
}
body:has(#survey-nav.ckux-nav) .tempus-dominus-widget :is(.day.old, .day.new) { color: var(--ckw-grey-90) !important; opacity: 0.6; }
body:has(#survey-nav.ckux-nav) .tempus-dominus-widget .disabled,
body:has(#survey-nav.ckux-nav) .tempus-dominus-widget .disabled:hover { color: var(--ckw-night-0) !important; background: transparent !important; cursor: not-allowed; }
/* Today: small green dot underneath (replaces the default corner triangle) */
body:has(#survey-nav.ckux-nav) .tempus-dominus-widget .day.today { position: relative; }
body:has(#survey-nav.ckux-nav) .tempus-dominus-widget .day.today::before {
content: "" !important;
position: absolute !important;
left: 50% !important; right: auto !important; top: auto !important; bottom: 3px !important;
width: 4px !important; height: 4px !important;
margin-left: -2px;
border: 0 !important; border-radius: 50%;
background: var(--ckw-green-50) !important;
}
/* Selected: Checkmk green with black text, like a selected answer */
body:has(#survey-nav.ckux-nav) .tempus-dominus-widget :is(.day, .month, .year, .decade, .hour, .minute, .second).active,
body:has(#survey-nav.ckux-nav) .tempus-dominus-widget :is(.day, .month, .year, .decade, .hour, .minute, .second).active:hover {
background: var(--ckw-green-50) !important;
color: rgb(0 0 0) !important;
font-weight: 700;
text-shadow: none !important;
}
body:has(#survey-nav.ckux-nav) .tempus-dominus-widget .day.today.active::before { background: rgb(0 0 0) !important; }
/* Footer toolbar (clear / today / close): quiet icons, light red only on hover for "clear" */
body:has(#survey-nav.ckux-nav) .tempus-dominus-widget .toolbar { border-top: 1px solid var(--ckw-night-50) !important; margin-top: 6px; padding-top: 4px; }
body:has(#survey-nav.ckux-nav) .tempus-dominus-widget .toolbar div,
body:has(#survey-nav.ckux-nav) .tempus-dominus-widget .toolbar i,
body:has(#survey-nav.ckux-nav) .tempus-dominus-widget .toolbar svg,
body:has(#survey-nav.ckux-nav) .tempus-dominus-widget .toolbar span { color: var(--ckw-grey-80) !important; fill: currentColor; }
body:has(#survey-nav.ckux-nav) .tempus-dominus-widget .toolbar div { border-radius: 4px; }
body:has(#survey-nav.ckux-nav) .tempus-dominus-widget .toolbar div:hover { background: rgb(255 255 255 / 6%) !important; }
body:has(#survey-nav.ckux-nav) .tempus-dominus-widget .toolbar div:hover,
body:has(#survey-nav.ckux-nav) .tempus-dominus-widget .toolbar div:hover * { color: var(--ckw-grey-0) !important; }
body:has(#survey-nav.ckux-nav) .tempus-dominus-widget .toolbar [data-action="clear"]:hover,
body:has(#survey-nav.ckux-nav) .tempus-dominus-widget .toolbar [data-action="clear"]:hover * { color: rgb(218 118 118) !important; }
/* Time view */
body:has(#survey-nav.ckux-nav) .tempus-dominus-widget .time-container,
body:has(#survey-nav.ckux-nav) .tempus-dominus-widget .time-container-clock { color: var(--ckw-grey-30) !important; }
body:has(#survey-nav.ckux-nav) .tempus-dominus-widget .separator { color: var(--ckw-grey-80) !important; }
body:has(#survey-nav.ckux-nav) .tempus-dominus-widget :is(.time-container-clock) div:not(.separator):hover { background: rgb(255 255 255 / 7%) !important; }
body:has(#survey-nav.ckux-nav) .tempus-dominus-widget .picker-switch:not(.calendar-header .picker-switch) { color: var(--ckw-grey-60) !important; }
/* Older LimeSurvey versions: Bootstrap datetimepicker */
body:has(#survey-nav.ckux-nav) .bootstrap-datetimepicker-widget.dropdown-menu {
background: var(--ckw-night-80) !important; color: var(--ckw-grey-30) !important;
border: 1px solid var(--ckw-night-50) !important; border-radius: 4px; box-shadow: 0 8px 24px rgb(0 0 0 / 40%);
}
body:has(#survey-nav.ckux-nav) .bootstrap-datetimepicker-widget table td.day:hover,
body:has(#survey-nav.ckux-nav) .bootstrap-datetimepicker-widget table td span:hover,
body:has(#survey-nav.ckux-nav) .bootstrap-datetimepicker-widget table th:hover { background: rgb(255 255 255 / 7%) !important; color: var(--ckw-grey-0) !important; }
body:has(#survey-nav.ckux-nav) .bootstrap-datetimepicker-widget table td.active,
body:has(#survey-nav.ckux-nav) .bootstrap-datetimepicker-widget table td span.active { background: var(--ckw-green-50) !important; color: rgb(0 0 0) !important; text-shadow: none; }
body:has(#survey-nav.ckux-nav) .bootstrap-datetimepicker-widget table td.old,
body:has(#survey-nav.ckux-nav) .bootstrap-datetimepicker-widget table td.new { color: var(--ckw-grey-90) !important; }
body:has(#survey-nav.ckux-nav) .bootstrap-datetimepicker-widget table td.today::before { border-bottom-color: var(--ckw-green-50) !important; }
/* Calendar button next to the date field: same dark field look, green focus instead of purple */
body:has(#survey-nav.ckux-nav) .question-container .input-group :is(.btn, .input-group-text, .input-group-addon) {
background: var(--ckw-night-90) !important;
color: var(--ckw-grey-60) !important;
border: 1px solid var(--ckw-night-0) !important;
box-shadow: none !important;
}
body:has(#survey-nav.ckux-nav) .question-container .input-group :is(.btn, .input-group-text, .input-group-addon):hover { color: var(--ckw-grey-0) !important; border-color: var(--ckw-grey-80) !important; }
body:has(#survey-nav.ckux-nav) .question-container .input-group :is(.btn, .input-group-text, .input-group-addon):focus,
body:has(#survey-nav.ckux-nav) .question-container .input-group :is(.btn, .input-group-text, .input-group-addon):focus-visible {
outline: 2px solid var(--ckw-green-50) !important; outline-offset: 0; border-color: var(--ckw-green-50) !important;
}
/* ---------- Image select ---------- */
body:has(#survey-nav.ckux-nav) .imageselect-container .imageselect-radiobutton:before { background-color: var(--ckw-night-90); border-color: var(--ckw-grey-90); }
body:has(#survey-nav.ckux-nav) li.imageselect-listitem .imageselect-container input.imageselect-checkbox:checked + label + .imageselect-radiobutton:after { background-color: var(--ckw-green-50); }
/* ---------- Navigation buttons below the questions ---------- */
body:has(#survey-nav.ckux-nav) .navigator { margin: 8px 0 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
body:has(#survey-nav.ckux-nav) .navigator > [class*="col-"] { width: auto; flex: none; padding: 0; }
body:has(#survey-nav.ckux-nav) .navigator .btn,
body:has(#survey-nav.ckux-nav) .ls-move-btn {
display: inline-flex; align-items: center; justify-content: center;
height: 44px; padding: 0 24px;
border-radius: 4px;
font-family: var(--ckw-font); font-size: 15px; line-height: 1;
box-shadow: none;
transition: background-color 120ms ease-out, border-color 120ms ease-out;
}
body:has(#survey-nav.ckux-nav) .navigator .btn-primary { background: var(--ckw-green-50); border: 1px solid var(--ckw-green-50); color: rgb(0 0 0); font-weight: 700; }
body:has(#survey-nav.ckux-nav) .navigator .btn-primary:hover,
body:has(#survey-nav.ckux-nav) .navigator .btn-primary:focus { background: color-mix(in srgb, var(--ckw-green-50) 75%, white 25%); border-color: var(--ckw-green-50); color: rgb(0 0 0); }
body:has(#survey-nav.ckux-nav) .navigator .btn-outline-secondary { background: transparent; border: 1px solid var(--ckw-night-40); color: var(--ckw-grey-30); font-weight: 600; }
body:has(#survey-nav.ckux-nav) .navigator .btn-outline-secondary:hover,
body:has(#survey-nav.ckux-nav) .navigator .btn-outline-secondary:focus { background: var(--ckw-night-80); border-color: var(--ckw-night-0); color: var(--ckw-grey-0); }
body:has(#survey-nav.ckux-nav) .navigator .btn:focus-visible { outline: 2px solid var(--ckw-green-50); outline-offset: 2px; }
body:has(#survey-nav.ckux-nav) .navigator .checkbox-item label { color: var(--ckw-grey-30); }
/* Save / Load / Clear all buttons (when enabled) */
body:has(#survey-nav.ckux-nav) .navigator ~ * .btn,
body:has(#survey-nav.ckux-nav) .ls-clearall,
body:has(#survey-nav.ckux-nav) .ls-saveaction,
body:has(#survey-nav.ckux-nav) .ls-loadaction { color: var(--ckw-grey-30); border-color: var(--ckw-night-40); background-color: transparent; }
/* ---------- Notices and errors ---------- */
body:has(#survey-nav.ckux-nav) #outerframeContainer .alert { border: 0; border-radius: 4px; color: var(--ckw-grey-0); font-size: 14px; }
body:has(#survey-nav.ckux-nav) #outerframeContainer .alert-warning { background: rgb(84 70 0); }
body:has(#survey-nav.ckux-nav) #outerframeContainer .alert-danger { background: rgb(110 28 28); }
body:has(#survey-nav.ckux-nav) #outerframeContainer .alert-info { background: var(--ckw-night-50); }
body:has(#survey-nav.ckux-nav) #outerframeContainer .alert-success { background: var(--ckw-green-90); }
body:has(#survey-nav.ckux-nav) #outerframeContainer .alert .btn-close { filter: invert(1) grayscale(1) brightness(2); }
body:has(#survey-nav.ckux-nav) #outerframeContainer .alert a { color: inherit; font-weight: 600; text-decoration: underline; }
/* ---------- Dialogs (help, mandatory warnings, policy) ---------- */
body:has(#survey-nav.ckux-nav) .modal-content { background: var(--ckw-night-80); color: var(--ckw-grey-30); border: 1px solid var(--ckw-night-50); border-radius: 4px; }
body:has(#survey-nav.ckux-nav) .modal-header,
body:has(#survey-nav.ckux-nav) .modal-footer { border-color: var(--ckw-night-50); }
body:has(#survey-nav.ckux-nav) .modal-title { color: var(--ckw-grey-0); }
body:has(#survey-nav.ckux-nav) .modal .btn-close { filter: invert(1) grayscale(1) brightness(2); }
body:has(#survey-nav.ckux-nav) .modal .btn-primary { background: var(--ckw-green-50); border-color: var(--ckw-green-50); color: rgb(0 0 0); }
body:has(#survey-nav.ckux-nav) .modal .btn-outline-secondary,
body:has(#survey-nav.ckux-nav) .modal .btn-default { background: transparent; border-color: var(--ckw-night-40); color: var(--ckw-grey-30); }
/* ---------- Misc content inside questions ---------- */
body:has(#survey-nav.ckux-nav) .question-container pre,
body:has(#survey-nav.ckux-nav) .question-container code { background: var(--ckw-night-90); color: var(--ckw-grey-30); border-color: var(--ckw-night-50); }
body:has(#survey-nav.ckux-nav) .question-container hr { border-color: var(--ckw-night-50); opacity: 1; }
/* ---------- Footer links on question pages ---------- */
body:has(#survey-nav.ckux-nav) .ckux-legal a { color: rgb(147 147 159); }
body:has(#survey-nav.ckux-nav) .ckux-legal a:hover { color: var(--ckw-green-40); }
/* ---------- Page change motion (driven by scripts/custom-questions.js) ---------- */
/* While the next page loads: clicked button pulses, current questions dim */
body:has(#survey-nav.ckux-nav) .navigator .btn.ckux-running { animation: ckux-pulse 900ms ease-in-out infinite; }
body:has(#survey-nav.ckux-nav).ckux-leaving #outerframeContainer .question-container,
body:has(#survey-nav.ckux-nav).ckux-leaving #outerframeContainer .group-title,
body:has(#survey-nav.ckux-nav).ckux-leaving #outerframeContainer .group-description { opacity: 0.45; transition: opacity 150ms ease-out; }
/* New page: the whole content block comes in as one unit (no per-card stagger, so nothing "blinks").
It stays hidden until LimeSurvey has finished its own scripts (conditions, array setup). */
body:has(#survey-nav.ckux-nav) #outerframeContainer.ckux-pending { opacity: 0; }
body:has(#survey-nav.ckux-nav) #outerframeContainer.ckux-enter { animation: ckux-in-up 260ms cubic-bezier(.2,.8,.2,1) both; }
body:has(#survey-nav.ckux-nav) #outerframeContainer.ckux-enter-back { animation: ckux-in-left 260ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes ckux-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
@keyframes ckux-in-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ckux-in-left { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
body:has(#survey-nav.ckux-nav) .navigator .btn.ckux-running,
body:has(#survey-nav.ckux-nav) #outerframeContainer.ckux-enter,
body:has(#survey-nav.ckux-nav) #outerframeContainer.ckux-enter-back { animation: none; }
body:has(#survey-nav.ckux-nav) #outerframeContainer.ckux-pending { opacity: 1; }
}
/* ---------- Phones ---------- */
@media (max-width: 640px) {
body:has(#survey-nav.ckux-nav) #outerframeContainer .col-centered { padding-left: 12px; padding-right: 12px; }
body:has(#survey-nav.ckux-nav) .question-container { padding: 24px 20px; }
body:has(#survey-nav.ckux-nav) .question-text,
body:has(#survey-nav.ckux-nav) .ls-label-question { font-size: 18px; }
body:has(#survey-nav.ckux-nav) .group-title { font-size: 24px; }
body:has(#survey-nav.ckux-nav) .navigator { flex-direction: column-reverse; align-items: stretch; }
body:has(#survey-nav.ckux-nav) .navigator .btn { width: 100%; }
}
/*
Checkmk UX Research: error page (dark), "flatlined graph".
Replace the contents of css/errors.css with this file. LimeSurvey loads it on the error page only;
the fonts and the legal footer are styled here as well, so the page works on its own.
*/
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../files/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../files/Inter-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../files/Inter-Bold.woff2") format("woff2"); }
body.ckux-error {
margin: 0; padding: 0;
min-height: 100vh;
display: flex; flex-direction: column;
background: rgb(28 34 40) !important; /* midnight-grey-90 */
color: rgb(251 251 254);
font-family: "Inter", Verdana, Arial, Helvetica, sans-serif;
font-size: 14px; line-height: 1.5;
color-scheme: dark;
}
.ckux-error ::selection { background: rgb(9 88 67); color: rgb(251 251 254); }
.ckux-error__main { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; padding: 40px 0 48px; }
.ckux-error__wrap { width: 100%; max-width: 1024px; box-sizing: border-box; margin: 0 auto; padding: 0 24px; display: flex; flex-direction: column; gap: 24px; }
/* Header bar: same as the survey pages (sticky, page grey, logo + "UX Research") */
.ckux-error__header { position: sticky; top: 0; z-index: 10; flex: none; background: rgb(28 34 40); }
.ckux-error__header-inner { max-width: 1024px; min-height: 68px; box-sizing: border-box; margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; }
.ckux-error__brand { display: inline-flex; align-items: center; gap: 12px; color: rgb(251 251 254); text-decoration: none; }
.ckux-error__brand:focus-visible { outline: 2px solid rgb(21 209 160); outline-offset: 4px; border-radius: 2px; }
.ckux-error__logo { display: block; height: 44px; width: auto; max-width: none; }
.ckux-error__wordmark { font-size: 18px; font-weight: 700; }
.ckux-error__divider { width: 1px; height: 26px; background: rgb(48 57 70); }
.ckux-error__name { font-size: 14px; font-weight: 600; color: rgb(220 220 224); }
/* Card */
.ckux-error__card { background: rgb(32 39 46); border: 1px solid rgb(48 57 70); border-radius: 4px; overflow: hidden; }
/* Graph */
.ckux-error__graph { position: relative; height: 160px; }
.ckux-error__graph svg { display: block; width: calc(100% - 29px); height: 100%; } /* line ends exactly at the centre of the waiting dot */
/* Neutral grey: the graph says "data stopped", not OK (green) or alarm (red/yellow) */
.ckux-error__line { fill: none; stroke: rgb(174 174 183); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ckux-error__flat { fill: none; stroke: rgb(106 124 149); stroke-width: 2; stroke-dasharray: 6 7; vector-effect: non-scaling-stroke; }
.ckux-error__dot,
.ckux-error__halo { position: absolute; border-radius: 50%; pointer-events: none; }
.ckux-error__dot { top: 143.8px; right: 24px; width: 10px; height: 10px; background: rgb(220 220 224); } /* the focal point */
.ckux-error__halo { top: 135.8px; right: 16px; width: 26px; height: 26px; background: rgb(220 220 224 / 30%); opacity: 0; }
/* Text */
.ckux-error__body { padding: 8px 48px 44px; display: flex; flex-direction: column; gap: 14px; }
.ckux-error__title { margin: 0; font-family: inherit; font-size: 34px; line-height: 1.2; font-weight: 700; }
/* The default theme colors error headings red; on this page red would suggest the participant did something wrong */
body.ckux-error .ckux-error__title,
body.ckux-error .ckux-error__title * { color: rgb(251 251 254) !important; }
.ckux-error__message { max-width: 64ch; font-size: 16px; line-height: 1.6; color: rgb(220 220 224); }
.ckux-error__message p { margin: 0 0 12px; }
.ckux-error__action { margin: 12px 0 0; font-size: 15px; }
/* Links LimeSurvey puts into the error message (e.g. "Click here to start the survey." after an
expired session) are the way forward, so they become the primary button; "Back to all surveys" stays a quiet link */
.ckux-error__message a {
display: inline-flex; align-items: center; justify-content: center;
min-height: 44px; margin-top: 12px; padding: 0 24px;
background: rgb(21 209 160); border: 1px solid rgb(21 209 160); border-radius: 4px;
color: rgb(0 0 0) !important; font-size: 15px; font-weight: 700; line-height: 1.2;
text-decoration: none !important;
transition: background-color 120ms ease-out;
}
.ckux-error__message a:hover,
.ckux-error__message a:focus { background: color-mix(in srgb, rgb(21 209 160) 75%, white 25%); color: rgb(0 0 0) !important; }
.ckux-error__message a:focus-visible { outline: 2px solid rgb(21 209 160); outline-offset: 2px; }
.ckux-error__message:has(a) + .ckux-error__action,
.ckux-error__message:has(a) ~ .ckux-error__action { margin-top: 4px; }
.ckux-error__link { display: inline-flex; align-items: center; gap: 6px; color: rgb(251 251 254); font-weight: 600; text-decoration: none; text-underline-offset: 2px; }
.ckux-error__link:hover { color: rgb(68 218 179); text-decoration: underline; }
.ckux-error__link:focus-visible { outline: 2px solid rgb(21 209 160); outline-offset: 2px; border-radius: 2px; }
.ckux-error__arrow { flex: none; transition: transform 150ms ease-out; }
.ckux-error__link:hover .ckux-error__arrow { transform: translateX(-4px); }
.ckux-error__trace { margin: 8px 0 0; padding: 12px; max-height: 240px; overflow: auto; background: rgb(28 34 40); color: rgb(174 174 183); border-radius: 4px; font-size: 12px; white-space: pre-wrap; }
/* Legal footer (footer.twig) */
.ckux-error .ckux-legal { flex: none; font-size: 11px; }
.ckux-error .ckux-legal__inner { max-width: 1024px; margin: 0 auto; padding: 10px 24px 12px; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; }
.ckux-error .ckux-legal a { color: rgb(147 147 159); font-size: 11px; text-decoration: none; text-underline-offset: 2px; }
.ckux-error .ckux-legal a:hover { color: rgb(68 218 179); text-decoration: underline; }
.ckux-error .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; }
/* Animation: the graph appears left to right like incoming data, slows at the drop,
then the dot appears and its halo pulses slowly ("waiting for data") */
@media (prefers-reduced-motion: no-preference) {
.ckux-error__graph svg { animation: ckux-error-reveal 2600ms linear 400ms backwards; }
.ckux-error__dot { animation: ckux-error-fade 300ms ease-out 2950ms backwards; }
.ckux-error__halo { animation: ckux-error-pulse 2400ms ease-out 3250ms infinite; }
}
@keyframes ckux-error-reveal {
0% { clip-path: inset(0 100% 0 0); }
55% { clip-path: inset(0 38% 0 0); }
68% { clip-path: inset(0 36% 0 0); }
100% { clip-path: inset(0 0 0 0); }
}
@keyframes ckux-error-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ckux-error-pulse {
0% { opacity: 0; transform: scale(0.5); }
30% { opacity: 0.9; transform: scale(0.9); }
100% { opacity: 0; transform: scale(1.4); }
}
@media (max-width: 640px) {
.ckux-error__logo { height: 34px; }
.ckux-error__body { padding: 8px 20px 28px; }
.ckux-error__title { font-size: 28px; }
.ckux-error__graph { height: 120px; }
.ckux-error__dot { top: 106.6px; }
.ckux-error__halo { top: 98.6px; }
}