@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap'); /* Importeert het 'Work Sans' lettertype met verschillende stijlen en gewichten */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap'); /* Importeert het 'Roboto' en 'Work Sans' lettertype met verschillende stijlen en gewichten */

/* Algemene instellingen */
body {
    background-color: #FFFFFF; /* Achtergrondkleur wit */
    color: #4E5469; /* Donkergrijs voor tekst */
    font-family: 'Work Sans', sans-serif; /* Standaard lettertype ingesteld op 'Work Sans' */
}

div, p, td, th, fieldset, input, textarea, select {
    color: #4E5469; /* Donkergrijs voor tekst */
    font-size: 12px; /* Standaard lettergrootte van 12 pixels */
    font-family: 'Work Sans', sans-serif; /* Standaard lettertype ingesteld op 'Work Sans' */
    line-height: 15pt; /* Regelhoogte ingesteld op 15 punten */
}

/* Koppen */
h1, .extralargetext {
    color: #000000; /* Zwarte tekstkleur */
    font-size: 26px; /* Lettergrootte van 26 pixels */
    font-family: 'Roboto', sans-serif; /* Lettertype ingesteld op 'Roboto' */
    text-transform: uppercase; /* Maakt alle tekst hoofdletters */
}

h2.highlight, h2, .largetext {
    color: #4E5469; /* Donkergrijs voor tekst */
    font-size: 20px; /* Lettergrootte van 20 pixels */
    font-family: 'Work Sans', sans-serif; /* Lettertype ingesteld op 'Work Sans' */
    font-weight: bold; /* Vetgedrukte tekst */
}

h3, h4 {
    color: #4E5469; /* Donkergrijs voor tekst */
    font-family: 'Work Sans', sans-serif; /* Lettertype ingesteld op 'Work Sans' */
    font-weight: bold; /* Vetgedrukte tekst */
}

#remark-show, #remark-edit {
    font-size: 12px; /* Lettergrootte van 12 pixels */
    float: right; /* Positioneert het element rechts */
}

/* Links */
a:link, a:visited {
    color: #1381D3; /* Blauwe tekstkleur voor links */
    text-decoration: none; /* Verwijdert standaard onderstreping */
    transition: color 0.3s; /* Voegt een overgangseffect toe bij kleurverandering */
}

a:hover {
    color: #1381D3 !important; /* Blauwe tekstkleur bij hover met prioriteit */
    text-decoration: underline; /* Onderstreept de link bij hover */
}

/* Hoofdmenu */
.mainmenu .padding {
    padding-top: 15px; /* Bovenste padding van 15 pixels */
}

.mainmenu {
    background-image: none; /* Verwijdert eventuele achtergrondafbeeldingen */
    height: 52px; /* Stelt de hoogte van het menu in op 52 pixels */
    position: relative; /* Maakt het menu relatief geplaatst */
    background-color: #ffffff; /* Stelt de achtergrondkleur in op wit */
}

.mainmenu ul li a {
    display: inline-block; /* Maakt het element een inline-block */
    height: 28px; /* Stelt de hoogte in op 28 pixels */
    font-family: 'Work Sans', sans-serif; /* Lettertype ingesteld op 'Work Sans' */
    margin: 9px; /* Voegt 9 pixels marge rondom toe */
}

.mainmenu ul li span {
    display: inline-block; /* Maakt het element een inline-block */
    height: 28px; /* Stelt de hoogte in op 28 pixels */
    padding: 0; /* Verwijdert eventuele padding */
    margin-left: 0; /* Verwijdert de linkermarge */
    cursor: pointer; /* Verandert de cursor naar een pointer bij hover */
    font-weight: 400 !important; /* Stelt het lettergewicht in op normaal met prioriteit */
    color: #4E5469; /* Tekstkleur donkergrijs */
}

.mainmenu ul li span:hover {
    color: #4E5469; /* Houdt de tekstkleur donkergrijs bij hover */
}

.mainmenu ul {
    list-style: none; /* Verwijdert standaard lijststijlen */
    padding: 0; /* Verwijdert binnenmarges */
    margin: 0; /* Verwijdert buitenmarges */
    text-align: center; /* Centreert de lijstitems horizontaal */
}

.mainmenu ul li {
    display: inline; /* Positioneert de lijstitems inline */
    position: relative; /* Maakt het lijstitem relatief geplaatst */
    margin: 0; /* Verwijdert buitenmarge */
    padding: 0 20px; /* Voegt 20 pixels horizontale padding toe */
    height: 33px; /* Stelt de hoogte in op 33 pixels */
}

.mainmenu a:link,
.mainmenu a:visited,
.mainmenu a:hover {
    text-decoration: none; /* Verwijdert onderstreping van links in alle toestanden */
}

.mainmenu ul li a:hover {
    background-image: none; /* Verwijdert eventuele achtergrondafbeeldingen bij hover */
    color: #4E5469; /* Verandert de tekstkleur naar donkergrijs bij hover */
    border-bottom: 3px solid #12439B; /* Voeg een blauwe onderrand van 3 pixels toe bij hover */
}

.mainmenu ul li a:hover span {
    background-image: none; /* Verwijdert eventuele achtergrondafbeeldingen bij hover */
    color: #4E5469; /* Verandert de tekstkleur naar donkergrijs bij hover */
}

.mainmenu ul li.active a {
    background-image: none; /* Verwijdert eventuele achtergrondafbeeldingen voor actieve links */
   }

.mainmenu ul li.active a span {
    background-image: none; /* Verwijdert eventuele achtergrondafbeeldingen binnen het span-element voor actieve links */
    color: #ffffff; /* Verandert de tekstkleur naar wit voor actieve links */
    font-weight: bold !important; /* Maakt de tekst vetgedrukt voor actieve links */
}

.mainmenu ul li.active a:after {
    position: absolute; /* Positioneert het pseudo-element absoluut */
    left: 50%; /* Plaatst het element 50% van de breedte van het ouderelement vanaf links */
    transform: translateX(-50%); /* Centreert het element horizontaal */
    -ms-transform: translateX(-50%); /* IE ondersteuning voor transform */
    -moz-transform: translateX(-50%); /* Firefox ondersteuning voor transform */
    -webkit-transform: translateX(-50%); /* WebKit ondersteuning voor transform */
    -o-transform: translateX(-50%); /* Opera ondersteuning voor transform */
    background: none; /* Geen achtergrondkleur of afbeelding */
    bottom: 0; /* Plaatst het element aan de onderkant van het ouderelement */
    content: ''; /* Leeg content voor het pseudo-element */
    height: 9px; /* Hoogte van 9 pixels */
    pointer-events: none; /* Maakt het element niet interactief */
    top: 31px; /* Plaatst het element 31 pixels van de bovenkant */
    width: 17px; /* Breedte van 17 pixels */
    z-index: 9999; /* Zorgt ervoor dat het element boven andere elementen ligt */
}

.mainmenu ul li:after {
    position: absolute; /* Positioneert het pseudo-element absoluut */
    top: 50%; /* Plaatst het element 50% van de hoogte van het ouderelement vanaf boven */
    transform: translateY(-50%); /* Centreert het element verticaal */
    -ms-transform: translateY(-50%); /* IE ondersteuning voor transform */
    -moz-transform: translateY(-50%); /* Firefox ondersteuning voor transform */
    -webkit-transform: translateY(-50%); /* WebKit ondersteuning voor transform */
    -o-transform: translateY(-50%); /* Opera ondersteuning voor transform */
    background: #ffffff; /* Achtergrondkleur wit */
    content: ''; /* Leeg content voor het pseudo-element */
    display: block; /* Maakt het pseudo-element een blokelement */
    height: 10px; /* Hoogte van 10 pixels */
    width: 1px; /* Breedte van 1 pixel */
    right: 0; /* Plaatst het pseudo-element aan de rechterkant van het ouderelement */
}

.mainmenu span {
    color: #4E5469; /* Tekstkleur donkergrijs */
}

.mainmenu a:hover span {
    color: #4E5469; /* Tekstkleur donkergrijs bij hover */
}

.mainmenu .active a { /* Blauwe lijn onder active menu item */
    background-color: none; /* Geen achtergrondkleur */

}

.mainmenu .active a span,
.mainmenu .active a:hover span {
    color: #4E5469; /* Tekstkleur donkergrijs */
}

.mainmenu ul li a:hover,
.mainmenu ul li a:hover span,
.mainmenu ul li.active a,
.mainmenu ul li.active a span,
.mainmenu .active a span,
.mainmenu .active a:hover span {
    background: none; /* Geen achtergrondkleur */
    color: #4E5469; /* Tekstkleur donkergrijs */
}

/* Submenu */
.sitecontent .nav.subnav ul li:not(.active) a {
    font-weight: normal; /* Normaal lettergewicht */
    color: #4E5469; /* Tekstkleur donkergrijs */
}

.sitecontent .nav.subnav ul li.active a {
    font-weight: bold !important; /* Vetgedrukte tekst met prioriteit */
    color: #4E5469 !important; /* Tekstkleur donkergrijs met prioriteit */
    background: none !important; /* Geen achtergrondkleur met prioriteit */
}

.submenu a:link, .submenu a:visited, .submenu a:hover {
    color: #4E5469 !important; /* Tekstkleur donkergrijs met prioriteit */
    text-decoration: none; /* Verwijdert onderstreping */
    font-weight: bold; /* Vetgedrukte tekst */
}

.submenu .active {
    background-color: transparent !important; /* Transparante achtergrondkleur met prioriteit */
}

.submenu .active a:link span, 
.submenu .active a:visited span, 
.submenu .active a:hover span {
    color: #FFFFFF !important; /* Witte tekstkleur met prioriteit */
}

/* Tabellen */
table.default, table.default th, table.default td {
    border-color: #C2D1EC; /* Lichtblauwe randkleur */
}

table.default th {
    background-color: #4E5469; /* Donkergrijze achtergrondkleur */
    color: white; /* Witte tekstkleur */
}

table.default tr:nth-child(odd) td {
    background: #FFFFFF; /* Witte achtergrond voor oneven rijen */
}

table.default.odd-columns tr td:nth-child(odd) {
    background: #FFFFFF; /* Witte achtergrond voor oneven kolommen */
}

table.default.highlight-first-column tr td:first-child,
table.default.highlight-last-row tr:last-child td {
    background: #C2D1EC; /* Lichtblauwe achtergrondkleur */
}

/* Dashboard grid */
table.dashboard-grid > tbody > tr > td {
    border-radius: 6px; /* Ronde hoeken van 6 pixels */
}

table.dashboard-grid td.color1 {
    background-color: #4E5469; /* Donkergrijze achtergrondkleur */
    color: white; /* Witte tekstkleur */
}

table.dashboard-grid td.color1,
table.dashboard-grid td.color1 * {
    color: white; /* Witte tekstkleur voor cel en alle kinderen */
}

table.dashboard-grid td.color3 {
    background-color: #FFFFFF; /* Witte achtergrondkleur */
    color: #4E5469; /* Donkergrijze tekstkleur */
}

/* Knoppen in het donker blauw */
div.button input {
    background-color: #12439B !important; /* Donkerblauwe achtergrondkleur met prioriteit */
}

div.button a {
    background-color: #12439B !important; /* Donkerblauwe achtergrondkleur met prioriteit */
}

div.button.blue a {
    background-color: #12439B !important; /* Donkerblauwe achtergrondkleur met prioriteit */
}

div.button.toggle a {
    background-color: #12439B !important; /* Donkerblauwe achtergrondkleur met prioriteit */
}

div.button input[type="submit"] {
    background-color: #12439B !important; /* Donkerblauwe achtergrondkleur met prioriteit */
}

div.button input[type="button"] {
    background-color: #12439B !important; /* Donkerblauwe achtergrondkleur met prioriteit */
}

/* Benchmark naam wit links */
.benchmarkname { 
    float: left; /* Positioneert het element naar links */
    font-weight: bold; /* Vetgedrukte tekst */
    color: #ffffff; /* Witte tekstkleur */
}

/* Catlist Tabellen */
.catlist th.left, /* Headers van vragenlijst tabellen */
.catlist td {
    background-image: none; /* Verwijdert eventuele achtergrondafbeeldingen */
}

.catlist th.right,
.catlist .footer td.right {
    background-color: #C8E3E2; /* Lichtgroene achtergrondkleur */
}

.catlist td a:link,
.catlist td a:visited,
.catlist td a:hover {
    text-decoration: none; /* Verwijdert onderstreping van links */
}

.catlist th div {
    font-size: 12px; /* Lettergrootte van 12 pixels */
    font-weight: 600; /* Iets vetgedrukte tekst */
}

.question.active td { /* Achtergrond van actieve vraag en toelichtingen blok */
    background-image: none; /* Verwijdert eventuele achtergrondafbeeldingen */
    background-color: #C8E3E2; /* Lichtgroene achtergrondkleur */
}

.questions .qinfo {
    background-color: #C8E3E2; /* Lichtgroene achtergrondkleur */
}

/* Sitecontent Boxen */
.sitecontent .box .padding { /* Achtergrond vragenlijst status blok */
    padding: 12px; /* Voegt 12 pixels padding toe rondom de inhoud */
}

.sitecontent .box {
    background-image: none; /* Verwijdert eventuele achtergrondafbeeldingen */
    background-repeat: repeat-x; /* Herhaalt de achtergrondafbeelding horizontaal */
    background-color: #C8E3E2; /* Lichtgroene achtergrondkleur */
    border: none; /* Verwijdert de rand */
    position: relative; /* Maakt het element relatief geplaatst */
    top: -10px; /* Verplaatst het element 10 pixels omhoog */
    margin-bottom: 10px; /* Voegt 10 pixels marge toe onder het element */
    border-radius: 0; /* Geen afgeronde hoeken */
}

.siteheader {
    background-image: none; /* Verwijdert eventuele achtergrondafbeeldingen */
    background-repeat: no-repeat; /* Voorkomt het herhalen van achtergrondafbeeldingen */
    background-position: 0 0; /* Positioneert de achtergrondafbeelding in de linkerbovenhoek */
    height: 20px; /* Stelt de hoogte in op 20 pixels */
    font-size: 10px; /* Lettergrootte van 10 pixels */
    background-color: #ffffff; /* Witte achtergrondkleur */
}

.headerimage img {
    width: 255px !important; /* Breedte ingesteld op 255 pixels met prioriteit */
    height: 57px !important; /* Hoogte ingesteld op 57 pixels met prioriteit */
    margin: 0 auto; /* Centreert de afbeelding horizontaal */
}

.sitefooter,
.sitefooter .clearfix {
    font-size: 12px; /* Lettergrootte van 12 pixels */
    color: #4E5469; /* Donkergrijze tekstkleur */
}

.sitefooter {
    height: 6px; /* Stelt de hoogte in op 6 pixels */
    padding-top: 15px; /* Voegt 15 pixels bovenpadding toe */
    background-image: none; /* Verwijdert eventuele achtergrondafbeeldingen */
    background-repeat: no-repeat; /* Voorkomt het herhalen van achtergrondafbeeldingen */
    background-color: #ffffff; /* Witte achtergrondkleur */
}

.sitefooter p {
    font-size: inherit; /* Erft de lettergrootte van het ouderelement */
}

.sitefooter p,
.sitefooter a {
    color: inherit; /* Erft de tekstkleur van het ouderelement */
}

.sitefooter a:hover {
    color: inherit !important; /* Erft de tekstkleur van het ouderelement bij hover met prioriteit */
}

.sitefooter .clearfix a {
    float: right; /* Positioneert de links naar de rechterkant */
}

/* rapportage styling */
.features-table3 {
    margin: 10;
 
    /* Verwijderd: text-shadow: 0 1px 0 #fff; */
    background: 00FFFFFF;
    background-image: linear-gradient(top, #fff, #eaeaea, #fff);
}

.features-table3 td {
    height: 35px;
    line-height: 45px;
    border-bottom: 1px solid #cdcdcd;
    box-shadow: 0 1px 0 white;
    white-space: nowrap;
    text-align: center;
}

.features-table3 tbody td {
    text-align: center;
    color: #4E5469;
    font-size: 12px;
    font-family: 'Work Sans', sans-serif;
    line-height: 15pt;
}

.features-table3 tbody td:first-child {
    text-align: left;
}

/* Even kolommen vanaf col 2 => blauw */
.features-table3 th:nth-child(2n+2),
.features-table3 td:nth-child(2n+2) {
    background: #C2D1EC;
}

/* Oneven kolommen vanaf col 3 => groen */
.features-table3 th:nth-child(2n+3),
.features-table3 td:nth-child(2n+3) {
    background: #c8e3e2;
}

/* Verticale kopteksten met regelafbreking */
.features-table3 th {
    font-weight: bold;
    height: 155px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    vertical-align: middle;   /* verticale centrering */
    text-align: center;       /* horizontale centrering */
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-all;
    border-bottom: 1px solid #cdcdcd;
    padding: 0;               /* padding verwijderen voor echte centrering */
}

/* Laat de eerste kolomtitel horizontaal */
.features-table3 th:first-child {
    writing-mode: initial;
    transform: none;
    height: 35px;
}

/* Overige th-regels uit het origineel */
.features-table3 th:nth-child(2),
.features-table3 th:nth-child(3) {
    text-align: center;
    border-bottom: 1px solid #cdcdcd;
    font-weight: bold;
}
.features-table3 th:nth-child(4) {
    text-align: center;
    border-bottom: 1px solid #cdcdcd;
    border-top: 1px solid #eaeaea;
    font-weight: bold;
}
.features-table3 th:nth-child(5) {
    text-align: center;
    border-bottom: 1px solid #cdcdcd;
    border-top: 1px solid #eaeaea;
    font-weight: bold;
}

.features-table3 thead td,
.features-table3 thead th {
    color: #4E5469;
    font-size: 14px;
    font-family: 'Work Sans', sans-serif;
    line-height: 15pt;
    border-bottom: 1px solid #cdcdcd;
}

.features-table3 thead td:first-child {
    border-top: none;
    border-bottom: 1px solid #cdcdcd;
}

.features-table3 tfoot td {
    border-bottom: 1px solid #dadada;
    text-align: center;
    font: normal 11px Verdana;
}

.features-table3 tfoot td:first-child {
    border-bottom: none;
    text-align: left;
}.features-table3 th:not(:first-child) {
    text-align: center;
    border-bottom: 1px solid #cdcdcd;
    border-top: 1px solid #eaeaea;
    font-weight: bold;
}

/* Kolommen behalve de eerste = 67px */
.features-table3 th:not(:first-child),
.features-table3 td:not(:first-child) {
    width: 65px;
}

/* Zorg dat alle th in tbody een bottom-border hebben */
.features-table3 tbody th {
    border-bottom: 1px solid #cdcdcd !important; /* Hier de wijziging */
    font-weight: bold;}