/*
 * Cookiebanner (zie resources/assets/scripts/cookie/consent.js).
 * Basisopmaak die eerder door @beyonk/gdpr-cookie-consent-banner werd ingeladen;
 * de themakleuren staan in common/global.scss.
 */
.cookieConsentWrapper { z-index: 99990; position: fixed; left: 0; right: 0; bottom: 0; background: black; color: white; padding: 20px; transition: 200ms; }
.cookieConsent { margin: 0 auto; display: flex; justify-content: space-between; }
.cookieConsent__Content { margin-right: 40px; }
.cookieConsent__Title { margin: 0; font-weight: bold; }
.cookieConsent__Description { margin: 10px 0 0; }
.cookieConsent__Description a { color: inherit; text-decoration: underline; }
.cookieConsent__Description a:hover { text-decoration: none; }
.cookieConsentOperations { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.8); display: flex; z-index: 99999; }
.cookieConsentOperations__List { background: white; color: black; max-width: 500px; padding: 40px; margin: auto; overflow-y: auto; box-sizing: border-box; max-height: 100vh; }
.cookieConsentOperations__Item { display: block; padding-left: 60px; margin-bottom: 20px; }
.cookieConsentOperations__Item.disabled { color: #999; }
.cookieConsentOperations__Item.disabled label::after { opacity: 0.3; }
.cookieConsentOperations__Item input { display: none; }
.cookieConsentOperations__Item label { align-items: center; font-size: 22px; font-weight: bold; display: block; position: relative; cursor: pointer; }
.cookieConsentOperations__Item.disabled label { cursor: default; }
.cookieConsentOperations__Item label::before { content: ""; display: block; left: -60px; background: #dedede; height: 20px; border-radius: 20px; width: 40px; position: absolute; top: 50%; transform: translateY(-50%); }
.cookieConsentOperations__Item label::after { content: ""; display: block; width: 16px; height: 16px; border-radius: 50%; background: black; position: absolute; top: 50%; transform: translateY(-50%); left: -58px; transition: 200ms; }
.cookieConsentOperations__Item input:checked + label::after { transform: translate(20px, -50%); }
.cookieConsent__Button { padding: 15px 40px; display: block; color: white; white-space: nowrap; border: 0; font-size: 16px; cursor: pointer; transition: 200ms; }
.cookieConsent__Button--Close { margin: 40px 0 0 60px; padding: 15px 60px; }
.cookieConsent__Button:hover { opacity: 0.6; }

/* Drie knoppen: Voorkeuren, Alleen noodzakelijk, Alle cookies toestaan */
.cookieConsent__Right { display: flex; align-items: flex-end; flex: 0 0 auto; max-width: 50%; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }

@media only screen and (max-width: 900px) {
  .cookieConsent { display: block; }
  .cookieConsent__Right { margin-top: 20px; justify-content: flex-start; max-width: none; }
  .cookieConsent__Button--Close { margin: 40px 0 0; }
}

@media (max-width: 575.98px) {
  .cookieConsent__Right .cookieConsent__Button { flex: 1 1 auto; }
  .cookieConsentOperations__List { padding: 30px 20px; }
}