/* =========================================================
LEESWIJZER VOOR ONDERHOUD
Specifiek voor Duurzaamheid 2026 (sqid 1921), Kwaliteitsscan
(sqid 1947) en vragenlijst 1955, gemarkeerd met [W01] tot [W27].
TWEE SCOPES
1. Overzichtspagina: marker in 'Tekst bij overzicht':
,
of
2. Invoerpagina: tabel-id van de vragen:
table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]
HOE ZET IK EEN WIJZIGING UIT VOOR EEN LIJST
Haal die lijst uit de :has() opsomming van dat blok. Voorbeeld:
:has(.qlist-1921, .qlist-1947, .qlist-1955) wordt
:has(.qlist-1947, .qlist-1955). Voor een aantal blokken staat
onderaan een kant en klaar [Wxx-UIT] blok in commentaar.
INDEX
Overzichtspagina
W01 introkolom links verborgen
W02 Zoeken en Exporteer naar Excel verborgen
W03a kader vult ruimte van introkolom op (hoort bij W01)
W03b kader vult ruimte van Zoeken en Export op (hoort bij W02)
W04 kolom % ingevuld verborgen
W05 subheaderrij VERPLICHT en OPTIONEEL verborgen
W06 kolommen VERPLICHT en OPTIONEEL verborgen
W07 categoriekolom op 100 procent (hoort bij W04 t/m W06)
Invoerpagina
W08 filterregel boven de vragen verborgen
W09 vraagcode (icode) onzichtbaar in de kaart
W10 kopregel met Vraag en de jaartallen volledig verborgen
W11 bredere contentkolom (1080 px container, 840 px vragen)
W12 elke vraag als kaart | technisch één pakket
W13 gestapelde layout in plaats van kolommen | met W12
W14 vorige cyclus volledig uit beeld, kaart én paneel
W15 indicatorcel visueel weggewerkt | pakket met W12 en W13
W16 typografie vraagtekst
W17 tussenkoppen groter
W18 antwoordopties als klikbare blokken
W19 invoervelden en pulldowns in huisstijl
W20 numerieke velden 160 px en links uitgelijnd
W21 uitkomst berekening groot en blauw
W22 paneel .qinfo breedte, lichtblauw kader, alleen opmaak
W23 routering routing_hide voorrang (technisch, geen keuze)
W26 paneel .qinfo inhoud opgemaakt: tabbalk, toelichting,
nvt en nvh, opmerkingen, logboek, vraag-id onderaan
W27 vraagspecifiek uitlichten op vraag-id (ambitieniveau)
VERVALLEN
W24 eigen hovervakje uit td.previous en span.description
W25 losse zwevende waarde vorige cyclus
W28 vorige cyclus als popup bij mouse-over
Alle drie verwijderd. De weergave van de vorige cyclus
werkte in geen van deze vormen goed. Zie [W14] voor wat
er nu gebeurt en waarom.
DRIE KOSTBARE LESSEN, NIET WEGHALEN
1. SPECIFICITEIT BIJ table.qheader
De standaardregel hieronder is
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), ...) table.qheader
en die bevat drie classes in de :has(). Een regel met maar
één class in de :has() verliest daarvan, ook met !important
en ook als hij verder in het bestand staat, want bij gelijke
!important wint de hoogste specificiteit. Daarom is [W10]
bewust extra specifiek gemaakt met .sitecontent ervoor, een
dubbele :not() en .qheader.qheader. Maak dat niet 'netter',
dan komt de balk terug.
2. GEEN position: fixed OP .qinfo
CViews zet per vraag een inline 'top' op .qinfo en
positioneert het paneel absoluut binnen div.questions. Zet je
position: fixed met top: auto, dan rekent de browser vanaf de
statische plek in het document en valt het paneel buiten
beeld. Het paneel is er dan wel, maar je ziet het niet.
Raak in [W22] daarom nooit position, top, left, right,
display of visibility aan.
3. GEEN display OP DE TABBLADEN
CViews wisselt de tabbladen met een inline display op
#tc_qlisttab en #tc_infotab. Een inline display verslaat
altijd de stylesheet. Om dezelfde reden werkt flex met order
niet binnen een tabblad, tenzij je alleen flex-direction en
order zet en display met rust laat. Dat is wat [W26] doet.
========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap');
body {
background-color: #ffffff;
color: #444444;
font-family: "Poppins", Arial, Verdana, sans-serif;
font-weight: 300;
font-size: 1.125rem;
line-height: 1.8;
margin: 0;
padding: 0;
}
div, p, td, th, fieldset, input, textarea, select {
color: #444444;
font-size: 1rem;
font-family: "Poppins", Arial, Verdana, sans-serif;
font-weight: 300;
line-height: 1.8;
}
table, tr, td {
font-family: "Poppins", Arial, Verdana, sans-serif;
}
p {
color: inherit;
font-size: inherit;
line-height: inherit;
font-family: inherit;
margin-top: 1rem;
margin-bottom: 1rem;
letter-spacing: 0.2px;
}
p.intro {
font-weight: 500;
font-size: inherit;
line-height: 1.6;
color: #006E98;
}
@media (min-width: 769px) {
p.intro {
font-size: 1.125rem;
}
}
@media (min-width: 1200px) {
p.intro {
font-size: 1.25rem;
}
}
.highlight-color {
color: #3B2D55 !important;
}
.highlight-bg {
background-color: #008FC5 !important;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
font-family: "Poppins", Arial, Verdana, sans-serif;
font-weight: 700;
line-height: 1.1;
margin-top: 0;
margin-bottom: 1rem;
color: #3B2D55;
}
h1, .h1 {
font-size: 2.75rem;
}
h2, .h2 {
font-size: 2.1rem;
}
h3, .h3 {
font-size: 1.5rem;
color: #3B2D55;
text-transform: uppercase;
}
h4, .h4 {
font-size: 1.2rem;
}
h5, .h5 {
font-size: 1rem;
}
h6, .h6 {
font-size: 0.9rem;
}
h2.highlight {
color: #3B2D55;
}
a:link,
a:visited,
a:hover {
color: #008FC5;
}
a:not([class*='btn']):not([class*='button']),
a[href]:not([class*='btn']):not([class*='button']) {
text-decoration: none;
transition: all 0.2s ease;
}
/* HEADER */
.siteheader {
position: relative;
background-image: none;
background-repeat: no-repeat;
background-position: 0 0;
background-color: #ffffff;
min-height: 145px;
height: auto;
padding: 0;
font-size: 11px;
font-family: "Poppins", Arial, Verdana, sans-serif;
}
/* logo uitlijnen met contentkolom van 1128px */
.siteheader::before {
content: "";
position: absolute;
left: calc(50% - 552px);
top: 38px;
width: 260px;
height: 95px;
background-image: url("/download/43/WBFKO/204184%20Logo%20WKK%20DEF%20RGB.jpg");
background-size: contain;
background-repeat: no-repeat;
background-position: left center;
z-index: 5;
pointer-events: none;
}
/* responsive logo blijft uitgelijnd met contentkolom */
@media (max-width: 1199px) {
.siteheader {
min-height: 115px;
}
.siteheader::before {
left: calc(50% - 354px);
top: 26px;
width: 240px;
height: 80px;
}
}
@media (max-width: 767px) {
.siteheader {
min-height: 95px;
}
.siteheader::before {
left: 20px;
top: 18px;
width: 210px;
height: 70px;
}
}
.headerimage {
background-image: none;
width: 100%;
margin: 0;
padding: 10px 0 30px 0;
background-color: #ffffff;
}
/* benchmarknaam weg */
.benchmarkname {
display: none !important;
}
/* MAINMENU */
.mainmenu .padding {
padding-top: 15px;
}
.mainmenu {
background-image: none !important;
height: 50px;
position: relative;
background-color: #ffffff !important;
border: 0 !important;
box-shadow: none !important;
}
.mainmenu ul {
list-style: none;
padding: 0;
margin: 0;
text-align: center;
background: transparent !important;
}
.mainmenu ul li {
display: inline-block;
position: relative;
margin: 0;
padding: 0 14px;
height: 33px;
color: #008FC5;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
vertical-align: middle;
}
/* oude separator op a uitzetten */
.mainmenu ul li a::after {
content: none !important;
display: none !important;
}
/* nieuwe separator stabiel op li */
.mainmenu ul li:not(:last-child)::after {
content: "";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 18px;
background-color: #666666;
}
.mainmenu ul li a {
display: inline-block;
height: 28px;
font-family: Arial, Verdana, Sans-Serif;
margin: 9px 0;
position: relative;
background: transparent !important;
background-image: none !important;
background-color: transparent !important;
border: 0 !important;
box-shadow: none !important;
outline: 0 !important;
}
.mainmenu ul li span {
display: inline-block;
height: 28px;
padding: 0;
margin-left: 0;
cursor: pointer;
font-weight: 400 !important;
color: #666666;
text-transform: uppercase;
background: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
}
.mainmenu ul li span:hover {
color: #d73564;
}
.mainmenu a:link,
.mainmenu a:visited,
.mainmenu a:hover {
text-decoration: none;
background: transparent !important;
background-image: none !important;
background-color: transparent !important;
box-shadow: none !important;
border: 0 !important;
outline: 0 !important;
}
.mainmenu ul li a:hover {
background-image: none !important;
background-color: transparent !important;
color: #d73564 !important;
box-shadow: none !important;
border: 0 !important;
outline: 0 !important;
}
.mainmenu ul li a:hover span {
background-image: none !important;
background-color: transparent !important;
color: #d73564 !important;
box-shadow: none !important;
border: 0 !important;
outline: 0 !important;
}
.mainmenu ul li.active a {
background-image: none !important;
background-color: transparent !important;
color: #3B2D55 !important;
box-shadow: none !important;
border-left: 0 !important;
border-right: 0 !important;
border-top: 0 !important;
}
.mainmenu ul li.active a span {
background-image: none !important;
background-color: transparent !important;
color: #3B2D55 !important;
box-shadow: none !important;
}
.mainmenu span {
color: #666666;
}
.mainmenu a:hover span {
color: #d73564 !important;
}
.mainmenu .active a {
background-color: transparent !important;
border-bottom: none;
}
.mainmenu .active a span,
.mainmenu .active a:hover span {
color: #3B2D55 !important;
}
/* fix tegen wit randje / driehoek / hoverpaneel */
.mainmenu ul li::before,
.mainmenu ul li a::before,
.mainmenu ul li span::before,
.mainmenu ul li span::after {
background-image: none !important;
box-shadow: none !important;
}
.mainmenu ul li:hover::before,
.mainmenu ul li a:hover::before,
.mainmenu ul li a:hover::after,
.mainmenu ul li:hover > a::before,
.mainmenu ul li:hover > a::after,
.mainmenu ul li:hover > span::before,
.mainmenu ul li:hover > span::after,
.mainmenu ul li.active:hover::before {
content: none !important;
display: none !important;
border: 0 !important;
background: none !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
}
.mainmenu ul li:hover,
.mainmenu ul li:hover > a,
.mainmenu ul li:hover > span {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border-left: 0 !important;
border-right: 0 !important;
border-top: 0 !important;
box-shadow: none !important;
outline: 0 !important;
}
/* mogelijke submenu-container die wit kader/pijl geeft */
.mainmenu ul li ul,
.mainmenu ul li:hover ul,
.mainmenu ul li.active ul {
background: #ffffff !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
outline: 0 !important;
}
.mainmenu ul li ul::before,
.mainmenu ul li ul::after,
.mainmenu ul li:hover ul::before,
.mainmenu ul li:hover ul::after,
.mainmenu ul li.active ul::before,
.mainmenu ul li.active ul::after {
content: none !important;
display: none !important;
border: 0 !important;
background: none !important;
box-shadow: none !important;
}
/* SUBMENU */
.submenu ul li a:hover {
background-image: none;
color: #008FC5;
}
.submenu ul li a:hover span {
background-image: none;
color: #008FC5;
}
.submenu ul li.active a {
background-image: none;
color: #008FC5;
}
.submenu ul li.active a span {
background-image: none;
color: #008FC5;
}
.submenu a:link,
.submenu a:visited,
.submenu a:hover {
color: #008FC5;
text-decoration: none;
font-weight: bold;
font-family: "Poppins", Arial, Verdana, sans-serif;
}
.submenu .active {
background-color: #008FC5;
}
.submenu .active a:link span,
.submenu .active a:visited span,
.submenu .active a:hover span {
color: #FFFFFF;
}
/* FOOTER */
.sitefooter {
background-image: none;
background-repeat: no-repeat;
padding-top: 15px;
background-color: #ffffff;
font-family: "Poppins", Arial, Verdana, sans-serif;
}
.sitefooter .clearfix a {
font-size: 12px;
}
.sitefooter p {
font-size: 12px;
}
/* =========================================================
VOORTGANGSBLOK GEGEVENS INVOEREN
div.question-list-progress.box
ONDERHOUD: generiek voor ALLE lijsten. Aanpassen raakt alle
benchmarks.
========================================================= */
.sitecontent .question-list-progress.box {
box-sizing: border-box;
position: relative;
top: 0;
background-image: none;
background-color: #ffffff;
border: 1px solid #E4E2E6;
border-radius: 0 0 48px 0;
box-shadow: 0 2px 10px rgba(59, 45, 85, 0.06);
padding: 32px 40px;
margin: 0 0 32px 0;
text-align: center;
overflow: hidden;
}
.sitecontent .question-list-progress.box h2 {
font-family: "Poppins", Arial, Verdana, sans-serif;
font-weight: 700;
font-size: 1.75rem;
line-height: 1.2;
color: #3B2D55;
margin: 0 0 20px 0;
overflow-wrap: break-word;
word-break: normal;
}
.sitecontent .question-list-progress.box h2 .date {
color: #008FC5;
}
.sitecontent .question-list-progress.box h2 img {
vertical-align: middle;
margin-left: 6px;
}
.sitecontent .question-list-progress.box .progress-bar {
background-image: none;
background-color: #EDECEF;
border: 0;
border-radius: 999px;
height: 8px;
margin: 0 0 20px 0;
overflow: hidden;
}
.sitecontent .question-list-progress.box .progress-bar .progress {
background-image: none;
background-color: #008FC5;
border-radius: 999px;
height: 8px;
font-size: 0;
line-height: 0;
transition: width 0.3s ease;
}
.sitecontent .question-list-progress.box .progress-bar.completed .progress {
background-color: #3B2D55;
}
.sitecontent .question-list-progress.box p.message {
font-family: "Poppins", Arial, Verdana, sans-serif;
font-weight: 300;
font-size: 1rem;
line-height: 1.6;
color: #444444;
margin: 0 0 20px 0;
}
.sitecontent .question-list-progress.box .button {
display: inline-block;
background: none;
background-image: none;
border: 0;
margin: 0;
padding: 0;
}
.sitecontent .question-list-progress.box .button a,
.sitecontent .question-list-progress.box .button a:link,
.sitecontent .question-list-progress.box .button a:visited,
.sitecontent .question-list-progress.box a.button,
.sitecontent .question-list-progress.box a.button:link,
.sitecontent .question-list-progress.box a.button:visited {
display: inline-block;
background-image: none;
background-color: #008FC5;
border: 0;
border-radius: 0 0 16px 0;
color: #ffffff;
font-family: "Poppins", Arial, Verdana, sans-serif;
font-weight: 500;
font-size: 1rem;
line-height: 1;
padding: 14px 28px;
text-decoration: none;
white-space: nowrap;
transition: background-color 0.2s ease;
}
.sitecontent .question-list-progress.box .button a:hover,
.sitecontent .question-list-progress.box a.button:hover {
background-color: #3B2D55;
color: #ffffff;
}
.sitecontent .question-list-progress.box.completed {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
column-gap: 40px;
row-gap: 16px;
text-align: left;
}
.sitecontent .question-list-progress.box.completed .left {
float: none;
flex: 1 1 auto;
min-width: 0;
padding-right: 8px;
}
.sitecontent .question-list-progress.box.completed .right {
float: none;
flex: 0 0 auto;
text-align: right;
white-space: nowrap;
}
.sitecontent .question-list-progress.box.completed h2 {
margin: 0;
padding: 0;
border-bottom: 0;
}
.sitecontent .question-list-progress.box.completed h2.single-line-padding {
padding: 0;
}
.sitecontent .question-list-progress.box.completed p.message {
margin: 0;
}
@media (max-width: 768px) {
.sitecontent .question-list-progress.box {
padding: 24px 20px;
border-radius: 0 0 32px 0;
}
.sitecontent .question-list-progress.box h2 {
font-size: 1.375rem;
}
.sitecontent .question-list-progress.box.completed {
justify-content: flex-start;
column-gap: 20px;
}
.sitecontent .question-list-progress.box.completed .right {
text-align: left;
}
}
/* =========================================================
TABELLEN / VRAGENBLOKKEN
ONDERHOUD: generiek voor alle lijsten. Dit is de basislayout
waar 1921, 1947 en 1955 op terugvallen zodra je ze uit de
scope van de blokken [W11] tot [W27] haalt.
========================================================= */
table {
border-collapse: collapse;
border-spacing: 0;
}
table tr td,
table tr th {
padding: 0;
}
.question {
cursor: pointer;
}
.question td {
vertical-align: top;
border-bottom: 1px solid #d1d1d1;
}
.question td.indicator {
width: 20px;
border: 0;
background-image: none;
background-color: transparent;
}
.question.depth1 td {
border-top: 4px solid #d1d1d1;
background-image: none;
background-color: #ffffff;
}
.question.depth2 td,
.childorgquestion td {
background-image: none;
}
.question.depth1 td.indicator,
.question.depth2 td.indicator,
.childorgquestion td.indicator {
border: 0 !important;
background-image: none !important;
background-color: transparent !important;
box-shadow: none !important;
}
.question.active td {
background-image: none;
background-color: #e5f5fd;
}
.question.active td.indicator {
background-color: #e5f5fd !important;
}
table.question.depth1 td {
background-image: none;
}
/* MEERKEUZE-ANTWOORDEN */
.question .qinput,
.childorgquestion .qinput {
line-height: 1.5;
}
.question .qinput label,
.childorgquestion .qinput label {
float: none;
display: block;
overflow: hidden;
max-width: none;
line-height: 1.5em;
margin: 0 0 0.65rem 0;
padding: 0;
cursor: pointer;
}
.question input.boolean,
.question input.radio,
.question input.checkbox,
.childorgquestion input.boolean,
.childorgquestion input.radio,
.childorgquestion input.checkbox {
float: left;
padding: 0;
margin: 6px 6px 0 0;
width: 14px;
height: 14px;
position: static;
top: auto;
flex: none;
}
input.radio {
width: 14px;
height: 14px;
margin: 6px 6px 0 0;
}
.question .qinput label span,
.childorgquestion .qinput label span {
display: inline;
flex: none;
}
.question .qinput br,
.childorgquestion .qinput br {
display: none;
}
/* =========================================================
VASTE KOLOMMEN VOOR HEADER, VRAGEN EN TITELVRAGEN
ONDERHOUD: dit is de STANDAARDLAYOUT voor alle invoerpagina's.
Deze regels raken 1921, 1947 en 1955 ook, maar worden daar
overschreven door de kaartlayout [W12] en [W13].
LET OP: de regel voor table.qheader hieronder heeft drie
classes in de :has() en is daarmee specifieker dan een gewone
overschrijving. Zie les 1 in de leeswijzer bovenaan.
========================================================= */
@media (min-width: 769px) {
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title)) {
--vraag-deel: 28%;
--antwoord-deel: 47%;
--vorig-deel: 25%;
--status-breedte: 18px;
--info-breedte: 14px;
--indicator-breedte: 18px;
position: relative;
overflow: visible !important;
}
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title)) table.question:not(.title),
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title)) table.childorgquestion:not(.title) {
width: 100% !important;
table-layout: fixed !important;
}
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title)) table.question:not(.title) td,
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title)) table.childorgquestion:not(.title) td {
box-sizing: border-box;
min-width: 0 !important;
max-width: none !important;
}
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title)) table.question:not(.title) td.status,
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title)) table.childorgquestion:not(.title) td.status {
width: var(--status-breedte) !important;
}
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title)) table.question:not(.title) td.text,
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title)) table.childorgquestion:not(.title) td.text {
width: calc(
var(--vraag-deel)
- var(--status-breedte)
- var(--info-breedte)
) !important;
}
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title)) table.question:not(.title) td.info,
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title)) table.childorgquestion:not(.title) td.info {
width: var(--info-breedte) !important;
}
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title)) table.question:not(.title) td.qform,
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title)) table.childorgquestion:not(.title) td.qform {
width: var(--antwoord-deel) !important;
}
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title)) table.question:not(.title) td.previous,
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title)) table.childorgquestion:not(.title) td.previous {
width: calc(
var(--vorig-deel)
- var(--indicator-breedte)
) !important;
}
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title)) table.question:not(.title) td.indicator,
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title)) table.childorgquestion:not(.title) td.indicator {
width: var(--indicator-breedte) !important;
}
/* Binnenste elementen mogen de vaste kolommen niet oprekken */
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title)) td.text > .padding,
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title)) td.qform > .padding,
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title)) td.previous > .padding,
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title)) td.qform > .padding > div.qform,
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title)) td.qform .qinput {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
box-sizing: border-box;
}
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title)) td.qform select {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box;
}
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title)) td.qform textarea,
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title)) td.qform input[type="text"],
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title)) td.qform input[type="number"] {
max-width: 100% !important;
box-sizing: border-box;
}
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title)) td.qform .qinput label {
white-space: normal !important;
overflow-wrap: break-word;
word-break: normal;
}
/* ---------------- HEADER ----------------
Voor 1921, 1947 en 1955 wordt deze balk volledig verborgen
in [W10]. Zie les 1 in de leeswijzer over specificiteit. */
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title)) table.qheader {
display: table !important;
width: 100% !important;
table-layout: fixed !important;
border-collapse: collapse !important;
}
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title)) table.qheader tbody {
display: table-row-group !important;
}
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title)) table.qheader tr {
display: table-row !important;
}
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title)) table.qheader tr > td,
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title)) table.qheader tr > th {
display: table-cell !important;
box-sizing: border-box !important;
min-width: 0 !important;
max-width: none !important;
white-space: nowrap !important;
}
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title)) table.qheader tr > :nth-child(1) {
width: var(--status-breedte) !important;
}
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title)) table.qheader tr > :nth-child(2) {
width: calc(
var(--vraag-deel)
- var(--status-breedte)
) !important;
}
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title)) table.qheader tr > :nth-child(3) {
width: var(--antwoord-deel) !important;
}
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title)) table.qheader tr > :nth-child(4) {
width: calc(
var(--vorig-deel)
- var(--indicator-breedte)
) !important;
}
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title)) table.qheader tr > :nth-child(5) {
width: var(--indicator-breedte) !important;
}
/* ---------------- TITELVRAGEN ---------------- */
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title)) table.question.title,
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title)) table.childorgquestion.title {
width: calc(100% - var(--indicator-breedte)) !important;
table-layout: auto !important;
margin-right: var(--indicator-breedte) !important;
}
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title)) table.question.title td:not(.text),
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title)) table.childorgquestion.title td:not(.text) {
display: none !important;
}
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title)) table.question.title td.text,
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title)) table.childorgquestion.title td.text {
display: table-cell !important;
width: 100% !important;
box-sizing: border-box;
text-align: left !important;
}
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title)) table.question.title td.text > .padding,
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title)) table.childorgquestion.title td.text > .padding {
width: 100% !important;
max-width: none !important;
box-sizing: border-box;
padding: 20px 18px !important;
}
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title)) table.question.title td.text p,
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title)) table.childorgquestion.title td.text p {
width: auto !important;
max-width: none !important;
margin-top: 0 !important;
margin-bottom: 12px !important;
text-align: left !important;
}
/* ---------------- INDICATORPANEEL ----------------
Het paneel .qinfo staat als losse div naast div.qlist binnen
div.questions. CViews zet er per vraag een inline 'top' op.
Deze regels zetten alleen de horizontale plaats en de
breedte; de verticale plaats blijft van CViews.
Dit is precies de opzet die op de niet aangepaste lijsten
werkt. Voor 1921, 1947 en 1955 komt daar in [W22] alleen
breedte en opmaak bij, geen positionering. */
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title)) .qinfo {
right: auto !important;
left: calc(100% + 18px) !important;
width: 280px !important;
max-width: 280px !important;
box-sizing: border-box !important;
z-index: 1000 !important;
}
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title)) .qinfo .padding {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title)) .qinfo textarea,
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title)) .qinfo input,
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title)) .qinfo select {
max-width: 100% !important;
box-sizing: border-box !important;
}
}
/* Op smallere schermen blijft het paneel binnen het beeld. */
@media (min-width: 769px) and (max-width: 1199px) {
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title)) .qinfo {
left: auto !important;
right: 16px !important;
width: 260px !important;
max-width: calc(100vw - 32px) !important;
}
}
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title)) table.qheader tr > td,
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title)) table.qheader tr > th {
border-left: 0 !important;
border-right: 0 !important;
}
/* =========================================================
ANTWOORDTEKSTEN BINNEN DE ANTWOORDKOLOM HOUDEN
ONDERHOUD: generiek voor alle lijsten.
========================================================= */
@media (min-width: 769px) {
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title))
table.question:not(.title) td.qform,
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title))
table.childorgquestion:not(.title) td.qform {
overflow: hidden !important;
}
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title)) td.qform .qinput {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title)) td.qform .qinput label {
display: block !important;
width: auto !important;
max-width: none !important;
min-width: 0 !important;
overflow: hidden !important;
white-space: normal !important;
overflow-wrap: break-word !important;
word-break: normal !important;
box-sizing: border-box !important;
}
.questions:not(.benchmarking):has(table.question:not(.autoanswer):not(.title), table.childorgquestion:not(.autoanswer):not(.title)) td.qform .qinput label span {
display: inline !important;
max-width: none !important;
white-space: normal !important;
overflow-wrap: break-word !important;
word-break: normal !important;
}
}
/* =========================================================
BEREKENINGEN / AUTOANSWER
ONDERHOUD: generiek voor alle lijsten. De blauwe opmaak van
de uitkomst staat apart in [W21].
========================================================= */
@media (min-width: 769px) {
.questions:not(.benchmarking) table.question.autoanswer td.qform,
.questions:not(.benchmarking) table.childorgquestion.autoanswer td.qform,
.questions:not(.benchmarking) table.question.autoanswer td.qform > .padding,
.questions:not(.benchmarking) table.childorgquestion.autoanswer td.qform > .padding,
.questions:not(.benchmarking) table.question.autoanswer td.qform > .padding > div.qform,
.questions:not(.benchmarking) table.childorgquestion.autoanswer td.qform > .padding > div.qform {
text-align: left !important;
}
}
/* =========================================================
PER-VRAGENLIJST: OVERZICHTSPAGINA
Werkt via een marker in het veld 'Tekst bij overzicht':
Zonder marker matcht :has() niet en verandert er niets.
========================================================= */
/* >>> [W01] Introkolom links verborgen
Terugzetten voor één lijst: haal die lijst hier weg EN in
[W03a]. */
.sitecontent .padding.clearfix:has(.qlist-1921, .qlist-1947, .qlist-1955) > .col_1 {
display: none !important;
}
/* >>> [W02] Zoeken en Exporteer naar Excel verborgen
Terugzetten voor één lijst: scope aanpassen in dit blok EN
in [W03b], anders loopt de categoriekolom eroverheen. */
.sitecontent .padding.clearfix:has(.qlist-1921, .qlist-1947, .qlist-1955) .col_3 > .col_3.alpha.omega > .col_1.omega {
display: none !important;
}
/* >>> [W03a] Kader vult de ruimte van de introkolom op.
Hoort bij [W01]. */
.sitecontent .padding.clearfix:has(.qlist-1921, .qlist-1947, .qlist-1955) > .col_3 {
width: 100% !important;
float: none !important;
margin-left: 0 !important;
}
/* >>> [W03b] Kader vult de ruimte van Zoeken en Export op.
Hoort bij [W02]. */
.sitecontent .padding.clearfix:has(.qlist-1921, .qlist-1947, .qlist-1955) .col_3 > .col_3.alpha.omega > .col_2.alpha {
width: 100% !important;
float: none !important;
margin-right: 0 !important;
}
/* >>> [W04] Kolom '% ingevuld' verborgen
Terugzetten: blok [W04-UIT] onderaan. */
.sitecontent .padding.clearfix:has(.qlist-1921, .qlist-1947, .qlist-1955) table.catlist th.procentingevuld {
display: none !important;
}
/* >>> [W05] Tweede headerrij met VERPLICHT en OPTIONEEL verborgen
Terugzetten: blok [W05-UIT] onderaan. */
.sitecontent .padding.clearfix:has(.qlist-1921, .qlist-1947, .qlist-1955) table.catlist tbody.header tr:not(.maincat) {
display: none !important;
}
/* >>> [W06] Kolommen VERPLICHT en OPTIONEEL verborgen
Terugzetten: blok [W06-UIT] onderaan, dat draait ook [W07]
terug. */
.sitecontent .padding.clearfix:has(.qlist-1921, .qlist-1947, .qlist-1955) table.catlist td.right,
.sitecontent .padding.clearfix:has(.qlist-1921, .qlist-1947, .qlist-1955) table.catlist th.right {
display: none !important;
}
/* >>> [W07] Categoriekolom op 100 procent
Hoort bij [W04] tot [W06]. */
.sitecontent .padding.clearfix:has(.qlist-1921, .qlist-1947, .qlist-1955) table.catlist th.left,
.sitecontent .padding.clearfix:has(.qlist-1921, .qlist-1947, .qlist-1955) table.catlist td.left {
width: 100% !important;
}
/* =========================================================
PER-VRAGENLIJST: INVOERPAGINA BINNEN EEN CATEGORIE
Scope via de tabel-id van de vragen. De benchmarkmodule
gebruikt dezelfde id's maar in div.questions.benchmarking,
daarom bevat elke regel :not(.benchmarking).
Kaartpakket = [W12], [W13] en [W15]. Die drie horen bij elkaar
en gaan samen aan of uit voor een lijst.
========================================================= */
/* >>> [W08] Filterregel boven de vragen verborgen
Los uit te zetten: ja, blok [W08-UIT] onderaan. */
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) .questionlinks .question-list-filter {
display: none;
}
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) .questionlinks .toggle {
margin: 0;
padding: 0;
}
/* >>> [W09] Vraagcode (icode) onzichtbaar in de kaart
De code blijft leesbaar in het paneel als 'Vraag-ID', zie
[W26].
BELANGRIJK: het element blijft in de DOM en blijft renderen,
want routering en validatie in CViews hebben het nodig.
Gebruik hier nooit display:none of visibility:hidden.
Los uit te zetten: ja, blok [W09-UIT] onderaan. */
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.question td.text .icode,
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.childorgquestion td.text .icode {
display: inline;
font-size: 0;
line-height: 0;
color: transparent;
height: 0;
margin: 0;
padding: 0;
overflow: hidden;
pointer-events: none;
user-select: none;
}
/* >>> [W10] Kopregel met 'Vraag' en de jaartallen volledig weg
WAAROM DEZE SELECTOR ZO OMSLACHTIG IS
De standaardregel voor table.qheader hierboven heeft drie
classes in de :has(), en die verslaat een gewone regel met
één class, ook met !important. Daarom staat hier
.sitecontent ervoor, een dubbele :not(.benchmarking) en
.qheader.qheader. Samen is dat specifieker, en dus wint
deze regel. Maak dit niet korter of 'netter', dan komt de
balk terug.
Los uit te zetten: ja, blok [W10-AAN] onderaan. */
.sitecontent .questions:not(.benchmarking):not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.qheader.qheader,
.sitecontent .questions:not(.benchmarking):not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.qheader.qheader tbody,
.sitecontent .questions:not(.benchmarking):not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.qheader.qheader tr,
.sitecontent .questions:not(.benchmarking):not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.qheader.qheader tr > td,
.sitecontent .questions:not(.benchmarking):not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.qheader.qheader tr > th {
display: none !important;
}
/* >>> [W11] Bredere contentkolom
De container is 1080 px en het vragenblok 840 px. Die 840
is bewust smaller dan de 880 van eerder, zodat het bredere
paneel uit [W22] ernaast past zonder buiten de container te
vallen.
Los uit te zetten: ja, alleen breedte, geen structuur. */
@media (min-width: 769px) {
.sitecontent > .padding:has(.questions:not(.benchmarking) table[id^="q_i1921_"]),
.sitecontent > .padding:has(.questions:not(.benchmarking) table[id^="q_i1947_"]),
.sitecontent > .padding:has(.questions:not(.benchmarking) table[id^="q_i1955_"]) {
box-sizing: border-box;
width: auto;
max-width: 1080px;
margin: 0 auto;
padding-left: 24px;
padding-right: 24px;
}
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) {
max-width: 840px;
}
}
/* >>> [W12] Elke vraag als kaart
Hoort bij het kaartpakket met [W13] en [W15].
De achtergrondkleur staat in een variabele, zodat [W27]
losse vragen kan uitlichten door alleen die variabele te
veranderen. */
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.question:not(.title),
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.childorgquestion:not(.title) {
--kaart-achtergrond: #ffffff;
--kaart-rand: #E4E2E6;
display: block;
box-sizing: border-box;
width: 100%;
background-color: var(--kaart-achtergrond);
border: 1px solid var(--kaart-rand);
border-radius: 0 0 24px 0;
margin: 0 0 16px 0;
padding: 20px 24px;
cursor: default;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.question:not(.title):hover,
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.childorgquestion:not(.title):hover {
border-color: #CFD8DC;
box-shadow: 0 2px 10px rgba(59, 45, 85, 0.05);
}
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.question:not(.title) tbody,
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.childorgquestion:not(.title) tbody {
display: block;
}
/* >>> [W13] Gestapelde layout in plaats van kolommen
Hoort bij het kaartpakket met [W12] en [W15]. */
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.question:not(.title) > tbody > tr,
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.childorgquestion:not(.title) > tbody > tr {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
column-gap: 8px;
}
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.question:not(.title) > tbody > tr > td,
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.childorgquestion:not(.title) > tbody > tr > td {
display: block;
box-sizing: border-box;
border: 0;
background: none;
vertical-align: top;
}
/* het sterretje voor de vraag is weg. De cel blijft renderen,
want CViews gebruikt td.status voor de validatiestatus van de
vraag; alleen de inhoud is onzichtbaar gemaakt. Bewust geen
display:none.
Wil je het sterretje terug, gebruik dan blok [W13-STER]
onderaan. */
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.question:not(.title) > tbody > tr > td.status,
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.childorgquestion:not(.title) > tbody > tr > td.status {
order: 1;
flex: 0 0 0;
width: 0;
max-width: 0;
height: 0;
font-size: 0;
line-height: 0;
color: transparent;
margin: 0;
padding: 0;
overflow: hidden;
pointer-events: none;
user-select: none;
}
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.question:not(.title) > tbody > tr > td.text,
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.childorgquestion:not(.title) > tbody > tr > td.text {
order: 2;
flex: 1 1 0%;
min-width: 0;
}
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.question:not(.title) > tbody > tr > td.info,
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.childorgquestion:not(.title) > tbody > tr > td.info {
order: 3;
flex: 0 0 auto;
}
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.question:not(.title) > tbody > tr > td.qform,
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.childorgquestion:not(.title) > tbody > tr > td.qform {
order: 4;
flex: 0 0 100%;
min-width: 0;
overflow: visible !important;
margin-top: 4px;
}
/* >>> [W14] Vorige cyclus volledig uit beeld
De waarde van vorig jaar en het tabje ernaar toe zijn
overal verborgen: niet in de kaart, niet in het paneel.
WAAROM
Er zijn drie vormen geprobeerd: als kolom in de kaart, als
zwevend vakje en als popup bij mouse-over. Geen ervan gaf
een rustig en betrouwbaar beeld. De belangrijkste oorzaken,
uit de broncode van CViews:
1. De waarde staat als platte tekst in td.previous, binnen
de vraagtabel, en nergens anders in de HTML. CSS kan
elementen niet tussen containers verplaatsen, dus hij
kan niet in het toelichtingskader komen.
2. Het tabje #prevqlisttab in het paneel is niet voor de
waarde maar voor de OPMERKING van vorig jaar. In
questions.inc.html staat:
var premark = $(refElement).find('.premark').html();
if(premark) { $('#prevqlisttab').show(); } else { hide(); }
Het tabje verschijnt dus alleen als er vorig jaar een
opmerking bij die vraag is ingevuld, en bevat dan die
opmerking, niet de score.
3. Een lege cel bevat een harde spatie, dus CSS kan niet
zien of er een waarde in staat. Dat gaf koppen zonder
inhoud.
Wil je de vorige cyclus alsnog in het toelichtingskader,
dan is een wijziging in de template van het platform nodig
(questions.inc.html, rond regel 1484). Dat is geen
stylesheetwerk en loopt via de leverancier.
BELANGRIJK: de cel blijft renderen, alleen zonder ruimte en
zonder tekst. Bewust geen display:none, want routering en
validatie in CViews hebben de cel nodig.
Los uit te zetten: blok [W14-UIT] onderaan zet de
standaardkolom van CViews terug. */
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.question:not(.title) > tbody > tr > td.previous,
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.childorgquestion:not(.title) > tbody > tr > td.previous {
order: 6;
flex: 0 0 0;
width: 0;
max-width: 0;
height: 0;
font-size: 0;
line-height: 0;
color: transparent;
margin: 0;
padding: 0;
overflow: hidden;
pointer-events: none;
user-select: none;
}
/* het tabje van de vorige cyclus en de bijbehorende inhoud weg,
zodat er in het paneel alleen het jaartal van de huidige cyclus
en het i-tje met het logboek overblijven */
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) .qinfo #prevqlisttab,
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) .qinfo #tc_prevqlisttab {
display: none !important;
}
/* >>> [W15] Indicatorcel visueel weggewerkt
BELANGRIJK: de cel blijft renderen, want routering en
validatie in CViews hebben hem nodig. Bewust geen
display:none. Hoort bij het kaartpakket [W12] en [W13]. */
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.question:not(.title) > tbody > tr > td.indicator,
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.childorgquestion:not(.title) > tbody > tr > td.indicator {
order: 7;
flex: 0 0 0;
width: 0;
max-width: 0;
height: 0;
font-size: 0;
line-height: 0;
color: transparent;
margin: 0;
padding: 0;
overflow: hidden;
pointer-events: none;
user-select: none;
}
/* actieve vraag: blauwe rand in plaats van blauw vlak */
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.question.active:not(.title) {
border-color: #008FC5;
box-shadow: 0 2px 12px rgba(0, 143, 197, 0.12);
}
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.question.active > tbody > tr > td,
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.question.active > tbody > tr > td.indicator {
background-color: transparent !important;
}
/* >>> [W16] Typografie vraagtekst. Los uit te zetten: ja. */
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.question:not(.title) td.text > .padding,
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.childorgquestion:not(.title) td.text > .padding {
padding: 0;
}
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.question:not(.title) td.text p,
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.childorgquestion:not(.title) td.text p {
margin: 0;
font-size: 1.0625rem;
font-weight: 500;
line-height: 1.45;
color: #3B2D55;
hyphens: none;
-webkit-hyphens: none;
word-break: normal;
overflow-wrap: break-word;
}
/* >>> [W17] Tussenkoppen groter. Los uit te zetten: ja. */
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.question.title td.text > .padding,
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.childorgquestion.title td.text > .padding {
padding: 28px 0 8px 0 !important;
}
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.question.title td.text p,
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.childorgquestion.title td.text p {
font-size: 1.25rem;
font-weight: 700;
color: #3B2D55;
margin-bottom: 0 !important;
}
/* >>> [W18] Antwoordopties als klikbare blokken
LET OP: de scope is bewust beperkt tot td.qform binnen een
vraagtabel. Zonder die beperking worden ook de nvt- en
nvh-checkboxes in het paneel als grote blokken opgemaakt,
en die hebben in [W26] hun eigen compacte opmaak.
Los uit te zetten: ja. Dan vallen de opties terug op de
standaardregels met 14 px keuzerondjes. */
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.question td.qform > .padding,
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.childorgquestion td.qform > .padding {
padding: 0;
}
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.question td.qform .qinput,
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.childorgquestion td.qform .qinput {
overflow: visible !important;
}
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.question td.qform .qinput > div.clearfix,
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.childorgquestion td.qform .qinput > div.clearfix {
display: flex;
align-items: flex-start;
gap: 12px;
box-sizing: border-box;
background-color: #ffffff;
border: 1px solid #E4E2E6;
border-radius: 0 0 12px 0;
padding: 12px 16px;
margin: 0 0 8px 0;
cursor: pointer;
transition: border-color 0.15s ease, background-color 0.15s ease;
}
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.question td.qform .qinput > div.clearfix:hover,
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.childorgquestion td.qform .qinput > div.clearfix:hover {
border-color: #008FC5;
background-color: #F4FBFE;
}
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.question td.qform .qinput > div.clearfix:has(input:checked),
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.childorgquestion td.qform .qinput > div.clearfix:has(input:checked) {
border-color: #008FC5;
background-color: #E8F5FC;
box-shadow: inset 0 0 0 1px #008FC5;
}
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.question td.qform .qinput > div.clearfix > input,
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.childorgquestion td.qform .qinput > div.clearfix > input {
float: none;
flex: 0 0 auto;
width: 18px;
height: 18px;
margin: 3px 0 0 0;
accent-color: #008FC5;
cursor: pointer;
}
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.question td.qform .qinput > div.clearfix > label,
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.childorgquestion td.qform .qinput > div.clearfix > label {
flex: 1 1 auto;
display: block !important;
margin: 0 !important;
padding: 0;
overflow: visible !important;
line-height: 1.5;
font-size: 1rem;
color: #3B2D55;
cursor: pointer;
hyphens: none;
-webkit-hyphens: none;
word-break: normal;
overflow-wrap: break-word;
}
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.question td.qform .qinput > div.clearfix:has(input:checked) > label,
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.childorgquestion td.qform .qinput > div.clearfix:has(input:checked) > label {
font-weight: 500;
}
/* >>> [W19] Invoervelden en pulldowns in huisstijl
Scope beperkt tot td.qform, zodat het opmerkingenveld in
het paneel zijn eigen opmaak uit [W26] houdt.
Los uit te zetten: ja, puur opmaak. */
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.question td.qform select,
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.question td.qform input[type="text"],
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.question td.qform input[type="number"],
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.question td.qform textarea,
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.childorgquestion td.qform select,
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.childorgquestion td.qform input[type="text"],
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.childorgquestion td.qform input[type="number"],
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.childorgquestion td.qform textarea {
box-sizing: border-box;
width: 100% !important;
max-width: 560px !important;
border: 1px solid #E4E2E6;
border-radius: 0 0 12px 0;
padding: 10px 14px;
font-family: "Poppins", Arial, Verdana, sans-serif;
font-size: 1rem;
color: #3B2D55;
background-color: #ffffff;
transition: border-color 0.15s ease;
}
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.question td.qform select:focus,
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.question td.qform input[type="text"]:focus,
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.question td.qform input[type="number"]:focus,
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.question td.qform textarea:focus,
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.childorgquestion td.qform select:focus,
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.childorgquestion td.qform input[type="text"]:focus,
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.childorgquestion td.qform input[type="number"]:focus,
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.childorgquestion td.qform textarea:focus {
border-color: #008FC5;
outline: none;
}
/* >>> [W20] Numerieke velden 160 px en links uitgelijnd
Geldt voor dt_gebrokengetal, dt_getalafgerond,
dt_getalmet1decimaal en dt_getalmet2decimaal. CViews zet op
deze vragen de class 'numeric' op de tabel en lijnt de
invoer rechts uit; dat wordt hier teruggedraaid.
Los uit te zetten: ja. */
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.question.numeric td.qform,
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.question.numeric td.qform > .padding,
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.question.numeric td.qform > .padding > div.qform,
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.question.numeric td.qform .qinput,
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.childorgquestion.numeric td.qform,
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.childorgquestion.numeric td.qform > .padding,
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.childorgquestion.numeric td.qform > .padding > div.qform,
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.childorgquestion.numeric td.qform .qinput {
text-align: left !important;
}
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.question.numeric td.qform input[type="text"],
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.question.numeric td.qform input[type="number"],
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.childorgquestion.numeric td.qform input[type="text"],
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.childorgquestion.numeric td.qform input[type="number"] {
display: block;
width: 160px !important;
max-width: 160px !important;
margin: 0 !important;
float: none !important;
text-align: left;
padding: 10px 14px;
}
/* >>> [W21] Uitkomst van een automatische berekening
Effect: de uitkomst van een autoanswer leest precies als
een gekozen antwoord: 1rem, gewicht 500, paars (#3B2D55).
Zie [W18] voor de opmaak van een gekozen antwoordblok.
LET OP: de waarde zit in span.value binnen div.qform, en
niet in div.qform zelf. Een regel op alleen div.qform
raakt de span niet, want die heeft eigen opmaak uit de
platform-CSS. Daarom staan hier beide.
Los uit te zetten: ja, puur opmaak. De links uitlijning
blijft dan staan via het generieke autoanswer blok. */
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.question.autoanswer td.qform > .padding > div.qform,
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.question.autoanswer td.qform > .padding > div.qform span.value,
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.childorgquestion.autoanswer td.qform > .padding > div.qform,
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.childorgquestion.autoanswer td.qform > .padding > div.qform span.value {
font-family: "Poppins", Arial, Verdana, sans-serif !important;
font-size: 1rem !important;
font-weight: 500 !important;
line-height: 1.5 !important;
color: #3B2D55 !important;
text-align: left !important;
}
/* >>> [W22] Paneel .qinfo: breedte en lichtblauw kader
Effect: het paneel naast de vraag is 380 px breed en heeft
een lichtblauwe achtergrond (#F4FBFE) met een cyaan rand en
de ronde hoek rechtsonder. De toelichting leest daardoor
rustiger en de labels 'Niet van toepassing' en 'Niet
voorhanden' passen op één regel.
De breedte werkt samen met [W11]: het vragenblok is daar op
840 px gezet, zodat 840 + 18 tussenruimte + 380 binnen de
container van 1080 px past. Verander je de breedte hier,
pas dan ook de max-width in [W11] aan.
HIER STAAT BEWUST GEEN POSITIONERING
Geen position, geen top, geen left, geen right, geen
display, geen visibility. CViews positioneert het paneel
zelf: absoluut binnen div.questions, met per vraag een
inline 'top'. De horizontale plaats komt uit het blok
INDICATORPANEEL hierboven.
Een eerdere versie zette hier position: fixed met
top: auto. Gevolg: de browser rekende de plaats vanaf de
statische positie in het document en het hele paneel viel
buiten beeld. Het leek verdwenen, maar stond onder de
pagina. Zet hier dus nooit position: fixed neer.
Los uit te zetten: ja, dan houdt het paneel de standaard
breedte en opmaak van CViews. */
@media (min-width: 769px) {
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) .qinfo {
--paneel-achtergrond: #F4FBFE;
--paneel-rand: #9FD4EC;
width: 380px !important;
max-width: 380px !important;
box-sizing: border-box !important;
background-color: var(--paneel-achtergrond) !important;
background-image: none !important;
border: 1px solid var(--paneel-rand) !important;
border-radius: 0 0 20px 0;
box-shadow: 0 4px 16px rgba(59, 45, 85, 0.10);
overflow: hidden;
}
}
/* Op smallere schermen blijft het paneel binnen het beeld. */
@media (min-width: 769px) and (max-width: 1319px) {
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) .qinfo {
width: 300px !important;
max-width: calc(100vw - 32px) !important;
}
}
/* >>> [W23] Routering routing_hide voorrang
TECHNISCH, GEEN KEUZE VOOR DE KLANT. Zonder deze regel
maakt de kaartregel [W12] uitgerouteerde vragen weer
zichtbaar. Nooit weghalen zolang [W12] aan staat voor een
lijst, en altijd ONDER [W12] laten staan. */
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.question.routing_hide,
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) table.childorgquestion.routing_hide {
display: none !important;
}
/* =========================================================
>>> [W26] Paneel .qinfo inhoud opgemaakt
WAT CVIEWS AL LEVERT
Het paneel is geen nieuw element en wordt hier niet nagebouwd.
CViews bouwt het compleet op:
div.qinfo
div.qinfotabs.clearfix
#qlisttab huidige cyclus, met het jaartal als label
#prevqlisttab vorige cyclus, verborgen via [W14]
#infotab het i-tje met het logboek
div.padding
#tc_qlisttab
strong.qinfoicode het vraagnummer
strong de kop 'Toelichting'
div.description de toelichtingstekst
div.qoptions
#remarkholder het opmerkingenveld
div.qinfonapnav
#napholder checkbox 'Niet van toepassing'
#navholder checkbox 'Niet voorhanden'
#unreliableholder checkbox 'schatting'
#tc_prevqlisttab verborgen via [W14]
#tc_infotab
#infotabcontent 'Laatst bijgewerkt door' en datum
Daarmee zitten de toelichting, de nvt- en nvh-functie, het
opmerkingenveld en het logboek allemaal al in het paneel. Dit
blok maakt ze op in de huisstijl.
VOLGORDE
Het vraagnummer staat in de HTML bovenaan, maar hoort onderaan.
Dat lukt met flex-direction en order op #tc_qlisttab. Let op:
hier staat bewust GEEN display: flex, want CViews zet daar een
inline display om de tabbladen te wisselen en die verslaat de
stylesheet. Alleen flex-direction en order worden gezet; die
werken zodra CViews het tabblad zelf op block zet.
NVT EN NVH
CViews zet zelf display:none op #napholder, #navholder en
#unreliableholder bij vragen waar die optie niet aanstaat. Dat
wordt hier niet aangeraakt, dus een vraag zonder nvt of nvh
krijgt ook geen lege regel. De inline float:left op de inputs
en labels wordt met float:none overschreven, zodat de flexregel
het overneemt en checkbox en tekst op één lijn staan.
Los uit te zetten: ja, dit hele blok kan zonder gevolgen weg.
========================================================= */
@media (min-width: 769px) {
/* --- 26a. tabbalk bovenaan het paneel ---
Alle tabjes vullen dezelfde hoogte via align-items: stretch
en een vaste hoogte op de balk. Zonder die stretch werd het
smalle tabje met de i lager en zag de rij er onrustig uit.
De streep door de tekst uit de platform-CSS gaat hier weg. */
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) .qinfo .qinfotabs {
box-sizing: border-box;
display: flex;
align-items: stretch;
gap: 4px;
height: 46px;
background-color: #E3F2FA;
background-image: none;
border: 0;
border-bottom: 1px solid #9FD4EC;
margin: 0;
padding: 8px 10px 0 10px;
overflow: hidden;
}
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) .qinfo .qinfotabs > div,
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) .qinfo .qinfotabs .tab {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
min-width: 62px;
height: 100%;
background-color: #D2E8F5;
background-image: none;
border: 0;
border-radius: 8px 8px 0 0;
margin: 0;
padding: 0 16px;
font-family: "Poppins", Arial, Verdana, sans-serif;
font-size: 0.8125rem;
font-weight: 700;
line-height: 1;
letter-spacing: 0.4px;
text-align: center;
text-decoration: none;
color: #55708A;
cursor: pointer;
transition: color 0.15s ease, background-color 0.15s ease;
}
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) .qinfo .qinfotabs > div,
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) .qinfo .qinfotabs a,
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) .qinfo .qinfotabs span {
text-decoration: none !important;
border-bottom: 0 !important;
}
/* de link vult het hele tabje, zodat de hele knop klikbaar is */
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) .qinfo .qinfotabs a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: inherit;
}
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) .qinfo .qinfotabs > div:hover,
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) .qinfo .qinfotabs .tab:hover {
background-color: #EAF6FC;
color: #008FC5;
}
/* het actieve tabje sluit aan op het paneel eronder */
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) .qinfo .qinfotabs > div.active,
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) .qinfo .qinfotabs .tab.active {
background-color: #F4FBFE;
color: #3B2D55;
box-shadow: none;
}
/* --- 26b. binnenruimte van het paneel ---
Alleen padding en een maximumhoogte met scroll. Geen
display, zodat het wisselen van tabbladen door CViews
ongemoeid blijft. */
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) .qinfo > .padding {
box-sizing: border-box;
padding: 18px 20px !important;
max-height: 65vh;
overflow-y: auto;
overflow-x: hidden;
}
/* de losse regeleindes tussen de blokken zijn niet meer nodig */
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) .qinfo #tc_qlisttab > br {
display: none;
}
/* --- 26c. het vraagnummer, onderaan het paneel --- */
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) .qinfo #tc_qlisttab {
flex-direction: column;
}
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) .qinfo strong.qinfoicode {
order: 9;
display: block;
margin: 16px 0 0 0;
padding: 12px 0 0 0;
border-top: 1px solid #C8E3F0;
border-bottom: 0;
font-family: "Poppins", Arial, Verdana, sans-serif;
font-size: 0.75rem;
font-weight: 400;
line-height: 1.4;
color: #7B93A8;
user-select: all;
}
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) .qinfo strong.qinfoicode::before {
content: "Vraag-ID: ";
font-weight: 700;
color: #55708A;
}
/* --- 26d. kop 'Toelichting' en de toelichtingstekst --- */
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) .qinfo #tc_qlisttab > strong:not(.qinfoicode) {
order: 1;
display: block;
margin: 0 0 6px 0;
font-family: "Poppins", Arial, Verdana, sans-serif;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.6px;
text-transform: uppercase;
color: #55708A;
}
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) .qinfo .description {
order: 2;
box-sizing: border-box;
max-height: 300px;
overflow-y: auto;
overflow-x: hidden;
margin: 0;
font-family: "Poppins", Arial, Verdana, sans-serif;
font-size: 0.9375rem;
font-weight: 300;
line-height: 1.55;
color: #3B2D55;
overflow-wrap: break-word;
word-break: normal;
}
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) .qinfo .description p {
margin: 0 0 8px 0;
font-size: inherit;
line-height: inherit;
color: inherit;
}
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) .qinfo .description p:last-child {
margin-bottom: 0;
}
/* --- 26e. opmerkingenveld, nvt en nvh --- */
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) .qinfo .qoptions {
order: 3;
box-sizing: border-box;
margin: 16px 0 0 0;
padding: 14px 0 0 0;
border-top: 1px solid #C8E3F0;
}
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) .qinfo #remarkholder {
margin: 0 0 12px 0;
}
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) .qinfo .qremark,
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) .qinfo #remarkholder textarea {
box-sizing: border-box;
width: 100% !important;
min-height: 80px;
background-color: #ffffff;
border: 1px solid #C8E3F0;
border-radius: 0 0 12px 0;
padding: 10px 12px;
font-family: "Poppins", Arial, Verdana, sans-serif;
font-size: 0.875rem;
line-height: 1.5;
color: #3B2D55;
resize: vertical;
}
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) .qinfo .qremark:focus,
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) .qinfo #remarkholder textarea:focus {
border-color: #008FC5;
outline: none;
}
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) .qinfo .qinfonapnav > div {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 8px 0;
}
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) .qinfo .qinfonapnav > div:last-child {
margin-bottom: 0;
}
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) .qinfo .qinfonapnav input {
float: none !important;
flex: 0 0 auto;
width: 16px !important;
height: 16px !important;
margin: 0 !important;
accent-color: #008FC5;
cursor: pointer;
}
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) .qinfo .qinfonapnav label {
float: none !important;
flex: 1 1 auto;
display: block !important;
margin: 0 !important;
padding: 0;
overflow: visible !important;
font-family: "Poppins", Arial, Verdana, sans-serif;
font-size: 0.875rem;
font-weight: 400;
line-height: 1.4;
color: #3B2D55;
cursor: pointer;
white-space: normal;
}
/* --- 26f. tabblad met het i-tje: het logboek --- */
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) .qinfo #infotabcontent {
box-sizing: border-box;
font-family: "Poppins", Arial, Verdana, sans-serif;
font-size: 0.875rem;
font-weight: 300;
line-height: 1.5;
color: #3B2D55;
}
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) .qinfo #infotabcontent strong {
display: block;
margin: 0 0 4px 0;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.6px;
text-transform: uppercase;
color: #55708A;
}
/* --- 26g. scrollbalken in de huisstijl --- */
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) .qinfo > .padding::-webkit-scrollbar,
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) .qinfo .description::-webkit-scrollbar {
width: 6px;
}
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) .qinfo > .padding::-webkit-scrollbar-track,
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) .qinfo .description::-webkit-scrollbar-track {
background: transparent;
}
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) .qinfo > .padding::-webkit-scrollbar-thumb,
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) .qinfo .description::-webkit-scrollbar-thumb {
background-color: #9FD4EC;
border-radius: 999px;
}
}
/* =========================================================
>>> [W27] Vraagspecifiek uitlichten op vraag-id
Effect: de opgegeven vragen krijgen een lichtblauwe kaart met
een cyaan rand, zodat ze opvallen tussen de gewone vragen. Op
dit moment zijn dat de zes ambitieniveau-vragen van de
Kwaliteitsscan, één per thema.
HOE WERKT DIT
CViews geeft elke vraagtabel een id in de vorm
q_i_. Vraag i1947.215778 wordt dus
table#q_i1947_215778. Zo is elke vraag los aan te spreken.
Let op de underscore: het is q_i1947_215778 en niet
q_i1947.215778.
EEN VRAAG TOEVOEGEN OF WEGHALEN
Neem de icode, bijvoorbeeld i1947.215999, en maak daar
#q_i1947_215999 van. Voeg die als extra regel toe aan de
opsomming hieronder, met een komma ervoor. Weghalen is de
regel schrappen. Er hoeft niets anders te wijzigen: de
achtergrond en de rand komen uit de variabelen die in [W12]
op de kaart staan.
De lijst staat vier keer: voor de kaart, voor de hover- en
actieve staat, voor de antwoordblokken en voor de pulldown.
Houd de vier lijsten gelijk.
Los uit te zetten: ja, dit hele blok kan zonder gevolgen weg.
========================================================= */
/* de zes ambitieniveau-vragen van de Kwaliteitsscan (sqid 1947):
i1947.215761 Financieel Beheer en Planning & Control
i1947.215768 ICT en Digitalisering
i1947.215773 Huisvesting en Facilitair
i1947.215778 Administratieve processen
i1947.215783 Borging van processen
i1947.215786 Risicomanagement en Compliance */
.questions:not(.benchmarking) table.question#q_i1947_215761,
.questions:not(.benchmarking) table.question#q_i1947_215768,
.questions:not(.benchmarking) table.question#q_i1947_215773,
.questions:not(.benchmarking) table.question#q_i1947_215778,
.questions:not(.benchmarking) table.question#q_i1947_215783,
.questions:not(.benchmarking) table.question#q_i1947_215786 {
--kaart-achtergrond: #F4FBFE;
--kaart-rand: #9FD4EC;
box-shadow: 0 2px 10px rgba(0, 143, 197, 0.08);
}
/* hover en actieve staat: de rand mag donkerder worden, maar de
lichtblauwe achtergrond blijft staan */
.questions:not(.benchmarking) table.question#q_i1947_215761:hover,
.questions:not(.benchmarking) table.question#q_i1947_215768:hover,
.questions:not(.benchmarking) table.question#q_i1947_215773:hover,
.questions:not(.benchmarking) table.question#q_i1947_215778:hover,
.questions:not(.benchmarking) table.question#q_i1947_215783:hover,
.questions:not(.benchmarking) table.question#q_i1947_215786:hover,
.questions:not(.benchmarking) table.question#q_i1947_215761.active,
.questions:not(.benchmarking) table.question#q_i1947_215768.active,
.questions:not(.benchmarking) table.question#q_i1947_215773.active,
.questions:not(.benchmarking) table.question#q_i1947_215778.active,
.questions:not(.benchmarking) table.question#q_i1947_215783.active,
.questions:not(.benchmarking) table.question#q_i1947_215786.active {
--kaart-achtergrond: #F4FBFE;
--kaart-rand: #008FC5;
box-shadow: 0 2px 12px rgba(0, 143, 197, 0.14);
}
/* de antwoordblokken binnen een uitgelichte vraag blijven wit,
zodat ze zich aftekenen tegen de lichtblauwe kaart */
.questions:not(.benchmarking) table.question#q_i1947_215761 td.qform .qinput > div.clearfix:not(:has(input:checked)),
.questions:not(.benchmarking) table.question#q_i1947_215768 td.qform .qinput > div.clearfix:not(:has(input:checked)),
.questions:not(.benchmarking) table.question#q_i1947_215773 td.qform .qinput > div.clearfix:not(:has(input:checked)),
.questions:not(.benchmarking) table.question#q_i1947_215778 td.qform .qinput > div.clearfix:not(:has(input:checked)),
.questions:not(.benchmarking) table.question#q_i1947_215783 td.qform .qinput > div.clearfix:not(:has(input:checked)),
.questions:not(.benchmarking) table.question#q_i1947_215786 td.qform .qinput > div.clearfix:not(:has(input:checked)) {
background-color: #ffffff;
border-color: #C8E3F0;
}
/* ook de pulldown binnen een uitgelichte vraag blijft wit */
.questions:not(.benchmarking) table.question#q_i1947_215761 td.qform select,
.questions:not(.benchmarking) table.question#q_i1947_215768 td.qform select,
.questions:not(.benchmarking) table.question#q_i1947_215773 td.qform select,
.questions:not(.benchmarking) table.question#q_i1947_215778 td.qform select,
.questions:not(.benchmarking) table.question#q_i1947_215783 td.qform select,
.questions:not(.benchmarking) table.question#q_i1947_215786 td.qform select {
background-color: #ffffff;
border-color: #C8E3F0;
}
/* =========================================================
UITZONDERINGEN PER VRAGENLIJST
Kant en klare blokken om één wijziging voor één lijst terug te
draaien zonder de blokken hierboven aan te raken.
WERKWIJZE
1. haal het gewenste blok uit commentaar
2. vervang het lijstnummer als het om een andere lijst gaat
3. laat het blok onderaan de stylesheet staan
Voor [W01], [W02], [W03], [W11], [W12], [W13], [W15], [W16],
[W17], [W18], [W19], [W20], [W21], [W22], [W26] en [W27] werk
je met de scope: haal de lijst uit de :has() opsomming van dat
blok, of bij [W27] de regel met dat vraag-id.
========================================================= */
/* [W04-UIT] kolom % ingevuld weer zichtbaar (voorbeeld: 1921)
.sitecontent .padding.clearfix:has(.qlist-1921) table.catlist th.procentingevuld {
display: table-cell !important;
}
*/
/* [W05-UIT] tweede headerrij weer zichtbaar (voorbeeld: 1921)
.sitecontent .padding.clearfix:has(.qlist-1921) table.catlist tbody.header tr:not(.maincat) {
display: table-row !important;
}
*/
/* [W06-UIT] kolommen VERPLICHT en OPTIONEEL weer zichtbaar
(voorbeeld: 1921). De tweede regel draait [W07] terug.
.sitecontent .padding.clearfix:has(.qlist-1921) table.catlist td.right,
.sitecontent .padding.clearfix:has(.qlist-1921) table.catlist th.right {
display: table-cell !important;
}
.sitecontent .padding.clearfix:has(.qlist-1921) table.catlist th.left,
.sitecontent .padding.clearfix:has(.qlist-1921) table.catlist td.left {
width: auto !important;
}
*/
/* [W08-UIT] filterregel weer zichtbaar (voorbeeld: 1921)
.questions:not(.benchmarking):has(table[id^="q_i1921_"]) .questionlinks .question-list-filter {
display: block !important;
}
*/
/* [W09-UIT] vraagcode weer leesbaar in de kaart (voorbeeld: 1921)
Niet nodig om de code te kunnen zien: hij staat al onderaan in
het paneel als 'Vraag-ID', zie [W26].
.questions:not(.benchmarking):has(table[id^="q_i1921_"]) table.question td.text .icode,
.questions:not(.benchmarking):has(table[id^="q_i1921_"]) table.childorgquestion td.text .icode {
font-size: 0.875rem !important;
line-height: 1.4 !important;
color: #666666 !important;
height: auto !important;
margin-right: 6px !important;
pointer-events: auto !important;
user-select: auto !important;
}
*/
/* [W10-AAN] kopregel terug in de huisstijl (voorbeeld: 1921)
Alleen het label 'Vraag' komt terug; de jaartallen blijven weg,
want in een gestapelde layout staan die niet boven een kolom.
Let op de zware selector: die is nodig om de standaardregel te
verslaan, zie les 1 in de leeswijzer.
.sitecontent .questions:not(.benchmarking):not(.benchmarking):has(table[id^="q_i1921_"]) table.qheader.qheader {
display: block !important;
width: 100% !important;
box-sizing: border-box;
background-image: none !important;
background-color: transparent !important;
border: 0 !important;
border-bottom: 1px solid #E4E2E6 !important;
margin: 0 0 16px 0 !important;
padding: 0 0 10px 0 !important;
}
.sitecontent .questions:not(.benchmarking):not(.benchmarking):has(table[id^="q_i1921_"]) table.qheader.qheader tbody {
display: block !important;
}
.sitecontent .questions:not(.benchmarking):not(.benchmarking):has(table[id^="q_i1921_"]) table.qheader.qheader tr {
display: flex !important;
align-items: baseline;
width: 100%;
}
.sitecontent .questions:not(.benchmarking):not(.benchmarking):has(table[id^="q_i1921_"]) table.qheader.qheader tr > td,
.sitecontent .questions:not(.benchmarking):not(.benchmarking):has(table[id^="q_i1921_"]) table.qheader.qheader tr > th {
display: none !important;
width: auto !important;
background-image: none !important;
background-color: transparent !important;
border: 0 !important;
padding: 0 !important;
}
.sitecontent .questions:not(.benchmarking):not(.benchmarking):has(table[id^="q_i1921_"]) table.qheader.qheader tr > :nth-child(2) {
display: block !important;
flex: 1 1 auto;
font-family: "Poppins", Arial, Verdana, sans-serif !important;
font-weight: 700 !important;
font-size: 0.8125rem !important;
line-height: 1.4 !important;
letter-spacing: 0.8px;
text-transform: uppercase;
color: #3B2D55 !important;
white-space: normal !important;
}
.sitecontent .questions:not(.benchmarking):not(.benchmarking):has(table[id^="q_i1921_"]) table.qheader.qheader tr > :nth-child(2) > .padding {
padding: 0 !important;
}
*/
/* [W14-UIT] standaardkolom vorige cyclus terug (voorbeeld: 1921)
Draait [W14] volledig terug: de kolom komt weer in de kaart en
het tabje in het paneel wordt weer door CViews bepaald.
LET OP: hiermee komen ook de problemen terug die tot [W14]
hebben geleid, met name lege koppen bij vragen zonder vorige
cyclus.
.questions:not(.benchmarking):has(table[id^="q_i1921_"]) table.question:not(.title) > tbody > tr > td.previous,
.questions:not(.benchmarking):has(table[id^="q_i1921_"]) table.childorgquestion:not(.title) > tbody > tr > td.previous {
display: block !important;
flex: 0 0 100% !important;
width: auto !important;
max-width: none !important;
height: auto !important;
overflow: visible !important;
margin: 12px 0 0 0 !important;
padding: 10px 0 0 0 !important;
border-top: 1px solid #F0EEF2 !important;
font-size: 0.9375rem !important;
line-height: 1.4 !important;
color: #666666 !important;
pointer-events: auto !important;
user-select: auto !important;
}
.questions:not(.benchmarking):has(table[id^="q_i1921_"]) .qinfo #prevqlisttab,
.questions:not(.benchmarking):has(table[id^="q_i1921_"]) .qinfo #tc_prevqlisttab {
display: block !important;
}
*/
/* [W22-BREEDTE] paneel breder of smaller (voorbeeld: 1921)
Pas hierbij ook de max-width in [W11] aan, anders valt het
paneel buiten de container: vragenblok plus 18 px plus paneel
moet binnen 1080 px blijven.
@media (min-width: 769px) {
.questions:not(.benchmarking):has(table[id^="q_i1921_"]) .qinfo {
width: 420px !important;
max-width: 420px !important;
}
.questions:not(.benchmarking):has(table[id^="q_i1921_"]) {
max-width: 800px;
}
}
*/
/* [W22-WIT] paneel weer wit in plaats van lichtblauw
(voorbeeld: 1921)
@media (min-width: 769px) {
.questions:not(.benchmarking):has(table[id^="q_i1921_"]) .qinfo {
--paneel-achtergrond: #ffffff;
--paneel-rand: #E4E2E6;
}
}
*/
/* [W26-TABS] tabbalk in het paneel verbergen (voorbeeld: 1921)
Alleen zinvol als je het logboek niet nodig hebt, want zonder
tabbalk kun je niet meer wisselen.
.questions:not(.benchmarking):has(table[id^="q_i1921_"]) .qinfo .qinfotabs {
display: none !important;
}
*/
/* [W26-ID] vraag-id niet tonen in het paneel (voorbeeld: 1921)
.questions:not(.benchmarking):has(table[id^="q_i1921_"]) .qinfo strong.qinfoicode {
display: none !important;
}
*/
/* [W27-KLEUR] andere kleur voor de uitgelichte vragen
Bijvoorbeeld een zachtgele kaart in plaats van lichtblauw.
Neem dezelfde lijst met vraag-id's over als in [W27].
.questions:not(.benchmarking) table.question#q_i1947_215761,
.questions:not(.benchmarking) table.question#q_i1947_215768,
.questions:not(.benchmarking) table.question#q_i1947_215773,
.questions:not(.benchmarking) table.question#q_i1947_215778,
.questions:not(.benchmarking) table.question#q_i1947_215783,
.questions:not(.benchmarking) table.question#q_i1947_215786 {
--kaart-achtergrond: #FFF9E8;
--kaart-rand: #F0D48A;
}
*/
/* >>> [W30] Dubbele punt voor de subcategorienaam verbergen
Effect: de h2 boven de vragen leest als
"Financieel Beheer en Planning & Control" in plaats van
": Financieel Beheer en Planning & Control".
WAAROM DIT EEN OMWEG IS
CViews plakt hoofdcategorie en subcategorie aan elkaar met
": " ertussen, in één h2. Is de hoofdcategorie leeg, dan
blijft die dubbele punt staan. CSS kan geen deel van een
tekst weghalen, dus de enige route is de tekst naar links
schuiven en links afkappen. De breedte van ": " is bij
Poppins Bold op deze grootte ongeveer 16 px.
LET OP: dit is een optische correctie, geen echte
oplossing. Verandert het lettertype of de tekstgrootte van
de h2, dan klopt de 16 px niet meer en moet die waarde mee.
De echte oplossing is dat de leverancier de dubbele punt
weglaat als de hoofdcategorie leeg is.
Los uit te zetten: ja, dit hele blok kan zonder gevolgen
weg. */
.questions:not(.benchmarking):has(table[id^="q_i1921_"], table[id^="q_i1947_"], table[id^="q_i1955_"]) > form > h2,
.sitecontent .col_4:has(.questions:not(.benchmarking) table[id^="q_i1921_"]) > h2,
.sitecontent .col_4:has(.questions:not(.benchmarking) table[id^="q_i1947_"]) > h2,
.sitecontent .col_4:has(.questions:not(.benchmarking) table[id^="q_i1955_"]) > h2 {
margin-left: -16px;
overflow: hidden;
clip-path: inset(0 0 0 16px);
}
/* >>> [W31] Kop 'In te vullen gegevens' wordt 'Vragenlijst'
Effect: de kop boven de categorielijst op de
overzichtspagina leest als 'Vragenlijst'.
HOE WERKT DIT
De h2 bevat alleen tekst en geen onderliggende elementen,
dus de oude tekst kan onzichtbaar worden gemaakt met
font-size: 0 en de nieuwe tekst komt uit een ::before. Dat
kan alleen bij elementen zonder kinderen; bij een element
met opmaak erin zou die verdwijnen.
ANDERE TEKST?
Pas de regel met content: "Vragenlijst" aan. Let op dat de
tekst hier vast staat en niet meeloopt met de taalkeuze van
CViews.
Los uit te zetten: ja, dit hele blok kan zonder gevolgen
weg. */
.sitecontent .padding.clearfix:has(.qlist-1921, .qlist-1947, .qlist-1955) .qcatlist > h2.highlight {
font-size: 0 !important;
line-height: 0 !important;
color: transparent !important;
}
.sitecontent .padding.clearfix:has(.qlist-1921, .qlist-1947, .qlist-1955) .qcatlist > h2.highlight::before {
content: "Vragenlijst";
display: block;
font-family: "Poppins", Arial, Verdana, sans-serif;
font-size: 2.1rem;
font-weight: 700;
line-height: 1.1;
color: #3B2D55;
}