/**
 * Dorpshuis APK - Wordpress theme
 *
 * @authors   Hilco Wiersma
 * @version   1.0
 * @generated 2024-10-16
 * @copyright (c) 2024 Hilco Wiersma
 * @license   All Rights Reserved
 */


 *, *:before, *:after {
    box-sizing: border-box;
}

* {
	padding: 0;
	margin: 0;
}





/* --- Basis --- */

body, ul {
    font-family: "cronos-pro-display", sans-serif;
    font-weight: 400;
    font-style: normal;
    margin: 0;
    padding: 0;
    color: #363636; /* DW stijl: #2A2422 */
}





/* --- Tekst --- */

h1, h2, h3, h4, h5, h6 {
    font-family: "cronos-pro-display", sans-serif;
    font-weight: 700;
    font-style: normal;
}

h1 { 
    font-size: 36px;
    color: #1D2939;
    margin: 60px 0px 30px 0px;
}

h2 { 
    font-size: 24px;
    color: #1D2939;
    margin-bottom: 0px;
}

h3 { font-size: 20px; }
h4 { font-size: 16px; }
h5 { font-size: 12px; }
h6 { font-size: 8px; }

p { 
    font-family: "cronos-pro-display", sans-serif;
    font-size: 21px;
    line-height: 1.3;
    letter-spacing: 0.3px;
    margin-bottom: 20px;
}

a {
    font-size: 21px;
}

.pagina-content ul, .hulp-content .accordion-body > ul, .hulp-content .accordion-body ol {
    font-family: "cronos-pro-display", sans-serif;
    font-size: 21px;   
    letter-spacing: 0.3px;
    margin: 0px 0px 0px 20px;
}



/* --- Margin padding --- */

.pt-10 {
	padding-top: 10px;
}

.pt-20 {
	padding-top: 20px;
}

.pt-30 {
	padding-top: 30px;
}

.pt-40 {
	padding-top: 40px;
}

.pt-50 {
	padding-top: 50px;
}

.pt-75 {
	padding-top: 75px;
}

.pb-10 {
	padding-bottom: 10px;
}

.pb-20 {
	padding-bottom: 20px;
}

.pb-30 {
	padding-bottom: 30px;
}

.pb-40 {
	padding-bottom: 40px;
}

.pb-50 {
	padding-bottom: 50px;
}

.pb-75 {
	padding-bottom: 75px;
}

.mt-10 {
	margin-top: 10px;
}

.mt-20 {
	margin-top: 20px;
}

.mt-30 {
	margin-top: 30px;
}

.mt-40 {
	margin-top: 40px;
}

.mt-50 {
	margin-top: 50px;
}

.mt-75 {
	margin-top: 75px;
}

.mb-10 {
	margin-bottom: 10px;
}

.mb-20 {
	margin-bottom: 20px;
}

.mb-30 {
	margin-bottom: 30px;
}

.mb-40 {
	margin-bottom: 40px;
}

.mb-50 {
	margin-bottom: 50px;
}

.mb-60 {
	margin-bottom: 60px;
}

.mb-75 {
	margin-bottom: 75px;
}



/* ----- Responsive mobile ----- */

@media (max-width: 768px) {
    #header { position: fixed; }

    #header > div > .container {
        padding: 0px 15px 0px 15px;
        /* z-index: 1; */
      }

    .main-menu { display: none; }

    .hamburger-btn { 
        display: block; 
        width: 48px;
        height: 48px;
    }

    .welkom { display: none; }

    .overzicht-content, .invullen-content, .apkform-content, .hulp-content { 
        margin: 74px 15px 0px 15px;
    }

    nav.dashboard-menu { width: 100%; }

    /* .nav-fill .nav-item { margin-right: 0px !important; } */
    .nav-fill .nav-item:nth-child(4) { margin-right: 0px !important; }

    #menu-dashboardmenu {
        display: flex;
        flex-wrap: nowrap;
        /* padding: 0px 15px; */
    }

    #menu-dashboardmenu li {
        flex: 1 1 auto !important;
        text-align: center;
    }

    #menu-dashboardmenu li a {
        padding: 8px 12px !important; /* 0px */
        background: none;
        font-size: 17px !important;
    }

    #menu-dashboardmenu li a i { display: none; }

    .sidebar > .container > div { padding: 20px 0px; }

    .meta { display: none; }

    .accordion { width: 100%; }

    .dhapk-widget2 { display: none; }

    #footer { padding: 0px 15px; }

    .socket .socket-links { display: none; }

    .nav-link { 
        font-size: 17px; 
        padding: 8px 12px;
        margin-bottom: 5px;
    }

    .invullen-content .table thead tr th:nth-child(4), .invullen-content .table thead tr th:nth-child(5) { display: none; width: 0%; }

    /* .invullen-content .table tbody tr div > table tbody td:nth-child(4), .invullen-content .table tbody tr div > table tbody td:nth-child(5) { display: none; width: 0%; } */

    .invullen-content .table thead th:nth-child(1), .invullen-content .table tbody tr div > table tbody th:nth-child(1) { width: 14%; }
    /*.invullen-content .table tbody tr div > table tbody td:nth-child(2) { width: 64%; }*/
    .invullen-content .table thead th:nth-child(2) { width: 56%; }
    /*.invullen-content .table tbody tr div > table tbody td:nth-child(3) { width: 25%; }*/
    .invullen-content .table thead th:nth-child(3), .invullen-content .table tbody tr div > table tbody td:nth-child(3) { width: 30%; /* 25% background: #b9b6f8;*/ }

    .invullen-content .table thead th:nth-child(3) { border-radius: 0px 10px 10px 0px; }


    /*.invullen-content .table tbody tr div > table tbody td:nth-child(4) { width: 150px; text-align: right; }*/
    /*.invullen-content .table thead th:nth-child(4) { width: 150px; text-align: left; }*/


    .invullen-content .table td { padding: 0px; }

    .invullen-content .table tr:not(.tr-opmerking) td { padding: 15px 0px 15px 12px; }
    
    .invullen-content .table tr:not(.tr-opmerking) th { padding: 15px 15px 15px 25px; }
    
    .invullen-content .table tr:not(.tr-opmerking) td:last-child { padding: 15px 25px 15px 15px; }
    
    .invullen-content .table thead tr:not(.tr-opmerking) th { padding: 15px; }
    
    .invullen-content .table thead tr:not(.tr-opmerking) th:first-child { padding: 15px 15px 15px 25px; }
    
    .invullen-content .table thead tr:not(.tr-opmerking) th:last-child { padding: 15px 0px; /*15px 25px 15px 15px*/ }


    .formulier-rapport .wpcf7-list-item {
        display: block;
        margin: 0;
    }

    .formulier-rapport .wpcf7-radio > .first { display: none; }

    /*.formulier-rapport */.table td { font-size: 17px; }
    

    .tr-opmerking td > div { margin-left: 38px; }


    .invullen-content .table .table-group-divider th { 
        font-size: 18px;
        vertical-align: middle;
    }


    .apkform-content .table thead th:nth-child(1) { width: 10%; padding: 0px; }
    .apkform-content .table thead th:nth-child(2) { width: 13%; padding: 12px 0px 12px 8px; }
    .apkform-content .table thead th:nth-child(3) { width: 57%; padding: 12px 0px 12px 0px; }
    .apkform-content .table thead th:nth-child(4) { width: 20%; padding: 12px 8px 12px 0px; }
    .apkform-content .table thead th:nth-child(5), .table tr td:nth-child(5) { display: none; width: 0%; }
    .apkform-content .table thead th:nth-child(6), .table tr td:nth-child(6) { display: none; width: 0%; }


    .invullen-content .table thead > tr th, .apkform-content .table thead th {
        font-size: 16px;
        letter-spacing: 0.2pt;
    }


    .apkform-content .table .table-group-divider th { padding: 0px; }


    /* ----- Home ----- */

    .home-img { margin-top: 70px; }

    .home-img img { 
        width: 100%;
        height: 230px;
        object-fit: cover;
    }

    .home-introtekst { padding: 0px 15px; }


    .socket .socket-dw li:nth-child(1) { margin-left: 15px; }
    .socket .socket-dw li:nth-child(2) { margin-left: 30px; }


    .pagina-overzicht { margin-top: 100px; }

    .pagina-content { margin: 0px 15px; }

    .invullen-content .tab-content { margin-top: 40px; }

    .dashboard-menu .nav-link, .dashboard-menu .nav-link:hover { box-shadow: none; }


    /*.btn-vorige { display: none; }
    .btn-volgende { display: none; }*/

    .btn-lg { padding: 9px 16px !important; }

    .invullen-content .wpcf7-number { width: 69px; }

    .apkform-content .tab-content { padding: 15px; }


    .invullen-content .row-shadow table td:nth-child(3) .wpcf7-list-item{ margin: 2px 0 8px 0; }
}



/* ----- Responsive desktop ----- */

@media (min-width: 769px) {
    #header { position: sticky; }

    .hamburger-btn { display: none; }

    .welkom { display: block; }

    .home {
        background: #f5f6f5 url("/wp-content/themes/dhapk/assets/img/bg-dorpshuis.jpg") no-repeat center top;
        background-size: 1600px 100%;
    }

    .home-img img { box-shadow: 0px 18px 20px -20px rgba(0,0,0,0.95); }

    #menu-dashboardmenu li { width: 200px; } /* 180px */

    .sidebar {
        flex: 0 1 17%;
        /* padding-right: 40px; */
        /* border-right: 1px solid #ddd; */
    }

    .sidebar > .container > div { padding: 40px 0px 50px 0px; }

    .content/*.overzicht-overzicht, .apkform-apkform, .hulp-overzicht, .invullen-overzicht*/ {
        flex: 1 1 83%;
        padding: 20px 35px 25px 35px;
    
        /* background-color: rgba(255, 255, 255, 0.8); */
        /* margin-top: 20px; */
        /* border: 1px solid #e7e7e7;
        border-radius: 15px; */
        /*background: #fafafa;*/
        /*background: linear-gradient(345deg, rgb(245, 246, 245) 30%, rgb(250, 250, 250) 80%);*/
        background: linear-gradient(340deg, rgb(245, 246, 245) 72%, rgb(250, 250, 250) 80%);
        border-left: 1px solid #e2e2e2;
    }

    .intro { flex: 0 1 75%; }

    .meta {
        flex: 1 1 25%;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        color: #666;
    }

    .accordion { width: 50%; }

    .nav-link { 
        font-size: 17px; /* 17px */ 
        padding: 8px 22px; /* 7px 23px */
        letter-spacing: 0.3px;
    }

    /*.invullen-content .table thead th:nth-child(1), .invullen-content .table tbody tr div > table tbody th:nth-child(1) { width: 5%; }
    .invullen-content .table thead th:nth-child(2), .invullen-content .table tbody tr div > table tbody td:nth-child(2) { width: 55%; }
    .invullen-content .table tbody tr div > table tbody td:nth-child(3) { width: 25%; }
    .invullen-content .table thead th:nth-child(3), .invullen-content .table tbody tr div > table tbody td:nth-child(3) { width: 35%; }
    .invullen-content .table tbody tr div > table tbody td:nth-child(4) { width: 150px; text-align: right; }
    .invullen-content .table thead th:nth-child(4) { width: 150px; text-align: left; }*/


    :root {
    --w-vraagnr: 55px;
    --w-antwoord: 200px;
    --w-toelichting: 100px;
    --w-informatie: 130px;
    }

    /* Kolom 1: nummer */
    .invullen-content .table thead th:nth-child(1),
    .invullen-content .table tbody tr div > table tbody th:nth-child(1) {
    width: var(--w-vraagnr);
    }

    /* Kolom 2: vraag (rest van de ruimte) */
    .invullen-content .table thead th:nth-child(2),
    .invullen-content .table tbody tr div > table tbody td:nth-child(2) {
    width: calc(100% - (var(--w-vraagnr) + var(--w-antwoord) + var(--w-toelichting) + var(--w-informatie)));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal; /* vraag mag over meerdere regels lopen */
    }

    /* Kolom 3: antwoord (radio) */
    .invullen-content .table thead th:nth-child(3),
    .invullen-content .table tbody tr div > table tbody td:nth-child(3) {
    width: var(--w-antwoord);
    border-left: 1px solid #e2e2e2;
    border-right: 1px solid #e2e2e2;
    }

    /* Kolom 4: toelichting button */
    .invullen-content .table thead th:nth-child(4),
    .invullen-content .table tbody tr div > table tbody td:nth-child(4) {
    width: var(--w-toelichting);
    text-align: left;
    }

    /* Kolom 5: informatie button */
    .invullen-content .table thead th:nth-child(5),
    .invullen-content .table tbody tr div > table tbody td:nth-child(5) {
    width: var(--w-informatie);
    /*text-align: right;*/
    }

    .invullen-content .table thead th:nth-child(5) { text-align: left; }

    .invullen-content .table tbody tr div > table tbody td:nth-child(5) { text-align: right; }









    .invullen-content .table td { padding: 0px; }

    .invullen-content .table tr th { padding: 15px 15px 15px 20px; }

    .invullen-content .table tr td { padding: 6px 15px; } /* 15px */

    .invullen-content .table tr td:last-child { padding: 15px 20px 15px 15px; }

    .invullen-content .table tr td.tabel-titel { padding: 15px 15px 10px 15px; }

    .invullen-content .table thead tr th { padding: 10px 15px; }

    .invullen-content .table thead tr th:first-child { padding: 10px 15px 10px 20px; }

    .invullen-content .table thead tr th:last-child { padding: 10px 20px 10px 15px; }


    .tr-opmerking td > div { margin-left: 50px; }


    .invullen-content .table .table-group-divider th { 
        font-size: 17px; /* 21px */
        vertical-align: middle;
    }


    .table td { font-size: 19px; } /* 21px */


    .apkform-content .table thead th:nth-child(1) { width: 6%; }
    .apkform-content .table thead th:nth-child(2) { width: 5%; padding: 12px 0px 12px 8px; }
    .apkform-content .table thead th:nth-child(3) { width: 49%; padding: 12px 8px 12px 0px; }
    .apkform-content .table thead th:nth-child(4) { width: 10%; }
    .apkform-content .table thead th:nth-child(5) { width: 20%; }
    .apkform-content .table thead th:nth-child(6) { width: 10%; }


    .invullen-content .table thead > tr th, .apkform-content .table thead th {
        font-size: 17px;
        letter-spacing: 0.2pt;
    }

    .apkform-content .table .table-group-divider th { padding: 3px 8px 0px 8px; }


    /* ----- Home ----- */

    .home-img { 
        flex: 0 1 35%; 
        padding-right: 70px;
    }
    
    .home-img img { 
        width: 100%; 
        border-radius: 30px;
        margin-top: 40px;
    }
    
    .home-introtekst { 
        flex: 1 1 65%;
        border-left: 1px solid #aaa;
        padding-left: 40px; 
    }

    .home-introtekst h1 { 
        width: 450px;
        margin: 40px 0px 30px 0px; 
    } 
    
    .home-introtekst p { width: 600px; }
    
    .home-content { margin-top: 50px; }


    .socket .socket-dw li { margin-left: 30px; }

    .invullen-content .tab-content { margin-top: 50px; }


    .wpcf7-radio .wpcf7-list-item:nth-child(1), .wpcf7-radio .wpcf7-list-item:nth-child(2) { margin: 0; }
    .wpcf7-radio .wpcf7-list-item { margin: 0 0 0 12px; }


    .btn-vorige { display: block; }
    .btn-volgende { display: block; }


    .grafiek { flex-basis: 410px; }

    .invullen-content .wpcf7-number { width: 100px; }

    .apkform-content .tab-content { padding: 35px; }


    .invullen-content .row-shadow table td:nth-child(3) .wpcf7-list-item{ margin: 2px 0; }
}



/* --- Body --- */

body {
    /* line-height: 1; */
    
    /*background: rgb(203,209,219);*/
    /* background: linear-gradient(0deg, rgb(197, 205, 216) 0%, rgba(248,248,248,1) 60%, rgba(246,246,246,1) 100%); */
    
    /* background: linear-gradient(0deg, rgba(203,209,219,1) 0%, rgba(255,255,255,1) 100%); */
    
    background-color: #f5f6f5;
}

.container {
    position: relative;
    width: 100%;
    max-width: 1332px;
    /*margin: auto;*/

    margin: 0 auto;
    /* overflow-y: hidden; */
    box-sizing: border-box;
}

.container-inner {
    max-width: 672px;
    margin: auto;
}

.row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.vert-center { align-items: center; }



/* --- Header --- */

#header {
    z-index: 1001;
    left: 0;
    top: 0;
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #eee;

    /* -webkit-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.2); */

    /* backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    transition: backdrop-filter 500ms, -webkit-backdrop-filter 500ms, background 500ms; */
}

/* standaard (uitgelogd): meer padding want géén icoon */
#header > div {
  padding: 10px 0;
}

/* ingelogd: avatar komt erbij, dus minder padding */
body.logged-in #header > div {
  padding: 4px 0;
}

@media (max-width: 767px) {
  #header > div, body.logged-in #header > div {
    padding: 10px 0;
  }
}


.brand-logo a img { width: 214px; } /* 202px */



/* --- Footer --- */

#footer {
    margin-top: 60px;
    /* background-color: #92D4CA;  #4AB8A7 */
    background-color:rgba(146, 212, 202, 0.4);
}

#footer p { 
    font-size: 19px; 
    color: #505050;
}

#footer a {
    font-size: 19px;
    font-weight: bold;
    text-decoration: none; 
    color: #5954c2;
}

#footer li {
    font-size: 19px;
    color: #505050;
}

.row > .widget {
    flex: 1;
    margin: 0 10px;
}
  
.row > .widget:first-child {
    margin-left: 0;
}
  
.row > .widget:last-child {
    margin-right: 0;
}

.socket {
    background-color: #fff; /* #92D4CA */
    padding: 30px 0px;
}

.socket .socket-links li {
    display: inline-block;
    text-transform: uppercase;
    font-weight: 700;
    color: #348175;
    margin-right: 30px;
  }

.socket .socket-links li > a {
    font-size: 16px;
    color: #348175;
    text-decoration: none; 
}

.socket .socket-dw {
    display: flex;
    align-items: center;
}

.socket .socket-dw li { 
    display: inline-block;
    color: #348175;
}

.socket .socket-dw li a img { width: 220px; }

.footer-menu, .dhapk-widget, .dhapk-widget2 {
    width: 400px;
}

#footer ul, .side-menu ul { list-style-type: none; }

.footer-menu {
    display: flex;
    flex-direction: column;
    align-items: center; 
}

#footer h2, .footer-menu h2 {
    margin-bottom: 15px;
}

.dhapk-widget2 p { margin-bottom: 6px; }
.dhapk-widget2 p:last-child { margin-bottom: 0px; }



/* --- Menu --- */

.main-menu ul {
    display: flex;
    align-items: center;
}

.main-menu ul li {
    display: inline-block;
    /* margin-left: 30px; */
    padding: 8px 14px;
}

.main-menu ul li + li {
    margin-left: 4px; 
}

.main-menu ul li a, .mobile-menu .menu-links li a {
    position: relative;
    color: #1D1918;
    font-size: 19px;
    letter-spacing: 0.2px;
    font-weight: 700;
    text-decoration: none;
}

.main-menu ul li.current-menu-item {
    padding: 8px 14px;
    border-radius: 8px;
    background-color: #eae9f6;
    color: #1D2939;
}



/* --- Sidebar --- */

.sidebar .side-menu li { padding-left: 10px; }

.sidebar .side-menu .fa-li {
    font-size: 20px;
    color: Dodgerblue;
}


#menu-dashboardmenu li::before {
    content: none; /* Verwijdert het extra icoon boven de button */
}

#menu-dashboardmenu li a {
    display: flex;
    align-items: center;
    justify-content: left;
    text-decoration: none;
    /* background-color: #fff; */
    color: #7b7b7b; /* 666 */
    /* border: 1px solid #e7e7e7; */
    padding: 18px 23px;
    border-radius: 10px;
    transition: background-color 0.3s ease;

    font-family: "cronos-pro-display", sans-serif;
    font-size: 17px; /* 17px */
    font-weight: 600; /* 400 */
    font-style: normal;
    margin-bottom: 5px;
}

#menu-dashboardmenu .current-menu-item a {
    background-color: #eae9f6;
    color: #1D2939;
    /* border: 1px solid #333; */
}

/* Icon-styling */
#menu-dashboardmenu li a i {
    margin-right: 14px;
}

#menu-dashboardmenu li a:hover {
    color: #FFF;
    background-color: #5954c2; /* 92D4CA */
    /* border: 1px solid #92D4CA; */
}



/* --- Content --- */

.content h1 { margin: 15px auto 15px auto; }

.intro > p:first-of-type, .intro a { font-size: 17px; }

.invullen-content .intro > p:nth-of-type(2) { font-size: 17px; }

.content hr { margin-bottom: 20px; }

.intro h1 { font-size: 34px; }

.intro h3 { margin: 0px; }

.introtekst { font-size: 17px; }

.intro p { color: #646464; }
.invullen-content .table tbody tr div > table tbody td:nth-child(2), .invullen-content .row-shadow table td:nth-child(3) .wpcf7-list-item-label { color: #505050; }

.intro p > strong { color: #1D2939; }
.intro p > em, .intro p > strong em { color: #5954c2; }

.meta i { font-size: 26px; }
.meta p { 
    margin: 0;
    padding: 0;
    font-size: 17px;
}

/* .main-content { padding: 20px 30px; } */

.apkform-content .tab-content {
    background: #fff;
    border-radius: 15px;
    margin-top: 30px;

    -webkit-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.15);
    box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.15);
}



/* --- Voorwaardelijke velden in CF7 --- */

.group {
    display: none;
}



/* --- Welkom --- */

.welkom {
    text-align: center;
    border-radius: 15px;
    padding: 30px 20px;
    width: 200px;
    margin-bottom: 40px;
    /*background: linear-gradient(0deg, rgb(233, 243, 217) 100%, rgba(217,241,246,1) 50%, rgba(217,241,246,1) 100%);*/

    /* background: rgb(217,241,246);
    background: linear-gradient(157deg, rgba(217,241,246,1) 0%, rgba(233,243,217,1) 100%); */

    background: linear-gradient(157deg, rgb(194, 244, 255) 0%, rgb(224, 244, 193) 100%);

    -webkit-box-shadow: 0px 5px 5px -4px rgba(0,0,0,0.63);
    -moz-box-shadow: 0px 5px 5px -4px rgba(0,0,0,0.63);
    box-shadow: 0px 5px 5px -4px rgba(0,0,0,0.63);
}

.welkom p:first-child {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 3px;
}

.welkom p:nth-child(2) {
    font-size: 16px;
    font-weight: 400;
    margin: 0;
}

.welkom p:nth-child(3) {
    font-size: 14px;
    color: #727272;
    line-height: 1.2;
    margin: 18px auto 0px auto;
}



/* --- Bootstrap --- */

/* --- Tabs --- */

/*.tab-content {
    display: flex;
}
.tab-pane {
    flex: 1;
}*/

/*.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}*/


.main-content .nav-pills {
    display: flex;
    flex-wrap: wrap; /* Tabs worden verdeeld over meerdere rijen */
    /* gap: 0.5rem; */     /* Ruimte tussen tabs */
    justify-content: flex-start;
}

.nav-fill .nav-item {
    /* flex: 0 0 calc(20% - 0.5rem);
    max-width: calc(20% - 0.5rem);
    text-align: center;
    box-sizing: border-box; */
    flex: 0 0 auto !important; /* Override alle Bootstrap-instellingen */
    width: auto !important;    /* Breedte op inhoud baseren */
    text-align: center;
    box-sizing: border-box; /* Inclusief padding en borders */
    margin-right: 10px;
}

.nav-link {
    /* display: flex;
    align-items: center;
    justify-content: left;
    text-decoration: none; */
    background-color: #43b8a8; /* #eae9f6 */
    color: #ffffff; /* #1D2939 */
    /* border: 1px solid #e7e7e7; */
    /* padding: 18px 23px; */
    /* transition: background-color 0.3s ease; */
    font-family: "cronos-pro-display", sans-serif;
    font-weight: 400;
    font-style: normal;
    /* margin-bottom: 5px; */
    border-radius: 10px !important;
    box-shadow: 0 3px 0 #348175;
}

.nav-link.active {
    /* border: 1px solid #FFF; */
    background-color: #5954c2 !important;
    box-shadow: 0 3px 0 #1D2939;
}

.nav-link:hover {
    color: #FFF;
    background-color: #5954c2;
    box-shadow: 0 3px 0 #1D2939;
}



/* --- Home --- */

.btn-lg {
    padding: 9px 26px; /* 10px 30px */
    border-radius: 10px; /* 30px */
    color: #fff;
    border: none;
    font-size: 24px;
}

.home-buttons { 
    margin: 30px 0px 70px 0px; }

.btn-registreren, .btn-opslaan {
    margin-right: 10px;
    background-color: #5954c2; 
}

.btn-oke { background-color: #5954c2; }

.btn-oke, .btn-annuleren {
    font-size: 17px;
    color: #fff;
}

.btn-registreren, .btn-opslaan, .btn-oke { box-shadow: 0 3px 0 #1D2939; }
.btn-inloggen, .btn-download, .btn-annuleren { box-shadow: 0 3px 0 #348175; }

.btn-registreren:hover, .btn-opslaan:hover, .btn-oke:hover { box-shadow: 0 3px 0 #000000; }
.btn-inloggen:hover, .btn-download:hover, .btn-annuleren:hover { box-shadow: 0 3px 0 #6e7988; }

.btn-registreren:hover, .btn-opslaan:hover, .btn-oke:hover {
    color: #FFF;
    background-color: #1D2939;
}

.btn-inloggen, .btn-download, .btn-annuleren { background-color: #43b8a8; }

.btn-rapport {
    background-color: #2ff4d0;
    color: #004037;
    box-shadow: 0 3px 0 #049a85; 
}

.btn-rapport:hover {
    color: #FFF;
    background-color: #049a85;
    box-shadow: 0 3px 0 #004037;
}

.btn-inloggen:hover, .btn-download:hover, .btn-annuleren:hover {
    color: #FFF;
    background-color: #9ca5b1;
}

.btn-volgende, .btn-vorige, .btn-volgende:hover, .btn-vorige:hover {
    color: #1d2939;
    background-color: #eae9f6; 
    box-shadow: 0 3px 0 #bbbacc;
}





/* --- Invullen --- */

/*.opslaan-buttons {
    display: flex;
    margin-top: 30px;
    flex-wrap: nowrap; 
    justify-content: flex-start;
}*/

/* Buitenste container: links & rechts uit elkaar */
.opslaan-buttons {
  display: flex;
  margin-top: 35px;
  justify-content: space-between;
  align-items: center;
}

.form-nav__left{
  display: flex;
  gap: 10px;
}

.form-nav__right{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;    /* duwt deze groep altijd naar rechts */
  position:relative;   /* voor de spinner/absolute posities */
}

.form-nav__right .btn { margin-right: 0px; }

/* Volgorde binnen de rechter groep */
.form-nav__right .wpcf7-spinner{ order: 0; }               /* Spinner */
.form-nav__right #download-knop{ order: 1; } 
.form-nav__right #opslaan-knop{ order: 2; }                 /* Opslaan */
.form-nav__right .wpcf7-submit{ order: 3; }                /* E-mail rapport */

/* Spinner: altijd ruimte, alleen zichtbaar tijdens submit */
.form-nav__right .wpcf7-spinner{
  flex:0 0 24px;
  width:24px;
  height:24px;
  margin-right:8px;          /* ruimte tussen spinner en Opslaan */
  align-self:center;
  /* uiterlijk (override theme/CF7) */
  background:none !important;
  border:2px solid rgba(0,0,0,.2);
  border-top-color: currentColor;   /* neemt tekstkleur over */
  border-radius:50%;
  box-sizing:border-box;
  animation: wpcf7spin .6s linear infinite paused;
  /* verborgen maar ruimte blijft */
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

/* Tijdens submit: zichtbaar en draaiend */
.wpcf7-form.submitting .wpcf7-spinner{
  opacity:1;
  visibility:visible;
  animation-play-state: running;
}

@keyframes wpcf7spin{
  to { transform: rotate(360deg); }
}

/* tijdens submit: toon de spinner ook echt als inline-block */
.wpcf7-form.submitting .wpcf7-spinner{
  display: inline-block !important;
}





/* CF7-knop (Opslaan) */
.wpcf7-submit {
    /*all: unset;
    display: inline-block;
    background-color: #007bff;
    color: #fff; 
    padding: 10px 20px;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    border: none;
    font-size: 1rem;*/
}

/* E-mail rapport-knop */
.btn-secondary {
    /*all: unset;
    display: inline-block;
    background-color: #6c757d;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    text-align: center;
    font-size: 1rem;
    cursor: pointer;*/
}

.wpcf7-spinner {
    margin-left: 10px; /* Zorgt voor wat ruimte tussen de laatste knop en de spinner */
    position: relative;
    order: 2; /* Zorg ervoor dat de spinner als laatste verschijnt in een flex-container */
}



/* --- APK tabel --- */

.apkform-content .table .table-group-divider th { 
    font-size: 25px;
    vertical-align: middle;
    line-height: 1;
}

.fa-check-circle { color: #52e855; }
.fa-times-circle { color: #ee5d50; }
.fa-dot-circle { color: #2ff4d0; }
.fa-minus-circle { color: #eae9f6; }
.fa-circle { color: #43b8a8; }
.table .fa-info-circle { color: #43b8a8; }


.table td {
    vertical-align: middle;
    /* font-size: 21px; */
    color: #363636;
    line-height: 1.1; /* 1.3 */
    letter-spacing: 0.4px;
}

.apkform-content .table td { padding: 12px 8px; }

.apkform-content .table tr td:nth-child(2) { padding: 12px 0px 12px 8px; }

.apkform-content .table tr td:nth-child(3) { 
    padding: 12px 8px 12px 0px; 
    color: #505050;
}

.apkform-content .table tr td:nth-child(5) { font-size: 16px; }



/* --- Buttons --- */

.btn-sm {
    padding: 3px 11px;
    border-radius: 8px;
    font-size: 15px;
}

.btn-informatie { 
    color: #808080;
    border: 2px solid #43b8a8;
    background-color: #2ff4d0; /* ffffff */
}

.btn-informatie:hover {
    color: #FFF;
    background-color: #43b8a8;
}

.btn-toelichting { 
    color: #7a76c1;
    border: 2px solid #b9b6f8;
    background-color: #eae9f6; /* ffffff */
}

.btn-toelichting:hover {
    color: #FFF;
    background-color: #b9b6f8;
}



/* --- Bootstrap Modal --- */

#exampleModalLabel, #toelichtingModalLabel, #modal1 h1, #modal2 h1 {
    margin: 0;
}

.modal-body p,
.modal-body a {
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}



/* --- Invullen tabel --- */

.invullen-content table {
    /*border-spacing: 0px 10px;
    border-collapse: separate;*/

    table-layout: fixed;
    width: 100%;
}

td.tabel-titel { background-color: transparent; }

/*.invullen-content .table tr td, 
.invullen-content .table tr th {
    position: relative;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}*/

.tr-spaced {
    display: table-row;
    height: 15px; /* Ruimte tussen de rijen */
}

.tr-spaced-sm {
    display: table-row;
    height: 8px; /* Ruimte tussen de rijen */
}

.invullen-content table thead tr th, .invullen-content table thead tr th:first-child, .invullen-content table thead tr th:last-child {
    color: #1D2939;
    background-color: #eae9f6;
}

.invullen-content table .table-group-divider { border-top: 0; }

.invullen-content table tr th, .invullen-content table tr td  {
    /* background-color: #ffffff; */
    border-bottom: 0;
}

.invullen-content table thead tr th:first-child { border-radius: 10px 0px 0px 10px; }

.invullen-content table thead tr th:last-child { border-radius: 0px 10px 10px 0px; }

/* .invullen-content table tbody tr th:first-child {
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    background-color: #ffffff;
}

.invullen-content table tbody tr:not(.tr-opmerking) td:last-child {
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    background-color: #ffffff;
} */





.invullen-content .tr-opmerking td {
    width: 100%;
    -webkit-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.15);
    box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.15);
}

.invullen-content .opmerking/*.invullen-content .wpcf7-form-control-wrap*/ {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 15px;
}

.invullen-content .wpcf7-textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box; /* Zorgt ervoor dat padding niet de breedte overschrijdt */
}

.invullen-content .opmerking label {
    display: block;
    width: 100%;
}

.invullen-content table textarea { 
    width: 100% !important;
    box-sizing: border-box; 
}

/*
.invullen-content .wpcf7-textarea {
    width: 100% !important;
    box-sizing: border-box;
}

.invullen-content .opmerking textarea {
    max-width: 100%;
}*/

.invullen-content table tbody tr.tr-opmerking td {
    border-radius: 15px;
    background-color: #ffffff;
}

/* .invullen-content table tbody tr.tr-opmerking > td:nth-child(1) {
    background: none;
    box-shadow: none;
} */


.row-shadow {
    display: block; /* Zorgt ervoor dat de div de hele ruimte van de rij inneemt */
    border-radius: 10px; /* 40px Optioneel: voeg border-radius toe aan de container voor mooie afgeronde hoeken */
    background-color: white; /* Zorgt ervoor dat de container witte achtergrond heeft */

    -webkit-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.15);
    box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.15);
}

.td-shadow { 
    padding: 0px !important; 
    background: none !important;
}

input[type="radio"] {
    accent-color: #5954c2;
  }
  
.invullen-content .wpcf7-number { border-radius: 0px 5px 5px 0px; }

.invullen-content .wpcf7-text { 
    max-width: 220px;    
    border-radius: 0px 5px 5px 0px; 
}



/* Verberg de standaard melding van Contact Form 7 */
.wpcf7-response-output {
    display: none !important;
}

/* Aangepaste melding stijl */
.custom-message {
    display: block !important;  /* Zorg dat het zichtbaar is */
    background-color: #d4edda;  /* Lichtgroene achtergrond */
    color: #155724;             /* Donkergroene tekst */
    padding: 15px;
    border: 1px solid #c3e6cb;
    border-radius: 5px;
    margin-top: 30px;
    font-weight: bold;
    position: relative;         /* Houd het binnen de flow van het formulier */
    /* z-index: 1000; */             /* Zorg dat het niet onder andere elementen verdwijnt */
}


/* Zorg ervoor dat de melding niet verborgen wordt door andere elementen
.custom-message-wrapper {
    position: relative;
    z-index: 1001;
} */


.hidden {
    display: none;
}


.apkform-content .legenda {
    flex: 1 1 25%;
    padding: 20px;
    border-radius: 15px;
    background-color: #ffffff;
    -webkit-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.15);
    box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.15);
}


/* ----- Geen velden standaard verbergen ----- */

input[type="radio"][value="Geen"] {
    display: none;
}

input[type="radio"][value="Geen"] + span.wpcf7-list-item-label {
    display: none;
}


/* ----- Legenda ----- */

.circle {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
}

.legenda .list-group-item { 
    padding: 0px 0px; 
    border: none;
    font-size: 19px;
}


/* ----- Formulier belangrijk! ----- */

.hidden-email {
    display: none !important;
}


/* ----- FAQ ----- */

.accordion { margin-top: 20px; }

.accordion-button {
    font-size: 19px;
    font-weight: 400;
    font-style: normal;
    color: #ffffff;
    background-color: #43b8a8;
}

.accordion-button:not(.collapsed) {
    color: #ffffff;
    background-color: #5954c2;
}

/*.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='rgb%255, 255, 255' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e")
}*/

.accordion-button::after, .accordion-button:not(.collapsed)::after {
    /* Pas de fill-kleur in de SVG aan (hier rood: #ff0000) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 6.646a.5.5 0 0 1 .708 0L8 12.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}



/* ----- Grafieken ----- */

.grafiek {
    /* flex-basis: 410px; */
    min-height: 250px;
    padding: 20px;
    border-radius: 15px;
    background-color: #ffffff;
    -webkit-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.15);
    box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.15);
}

.grafiek:nth-child(2) { display: none; }

p.nodata { color: #aaa; }



/* ----- Mobile menu ----- */

.mobile-menu {
	position: fixed;
	left: -150%;
	top: 0;
    right: 0;
    bottom: 0;
	width: 100%;
	height: 100%;
    padding: 100px 15px 30px 15px; 
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
    background: #f5f6f5;
    z-index: 999;
    overflow-y: auto;
}

.show-menu .mobile-menu {
	display: block;
    left: 0;
}

body.show-menu {
    overflow: hidden;
}

.mobile-menu .menu-links, .mobile-menu .common-links, .mobile-menu .socket-dw {
    list-style-type: none;
}

.mobile-menu .menu-links li, .mobile-menu .common-links li {
    margin-bottom: 10px;
}

.mobile-menu hr { margin: 40px 0px; }

.mobile-menu .common-links li, .mobile-menu .common-links li a {
    font-size: 16px;
    color: #348175;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 700;
}

.mobile-menu .socket-dw {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 35px 15px 30px 15px;
    background: rgb(255,255,255);
    /* background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(245,246,245,1) 100%); */
    background: linear-gradient(0deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 50%, rgb(245, 246, 245) 100%);
}

.mobile-menu .socket-dw li { color: #348175; }

.mobile-menu .socket-dw li:nth-child(1) { margin-bottom: 8px; }

.mobile-menu .socket-dw li a img {
    width: 220px;
}





.invullen-content .tab-pane h2 { 
    font-size: 21px;
    /*margin-top: 20px;*/
}

/*.invullen-content h2:not(:first-child) { margin-top: 20px; } */


.invullen-content .tab-pane h2 {
  margin-top: 20px;
}

/* De allereerste titel in elke tab (met .is-first) krijgt géén extra marge */
.invullen-content .tab-pane .first-titel h2 {
    margin-top: 0;
}
  


/* ----- UM formulieren ----- */

.um-page-register .um-20.um { max-width: none; }

.um-page-register .um-field-block { color: #363636 !important; }
.um-page-register .um-field-checkbox-option, .um-field-radio-option { 
    font-size: 17px !important;
    color: #363636 !important; 
}

.um-page-login .um-field-checkbox-option { font-size: 17px !important; }

.um-page-register .um-field-label label, .um-page-login .um-field-label label, .um-page-account .um-field-label label, .um-page-user .um-field-label label {
    font-size: 17px !important;
    color: #1D2939 !important;
}

.um-page-register .um-field > hr { 
    border-top: 2px dotted #363636;
    opacity: 1.0;
}

.um-page-register .um input[type="submit"] {
    padding: 9px 26px !important;
    border-radius: 10px !important;
    color: #fff;
    border: none !important;
    font-size: 24px;
    box-shadow: 0 3px 0 #1D2939;
    background-color: #5954c2;
}

.um-page-register #um-submit-btn, .um-page-login #um-submit-btn, .um-page-account #um_account_submit_general, .um-page-account #um_account_submit_password, 
.um-page-account #um_account_submit_privacy, .um-page-account #um_account_submit_delete, .um-page-user .um input[type="submit"].um-button {
    padding: 14px 26px !important;
    border-radius: 10px !important;
    color: #fff;
    border: none !important;
    font-size: 24px;
    background-color: #5954c2 !important;
    box-shadow: 0 3px 0 #1D2939 !important;
}

.um-page-login .um-button, .um-page-user .um .um-button.um-alt {
    padding: 14px 26px !important;
    border-radius: 10px !important;
    color: #fff !important;
    border: none !important;
    font-size: 24px !important;
    background-color: #43b8a8 !important;
    box-shadow: 0 3px 0 #348175 !important;
}

.um-page-account .um-request-button {
    padding: 7px 23px !important;
    border-radius: 10px !important;
    color: #fff !important;
    border: none !important;
    font-size: 17px !important;
    background-color: #43b8a8 !important;
    box-shadow: 0 3px 0 #348175 !important;
}

.um-page-account div.uimob800 .um-account-side li a.current {
    background-color: #eae9f6 !important;
    color: #1D2939 !important;
}

.um-page-account .um .um-field-radio.active:not(.um-field-radio-state-disabled) i, .um-page-register .um .um-field-radio.active:not(.um-field-radio-state-disabled) i { color: #5954c2 !important; }

.um-page-user .um-field-value, .um-page-user .um-form input[type="text"], .um-page-user .um-form input[type="tel"], .um-page-account label, .um-page-account .um-form input[type="password"], 
.um-page-account .um-form input[type="text"], .um-page-register .um-form input[type="text"], .um-page-register .um-form input[type="tel"], .um-page-register .um-form input[type="password"] {
    font-size: 17px !important;
    /*color: #1D2939 !important;*/
}

.um-page-user .um-profile-body .um-field > h1 {
    font-size: 24px;
    margin: 30px 0px;
}




/* ----- Cookiebar ----- */

.cky-btn {
    font-size: 17px !important;
    border-radius: 10px !important;
}

.cky-btn-preferences, .cky-btn-customize { box-shadow: 0 3px 0 #1D2939 !important; }

.cky-btn-reject, .cky-btn-accept { box-shadow: 0 3px 0 #348175 !important; }

.cky-notice-des *, .cky-preference-content-wrapper *, .cky-dma-content-wrapper *, .cky-accordion-header-des *, .cky-gpc-wrapper .cky-gpc-desc * {
  font-size: 16px !important;
  line-height: 1.2 !important;
}

.cky-btn-revisit-wrapper {
    -webkit-box-shadow: 0 2px 1px rgba(0,0,0,0.3);
    -moz-box-shadow: 0 2px 1px rgba(0,0,0,0.3);
    box-shadow: 0 2px 1px rgba(0,0,0,0.3);
}

/* .grecaptcha-badge {
    pointer-events: none !important;
} */





/* ----- Hulp ----- */

/* ruimte tussen de genummerde stappen */
.num-lijst ol > li {
  margin-bottom: 1rem;         /* afstand onder elk nummer */
  font-weight: bold;
}

/* sub-bullets (de <ul> binnen elk <li>) iets naar binnen + kleine top marge */
.num-lijst ol > li > ul {
  margin-left: 1.25rem;        /* extra inspringing links */
  /* of: padding-left: 1.25rem;  werkt ook prima */
}

/* optioneel: maak de bullets 'disc' en iets lichter */
.num-lijst ol > li > ul {
  list-style: disc;
}



/* Muis: geen focusring */
.accordion-button:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* Toetsenbord: subtiele ring */
.accordion-button:focus-visible {
  outline: 2px solid rgba(0,0,0,.2);
  outline-offset: 2px;
  box-shadow: none;
}




/* ===== MOBIEL (<=768px) ===== */
@media (max-width:768px){

  /* kaart */
  .invullen-content .row-shadow{
    padding:12px 16px !important;
    border-radius:12px;
    background:#fff;
    overflow-x:hidden;
  }
  .invullen-content .row-shadow table{ width:100%; }

  /* table reset */
  .invullen-content .row-shadow table th,
  .invullen-content .row-shadow table td{
    padding:0 !important;
    border:0 !important;
    min-width:0;
    box-sizing:border-box;
  }

  /* GRID rij: 4 kolommen => 15% | 60% | 25%
     (kolom 1 = nummer, 2 = vraag, 3 = antwoord)
  */
  .invullen-content .row-shadow table tr{
    display:grid;
    grid-template-columns: minmax(0,08%) minmax(0,64%) minmax(0,28%);
    column-gap:12px;
    row-gap:10px;
    align-items:start;
  }

  /* rij 1 */
  .invullen-content .row-shadow table th{
    grid-column:1;
    grid-row:1 / span 2;          /* nummer naast beide rijen */
    white-space:nowrap;
  }
  .invullen-content .row-shadow table td:nth-child(2){ /* vraag */
    grid-column:2;
    grid-row:1;
  }
  .invullen-content .row-shadow table td:nth-child(3){ /* antwoord */
    grid-column:3;
    grid-row:1;
  }

  /* --- Acties (knoppen) samen in één rij, onder vraag+antwoord --- */

  /* Maak td(4) “doorzichtig” zodat z’n kind als grid-item kan worden gepositioneerd */
  .invullen-content .row-shadow table td:nth-child(4){
    display: contents;  /* kinderen worden directe grid items van de <tr> */
  }

  /* De door JS gemaakte container met beide knoppen */
  .invullen-actions{
    grid-column: 2 / 4;           /* BESLAAT vraag + antwoord */
    grid-row: 2;                  /* onder rij 1 */
    display: flex;
    justify-content: flex-end;    /* rechts in de card */
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;            /* géén afbreken naar volgende regel */
  }

  /* verberg de originele Toelichting-td als we gemerged hebben */
  .invullen-actions-merged td:nth-child(5){
    display: none !important;
  }

  /* knoppen: laat .btn-sm je maat bepalen; geen afbreking van tekst */
  .invullen-actions .btn{
    white-space: nowrap;      /* géén tekstafbreking */
    flex: 0 0 auto;           /* houd intrinsieke breedte */
    max-width: 100%;
  }
}



/* Radio-tekst naast de bullet (CF7) */
.invullen-content .row-shadow table td:nth-child(3) .wpcf7-list-item{
  display: block;              /* opties onder elkaar */
}

.invullen-content .row-shadow table td:nth-child(3) .wpcf7-list-item label{
  display: inline-flex;        /* input + tekst op één lijn */
  align-items: center;
  gap: 6px;                    /* ruimte tussen bullet en tekst */
  white-space: nowrap;         /* geen afbreking binnen "N.v.t." etc. */
}

.invullen-content .row-shadow table td:nth-child(3) input[type="radio"]{
  margin: 0;                   /* lijn het mooi uit */
}

/* Voor het geval een theme dit blokkeert */
.invullen-content .row-shadow table td:nth-child(3) .wpcf7-list-item-label{
  display: inline;             /* zeker weten niet blok */
}

/* Verberg de eerste radio-optie (='Geen') in de antwoordkolom */
.invullen-content .row-shadow table td:nth-child(3) .wpcf7-list-item:first-child{
  display: none !important;
}



.invullen-content .table tbody tr div > table tbody th:nth-child(1) {
    color: #1D2939;
    font-size: 19px;
}






/* ----- APK rapport < en > buttons ----- */

@media (max-width: 768px) {
    .opslaan-buttons {
        display: flex;
        justify-content: flex-start;
        gap: 8px;
        --nav-h: 46px;
    }

    .form-nav__left { 
        display:flex; 
        gap: 8px; flex: 0 0 auto; 
        min-width: 0; 
    }

    .form-nav__right { 
        display:flex; 
        gap: 8px; 
        flex: 1 1 auto; 
        justify-content: flex-end; 
        min-width: 0;
    }
    
    .form-nav__right .wpcf7-spinner {
        display: none !important;
        width: 0 !important; 
        height: 0 !important; 
        margin: 0 !important; 
        flex: 0 0 0 !important;
    }

    .btn-vorige, .btn-volgende {
        display: inline-flex; 
        align-items: center; 
        justify-content: center;
        height: var(--nav-h); 
        width: 40px; 
        min-width: 40px; 
        padding: 0; 
        font-size: 0;
    }

    .btn-vorige::before, .btn-volgende::before {
        font-size: clamp(22px, 5.5vw, 24px); 
        line-height: 1;
    }

    .form-nav__right .btn,
    .form-nav__right .wpcf7-submit {
        display: inline-flex; 
        align-items: center; 
        justify-content: center;
        height: var(--nav-h);
        padding: 0 14px !important;
        font-size: clamp(14px, 15px, 20px); /* 17px, 5vw, 20px */
        line-height: 1.2;
        white-space: nowrap;
        min-width: 0;
    }
}

@media (max-width: 380px) {
    .opslaan-buttons { --nav-h: 44px; }
    .form-nav__right { gap: 6px; }
    .form-nav__right .btn, .form-nav__right .wpcf7-submit { padding: 0 12px !important; }
}

@media (max-width: 768px) {
    .btn-vorige::before { content: "\2039"; }
    .btn-volgende::before { content: "\203A"; }
}





/* zorg dat scrollIntoView net onder je (sticky) header stopt */
.nav-pills { scroll-margin-top: 100px; } /* pas 100px aan naar jouw headerhoogte */





/* ----- APK rapport tabel op mobiel binnen viewport houden ----- */

/* Desktop (default): niets forceren */
#apk-rapport-tabs .table {
    width: 100%;
    table-layout: auto;
    border-collapse: collapse;
}

#apk-rapport-tabs .table th,
#apk-rapport-tabs .table td {
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

@media (max-width: 768px) {
    #apk-rapport-tabs .table{
        table-layout: fixed;
        max-width: 100%;
        border-collapse: collapse;
    }

    #apk-rapport-tabs .table th, #apk-rapport-tabs .table td {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
        hyphens: auto;
    }

    #apk-rapport-tabs .table thead th {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #apk-rapport-tabs .table tr.table-header > td {
        white-space: normal !important;
        overflow-wrap: anywhere;
        word-break: break-word;
        hyphens: auto;
    }

    #apk-rapport-tabs .table thead th:nth-child(1), #apk-rapport-tabs .table tbody td:nth-child(1):not([colspan]) {
        width: 10%;
        white-space: nowrap;
    }

    #apk-rapport-tabs .table thead th:nth-child(2), #apk-rapport-tabs .table tbody td:nth-child(2) { width: 13%;  white-space: nowrap; }
    #apk-rapport-tabs .table thead th:nth-child(3), #apk-rapport-tabs .table tbody td:nth-child(3) { width: 57%; }
    #apk-rapport-tabs .table thead th:nth-child(4), #apk-rapport-tabs .table tbody td:nth-child(4) { width: 20%; }
    #apk-rapport-tabs .table thead th:nth-child(5), #apk-rapport-tabs .table tbody td:nth-child(5), #apk-rapport-tabs .table thead th:nth-child(6), 
    #apk-rapport-tabs .table tbody td:nth-child(6) { display: none; }

    #apk-rapport-tabs .table .btn, #apk-rapport-tabs .table .badge, #apk-rapport-tabs .table .form-check {
        white-space: normal;
        max-width: 100%;
    }
}