/*
 * Cookiebot-banner in de huisstijl. Cookiebot laadt via GTM en zet zijn eigen <style> in de pagina;
 * daarom alles onder #CybotCookiebotDialog en waar nodig !important.
 */
#CybotCookiebotDialog {
  --cb-ink: #1c1b19;
  --cb-orange: #eb6432;
  --cb-sand: #e1ddd3;
  --cb-line: rgba(255, 255, 255, .14);
  background: var(--cb-ink) !important;
  color: #fff !important;
  font-family: "Metropolis", sans-serif !important;
  letter-spacing: .01em !important;
  border-radius: 0 !important;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45) !important;
}
#CybotCookiebotDialog *,
#CybotCookiebotDialog button { font-family: inherit !important; }

/* Kop: ons logo links, het Cookiebot-merkje klein en gedimd rechts. */
#CybotCookiebotDialogHeader { border-color: var(--cb-line) !important; }
#CybotCookiebotDialogHeaderLogosWrapper { justify-content: space-between !important; align-items: center !important; }
#CybotCookiebotDialogHeaderLogosWrapper::before {
  content: ""; width: 190px; height: 20px;
  background: url("../img/logo-baantalent.svg") left center / contain no-repeat;
}
#CybotCookiebotDialogPoweredbyLink { display: none !important; }
@media (max-width: 600px) { #CybotCookiebotDialogHeaderLogosWrapper::before { width: 130px; height: 14px; } }
#CybotCookiebotDialogPoweredbyCybot svg { fill: #fff !important; opacity: .45; height: 22px !important; }

/* Tabbladen */
#CybotCookiebotDialogNav { border-bottom: 1px solid var(--cb-line) !important; }
#CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink {
  color: rgba(255, 255, 255, .7) !important;
  text-transform: uppercase; font-size: 13px !important; font-weight: 600 !important; letter-spacing: .08em !important;
  border-bottom: 3px solid transparent !important;
}
#CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink:hover,
#CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink.CybotCookiebotDialogActive {
  color: #fff !important; border-bottom-color: var(--cb-orange) !important;
}

/* Tekst en links */
#CybotCookiebotDialog h2,
#CybotCookiebotDialog h3,
#CybotCookiebotDialog label,
#CybotCookiebotDialog legend,
#CybotCookiebotDialog strong { color: #fff !important; }
#CybotCookiebotDialogBodyContentTitle { text-transform: uppercase; font-weight: 700 !important; letter-spacing: .04em !important; }
#CybotCookiebotDialogBodyContentText,
#CybotCookiebotDialog .CybotCookiebotScrollContainer p,
#CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieTypeIntro { color: rgba(255, 255, 255, .78) !important; }
#CybotCookiebotDialog a:not(.CybotCookiebotDialogNavItemLink):not(#CybotCookiebotDialogPoweredbyCybot),
#CybotCookiebotDialog button.CybotCookiebotDialogDetailBodyContentCookieContainerButton:hover,
#CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentIABv2Tab:hover { color: var(--cb-orange) !important; }
#CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieContainerButton,
#CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentIABv2Tab,
#CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieProvider { color: #fff !important; }
#CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonDescription,
#CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieTypeTableContainer { color: rgba(255, 255, 255, .7) !important; }
#CybotCookiebotDialog .CybotCookiebotScrollContainer,
#CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonWrapper,
#CybotCookiebotDialog #CybotCookiebotDialogBodyLevelButtonsSelectPane,
#CybotCookiebotDialog #CybotCookiebotDialogFooter,
#CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieContainerTypes,
#CybotCookiebotDialog fieldset,
#CybotCookiebotDialog li { border-color: var(--cb-line) !important; }
/* Uitloop van de scrolltekst: verloop naar de donkere achtergrond in plaats van wit. */
#CybotCookiebotDialog .CybotCookiebotScrollContainer::after,
#CybotCookiebotDialog .CybotCookiebotFader { background: linear-gradient(to top, var(--cb-ink), rgba(28, 27, 25, 0)) !important; }
#CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieTypeTableContainer,
#CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieTabContent,
#CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieInfoCount { background: rgba(255, 255, 255, .06) !important; color: #fff !important; }

/* Tellers en pijltjes in Details */
#CybotCookiebotDialog .CybotCookiebotDialogDetailBulkConsentCount { background: rgba(255, 255, 255, .14) !important; color: #fff !important; }
#CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieContainerButton::before,
#CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentIABv2Tab::before { border-color: #fff !important; }

/* Schakelaars */
#CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonSlider { background-color: rgba(255, 255, 255, .22) !important; }
#CybotCookiebotDialog input:checked + .CybotCookiebotDialogBodyLevelButtonSlider { background-color: var(--cb-orange) !important; }
#CybotCookiebotDialog input:disabled:checked + .CybotCookiebotDialogBodyLevelButtonSlider { background-color: rgba(235, 100, 50, .45) !important; opacity: 1 !important; }
#CybotCookiebotDialog input:focus-visible + .CybotCookiebotDialogBodyLevelButtonSlider { outline: 2px solid #fff; outline-offset: 2px; }

/* Knoppen: rechthoekig en in kapitalen, zoals .btn op de site. Alles toestaan is oranje, de rest omlijnd. */
#CybotCookiebotDialog .CybotCookiebotDialogBodyButton {
  border-radius: 0 !important;
  border: 2px solid #fff !important;
  background: transparent !important;
  color: #fff !important;
  text-transform: uppercase; font-size: 14px !important; font-weight: 600 !important; letter-spacing: .08em !important;
  transition: background-color .2s, color .2s, border-color .2s;
}
#CybotCookiebotDialog .CybotCookiebotDialogBodyButton:hover {
  background: var(--cb-sand) !important; border-color: var(--cb-sand) !important; color: var(--cb-ink) !important;
}
#CybotCookiebotDialog #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll {
  background: var(--cb-orange) !important; border-color: var(--cb-orange) !important; color: #fff !important;
}
#CybotCookiebotDialog #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll:hover {
  background: var(--cb-sand) !important; border-color: var(--cb-sand) !important; color: var(--cb-ink) !important;
}
#CybotCookiebotDialog .CybotCookiebotDialogBodyButton:focus-visible { outline: 2px solid var(--cb-orange) !important; outline-offset: 3px; }

/* Widget "Cookie-instellingen" (rond knopje linksonder, verschijnt na een keuze) in dezelfde stijl. */
#CookiebotWidget {
  --cb-ink: #1c1b19;
  --cb-orange: #eb6432;
  --cb-sand: #e1ddd3;
  --cb-line: rgba(255, 255, 255, .14);
  font-family: "Metropolis", sans-serif !important;
  background: var(--cb-ink) !important;
  color: #fff !important;
  border-radius: 0 !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .45) !important;
}
#CookiebotWidget * { font-family: inherit !important; }
#CookiebotWidget:not(.CookiebotWidget-open) { border-radius: 50% !important; }
#CookiebotWidget .CookiebotWidget-logo svg path,
#CookiebotWidget .CookiebotWidget-close svg path,
#CookiebotWidget .CookiebotWidget-show-consent-details svg path { fill: #fff !important; }
#CookiebotWidget .CookiebotWidget-logo svg circle { fill: var(--cb-ink) !important; }
#CookiebotWidget .CookiebotWidget-header,
#CookiebotWidget #CookiebotWidget-buttons { border-color: var(--cb-line) !important; }
#CookiebotWidget .CookiebotWidget-header strong,
#CookiebotWidget .CookiebotWidget-state { color: #fff !important; text-transform: uppercase; letter-spacing: .06em; }
#CookiebotWidget .CookiebotWidget-consents-list li,
#CookiebotWidget .CookiebotWidget-consent-details-box,
#CookiebotWidget .CookiebotWidget-consent-details-box strong { color: rgba(255, 255, 255, .78) !important; }
#CookiebotWidget .Cookiebotwidget-consent-icon svg path { fill: rgba(255, 255, 255, .55) !important; }
#CookiebotWidget .CookiebotWidget-consents-list li.CookiebotWidget-approved { color: #fff !important; }
#CookiebotWidget .CookiebotWidget-consents-list li.CookiebotWidget-approved .Cookiebotwidget-consent-icon svg path { fill: var(--cb-orange) !important; }
#CookiebotWidget .CookiebotWidget-show-consent-details { color: var(--cb-orange) !important; font-weight: 600 !important; }
#CookiebotWidget .CookiebotWidget-main-logo svg { fill: #fff !important; opacity: .45; }
#CookiebotWidget #CookiebotWidget-buttons button {
  border-radius: 0 !important;
  border: 2px solid #fff !important;
  background: transparent !important;
  color: #fff !important;
  text-transform: uppercase; font-size: 13px !important; font-weight: 600 !important; letter-spacing: .08em !important;
}
#CookiebotWidget #CookiebotWidget-buttons #CookiebotWidget-btn-change {
  background: var(--cb-orange) !important; border-color: var(--cb-orange) !important;
}
#CookiebotWidget #CookiebotWidget-buttons button:not(:disabled):hover {
  background: var(--cb-sand) !important; border-color: var(--cb-sand) !important; color: var(--cb-ink) !important;
}
#CookiebotWidget #CookiebotWidget-buttons button:disabled { opacity: .4; }
#CookiebotWidget #CookiebotWidget-widgetContent,
#CookiebotWidget .CookiebotWidget-contents,
#CookiebotWidget .CookiebotWidget-body,
#CookiebotWidget #CookiebotWidget-buttons { background: var(--cb-ink) !important; border-radius: 0 !important; }
#CookiebotWidget .CookiebotWidget-consent-details-box { background: rgba(255, 255, 255, .06) !important; border-radius: 0 !important; }
#CookiebotWidget .CookiebotWidget-date,
#CookiebotWidget .CookiebotWidget-consent-id { color: #fff !important; }