/* ==========================================================================
   aim.nu – basisstijl
   Kleuren:  rood #E30613 · rood voor tekst #C00510 · rood in grijze vlakken #CC0512
             koppen #737373 · payoff/grijze band #8A8A8A · tekst #3D3D3D / #4A4A4A
             lichtgrijs #EAEAEA (huidige site) · zacht grijs #F5F5F5 · lijn #ECE7E0
   Letters:  koppen Nunito 800 (subkoppen 700) · tekst Poppins 400/500/600
   Opzet:    vlakken (.kader) over de volle breedte, inhoud max. 1640 px, inhoud lijnt uit op het menu (.lijn)
   Let op:   de pagina's gebruiken nog veel inline stijlen uit het ontwerp. Zet die bij
             de bouw om naar componenten/klassen (zie CLAUDE.md).
   ========================================================================== */

html{scroll-padding-top:96px;scrollbar-gutter:stable both-edges}
/* both-edges: de ruimte die de scrollbalk rechts inneemt, wordt links ook vrijgehouden.
   Zo zijn de witte randen naast de vlakken links en rechts even breed. */
body{margin:0}
a{color:#C00510;text-decoration:none} /* nergens een streep onder links (wens Mark, 6 november 2026) */
a:hover{color:#8E030B}
:focus-visible{outline:3px solid #E30613;outline-offset:3px}

/* ---- Opzet: vlakken met witruimte aan de zijkanten (zoals aim.nu), inhoud binnen max. 1640 px ---- */
/* --kantlijn is de witte rand links en rechts van elk vlak; op telefoons lopen de vlakken tot de rand. */
:root{--kantlijn:0px}
@media (min-width: 900px){ :root{--kantlijn:clamp(8px, calc(2.1vw - 15px), 28px)} }
/* De 15 px die de scrollbalk links extra vrijhoudt (scrollbar-gutter) zit al in de witte rand, daarom hier 15 px minder. */
.kader{width:auto;margin:0 var(--kantlijn) clamp(12px, 1.4vw, 20px);box-sizing:border-box}
/* Header, vlakken en footer delen één container van max. 1640 px (incl. padding), zodat alles op het menu uitlijnt */
.lijn,.rechts-in,[style*="max-width: 1640px"]{box-sizing:border-box}
.lijn{padding-left:clamp(20px, 3vw, 32px) !important;padding-right:clamp(20px, 3vw, 32px) !important}
@media (min-width: 900px){
  /* De kantlijn schuift de inhoud naar binnen; die verschuiving trekken we er weer af, zodat de inhoud op het menu blijft uitlijnen.
     Op schermen breder dan 1640 px + kantlijn valt de kantlijn buiten de container en hoeft er niets af. */
  .kader .lijn{padding-left:calc(clamp(20px, 3vw, 32px) + 108px - max(0px, var(--kantlijn) - max(0px, (100vw - 1640px) / 2))) !important;padding-right:calc(clamp(20px, 3vw, 32px) + 108px - max(0px, var(--kantlijn) - max(0px, (100vw - 1640px) / 2))) !important}
  .lijn{padding-left:calc(clamp(20px, 3vw, 32px) + 108px) !important;padding-right:calc(clamp(20px, 3vw, 32px) + 108px) !important}
  .rechts-in{padding-right:calc(clamp(20px, 3vw, 32px) + 108px) !important}
  /* Header: de knoppen rechts lijnen uit op de rechterrand van de vlakken (de kantlijn);
     logo en menu blijven op hun plek, zodat de inhoud op het menu blijft uitlijnen. */
  .site-hdr .hdr-inner{max-width:none;padding-left:max(var(--kantlijn), calc((100% - 1640px) / 2 + clamp(20px, 3vw, 32px))) !important;padding-right:calc(var(--kantlijn) + 5px) !important}
}

/* ---- Sticky header die verkleint bij scrollen (klasse .klein via aim.js) ---- */
.site-hdr{position:sticky;top:0;z-index:50;background:#FFFFFF;transition:box-shadow .3s ease}
/* Geen onderrand: die liep als dun lijntje door de witte kantlijn naast de vlakken. Bij scrollen krijgt de header een schaduw (.klein). */
.hdr-inner{position:relative;max-width:1640px;margin:0 auto;padding:18px clamp(20px, 3vw, 32px);box-sizing:border-box;display:flex;flex-wrap:nowrap;align-items:center;gap:56px;transition:padding .3s ease}
.hdr-home{display:flex;align-items:center;flex:none;text-decoration:none}
.hdr-logo{display:block;width:52px;height:52px;transition:width .3s ease,height .3s ease}
.hdr-nav{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:24px;font-size:15px;font-weight:500}
.hdr-nav a{color:#737373;text-decoration:none;white-space:nowrap}
.hdr-nav a:hover,.hdr-nav a.actief{color:#C00510}
.hdr-cta{flex:none;margin-left:auto;white-space:nowrap;background:#E30613;color:#FFFFFF;text-decoration:none;padding:12px 20px;border-radius:999px;font-size:15px;font-weight:600;line-height:1.6}
.hdr-cta:hover{background:#C00510;color:#FFFFFF}
/* Link naar het klantendashboard Mijn aim: naast de knop op brede schermen, in het uitklapmenu op kleinere */
.hdr-mijn{flex:none;margin-left:auto;white-space:nowrap;color:#C00510;text-decoration:none;padding:11px 20px;border:1px solid #E30613;border-radius:999px;font-size:15px;font-weight:600;line-height:1.6}
.hdr-mijn:hover{background:#FDEDEE;color:#8E030B}
.hdr-mijn + .hdr-cta{margin-left:-44px}
.hdr-mijn + .menu-knop{margin-left:auto} /* header zonder kennismakingsknop (homepage) */
.nav-mijn{display:none}
/* Net boven het hamburgermenu is de ruimte krap: kleinere tussenruimtes en Mijn aim als tekstlink */
@media (min-width: 1280px) and (max-width: 1439px){
  .hdr-inner{gap:28px}
  .hdr-nav{gap:14px}
  .hdr-mijn{padding-left:4px;padding-right:4px;border-color:transparent}
  .hdr-mijn:hover{background:transparent;color:#8E030B}
  .hdr-mijn + .hdr-cta{margin-left:-12px}
}
.menu-knop{display:none;flex:none;width:44px;height:44px;margin:0 -6px 0 0;padding:0;border:0;border-radius:8px;background:transparent;color:#737373;cursor:pointer;align-items:center;justify-content:center}
.menu-streep,.menu-streep::before,.menu-streep::after{display:block;width:24px;height:2px;border-radius:2px;background:currentColor;transition:transform .25s ease,background-color .25s ease}
.menu-streep{position:relative}
.menu-streep::before,.menu-streep::after{content:"";position:absolute;left:0}
.menu-streep::before{top:-7px}
.menu-streep::after{top:7px}
.menu-open .menu-streep{background:transparent}
.menu-open .menu-streep::before{transform:translateY(7px) rotate(45deg)}
.menu-open .menu-streep::after{transform:translateY(-7px) rotate(-45deg)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Het logo lijnt uit op de linkerrand van de vlakken; het menu schuift dat verschil terug, zodat het op de inhoud blijft uitlijnen */
@media (min-width: 1280px){
  .site-hdr .hdr-nav{margin-left:calc(max(clamp(20px, 3vw, 32px), (100vw - 1640px) / 2 + clamp(20px, 3vw, 32px)) - max(var(--kantlijn), (100vw - 1640px) / 2 + clamp(20px, 3vw, 32px)))}
}

/* Smaller scherm: menu achter een hamburger, de knop blijft altijd op één regel naast het logo */
@media (max-width: 1279px){
  .hdr-inner{gap:16px}
  .menu-knop{display:inline-flex}
  .hdr-nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:8px clamp(20px, 3vw, 32px) 20px;background:#FFFFFF;border-bottom:1px solid #ECE7E0;box-shadow:0 14px 24px rgba(0,0,0,.08);max-height:calc(100vh - 80px);overflow-y:auto;font-size:17px}
  .menu-open .hdr-nav{display:flex}
  .hdr-nav a{padding:14px 0;border-bottom:1px solid #ECE7E0}
  .hdr-nav a:last-child{border-bottom:0}
  .hdr-mijn{display:none}
  .hdr-mijn + .hdr-cta{margin-left:auto}
  .hdr-nav .nav-mijn{display:block;font-weight:600;color:#C00510}
}
@media (max-width: 899px){
  .hdr-inner{padding-top:12px;padding-bottom:12px}
  .hdr-logo{width:44px;height:44px}
}
@media (max-width: 420px){
  .hdr-inner{gap:10px}
  .hdr-logo{width:38px;height:38px}
  .hdr-cta{padding:9px 14px;font-size:13px}
}
@media (max-width: 330px){
  .hdr-cta{padding:8px 11px;font-size:12px}
}
.site-hdr.klein{box-shadow:0 2px 14px rgba(0,0,0,.08)}
.site-hdr.klein .hdr-inner{padding-top:8px !important;padding-bottom:8px !important}
.site-hdr.klein .hdr-logo{width:38px !important;height:38px !important}

/* ---- Werkoverzicht met mouse-over (zoals aim.nu/werk) ---- */
.werk-tile{position:relative;display:block;overflow:hidden;text-decoration:none;border-radius:16px}
.werk-tile img{transition:transform .4s ease}
.werk-ov{position:absolute;inset:0;background:rgba(255,255,255,.9);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px;text-align:center;opacity:0;transition:opacity .3s ease}
.werk-tile:hover .werk-ov,.werk-tile:focus-visible .werk-ov{opacity:1}
.werk-tile:hover img,.werk-tile:focus-visible img{transform:scale(1.04)}
.werk-ov-t{font-family:Nunito,Poppins,Arial,sans-serif;font-size:20px;font-weight:800;color:#737373;line-height:1.25}
.werk-ov-b{font-size:14px;font-weight:600;color:#FFFFFF;background:#E30613;padding:8px 18px;border-radius:999px}
/* Naam onder de tegel alleen op touchschermen (daar is geen mouse-over) */
.werk-naam{display:none}
@media (hover: none){
  .werk-naam{display:block;padding:12px 2px 0;font-family:Nunito,Poppins,Arial,sans-serif;font-size:18px;font-weight:700;color:#737373;line-height:1.3}
}

/* ---- Filtermenu op de werkpagina (filter via aim.js; zonder JavaScript is alles zichtbaar) ---- */
.filter-menu{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 clamp(28px, 3vw, 40px)}
.filter-knop{font:inherit;font-size:15px;font-weight:500;padding:10px 18px;border-radius:999px;border:1px solid #ECE7E0;background:#FFFFFF;color:#737373;cursor:pointer;transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.filter-knop:hover{border-color:#E30613;color:#C00510}
.filter-knop[aria-pressed="true"]{background:#E30613;border-color:#E30613;color:#FFFFFF}
.werk-tile[hidden]{display:none}

/* ---- "Meer werk" uitklappen (dienstpagina's en home; gevuld door tools/maak-werk.js) ---- */
.js .meer-werk{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s ease}
.js .meer-werk.open{grid-template-rows:1fr}
.meer-werk > div{overflow:hidden;min-height:0}
.meer-werk-rij{padding-top:24px}
.meer-werk-knop-rij{display:none;justify-content:center;margin-top:32px}
.js .meer-werk-knop-rij{display:flex}
.meer-werk-knop{font:inherit;font-weight:600;font-size:16px;display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:999px;border:1.5px solid #8A8A8A;background:transparent;color:#737373;cursor:pointer;transition:border-color .2s ease,color .2s ease,background-color .2s ease,transform .2s ease}
.meer-werk-knop:hover,.meer-werk-knop:focus-visible{border-color:#E30613;color:#C00510;background:#FFFFFF;transform:translateY(-2px)}
.meer-werk-pijl{display:inline-block;transition:transform .3s ease}
.meer-werk-knop[aria-expanded="true"] .meer-werk-pijl{transform:rotate(180deg)}

/* ---- Chatvoorbeeld AI-zichtbaarheid (homepage) ---- */
.ai-chat{margin:0 0 0 auto;max-width:430px;background:#FFFFFF;border-radius:22px;box-shadow:0 24px 50px rgba(0,0,0,.22);overflow:hidden;font-size:15px;line-height:1.5;color:#3D3D3D}
.ai-chat-kop{display:flex;align-items:center;gap:6px;padding:14px 18px;border-bottom:1px solid #ECE7E0;background:#FAFAFA}
.ai-chat-stip{width:10px;height:10px;border-radius:50%;background:#DADADA}
.ai-chat-stip:first-child{background:#E30613}
.ai-chat-titel{margin-left:10px;font-family:Nunito,Poppins,Arial,sans-serif;font-weight:700;font-size:14px;color:#737373}
.ai-chat-gesprek{padding:20px 18px 6px;display:flex;flex-direction:column;gap:16px}
.ai-chat-vraag{align-self:flex-end;margin:0;max-width:80%;background:#E30613;color:#FFFFFF;padding:12px 16px;border-radius:18px 18px 6px 18px;font-weight:500}
.ai-chat-antwoord{display:flex;gap:10px;align-items:flex-start}
.ai-chat-avatar{flex:none;width:30px;height:30px;border-radius:50%;background:#F5F5F5;border:1px solid #ECE7E0;display:flex;align-items:center;justify-content:center;font-size:14px;color:#737373}
.ai-chat-tekst{flex:1;min-width:0;background:#F5F5F5;padding:14px 16px;border-radius:18px 18px 18px 6px}
.ai-chat-tekst p{margin:0 0 10px}
.ai-chat-tekst ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:10px}
.ai-chat-tekst li{min-height:22px}
.ai-chat-tekst li::marker{font-weight:600;color:#737373}
.ai-chat-balk{display:inline-block;vertical-align:middle;height:10px;border-radius:6px;background:#D9D9D9}
.ai-chat-jij{color:#C00510;font-weight:700;border:2px dashed #E30613;border-radius:10px;padding:4px 10px;margin-left:-4px;background:#FFFFFF}
.ai-chat-jij::marker{color:#C00510}
.ai-chat-invoer{margin:14px 18px 18px;display:flex;align-items:center;justify-content:space-between;border:1px solid #ECE7E0;border-radius:999px;padding:8px 8px 8px 16px;color:#9A9A9A;font-size:14px}
.ai-chat-verstuur{width:30px;height:30px;border-radius:50%;background:#E30613;color:#FFFFFF;display:flex;align-items:center;justify-content:center;font-weight:700}

/* ---- Casepagina ---- */
/* Kop: tekst links, website rechts met het logo als kaartje erover */
.case-kop{display:flex;flex-wrap:wrap;gap:clamp(40px,5vw,72px);align-items:center}
.case-kop-tekst{flex:1 1 420px;min-width:0}
.case-kop-beeld{flex:1 1 440px;min-width:0;max-width:620px;margin-left:auto;position:relative}
.case-kop-beeld.met-logo{padding:0 0 clamp(28px,3vw,40px) clamp(28px,3vw,40px)}
.case-kop-website{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:20px}
.case-kop-beeld.vierkant{max-width:520px}
.case-kop-beeld.vierkant .case-kop-website{aspect-ratio:1/1}
.case-kop-logo{position:absolute;left:0;bottom:0;width:42%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:14px;border:4px solid #FFFFFF;box-shadow:0 14px 32px rgba(0,0,0,.14)}
.case-deden{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.case-deden li{font-size:14px;font-weight:500;color:#4A4A4A;background:#FFFFFF;border:1px solid #ECE7E0;border-radius:999px;padding:6px 14px}
.case-nav{display:grid;grid-template-columns:1fr auto 1fr;gap:16px 24px;align-items:center;border-top:1px solid #ECE7E0;padding-top:28px !important}
.case-nav a{text-decoration:none;color:#737373;display:flex;flex-direction:column;gap:2px}
.case-nav a span{font-size:14px;color:#5F5F5F}
.case-nav a strong{font-family:Nunito,Poppins,Arial,sans-serif;font-size:19px;font-weight:700}
.case-nav a:hover strong{color:#C00510}
.case-nav .case-nav-alles{font-weight:600;color:#C00510;padding:10px 18px;border:1px solid #ECE7E0;border-radius:999px;background:#FFFFFF}
@media (max-width: 640px){
  .case-nav{grid-template-columns:1fr 1fr}
  .case-nav .case-nav-alles{grid-column:1 / -1;grid-row:2;justify-self:center}
}

/* ---- Mouse-over op knoppen ----
   De knoppen hebben (nog) inline stijlen uit het ontwerp; deze regels herkennen ze aan die stijl.
   Daarom !important. Bij de omzetting naar componenten worden dit gewone knopklassen. */
a[style*="border-radius: 999px"],button[style*="border-radius: 999px"],.case-nav .case-nav-alles,.hdr-cta,.hdr-mijn{transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease}
/* Rode knop: donkerder rood, licht omhoog */
a[style*="background: #E30613"]:hover,a[style*="background: #E30613"]:focus-visible,
button[style*="background: #E30613"]:hover,button[style*="background: #E30613"]:focus-visible,
.hdr-cta:hover{background:#C00510 !important;color:#FFFFFF !important;transform:translateY(-2px);box-shadow:0 8px 18px rgba(227,6,19,.25)}
/* Rood omlijnde knop (websites op casepagina's): vult zich rood */
a[style*="border: 1px solid #E30613"]:hover,a[style*="border: 1px solid #E30613"]:focus-visible{background:#E30613 !important;color:#FFFFFF !important;transform:translateY(-2px)}
/* Grijs omlijnde knop: rand en tekst worden rood */
a[style*="border: 1.5px solid #8A8A8A"]:hover,a[style*="border: 1.5px solid #8A8A8A"]:focus-visible,
a[style*="border: 1.5px solid #737373"]:hover,a[style*="border: 1.5px solid #737373"]:focus-visible{border-color:#E30613 !important;color:#C00510 !important;background:#FFFFFF !important;transform:translateY(-2px)}
/* Wit omlijnde knop op een donker vlak: vult zich wit */
a[style*="border: 1.5px solid #FFFFFF"]:hover,a[style*="border: 1.5px solid #FFFFFF"]:focus-visible{background:#FFFFFF !important;color:#C00510 !important}
/* "Al het werk" onder de casepagina's */
.case-nav .case-nav-alles:hover,.case-nav .case-nav-alles:focus-visible{border-color:#E30613;background:#FDEDEE;color:#8E030B}

/* ---- Stappenkaarten (homepage) ---- */
.stap{transition:transform .3s ease,box-shadow .3s ease,background-color .3s ease}
.stap:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,.08);background-color:#FFFFFF !important}
.stap-nr{transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.stap:hover .stap-nr{transform:scale(1.12) rotate(-8deg)}

/* ---- Blokken die rustig in beeld vliegen (klassen via aim.js) ---- */
.anim-klaar .vlieg,.anim-klaar .stap{transition:opacity .9s ease-out,transform 1s cubic-bezier(.22,.8,.3,1),box-shadow .3s ease,background-color .3s ease}
.anim-klaar .vlieg:not(.zichtbaar),.anim-klaar .stap:not(.zichtbaar){opacity:0;transform:translateY(60px) scale(.96)}
.vlieg:nth-child(4n+2),.stap:nth-child(2){transition-delay:.12s}
.vlieg:nth-child(4n+3),.stap:nth-child(3){transition-delay:.24s}
.vlieg:nth-child(4n+4){transition-delay:.36s}

/* ---- Telefoons en tablets: geen vaste (parallax) achtergronden, die werken daar niet goed ---- */
@media (hover: none) and (pointer: coarse){
  [style*="background-attachment: fixed"]{background-attachment:scroll !important}
}

/* ---- Minder beweging als de bezoeker dat heeft ingesteld ---- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  .anim-klaar .vlieg,.anim-klaar .stap{opacity:1 !important;transform:none !important}
}

/* Formulierblok licht kort op na klik op een knop die ernaar verwijst */
@keyframes aandacht{0%{box-shadow:0 0 0 0 rgba(227,6,19,.45)}100%{box-shadow:0 0 0 16px rgba(227,6,19,0)}}
.aandacht{animation:aandacht .9s ease-out 2}


/* Witte tekstlinks (op grijs of op een foto): zonder streep, bij aanwijzen of focus wel onderstreept en iets lichter, zodat je ziet dat het een link is */
a[style="color: #FFFFFF"]:hover,a[style="color: #FFFFFF"]:focus-visible,
a[style="color: #E6E6E6"]:hover,a[style="color: #E6E6E6"]:focus-visible{text-decoration:underline;text-underline-offset:3px;opacity:.8}

/* Homepage-header: "what’s your aim?" op één regel rechtsonder; zodra hij onder de tekst valt (smallere schermen) links uitlijnen */
@media (max-width: 1180px){.kop-payoff-kolom{margin-left:0 !important}}
@media (min-width: 1181px){.kop-payoff-kolom{margin-right:clamp(16px, 2vw, 40px)}}

/* Cookiemelding (zoals petrabosch.nl), in de huisstijl van aim */
.cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:200;max-width:960px;margin:0 auto;background:#FFFFFF;color:#3D3D3D;border:1px solid #ECE7E0;border-radius:20px;box-shadow:0 18px 48px rgba(0,0,0,.18);font-family:Poppins,Arial,sans-serif}
.cookie-banner[hidden]{display:none}
.cookie-banner__inner{display:flex;gap:24px 32px;align-items:center;padding:24px 28px}
.cookie-banner__tekst{flex:1}
.cookie-banner h2{font-family:Nunito,Poppins,Arial,sans-serif;font-weight:800;font-size:1.25rem;color:#737373;margin:0 0 .35em}
.cookie-banner p{margin:0;font-size:.95rem;line-height:1.55;color:#4A4A4A}
.cookie-banner p a{color:#C00510;text-decoration:underline;text-underline-offset:3px}
.cookie-banner__acties{display:flex;gap:12px;flex-shrink:0}
/* Beide knoppen even groot en even opvallend: weigeren moet net zo makkelijk zijn als accepteren */
.cookie-btn{font-family:Poppins,Arial,sans-serif;font-weight:600;font-size:.98rem;min-height:48px;padding:10px 22px;border-radius:999px;border:2px solid #E30613;background:#E30613;color:#FFFFFF;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s}
.cookie-btn:hover,.cookie-btn:focus-visible{background:#FFFFFF;color:#C00510}
.cookie-btn:focus-visible{outline:3px solid #3D3D3D;outline-offset:2px}
@media (max-width:760px){
  .cookie-banner{left:12px;right:12px;bottom:12px}
  .cookie-banner__inner{flex-direction:column;align-items:stretch;padding:20px}
  .cookie-banner__acties{flex-direction:column}
  .cookie-btn{width:100%;white-space:normal}
}
@media (prefers-reduced-motion: reduce){.cookie-btn{transition:none}}
/* Knop "Cookie-instellingen" in de footer ziet eruit als de links ernaast */
.link-btn{background:none;border:0;padding:0;font:inherit;color:#C00510;text-decoration:none;cursor:pointer}
.link-btn:hover,.link-btn:focus-visible{text-decoration:underline;text-underline-offset:3px}
/* Cookieverklaring */
.cookie-tekst p{margin:0 0 1em;font-size:17px;line-height:1.65}
.tabel-wrap{overflow-x:auto;margin:0 0 1.4em}
.cookie-tabel{width:100%;border-collapse:collapse;font-size:.95rem;background:#FFFFFF;border:1px solid #ECE7E0}
.cookie-tabel th,.cookie-tabel td{text-align:left;padding:12px 14px;border-bottom:1px solid #ECE7E0;vertical-align:top}
.cookie-tabel th{font-family:Nunito,Poppins,Arial,sans-serif;font-weight:700;color:#3D3D3D;background:#F5F5F5}
.cookie-tabel tr:last-child td{border-bottom:0}
.cookie-tabel code{font-size:.88rem;white-space:nowrap}