@charset "utf-8";
/* CSS Document */

body {
  font-family: 'Montserrat', sans-serif;
}

html,
body,
body.site,
.body-wrapper,
.body-innerwrapper,
#sp-main,
#sp-main-body,
#sp-component {
  background-color: #fefefe !important;
}

#sp-footer {
  margin-top: 0 !important;
  background-color: #fefefe !important;
}

/* =========================================
   Adobe Font - Thirsty Script headings
   ========================================= */

/* Grote sectietitels */
h1,
.sppb-addon-title h1,
.sppb-section-title h1 {
    font-family: "thirsty-script", sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 50px;
	color: #14426F;
    line-height: 1.05;
}

/* H2 titels */
h2,
.sppb-addon-title,
.sppb-section-title h2 {
    font-family: "thirsty-script", sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 40px;
	color: #14426F;
    line-height: 1.1;
}

/* H3 titels, o.a. nieuwsbloktitels */
h3,
.sppb-addon-articles .sppb-addon-article h3,
.sppb-addon-articles .sppb-addon-article h3 a {
    font-family: "thirsty-script", sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 24px;
	color: #14426F;
    line-height: 1.15;
}

/* H4 subtitels */
h4 {
    font-family: "thirsty-script", sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 24px;
	color: #14426F;
    line-height: 1.2;
}

/* =========================================================
   HEADER FIXED + PAGINA'S NETJES ONDER HEADER
   ========================================================= */

#sp-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;

  height: 110px;
  min-height: 110px;

  z-index: 9999;

  background: #ffffff;
  box-shadow: 0 8px 25px rgba(60, 40, 30, 0.025) !important;
}

/* Technische ruimte voor de fixed header */
body {
  padding-top: 110px;
}

/* Homepage met slider mag bovenaan blijven */
body.view-featured {
  padding-top: 0;
}

/* =========================================================
   VISUELE RUIMTE OP BINNENPAGINA'S
   ========================================================= */

/* Joomla artikelen */
body.com-content.view-article .article-details,
.article-details.binnenpagina {
  margin-top: 45px !important;
}

/* SP Page Builder binnenpagina's */
body.com-sppagebuilder:not(.view-featured) #sp-page-builder,
body.com-sppagebuilder:not(.view-featured) .sp-page-builder {
  padding-top: 45px !important;
}

/* Docman / Intranet */
body.com_docman #sp-component,
body.com-docman #sp-component,
.binnenpagina .k-ui-namespace,
.binnenpagina .koowa {
  padding-top: 45px !important;
}

/* Ankerlinks */
html {
  scroll-padding-top: 118px;
}

/* Mobiel */
@media (max-width: 767px) {
  body {
    padding-top: 85px;
  }

  body.view-featured {
    padding-top: 0;
  }

  body.com-content.view-article .article-details,
  .article-details.binnenpagina {
    margin-top: 30px !important;
  }

  body.com-sppagebuilder:not(.view-featured) #sp-page-builder,
  body.com-sppagebuilder:not(.view-featured) .sp-page-builder,
  body.com_docman #sp-component,
  body.com-docman #sp-component,
  .binnenpagina .k-ui-namespace,
  .binnenpagina .koowa {
    padding-top: 30px !important;
  }

  html {
    scroll-padding-top: 85px;
  }
}

#sp-header .container,
#sp-header .container-inner,
#sp-header .row,
#sp-header .sp-column {
  height: 100%;
  min-height: 118px;
  background: transparent !important;
  align-items: center;
}

#sp-logo {
  height: 118px;
  min-height: 118px;
  padding-top: 30px !important;
  padding-bottom: 0 !important;
  display: flex;
  align-items: center;
}

/* =========================================================
   NIEUWSBLOKKEN SP PAGE BUILDER - GEKLEURDE KAARTEN
   ========================================================= */

/* Afbeeldingen in nieuwsoverzicht verbergen */
.sppb-addon-articles .sppb-article-img-wrap {
    display: none !important;
}

/* Rij / kolommen iets luchtiger */
.sppb-addon-articles .sppb-row {
    row-gap: 34px;
}

/* Kaart zelf */
.sppb-addon-articles .sppb-addon-article {
    height: 100%;
    min-height: 360px;
    padding: 46px 40px 28px;
    display: flex;
    align-items: stretch;
    justify-content: center;
    text-align: center;
    box-shadow: 0 14px 32px rgba(0,0,0,0.06);
    transition: all 0.25s ease;
}

/* Hover op kaart */
.sppb-addon-articles .sppb-addon-article:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 38px rgba(0,0,0,0.10);
}

/* Binnenkant als verticale layout */
.sppb-addon-articles .sppb-article-info-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
}

/* Titel op gelijke hoogte */
.sppb-addon-articles .sppb-addon-article h3 {
    min-height: 78px;
    margin: 0 0 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    line-height: 1.05;
}

/* Titel link */
.sppb-addon-articles .sppb-addon-article h3 a,
.sppb-addon-articles .sppb-addon-article h3 a:hover,
.sppb-addon-articles .sppb-addon-article h3 a:focus,
.sppb-addon-articles .sppb-addon-article h3 a:active {
    font-family: "thirsty-script", sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 26px;
    line-height: 1.05;
    color: #14426F !important;
    text-decoration: none !important;
}

/* Fijn golvend lijntje onder titel */
.sppb-addon-articles .sppb-addon-article h3::after {
    content: "";
    display: block;
    width: 70px;
    height: 10px;
    margin: 18px auto 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='16' viewBox='0 0 100 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8 C9 4, 15 4, 21 8 S33 12, 39 8 S51 4, 57 8 S69 12, 75 8 S87 4, 97 8' fill='none' stroke='%2314426F' stroke-width='2.3' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Intro tekst
   Let op: géén display:flex hier, anders verspringt tekst bij strong/b */
.sppb-addon-articles .sppb-article-introtext {
    flex: 1;
    display: block !important;
    margin-top: 0;
    color: #14426F;
    font-size: 17px;
    line-height: 1.45;
    text-align: center;
}

.sppb-addon-articles .sppb-article-introtext p {
    margin: 0;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    text-align: center;
}

/* Vetgedrukte tekst netjes binnen lopende tekst houden */
.sppb-addon-articles .sppb-article-introtext strong,
.sppb-addon-articles .sppb-article-introtext b {
    display: inline !important;
    font-weight: 700;
}

/* Lees meer altijd onderaan */
.sppb-addon-articles .sppb-readmore,
.sppb-addon-articles .sppb-readmore:hover,
.sppb-addon-articles .sppb-readmore:focus,
.sppb-addon-articles .sppb-readmore:active {
    display: inline-block;
    margin-top: auto;
    margin-bottom: 0;
    padding-top: 22px;
    align-self: center;
    color: #14426F !important;
    font-weight: 700;
    text-decoration: none !important;
}

/* =========================================================
   NIEUWS - KLEUREN PER KAART, HERHALEND PER 4
   ========================================================= */

/* Kleur 1, 5, 9 enz. */
.sppb-addon-articles .sppb-addon-article-layout:nth-child(4n+1) .sppb-addon-article {
    background: linear-gradient(145deg, #14426F 0%, #08529C 100%);
}

/* Kleur 2, 6, 10 enz. */
.sppb-addon-articles .sppb-addon-article-layout:nth-child(4n+2) .sppb-addon-article {
    background: linear-gradient(145deg, #a99054 0%, #dac3ab 100%);
}

/* Kleur 3, 7, 11 enz. */
.sppb-addon-articles .sppb-addon-article-layout:nth-child(4n+3) .sppb-addon-article {
    background: linear-gradient(145deg, #d8f1f6 0%, #eefbfc 100%);
}

/* Kleur 4, 8, 12 enz. */
.sppb-addon-articles .sppb-addon-article-layout:nth-child(4n+4) .sppb-addon-article {
    background: linear-gradient(145deg, #f3eee7 0%, #ffffff 100%);
}

/* Donkerblauw blok: alles wit houden, ook bij hover */
.sppb-addon-articles .sppb-addon-article-layout:nth-child(4n+1) .sppb-addon-article h3,
.sppb-addon-articles .sppb-addon-article-layout:nth-child(4n+1) .sppb-addon-article h3 a,
.sppb-addon-articles .sppb-addon-article-layout:nth-child(4n+1) .sppb-addon-article h3 a:hover,
.sppb-addon-articles .sppb-addon-article-layout:nth-child(4n+1) .sppb-addon-article h3 a:focus,
.sppb-addon-articles .sppb-addon-article-layout:nth-child(4n+1) .sppb-addon-article h3 a:active,
.sppb-addon-articles .sppb-addon-article-layout:nth-child(4n+1) .sppb-addon-article .sppb-article-introtext,
.sppb-addon-articles .sppb-addon-article-layout:nth-child(4n+1) .sppb-addon-article .sppb-article-introtext p,
.sppb-addon-articles .sppb-addon-article-layout:nth-child(4n+1) .sppb-addon-article .sppb-readmore,
.sppb-addon-articles .sppb-addon-article-layout:nth-child(4n+1) .sppb-addon-article .sppb-readmore:hover,
.sppb-addon-articles .sppb-addon-article-layout:nth-child(4n+1) .sppb-addon-article .sppb-readmore:focus,
.sppb-addon-articles .sppb-addon-article-layout:nth-child(4n+1) .sppb-addon-article .sppb-readmore:active {
    color: #ffffff !important;
}

/* Donkerblauw blok: wit golvend lijntje */
.sppb-addon-articles .sppb-addon-article-layout:nth-child(4n+1) .sppb-addon-article h3::after {
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='16' viewBox='0 0 100 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8 C9 4, 15 4, 21 8 S33 12, 39 8 S51 4, 57 8 S69 12, 75 8 S87 4, 97 8' fill='none' stroke='%23ffffff' stroke-width='2.3' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

/* =========================================================
   NIEUWS RESPONSIVE
   ========================================================= */

@media (max-width: 767px) {
    .sppb-addon-articles .sppb-addon-article {
        min-height: auto;
        padding: 34px 26px 30px;
    }

    .sppb-addon-articles .sppb-addon-article h3 {
        min-height: auto;
        margin-bottom: 22px;
    }

    .sppb-addon-articles .sppb-addon-article h3 a,
    .sppb-addon-articles .sppb-addon-article h3 a:hover,
    .sppb-addon-articles .sppb-addon-article h3 a:focus,
    .sppb-addon-articles .sppb-addon-article h3 a:active {
        font-size: 30px;
    }

    .sppb-addon-articles .sppb-article-introtext,
    .sppb-addon-articles .sppb-article-introtext p {
        font-size: 17px;
    }

    .sppb-addon-articles .sppb-readmore {
        padding-top: 20px;
    }
}

/* =========================================================
   NIEUWS + GOEDE DOELEN - NETTE WITRUIMTE IN INTROTEKST
   ========================================================= */

/* Paragrafen niet te veel ruimte geven */
.sppb-addon-articles .sppb-article-introtext p,
.goededoelen-artikelen .sppb-article-introtext p {
    margin: 0 0 9px 0 !important;
}

/* Laatste paragraaf zonder extra ruimte onderaan */
.sppb-addon-articles .sppb-article-introtext p:last-child,
.goededoelen-artikelen .sppb-article-introtext p:last-child {
    margin-bottom: 0 !important;
}

/* Gewone zachte regelbreuk */
.sppb-addon-articles .sppb-article-introtext br,
.goededoelen-artikelen .sppb-article-introtext br {
    line-height: 1.6;
}

/* Twee keer Shift+Enter geeft een kleine witregel */
.sppb-addon-articles .sppb-article-introtext br + br,
.goededoelen-artikelen .sppb-article-introtext br + br {
    display: block;
    content: "";
    margin-top: 9px;
}

/* Vetgedrukte tekst blijft netjes in de lopende tekst */
.sppb-addon-articles .sppb-article-introtext strong,
.sppb-addon-articles .sppb-article-introtext b,
.goededoelen-artikelen .sppb-article-introtext strong,
.goededoelen-artikelen .sppb-article-introtext b {
    display: inline !important;
    font-weight: 700;
}

/* =========================================================
   PAGINANAVIGATIE - VORIGE / VOLGENDE ARTIKEL
   ========================================================= */

.pagenavigation {
    margin-top: 50px;
    padding-top: 28px;
    border-top: 1px solid rgba(20, 66, 111, 0.18);
}

/* Wrapper netjes verdelen */
.pagenavigation .pagination {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    width: 100%;
    padding: 0;
    margin: 0;
}

/* Buttons basis */
.pagenavigation .pagination a,
.pagenavigation .btn,
.pagenavigation .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 145px;
    padding: 13px 24px;
    border: 1px solid #14426F !important;
    border-radius: 0;
    background: transparent !important;
    color: #14426F !important;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: all 0.25s ease;
}

/* Hover */
.pagenavigation .pagination a:hover,
.pagenavigation .pagination a:focus,
.pagenavigation .btn:hover,
.pagenavigation .btn:focus,
.pagenavigation .btn-secondary:hover,
.pagenavigation .btn-secondary:focus {
    background: #DCC690 !important;
    border-color: #14426F !important;
    color: #14426F !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

/* Iconen iets subtieler */
.pagenavigation .icon-chevron-left,
.pagenavigation .icon-chevron-right {
    font-size: 12px;
    color: #14426F !important;
}

/* Ruimte tussen icoon en tekst */
.pagenavigation .previous .icon-chevron-left {
    margin-right: 8px;
}

.pagenavigation .next .icon-chevron-right {
    margin-left: 8px;
}

/* Als er alleen 'Vorige' of alleen 'Volgende' is */
.pagenavigation .pagination .previous {
    margin-right: auto;
}

.pagenavigation .pagination .next {
    margin-left: auto;
}

/* Mobiel onder elkaar */
@media (max-width: 575px) {
    .pagenavigation {
        margin-top: 38px;
    }

    .pagenavigation .pagination {
        flex-direction: column;
        align-items: stretch;
    }

    .pagenavigation .pagination a,
    .pagenavigation .btn,
    .pagenavigation .btn-secondary {
        width: 100%;
        min-width: 0;
    }
}

/* =========================================================
   HOOFDMENU KLEUREN
   ========================================================= */

/* Basis menu-items */
.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span {
    color: #14426F !important;
}

/* Hover, active en visited */
.sp-megamenu-parent > li > a:hover,
.sp-megamenu-parent > li:hover > a,
.sp-megamenu-parent > li.active > a,
.sp-megamenu-parent > li.active:hover > a,
.sp-megamenu-parent > li.current-item > a,
.sp-megamenu-parent > li.current-item:hover > a,

}

/* Dropdown menu-items */
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
    color: #14426F !important;
}

/* Dropdown hover / active */
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.current-item > a {
    color: #a99054 !important;
}

/* =========================================================
   LOGIN FORMULIER - KIWAANIS LEDENLOGIN
   ========================================================= */

/* Login blok iets compacter */
.login,
.com-users.view-login .login,
#member-login {
    max-width: 520px;
}

/* Titel login */
.login h1,
.login h2,
.login h3,
.com-users.view-login h1,
.com-users.view-login h2,
.com-users.view-login h3 {
    color: #ffffff !important;
    margin-bottom: 26px;
}

/* Labels */
.login label,
.com-users.view-login label,
#member-login label {
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 6px;
}

/* Inputvelden */
.login input[type="text"],
.login input[type="password"],
.login input[type="email"],
.login .form-control,
.com-users.view-login input[type="text"],
.com-users.view-login input[type="password"],
.com-users.view-login input[type="email"],
.com-users.view-login .form-control,
#member-login input[type="text"],
#member-login input[type="password"],
#member-login input[type="email"],
#member-login .form-control {
    height: 40px !important;
    min-height: 40px !important;
    padding: 8px 14px !important;
    border: 1px solid rgba(255,255,255,0.85) !important;
    border-radius: 4px !important;
    background: rgba(255,255,255,0.08) !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
}

/* Placeholder tekst */
.login input::placeholder,
.com-users.view-login input::placeholder,
#member-login input::placeholder {
    color: rgba(255,255,255,0.65) !important;
}

/* Focus */
.login input:focus,
.login .form-control:focus,
.com-users.view-login input:focus,
.com-users.view-login .form-control:focus,
#member-login input:focus,
#member-login .form-control:focus {
    border-color: #dac3ab !important;
    background: rgba(255,255,255,0.12) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 2px rgba(218,195,171,0.25) !important;
    outline: none !important;
}

/* Wachtwoord oogje / input-group addon compacter */
.login .input-group,
.com-users.view-login .input-group,
#member-login .input-group {
    max-width: 100%;
}

.login .input-group .form-control,
.com-users.view-login .input-group .form-control,
#member-login .input-group .form-control {
    border-radius: 4px 0 0 4px !important;
}

.login .input-group .btn,
.login .input-group button,
.com-users.view-login .input-group .btn,
.com-users.view-login .input-group button,
#member-login .input-group .btn,
#member-login .input-group button {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 14px !important;
    border-radius: 0 4px 4px 0 !important;
    border: 1px solid rgba(255,255,255,0.85) !important;
    border-left: 0 !important;
    background: rgba(255,255,255,0.22) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

/* Onthoud mij */
.login .form-check,
.com-users.view-login .form-check,
#member-login .form-check {
    margin: 14px 0 22px;
}

.login .form-check-label,
.com-users.view-login .form-check-label,
#member-login .form-check-label {
    color: #ffffff !important;
    font-size: 15px;
}

/* Checkbox kleiner/netter */
.login input[type="checkbox"],
.com-users.view-login input[type="checkbox"],
#member-login input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin-right: 8px;
    accent-color: #dac3ab;
}

/* Passkey button compacter */
.login .btn-secondary,
.com-users.view-login .btn-secondary,
#member-login .btn-secondary {
    height: 42px !important;
    min-height: 42px !important;
    padding: 9px 18px !important;
    border: 1px solid rgba(255,255,255,0.65) !important;
    border-radius: 4px !important;
    background: rgba(255,255,255,0.22) !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px !important;
    font-weight: 500;
    line-height: 1.2 !important;
    box-shadow: none !important;
}

/* Login button */
.login button[type="submit"],
.login .btn-primary,
.com-users.view-login button[type="submit"],
.com-users.view-login .btn-primary,
#member-login button[type="submit"],
#member-login .btn-primary {
    height: 42px !important;
    min-height: 42px !important;
    padding: 9px 22px !important;
    border: 1px solid #ffffff !important;
    border-radius: 4px !important;
    background: transparent !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px !important;
    font-weight: 600;
    line-height: 1.2 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: all 0.25s ease;
}

/* Hover login button */
.login button[type="submit"]:hover,
.login .btn-primary:hover,
.com-users.view-login button[type="submit"]:hover,
.com-users.view-login .btn-primary:hover,
#member-login button[type="submit"]:hover,
#member-login .btn-primary:hover {
    background: #dac3ab !important;
    border-color: #dac3ab !important;
    color: #14426F !important;
}

/* Linkblok wachtwoord/gebruiker vergeten/registreren */
.login .list-group,
.com-users.view-login .list-group,
#member-login .list-group {
    margin-top: 18px;
    border-radius: 4px;
    overflow: hidden;
}

.login .list-group-item,
.com-users.view-login .list-group-item,
#member-login .list-group-item {
    padding: 10px 14px !important;
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.22) !important;
    color: #ffffff !important;
    font-size: 14px;
}

.login .list-group-item a,
.com-users.view-login .list-group-item a,
#member-login .list-group-item a,
.login a,
.com-users.view-login a,
#member-login a {
    color: #ffffff !important;
    text-decoration: none !important;
}

.login .list-group-item a:hover,
.com-users.view-login .list-group-item a:hover,
#member-login .list-group-item a:hover,
.login a:hover,
.com-users.view-login a:hover,
#member-login a:hover {
    color: #dac3ab !important;
}

/* Mobiel */
@media (max-width: 767px) {
    .login,
    .com-users.view-login .login,
    #member-login {
        max-width: 100%;
    }

    .login input[type="text"],
    .login input[type="password"],
    .login input[type="email"],
    .login .form-control,
    .com-users.view-login input[type="text"],
    .com-users.view-login input[type="password"],
    .com-users.view-login input[type="email"],
    .com-users.view-login .form-control,
    #member-login input[type="text"],
    #member-login input[type="password"],
    #member-login input[type="email"],
    #member-login .form-control {
        height: 38px !important;
        min-height: 38px !important;
        font-size: 14px !important;
    }

    .login button[type="submit"],
    .login .btn-primary,
    .login .btn-secondary,
    .com-users.view-login button[type="submit"],
    .com-users.view-login .btn-primary,
    .com-users.view-login .btn-secondary,
    #member-login button[type="submit"],
    #member-login .btn-primary,
    #member-login .btn-secondary {
        height: 40px !important;
        min-height: 40px !important;
        font-size: 14px !important;
    }
}

/* =========================================================
   LEDENLOGIN / JOOMLA MOD LOGIN - COMPACTE STYLING
   ========================================================= */

/* Formulierbreedte */
.mod-login {
    max-width: 430px;
}

/* Labels */
.mod-login label {
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 6px;
}

/* Ruimte tussen velden iets compacter */
.mod-login .form-group,
.mod-login .mb-3 {
    margin-bottom: 16px !important;
}

/* Inputvelden */
.mod-login .form-control {
    height: 40px !important;
    min-height: 40px !important;
    padding: 8px 12px !important;
    border: 1px solid rgba(255,255,255,0.85) !important;
    border-radius: 0 !important;
    background: rgba(255,255,255,0.08) !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
}

/* Focus input */
.mod-login .form-control:focus {
    border-color: #dac3ab !important;
    background: rgba(255,255,255,0.12) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 2px rgba(218,195,171,0.22) !important;
    outline: none !important;
}

/* Wachtwoordveld + oogje */
.mod-login .input-group {
    display: flex;
    width: 100%;
}

.mod-login .input-group .form-control {
    border-radius: 0 !important;
}

.mod-login .input-password-toggle {
    width: 46px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,0.85) !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    background: rgba(255,255,255,0.18) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.mod-login .input-password-toggle:hover,
.mod-login .input-password-toggle:focus {
    background: #dac3ab !important;
    color: #14426F !important;
}

/* Onthoud mij */
.mod-login__remember {
    margin-top: 4px !important;
    margin-bottom: 18px !important;
}

.mod-login .form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 0 !important;
}

.mod-login .form-check-input {
    width: 15px !important;
    height: 15px !important;
    margin: 0 !important;
    border-radius: 2px !important;
    border: 1px solid rgba(255,255,255,0.85) !important;
    background-color: #ffffff !important;
    box-shadow: none !important;
    accent-color: #dac3ab;
}

.mod-login .form-check-label {
    color: #ffffff !important;
    font-size: 15px;
    margin: 0 !important;
}

/* Passkey button kleiner en rustiger */
.mod-login .plg_system_webauthn_login_button {
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 8px 16px !important;
    border: 1px solid rgba(255,255,255,0.65) !important;
    border-radius: 0 !important;
    background: rgba(255,255,255,0.20) !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
    transition: all 0.25s ease;
}

.mod-login .plg_system_webauthn_login_button svg {
    width: 20px !important;
    height: 20px !important;
    margin-right: 8px;
    fill: currentColor !important;
}

.mod-login .plg_system_webauthn_login_button:hover,
.mod-login .plg_system_webauthn_login_button:focus {
    background: #dac3ab !important;
    border-color: #dac3ab !important;
    color: #14426F !important;
}

/* Inloggen button */
.mod-login #btn-login-submit,
.mod-login .btn-primary {
    width: auto !important;
    min-width: 135px;
    height: 42px !important;
    min-height: 42px !important;
    padding: 8px 24px !important;
    border: 1px solid #ffffff !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: all 0.25s ease;
}

.mod-login #btn-login-submit:hover,
.mod-login #btn-login-submit:focus,
.mod-login .btn-primary:hover,
.mod-login .btn-primary:focus {
    background: #dac3ab !important;
    border-color: #dac3ab !important;
    color: #14426F !important;
}

/* Zorg dat de submit wrapper niet alles forceert */
.mod-login__submit {
    text-align: left;
}

/* Opties: wachtwoord/gebruiker vergeten/registreren */
.mod-login__options {
    max-width: 430px;
    margin-top: 18px;
    border-radius: 0 !important;
    overflow: hidden;
}

.mod-login__options .list-group-item {
    padding: 10px 14px !important;
    border: 1px solid rgba(255,255,255,0.32) !important;
    border-bottom: 0 !important;
    background: rgba(255,255,255,0.08) !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px !important;
    line-height: 1.3;
    text-decoration: none !important;
}

.mod-login__options .list-group-item:last-child {
    border-bottom: 1px solid rgba(255,255,255,0.32) !important;
}

.mod-login__options .list-group-item:hover,
.mod-login__options .list-group-item:focus {
    background: #dac3ab !important;
    color: #14426F !important;
}

/* De algemene Bootstrap btn-lg en w-100 wat temmen binnen deze login */
.mod-login .btn-lg {
    font-size: 15px !important;
    border-radius: 0 !important;
}

.mod-login .w-100:not(.plg_system_webauthn_login_button) {
    width: auto !important;
}

/* Mobiel */
@media (max-width: 767px) {
    .mod-login {
        max-width: 100%;
    }

    .mod-login .form-control {
        height: 38px !important;
        min-height: 38px !important;
        font-size: 14px !important;
    }

    .mod-login .input-password-toggle {
        height: 38px !important;
        min-height: 38px !important;
    }

    .mod-login .plg_system_webauthn_login_button,
    .mod-login #btn-login-submit,
    .mod-login .btn-primary {
        height: 40px !important;
        min-height: 40px !important;
        font-size: 14px !important;
    }

    .mod-login #btn-login-submit,
    .mod-login .btn-primary {
        width: 100% !important;
    }
}

/* =========================================================
   DOCMAN / INTRANET ONDER VAST MENU
   ========================================================= */

/* Docman componentpagina's */
body.com_docman #sp-component,
body.com-docman #sp-component,
body.view-docman #sp-component {
    padding-top: 50px !important;
}

/* Als de page class binnenpagina ergens om de Docman content staat */
.binnenpagina .k-ui-namespace,
.binnenpagina .docman,
.binnenpagina .docman-container,
.binnenpagina .koowa {
    margin-top: 50px !important;
}

/* Extra vangnet voor de intranet pagina */
body.itemid-101 .k-ui-namespace,
body.itemid-101 .docman,
body.itemid-101 .docman-container,
body.itemid-101 .koowa {
    margin-top: 50px !important;
}

/* Mobiel */
@media (max-width: 767px) {
    body.com_docman #sp-component,
    body.com-docman #sp-component,
    body.view-docman #sp-component {
        padding-top: 55px !important;
    }

    .binnenpagina .k-ui-namespace,
    .binnenpagina .docman,
    .binnenpagina .docman-container,
    .binnenpagina .koowa,
    body.itemid-101 .k-ui-namespace,
    body.itemid-101 .docman,
    body.itemid-101 .docman-container,
    body.itemid-101 .koowa {
        margin-top: 55px !important;
    }
}

:root,
body,
body.site {
    --template-link-color: #a99054;
    --template-link-hover-color: #14426F;
}

/* =========================================================
   DOCMAN ACTIEKNOPPEN - WIJZIGEN / VERWIJDEREN
   ========================================================= */

/* Basis styling voor Docman actieknoppen */
a.btn.btn-small.btn-sm,
a.btn.btn-default.btn-secondary.btn-small.btn-sm,
a.btn.btn-danger.docman-deletable {
    border-radius: 4px !important;
    padding: 8px 16px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: all 0.25s ease;
}

/* Wijzigen button */
a.btn.btn-default.btn-secondary.btn-small.btn-sm {
    background: transparent !important;
    border: 1px solid #14426F !important;
    color: #14426F !important;
}

/* Wijzigen hover */
a.btn.btn-default.btn-secondary.btn-small.btn-sm:hover,
a.btn.btn-default.btn-secondary.btn-small.btn-sm:focus {
    background: #dac3ab !important;
    border-color: #a99054 !important;
    color: #14426F !important;
}

/* Verwijderen button */
a.btn.btn-danger.docman-deletable {
    background: #a99054 !important;
    border: 1px solid #a99054 !important;
    color: #ffffff !important;
}

/* Verwijderen hover */
a.btn.btn-danger.docman-deletable:hover,
a.btn.btn-danger.docman-deletable:focus {
    background: #14426F !important;
    border-color: #14426F !important;
    color: #ffffff !important;
}

/* =========================================================
   BEELDMERK RECHTS IN HEADER VIA TOP1 MODULE
   ========================================================= */

/* Beeldmerk loshalen uit de top1-rij en rechts in de header plaatsen */
.menu-beeldmerk {
    position: fixed !important;
    top: 30px;
    right: 55px;
    z-index: 10005;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Afbeelding */
.menu-beeldmerk img {
    display: block;
    max-height: 58px;
    width: auto;
}

/* De losse top1/section-rij geen zichtbare ruimte laten innemen */
#sp-top1,
#sp-top,
#sp-section-title,
#sp-title {
    min-height: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    overflow: visible !important;
}

/* Binnenruimte van module opschonen */
#sp-top1 .sp-column,
#sp-top1 .sp-module,
#sp-top1 .sp-module-content,
#sp-section-title .sp-column,
#sp-section-title .sp-module,
#sp-section-title .sp-module-content {
    min-height: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    overflow: visible !important;
}

/* Mobiel verbergen, anders wordt het te druk */
@media (max-width: 991px) {
    .menu-beeldmerk {
        display: none !important;
    }
}

/* =========================================================
   ARTICLE ADDON - LOAD MORE BUTTON / LEES ALLE BERICHTEN
   ========================================================= */

.sppb-addon-articles button[data-sppb-articles-load-more-button],
button[data-sppb-articles-load-more-button].sppb-btn-dark {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    padding: 11px 22px !important;
    border: 1px solid #14426F !important;
    border-radius: 0 !important;

    background: transparent !important;
    color: #14426F !important;

    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;

    text-decoration: none !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: all 0.25s ease;
}

/* Hover / focus */
.sppb-addon-articles button[data-sppb-articles-load-more-button]:hover,
.sppb-addon-articles button[data-sppb-articles-load-more-button]:focus,
button[data-sppb-articles-load-more-button].sppb-btn-dark:hover,
button[data-sppb-articles-load-more-button].sppb-btn-dark:focus {
    background: #dac3ab !important;
    border-color: #a99054 !important;
    color: #14426F !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Actieve klik */
.sppb-addon-articles button[data-sppb-articles-load-more-button]:active,
button[data-sppb-articles-load-more-button].sppb-btn-dark:active {
    background: #a99054 !important;
    border-color: #a99054 !important;
    color: #ffffff !important;
}

/* Disabled / als er geen extra berichten meer zijn */
.sppb-addon-articles button[data-sppb-articles-load-more-button]:disabled,
button[data-sppb-articles-load-more-button].sppb-btn-dark:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}