/* CLC Vecta Styles */
@import url("https://fonts.googleapis.com/css2?family=Didact+Gothic&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: #333333; /* Donkergrijs voor tekst */
    font-family: 'Verdana', sans-serif; /* Standaard lettertype ingesteld op 'Verdana' */
}

div, p, td, th, fieldset, input, textarea, select {
    color: #555; /* Donkergrijs voor tekst */
    font-size: 15px; /* Standaard lettergrootte van 15 pixels */
    font-family: 'Verdana', sans-serif; /* Standaard lettertype ingesteld op 'Verdana' */
    line-height: 20px; /* Regelhoogte ingesteld op 20 pixels */
	font-weight: 300;
	line-height: 1.42857143;
}

/* Koppen */
h1, .extralargetext {
    color: #10325F; /* Blauwe tekstkleur */
    font-size: 32px; /* Lettergrootte van 32 pixels */
   font-family: "Didact Gothic", serif; /* Lettertype ingesteld op 'Verdana' */
    text-transform: uppercase; /* Maakt alle tekst hoofdletters */
}

h2.highlight, h2, .largetext {
    color: #039cde; /* lichtblauwe tekstkleur */
    font-size: 20px; /* Lettergrootte van 20 pixels */
    font-family: 'Verdana', sans-serif; /* Lettertype ingesteld op 'Verdana' */
	line-height: 1.1;
    font-weight: 700;
}

h3 {
    color: #555; /* Blauwe tekstkleur */
    font-family: "Didact Gothic", serif; /* Lettertype ingesteld op 'Verdana' */
 	font-size: 17px; /* Lettergrootte van 20 pixels */
	text-transform: uppercase;
	font-weight: 300;
}

h4 {
    color: #555; /* Blauwe tekstkleur */
    font-family: 'Verdana', sans-serif; /* Lettertype ingesteld op 'Verdana' */
 	font-size: 15px; /* Lettergrootte van 20 pixels */
	    font-weight: 700;
		line-height: 1.42857143;
}
#remark-show, #remark-edit {
    font-size: 12px; /* Lettergrootte van 12 pixels */
    float: right; /* Positioneert het element rechts */
}

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

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


@media only screen and (max-width: 1023px) {
    .headerimage .header-content {
        flex-direction: column;
        height: auto;
        margin-top: 15px;
        margin-bottom: 15px;
    }
}


/* Hoofdmenu */
.mainmenu .padding {
    padding-top: 15px; /* Bovenste padding van 15 pixels */
background-color: #10325F; /* Blauw blijft als achtergrondkleur */
}

.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: #10325F; /* Stelt de achtergrondkleur in op blauw */
}

.mainmenu ul li a {
    display: inline-block; /* Maakt het element een inline-block */
    height: 28px; /* Stelt de hoogte in op 28 pixels */
    font-family: 'Verdana', sans-serif; /* Lettertype ingesteld op 'Verdana' */
    margin: 9px; /* Voegt 9 pixels marge rondom toe */
	text-transform: uppercase; /* Maakt alle tekst hoofdletters */
	font-weight: 600 !important;
}

.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 */
    text-transform: uppercase; /* Maakt alle tekst hoofdletters */
	font-weight: 600 !important;
    color: #FFFFFF; /* Tekstkleur wit */
}

.mainmenu ul li span:hover {
    color: #009DE0; /* Houdt de tekstkleur lichtblauw

.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: #009DE0; /* Verandert de tekstkleur naar lichtgrijs 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: 0px; /* Breedte van 1 pixel */
    right: 0; /* Plaatst het pseudo-element aan de rechterkant van het ouderelement */
}

.mainmenu span {
    color: #009DE0; /* Tekstkleur donkergrijs */
}

.mainmenu a:hover span {
    color: #009DE0; /* 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: #009DE0; /* 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: #009DE0; /* Tekstkleur donkergrijs */
}

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

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

.submenu a:link, .submenu a:visited, .submenu a:hover {
    color: #009DE0 !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: #10325F; /* Blauwe 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: #10325F; /* Blauwe 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: #333333; /* Donkergrijze tekstkleur */
}

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

div.button a {
    background-color: #10325F !important; /* Blauwe achtergrondkleur met prioriteit */
}

div.button.blue a {
    background-color: #10325F !important; /* Blauwe achtergrondkleur met prioriteit */
}

div.button.toggle a {
    background-color: #10325F !important; /* Blauwe achtergrondkleur met prioriteit */
}

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

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


/* Benchmark naam wit links */
.benchmarkname {
    float: left; /* Uitlijning naar links */
    width: 200px; /* Pas breedte aan naar de grootte van het logo */
    height: 50px; /* Pas hoogte aan naar de grootte van het logo */
    background-image: url("/download/249/site/CLC-VECTA-Logo-1-300x83.png"); /* Afbeelding als achtergrond */
    background-size: contain; /* Zorgt dat de afbeelding volledig zichtbaar is */
    background-repeat: no-repeat; /* Voorkomt herhaling */
     background-position: right center;
    color:  transparent; /* 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: #EEEEEE; /* 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: #EEEEEE; /* Lichtgroene achtergrondkleur */
}

.questions .qinfo {
    background-color: #EEEEEE; /* 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: #EEEEEE; /* 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 */
}

.headerimage {
    position: relative;
    height: 210px;
    padding: 0;
    background-color: #ffffff;
    background-image: none;
}

.headerimage .header-content,
.headerimage p {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.headerimage .header-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    margin: 0 7.25%;
}
@media only screen and (max-width: 1023px) {
    .headerimage .header-content {
        flex-direction: column;
        height: auto;
        margin-top: 15px;
        margin-bottom: 15px;
    }
}

.siteheader {
    background-image: none;
    background-repeat: no-repeat;
    background-position: 0 0;
    height: 70px;
    font-size: 10px;
    background-color: #ffffff;
}


.sitefooter,
.sitefooter .clearfix {
    font-size: 12px; /* Lettergrootte van 12 pixels */
    color: #748BA9; /* Donkergrijze tekstkleur */
background-color: #0C213C; /* Donkerblauwe achtergrondkleur */
}

.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: #0C213C; /* Donkerblauwe achtergrondkleur */
}

.sitefooter p {
    font-size: inherit; /* Erft de lettergrootte van het ouderelement */
background-color: #0C213C; /* Donkerblauwe achtergrondkleur */
}

.sitefooter p,
.sitefooter a {
    color: inherit; /* Erft de tekstkleur van het ouderelement */
background-color: #0C213C; /* Donkerblauwe achtergrondkleur */
}

.sitefooter a:hover {
    color: inherit !important; /* Erft de tekstkleur van het ouderelement bij hover met prioriteit */
background-color: #0C213C; /* Donkerblauwe achtergrondkleur */
}

.sitefooter .clearfix a {
    float: right; /* Positioneert de links naar de rechterkant */
background-color: #0C213C; /* Donkerblauwe achtergrondkleur */
}