.bg-custom{--bs-bg-opacity:1;background-color:var(--background-balk-color)!important}

.bg-primary-custom{--bs-bg-opacity:1;background-color:var(--element-color)!important}


/* Stel bijvoorbeeld 80px afstand in bovenaan */

/* 1) Desktop: max-breedte instellen */
/* Algemene max-breedte en marge rondom */
#cdUserModal .modal-dialog {
    max-width: 90%;     /* valt terug op viewport-breedte op smalle schermen */
    width: 350px;       /* vaste breedte als viewport breder is dan 350px */
    margin: 1rem auto;  /* ruimte boven en onder */
}

.video-box {
    margin: 0 0 20px!important;
}
@media (max-width: 991.98px) {
    .header-theme-18 .nav-drop {
        background: #000!important;
    }
}


/* Voor schermen smaller dan 768px (mobiel) */
@media (max-width: 767px) {
    .jobs-foot .amount {
        display: block;       /* zorgt dat margin-top goed pakt */
        margin-top: 20px!important;     /* pas dit getal aan naar wens */
    }
}


.popular-jobs-box:hover .box-holder {
    background: #fff!important;
}

.nav-opener .d-flex .d-lg-none {
    color: var(--link-nav-color)!important;
    background: var(--link-nav-color)!important;
}

.header-theme-18 .navigation > li > a:not(.btn) {
    color: var(--link-nav-color)!important;
}

.header-theme-18 .nav-opener:not(:hover)::before {
    background: var(--link-nav-color)!important;
}

.header-theme-18 .nav-opener:not(:hover)::after {
    background: var(--link-nav-color)!important;
}

.header-theme-18 .nav-close span, .header-theme-18 .nav-close::after, .header-theme-18 .nav-close::before, .header-theme-18 .nav-opener span, .header-theme-18 .nav-opener::after, .header-theme-18 .nav-opener::before {
    background: var(--link-nav-color)!important;
}

/* Content in modal maximaal 90% van view-height, body scrollt binnenin */
#cdUserModal .modal-content {
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}
#cdUserModal .modal-body {
    overflow-y: auto;
}

/* Optioneel: iets kleinere marge/padding voor héél kleine schermen */
@media (max-width: 360px) {
    #cdUserModal .modal-dialog {
        width: 95%;
        margin: 0.5rem auto;
    }
    #cdUserModal .modal-content {
        max-height: 85vh;
    }
}

.mb-4 { margin-bottom: 1.5rem !important; }
.mb-3 { margin-bottom: 1rem   !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-1 { margin-bottom: 0.25rem !important; }

/* compenseer de padding aan de zijkanten van de slider container */
.gallery-block .slick-list {
    margin: 0 -0.5rem;
}

/* horizontale padding tussen elke slide */
.gallery-block .slick-slide {
    padding: 0 0.5rem;
}

/* optioneel: als je meerdere rijen hebt en vertical spacing wilt */
.gallery-block .card {
    margin-bottom: 1rem;
}



#bedrijf {
    scroll-margin-top: 80px;
}

#collegas {
    scroll-margin-top: 80px;
}

.social-networks.large li a:hover {
    background-color: #005582;
}

.btn.btn-primary:hover::before {
    background-color: var(--element-hover-color)!important;
    color: white!important;
}
.btn.btn-primary:hover {
    background-color: var(--element-hover-color)!important;
    color: white!important;
}

h2,
h3,
h4,
h5,
h6 {
    color: var(--head-color)!important;
    font-family: var(--head-font)!important;
    margin: 0 !important;
}

h3 {
    font-size: var(--head-size)!important;
}

h4 {
    font-size: var(--head-size)!important;
}

h5 {
    font-size: var(--head-size)!important;
}

h6 {
    font-size: 18px;
}

p {
    font-size: var(--font-size)!important;
    color: var(--text-color)!important;
}

body {
    font-family: var(--text-font)!important;
}

strong {
    color: var(--text-color)!important;
}

.details-column a
{
    color: var(--a-color)!important;
}

a {
    color: var(--a-color);
}

a:hover,
a:focus {
    color: var(--element-hover-color)!important;
}

li a {
    color: #fff;
}

@media (min-width: 992px) {
    .sticky-header .header-theme-18 .navigation > li > a:not(.btn, :hover) {
        color: #000;
    }
}

.bullet-list  {
    padding:0 7px!important;
}

.bullet-list li {
    font-size: var(--font-size)!important;
    color: var(--text-color)!important;
}

.bullet-list li::before {
    background: var(--text-color)!important;
}


.btn-primary {
    --bs-btn-color:#000;
    --bs-btn-bg:var(--element-color)!important;
    --bs-btn-border-color:#ffca1d;
    --bs-btn-hover-color:#000;
    --bs-btn-hover-bg:#ffd23f;
    --bs-btn-hover-border-color:#ffcf34;
    --bs-btn-focus-shadow-rgb:217,172,25;
    --bs-btn-active-color:#000;
    --bs-btn-active-bg:#ffd54a;
    --bs-btn-active-border-color:#ffcf34;
    --bs-btn-active-shadow:inset 0 3px 5px rgba(0,0,0,0.125);
    --bs-btn-disabled-color:#000;
    --bs-btn-disabled-bg:#ffca1d;
    --bs-btn-disabled-border-color:#ffca1d
}

.modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: none !important;
    z-index: 1050 !important;
    overflow: hidden;
    outline: 0;
}
.modal.show {
    display: block !important;
}

.modal-dialog {
    margin: auto !important;
}

.modal-dialog.modal-dialog-centered {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
}

.modal-content {
    background-color: #fff !important;
    border: none;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    border-radius: 10px; /* Pas aan voor meer of minder afronding */
}


i {
  font-family: inherit !important;   /* pakt de lettertype-familie van de parent */
  font-style: italic !important;     /* forceert cursief */
}


.modal-body {
    padding: 2rem; /* Zorgt voor voldoende ruimte rondom de formulier-elementen */
}