html body {
    font-family: Verdana, Verdana  !important;
    font-size: 15.3px !important;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
}

.pop-out-color-primary {
    color: #0BA796;
}

.pop-out-color {
    color: #0BA796;
}

input[type=button],
input[type=submit] {
    background-color: #0BA796;
    color: #FFFFFF;
}

    input[type=button]:hover,
    input[type=submit]:hover {
        opacity: .6;
    }

body {
    color: #3F3F3F;
    background-color: #FFFFFF;
}

body a {
    color: #FF9900;
}

body a:hover {
    color: #3F3F3F;
} 

body .fc-event {
    border: 1px solid #FF9900;
}
.text-primary {
    color: #0BA796 !important;
}

.text-dark {
    color: #3F3F3F !important;
}

.right-column a:hover {
    text-decoration: none;
    color: #3F3F3F;
}

    .right-column a:hover .right-text {
        color: #3F3F3F;
    }

.right-column a .right-text {
    color: #0BA796;
}

.right-column .right-item {
    border-bottom: 1px solid #0BA796;
}

.getvideo:hover {
    background-color: #F7F4F5;
    color: #3F3F3F;
}

.content-container {
    background-color: #FFFFFF;
}

footer, .banner {
    background-color: #EEEEEE;
    border-color: #EEEEEE;
}

nav.navbar .nav-item.dropdown .dropdown-toggle::after {
    border-color: #0BA796;
}

.nav-item .nav-link {
    background-color: #FFFFFF;
    color: #0BA796 !important;
}

.nav-item.dropdown .dropdown-toggle::after {
    border-color: #0BA796;
}

.nav-item.dropdown .dropdown-item, .nav-item.dropdown .dropdown-item:hover, .nav-item.dropdown .dropdown-item:focus {
    background-color: #F7F4F5;
    color: #3F3F3F;
}

    .nav-item.dropdown .dropdown-item:before {
        color: transparent;
    }

    .nav-item.dropdown .dropdown-item:not(.dropdown-toggle):hover:before {
        color: #0BA796;
    }

.nav-item.dropdown .dropdown-menu {
    color: #3F3F3F;
    background-color: #F7F4F5;
}

.nav-item.dropdown.show:after {
    color: #F7F4F5;
}

#search-bar {
    color: #3F3F3F;
}

    #search-bar .search {
        color: #3F3F3F;
    }

        #search-bar .search:hover {
            color: #0BA796;
        }

    #search-bar input[type=text] {
        border-bottom: 2px solid #3F3F3F;
    }

        #search-bar input[type=text]::placeholder {
            color: #0BA796;
        }

        #search-bar input[type=text]:-ms-input-placeholder {
            color: #0BA796;
        }

        #search-bar input[type=text]::-ms-input-placeholder {
            color: #0BA796;
        }

.tekst-blok a.card-a {
    color: #3F3F3F;
}

    .tekst-blok a.card-a:hover {
        color: #3F3F3F;
    }

    .tekst-blok a.card-a .meer-info, .tekst-blok a.card-a .feather-chevron-right {
        color: #FF9900;
    }

.tekst-blok .card {
    background-color: #EEEEEE;
}

body .hc-socials a {
    border: 2px solid #0BA796;
}

body .hc-socials a:hover,
body .hc-socials a:focus {
    background: #0BA796;
    color: #FFFFFF;
}

body .hc-socials a:focus svg,
body .hc-socials a:focus svg path,
body .hc-socials a:hover svg,
body .hc-socials a:hover svg path {
    color: #FFFFFF;
    stroke: #FFFFFF;
}

@media (max-width: 992px) {
    body .nav-item .nav-link, .navbar-collapse,
    body .nav-item.dropdown .dropdown-item,
    body .nav-item.dropdown .dropdown-item:hover,
    body .nav-item.dropdown .dropdown-item:focus,
    body .nav-item.dropdown .dropdown-menu,
    body nav.navbar .nav-item.dropdown .dropdown-menu,
    #search-bar-md input[type=text] {
        background: #0BA796;
        background-color: #0BA796;
        color: #FFFFFF !important;
        filter: brightness(100%);
    }

        #search-bar-md input[type=text]::placeholder {
            color: #FFFFFF !important;
            opacity: .6;
        }

        #search-bar-md input[type=text]:-ms-input-placeholder {
            color: #FFFFFF !important;
            opacity: .6;
        }

        #search-bar-md input[type=text]::-ms-input-placeholder {
            color: #FFFFFF !important;
            opacity: .6;
        }

    body nav.navbar .nav-item.dropdown .dropdown-toggle::after {
        border-color: #FFFFFF;
    }

    body .navbar-toggler:after, body .navbar-toggler:before,
    body .navbar-toggler div {
        background-color: #FFFFFF;
    }

    body .navbar-toggler.collapsed:after, body .navbar-toggler.collapsed:before,
    body .navbar-toggler.collapsed div {
        background-color: #3F3F3F;
    }
}

@media (min-width: 992px) {
    header {
        /*background-color: $main-bg-color;*/
    }

    .hasbanner .banner h1.navBanner {
        background-color: #FFFFFF;
        color: #0BA796;
    }
}
 .nav-link {
   font-weight: bold;
}

.pkcVerborgen {
    display: none;
}

input.pkcVerborgen {
    display: none !important;
}

p:has(* input.pkcVerborgen:checked) ~ div {
    display: block;
}

label.pkcMeerLink:has(input.pkcVerborgen:checked) > span:nth-child(1), label.pkcMeerLink:has(input.pkcVerborgen:not(:checked)) > span:nth-child(2) {
    display: none;
}
label.pkcMeerLink:has(input.pkcVerborgen:not(:checked)) > span:nth-child(1), label.pkcMeerLink:has(input.pkcVerborgen:checked) > span:nth-child(2) {
    display: block;
}

label.pkcMeerLink {
    cursor: pointer;
    color: #FF9900;
}

label.pkcMeerLink:hover {
    text-decoration:underline;
}

<!-- Geen externe iconenbibliotheek nodig; we gebruiken de PNG-bestanden van pkcastricum.nl --><!-- ============  STYLING  ============ -->
<!-- Het style-deel, net als het script-deel, kan het beste worden geplaatst op een deel van de site dat altijd zichtbaar is, bijv. in het hoofdmenu. -->
<style type="text/css">.pkcButton {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    margin-top: 1em
}

/* Vast gecentreerd popup-venster */
#pkcContactPopup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    color: #000;
    width: 40em;
    max-width: 90vw;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .2);
    z-index: 1000;
}

/* Vervaagde achtergrond-overlay */
#pkcOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(5px); /* Vervaag de achtergrond */
  background-color: rgba(0, 0, 0, 0.3); /* Half transparante donkere laag */
  z-index: 10;
  display: none;
}

/* -------- Link-opmaak op de pagina -------- */
a[data-pkcphone],
a[data-pkcemail] {
    color: #ff9900;
    text-decoration: none;
    padding-left: 25px;
    position: relative;
    cursor: pointer;
}

a[data-pkcphone]::before,
a[data-pkcemail]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.2em;
    width: 1em;
    height: 1em;
    background-size: 1em 1em;
    background-repeat: no-repeat;
}

a[data-pkcphone]::after {
    content: "Telefoon";
}

a[data-pkcemail]::after {
    content: "E-mail";
}

/* Telefoonicoon als er alleen een telefoonnummer is (en niet per ongeluk ook een e-mail). */
a[data-pkcphone]:not([data-pkcemail])::before {
    background-image: url('https://www.pkcastricum.nl/uploads/klant750/files/phone-solid%20-%20kopie.png');
}

/* Envelop-icoon als er alleen e-mail is (en niet per ongeluk ook een e-telefoonnummer). */
a[data-pkcemail]:not([data-pkcphone])::before {
    background-image: url('https://www.pkcastricum.nl/uploads/klant750/files/envelope-solid%20-%20kopie.png');
}

/* -------- Popup -------- */
.pkcContactIcon {
    width: 20px;
    height: 20px
}
.pkcPopupContent {
    position: relative
}
.pkcContactPopupClose {
    position: absolute;
    top: -20px;
    right: 5px;
    font-size: 18px;
    cursor: pointer
}
.pkcPopupDialog {
    color: #ff9900;
    border: none;
    cursor: pointer;
    padding: 10px;
    margin-top: 10px;
    width: 100%
}
.pkcPopupDialog:hover {
    color: #3f3f3f
}
</style>
<!-- ============  SCRIPT  ============ --><!-- Het script-deel, net als het style-deel, kan het beste worden geplaatst op een deel van de site dat altijd zichtbaar is, bijv. in het hoofdmenu. --><script>
  const PKCCONTACTPOPUP = "pkcContactPopup";
  const PKCOVERLAY = "pkcOverlay";

  function pkcShowContactPopup(el){
    const popup  = document.getElementById(PKCCONTACTPOPUP);
    const overlay = document.getElementById(PKCOVERLAY);

    if (popup.style.display === "block") {
        overlay.style.display = "none";
        popup.style.display = "none";
    } else {
   	    const phone  = (el.dataset.pkcphone || "").trim();
        const email  = (el.dataset.pkcemail || "").trim();
    
        popup.innerHTML = pkcBuildPopup(phone, email);
        overlay.style.display = "block";
        popup.style.display = "block";
    }
  }

  function pkcBuildPopup(phone, emailAlias){
    const rows = [];
    const copyImg  = '<img alt="" src="https://www.pkcastricum.nl/uploads/klant750/files/clipboard.png" class="pkcContactIcon">';
    const phoneImg = '<img alt="" src="https://www.pkcastricum.nl/uploads/klant750/files/phone-solid%20-%20kopie.png" class="pkcContactIcon">';
    const mailImg  = '<img alt="" src="https://www.pkcastricum.nl/uploads/klant750/files/envelope-solid%20-%20kopie.png" class="pkcContactIcon">';

    if(phone){
      const telHref = `tel:${phone}`;
      rows.push(`<tr><td>${copyImg}</td><td>Kopieer</td><td><a class="pkcPopupDialog" onclick=\"pkcCopyContact('${phone}')\"><u>${phone}</u></a></td></tr>`);
      rows.push(`<tr><td>${phoneImg}</td><td>Bellen&nbsp;met</td><td><a class="pkcPopupDialog" href='${telHref}'><u>${phone}</u></a></td></tr>`);
    }

    if(emailAlias){
      const fullMail = (emailAlias.includes("/")) ? emailAlias.replace(/\//, "@") : `${emailAlias}@pkcastricum.nl`;
      const mailHref = `mailto:${fullMail}`;
      rows.push(`<tr><td>${copyImg}</td><td>Kopieer</td><td><a class="pkcPopupDialog" onclick=\"pkcCopyContact('${fullMail}')\"><u>${fullMail}</u></a></td></tr>`);
      rows.push(`<tr><td>${mailImg}</td><td>E-mail&nbsp;naar</td><td><a class="pkcPopupDialog" href='${mailHref}'><u>${fullMail}</u></a></td></tr>`);
    }

    return `<div class=\"pkcPopupContent\">\n
	<span class=\"pkcContactPopupClose\" onclick=\"pkcHideContactPopup()\">&times;</span>\n
	<table>\n
	<colgroup><col width=\"10%\"><col width=\"25%\"><col width=\"65%\"></colgroup>\n
	${rows.join("\n")}\n
	</table>\n
	<button class=\"pkcButton\" type=\"button\" onclick=\"pkcHideContactPopup()\">Sluiten</button>\n
	</div>`;
  }

  function pkcHideContactPopup(){
    document.getElementById(PKCCONTACTPOPUP).style.display = "none";
    document.getElementById(PKCOVERLAY).style.display = "none";
  }

  function pkcClickInOverlay(el, event) {
    // Aangeroepen bij een klik in de achtergrond als de popup getoond wordt.
    console.log("event=" + event);
    if (!document.getElementById(PKCCONTACTPOPUP).contains(event.target)) {
        // Klik was buiten de popup
        pkcHideContactPopup();
    }
  }

  function pkcCopyContact(val){
    const tmp = document.createElement("input");
    tmp.value = val; document.body.appendChild(tmp); tmp.select();
    document.execCommand("copy"); document.body.removeChild(tmp);
    pkcHideContactPopup();
  }
 </script>
<!-- ============  HTML  ============ -->
<!-- De volgende divs moeten er maar een keer zijn; bijvoorbeeld in de banner van de site. --><!-- Geen externe iconenbibliotheek nodig; we gebruiken de PNG-bestanden van pkcastricum.nl --><!-- ============  STYLING  ============ --><!-- Het style-deel, net als het script-deel, kan het beste worden geplaatst op een deel van de site dat altijd zichtbaar is, bijv. in het hoofdmenu. -->
<style type="text/css">.pkcButton {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    margin-top: 1em
}

/* Vast gecentreerd popup-venster */
#pkcContactPopup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    color: #000;
    width: 40em;
    max-width: 90vw;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .2);
    z-index: 1000;
}

/* Vervaagde achtergrond-overlay */
#pkcOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(5px); /* Vervaag de achtergrond */
  background-color: rgba(0, 0, 0, 0.3); /* Half transparante donkere laag */
  z-index: 10;
  display: none;
}

/* -------- Link-opmaak op de pagina -------- */
a[data-pkcphone],
a[data-pkcemail] {
    color: #ff9900;
    text-decoration: none;
    padding-left: 25px;
    position: relative;
    cursor: pointer;
}

a[data-pkcphone]::before,
a[data-pkcemail]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.2em;
    width: 1em;
    height: 1em;
    background-size: 1em 1em;
    background-repeat: no-repeat;
}

a[data-pkcphone]::after {
    content: "Telefoon";
}

a[data-pkcemail]::after {
    content: "E-mail";
}

/* Telefoonicoon als er alleen een telefoonnummer is (en niet per ongeluk ook een e-mail). */
a[data-pkcphone]:not([data-pkcemail])::before {
    background-image: url('https://www.pkcastricum.nl/uploads/klant750/files/phone-solid%20-%20kopie.png');
}

/* Envelop-icoon als er alleen e-mail is (en niet per ongeluk ook een e-telefoonnummer). */
a[data-pkcemail]:not([data-pkcphone])::before {
    background-image: url('https://www.pkcastricum.nl/uploads/klant750/files/envelope-solid%20-%20kopie.png');
}

/* -------- Popup -------- */
.pkcContactIcon {
    width: 20px;
    height: 20px
}
.pkcPopupContent {
    position: relative
}
.pkcContactPopupClose {
    position: absolute;
    top: -20px;
    right: 5px;
    font-size: 18px;
    cursor: pointer
}
.pkcPopupDialog {
    color: #ff9900;
    border: none;
    cursor: pointer;
    padding: 10px;
    margin-top: 10px;
    width: 100%
}
.pkcPopupDialog:hover {
    color: #3f3f3f
}
</style>
<!-- ============  SCRIPT  ============ --><!-- Het script-deel, net als het style-deel, kan het beste worden geplaatst op een deel van de site dat altijd zichtbaar is, bijv. in het hoofdmenu. --><script>
  const PKCCONTACTPOPUP = "pkcContactPopup";
  const PKCOVERLAY = "pkcOverlay";

  function pkcShowContactPopup(el){
    const popup  = document.getElementById(PKCCONTACTPOPUP);
    const overlay = document.getElementById(PKCOVERLAY);

    if (popup.style.display === "block") {
        overlay.style.display = "none";
        popup.style.display = "none";
    } else {
   	    const phone  = (el.dataset.pkcphone || "").trim();
        const email  = (el.dataset.pkcemail || "").trim();
    
        popup.innerHTML = pkcBuildPopup(phone, email);
        overlay.style.display = "block";
        popup.style.display = "block";
    }
  }

  function pkcBuildPopup(phone, emailAlias){
    const rows = [];
    const copyImg  = '<img alt="" src="https://www.pkcastricum.nl/uploads/klant750/files/clipboard.png" class="pkcContactIcon">';
    const phoneImg = '<img alt="" src="https://www.pkcastricum.nl/uploads/klant750/files/phone-solid%20-%20kopie.png" class="pkcContactIcon">';
    const mailImg  = '<img alt="" src="https://www.pkcastricum.nl/uploads/klant750/files/envelope-solid%20-%20kopie.png" class="pkcContactIcon">';

    if(phone){
      const telHref = `tel:${phone}`;
      rows.push(`<tr><td>${copyImg}</td><td>Kopieer</td><td><a class="pkcPopupDialog" onclick=\"pkcCopyContact('${phone}')\"><u>${phone}</u></a></td></tr>`);
      rows.push(`<tr><td>${phoneImg}</td><td>Bellen&nbsp;met</td><td><a class="pkcPopupDialog" href='${telHref}'><u>${phone}</u></a></td></tr>`);
    }

    if(emailAlias){
      const fullMail = (emailAlias.includes("/")) ? emailAlias.replace(/\//, "@") : `${emailAlias}@pkcastricum.nl`;
      const mailHref = `mailto:${fullMail}`;
      rows.push(`<tr><td>${copyImg}</td><td>Kopieer</td><td><a class="pkcPopupDialog" onclick=\"pkcCopyContact('${fullMail}')\"><u>${fullMail}</u></a></td></tr>`);
      rows.push(`<tr><td>${mailImg}</td><td>E-mail&nbsp;naar</td><td><a class="pkcPopupDialog" href='${mailHref}'><u>${fullMail}</u></a></td></tr>`);
    }

    return `<div class=\"pkcPopupContent\">\n
	<span class=\"pkcContactPopupClose\" onclick=\"pkcHideContactPopup()\">&times;</span>\n
	<table>\n
	<colgroup><col width=\"10%\"><col width=\"25%\"><col width=\"65%\"></colgroup>\n
	${rows.join("\n")}\n
	</table>\n
	<button class=\"pkcButton\" type=\"button\" onclick=\"pkcHideContactPopup()\">Sluiten</button>\n
	</div>`;
  }

  function pkcHideContactPopup(){
    document.getElementById(PKCCONTACTPOPUP).style.display = "none";
    document.getElementById(PKCOVERLAY).style.display = "none";
  }

  function pkcClickInOverlay(el, event) {
    // Aangeroepen bij een klik in de achtergrond als de popup getoond wordt.
    console.log("event=" + event);
    if (!document.getElementById(PKCCONTACTPOPUP).contains(event.target)) {
        // Klik was buiten de popup
        pkcHideContactPopup();
    }
  }

  function pkcCopyContact(val){
    const tmp = document.createElement("input");
    tmp.value = val; document.body.appendChild(tmp); tmp.select();
    document.execCommand("copy"); document.body.removeChild(tmp);
    pkcHideContactPopup();
  }
 </script><!-- ============  HTML  ============ --><!-- De volgende divs moeten er maar een keer zijn; bijvoorbeeld in de banner van de site. -->
<div id="pkcContactPopup">&nbsp;</div>