:root { --gb-achter: #070A0F; --gb-paneel: #0E141C; --gb-paneel-hoog: #131B26; --gb-rand: #1E2A38; --gb-tekst: #D6DEE8; --gb-tekst-dim: #8A97A8; --gb-accent: #E0B341; --gb-accent-vol: #9A6E10; --gb-accent-vol-hoog: #AD7D16; --gb-op-accent: #FFFFFF; --gb-rood: #E5484D; --gb-oranje: #F0883E; --gb-cyaan: #3DD6F5; --gb-geel: #E0B341; --gb-groen: #46C97A; --gb-blauw: #4C8DFF; --gb-paars: #B07CF5; --gb-grijs: #8A97A8; --gb-wit: #F2F5F8; --gb-top: 56px; --gb-bottom: 36px; --gb-letter: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --gb-mono: var(--gb-letter); --gb-inkt: 255 255 255; --gb-vlak: 12 17 25; --gb-ruimte: #04060A; --gb-plus: #46C97A; --gb-min: #E5484D; --gb-kaart-schaduw: 0 10px 30px rgba(0,0,0,0.35); color-scheme: dark; } :root[data-thema="light"] { --gb-achter: #F3F5F8; --gb-paneel: #FFFFFF; --gb-paneel-hoog: #F1F4F8; --gb-rand: #E1E6ED; --gb-tekst: #2A3441; --gb-tekst-dim: #6B7686; --gb-wit: #0F1722; --gb-accent: #B8860B; --gb-accent-vol: #9A6E10; --gb-accent-vol-hoog: #AD7D16; --gb-op-accent: #FFFFFF; --gb-geel: #B8860B; --gb-grijs: #6B7686; --gb-inkt: 15 23 34; --gb-vlak: 255 255 255; --gb-ruimte: #DCE6F0; --gb-plus: #16A34A; --gb-min: #DC2626; --gb-kaart-schaduw: 0 8px 24px rgba(15,23,34,0.08); color-scheme: light; } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; touch-action: manipulation; overscroll-behavior: none; -webkit-text-size-adjust: 100%; } .gb-kaart, .maplibregl-map { touch-action: none; } .gb-body { background: var(--gb-achter); color: var(--gb-tekst); font-family: var(--gb-letter); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 14px; line-height: 1.45; overflow: hidden; display: grid; grid-template-rows: var(--gb-top) 1fr var(--gb-bottom); } svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } a { color: inherit; } h1, h2, h3, h4, p { margin: 0; } .gb-knop { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 1px solid var(--gb-rand); border-radius: 2px; background: var(--gb-paneel-hoog); color: var(--gb-tekst); font-size: 14px; } .gb-knop:hover { border-color: var(--gb-tekst-dim); color: var(--gb-wit); } .gb-knop-accent { border-color: var(--gb-accent); color: var(--gb-accent); } .gb-knop-accent:hover { background: var(--gb-accent-vol); border-color: var(--gb-accent-vol); color: var(--gb-op-accent); } .gb-knop-klein { height: 26px; padding: 0 9px; font-size: 13px; } .gb-top { display: flex; align-items: center; gap: 20px; height: var(--gb-top); padding: 0 16px 0 18px; background: var(--gb-paneel); border-bottom: 1px solid var(--gb-rand); position: relative; z-index: 30; } .gb-merk { flex: none; display: flex; align-items: center; gap: 10px; color: var(--gb-tekst); text-decoration: none; white-space: nowrap; } .gb-merk-teken { width: 30px; height: 30px; display: block; } .gb-merk-naam { font-weight: 600; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gb-wit); } .gb-merk-sub { padding-left: 10px; border-left: 1px solid var(--gb-rand); font-size: 12px; color: var(--gb-tekst-dim); } .gb-tabs { flex: 1; display: flex; align-self: stretch; justify-content: center; gap: 4px; min-width: 0; } .gb-tab-knop { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; color: var(--gb-tekst-dim); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; } .gb-tab-ikoon { width: 16px; height: 16px; flex: none; } .gb-tab-knop::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: transparent; } .gb-tab-knop:hover { color: var(--gb-wit); } .gb-tab-knop[aria-current="page"] { color: var(--gb-wit); font-weight: 600; } .gb-tab-knop[aria-current="page"] .gb-tab-ikoon { color: var(--gb-accent); } .gb-tab-knop[aria-current="page"]::after { background: var(--gb-accent); } .gb-klok { flex: none; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; height: 36px; padding: 0 12px; border: 1px solid var(--gb-rand); border-radius: 18px; background: var(--gb-achter); font-family: var(--gb-mono); line-height: 1.15; cursor: pointer; user-select: none; } .gb-klok:hover { border-color: rgb(var(--gb-inkt) / 0.25); } .gb-klok-utc { font-size: 13px; color: var(--gb-wit); } .gb-klok-lokaal { font-size: 11px; color: var(--gb-tekst-dim); } .gb-klok[data-voorop="lokaal"] .gb-klok-utc { font-size: 11px; color: var(--gb-tekst-dim); } .gb-klok[data-voorop="lokaal"] .gb-klok-lokaal { font-size: 13px; color: var(--gb-wit); } .gb-zoekbalk { position: relative; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 6px 0 12px; background: var(--gb-achter); border: 1px solid var(--gb-rand); border-radius: 10px; } .gb-zoekbalk:focus-within { border-color: var(--gb-accent); } .gb-zoekbalk-teken { width: 16px; height: 16px; flex: none; color: var(--gb-tekst-dim); } .gb-zoekbalk-veld { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: 0; color: var(--gb-wit); font: inherit; font-size: 14px; } .gb-zoekbalk-veld::placeholder { color: var(--gb-tekst-dim); } .gb-zoekbalk-veld::-webkit-search-cancel-button { display: none; } .gb-zoekbalk-wis { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 7px; color: var(--gb-tekst-dim); } .gb-zoekbalk-wis:hover { background: rgb(var(--gb-inkt) / 0.08); color: var(--gb-wit); } .gb-zoekbalk-wis[hidden] { display: none; } .gb-zoekbalk-wis svg { width: 14px; height: 14px; } .gb-zoekbalk-lijst { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40; max-height: 340px; overflow: auto; padding: 4px; background: var(--gb-paneel-hoog); border: 1px solid var(--gb-rand); border-radius: 10px; box-shadow: 0 12px 32px rgb(0 0 0 / 0.35); } .gb-zoek-treffer { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 7px; text-align: left; color: var(--gb-tekst); } .gb-zoek-treffer:hover, .gb-zoek-treffer[aria-selected="true"] { background: rgb(var(--gb-inkt) / 0.07); color: var(--gb-wit); } .gb-zoek-treffer svg { width: 15px; height: 15px; flex: none; color: var(--gb-accent); } .gb-zoek-naam { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gb-zoek-soort { margin-left: auto; flex: none; font-size: 12px; color: var(--gb-tekst-dim); } .gb-zoek-leeg { padding: 8px 10px; color: var(--gb-tekst-dim); font-size: 14px; } .gb-eco-zoekrij { display: flex; margin: 0 0 16px; } .gb-eco-zoek { flex: 1; max-width: 640px; height: 42px; } .gb-eco-zoek-agenda { flex: 1 1 260px; max-width: 360px; height: 34px; } .gb-aarde-zoek { width: 260px; height: 30px; margin-left: 2px; border-radius: 2px; background: var(--gb-paneel-hoog); } .gb-aarde-zoek .gb-zoekbalk-lijst { width: 340px; right: auto; } .gb-bediening .gb-aarde-zoek-open, .gb-bediening .gb-aarde-zoek-scheiding { display: none; } .gb-bel, .gb-avatar { position: relative; flex: none; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 50%; color: var(--gb-tekst-dim); text-decoration: none; } .gb-bel:hover, .gb-avatar:hover { color: var(--gb-wit); background: rgb(var(--gb-inkt) / 0.07); } .gb-bel svg, .gb-avatar svg { width: 19px; height: 19px; } .gb-avatar { border-color: var(--gb-rand); overflow: hidden; } .gb-bel-teller { position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--gb-rood); color: var(--gb-wit); font-family: var(--gb-mono); font-size: 12px; line-height: 16px; text-align: center; } .gb-main { position: relative; overflow: hidden; } .gb-tab { position: absolute; inset: 0; } .gb-tab[hidden] { display: none; } .gb-leeg { height: 100%; display: grid; place-content: center; text-align: center; gap: 6px; } .gb-leeg-kop { font-size: 22px; font-weight: 600; color: var(--gb-wit); } .gb-leeg-tekst { color: var(--gb-tekst-dim); font-size: 14px; } .gb-tab-earth { display: grid; grid-template-columns: 1fr auto; --gb-meng-b: 74px; --gb-glas: rgb(var(--gb-vlak) / 0.97); --gb-glas-rand: rgb(var(--gb-inkt) / 0.10); --gb-glas-licht: rgb(var(--gb-inkt) / 0.06); } .gb-tab-earth:has(.gb-meng[data-open="1"]) { --gb-meng-b: 322px; } .gb-meng { position: absolute; z-index: 20; left: 10px; top: 10px; bottom: 10px; width: 52px; display: flex; flex-direction: column; background: var(--gb-glas); border: 1px solid var(--gb-glas-rand); border-radius: 16px; box-shadow: 0 6px 18px rgba(0,0,0,0.35), inset 0 1px 0 var(--gb-glas-licht); transition: width 0.2s; overflow: hidden; } .gb-meng[data-open="1"] { width: 300px; } .gb-meng-naam { display: none; white-space: nowrap; font-size: 15px; } .gb-meng[data-open="1"] .gb-meng-naam { display: inline; } .gb-meng-klap { height: 30px; display: grid; place-items: center; color: var(--gb-tekst-dim); border-bottom: 1px solid var(--gb-glas-rand); } .gb-meng-klap:hover { color: var(--gb-wit); background: var(--gb-glas-licht); } .gb-meng-klap svg { width: 14px; height: 14px; transition: transform 0.2s; } .gb-meng[data-open="1"] .gb-meng-klap svg { transform: rotate(180deg); } .gb-meng-kop { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 16px; border-bottom: 1px solid var(--gb-glas-rand); color: var(--gb-wit); } .gb-meng[data-open="0"] .gb-meng-kop { justify-content: center; padding: 8px 0; } .gb-meng-kop svg { width: 22px; height: 22px; color: var(--gb-wit); } .gb-meng-titel { display: none; flex-direction: column; min-width: 0; flex: 1; } .gb-meng[data-open="1"] .gb-meng-titel { display: flex; } .gb-meng-titel .gb-meng-naam { font-size: 17px; font-weight: 600; } .gb-meng-totaal { font-size: 13px; color: var(--gb-tekst-dim); } .gb-schakel .gb-schakel-b { display: none; } .gb-schakel[data-stand="map"] .gb-schakel-a, .gb-schakel[data-stand="satellite"] .gb-schakel-a { display: none; } .gb-schakel[data-stand="map"] .gb-schakel-b, .gb-schakel[data-stand="satellite"] .gb-schakel-b { display: block; color: var(--gb-accent); } .gb-meng-lagen { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 6px 0; scrollbar-width: thin; scrollbar-color: rgb(var(--gb-inkt) / 0.15) transparent; } .gb-meng[data-open="1"] .gb-meng-lagen { padding: 8px; } .gb-meng-groep { border-radius: 12px; } .gb-meng[data-open="1"] .gb-meng-groep { margin-bottom: 8px; background: rgb(var(--gb-inkt) / 0.035); border: 1px solid rgb(var(--gb-inkt) / 0.06); } .gb-meng-groep-kop { display: flex; align-items: center; } .gb-meng-groep-klap { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 6px 0 12px; color: var(--gb-wit); text-align: left; border-radius: 12px; } .gb-meng[data-open="0"] .gb-meng-groep-klap { justify-content: center; padding: 0; height: 48px; } .gb-meng-groep-klap:hover { color: var(--gb-wit); background: var(--gb-glas-licht); } .gb-meng-groep-klap svg { width: 22px; height: 22px; flex: none; color: var(--gb-wit); } .gb-meng-groep[data-aan="0"] .gb-meng-groep-klap svg:first-child { opacity: 0.6; } .gb-meng-groep-naam { flex: 1; min-width: 0; flex-direction: column; font-size: 16px; font-weight: 600; } .gb-meng[data-open="1"] .gb-meng-groep-naam { display: flex; } .gb-meng-groep-tel { font-size: 13px; font-weight: 400; color: var(--gb-tekst-dim); } .gb-meng-groep-pijl { display: none; } .gb-meng[data-open="1"] .gb-meng-groep-pijl { display: block; width: 14px; height: 14px; color: var(--gb-tekst-dim); transform: rotate(90deg); transition: transform 0.15s; } .gb-meng-groep[data-open="1"] .gb-meng-groep-pijl { transform: rotate(-90deg); } .gb-meng-groep-schakel { display: none; height: 30px; margin-right: 8px; padding: 0 12px; border: 1px solid var(--gb-glas-rand); border-radius: 15px; font-size: 13px; color: var(--gb-tekst); white-space: nowrap; flex: none; } .gb-meng-groep-schakel:hover { color: var(--gb-wit); border-color: var(--gb-tekst-dim); } .gb-meng[data-open="1"] .gb-meng-groep-schakel { display: block; } .gb-meng-groep-lagen { display: none; padding: 0 4px 6px; } .gb-meng[data-open="1"] .gb-meng-groep[data-open="1"] .gb-meng-groep-lagen { display: block; } .gb-laag-knop { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 6px 8px; color: var(--gb-tekst-dim); text-align: left; border-radius: 10px; } .gb-laag-knop:hover { background: var(--gb-glas-licht); color: var(--gb-tekst); } .gb-laag-knop > svg { width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: rgb(var(--gb-inkt) / 0.06); color: var(--gb-wit); opacity: 0.6; } .gb-laag-knop[aria-pressed="true"] { color: var(--gb-wit); } .gb-laag-knop[aria-pressed="true"] > svg { opacity: 1; background: rgb(var(--gb-inkt) / 0.14); } .gb-laag-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .gb-laag-knop .gb-meng-naam { font-size: 15px; font-weight: 500; white-space: normal; } .gb-laag-status { font-size: 13px; line-height: 1.3; color: var(--gb-tekst-dim); } .gb-laag-status[hidden] { display: none; } .gb-laag-tel { display: none; } .gb-laag-schuif { position: relative; width: 38px; height: 22px; border-radius: 11px; background: rgb(var(--gb-inkt) / 0.12); flex: none; transition: background 0.15s; } .gb-laag-schuif::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--gb-tekst-dim); transition: transform 0.15s, background 0.15s; } .gb-laag-knop[aria-pressed="true"] .gb-laag-schuif { background: var(--gb-accent); } .gb-laag-knop[aria-pressed="true"] .gb-laag-schuif::after { transform: translateX(16px); background: var(--gb-wit); } .gb-laag-keuze { display: flex; gap: 4px; margin: 2px 8px 8px 54px; padding: 3px; border-radius: 10px; background: rgb(var(--gb-inkt) / 0.05); } .gb-laag-knop[aria-pressed="false"] + .gb-laag-keuze { display: none; } .gb-laag-keuze button { flex: 1; height: 30px; border-radius: 8px; font-size: 13px; color: var(--gb-tekst-dim); } .gb-laag-keuze button:hover { color: var(--gb-wit); } .gb-laag-keuze button[aria-pressed="true"] { background: rgb(var(--gb-inkt) / 0.14); color: var(--gb-wit); font-weight: 500; } .gb-laag-landen { margin: 0 8px 8px 54px; } .gb-laag-knop[aria-pressed="false"] + .gb-laag-keuze + .gb-laag-landen { display: none; } .gb-laag-landen-knop { width: 100%; height: 32px; padding: 0 10px; border-radius: 8px; background: rgb(var(--gb-inkt) / 0.05); color: var(--gb-tekst); font-size: 13px; text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .gb-laag-landen-knop:hover { color: var(--gb-wit); background: rgb(var(--gb-inkt) / 0.09); } .gb-laag-landen-lijst { margin-top: 6px; padding: 6px; border-radius: 10px; background: rgb(var(--gb-inkt) / 0.04); border: 1px solid rgb(var(--gb-inkt) / 0.08); } .gb-laag-landen-lijst[hidden] { display: none; } .gb-laag-landen-zoek { width: 100%; height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid rgb(var(--gb-inkt) / 0.12); background: rgba(0,0,0,0.25); color: var(--gb-wit); font-size: 13px; } .gb-laag-landen-rijen { max-height: 220px; overflow-y: auto; margin: 6px 0; scrollbar-width: thin; } .gb-laag-landen-rij { display: flex; align-items: center; gap: 8px; padding: 5px 4px; font-size: 13px; color: var(--gb-tekst); cursor: pointer; border-radius: 6px; } .gb-laag-landen-rij:hover { background: rgb(var(--gb-inkt) / 0.06); } .gb-laag-landen-wis { width: 100%; height: 30px; border-radius: 8px; font-size: 12px; color: var(--gb-tekst-dim); border: 1px solid rgb(var(--gb-inkt) / 0.1); } .gb-laag-landen-wis:hover { color: var(--gb-wit); } .gb-meng-voet { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-top: 1px solid var(--gb-glas-rand); } .gb-meng[data-open="1"] .gb-meng-voet { display: grid; grid-template-columns: 1fr 1fr; } .gb-meng-knop { height: 38px; border: 1px solid var(--gb-glas-rand); border-radius: 10px; background: rgb(var(--gb-inkt) / 0.04); font-size: 14px; color: var(--gb-tekst); overflow: hidden; white-space: nowrap; } .gb-meng-knop:hover { color: var(--gb-wit); border-color: var(--gb-tekst-dim); } .gb-meng-knop-accent { grid-column: 1 / -1; color: var(--gb-op-accent); background: var(--gb-accent-vol); border-color: var(--gb-accent-vol); font-weight: 600; } .gb-meng-knop-accent:hover { color: var(--gb-op-accent); background: var(--gb-accent-vol-hoog); border-color: var(--gb-accent-vol-hoog); } .gb-meng[data-open="0"] .gb-meng-voet { display: none; } .gb-kaart-vak { position: relative; min-width: 0; } .gb-kaart { position: absolute; inset: 0; background: #08182B; } .gb-tip { position: absolute; z-index: 15; pointer-events: none; padding: 5px 9px; background: rgb(var(--gb-vlak) / 0.96); border: 1px solid var(--gb-rand); border-radius: 8px; font-size: 13px; color: var(--gb-wit); white-space: nowrap; } .gb-tip[hidden] { display: none; } .gb-kaart[data-projectie="globe"] { background-color: var(--gb-ruimte); background-image: radial-gradient(1px 1px at 12% 18%, rgb(var(--gb-inkt) / 0.7) 50%, transparent 51%), radial-gradient(1px 1px at 28% 72%, rgb(var(--gb-inkt) / 0.5) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 41% 33%, rgb(var(--gb-inkt) / 0.8) 50%, transparent 51%), radial-gradient(1px 1px at 57% 84%, rgb(var(--gb-inkt) / 0.5) 50%, transparent 51%), radial-gradient(1px 1px at 66% 12%, rgb(var(--gb-inkt) / 0.6) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 79% 46%, rgb(var(--gb-inkt) / 0.75) 50%, transparent 51%), radial-gradient(1px 1px at 88% 77%, rgb(var(--gb-inkt) / 0.5) 50%, transparent 51%), radial-gradient(1px 1px at 8% 55%, rgb(var(--gb-inkt) / 0.45) 50%, transparent 51%), radial-gradient(1px 1px at 93% 22%, rgb(var(--gb-inkt) / 0.6) 50%, transparent 51%), radial-gradient(1px 1px at 49% 61%, rgb(var(--gb-inkt) / 0.4) 50%, transparent 51%), radial-gradient(1px 1px at 22% 40%, rgb(var(--gb-inkt) / 0.55) 50%, transparent 51%), radial-gradient(1px 1px at 73% 90%, rgb(var(--gb-inkt) / 0.5) 50%, transparent 51%); background-size: 700px 700px, 900px 900px, 800px 800px, 1000px 1000px, 600px 600px, 850px 850px, 750px 750px, 950px 950px, 650px 650px, 1100px 1100px, 780px 780px, 880px 880px; } .gb-kaart[data-modus="pan"] .maplibregl-canvas { cursor: grab; } .gb-kaart-leeg { position: absolute; inset: 0; z-index: 5; background: var(--gb-achter); } .gb-kaart-leeg[hidden] { display: none; } .maplibregl-ctrl-group { background: var(--gb-paneel) !important; border: 1px solid var(--gb-rand); border-radius: 2px !important; box-shadow: none !important; } .maplibregl-ctrl-group button { background: none !important; border-radius: 0 !important; } .maplibregl-ctrl-group button + button { border-top: 1px solid var(--gb-rand) !important; } .maplibregl-ctrl button .maplibregl-ctrl-icon { filter: invert(0.85); } .maplibregl-ctrl-attrib { background: rgb(var(--gb-vlak) / 0.7) !important; color: var(--gb-tekst-dim); font-size: 12px; } .maplibregl-ctrl-attrib a { color: var(--gb-tekst-dim); } .gb-bediening { position: absolute; z-index: 10; top: 12px; left: var(--gb-meng-b); transition: left 0.2s; display: flex; align-items: center; gap: 2px; padding: 3px; background: var(--gb-paneel); border: 1px solid var(--gb-rand); border-radius: 2px; } .gb-bedien-knop { width: 30px; height: 30px; display: grid; place-items: center; color: var(--gb-tekst-dim); border-radius: 2px; } .gb-bedien-knop:hover { color: var(--gb-wit); background: var(--gb-paneel-hoog); } .gb-bedien-knop[aria-pressed="true"], .gb-bedien-knop[aria-expanded="true"] { color: var(--gb-accent); background: var(--gb-paneel-hoog); } .gb-bedien-scheiding { width: 1px; height: 20px; margin: 0 3px; background: var(--gb-rand); } .gb-oog-lijst { position: absolute; top: 40px; left: 0; min-width: 220px; display: flex; flex-direction: column; background: var(--gb-paneel-hoog); border: 1px solid var(--gb-rand); border-radius: 2px; } .gb-oog-lijst[hidden] { display: none; } .gb-oog-keuze { padding: 8px 12px; text-align: left; border-left: 2px solid transparent; color: var(--gb-tekst); } .gb-oog-keuze:hover { background: var(--gb-rand); color: var(--gb-wit); } .gb-vlag { display: inline-grid; place-items: center; width: 22px; height: 15px; overflow: hidden; border-radius: 1px; background: var(--gb-rand); font-family: var(--gb-mono); font-size: 9px; color: var(--gb-tekst-dim); flex: none; } .gb-vlag img { width: 100%; height: 100%; object-fit: cover; display: block; } .gb-zijbalk { position: relative; z-index: 20; width: 320px; display: flex; flex-direction: column; background: var(--gb-paneel); border-left: 1px solid var(--gb-rand); transition: width 0.2s; overflow: hidden; } .gb-zijbalk-leeg { padding: 14px 12px; color: var(--gb-tekst-dim); font-size: 14px; line-height: 1.5; } .gb-signaal { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--gb-rand); border-left: 2px solid var(--gb-chip-kleur, transparent); } .gb-signaal > svg { width: 18px; height: 18px; color: var(--gb-chip-kleur, var(--gb-tekst-dim)); margin-top: 1px; } .gb-signaal-midden { flex: 1; min-width: 0; } .gb-signaal-titel { color: var(--gb-wit); font-size: 14px; } .gb-signaal-sub { margin-top: 2px; font-size: 12px; color: var(--gb-tekst-dim); white-space: pre; } .gb-signaal-vlieg { width: 24px; height: 24px; display: grid; place-items: center; color: var(--gb-tekst-dim); border: 1px solid var(--gb-rand); border-radius: 2px; } .gb-signaal-vlieg:hover { color: var(--gb-accent); border-color: var(--gb-accent); } .gb-signaal-vlieg svg { width: 12px; height: 12px; } .gb-zijbalk-camera { padding: 8px 12px 10px; border-bottom: 1px solid var(--gb-rand); background: var(--gb-paneel-hoog); } .gb-zijbalk-camera[hidden] { display: none; } .gb-camera-kop { font-size: 12px; color: var(--gb-wit); margin-bottom: 6px; } .gb-camera-rij { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; } .gb-camera { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--gb-rand); border-radius: 2px; background: var(--gb-achter); text-align: left; } .gb-camera img { width: 100%; height: 100%; object-fit: cover; display: block; } .gb-camera-leeg::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, var(--gb-paneel) 0 6px, var(--gb-paneel-hoog) 6px 12px); } .gb-camera-tekst { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 6px; background: rgb(var(--gb-vlak) / 0.8); font-size: 12px; color: var(--gb-tekst); white-space: pre; overflow: hidden; text-overflow: ellipsis; } .gb-camera-groot { grid-column: 1 / -1; } .gb-item-bundel { margin: 10px 0 4px; display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto; } .gb-item-bundel-rij { display: flex; align-items: baseline; gap: 8px; width: 100%; padding: 6px 8px; text-align: left; border: 1px solid var(--gb-rand); border-radius: 2px; background: var(--gb-achter); color: var(--gb-tekst); font-size: 14px; } .gb-item-bundel-rij:hover { border-color: var(--gb-tekst-dim); color: var(--gb-wit); } .gb-item-bundel-kop { flex: 1; min-width: 0; } .gb-item-bundel-tijd { flex: none; font-size: 12px; color: var(--gb-tekst-dim); } .gb-item-camera { margin: 8px 0 4px; border: 1px solid var(--gb-rand); border-radius: 2px; overflow: hidden; background: var(--gb-achter); } .gb-item-camera-scherm { position: relative; aspect-ratio: 16 / 9; background: #000; } .gb-item-camera-scherm img, .gb-item-camera-scherm video, .gb-item-camera-scherm iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border: 0; display: block; } .gb-item-camera-onder { display: flex; align-items: center; gap: 8px; padding: 5px 8px; font-size: 12px; color: var(--gb-tekst-dim); } .gb-item-camera-live { color: var(--gb-rood); font-weight: 600; } .gb-item-camera-live::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--gb-rood); vertical-align: 1px; } .gb-item-camera-stand { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gb-item-camera-link { color: var(--gb-accent); text-decoration: none; } .gb-zijbalk[data-open="0"] { display: none; } .gb-zijbalk-item { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px 20px; background: var(--gb-paneel-hoog); } .gb-zijbalk-item[hidden] { display: none; } .gb-camera-balk { display: flex; align-items: center; gap: 8px; } .gb-camera-balk .gb-camera-kop { flex: 1; } .gb-item-kop { display: flex; align-items: center; gap: 8px; } .gb-item-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 14px; background: color-mix(in srgb, var(--gb-chip-kleur, var(--gb-blauw)) 16%, transparent); color: var(--gb-chip-kleur, var(--gb-tekst)); font-size: 13px; font-weight: 600; } .gb-item-chip svg { width: 15px; height: 15px; } .gb-item-soort { font-size: 13px; } .gb-item-ernst { height: 28px; padding: 0 12px; border-radius: 14px; border: 1px solid var(--gb-rand); font-size: 12px; font-weight: 600; line-height: 26px; color: var(--gb-tekst); } .gb-item-ernst[data-ernst="4"] { color: var(--gb-oranje); border-color: color-mix(in srgb, var(--gb-oranje) 45%, transparent); } .gb-item-ernst[data-ernst="5"] { color: var(--gb-rood); border-color: color-mix(in srgb, var(--gb-rood) 45%, transparent); } .gb-item-sluit { margin-left: auto; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: var(--gb-tekst-dim); } .gb-item-sluit:hover { color: var(--gb-wit); background: rgb(var(--gb-inkt) / 0.06); } .gb-item-sluit svg { width: 16px; height: 16px; } .gb-item-titel { margin: 12px 0 8px; font-size: 18px; font-weight: 600; color: var(--gb-wit); line-height: 1.3; } .gb-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13px; color: var(--gb-tekst-dim); } .gb-item-land { display: inline-flex; align-items: center; gap: 6px; color: var(--gb-tekst); } .gb-item-bron { color: var(--gb-accent); font-weight: 600; text-decoration: none; } .gb-item-bron:hover { text-decoration: underline; } .gb-item-feiten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; } .gb-item-regel { display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; border-radius: 10px; background: rgb(var(--gb-inkt) / 0.045); font-size: 14px; } .gb-item-regel-breed { grid-column: 1 / -1; } .gb-item-label { font-size: 12px; color: var(--gb-tekst-dim); } .gb-item-waarde { min-width: 0; color: var(--gb-wit); overflow-wrap: anywhere; } .gb-item-waarde a { color: var(--gb-accent); } .gb-item-tekst { margin-top: 14px; font-size: 14px; line-height: 1.55; color: var(--gb-tekst); } .gb-item-verwant { margin-top: 18px; border-top: 1px solid var(--gb-rand); padding-top: 14px; } .gb-item-verwant-kop { margin: 0 0 10px; font-size: 15px; font-weight: 600; color: var(--gb-wit); } .gb-item-verwant .gb-zijbalk-leeg { padding: 4px 0; } .gb-item-verwant-lijst { display: flex; flex-direction: column; gap: 8px; } .gb-verwant-rij { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; width: 100%; padding: 8px; border-radius: 12px; border: 1px solid var(--gb-rand); background: var(--gb-paneel); text-align: left; color: var(--gb-tekst); } .gb-verwant-rij:hover { border-color: rgb(var(--gb-inkt) / 0.25); } .gb-verwant-duim { position: relative; width: 72px; height: 56px; border-radius: 8px; overflow: hidden; display: grid; place-items: center; background: color-mix(in srgb, var(--gb-chip-kleur, var(--gb-blauw)) 22%, var(--gb-paneel-hoog)); color: var(--gb-chip-kleur, var(--gb-blauw)); } .gb-verwant-duim svg { width: 24px; height: 24px; } .gb-verwant-duim img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .gb-verwant-lijf { min-width: 0; display: flex; flex-direction: column; gap: 4px; } .gb-verwant-sub { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--gb-tekst-dim); } .gb-verwant-sub strong { color: var(--gb-accent); font-weight: 600; } .gb-verwant-kop { font-size: 14px; font-weight: 500; color: var(--gb-wit); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .gb-verwant-rij:hover .gb-verwant-kop { color: var(--gb-accent); } .gb-verwant-meer { align-self: flex-start; height: 32px; border-radius: 10px; } .gb-item-knoppen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .gb-item-knoppen .gb-knop { height: 34px; padding: 0 14px; border-radius: 10px; font-size: 13px; } .gb-land { position: absolute; z-index: 12; top: 0; right: 0; bottom: 0; width: 480px; max-width: 100%; display: flex; flex-direction: column; background: rgb(var(--gb-vlak) / 0.97); border-left: 1px solid var(--gb-rand); overflow-y: auto; } .gb-land[hidden] { display: none; } .gb-land-sluit { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; display: grid; place-items: center; color: var(--gb-tekst-dim); border: 1px solid var(--gb-rand); border-radius: 2px; background: var(--gb-paneel); z-index: 2; } .gb-land-sluit:hover { color: var(--gb-wit); } .gb-land-kop { display: flex; align-items: center; gap: 14px; padding: 16px 16px 12px; } .gb-land-vlag { width: 96px; height: 64px; flex: none; display: grid; place-items: center; background: var(--gb-rand); border: 1px solid var(--gb-rand); font-family: var(--gb-mono); font-size: 18px; color: var(--gb-tekst-dim); overflow: hidden; } .gb-land-vlag img { width: 100%; height: 100%; object-fit: cover; display: block; } .gb-land-naam { font-size: 20px; font-weight: 600; color: var(--gb-wit); } .gb-land-sub { display: block; margin-top: 4px; font-size: 13px; color: var(--gb-tekst-dim); white-space: pre; } .gb-land-foto { height: 160px; margin: 0 16px; background: var(--gb-rand); overflow: hidden; } .gb-land-foto[hidden] { display: none; } .gb-land-foto img { width: 100%; height: 100%; object-fit: cover; display: block; } .gb-land-regering { padding: 12px 16px 4px; } .gb-land-kopje { font-size: 12px; color: var(--gb-tekst-dim); margin: 6px 0; } .gb-persoon { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--gb-rand); } .gb-persoon-foto { width: 48px; height: 48px; flex: none; border-radius: 50%; border: 2px solid var(--gb-paars); display: grid; place-items: center; overflow: hidden; background: var(--gb-paneel-hoog); font-family: var(--gb-mono); font-size: 14px; color: var(--gb-wit); } .gb-persoon-foto img { width: 100%; height: 100%; object-fit: cover; } .gb-persoon-naam { font-size: 14px; color: var(--gb-wit); } .gb-persoon-sub { margin-top: 2px; font-size: 13px; color: var(--gb-tekst-dim); white-space: pre-wrap; } .gb-land-tabs { display: flex; margin: 8px 16px 0; border-bottom: 1px solid var(--gb-rand); } .gb-land-tab { flex: 1; height: 34px; font-size: 13px; color: var(--gb-tekst-dim); border-bottom: 2px solid transparent; } .gb-land-tab:hover { color: var(--gb-tekst); } .gb-land-tab[aria-current="true"] { color: var(--gb-wit); border-bottom-color: var(--gb-accent); } .gb-land-inhoud { flex: 1; padding: 12px 16px; } .gb-land-leeg { padding: 10px 0; color: var(--gb-tekst-dim); font-size: 14px; } .gb-land-voet { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--gb-rand); background: var(--gb-paneel); position: sticky; bottom: 0; } .gb-tegels { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .gb-tegel { padding: 8px 10px; border: 1px solid var(--gb-rand); border-radius: 2px; background: var(--gb-paneel-hoog); } .gb-tegel-naam { font-size: 12px; color: var(--gb-tekst-dim); } .gb-tegel-waarde { margin: 2px 0 4px; font-family: var(--gb-mono); font-size: 15px; color: var(--gb-wit); } .gb-spark { width: 100%; height: 26px; stroke: var(--gb-accent); stroke-width: 1.5; } .gb-release { display: grid; grid-template-columns: 96px 1fr auto; gap: 10px; padding: 6px 0; border-top: 1px solid var(--gb-rand); font-size: 14px; align-items: center; } .gb-release-tijd { font-size: 12px; color: var(--gb-tekst-dim); } .gb-release-belang { font-size: 12px; padding: 2px 6px; border: 1px solid var(--gb-rand); border-radius: 2px; color: var(--gb-tekst-dim); } .gb-belang-high { color: var(--gb-rood); border-color: var(--gb-rood); } .gb-belang-medium { color: var(--gb-accent); border-color: var(--gb-accent); } .gb-artikel-rij { display: block; padding: 8px 0; border-top: 1px solid var(--gb-rand); text-decoration: none; } .gb-artikel-kop { font-size: 14px; color: var(--gb-wit); line-height: 1.35; } .gb-artikel-rij:hover .gb-artikel-kop { color: var(--gb-accent); } .gb-artikel-sub { margin-top: 2px; font-size: 12px; color: var(--gb-tekst-dim); white-space: pre-wrap; } .gb-tabel { width: 100%; border-collapse: collapse; font-size: 13px; } .gb-tabel th { text-align: left; font-size: 12px; color: var(--gb-tekst-dim); padding: 4px 6px 4px 0; border-bottom: 1px solid var(--gb-rand); font-weight: 400; } .gb-tabel td { padding: 5px 6px 5px 0; border-bottom: 1px solid var(--gb-rand); vertical-align: top; } .gb-regel-rij { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--gb-rand); font-size: 14px; } .gb-regel-rij svg { width: 16px; height: 16px; color: var(--gb-accent); } .gb-eco { height: 100%; display: flex; flex-direction: column; } .gb-eco-indices { display: flex; gap: 6px; overflow-x: auto; padding: 8px 12px; border-bottom: 1px solid var(--gb-rand); background: var(--gb-paneel); } .gb-index-chip { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 4px 8px; border: 1px solid var(--gb-rand); border-radius: 2px; background: var(--gb-achter); } .gb-index-chip:hover { border-color: var(--gb-tekst-dim); } .gb-index-naam { font-size: 12px; color: var(--gb-tekst-dim); white-space: nowrap; } .gb-index-waarde { font-family: var(--gb-mono); font-size: 14px; color: var(--gb-tekst); } .gb-index-chip.gb-marker-plus .gb-index-waarde { color: var(--gb-groen); } .gb-index-chip.gb-marker-min .gb-index-waarde { color: var(--gb-rood); } .gb-eco-filters { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--gb-rand); } .gb-keuze { height: 28px; padding: 0 8px; background: var(--gb-achter); color: var(--gb-tekst); border: 1px solid var(--gb-rand); border-radius: 2px; font: inherit; font-size: 14px; max-width: 220px; } .gb-eco-tel { margin-left: auto; font-family: var(--gb-mono); font-size: 13px; color: var(--gb-tekst-dim); } .gb-eco-vak { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr auto; } .gb-eco-tabelvak { overflow: auto; } .gb-eco-tabel th { position: sticky; top: 0; background: var(--gb-paneel); cursor: pointer; user-select: none; padding: 8px 10px; z-index: 1; } .gb-eco-tabel th[data-sort="asc"]::after { content: " \25B2"; font-size: 10px; } .gb-eco-tabel th[data-sort="desc"]::after { content: " \25BC"; font-size: 10px; } .gb-eco-tabel td { padding: 7px 10px; } .gb-eco-rij { cursor: pointer; } .gb-eco-rij:hover td { background: var(--gb-paneel-hoog); } .gb-belang-rij-high td:nth-child(4) { color: var(--gb-wit); } .gb-eco-land { display: flex; align-items: center; gap: 6px; } .gb-eco-leeg { color: var(--gb-tekst-dim); padding: 20px 10px; } .gb-oordeel { font-size: 12px; } .gb-oordeel-good { color: var(--gb-groen); } .gb-oordeel-bad { color: var(--gb-rood); } .gb-oordeel-equal { color: var(--gb-tekst-dim); } .gb-oordeel-regel { margin: 10px 0 4px; font-size: 14px; } .gb-eco-oog { width: 24px; height: 24px; display: grid; place-items: center; color: var(--gb-tekst-dim); } .gb-eco-oog:hover { color: var(--gb-accent); } .gb-eco-oog svg { width: 14px; height: 14px; } .gb-eco-paneel { width: 460px; overflow-y: auto; padding: 14px 16px; border-left: 1px solid var(--gb-rand); background: var(--gb-paneel); } .gb-eco-paneel[hidden] { display: none; } .gb-eco-paneel-kop { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; } .gb-eco-paneel-titel { font-size: 16px; font-weight: 600; color: var(--gb-wit); line-height: 1.3; } .gb-eco-paneel-sub { display: block; width: 100%; font-size: 12px; color: var(--gb-tekst-dim); white-space: pre; } .gb-eco-paneel-kop .gb-item-sluit { margin-left: auto; } .gb-tegels-drie { grid-template-columns: repeat(3, 1fr); } .gb-tegel-groot .gb-tegel-waarde { font-size: 17px; } .gb-grafiek { width: 100%; height: auto; stroke: var(--gb-accent); stroke-width: 1.5; fill: none; } .gb-grafiek text { stroke: none; fill: var(--gb-tekst-dim); font-family: var(--gb-mono); font-size: 10px; } .gb-release-knop { width: 100%; text-align: left; } .gb-release-knop:hover .gb-release-naam { color: var(--gb-accent); } .gb-news { height: 100%; display: flex; flex-direction: column; } .gb-vink { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--gb-tekst-dim); } .gb-news-lijst { overflow-y: auto; padding: 8px 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 8px; align-content: start; } .gb-artikel { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--gb-rand); border-radius: 2px; background: var(--gb-paneel); cursor: pointer; } .gb-artikel:hover { border-color: var(--gb-tekst-dim); } .gb-artikel-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; color: var(--gb-tekst-dim); } .gb-artikel-bron { color: var(--gb-accent); } .gb-artikel-land { display: inline-flex; align-items: center; gap: 4px; } .gb-artikel-cat { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border: 1px solid var(--gb-rand); border-radius: 2px; color: var(--gb-chip-kleur, var(--gb-tekst-dim)); } .gb-artikel-cat svg { width: 11px; height: 11px; } .gb-artikel-titel { font-size: 14px; font-weight: 600; color: var(--gb-wit); line-height: 1.35; } .gb-artikel-samenvatting { font-size: 14px; color: var(--gb-tekst); line-height: 1.45; } .gb-artikel-voet { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; } .gb-stem { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--gb-rand); border-radius: 2px; } .gb-stem-knop { width: 26px; height: 24px; font-size: 14px; color: var(--gb-tekst-dim); } .gb-stem-knop:hover { color: var(--gb-wit); background: var(--gb-paneel-hoog); } .gb-stem-up[aria-pressed="true"] { color: var(--gb-groen); } .gb-stem-down[aria-pressed="true"] { color: var(--gb-rood); } .gb-stem-score { min-width: 28px; text-align: center; font-family: var(--gb-mono); font-size: 14px; color: var(--gb-tekst); } .gb-news-lezer .gb-stem { margin-top: 10px; } .gb-lezer-tekst { margin: 10px 0; font-size: 14px; line-height: 1.55; color: var(--gb-tekst); } .gb-lezer-events .gb-signaal { width: 100%; text-align: left; } .gb-lezer-events .gb-signaal:hover .gb-signaal-titel { color: var(--gb-accent); } .gb-watch-uitleg { font-size: 13px; color: var(--gb-tekst-dim); margin: 2px 0 8px; } .gb-watch-lagen { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .gb-watch-lagen .gb-artikel-cat { cursor: pointer; opacity: 0.55; } .gb-watch-lagen .gb-artikel-cat[aria-pressed="true"] { opacity: 1; border-color: var(--gb-chip-kleur, var(--gb-accent)); } .gb-watch-vorm { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--gb-rand); } .gb-veld { display: flex; flex-direction: column; gap: 3px; } .gb-veld-label { font-size: 12px; color: var(--gb-tekst-dim); } .gb-invoer { height: 28px; padding: 0 8px; background: var(--gb-achter); color: var(--gb-tekst); border: 1px solid var(--gb-rand); border-radius: 2px; font: inherit; font-size: 14px; min-width: 120px; } .gb-invoer[type="color"] { padding: 2px; width: 44px; min-width: 0; } .gb-invoer[type="number"] { width: 80px; min-width: 0; } .gb-watch-kanalen { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; width: 100%; } .gb-db { height: 100%; display: flex; flex-direction: column; } .gb-db-kop { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--gb-rand); background: var(--gb-paneel); } .gb-db-groepen { display: flex; align-items: center; gap: 4px; } .gb-db-groep { height: 28px; padding: 0 12px; border: 1px solid var(--gb-rand); border-radius: 2px; color: var(--gb-tekst-dim); font-size: 14px; } .gb-db-groep:hover { color: var(--gb-wit); background: var(--gb-paneel-hoog); } .gb-db-groep[aria-current="true"] { color: var(--gb-wit); border-color: var(--gb-accent); background: var(--gb-paneel-hoog); } .gb-db-kop .gb-invoer { margin-left: 8px; min-width: 200px; } .gb-db-kop .gb-eco-tel { margin-left: auto; } .gb-db-filters { display: flex; flex-direction: column; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--gb-rand); } .gb-db-lagen { display: flex; flex-wrap: wrap; gap: 6px; } .gb-db-laag { cursor: pointer; opacity: 0.55; user-select: none; } .gb-db-laag input { position: absolute; opacity: 0; width: 0; height: 0; } .gb-db-laag[aria-pressed="true"] { opacity: 1; border-color: var(--gb-chip-kleur, var(--gb-accent)); } .gb-db-rij-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; } .gb-db-tabelvak { position: relative; } .gb-db-tabel { font-size: 13px; } .gb-db-tabel td { white-space: nowrap; max-width: 420px; overflow: hidden; text-overflow: ellipsis; } .gb-db-tabel td[data-kolom="titel"] { white-space: normal; min-width: 260px; } .gb-db-tabel td[data-kolom="id"], .gb-db-tabel td[data-kolom="forks"], .gb-db-tabel td[data-kolom="tijd"] { font-family: var(--gb-mono); color: var(--gb-tekst-dim); } .gb-db-rij { cursor: pointer; } .gb-db-rij:hover td { background: var(--gb-paneel-hoog); } .gb-db-rij-log td { color: var(--gb-tekst-dim); } .gb-db-agent { font-size: 12px; } .gb-db-status { display: inline-block; padding: 1px 6px; border-radius: 2px; font-size: 12px; border: 1px solid var(--gb-rand); color: var(--gb-tekst-dim); } .gb-db-status-verified { color: var(--gb-groen); border-color: var(--gb-groen); } .gb-db-status-disputed { color: var(--gb-rood); border-color: var(--gb-rood); } .gb-db-status-warn { color: var(--gb-oranje); border-color: var(--gb-oranje); } .gb-db-status-error { color: var(--gb-rood); border-color: var(--gb-rood); } .gb-db-acties { white-space: nowrap; } .gb-db-acties .gb-knop { margin-right: 4px; } .gb-db-paginering { display: flex; align-items: center; gap: 10px; padding: 10px 12px; } .gb-db-paneel .gb-item-knoppen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .gb-db-fork-vorm { flex-direction: column; align-items: stretch; } .gb-db-fork-vorm .gb-veld { width: 100%; } .gb-db-fork-breed { width: 100%; min-width: 0; } textarea.gb-invoer { height: auto; padding: 6px 8px; resize: vertical; line-height: 1.4; } .gb-com { height: 100%; display: flex; flex-direction: column; } .gb-post { cursor: default; } .gb-post-auteur { color: var(--gb-tekst); } .gb-post-soort { font-size: 12px; color: var(--gb-accent); } .gb-post-bronnen { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; } .gb-post-bronnen a { color: var(--gb-cyaan); text-decoration: none; } .gb-post-bronnen a:hover { text-decoration: underline; } .gb-post-stem { display: flex; align-items: center; gap: 6px; } .gb-post-stem .gb-knop[aria-pressed="true"] { border-color: var(--gb-accent); color: var(--gb-wit); } .gb-post-netto { min-width: 34px; text-align: center; font-family: var(--gb-mono); font-size: 14px; } .gb-post-netto.gb-marker-plus { color: var(--gb-groen); } .gb-post-netto.gb-marker-min { color: var(--gb-rood); } .gb-factchecks { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; font-size: 13px; } .gb-factcheck { display: flex; align-items: center; gap: 6px; } .gb-factcheck a { color: var(--gb-cyaan); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; } .gb-factcheck-bevestigt { font-size: 12px; color: var(--gb-groen); } .gb-factcheck-weerlegt { font-size: 12px; color: var(--gb-rood); } .gb-factcheck-vorm { display: flex; gap: 6px; align-items: center; margin-top: 4px; } .gb-factcheck-vorm .gb-invoer { flex: 1; min-width: 0; } .gb-db-status-queue { color: var(--gb-tekst-dim); } .gb-db-status-unresolved { color: var(--gb-oranje); border-color: var(--gb-oranje); } .gb-vorm-fout { width: 100%; padding: 6px 8px; border: 1px solid var(--gb-rood); border-radius: 2px; color: var(--gb-rood); font-size: 14px; } .gb-vorm-fout[hidden] { display: none; } .gb-com-vorm { flex-direction: column; align-items: stretch; border-top: 0; margin-top: 0; padding-top: 0; } .gb-com-vorm .gb-veld { width: 100%; } .gb-com-vorm .gb-invoer, .gb-com-vorm .gb-keuze { width: 100%; max-width: none; min-width: 0; } .gb-landing { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: linear-gradient(180deg, rgb(var(--gb-vlak) / 0.35) 0%, rgb(var(--gb-vlak) / 0.75) 100%); pointer-events: none; } .gb-landing[hidden] { display: none; } .gb-landing-vak { pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 32px 40px; max-width: min(640px, 92vw); text-align: center; background: rgb(var(--gb-vlak) / 0.82); border: 1px solid var(--gb-rand); border-radius: 2px; } .gb-landing-teken { width: 140px; height: 140px; display: block; filter: drop-shadow(0 10px 30px rgba(61,214,245,0.25)); } .gb-landing-naam { font-size: 34px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gb-wit); } .gb-landing-sub { font-size: 14px; color: var(--gb-accent); } .gb-landing-regel { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--gb-tekst); } .gb-landing-knoppen { display: flex; gap: 10px; margin-top: 14px; } .gb-landing-knoppen .gb-knop { height: 38px; padding: 0 18px; font-size: 14px; } .gb-body[data-landing="1"] .gb-top, .gb-body[data-landing="1"] .gb-bottom, .gb-body[data-landing="1"] .gb-meng, .gb-body[data-landing="1"] .gb-zijbalk, .gb-body[data-landing="1"] .gb-bediening { visibility: hidden; } .gb-account-vak { width: min(520px, 92vw); } .gb-auth-vorm { gap: 10px; } .gb-auth-rij { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; } .gb-auth-link { font-size: 14px; color: var(--gb-cyaan); text-decoration: none; } .gb-auth-link:hover { text-decoration: underline; } .gb-auth-bericht { margin: 0; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--gb-plus) 12%, transparent); font-size: 13px; line-height: 1.5; color: var(--gb-tekst); } .gb-auth-bericht[hidden] { display: none; } .gb-honing { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .gb-plan-rij { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0 12px; } .gb-plan-pro, .gb-plan-team, .gb-plan-admin { color: var(--gb-accent); border-color: var(--gb-accent); } .gb-account-onder { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--gb-rand); } .gb-knop-gevaar { color: var(--gb-rood); border-color: var(--gb-rood); } .gb-knop-gevaar:hover { background: rgba(229,72,77,0.12); } .gb-verwijder-vorm { margin-top: 10px; } .gb-avatar-foto { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .gb-avatar[data-plan="pro"], .gb-avatar[data-plan="team"], .gb-avatar[data-plan="admin"] { border-color: var(--gb-accent); } .gb-admin-vak { flex: 1; min-height: 0; overflow: auto; padding: 12px; } .gb-admin-tabel td { white-space: nowrap; max-width: 420px; overflow: hidden; text-overflow: ellipsis; } .gb-admin-tabel td:nth-child(4) { white-space: normal; } .gb-admin-vorm { flex-direction: column; align-items: stretch; border-top: 0; margin-top: 0; padding-top: 0; max-width: 720px; } .gb-admin-vorm .gb-veld { width: 100%; } .gb-admin-vorm .gb-invoer { width: 100%; min-width: 0; } .gb-admin-vapid { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--gb-rand); max-width: 720px; } .gb-regel-tekst { flex: 1; } .gb-regel-kanalen { font-size: 12px; color: var(--gb-tekst-dim); white-space: pre; } .gb-kiezer { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: rgb(var(--gb-vlak) / 0.7); } .gb-kiezer[hidden] { display: none; } .gb-kiezer-vak { width: min(560px, 92vw); max-height: 85vh; overflow-y: auto; padding: 14px 16px; background: var(--gb-paneel); border: 1px solid var(--gb-rand); border-radius: 2px; } .gb-alleen-voorlezen { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .gb-hint { position: fixed; z-index: 90; max-width: min(320px, calc(100vw - 16px)); padding: 7px 11px; border-radius: 8px; background: var(--gb-paneel-hoog); border: 1px solid var(--gb-rand); box-shadow: 0 8px 24px rgb(0 0 0 / 0.35); font-size: 13px; line-height: 1.4; color: var(--gb-wit); cursor: pointer; } .gb-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); } .gb-top { padding-top: env(safe-area-inset-top, 0px); } .gb-bottom { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; padding: 0 12px 0 0; background: var(--gb-paneel); border-top: 1px solid var(--gb-rand); position: relative; z-index: 30; } .gb-ticker { position: relative; height: 100%; overflow: hidden; } .gb-ticker-baan { position: absolute; top: 0; left: 0; height: 100%; display: flex; align-items: center; gap: 32px; white-space: nowrap; padding-left: 8px; will-change: transform; } .gb-chip { display: inline-flex; align-items: center; gap: 8px; color: var(--gb-tekst); cursor: pointer; } .gb-chip svg { width: 14px; height: 14px; color: var(--gb-chip-kleur, var(--gb-tekst-dim)); } .gb-chip-land { font-size: 12px; color: var(--gb-tekst-dim); } .gb-chip-tijd { font-size: 12px; color: var(--gb-tekst-dim); } .gb-verbinding { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gb-tekst-dim); } .gb-verbinding-stip { width: 7px; height: 7px; border-radius: 50%; background: var(--gb-oranje); } .gb-verbinding[data-stand="live"] .gb-verbinding-stip { background: var(--gb-groen); box-shadow: 0 0 6px var(--gb-groen); } .gb-verbinding[data-stand="down"] .gb-verbinding-stip { background: var(--gb-rood); } .gb-thema-schakel { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 4px; color: var(--gb-tekst-dim); } .gb-thema-schakel:hover { color: var(--gb-wit); } .gb-thema-schakel > svg { width: 14px; height: 14px; } .gb-thema-schakel-baan { position: relative; width: 34px; height: 18px; border-radius: 9px; background: rgb(var(--gb-inkt) / 0.2); transition: background 0.15s; } .gb-thema-schakel-bol { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #FFFFFF; transition: transform 0.15s; } .gb-thema-schakel[aria-checked="true"] .gb-thema-schakel-baan { background: var(--gb-accent); } .gb-thema-schakel[aria-checked="true"] .gb-thema-schakel-bol { transform: translateX(16px); } .gb-ticker-keuze { position: fixed; right: 12px; bottom: calc(var(--gb-bottom) + 8px); z-index: 65; width: min(560px, 94vw); max-height: 70vh; overflow-y: auto; padding: 12px 14px; background: var(--gb-paneel); border: 1px solid var(--gb-rand); border-radius: 2px; box-shadow: 0 8px 30px rgba(0,0,0,0.5); } .gb-ticker-keuze[hidden] { display: none; } .gb-ticker-groep { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 4px 0 10px; } .gb-ticker-vink svg { width: 12px; height: 12px; color: var(--gb-accent); } .gb-chip[data-soort="news"] .gb-chip-kop { font-style: italic; } .gb-persoon-reis { display: block; margin-top: 2px; font-size: 12px; color: var(--gb-tekst-dim); } .gb-eco-grondstoffen { padding-top: 0; } .gb-grondstof-energy .gb-index-naam { color: var(--gb-oranje); } .gb-grondstof-metals .gb-index-naam { color: var(--gb-accent); } .gb-grondstof-fx .gb-index-naam, .gb-grondstof-rates .gb-index-naam { color: var(--gb-cyaan); } .gb-land-wereldprijzen { margin: 0 0 8px; font-family: var(--gb-mono); font-size: 13px; color: var(--gb-tekst-dim); } .gb-invoer-breed { min-width: 320px; } .gb-topic-feed { margin-top: 10px; border-top: 1px solid var(--gb-rand); padding-top: 8px; } .gb-topic-rij { width: 100%; text-align: left; } .gb-topic-rij:hover .gb-signaal-titel { color: var(--gb-accent); } .gb-laag-war { --gb-chip-kleur: var(--gb-rood); } .gb-laag-cyber { --gb-chip-kleur: var(--gb-cyaan); } .gb-laag-strike { --gb-chip-kleur: var(--gb-rood); } .gb-laag-heat { --gb-chip-kleur: var(--gb-oranje); } .gb-laag-leaders { --gb-chip-kleur: var(--gb-paars); } .gb-laag-meetings { --gb-chip-kleur: var(--gb-paars); } .gb-laag-flights { --gb-chip-kleur: var(--gb-blauw); } .gb-laag-ships { --gb-chip-kleur: var(--gb-groen); } .gb-laag-stocks { --gb-chip-kleur: var(--gb-geel); } .gb-laag-economy { --gb-chip-kleur: var(--gb-geel); } .gb-laag-bases { --gb-chip-kleur: var(--gb-grijs); } .gb-laag-nuclear { --gb-chip-kleur: var(--gb-geel); } .gb-laag-airbases { --gb-chip-kleur: var(--gb-cyaan); } .gb-laag-sites { --gb-chip-kleur: var(--gb-rood); } .gb-laag-power { --gb-chip-kleur: var(--gb-geel); } .gb-laag-ports { --gb-chip-kleur: var(--gb-blauw); } .gb-laag-oilgas { --gb-chip-kleur: var(--gb-oranje); } .gb-laag-industry { --gb-chip-kleur: var(--gb-paars); } .gb-laag-cameras { --gb-chip-kleur: var(--gb-wit); } .gb-laag-attack { --gb-chip-kleur: var(--gb-oranje); } .gb-laag-protest { --gb-chip-kleur: var(--gb-magenta); } .gb-laag-traffic { --gb-chip-kleur: var(--gb-grijs); } .gb-tv-scherm { position: relative; aspect-ratio: 16 / 9; max-height: 62vh; background: #000; border: 1px solid var(--gb-rand); border-radius: 14px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .gb-tv-scherm iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .gb-tv-leeg { margin: 0; color: var(--gb-tekst-dim); font-size: 14px; } .gb-tv-onder { position: absolute; left: 12px; bottom: 10px; margin: 0; padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,0.72); color: #fff; font-size: 12px; pointer-events: none; } .gb-tv-regios { margin: 14px 0 10px; } .gb-tv-rooster { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; } .gb-tv-zender { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 10px; text-align: left; color: var(--gb-tekst); background: var(--gb-paneel); border: 1px solid var(--gb-rand); border-radius: 12px; cursor: pointer; } .gb-tv-zender:hover { border-color: var(--gb-accent); } .gb-tv-zender[aria-pressed="true"] { border-color: var(--gb-accent); background: var(--gb-paneel-hoog); box-shadow: inset 0 0 0 1px var(--gb-accent); } .gb-tv-naam { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gb-tv-taal { font-family: var(--gb-mono); font-size: 11px; color: var(--gb-tekst-dim); } @media (max-width: 760px) { .gb-tv-rooster { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gb-tv-zender { padding: 8px; gap: 6px; } .gb-tv-taal { display: none; } } .gb-macro { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; } .gb-macro-score { display: flex; align-items: baseline; gap: 10px; } .gb-macro-getal { font-size: 34px; line-height: 1; font-weight: 700; color: var(--gb-tekst); font-variant-numeric: tabular-nums; } .gb-macro-oordeel { font-size: 14px; color: var(--gb-tekst-dim); } .gb-macro-balk { position: relative; height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--gb-groen), var(--gb-geel) 50%, var(--gb-rood)); } .gb-macro-stip { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--gb-paneel); border: 3px solid var(--gb-tekst); } .gb-macro-delen { display: grid; gap: 6px; } .gb-macro-deel { display: grid; grid-template-columns: minmax(0, 1fr) 64px 44px 56px; align-items: center; gap: 8px; font-size: 12px; } .gb-macro-deel .gb-spark { width: 56px; height: 20px; } .gb-macro-angst .gb-spark { width: 100%; height: 64px; } .gb-macro > .gb-kaartje { align-self: start; } .gb-macro-deel-naam { color: var(--gb-tekst); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gb-macro-deel-waarde { font-family: var(--gb-mono); text-align: right; color: var(--gb-tekst); } .gb-macro-z { position: relative; height: 6px; border-radius: 999px; background: rgb(var(--gb-inkt) / 0.08); } .gb-macro-z::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: calc(var(--gb-z, 0) * 50%); border-radius: 999px; background: var(--gb-tekst-dim); } .gb-macro-z.gb-neer::after { background: var(--gb-rood); } .gb-macro-z.gb-op::after { background: var(--gb-groen); } .gb-macro-z[style*="--gb-z: -"]::after { left: auto; right: 50%; width: calc(var(--gb-z, 0) * -50%); } .gb-kaartje-noot { margin: 0; font-size: 12px; line-height: 1.45; color: var(--gb-tekst-dim); } .gb-macro-curvesvg { width: 100%; height: auto; } .gb-macro-curvelijn { fill: none; stroke: var(--gb-accent); stroke-width: 2; } .gb-macro-curvesvg circle { fill: var(--gb-accent); } .gb-macro-curvesvg text { fill: var(--gb-tekst-dim); font-size: 10px; text-anchor: middle; font-family: var(--gb-mono); } .gb-macro-tabel { width: 100%; font-size: 12px; } .gb-macro-tabel td.gb-op { color: var(--gb-plus); } .gb-macro-tabel td.gb-neer { color: var(--gb-min); } .gb-macro-stand { display: block; position: relative; width: 70px; height: 6px; border-radius: 999px; background: rgb(var(--gb-inkt) / 0.1); } .gb-macro-stand::after { content: ""; position: absolute; top: -3px; left: calc(var(--gb-stand, 0.5) * 100% - 3px); width: 6px; height: 12px; border-radius: 3px; background: var(--gb-accent); } .gb-macro-markt { display: grid; gap: 4px; padding: 10px 0; border-top: 1px solid var(--gb-rand); color: var(--gb-tekst); text-decoration: none; } .gb-macro-markt:first-of-type { border-top: 0; } .gb-macro-markt strong { font-size: 13px; line-height: 1.35; } .gb-macro-markt:hover strong { color: var(--gb-accent); } .gb-macro-optie { display: grid; grid-template-columns: minmax(0, 1fr) 90px 40px; align-items: center; gap: 8px; font-size: 12px; color: var(--gb-tekst-dim); } .gb-macro-optie-naam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gb-macro-kans { position: relative; height: 6px; border-radius: 999px; background: rgb(var(--gb-inkt) / 0.1); overflow: hidden; } .gb-macro-kans::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--gb-kans, 0) * 100%); background: var(--gb-blauw); } .gb-macro-optie-getal { font-family: var(--gb-mono); text-align: right; color: var(--gb-tekst); } .gb-admin-licentie { margin: 4px 0 0; max-width: 46ch; font-size: 12px; line-height: 1.4; color: var(--gb-oranje); } .gb-laag-quakes { --gb-chip-kleur: var(--gb-oranje); } .gb-laag-storms { --gb-chip-kleur: var(--gb-cyaan); } .gb-laag-disasters { --gb-chip-kleur: var(--gb-rood); } .gb-laag-weather { --gb-chip-kleur: var(--gb-geel); } .gb-laag-radar { --gb-chip-kleur: var(--gb-blauw); } .gb-laag-climate { --gb-chip-kleur: var(--gb-oranje); } .gb-laag-radiation { --gb-chip-kleur: var(--gb-groen); } .gb-laag-chokepoints { --gb-chip-kleur: var(--gb-blauw); } .gb-laag-navwarnings { --gb-chip-kleur: var(--gb-geel); } .gb-laag-milflights { --gb-chip-kleur: var(--gb-oranje); } .gb-laag-outages { --gb-chip-kleur: var(--gb-magenta); } .gb-laag-cables { --gb-chip-kleur: var(--gb-cyaan); } .gb-laag-datacenters { --gb-chip-kleur: var(--gb-paars); } .gb-laag-satellites { --gb-chip-kleur: var(--gb-wit); } .gb-laag-spaceports { --gb-chip-kleur: var(--gb-grijs); } .gb-laag-gpsjam { --gb-chip-kleur: var(--gb-rood); } .gb-laag-disease { --gb-chip-kleur: var(--gb-groen); } .gb-laag-displacement { --gb-chip-kleur: var(--gb-paars); } .gb-laag-sanctions { --gb-chip-kleur: var(--gb-geel); } .gb-kpi { position: absolute; z-index: 9; top: 56px; left: var(--gb-meng-b); transition: left 0.2s; display: flex; gap: 0; background: rgb(var(--gb-vlak) / 0.90); border: 1px solid rgb(var(--gb-inkt) / 0.10); border-radius: 14px; max-width: calc(100% - var(--gb-meng-b) - 12px); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } .gb-kpi-tegel { display: grid; grid-template-columns: auto; gap: 2px; min-width: 96px; padding: 10px 16px; border-left: 1px solid rgb(var(--gb-inkt) / 0.08); } .gb-kpi-tegel:first-child { border-left: 0; } .gb-kpi-naam { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--gb-tekst); white-space: nowrap; } .gb-kpi-naam::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gb-kpi-kleur, var(--gb-tekst-dim)); } .gb-kpi-waarde { font-size: 20px; font-weight: 600; line-height: 1.15; color: var(--gb-wit); white-space: nowrap; font-variant-numeric: tabular-nums; } .gb-kpi-sub { font-size: 12px; color: var(--gb-tekst-dim); white-space: nowrap; } .gb-kpi:empty { display: none; } .gb-venster { position: absolute; z-index: 9; top: 12px; right: 12px; display: flex; gap: 1px; background: var(--gb-rand); border: 1px solid var(--gb-rand); border-radius: 2px; } .gb-venster-knop { height: 26px; padding: 0 9px; background: var(--gb-paneel); font-size: 12px; color: var(--gb-tekst-dim); } .gb-venster-knop:hover { color: var(--gb-wit); } .gb-venster-knop[aria-pressed="true"] { background: var(--gb-paneel-hoog); color: var(--gb-accent); } .gb-legenda { position: absolute; z-index: 9; left: var(--gb-meng-b); transition: left 0.2s; bottom: 24px; display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 5px 10px; background: rgb(var(--gb-vlak) / 0.85); border: 1px solid var(--gb-rand); border-radius: 2px; font-size: 12px; color: var(--gb-tekst-dim); } .gb-legenda[hidden] { display: none; } .gb-legenda-item { display: inline-flex; align-items: center; gap: 5px; } .gb-legenda-stip { width: 7px; height: 7px; border-radius: 50%; } .gb-kies { position: fixed; inset: 0; z-index: 62; display: grid; place-items: center; background: rgb(var(--gb-vlak) / 0.8); } .gb-kies[hidden] { display: none; } .gb-kies-vak { width: min(760px, 94vw); max-height: 90vh; overflow-y: auto; padding: 20px 22px; background: var(--gb-paneel); border: 1px solid var(--gb-rand); border-radius: 2px; box-shadow: 0 12px 40px rgba(0,0,0,0.6); } .gb-kies-kop { font-size: 18px; color: var(--gb-wit); } .gb-kies-tekst { margin: 6px 0 14px; color: var(--gb-tekst-dim); font-size: 14px; line-height: 1.5; } .gb-kies-groepen { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 18px; } .gb-kies-groep-kop { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 12px; color: var(--gb-accent); } .gb-kies-groep-kop svg { width: 14px; height: 14px; } .gb-kies-vink { padding: 3px 0; color: var(--gb-tekst); } .gb-kies-vink svg { width: 13px; height: 13px; color: var(--gb-chip-kleur, var(--gb-tekst-dim)); } .gb-kies-zwaar { margin-left: auto; font-size: 12px; color: var(--gb-tekst-dim); } .gb-kies-voeten { display: flex; align-items: center; gap: 8px; margin-top: 16px; } .gb-kies-last { flex: 1; font-size: 13px; color: var(--gb-tekst-dim); } .gb-kies-last[data-zwaar="1"] { color: var(--gb-oranje); } .gb-route { position: absolute; z-index: 12; top: 108px; left: var(--gb-meng-b); transition: left 0.2s; width: min(340px, calc(100% - var(--gb-meng-b) - 12px)); padding: 12px 14px; background: var(--gb-paneel); border: 1px solid var(--gb-rand); border-radius: 2px; box-shadow: 0 8px 30px rgba(0,0,0,0.5); } .gb-route[hidden] { display: none; } .gb-route-veld { display: grid; gap: 3px; margin-bottom: 8px; } .gb-route-vink { margin: 4px 0; } .gb-route-uit { margin-top: 8px; font-size: 14px; color: var(--gb-tekst-dim); } .gb-route-uit[data-stand="fout"] { color: var(--gb-rood); } .gb-route-samenvatting { color: var(--gb-wit); } .gb-body[data-landing="1"] .gb-kpi, .gb-body[data-landing="1"] .gb-venster, .gb-body[data-landing="1"] .gb-legenda { visibility: hidden; } .gb-menu-knop, .gb-paneel-sluit { display: none; width: 40px; height: 40px; place-items: center; border: 1px solid var(--gb-rand); border-radius: 2px; color: var(--gb-wit); background: var(--gb-paneel-hoog); flex: none; } .gb-menu-knop svg, .gb-paneel-sluit svg { width: 22px; height: 22px; } .gb-paneel-sluit { margin-left: 8px; } .gb-menu { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; background: var(--gb-achter); padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); } .gb-menu[hidden] { display: none; } .gb-menu-kop { display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 0 10px 0 14px; background: var(--gb-paneel); border-bottom: 1px solid var(--gb-rand); flex: none; } .gb-menu-tabs { display: flex; flex-direction: column; padding: 8px 0; overflow-y: auto; } .gb-menu .gb-menu-tab { height: 60px; line-height: 60px; padding: 0 24px; font-size: 17px; color: var(--gb-tekst); border-bottom: 1px solid var(--gb-rand); border-left: 3px solid transparent; } .gb-menu .gb-menu-tab[aria-current="page"] { color: var(--gb-wit); border-bottom-color: var(--gb-rand); border-left-color: var(--gb-accent); background: var(--gb-paneel); } .gb-menu-voet { margin-top: auto; display: flex; flex-direction: column; padding: 10px 0 14px; border-top: 1px solid var(--gb-rand); flex: none; } .gb-menu-extra { display: flex; align-items: center; gap: 14px; height: 52px; padding: 0 24px; font-size: 15px; color: var(--gb-tekst-dim); text-align: left; } .gb-menu-extra svg { width: 20px; height: 20px; color: var(--gb-accent); } .gb-paneel-open { display: none; position: absolute; z-index: 11; bottom: 14px; align-items: center; gap: 8px; height: 44px; padding: 0 18px 0 14px; background: var(--gb-paneel); border: 1px solid var(--gb-rand); border-radius: 22px; color: var(--gb-wit); font-size: 14px; font-weight: 600; box-shadow: 0 6px 20px rgba(0,0,0,0.55); } .gb-paneel-open svg { width: 20px; height: 20px; color: var(--gb-accent); } .gb-paneel-open-meng { left: 12px; } .gb-body[data-landing="1"] .gb-paneel-open { visibility: hidden; } .gb-tab-economic, .gb-tab-news, .gb-tab-watchlist { display: flex; flex-direction: column; background: var(--gb-achter); } .gb-tab-economic[hidden], .gb-tab-news[hidden], .gb-tab-watchlist[hidden], .gb-tab-community[hidden] { display: none; } .gb-deelnav { flex: none; display: flex; gap: 4px; padding: 10px 16px 0; border-bottom: 1px solid var(--gb-rand); background: var(--gb-paneel); overflow-x: auto; scrollbar-width: none; } .gb-deelnav-link { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; color: var(--gb-tekst-dim); font-size: 14px; font-weight: 500; text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; } .gb-deelnav-link svg { width: 18px; height: 18px; } .gb-deelnav-link:hover { color: var(--gb-wit); } .gb-deelnav-link[aria-current="page"] { color: var(--gb-wit); border-bottom-color: var(--gb-accent); } .gb-deel[hidden] { display: none !important; } .gb-onder { display: none; } .gb-kaartje { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--gb-paneel); border: 1px solid var(--gb-rand); border-radius: 14px; box-shadow: var(--gb-kaart-schaduw); min-width: 0; } .gb-kaartje-kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .gb-kaartje-titel { margin: 0; font-size: 16px; font-weight: 600; color: var(--gb-wit); } .gb-kaartje-sub { margin: 6px 0 0; font-size: 13px; font-weight: 600; color: var(--gb-tekst-dim); } .gb-kaartje-tekst { margin: 0; font-size: 14px; color: var(--gb-tekst); line-height: 1.5; } .gb-kaartje-link { font-size: 13px; color: var(--gb-accent); text-decoration: none; } .gb-kaartje-link:hover { text-decoration: underline; } .gb-deel-kop { padding: 4px 2px 10px; } .gb-deel-titel { margin: 0; font-size: 24px; font-weight: 700; color: var(--gb-wit); } .gb-deel-sub { margin: 4px 0 0; font-size: 14px; color: var(--gb-tekst-dim); } .gb-segment { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: rgb(var(--gb-inkt) / 0.06); } .gb-segment button { height: 30px; padding: 0 12px; border-radius: 8px; font-size: 13px; color: var(--gb-tekst-dim); white-space: nowrap; } .gb-segment button:hover { color: var(--gb-wit); } .gb-segment button[aria-pressed="true"] { background: var(--gb-paneel); color: var(--gb-wit); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,0.2); } .gb-segment-breed { display: flex; overflow-x: auto; scrollbar-width: none; } .gb-segment-breed button { flex: 1; } .gb-pil { display: inline-flex; align-items: center; justify-content: center; min-width: 64px; height: 24px; padding: 0 8px; border-radius: 12px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; background: rgb(var(--gb-inkt) / 0.08); color: var(--gb-tekst); } .gb-pil.gb-op { background: color-mix(in srgb, var(--gb-plus) 16%, transparent); color: var(--gb-plus); } .gb-pil.gb-neer { background: color-mix(in srgb, var(--gb-min) 16%, transparent); color: var(--gb-min); } .gb-laad { padding: 30px; text-align: center; font-size: 13px; color: var(--gb-tekst-dim); } .gb-terug { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 14px; color: var(--gb-tekst-dim); text-decoration: none; } .gb-terug:hover { color: var(--gb-wit); } .gb-eco { height: auto; flex: 1; min-height: 0; display: flex; flex-direction: column; } .gb-eco-strook { flex: none; display: flex; align-items: center; gap: 10px; padding: 0 0 0 16px; border-bottom: 1px solid var(--gb-rand); background: var(--gb-paneel); overflow: hidden; } .gb-eco-strook-kop { flex: none; font-size: 13px; font-weight: 600; color: var(--gb-tekst-dim); } .gb-eco-strook .gb-eco-indices { flex: 1; min-width: 0; border: 0; background: none; padding: 8px 8px 8px 0; scrollbar-width: none; } .gb-eco-strook .gb-eco-indices::-webkit-scrollbar { display: none; } .gb-eco-strook .gb-eco-grondstoffen { display: none; } .gb-tab-economic[data-deel="discover"] .gb-eco-strook .gb-eco-grondstoffen { display: flex; } .gb-eco-strook .gb-index-chip { flex-direction: row; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; border-color: transparent; background: rgb(var(--gb-inkt) / 0.04); } .gb-eco-deel { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; } .gb-eco-kalender { display: flex; flex-direction: column; padding: 0; overflow: hidden; } .gb-eco-rooster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 320px; grid-template-areas: "hoofd hoofd hoofd markt" "trends volg agenda markt"; gap: 16px; max-width: 1600px; margin: 0 auto; } .gb-eco-samen, .gb-eco-mobiel { display: none; } .gb-eco-hoofd { grid-area: hoofd; display: flex; flex-direction: column; gap: 10px; min-width: 0; } .gb-eco-markt { grid-area: markt; } .gb-eco-trends { grid-area: trends; } .gb-eco-volgkaart { grid-area: volg; } .gb-eco-agenda { grid-area: agenda; } .gb-eco-kiezer { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .gb-eco-kiezer-knop { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 6px 0 12px; border-radius: 18px; border: 1px solid var(--gb-rand); background: var(--gb-paneel); font-size: 13px; color: var(--gb-tekst); } .gb-eco-kiezer-knop .gb-pil { min-width: 0; height: 24px; } .gb-eco-kiezer-knop[aria-pressed="true"] { border-color: var(--gb-accent); color: var(--gb-wit); font-weight: 600; } .gb-grafiek-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .gb-grafiek-naam { display: flex; align-items: center; gap: 12px; min-width: 0; } .gb-grafiek-naam strong { display: block; font-size: 17px; color: var(--gb-wit); } .gb-grafiek-naam small { display: block; font-size: 12px; color: var(--gb-tekst-dim); } .gb-grafiek-prijs { display: flex; align-items: center; gap: 10px; } .gb-grafiek-prijs strong { font-size: 24px; font-weight: 700; color: var(--gb-wit); font-variant-numeric: tabular-nums; } .gb-grafiek-balk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .gb-ster-knop { margin-left: auto; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--gb-rand); color: var(--gb-tekst-dim); } .gb-ster-knop[aria-pressed="true"] { color: var(--gb-accent); border-color: var(--gb-accent); } .gb-ster-knop[aria-pressed="true"] svg { fill: currentColor; } .gb-grafiek-vak { min-height: 240px; } .gb-kaars { position: relative; } .gb-kaars-svg { display: block; width: 100%; height: auto; touch-action: none; } .gb-kaars-leeg { padding: 40px; text-align: center; color: var(--gb-tekst-dim); } .gb-kaars-raster line { stroke: rgb(var(--gb-inkt) / 0.07); stroke-width: 1; } .gb-kaars-as { font-size: 11px; fill: var(--gb-tekst-dim); font-family: var(--gb-letter); } .gb-kaars-lont { stroke-width: 1.2; } .gb-kaars-lont.gb-op { stroke: var(--gb-plus); } .gb-kaars-lont.gb-neer { stroke: var(--gb-min); } .gb-kaars-lijf.gb-op { fill: var(--gb-plus); } .gb-kaars-lijf.gb-neer { fill: var(--gb-min); } .gb-kaars-volume rect { opacity: 0.3; } .gb-kaars-volume .gb-op { fill: var(--gb-plus); } .gb-kaars-volume .gb-neer { fill: var(--gb-min); } .gb-kaars-lijn { fill: none; stroke-width: 2; } .gb-kaars-lijn.gb-op { stroke: var(--gb-plus); } .gb-kaars-lijn.gb-neer { stroke: var(--gb-min); } .gb-kaars-vlak { opacity: 0.12; stroke: none; } .gb-kaars-vlak.gb-op { fill: var(--gb-plus); } .gb-kaars-vlak.gb-neer { fill: var(--gb-min); } .gb-ma { fill: none; stroke-width: 1.6; } .gb-ma-kort { stroke: #7C6CF2; } .gb-ma-lang { stroke: #F0A030; } .gb-kaars-nu { stroke: var(--gb-tekst-dim); stroke-dasharray: 3 3; stroke-width: 1; opacity: 0.6; } .gb-kaars-nulabel rect { fill: var(--gb-plus); } .gb-kaars-nulabel.gb-neer rect { fill: var(--gb-min); } .gb-kaars-nulabel text { font-size: 11px; font-weight: 600; fill: #FFFFFF; font-family: var(--gb-letter); } .gb-kaars-kruis line { stroke: var(--gb-tekst-dim); stroke-dasharray: 4 3; stroke-width: 1; } .gb-kaars-info { display: flex; flex-wrap: wrap; gap: 4px 14px; padding-top: 6px; font-size: 12px; color: var(--gb-tekst-dim); font-variant-numeric: tabular-nums; } .gb-kaars-info .gb-op { color: var(--gb-plus); } .gb-kaars-info .gb-neer { color: var(--gb-min); } .gb-stemming { display: flex; flex-direction: column; gap: 6px; } .gb-stemming-labels { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; } .gb-stemming-labels .gb-op { color: var(--gb-plus); } .gb-stemming-labels .gb-neer { color: var(--gb-min); } .gb-stemming-balk { display: flex; gap: 3px; height: 10px; } .gb-stemming-balk span { border-radius: 5px; min-width: 3px; } .gb-stemming-balk .gb-op { background: var(--gb-plus); } .gb-stemming-balk .gb-neer { background: var(--gb-min); } .gb-stemming-balk .gb-vlak { background: rgb(var(--gb-inkt) / 0.15); } .gb-instr-lijst { display: flex; flex-direction: column; } .gb-instr-rij { display: grid; grid-template-columns: 36px minmax(0, 1fr) 96px auto; align-items: center; gap: 12px; padding: 9px 6px; border-radius: 10px; text-align: left; color: var(--gb-tekst); } .gb-instr-rij + .gb-instr-rij { border-top: 1px solid var(--gb-rand); } .gb-instr-rij:hover { background: rgb(var(--gb-inkt) / 0.04); } .gb-instr-teken { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: rgb(var(--gb-inkt) / 0.06); overflow: hidden; color: var(--gb-accent); } .gb-instr-teken .gb-vlag { width: 36px; height: 36px; object-fit: cover; border-radius: 50%; } .gb-instr-teken svg { width: 18px; height: 18px; } .gb-instr-naam { min-width: 0; display: flex; flex-direction: column; } .gb-instr-naam strong { font-size: 14px; font-weight: 600; color: var(--gb-wit); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gb-instr-naam small { font-size: 12px; color: var(--gb-tekst-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gb-instr-spark { width: 96px; height: 32px; } .gb-instr-prijs { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; } .gb-instr-prijs strong { font-size: 14px; color: var(--gb-wit); font-variant-numeric: tabular-nums; } .gb-instr-prijs .gb-pil { min-width: 58px; height: 20px; font-size: 11px; } .gb-eco-markt .gb-instr-rij, .gb-eco-volgkaart .gb-instr-rij { grid-template-columns: 32px minmax(0, 1fr) auto; } .gb-eco-markt .gb-instr-spark, .gb-eco-volgkaart .gb-instr-spark { display: none; } .gb-eco-markt .gb-instr-teken, .gb-eco-volgkaart .gb-instr-teken { width: 32px; height: 32px; } .gb-spark { display: block; width: 100%; height: 100%; } .gb-spark-lijn { fill: none; stroke-width: 1.6; } .gb-spark-vlak { opacity: 0.12; } .gb-spark.gb-op .gb-spark-lijn { stroke: var(--gb-plus); } .gb-spark.gb-op .gb-spark-vlak { fill: var(--gb-plus); } .gb-spark.gb-neer .gb-spark-lijn { stroke: var(--gb-min); } .gb-spark.gb-neer .gb-spark-vlak { fill: var(--gb-min); } .gb-wereld-vak { min-height: 150px; } .gb-wereld { display: block; width: 100%; height: auto; } .gb-wereld-land { fill: rgb(var(--gb-inkt) / 0.1); stroke: var(--gb-paneel, #0E141C); stroke-width: 0.25; stroke-linejoin: round; } .gb-wereld-markt { cursor: pointer; fill: var(--gb-tekst-dim); } .gb-wereld-markt.gb-op { fill: var(--gb-plus); } .gb-wereld-markt.gb-neer { fill: var(--gb-min); } .gb-wereld-markt.gb-vlak { fill: var(--gb-tekst-dim); } .gb-wereld-markt:hover { stroke: var(--gb-wit); stroke-width: 0.5; } .gb-wereld-punt { cursor: pointer; } .gb-wereld-punt circle { fill: var(--gb-tekst-dim); } .gb-wereld-punt .gb-wereld-gloed { opacity: 0.25; } .gb-wereld-punt.gb-op circle { fill: var(--gb-plus); } .gb-wereld-punt.gb-neer circle { fill: var(--gb-min); } .gb-trend-tel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; } .gb-trend-tel div { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--gb-tekst-dim); } .gb-trend-tel strong { font-size: 15px; color: var(--gb-wit); } .gb-trend-tel .gb-op span { color: var(--gb-plus); } .gb-trend-tel .gb-neer span { color: var(--gb-min); } .gb-agenda-lijst { display: flex; flex-direction: column; gap: 6px; } .gb-agenda-rij { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px; border-radius: 10px; text-align: left; color: var(--gb-tekst); } .gb-agenda-rij:hover { background: rgb(var(--gb-inkt) / 0.04); } .gb-agenda-datum { display: flex; flex-direction: column; align-items: center; padding: 4px 0; border-radius: 8px; background: rgb(var(--gb-inkt) / 0.06); } .gb-agenda-datum small { font-size: 11px; color: var(--gb-tekst-dim); } .gb-agenda-datum strong { font-size: 17px; color: var(--gb-wit); } .gb-agenda-midden { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .gb-agenda-midden strong { font-size: 13px; font-weight: 600; color: var(--gb-wit); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gb-agenda-midden small { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--gb-tekst-dim); white-space: nowrap; overflow: hidden; } .gb-agenda-midden .gb-vlag { width: 16px; height: 12px; } .gb-ontdek-lijst { max-width: 900px; margin-top: 12px; } #gb-eco-ontdek, #gb-eco-volg { max-width: 940px; margin: 0 auto; width: 100%; } .gb-detail-rooster { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; max-width: 1500px; margin: 0 auto; } .gb-detail-links, .gb-detail-rechts { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .gb-detail-rechts .gb-knop { justify-content: center; } .gb-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .gb-stat { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: rgb(var(--gb-inkt) / 0.04); } .gb-stat span { font-size: 12px; color: var(--gb-tekst-dim); } .gb-stat strong { font-size: 15px; color: var(--gb-wit); font-variant-numeric: tabular-nums; } .gb-mini-nieuws { display: flex; flex-direction: column; } .gb-mini-artikel { display: flex; flex-direction: column; gap: 3px; padding: 10px 4px; text-align: left; border-top: 1px solid var(--gb-rand); } .gb-mini-artikel:first-child { border-top: 0; } .gb-mini-artikel strong { font-size: 14px; font-weight: 600; color: var(--gb-wit); line-height: 1.35; } .gb-mini-artikel small { font-size: 12px; color: var(--gb-tekst-dim); } .gb-mini-artikel:hover strong { color: var(--gb-accent); } .gb-thema-keuze { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .gb-thema-knop { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; border-radius: 12px; border: 1px solid var(--gb-rand); font-size: 13px; color: var(--gb-tekst); } .gb-thema-knop[aria-checked="true"] { border-color: var(--gb-accent); color: var(--gb-wit); font-weight: 600; } .gb-thema-staal { width: 100%; height: 34px; border-radius: 8px; border: 1px solid var(--gb-rand); } .gb-thema-system .gb-thema-staal { background: linear-gradient(135deg, #F3F5F8 50%, #0E141C 50%); } .gb-thema-dark .gb-thema-staal { background: #0E141C; } .gb-thema-light .gb-thema-staal { background: #F3F5F8; } .gb-news { position: relative; flex: 1; min-height: 0; height: auto; display: block; } .gb-news-deel { position: absolute; inset: 0; overflow-y: auto; padding: 16px 20px 28px; } .gb-news-deel > * { max-width: 1240px; margin-left: auto; margin-right: auto; } .gb-news-boven { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; } .gb-news-zoek { flex: 1; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px; border-radius: 23px; background: var(--gb-paneel); border: 1px solid var(--gb-rand); color: var(--gb-tekst-dim); } .gb-news-zoek svg { width: 20px; height: 20px; } .gb-news-zoekveld { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--gb-wit); font-size: 15px; outline: none; } .gb-news-filterknop { height: 46px; padding: 0 18px; border-radius: 23px; } .gb-news-filters { border: 0; padding: 0 0 12px; flex-wrap: wrap; } .gb-news-filters[data-open="0"] { display: none; } .gb-news-uitgelicht { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 14px; margin-bottom: 16px; } .gb-news-uitgelicht[hidden] { display: none; } .gb-uitgelicht { position: relative; height: 300px; border-radius: 16px; overflow: hidden; text-align: left; color: #FFFFFF; box-shadow: var(--gb-kaart-schaduw); } .gb-uitgelicht .gb-beeld { position: absolute; inset: 0; border-radius: 0; } .gb-uitgelicht::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.82) 100%); } .gb-uitgelicht-tekst { position: absolute; z-index: 1; left: 18px; right: 18px; bottom: 16px; display: flex; flex-direction: column; gap: 6px; } .gb-uitgelicht-cat { align-self: flex-start; padding: 3px 10px; border-radius: 11px; background: var(--gb-accent); color: #11161E; font-size: 11px; font-weight: 600; } .gb-uitgelicht-tekst strong { font-size: 17px; line-height: 1.3; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .gb-uitgelicht-groot .gb-uitgelicht-tekst strong { font-size: 24px; } .gb-uitgelicht-tekst small { font-size: 12px; opacity: 0.85; } .gb-uitgelicht:hover strong { text-decoration: underline; text-underline-offset: 3px; } .gb-beeld { position: relative; overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--gb-beeld-kleur) 55%, #0B1524) 0%, color-mix(in srgb, var(--gb-beeld-kleur) 20%, #0B1524) 100%); border-radius: 12px; } .gb-beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .gb-beeld-merk, .gb-beeld-bron { display: none; } .gb-beeld-leeg .gb-beeld-merk { display: grid; position: absolute; right: -6%; bottom: -14%; width: 62%; aspect-ratio: 1; place-items: center; color: rgba(255,255,255,0.22); } .gb-beeld-leeg .gb-beeld-merk svg { width: 100%; height: 100%; stroke-width: 1.1; } .gb-beeld-leeg .gb-beeld-bron { display: block; position: absolute; left: 12px; top: 10px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.85); letter-spacing: 0.02em; } .gb-beeld-leeg::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.12) 1px, transparent 1px); background-size: 14px 14px; } .gb-news-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 14px; } .gb-news-chips::-webkit-scrollbar { display: none; } .gb-news-chip { flex: none; height: 34px; padding: 0 14px; border-radius: 17px; border: 1px solid var(--gb-rand); background: var(--gb-paneel); font-size: 13px; color: var(--gb-tekst); } .gb-news-chip:hover { color: var(--gb-wit); border-color: var(--gb-tekst-dim); } .gb-news-chip[aria-selected="true"] { background: var(--gb-wit); color: var(--gb-achter); border-color: var(--gb-wit); font-weight: 600; } .gb-news .gb-news-lijst { overflow: visible; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); gap: 12px; } .gb-news .gb-artikel { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 14px; padding: 12px; border-radius: 14px; border: 1px solid var(--gb-rand); background: var(--gb-paneel); box-shadow: var(--gb-kaart-schaduw); } .gb-news .gb-artikel:hover { border-color: rgb(var(--gb-inkt) / 0.25); } .gb-beeld-duim { width: 132px; height: 100px; border-radius: 10px; } .gb-artikel-lijf { min-width: 0; display: flex; flex-direction: column; gap: 6px; } .gb-news .gb-artikel-titel { margin: 0; font-size: 15px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .gb-news .gb-artikel-samenvatting { margin: 0; font-size: 13px; color: var(--gb-tekst-dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .gb-news .gb-artikel-meta { gap: 6px 10px; } .gb-news .gb-artikel-bron { font-weight: 600; } .gb-news .gb-artikel-cat { border-radius: 10px; } .gb-news .gb-artikel-voet { margin-top: auto; justify-content: flex-start; } .gb-news .gb-stem { border-radius: 8px; } .gb-artikel-lees { margin-left: auto; } .gb-ikoonknop { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: var(--gb-tekst-dim); } .gb-ikoonknop:hover { color: var(--gb-wit); background: rgb(var(--gb-inkt) / 0.06); } .gb-ikoonknop[aria-pressed="true"] { color: var(--gb-accent); } .gb-ikoonknop[aria-pressed="true"] svg { fill: currentColor; } .gb-news-lezer { position: absolute; top: 0; right: 0; bottom: 0; z-index: 5; width: min(560px, 100%); padding: 20px 24px 32px; overflow-y: auto; box-shadow: -18px 0 40px rgba(0,0,0,0.25); } .gb-lezer-terug { margin: 0 0 6px; padding: 0; } .gb-lezer-titel { font-size: 24px; line-height: 1.25; margin: 6px 0; } .gb-lezer-datum { display: flex; align-items: center; gap: 6px; margin: 0 0 14px; font-size: 13px; color: var(--gb-tekst-dim); } .gb-lezer-datum svg { width: 15px; height: 15px; } .gb-beeld-held { width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; margin-bottom: 8px; } .gb-lezer-acties { display: flex; gap: 6px; justify-content: flex-end; } .gb-news-lezer .gb-lezer-tekst { font-size: 16px; line-height: 1.7; } .gb-cat-rooster { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; } .gb-cat-tegel { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 120px; padding: 16px; border-radius: 16px; overflow: hidden; text-align: left; color: #FFFFFF; background: linear-gradient(135deg, color-mix(in srgb, var(--gb-beeld-kleur) 70%, #0B1524), color-mix(in srgb, var(--gb-beeld-kleur) 30%, #0B1524)); box-shadow: var(--gb-kaart-schaduw); } .gb-cat-tegel svg { width: 30px; height: 30px; margin-bottom: auto; } .gb-cat-tegel strong { font-size: 16px; } .gb-cat-tegel small { font-size: 12px; opacity: 0.85; } .gb-cat-tegel:hover { filter: brightness(1.08); } .gb-melding-lijst { display: flex; flex-direction: column; gap: 8px; max-width: 760px; } .gb-melding-rij { display: grid; grid-template-columns: minmax(0, 1fr) 36px; gap: 8px; align-items: center; padding: 6px 8px 6px 12px; border-radius: 14px; border: 1px solid var(--gb-rand); background: var(--gb-paneel); } .gb-melding-open { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; align-items: center; padding: 6px 0; text-align: left; color: inherit; } .gb-melding-weg { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--gb-tekst-dim); } .gb-melding-weg:hover { background: rgb(var(--gb-inkt) / 0.06); color: var(--gb-wit); } .gb-melding-weg:disabled { opacity: 0.4; } .gb-melding-weg svg { width: 16px; height: 16px; } .gb-melding-rij.gb-ongelezen { border-left: 3px solid var(--gb-accent); } .gb-melding-ikoon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: rgb(var(--gb-inkt) / 0.06); color: var(--gb-chip-kleur, var(--gb-accent)); } .gb-melding-midden { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .gb-melding-midden strong { font-size: 14px; color: var(--gb-wit); } .gb-melding-midden small { font-size: 12px; color: var(--gb-tekst-dim); } .gb-watch-deel { flex: 1; min-height: 0; overflow-y: auto; } #gb-watch-overzicht { overflow: hidden; display: flex; } .gb-watch-binnen { max-width: 880px; margin: 0 auto; padding: 18px 20px 30px; display: flex; flex-direction: column; gap: 14px; } .gb-deel-kop-rij { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; } #gb-watch-overzicht .gb-watch { flex: 1; height: auto; min-height: 0; display: flex; flex-direction: column; } .gb-watch-lijsten, .gb-watch-detail { flex: 1; min-height: 0; overflow-y: auto; } .gb-watch-lijsten[hidden], .gb-watch-detail[hidden], .gb-watch-balk[hidden] { display: none; } .gb-watch-lijsten { display: flex; flex-direction: column; gap: 16px; padding: 22px 24px 36px; background: var(--gb-achter); } .gb-watch-lijsten > * { width: 100%; max-width: 1280px; margin-left: auto; margin-right: auto; } .gb-watch-detail { padding: 18px 20px 30px; } .gb-watch-kop { padding: 0; } .gb-watch-balk { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .gb-watch-zoekvak { position: relative; display: flex; align-items: center; flex: 1 1 260px; max-width: 420px; } .gb-watch-zoekvak svg { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--gb-tekst-dim); pointer-events: none; } .gb-watch-zoekvak .gb-invoer { width: 100%; height: 40px; padding: 0 12px 0 36px; border-radius: 10px; background: var(--gb-paneel); } .gb-watch-zoekvak .gb-invoer:focus, .gb-watch-balk .gb-keuze:focus { outline: none; border-color: var(--gb-accent); } .gb-watch-balk .gb-keuze { height: 40px; max-width: 220px; padding: 0 12px; border-radius: 10px; background: var(--gb-paneel); } #gb-watch-nieuw, .gb-watch-leeg-knop, .gb-wizard-verder { height: 40px; padding: 0 16px; border-radius: 10px; border-color: var(--gb-accent-vol); background: var(--gb-accent-vol); color: var(--gb-op-accent); font-weight: 600; } #gb-watch-nieuw:hover, .gb-watch-leeg-knop:hover, .gb-wizard-verder:hover { background: var(--gb-accent-vol-hoog); border-color: var(--gb-accent-vol-hoog); color: var(--gb-op-accent); } #gb-watch-nieuw { margin-left: auto; } #gb-watch-nieuw svg, .gb-watch-leeg-knop svg { width: 16px; height: 16px; stroke-width: 2; } .gb-watch-tabelkaart { background: var(--gb-paneel); border: 1px solid var(--gb-rand); border-radius: 14px; box-shadow: var(--gb-kaart-schaduw); } .gb-watch-tabel { font-size: 14px; } .gb-watch-tabel th { padding: 13px 16px; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--gb-tekst-dim); border-bottom: 1px solid var(--gb-rand); white-space: nowrap; } .gb-watch-tabel td { padding: 12px 16px; vertical-align: middle; border-bottom: 1px solid var(--gb-rand); } .gb-watch-tabel tbody tr:last-child td { border-bottom: 0; } .gb-watch-rij td { transition: background 0.15s; } .gb-watch-rij:hover td { background: rgb(var(--gb-inkt) / 0.03); } .gb-watch-naamkop { width: 46%; } .gb-watch-actiekop { width: 1%; } .gb-watch-naamvak { display: flex; align-items: center; gap: 12px; min-width: 0; cursor: pointer; } .gb-watch-duim { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 0; background: none; border: 0; color: var(--gb-wit); } .gb-watch-duim svg { width: 20px; height: 20px; stroke-width: 1.8; } .gb-watch-naamtekst { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .gb-watch-naam { font-size: 14px; font-weight: 600; color: var(--gb-wit); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gb-watch-sub { font-size: 12px; color: var(--gb-tekst-dim); white-space: pre; overflow: hidden; text-overflow: ellipsis; } .gb-watch-naamvak:hover .gb-watch-naam { color: var(--gb-accent); } .gb-watch-gezondvak { display: inline-flex; align-items: center; gap: 8px; } .gb-watch-gezond { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px; border-radius: 13px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; background: rgb(var(--gb-inkt) / 0.07); color: var(--gb-tekst-dim); } .gb-watch-gezond::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; } .gb-watch-gezond-good { background: color-mix(in srgb, var(--gb-plus) 15%, transparent); color: var(--gb-plus); } .gb-watch-gezond-bad { background: color-mix(in srgb, var(--gb-min) 15%, transparent); color: var(--gb-min); } .gb-watch-trend { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; } .gb-watch-trend.gb-op { color: var(--gb-plus); } .gb-watch-trend.gb-neer { color: var(--gb-min); } .gb-watch-tel { position: relative; display: inline-block; } .gb-watch-tel summary { list-style: none; display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px 0 12px; border: 1px solid var(--gb-rand); border-radius: 10px; background: var(--gb-paneel); color: var(--gb-tekst); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer; user-select: none; } .gb-watch-tel summary::-webkit-details-marker { display: none; } .gb-watch-tel summary svg { width: 14px; height: 14px; color: var(--gb-tekst-dim); transform: rotate(90deg); transition: transform 0.15s; } .gb-watch-tel[open] summary svg { transform: rotate(-90deg); } .gb-watch-tel summary:hover, .gb-watch-tel[open] summary { border-color: var(--gb-tekst-dim); color: var(--gb-wit); } .gb-watch-tel-lijst { position: absolute; z-index: 6; top: calc(100% + 6px); left: 0; min-width: 200px; display: flex; flex-direction: column; gap: 2px; padding: 6px; background: var(--gb-paneel-hoog); border: 1px solid var(--gb-rand); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); } .gb-watch-tel-rij { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; font-size: 13px; color: var(--gb-tekst); } .gb-watch-tel-rij::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gb-tab-kleur, var(--gb-grijs)); flex: none; } .gb-watch-tel-rij[data-tab="earth"] { --gb-tab-kleur: var(--gb-blauw); } .gb-watch-tel-rij[data-tab="news"] { --gb-tab-kleur: var(--gb-paars); } .gb-watch-tel-rij[data-tab="economic"] { --gb-tab-kleur: var(--gb-geel); } .gb-watch-tel-rij[data-tab="topics"] { --gb-tab-kleur: var(--gb-cyaan); } .gb-watch-tel-naam { flex: 1; } .gb-watch-tel-getal { font-variant-numeric: tabular-nums; color: var(--gb-wit); } .gb-watch-tel-nul { opacity: 0.5; } .gb-watch-actiecel { text-align: right; white-space: nowrap; } .gb-watch-acties { display: inline-flex; align-items: center; gap: 4px; } .gb-watch-acties button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 36px; height: 36px; padding: 0 8px; border: 1px solid transparent; border-radius: 10px; color: var(--gb-tekst-dim); transition: background 0.15s, color 0.15s; } .gb-watch-acties button:hover { background: rgb(var(--gb-inkt) / 0.07); color: var(--gb-wit); } .gb-watch-acties .gb-watch-weg { color: var(--gb-min); } .gb-watch-acties .gb-watch-weg:hover, .gb-watch-acties .gb-watch-weg[data-zeker="1"] { background: color-mix(in srgb, var(--gb-min) 14%, transparent); color: var(--gb-min); } .gb-watch-acties .gb-watch-weg[data-zeker="1"] { border-color: var(--gb-min); font-size: 12px; font-weight: 600; } .gb-watch-acties .gb-watch-weg:disabled { opacity: 0.5; cursor: progress; } .gb-watch-weg-tekst:empty { display: none; } .gb-watch-acties .gb-watch-open:hover { color: var(--gb-accent); } .gb-watch-geen td { padding: 28px 16px; text-align: center; color: var(--gb-tekst-dim); } .gb-watch-voet { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--gb-rand); } .gb-watch-telling { font-size: 13px; color: var(--gb-tekst-dim); font-variant-numeric: tabular-nums; } .gb-paginering { display: flex; align-items: center; gap: 6px; } .gb-pagina, .gb-pagina-stap { min-width: 32px; height: 32px; padding: 0 6px; display: inline-grid; place-items: center; border: 1px solid var(--gb-rand); border-radius: 8px; background: var(--gb-paneel); color: var(--gb-tekst); font-size: 13px; font-variant-numeric: tabular-nums; } .gb-pagina:hover, .gb-pagina-stap:hover:not(:disabled) { border-color: var(--gb-tekst-dim); color: var(--gb-wit); } .gb-pagina[aria-current="page"] { background: var(--gb-accent-vol); border-color: var(--gb-accent-vol); color: var(--gb-op-accent); font-weight: 600; } .gb-pagina-stap:disabled { opacity: 0.4; cursor: default; } .gb-pagina-stap svg { width: 14px; height: 14px; } .gb-pagina-gat { padding: 0 2px; color: var(--gb-tekst-dim); } .gb-watch-leeg { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 28px; background: var(--gb-paneel); border: 1px dashed var(--gb-rand); border-radius: 14px; } .gb-watch-leeg-ikoon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; background: color-mix(in srgb, var(--gb-accent) 16%, transparent); color: var(--gb-accent); } .gb-watch-leeg-ikoon svg { width: 26px; height: 26px; } .gb-watch-leeg-kop { font-size: 18px; font-weight: 600; color: var(--gb-wit); } .gb-watch-leeg-tekst { max-width: 640px; font-size: 14px; line-height: 1.55; color: var(--gb-tekst-dim); } .gb-watch-gast { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px; background: var(--gb-paneel); border: 1px solid var(--gb-rand); border-radius: 14px; } .gb-watch-gast .gb-zijbalk-leeg { padding: 0; text-align: left; } .gb-veld[hidden], .gb-segment[hidden], .gb-kies-nieuw[hidden], .gb-kies-nieuwvorm[hidden], .gb-watch-bewerkdoel[hidden], .gb-wizard-nav .gb-knop[hidden], .gb-kies-nieuwvorm .gb-knop[hidden] { display: none; } .gb-kies-watch, .gb-wizard, .gb-watch-bewerkvak, .gb-watch-extra { padding: 18px 20px 20px; border-radius: 16px; box-shadow: 0 16px 48px rgba(0,0,0,0.4); } .gb-kies-watch { width: min(600px, 94vw); } .gb-watch-bewerkvak, .gb-watch-extra { width: min(640px, 94vw); } .gb-kies-watch .gb-eco-paneel-kop, .gb-watch-bewerkvak .gb-eco-paneel-kop, .gb-watch-extra .gb-eco-paneel-kop, .gb-wizard .gb-eco-paneel-kop { align-items: center; margin-bottom: 12px; } .gb-kies-watch .gb-eco-paneel-titel, .gb-watch-bewerkvak .gb-eco-paneel-titel, .gb-watch-extra .gb-eco-paneel-titel, .gb-wizard .gb-eco-paneel-titel { font-size: 18px; } .gb-kies-item { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 12px; background: rgb(var(--gb-inkt) / 0.05); font-size: 14px; font-weight: 600; color: var(--gb-wit); } .gb-kies-item svg { color: var(--gb-chip-kleur, var(--gb-accent)); } .gb-kies-kopje { margin: 14px 0 8px; font-size: 12px; font-weight: 600; color: var(--gb-tekst-dim); } .gb-kies-lijsten { display: flex; flex-direction: column; gap: 6px; } .gb-kies-lijsten .gb-watch-uitleg { margin: 0; } .gb-kies-lijst { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--gb-rand); border-radius: 12px; cursor: pointer; transition: border-color 0.15s, background 0.15s; } .gb-kies-lijst:hover { border-color: var(--gb-tekst-dim); } .gb-kies-lijst:has(input:checked) { border-color: var(--gb-accent); background: color-mix(in srgb, var(--gb-accent) 8%, transparent); } .gb-kies-lijst input { width: 16px; height: 16px; margin: 0; accent-color: var(--gb-accent); } .gb-kies-lijst[data-klaar="1"] small { color: var(--gb-plus); font-weight: 600; } .gb-kies-stip { width: 12px; height: 12px; border-radius: 50%; background: var(--gb-lijst-kleur, var(--gb-accent)); } .gb-kies-lijsttekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .gb-kies-lijsttekst strong { font-size: 14px; font-weight: 600; color: var(--gb-wit); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gb-kies-lijsttekst small { font-size: 12px; color: var(--gb-tekst-dim); white-space: pre; overflow: hidden; text-overflow: ellipsis; } .gb-kies-nieuw { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; height: 34px; padding: 0 12px; border: 1px dashed var(--gb-rand); border-radius: 10px; font-size: 13px; color: var(--gb-tekst); } .gb-kies-nieuw:hover { border-color: var(--gb-accent); color: var(--gb-accent); } .gb-kies-nieuw svg { width: 15px; height: 15px; } .gb-kies-nieuwvorm { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 8px; padding: 12px; border: 1px solid var(--gb-rand); border-radius: 12px; background: rgb(var(--gb-inkt) / 0.04); } .gb-kies-nieuwvorm .gb-invoer, .gb-kies-nieuwvorm .gb-keuze { height: 32px; border-radius: 8px; } .gb-kies-nieuwnaam { min-width: 200px; } .gb-kies-nieuwinstrument { max-width: 240px; } .gb-kies-nieuwvorm .gb-knop { height: 32px; border-radius: 8px; } .gb-kies-nieuwvorm .gb-knop-accent { background: var(--gb-accent-vol); border-color: var(--gb-accent-vol); color: var(--gb-op-accent); font-weight: 600; } .gb-kies-watch .gb-watch-vorm, .gb-watch-extra .gb-watch-vorm { margin-top: 14px; padding-top: 14px; } .gb-kies-watch .gb-watch-vorm .gb-knop-accent, .gb-watch-extra .gb-watch-vorm .gb-knop-accent { height: 32px; padding: 0 14px; border-radius: 8px; background: var(--gb-accent-vol); border-color: var(--gb-accent-vol); color: var(--gb-op-accent); font-weight: 600; } .gb-kies-artikel { width: 100%; display: flex; align-items: flex-start; gap: 8px; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--gb-wit); } .gb-kies-artikel svg { margin-top: 1px; color: var(--gb-paars); } .gb-kies-ookvak { width: 100%; color: var(--gb-tekst); } .gb-kies-ook { accent-color: var(--gb-accent); } .gb-wizard { width: min(700px, 94vw); max-height: 90vh; display: flex; flex-direction: column; gap: 14px; overflow: hidden; } .gb-wizard .gb-eco-paneel-kop { margin-bottom: 0; } .gb-wizard-stappen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .gb-wizard-stapje { display: flex; align-items: center; gap: 8px; min-width: 0; padding-top: 10px; border-top: 3px solid var(--gb-rand); font-size: 12px; color: var(--gb-tekst-dim); } .gb-wizard-stapnr { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 50%; background: rgb(var(--gb-inkt) / 0.08); font-size: 12px; font-weight: 600; } .gb-wizard-stapnaam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gb-wizard-stapje[data-klaar="1"] { border-top-color: color-mix(in srgb, var(--gb-accent) 55%, transparent); color: var(--gb-tekst); } .gb-wizard-stapje[data-klaar="1"] .gb-wizard-stapnr { background: color-mix(in srgb, var(--gb-accent) 22%, transparent); color: var(--gb-accent); } .gb-wizard-stapje[aria-current="step"] { border-top-color: var(--gb-accent); color: var(--gb-wit); font-weight: 600; } .gb-wizard-stapje[aria-current="step"] .gb-wizard-stapnr { background: var(--gb-accent-vol); color: var(--gb-op-accent); } .gb-wizard-stapje[data-over="1"] { opacity: 0.4; } .gb-wizard-lijf { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 2px 2px 4px; } .gb-wizard-vraag { font-size: 22px; font-weight: 700; color: var(--gb-wit); } .gb-wizard-uitleg { margin: -4px 0 0; font-size: 14px; } .gb-wizard-zoek { width: 100%; height: 40px; border-radius: 10px; flex: none; } .gb-wizard-instrumenten { display: flex; flex-direction: column; gap: 14px; max-height: 42vh; overflow-y: auto; padding-right: 2px; } .gb-wizard-groepkop { margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--gb-tekst-dim); } .gb-wizard-rooster { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; } .gb-wizard-instrument { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding: 9px 12px; border: 1px solid var(--gb-rand); border-radius: 10px; text-align: left; transition: border-color 0.15s, background 0.15s; } .gb-wizard-instrument:hover { border-color: var(--gb-tekst-dim); } .gb-wizard-instrument[aria-pressed="true"] { border-color: var(--gb-accent); background: color-mix(in srgb, var(--gb-accent) 10%, transparent); } .gb-wizard-instrument-naam { display: flex; flex-direction: column; min-width: 0; } .gb-wizard-instrument-naam strong { font-size: 13px; font-weight: 600; color: var(--gb-wit); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gb-wizard-instrument-naam small { font-family: var(--gb-mono); font-size: 11px; color: var(--gb-tekst-dim); } .gb-wizard-instrument-koers { flex: none; font-size: 12px; color: var(--gb-tekst-dim); font-variant-numeric: tabular-nums; } .gb-wizard-geen { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 1px dashed var(--gb-rand); border-radius: 12px; text-align: left; color: var(--gb-tekst); flex: none; } .gb-wizard-geen:hover { border-color: var(--gb-accent); } .gb-wizard-geen svg { color: var(--gb-accent); } .gb-wizard-geen-tekst { display: flex; flex-direction: column; gap: 2px; } .gb-wizard-geen-tekst strong { font-size: 14px; color: var(--gb-wit); } .gb-wizard-geen-tekst small { font-size: 12px; color: var(--gb-tekst-dim); } .gb-wizard-keuzes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .gb-wizard-richting { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 160px; padding: 20px 18px; border: 2px solid var(--gb-rand); border-radius: 16px; text-align: left; transition: border-color 0.15s, background 0.15s; } .gb-wizard-richting:hover { border-color: var(--gb-tekst-dim); } .gb-wizard-richting strong { font-size: 24px; font-weight: 700; color: var(--gb-wit); } .gb-wizard-richting small { font-size: 14px; color: var(--gb-tekst-dim); } .gb-wizard-richting-ikoon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; } .gb-wizard-richting-ikoon svg { width: 24px; height: 24px; stroke-width: 2; } .gb-wizard-richting-long .gb-wizard-richting-ikoon { background: color-mix(in srgb, var(--gb-plus) 16%, transparent); color: var(--gb-plus); } .gb-wizard-richting-short .gb-wizard-richting-ikoon { background: color-mix(in srgb, var(--gb-min) 16%, transparent); color: var(--gb-min); } .gb-wizard-richting-short .gb-wizard-richting-ikoon svg { transform: scaleY(-1); } .gb-wizard-richting-long[aria-pressed="true"] { border-color: var(--gb-plus); background: color-mix(in srgb, var(--gb-plus) 8%, transparent); } .gb-wizard-richting-short[aria-pressed="true"] { border-color: var(--gb-min); background: color-mix(in srgb, var(--gb-min) 8%, transparent); } .gb-wizard-context { padding: 12px 14px; border-radius: 12px; background: rgb(var(--gb-inkt) / 0.05); font-size: 14px; line-height: 1.5; color: var(--gb-tekst); } .gb-wizard-vraagblok { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 14px; border-top: 1px solid var(--gb-rand); } .gb-wizard-label { font-size: 14px; font-weight: 600; color: var(--gb-wit); } .gb-wizard-hint { font-size: 12px; color: var(--gb-tekst-dim); } .gb-invoer.gb-wizard-instap { width: 180px; height: 38px; border-radius: 10px; } .gb-wizard-rij { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; } .gb-wizard-rij .gb-veld:first-child { flex: 1; } .gb-wizard-naam { width: 100%; min-width: 220px; height: 38px; border-radius: 10px; } .gb-invoer.gb-wizard-kleur { width: 54px; height: 38px; border-radius: 10px; } .gb-wizard-samen { font-size: 13px; color: var(--gb-tekst-dim); } .gb-wizard .gb-wizard-groepkop { margin: 4px 0 0; } .gb-wizard-starters { display: flex; flex-direction: column; gap: 6px; } .gb-wizard-startrij { gap: 10px; padding: 10px 12px; border: 1px solid var(--gb-rand); border-radius: 12px; color: var(--gb-tekst); cursor: pointer; } .gb-wizard-startrij:has(input:checked) { border-color: color-mix(in srgb, var(--gb-accent) 60%, transparent); } .gb-wizard-startrij input { margin: 0; accent-color: var(--gb-accent); } .gb-wizard-startikoon { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 9px; background: rgb(var(--gb-inkt) / 0.06); color: var(--gb-chip-kleur, var(--gb-accent)); } .gb-wizard-startikoon svg { width: 17px; height: 17px; } .gb-wizard-starttekst { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .gb-wizard-starttekst strong { font-size: 14px; font-weight: 600; color: var(--gb-wit); } .gb-wizard-starttekst small { font-size: 12px; color: var(--gb-tekst-dim); } .gb-wizard-nav { display: flex; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid var(--gb-rand); } .gb-wizard-terug { height: 40px; padding: 0 16px; border-radius: 10px; } .gb-wizard-verder { margin-left: auto; } .gb-wizard-verder:disabled, .gb-wizard-terug:disabled { opacity: 0.6; cursor: progress; } .gb-wizard > .gb-vorm-fout { margin: 0; } .gb-watch-bewerkvorm { display: flex; flex-direction: column; gap: 14px; } .gb-watch-bewerkrij { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; } .gb-watch-bewerkrij .gb-veld:first-child { flex: 1; } .gb-watch-bewerkvorm .gb-invoer { height: 36px; border-radius: 8px; } .gb-watch-bewerkvorm .gb-invoer[name="naam"] { width: 100%; min-width: 200px; } .gb-watch-bewerkvorm .gb-invoer[type="number"] { width: 160px; } .gb-watch-bewerkvorm .gb-keuze { height: 36px; max-width: none; border-radius: 8px; } .gb-watch-bewerkdoel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 14px; border-radius: 12px; background: rgb(var(--gb-inkt) / 0.04); border: 1px solid var(--gb-rand); } .gb-watch-bewerkdoel .gb-veld { align-items: flex-start; } .gb-watch-bewerkvorm .gb-land-kopje { margin: 4px 0 -6px; } .gb-watch-bewerkvorm .gb-watch-lagen { margin: 0; } .gb-watch-bewerkknoppen { display: flex; justify-content: flex-end; gap: 8px; padding-top: 12px; border-top: 1px solid var(--gb-rand); } .gb-watch-bewerkknoppen .gb-knop { height: 38px; padding: 0 16px; border-radius: 10px; } .gb-watch-bewerkknoppen .gb-knop-accent { background: var(--gb-accent-vol); border-color: var(--gb-accent-vol); color: var(--gb-op-accent); font-weight: 600; } .gb-watch-extra-soort { margin: 2px 0 8px; } .gb-watch-extra-uitleg { margin: 0; } .gb-watch-extra-hint { margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: rgb(var(--gb-inkt) / 0.04); } .gb-melding-rij { border-left: 3px solid var(--gb-lijst-kleur, var(--gb-rand)); } .gb-topic-kaart, .gb-alert-kaart { border-left: 4px solid var(--gb-lijst-kleur, var(--gb-accent)); } .gb-woord-chips { display: flex; flex-wrap: wrap; gap: 6px; } .gb-woord-chip { padding: 4px 10px; border-radius: 12px; background: rgb(var(--gb-inkt) / 0.07); font-size: 13px; color: var(--gb-wit); } .gb-alert-rij { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--gb-rand); } .gb-alert-tekst { font-size: 14px; color: var(--gb-tekst); } .gb-alert-kanalen button:disabled { opacity: 0.45; cursor: not-allowed; } .gb-tab-community { background: var(--gb-achter); } .gb-com-schil { position: absolute; inset: 0; display: grid; grid-template-columns: 230px minmax(0, 1fr) 310px; } .gb-com-menu { display: flex; flex-direction: column; gap: 2px; padding: 18px 12px; border-right: 1px solid var(--gb-rand); background: var(--gb-paneel); overflow-y: auto; } .gb-com-menu-kop { padding: 0 12px 8px; font-size: 12px; font-weight: 600; color: var(--gb-tekst-dim); } .gb-com-menu-link { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 12px; border-radius: 10px; font-size: 15px; font-weight: 500; color: var(--gb-tekst); text-decoration: none; } .gb-com-menu-link svg { width: 20px; height: 20px; color: var(--gb-tekst-dim); } .gb-com-menu-link:hover { background: rgb(var(--gb-inkt) / 0.05); color: var(--gb-wit); } .gb-com-menu-link svg { flex: none; box-sizing: content-box; padding: 6px; border-radius: 9px; } .gb-com-menu-link[aria-current="page"] { color: var(--gb-wit); font-weight: 600; } .gb-com-menu-link[aria-current="page"] svg { background: var(--gb-accent-vol); color: var(--gb-op-accent); } .gb-com-menu-link[aria-current="page"]:hover { background: none; } .gb-com-midden { position: relative; min-width: 0; overflow: hidden; } .gb-com-deel { position: absolute; inset: 0; overflow-y: auto; padding: 18px 20px 30px; } .gb-com-deel > * { max-width: 720px; margin-left: auto; margin-right: auto; } #gb-com-media > *, #gb-com-vrienden > * { max-width: 1000px; } #gb-com-groepen > * { max-width: 860px; } #gb-com-overzicht { display: flex; flex-direction: column; gap: 14px; } #gb-com-overzicht > * { width: 100%; } .gb-avatar-rond { flex: none; width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: 50%; overflow: hidden; background: var(--gb-avatar-kleur, var(--gb-accent)); color: #FFFFFF; font-size: 13px; font-weight: 600; } .gb-avatar-rond img { width: 100%; height: 100%; object-fit: cover; } .gb-avatar-s { width: 26px; height: 26px; font-size: 10px; border: 2px solid var(--gb-paneel); margin-right: -8px; } .gb-avatar-m { width: 42px; height: 42px; font-size: 14px; } .gb-com-lijst { overflow: visible !important; padding: 0 !important; display: flex !important; flex-direction: column; gap: 14px; } .gb-post { display: flex; flex-direction: column; gap: 10px !important; padding: 16px !important; border-radius: 16px !important; border: 1px solid var(--gb-rand) !important; background: var(--gb-paneel) !important; box-shadow: var(--gb-kaart-schaduw); cursor: pointer; } .gb-post-kop { display: flex; align-items: center; gap: 12px; } .gb-post-wie { flex: 1; min-width: 0; display: flex; flex-direction: column; } .gb-post-wie .gb-post-auteur { font-size: 15px; color: var(--gb-wit); } .gb-post-wie small { font-size: 12px; color: var(--gb-tekst-dim); } .gb-post-beelden { display: grid; gap: 6px; border-radius: 12px; overflow: hidden; } .gb-post-beelden img { width: 100%; height: 100%; object-fit: cover; display: block; } .gb-post-beelden-1 { grid-template-columns: 1fr; } .gb-post-beelden-1 img { max-height: 420px; } .gb-post-beelden-2 { grid-template-columns: 1fr 1fr; height: 280px; } .gb-post-beelden-3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; height: 320px; } .gb-post-beelden-3 img:first-child { grid-row: 1 / span 2; } .gb-post-voet { flex-wrap: wrap; gap: 8px; padding-top: 10px; border-top: 1px solid var(--gb-rand); } .gb-post-stem { display: inline-flex; align-items: center; gap: 6px; } .gb-post-stem .gb-knop, .gb-post-open { display: inline-flex; align-items: center; gap: 6px; border-radius: 10px; } .gb-post-stem .gb-knop svg, .gb-post-open svg { width: 15px; height: 15px; } .gb-post-accurate[aria-pressed="true"] { color: var(--gb-plus); border-color: var(--gb-plus); } .gb-post-inaccurate[aria-pressed="true"] { color: var(--gb-min); border-color: var(--gb-min); } .gb-post-deel { margin-left: auto; width: 36px; height: 34px; padding: 0; display: grid; place-items: center; border: 0; } .gb-com-paneel { position: absolute; top: 0; right: 0; bottom: 0; z-index: 6; width: min(520px, 100%); box-shadow: -18px 0 40px rgba(0,0,0,0.25); } .gb-com-rechts { display: flex; flex-direction: column; gap: 14px; padding: 18px 16px; border-left: 1px solid var(--gb-rand); background: var(--gb-paneel); overflow-y: auto; } .gb-rechts-blok { display: flex; flex-direction: column; gap: 8px; } .gb-rechts-kop { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 600; color: var(--gb-tekst-dim); } .gb-mini-events { display: flex; flex-direction: column; gap: 4px; } .gb-mini-event { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; color: var(--gb-tekst); text-decoration: none; font-size: 14px; } .gb-mini-event:hover { background: rgb(var(--gb-inkt) / 0.05); } .gb-mini-event > span:nth-child(2) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--gb-wit); } .gb-mini-event small { font-size: 12px; color: var(--gb-tekst-dim); } .gb-mini-event > svg { width: 18px; height: 18px; color: var(--gb-accent); } .gb-mini-oog > svg { color: var(--gb-lijst-kleur, var(--gb-accent)); } .gb-persoon-lijst { display: flex; flex-direction: column; } .gb-persoon-rij { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--gb-rand); } .gb-persoon-rij:first-child { border-top: 0; } .gb-persoon-tekst { min-width: 0; display: flex; flex-direction: column; } .gb-persoon-tekst strong { font-size: 14px; color: var(--gb-wit); } .gb-persoon-tekst small { font-size: 12px; color: var(--gb-tekst-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gb-persoon-lijst-klein .gb-avatar-m { width: 36px; height: 36px; } .gb-vrienden-zoek { margin-bottom: 14px; } .gb-vrienden-rooster { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .gb-media-rooster { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; } .gb-media-tegel { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: rgb(var(--gb-inkt) / 0.06); } .gb-media-tegel img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s; } .gb-media-tegel:hover img { transform: scale(1.04); } .gb-media-onder { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; padding: 30px 12px 10px; text-align: left; color: #FFFFFF; background: linear-gradient(180deg, transparent, rgba(0,0,0,0.75)); } .gb-media-onder strong { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gb-media-onder small { font-size: 11px; opacity: 0.85; } .gb-com-wissel { display: flex; flex-wrap: wrap; gap: 6px; } .gb-com-wissel-knop { height: 34px; padding: 0 14px; border-radius: 17px; border: 1px solid var(--gb-rand); font-size: 14px; color: var(--gb-tekst); white-space: nowrap; } .gb-com-wissel-knop:hover { color: var(--gb-wit); border-color: rgb(var(--gb-inkt) / 0.25); } .gb-com-wissel-knop[aria-pressed="true"] { background: var(--gb-accent-vol); border-color: var(--gb-accent-vol); color: var(--gb-op-accent); font-weight: 600; } .gb-schrijver { gap: 10px; } .gb-schrijver-boven { display: flex; align-items: flex-start; gap: 12px; } .gb-schrijver-tekst { flex: 1; min-width: 0; min-height: 48px; max-height: 320px; padding: 12px 16px; border: 1px solid var(--gb-rand); border-radius: 14px; background: rgb(var(--gb-inkt) / 0.04); color: var(--gb-wit); font: inherit; font-size: 16px; line-height: 1.45; resize: none; outline: none; } .gb-schrijver-tekst:focus { border-color: var(--gb-accent); } .gb-schrijver-fotos:empty, .gb-schrijver-bijlagen:empty { display: none; } .gb-schrijver-balk { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding-top: 10px; border-top: 1px solid var(--gb-rand); } .gb-schrijver-knop { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border-radius: 10px; font-size: 13px; color: var(--gb-tekst); cursor: pointer; } .gb-schrijver-knop:hover { background: rgb(var(--gb-inkt) / 0.06); color: var(--gb-wit); } .gb-schrijver-knop:disabled { opacity: 0.4; cursor: default; } .gb-schrijver-knop svg { width: 18px; height: 18px; } .gb-schrijver-foto svg { color: var(--gb-groen); } .gb-schrijver-foto input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; } .gb-schrijver-foto[hidden] { display: none; } .gb-schrijver-knop[data-soort="article"] svg { color: var(--gb-blauw); } .gb-schrijver-knop[data-soort="event"] svg { color: var(--gb-rood); } .gb-schrijver-knop[data-soort="ticker"] svg { color: var(--gb-geel); } .gb-schrijver-knop[data-soort="release"] svg { color: var(--gb-paars); } .gb-schrijver-tel { margin-left: auto; font-size: 12px; color: var(--gb-tekst-dim); font-variant-numeric: tabular-nums; } .gb-schrijver-plaats { height: 36px; padding: 0 20px; border-radius: 18px; font-weight: 600; } .gb-schrijver-plaats:disabled { opacity: 0.45; cursor: default; } .gb-hechter { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--gb-rand); border-radius: 14px; background: var(--gb-paneel-hoog); } .gb-hechter[hidden] { display: none; } .gb-hechter-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; } .gb-hechter-tab { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 16px; font-size: 13px; color: var(--gb-tekst); } .gb-hechter-tab svg { width: 16px; height: 16px; } .gb-hechter-tab:hover { background: rgb(var(--gb-inkt) / 0.06); } .gb-hechter-tab[aria-pressed="true"] { background: var(--gb-accent-vol); color: var(--gb-op-accent); font-weight: 600; } .gb-hechter-kop .gb-item-sluit { margin-left: auto; } .gb-hechter-zoek, .gb-groep-zoek { flex: none; width: 100%; margin: 0; } .gb-hechter-rijen { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; } .gb-hechter-rij { cursor: pointer; } .gb-post-bijlagen { display: flex; flex-direction: column; gap: 8px; } .gb-bijlage { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 8px; border: 1px solid var(--gb-rand); border-radius: 12px; background: var(--gb-paneel); text-align: left; color: var(--gb-tekst); } button.gb-bijlage:hover { border-color: rgb(var(--gb-inkt) / 0.25); } .gb-bijlage-duim { position: relative; width: 56px; height: 48px; display: grid; place-items: center; border-radius: 8px; overflow: hidden; background: color-mix(in srgb, var(--gb-chip-kleur, var(--gb-blauw)) 20%, var(--gb-paneel-hoog)); color: var(--gb-chip-kleur, var(--gb-blauw)); } .gb-bijlage-duim svg { width: 22px; height: 22px; } .gb-bijlage-duim img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .gb-bijlage-tekst { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .gb-bijlage-soort { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--gb-chip-kleur, var(--gb-accent)); } .gb-bijlage-titel { font-size: 14px; font-weight: 500; color: var(--gb-wit); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .gb-bijlage-sub { font-size: 12px; color: var(--gb-tekst-dim); } .gb-bijlage-weg { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: var(--gb-tekst-dim); } .gb-bijlage-weg:hover { color: var(--gb-wit); background: rgb(var(--gb-inkt) / 0.08); } .gb-bijlage-weg svg { width: 14px; height: 14px; } .gb-post-regel { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; } .gb-post-groep { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--gb-accent); } .gb-post-groep svg { width: 13px; height: 13px; } .gb-post-groep:hover { text-decoration: underline; } .gb-post-titel { margin: 0; font-size: 16px; font-weight: 600; color: var(--gb-wit); line-height: 1.35; } .gb-post-tekst { margin: 0; font-size: 15px; line-height: 1.55; color: var(--gb-tekst); white-space: pre-wrap; overflow-wrap: anywhere; } .gb-groep-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .gb-groep-filters .gb-keuze { height: 36px; border-radius: 10px; } .gb-groep-inhoud { display: flex; flex-direction: column; gap: 14px; } .gb-groep-rooster { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; } .gb-groep-kaart { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 16px; border: 1px solid var(--gb-rand); background: var(--gb-paneel); cursor: pointer; } .gb-groep-kaart:hover { border-color: rgb(var(--gb-inkt) / 0.25); } .gb-groep-kop { display: flex; align-items: center; gap: 12px; } .gb-groep-ikoon { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--gb-groep-kleur, var(--gb-accent)) 18%, transparent); color: var(--gb-groep-kleur, var(--gb-accent)); } .gb-groep-ikoon svg { width: 22px; height: 22px; } .gb-groep-naamvak { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .gb-groep-naam { margin: 0; font-size: 16px; font-weight: 600; color: var(--gb-wit); } .gb-groep-naamvak small { font-size: 12px; color: var(--gb-tekst-dim); } .gb-groep-over { margin: 0; font-size: 14px; line-height: 1.5; color: var(--gb-tekst); } .gb-groep-chips { display: flex; flex-wrap: wrap; gap: 6px; } .gb-groep-chips:empty { display: none; } .gb-groep-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 13px; background: rgb(var(--gb-inkt) / 0.06); font-size: 12px; color: var(--gb-tekst); } .gb-groep-chip svg { width: 13px; height: 13px; color: var(--gb-groep-kleur, var(--gb-tekst-dim)); } .gb-groep-chip:hover { background: rgb(var(--gb-inkt) / 0.1); color: var(--gb-wit); } .gb-groep-chip-conflict { --gb-groep-kleur: var(--gb-rood); } .gb-groep-chip-military { --gb-groep-kleur: var(--gb-grijs); } .gb-groep-chip-infra { --gb-groep-kleur: var(--gb-geel); } .gb-groep-chip-politics { --gb-groep-kleur: var(--gb-paars); } .gb-groep-chip-economics { --gb-groep-kleur: var(--gb-geel); } .gb-groep-chip-logistics { --gb-groep-kleur: var(--gb-blauw); } .gb-groep-chip-environment { --gb-groep-kleur: var(--gb-oranje); } .gb-groep-chip-roads { --gb-groep-kleur: var(--gb-cyaan); } .gb-groep-held { gap: 10px; } .gb-groep-kaart-held, .gb-groep-kaart-held:hover { border: 0; padding: 0; background: none; cursor: default; } .gb-groep-wissel { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .gb-groep-wissel::-webkit-scrollbar { display: none; } .gb-groep-wissel-knop { flex: none; } .gb-media-bijlage { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 14px; border: 1px solid var(--gb-rand); background: rgb(var(--gb-inkt) / 0.03); } .gb-media-bijlage .gb-bijlage { border: 0; padding: 4px; background: none; } .gb-media-post { display: flex; align-items: center; gap: 6px; padding: 4px 6px; font-size: 12px; color: var(--gb-tekst-dim); text-align: left; min-width: 0; } .gb-media-post span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gb-media-post svg { width: 13px; height: 13px; flex: none; } .gb-media-post:hover { color: var(--gb-wit); } .gb-media-soorten { margin-bottom: 4px; } .gb-mini-groep > svg { color: var(--gb-accent); } .gb-kaart-vak .maplibregl-ctrl-bottom-right { bottom: 74px; } .gb-oog-open { position: absolute; z-index: 13; right: 12px; bottom: 14px; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: #F2F5F8; color: #0B1220; box-shadow: 0 6px 18px rgba(0,0,0,0.35); } .gb-oog-open:hover { background: #FFFFFF; } .gb-oog-open svg { width: 26px; height: 26px; stroke-width: 1.9; } .gb-oog-open[aria-expanded="true"] { background: var(--gb-accent); } .gb-oog-tel { position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--gb-accent); color: #11161E; font-size: 11px; font-weight: 600; line-height: 20px; text-align: center; } .gb-oog-tel[hidden] { display: none; } .gb-oog-open[aria-expanded="true"] .gb-oog-tel { background: #0B1220; color: #FFFFFF; } .gb-oog { position: absolute; z-index: 14; top: 52px; right: 12px; bottom: 76px; width: 380px; display: flex; flex-direction: column; border-radius: 16px; border: 1px solid var(--gb-glas-rand); background: var(--gb-glas); box-shadow: 0 6px 18px rgba(0,0,0,0.3); overflow: hidden; } .gb-oog[data-open="0"] { display: none; } .gb-oog-kop { display: flex; align-items: center; gap: 10px; padding: 14px 14px 10px; } .gb-oog-terug { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: var(--gb-tekst); } .gb-oog-terug svg { width: 16px; height: 16px; transform: rotate(180deg); } .gb-oog-terug:hover { background: rgb(var(--gb-inkt) / 0.06); color: var(--gb-wit); } .gb-oog-kop-ikoon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--gb-chip-kleur, var(--gb-accent)) 16%, transparent); color: var(--gb-chip-kleur, var(--gb-accent)); } .gb-oog-kop-ikoon svg { width: 20px; height: 20px; } .gb-oog-kop-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; } .gb-oog-kop-tekst strong { color: var(--gb-wit); font-size: 16px; } .gb-oog-kop-tekst small { color: var(--gb-tekst-dim); font-size: 12px; } .gb-oog-sluit { margin-left: auto; } .gb-oog-filters { display: flex; flex-direction: column; gap: 8px; padding: 0 14px 10px; border-bottom: 1px solid var(--gb-rand); } .gb-oog-zoek { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--gb-rand); background: rgb(var(--gb-inkt) / 0.04); color: var(--gb-tekst-dim); } .gb-oog-zoek svg { width: 16px; height: 16px; } .gb-oog-zoekveld { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--gb-wit); font-size: 14px; outline: none; } .gb-oog-keuzerij { display: flex; flex-wrap: wrap; gap: 6px; } .gb-oog-filter { flex: 1 1 140px; min-width: 0; height: 34px; border-radius: 10px; } .gb-oog-chip { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border-radius: 14px; border: 1px solid var(--gb-rand); font-size: 12px; color: var(--gb-tekst); white-space: nowrap; } .gb-oog-chip svg { width: 12px; height: 12px; } .gb-oog-chip[aria-pressed="true"] { background: var(--gb-accent-vol); border-color: var(--gb-accent-vol); color: var(--gb-op-accent); font-weight: 600; } .gb-oog-actief { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .gb-oog-actief .gb-oog-chip { background: rgb(var(--gb-inkt) / 0.06); border-color: transparent; } .gb-oog-tandwiel { margin-left: auto; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--gb-rand); color: var(--gb-tekst); } .gb-oog-tandwiel[aria-expanded="true"] { border-color: var(--gb-accent); color: var(--gb-accent); } .gb-oog-tandwiel svg { width: 16px; height: 16px; } .gb-oog-instellingen { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 12px; background: rgb(var(--gb-inkt) / 0.04); border: 1px solid var(--gb-rand); } .gb-oog-instellingen h4 { margin: 4px 0 0; font-size: 12px; font-weight: 600; color: var(--gb-tekst-dim); } .gb-oog-segment { display: flex; border: 1px solid var(--gb-rand); border-radius: 10px; overflow: hidden; } .gb-oog-segment button { flex: 1; height: 32px; font-size: 13px; color: var(--gb-tekst); } .gb-oog-segment button[aria-pressed="true"] { background: var(--gb-accent-vol); color: var(--gb-op-accent); font-weight: 600; } .gb-oog-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .gb-oog-chips .gb-oog-filter { flex: 1 1 160px; } .gb-oog-vinken { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; max-height: 180px; overflow-y: auto; } .gb-oog-telling { margin: 0; font-size: 12px; color: var(--gb-tekst-dim); } .gb-oog-rijen { flex: 1; min-height: 0; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 2px; } .gb-oog-groep { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; } .gb-oog-groep-kop { margin: 4px 8px 4px; font-size: 12px; font-weight: 600; color: var(--gb-tekst-dim); } .gb-oog-laag { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border-radius: 12px; text-align: left; color: var(--gb-wit); } .gb-oog-laag:hover { background: rgb(var(--gb-inkt) / 0.06); } .gb-oog-laag > svg:first-child { width: 22px; height: 22px; color: var(--gb-chip-kleur, var(--gb-wit)); } .gb-oog-laag-naam { flex: 1; min-width: 0; font-size: 15px; font-weight: 500; } .gb-oog-laag-tel { font-size: 12px; color: var(--gb-tekst-dim); font-variant-numeric: tabular-nums; } .gb-oog-pijl { width: 14px; height: 14px; color: var(--gb-tekst-dim); } .gb-oog-rij { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 8px; border-radius: 10px; text-align: left; color: var(--gb-tekst); } .gb-oog-rij:hover { background: rgb(var(--gb-inkt) / 0.06); } .gb-oog-rij-ikoon { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--gb-chip-kleur, var(--gb-blauw)) 16%, transparent); color: var(--gb-chip-kleur, var(--gb-blauw)); } .gb-oog-rij-ikoon svg { width: 18px; height: 18px; } .gb-oog-duim { flex: none; width: 64px; height: 42px; border-radius: 8px; overflow: hidden; background: rgb(var(--gb-inkt) / 0.08); } .gb-oog-duim img { width: 100%; height: 100%; object-fit: cover; display: block; } .gb-oog-rij-midden { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .gb-oog-rij-kop strong { display: block; color: var(--gb-wit); font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gb-oog-rij-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-size: 12px; color: var(--gb-tekst-dim); } .gb-oog-land { display: inline-flex; align-items: center; gap: 5px; } .gb-oog-land .gb-vlag { width: 16px; height: 11px; } .gb-oog-meer { align-self: center; margin: 8px 0; border-radius: 10px; } .gb-kaart-vak[data-oog="1"] .maplibregl-ctrl-bottom-right { right: 404px; } .gb-camscherm { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; background: #05080D; } .gb-camscherm-kop { display: flex; align-items: center; gap: 12px; padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px; color: #F2F5F8; } .gb-camscherm-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; } .gb-camscherm-tekst strong { font-size: 17px; } .gb-camscherm-tekst small { font-size: 13px; color: #A9B4C2; } .gb-camscherm-sluit { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,0.12); color: #FFFFFF; } .gb-camscherm-sluit svg { width: 20px; height: 20px; } .gb-camscherm .gb-item-camera { flex: 1; min-height: 0; margin: 0; border: 0; border-radius: 0; display: flex; flex-direction: column; background: #000; } .gb-camscherm .gb-item-camera-scherm { flex: 1; aspect-ratio: auto; } .gb-camscherm .gb-item-camera-onder { padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); } .gb-lezer-groepen { display: flex; flex-direction: column; gap: 6px; } .gb-lezer-groep { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--gb-rand); border-radius: 12px; color: var(--gb-tekst); text-decoration: none; } .gb-lezer-groep:hover { border-color: rgb(var(--gb-inkt) / 0.25); } .gb-lezer-groep > svg { width: 18px; height: 18px; color: var(--gb-accent); } .gb-lezer-groep-leeg { display: block; text-decoration: none; } .gb-foto-rij { display: flex; flex-wrap: wrap; gap: 8px; } .gb-foto-mini { position: relative; width: 84px; height: 84px; border-radius: 10px; background-size: cover; background-position: center; } .gb-foto-mini button { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: rgba(0,0,0,0.6); color: #FFFFFF; } .gb-foto-mini button svg { width: 14px; height: 14px; } .gb-foto-kies { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 64px; padding: 10px; border: 1px dashed var(--gb-rand); border-radius: 12px; color: var(--gb-tekst-dim); font-size: 14px; cursor: pointer; background-size: cover; background-position: center; } .gb-foto-kies:hover { border-color: var(--gb-accent); color: var(--gb-wit); } .gb-foto-kies input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .gb-foto-kies[hidden] { display: none; } .gb-foto-gezet { min-height: 140px; color: transparent; } @media (max-width: 900px) { .gb-top { gap: 10px; padding: 0 10px 0 12px; } .gb-klok { display: none; } .gb-merk-sub { display: none; } .gb-tab-knop { padding: 0 9px; gap: 6px; font-size: 13px; } .gb-tab-knop::after { left: 8px; right: 8px; } .gb-aarde-zoek { width: 190px; } .gb-zijbalk { position: absolute; right: 0; top: 0; bottom: 0; } .gb-zijbalk[data-open="1"] { width: 85%; } .gb-kpi { right: 12px; top: 52px; max-width: none; } .gb-kpi-tegel { min-width: 64px; padding: 4px 7px 3px; } .gb-venster { top: 12px; right: 12px; } .gb-legenda { display: none; } .gb-route { top: 108px; } .gb-land { width: 100%; } .gb-eco-filters, .gb-db-kop, .gb-db-rij-filters { flex-wrap: wrap; } .gb-eco-tel { margin-left: 0; width: 100%; } .gb-eco-vak { position: relative; grid-template-columns: 1fr; } .gb-eco-paneel { position: absolute; inset: 0; width: auto; border-left: 0; z-index: 5; } .gb-account-vak, .gb-kiezer-vak { width: 96vw; } .gb-landing-vak { padding: 20px 16px; } .gb-landing-naam { font-size: 24px; } } @media (max-width: 760px) { .gb-top { justify-content: space-between; gap: 8px; padding: 0 8px 0 12px; } .gb-tabs, .gb-klok, .gb-bel, .gb-avatar { display: none; } .gb-bediening .gb-aarde-zoek-open { display: grid; } .gb-bediening .gb-aarde-zoek-scheiding { display: block; } .gb-bediening .gb-aarde-zoek { display: none; } .gb-bediening[data-zoek="1"] { right: 12px; } .gb-bediening[data-zoek="1"] > :not(.gb-aarde-zoek):not(.gb-aarde-zoek-open) { display: none; } .gb-bediening[data-zoek="1"] .gb-aarde-zoek { display: flex; flex: 1; width: auto; } .gb-bediening[data-zoek="1"] .gb-aarde-zoek .gb-zoekbalk-lijst { width: auto; right: 0; } .gb-menu-knop, .gb-paneel-sluit { display: grid; } .gb-paneel-open { display: inline-flex; } .gb-kaart-vak .maplibregl-ctrl-bottom-right { bottom: 62px; } .gb-tab-earth { grid-template-columns: 1fr; } .gb-tab-earth, .gb-tab-earth:has(.gb-meng[data-open="1"]) { --gb-meng-b: 12px; } .gb-meng[data-open], .gb-zijbalk[data-open] { position: fixed; inset: 0; z-index: 60; width: 100%; border: 0; border-radius: 0; transition: none; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); } .gb-meng[data-open] { background: rgb(var(--gb-vlak) / 0.98); } .gb-meng[data-open="0"], .gb-zijbalk[data-open="0"] { display: none; } .gb-meng-klap, .gb-zijbalk-klap { display: none; } .gb-meng-kop { min-height: 64px; padding: 8px 10px 8px 18px; } .gb-meng-titel .gb-meng-naam { font-size: 18px; } .gb-meng-totaal { font-size: 14px; } .gb-meng-groep-klap { height: 54px; padding: 0 8px 0 14px; } .gb-meng-groep-naam { font-size: 17px; } .gb-meng-groep-tel { font-size: 14px; } .gb-meng-groep-schakel { height: 34px; padding: 0 14px; font-size: 13px; border-radius: 17px; } .gb-laag-knop { min-height: 60px; padding: 8px 10px; } .gb-laag-knop .gb-meng-naam { font-size: 16px; } .gb-laag-status { font-size: 13px; } .gb-laag-knop > svg { width: 38px; height: 38px; padding: 8px; } .gb-laag-schuif { width: 42px; height: 24px; border-radius: 12px; } .gb-laag-schuif::after { width: 18px; height: 18px; } .gb-laag-knop[aria-pressed="true"] .gb-laag-schuif::after { transform: translateX(18px); } .gb-meng-voet { padding: 12px; } .gb-meng-knop { height: 46px; font-size: 14px; } .gb-laag-keuze { margin-left: 60px; } .gb-laag-landen { margin-left: 60px; } .gb-laag-landen-knop, .gb-laag-landen-zoek { height: 40px; font-size: 14px; } .gb-laag-landen-rij { padding: 9px 4px; font-size: 15px; } .gb-laag-keuze button { height: 38px; font-size: 14px; } .gb-venster { top: 58px; right: auto; left: 12px; } .gb-kpi { top: 98px; } .gb-route { top: 98px; } .gb-oog { position: fixed; inset: 0; z-index: 66; width: 100%; border-radius: 0; border: 0; background: var(--gb-paneel); padding-top: env(safe-area-inset-top, 0px); transform: translateX(0); } .gb-oog[data-open="0"] { display: flex; transform: translateX(100%); visibility: hidden; } .gb-oog { transition: transform 0.22s ease, visibility 0.22s; } .gb-kaart-vak .maplibregl-ctrl-bottom-right { bottom: 76px; } .gb-kaart-vak[data-oog="1"] .maplibregl-ctrl-bottom-right { right: 12px; } } @media (max-width: 1200px) { .gb-eco-rooster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "hoofd hoofd" "markt markt" "trends volg" "agenda agenda"; } .gb-detail-rooster { grid-template-columns: 1fr; } } @media (max-width: 760px) { .gb-deelnav { display: none; } .gb-body[data-onder="1"] .gb-bottom { display: none; } .gb-body[data-onder="1"] { grid-template-rows: var(--gb-top) 1fr calc(64px + env(safe-area-inset-bottom, 0px)); } .gb-onder:not([hidden]) { display: grid; grid-template-columns: repeat(var(--gb-onder-n, 4), 1fr); position: relative; z-index: 40; grid-row: 3; padding: 4px 4px env(safe-area-inset-bottom, 0px); background: var(--gb-paneel); border-top: 1px solid var(--gb-rand); } .gb-onder-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 56px; border-radius: 12px; font-size: 11px; font-weight: 500; color: var(--gb-tekst-dim); text-decoration: none; } .gb-onder-link svg { width: 22px; height: 22px; } .gb-onder-link[aria-current="page"] { color: var(--gb-accent); } .gb-onder-link[aria-current="page"] svg { stroke-width: 2.1; } .gb-eco-strook { padding-left: 12px; } .gb-eco-strook-kop { display: none; } .gb-eco-deel { padding: 12px; } .gb-eco-rooster { display: flex; flex-direction: column; gap: 12px; } .gb-eco-samen, .gb-eco-mobiel { display: flex; } .gb-eco-markt, .gb-eco-trends, .gb-eco-volgkaart { display: none; } .gb-eco-mobiel { order: 3; } .gb-eco-agenda { order: 4; } .gb-eco-samen-kop { font-size: 13px; color: var(--gb-tekst-dim); } .gb-eco-samen-getal { font-size: 26px; font-weight: 700; color: var(--gb-wit); } .gb-grafiek-prijs strong { font-size: 20px; } .gb-instr-rij { grid-template-columns: 36px minmax(0, 1fr) 64px auto; gap: 10px; } .gb-instr-spark { width: 64px; } .gb-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gb-kaartje { padding: 14px; border-radius: 16px; } } @media (max-width: 760px) { .gb-news-deel { padding: 12px 12px 20px; } .gb-news-uitgelicht { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 10px; margin: 0 -12px 12px; padding: 0 12px; } .gb-news-uitgelicht::-webkit-scrollbar { display: none; } .gb-uitgelicht { flex: none; width: 78%; height: 210px; scroll-snap-align: start; } .gb-uitgelicht-groot .gb-uitgelicht-tekst strong, .gb-uitgelicht-tekst strong { font-size: 16px; } .gb-news .gb-news-lijst { grid-template-columns: 1fr; gap: 0; } .gb-news .gb-artikel { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 12px 0; border: 0; border-bottom: 1px solid var(--gb-rand); border-radius: 0; background: none; box-shadow: none; } .gb-beeld-duim { width: 96px; height: 96px; } .gb-news .gb-artikel-samenvatting, .gb-news .gb-artikel-cat, .gb-news .gb-artikel-land, .gb-artikel-lees { display: none; } .gb-news .gb-artikel-voet .gb-stem { transform: scale(0.9); transform-origin: left center; } .gb-news-lezer { position: fixed; inset: 0; z-index: 70; width: 100%; padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 32px; border: 0; } .gb-lezer-titel { font-size: 22px; } .gb-cat-rooster { grid-template-columns: 1fr 1fr; gap: 10px; } .gb-cat-tegel { min-height: 104px; } } @media (max-width: 1100px) { .gb-com-schil { grid-template-columns: 210px minmax(0, 1fr); } .gb-com-rechts { display: none; } } @media (max-width: 760px) { .gb-com-schil { grid-template-columns: 1fr; } .gb-com-menu { display: none; } .gb-com-deel { padding: 12px 12px 20px; } .gb-com-paneel { position: fixed; inset: 0; z-index: 70; width: 100%; padding-top: calc(12px + env(safe-area-inset-top, 0px)); } .gb-post { padding: 14px !important; border-radius: 14px !important; } .gb-schrijver-knop span { display: none; } .gb-schrijver-knop { padding: 0 9px; } .gb-groep-rooster { grid-template-columns: 1fr; } .gb-bijlage { grid-template-columns: 48px minmax(0, 1fr) auto; } .gb-bijlage-duim { width: 48px; height: 44px; } .gb-post-beelden-2 { height: 200px; } .gb-post-beelden-3 { height: 240px; } .gb-vrienden-rooster { grid-template-columns: 1fr; } .gb-media-rooster { grid-template-columns: 1fr 1fr; gap: 6px; } .gb-watch-binnen { padding: 12px; } .gb-alert-rij { grid-template-columns: 1fr; gap: 8px; } #gb-watch-overzicht .gb-watch { display: flex; flex-direction: column; } .gb-news-lezer .gb-item-sluit { display: none; } } @media (min-width: 761px) { .gb-lezer-terug { display: none; } } @media (max-width: 760px) { .gb-watch-lijsten { gap: 12px; padding: 14px 12px 24px; } .gb-watch-detail { padding: 12px 12px 24px; } .gb-watch-kop .gb-deel-titel { font-size: 22px; } .gb-watch-zoekvak { flex: 1 1 100%; max-width: none; } .gb-watch-balk .gb-keuze { flex: 1; max-width: none; } #gb-watch-nieuw { margin-left: 0; } .gb-watch-tabelkaart { background: none; border: 0; box-shadow: none; } .gb-watch-tabel, .gb-watch-tabel tbody { display: block; } .gb-watch-tabel thead { display: none; } .gb-watch-rij { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "naam naam" "gezond tel" "acties acties"; align-items: center; gap: 12px; margin-bottom: 10px; padding: 14px; background: var(--gb-paneel); border: 1px solid var(--gb-rand); border-radius: 16px; box-shadow: var(--gb-kaart-schaduw); } .gb-watch-tabel .gb-watch-rij td { display: block; padding: 0; border: 0; background: none; } .gb-watch-naamcel { grid-area: naam; } .gb-watch-gezondcel { grid-area: gezond; } .gb-watch-telcel { grid-area: tel; justify-self: end; } .gb-watch-tabel .gb-watch-rij .gb-watch-actiecel { grid-area: acties; padding-top: 10px; border-top: 1px solid var(--gb-rand); text-align: left; } .gb-watch-acties { display: flex; width: 100%; gap: 8px; } .gb-watch-acties button { min-width: 44px; height: 42px; } .gb-watch-acties .gb-watch-open { margin-left: auto; color: var(--gb-accent); } .gb-watch-tel-lijst { left: auto; right: 0; } .gb-watch-geen { display: block; } .gb-watch-geen td { display: block; background: var(--gb-paneel); border: 1px solid var(--gb-rand); border-radius: 16px; } .gb-watch-voet { justify-content: center; padding: 6px 0 0; border-top: 0; } .gb-pagina, .gb-pagina-stap { min-width: 38px; height: 38px; } .gb-watch-leeg, .gb-watch-gast { padding: 20px 16px; } .gb-kies-watch, .gb-wizard, .gb-watch-bewerkvak, .gb-watch-extra { width: 100vw; height: 100%; max-height: 100%; border: 0; border-radius: 0; padding: calc(12px + env(safe-area-inset-top, 0px)) 14px calc(14px + env(safe-area-inset-bottom, 0px)); } .gb-wizard-stapnaam { display: none; } .gb-wizard-stapje { justify-content: center; } .gb-wizard-vraag { font-size: 19px; } .gb-wizard-instrumenten { max-height: none; overflow: visible; } .gb-wizard-rooster { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gb-wizard-richting { min-height: 0; padding: 14px; } .gb-wizard-richting strong { font-size: 19px; } .gb-wizard-richting small { font-size: 13px; } .gb-wizard-naam { min-width: 0; } .gb-wizard .gb-segment, .gb-watch-bewerkdoel .gb-segment { display: flex; width: 100%; } .gb-wizard .gb-segment button, .gb-watch-bewerkdoel .gb-segment button { flex: 1; padding: 0 6px; } .gb-watch-bewerkdoel { grid-template-columns: 1fr; } .gb-watch-bewerkdoel .gb-veld { align-items: stretch; } .gb-kies-nieuwvorm .gb-veld { width: 100%; } .gb-kies-nieuwnaam, .gb-kies-nieuwinstrument { width: 100%; max-width: none; } } .gb-wd { display: flex; flex-direction: column; gap: 18px; width: 100%; min-width: 0; max-width: 1600px; margin: 0 auto; padding: 0 0 8px; contain: inline-size; } .gb-wd-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .gb-wd-koplinks { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 16px; min-width: 0; } .gb-wd-koplinks .gb-terug { margin-bottom: 0; padding-right: 16px; border-right: 1px solid var(--gb-rand); white-space: nowrap; } .gb-wd-koplinks .gb-wd-doel { grid-column: 1 / -1; justify-self: start; } .gb-wd-koplinks .gb-terug svg { width: 16px; height: 16px; } .gb-wd-titel { display: flex; align-items: center; gap: 12px; max-width: 100%; margin: 0; font-size: 26px; font-weight: 700; line-height: 1.2; color: var(--gb-wit); } .gb-wd-titelnaam { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gb-wd-stip { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--gb-accent); box-shadow: 0 0 0 4px rgb(var(--gb-inkt) / 0.07); } .gb-wd-doel { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; height: 30px; padding: 0 12px; border: 1px solid var(--gb-rand); border-radius: 15px; background: var(--gb-paneel); font-size: 13px; font-weight: 500; color: var(--gb-tekst); } .gb-wd-doel span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gb-wd-doel svg { width: 15px; height: 15px; color: var(--gb-accent); } .gb-wd-doel[data-richting="short"] svg { color: var(--gb-min); } .gb-wd-doel[data-richting="long"] svg { color: var(--gb-plus); } .gb-wd-koprechts { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .gb-wd-score { display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border: 1px solid var(--gb-rand); border-radius: 14px; background: var(--gb-paneel); box-shadow: var(--gb-kaart-schaduw); } .gb-wd-scoregetal { display: grid; place-items: center; min-width: 50px; height: 44px; padding: 0 8px; border-radius: 10px; background: rgb(var(--gb-inkt) / 0.06); font-size: 24px; font-weight: 700; line-height: 1; color: var(--gb-wit); font-variant-numeric: tabular-nums; } .gb-wd-score-good .gb-wd-scoregetal { color: var(--gb-plus); background: color-mix(in srgb, var(--gb-plus) 14%, transparent); } .gb-wd-score-bad .gb-wd-scoregetal { color: var(--gb-min); background: color-mix(in srgb, var(--gb-min) 14%, transparent); } .gb-wd-scoretekst { display: flex; flex-direction: column; line-height: 1.3; } .gb-wd-scorewoord { font-size: 14px; font-weight: 600; color: var(--gb-wit); } .gb-wd-scoresub { font-size: 12px; color: var(--gb-tekst-dim); font-variant-numeric: tabular-nums; } .gb-wd-knoppen { display: flex; flex-wrap: wrap; gap: 8px; } .gb-wd-knoppen .gb-knop, .gb-wd-knoppen .gb-watch-bewerk { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: auto; min-width: 0; height: 36px; padding: 0 14px; border: 1px solid var(--gb-rand); border-radius: 10px; background: var(--gb-paneel); color: var(--gb-tekst); font-size: 13px; font-weight: 500; white-space: nowrap; } .gb-wd-knoppen .gb-knop:hover, .gb-wd-knoppen .gb-watch-bewerk:hover { border-color: var(--gb-tekst-dim); color: var(--gb-wit); } .gb-wd-knoppen .gb-knop-accent { border-color: var(--gb-accent-vol); background: var(--gb-accent-vol); color: var(--gb-op-accent); font-weight: 600; } .gb-wd-knoppen .gb-knop-accent:hover { border-color: var(--gb-accent-vol-hoog); color: var(--gb-op-accent); background: var(--gb-accent-vol-hoog); } .gb-wd-knoppen svg { width: 16px; height: 16px; } .gb-wd-rooster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-areas: "bol bol bol bol gezond gezond gezond gezond bronnen bronnen bronnen bronnen" "movers movers movers movers koers koers koers koers activiteit activiteit activiteit activiteit"; gap: 16px; align-items: stretch; } .gb-wd-bol { grid-area: bol; } .gb-wd-gezond { grid-area: gezond; } .gb-wd-movers { grid-area: movers; } .gb-wd-bronnen { grid-area: bronnen; } .gb-wd-koers { grid-area: koers; } .gb-wd-deel { display: flex; flex-direction: column; gap: 8px; min-height: 0; padding-top: 12px; border-top: 1px solid var(--gb-rand); } .gb-wd-deeltitel { margin: 0; font-size: 14px; font-weight: 600; color: var(--gb-wit); } .gb-wd-bronnen > .gb-wd-lijf { flex: none; } .gb-wd-bronnen .gb-wd-recent { flex: 1; } .gb-wd-recent .gb-wd-lijf { min-height: 0; } .gb-wd-activiteit { grid-area: activiteit; } .gb-wd-rooster > .gb-kaartje { gap: 12px; padding: 18px; border-radius: 16px; } .gb-wd-rooster .gb-kaartje-kop { align-items: flex-start; flex-wrap: wrap; } .gb-wd-kaartkop { min-width: 0; } .gb-wd-kaartsub { margin: 3px 0 0; font-size: 12px; color: var(--gb-tekst-dim); } .gb-wd-kopacties { display: flex; align-items: center; gap: 8px; margin-left: auto; } .gb-wd-kopacties .gb-segment button { height: 28px; padding: 0 10px; font-size: 12px; } .gb-wd-kopacties .gb-knop-klein { border-radius: 8px; } .gb-wd-kopacties .gb-knop-klein svg { width: 15px; height: 15px; } .gb-wd-lijf { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; } .gb-wd-skelet { display: flex; flex-direction: column; gap: 8px; padding: 6px 0; } .gb-wd-skelet-balk { display: block; height: 12px; border-radius: 6px; background: rgb(var(--gb-inkt) / 0.07); } .gb-wd-skelet-balk:nth-child(1) { width: 72%; } .gb-wd-skelet-balk:nth-child(2) { width: 92%; } .gb-wd-skelet-balk:nth-child(3) { width: 48%; } .gb-wd-laad { margin: 2px 0 0; font-size: 12px; color: var(--gb-tekst-dim); } .gb-wd-leeg { margin: 0; padding: 12px 0; font-size: 13px; line-height: 1.5; color: var(--gb-tekst-dim); } .gb-wd-fout { margin: 0; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--gb-min) 10%, transparent); font-size: 13px; color: var(--gb-min); } .gb-wd-opnieuw { align-self: flex-start; border-radius: 8px; } .gb-wd-opnieuw svg { width: 14px; height: 14px; } .gb-wd-gezondkop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .gb-wd-gezondgetal { font-size: 34px; font-weight: 700; line-height: 1; color: var(--gb-wit); font-variant-numeric: tabular-nums; } .gb-wd-gezondkop .gb-pil { min-width: 0; } .gb-wd-gezondwoord { flex-basis: 100%; font-size: 12px; color: var(--gb-tekst-dim); } .gb-wd-grafiekvak { position: relative; min-height: 190px; } .gb-wd-grafiek { display: block; width: 100%; height: auto; fill: none; stroke: none; overflow: visible; touch-action: pan-y; cursor: crosshair; } .gb-wd-raster line { stroke: rgb(var(--gb-inkt) / 0.07); stroke-width: 1; } .gb-wd-as { fill: var(--gb-tekst-dim); stroke: none; font-family: var(--gb-letter); font-size: 11px; font-variant-numeric: tabular-nums; } .gb-wd-midden { stroke: var(--gb-tekst-dim); stroke-width: 1; stroke-dasharray: 2 4; opacity: 0.8; } .gb-wd-vlak { stroke: none; } .gb-wd-lijn { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .gb-wd-trend { fill: none; stroke: var(--gb-wit); stroke-width: 1.4; stroke-dasharray: 6 5; opacity: 0.45; } .gb-wd-koerslijn { fill: none; stroke: var(--gb-tekst-dim); stroke-width: 1.2; opacity: 0.55; } .gb-wd-stop-op { stop-color: var(--gb-plus); } .gb-wd-stop-neer { stop-color: var(--gb-min); } .gb-wd-bubbel rect { fill: var(--gb-plus); stroke: none; } .gb-wd-bubbel.gb-neer rect { fill: var(--gb-min); } .gb-wd-bubbel text { fill: #FFFFFF; stroke: none; font-family: var(--gb-letter); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; } .gb-wd-bubbel circle { fill: var(--gb-paneel); stroke: var(--gb-plus); stroke-width: 2.5; } .gb-wd-bubbel.gb-neer circle { stroke: var(--gb-min); } .gb-wd-wijzer line { stroke: var(--gb-tekst-dim); stroke-width: 1; stroke-dasharray: 3 3; } .gb-wd-wijzer circle { fill: var(--gb-paneel); stroke: var(--gb-wit); stroke-width: 2; } .gb-wd-lees { display: flex; flex-wrap: wrap; gap: 4px 14px; min-height: 18px; font-size: 12px; color: var(--gb-tekst-dim); font-variant-numeric: tabular-nums; } .gb-wd-leesdag { font-weight: 600; color: var(--gb-wit); } .gb-wd-leesscore.gb-op { color: var(--gb-plus); } .gb-wd-leesscore.gb-neer { color: var(--gb-min); } .gb-wd-sleutel { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--gb-tekst-dim); } .gb-wd-sleutel span { display: inline-flex; align-items: center; gap: 6px; } .gb-wd-sleutel span::before { content: ""; width: 16px; height: 0; border-top: 2px solid var(--gb-tekst-dim); } .gb-wd-sleutel .gb-wd-sleutel-lijn::before { height: 3px; border-top: 0; border-radius: 2px; background: linear-gradient(90deg, var(--gb-plus) 50%, var(--gb-min) 50%); } .gb-wd-sleutel .gb-wd-sleutel-trend::before { border-top-style: dashed; } .gb-wd-sleutel .gb-wd-sleutel-koers::before { border-top-width: 1px; opacity: 0.7; } .gb-wd-noot { margin: 0; font-size: 11px; line-height: 1.4; color: var(--gb-tekst-dim); } .gb-wd-geendoel { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px; border: 1px dashed var(--gb-rand); border-radius: 12px; background: rgb(var(--gb-inkt) / 0.03); } .gb-wd-geendoel-ikoon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: color-mix(in srgb, var(--gb-accent) 14%, transparent); color: var(--gb-accent); } .gb-wd-geendoel-ikoon svg { width: 20px; height: 20px; } .gb-wd-geendoel-tekst { margin: 0; font-size: 14px; line-height: 1.5; color: var(--gb-tekst); } .gb-wd-doelknop { height: 36px; border-radius: 10px; } .gb-wd-doelknop svg { width: 16px; height: 16px; } .gb-wd-moverlijst { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; } .gb-wd-mover { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-radius: 12px; cursor: pointer; } .gb-wd-mover + .gb-wd-mover { border-top: 1px solid var(--gb-rand); } .gb-wd-mover:hover, .gb-wd-mover:focus-visible { background: rgb(var(--gb-inkt) / 0.04); outline: none; } .gb-wd-mover-ikoon, .gb-wd-item-ikoon, .gb-wd-tabel-ikoon, .gb-wd-feedstip { display: grid; place-items: center; flex: none; background: none; border: 0; box-shadow: none; color: var(--gb-wit); } .gb-wd-mover-ikoon { width: 38px; height: 38px; border-radius: 12px; } .gb-wd-mover-midden { flex: 1 1 0; display: flex; flex-direction: column; gap: 2px; width: 0; min-width: 0; } .gb-wd-mover-midden strong { overflow: hidden; font-size: 14px; font-weight: 600; color: var(--gb-wit); text-overflow: ellipsis; white-space: nowrap; } .gb-wd-mover-midden small { overflow: hidden; font-size: 12px; color: var(--gb-tekst-dim); text-overflow: ellipsis; white-space: nowrap; } .gb-wd-komend { display: inline-flex; align-items: center; flex: none; height: 22px; padding: 0 8px; border: 1px solid color-mix(in srgb, var(--gb-accent) 45%, transparent); border-radius: 11px; font-size: 11px; font-weight: 600; color: var(--gb-accent); white-space: nowrap; } .gb-wd-mover .gb-pil { flex: none; min-width: 58px; } .gb-wd-pilstil { background: rgb(var(--gb-inkt) / 0.06); color: var(--gb-tekst-dim); } .gb-wd-moverleeg { padding: 14px 6px; font-size: 13px; line-height: 1.5; color: var(--gb-tekst-dim); } .gb-wd .gb-laag-krant { --gb-chip-kleur: var(--gb-paars); } .gb-wd-tab-earth { --gb-wd-kleur: var(--gb-blauw); } .gb-wd-tab-news { --gb-wd-kleur: var(--gb-paars); } .gb-wd-tab-economic { --gb-wd-kleur: var(--gb-geel); } .gb-wd-tab-topics { --gb-wd-kleur: var(--gb-cyaan); } .gb-wd-bronnenrij { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .gb-wd-donut { display: block; flex: none; width: 168px; height: 168px; fill: none; stroke: none; overflow: visible; } .gb-wd-taart { fill: none; stroke: var(--gb-wd-kleur); stroke-width: 22; stroke-linecap: butt; cursor: pointer; transition: stroke-width 0.15s; } .gb-wd-taart[data-gloed="1"] { stroke-width: 26; } .gb-wd-taart-gloed { fill: none; stroke: var(--gb-wd-kleur); stroke-width: 40; stroke-linecap: butt; opacity: 0; pointer-events: none; transition: opacity 0.15s; } .gb-wd-taart-gloed[data-gloed="1"] { opacity: 0.24; } .gb-wd-taart-leeg { fill: none; stroke: rgb(var(--gb-inkt) / 0.08); stroke-width: 22; } .gb-wd-donut-label { fill: var(--gb-tekst-dim); stroke: none; font-family: var(--gb-letter); font-size: 13px; } .gb-wd-donut-tal { fill: var(--gb-wit); stroke: none; font-family: var(--gb-letter); font-size: 32px; font-weight: 700; font-variant-numeric: tabular-nums; } .gb-wd-legenda { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 180px; margin: 0; padding: 0; list-style: none; } .gb-wd-legenda-knop { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 40px; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 10px; font-size: 13px; color: var(--gb-tekst); text-align: left; } .gb-wd-legenda-knop:hover, .gb-wd-legenda-knop[data-gloed="1"] { background: rgb(var(--gb-inkt) / 0.05); } .gb-wd-legenda-knop[aria-expanded="true"] { background: color-mix(in srgb, var(--gb-wd-kleur) 13%, transparent); } .gb-wd-legenda-knop:focus-visible { outline: 2px solid var(--gb-wd-kleur); outline-offset: 1px; } .gb-wd-legenda-stip { width: 10px; height: 10px; border-radius: 50%; background: var(--gb-wd-kleur); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gb-wd-kleur) 22%, transparent); } .gb-wd-legenda-naam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gb-wd-legenda-tal { color: var(--gb-wit); font-variant-numeric: tabular-nums; } .gb-wd-legenda-pct { color: var(--gb-tekst-dim); text-align: right; font-variant-numeric: tabular-nums; } .gb-wd-itemvak:empty { display: none; } .gb-wd-itemlijst { display: flex; flex-direction: column; gap: 0; max-height: 320px; overflow-y: auto; padding: 8px 12px; border: 1px solid var(--gb-rand); border-radius: 10px; background: var(--gb-paneel); } .gb-wd-itemlijst-kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px 6px; font-size: 13px; color: var(--gb-wit); } .gb-wd-itemlijst-sluit { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--gb-tekst-dim); } .gb-wd-itemlijst-sluit:hover { background: rgb(var(--gb-inkt) / 0.06); color: var(--gb-wit); } .gb-wd-itemlijst-sluit svg { width: 15px; height: 15px; } .gb-wd-item { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-radius: 8px; } .gb-wd-item + .gb-wd-item { border-top: 1px solid var(--gb-rand); } .gb-wd-item-ikoon { width: 30px; height: 30px; border-radius: 9px; } .gb-wd-item-ikoon svg { width: 16px; height: 16px; } .gb-wd-item-midden { flex: 1 1 0; display: flex; flex-direction: column; width: 0; min-width: 0; } .gb-wd-item-midden strong { overflow: hidden; font-size: 13px; font-weight: 600; color: var(--gb-wit); text-overflow: ellipsis; white-space: nowrap; } .gb-wd-item-midden small { font-size: 11px; color: var(--gb-tekst-dim); } .gb-wd-item-tel { font-size: 12px; color: var(--gb-tekst-dim); white-space: nowrap; font-variant-numeric: tabular-nums; } .gb-wd-item-weg { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 8px; color: var(--gb-tekst-dim); } .gb-wd-item-weg:hover { background: color-mix(in srgb, var(--gb-min) 12%, transparent); color: var(--gb-min); } .gb-wd-item-weg:disabled { opacity: 0.4; cursor: default; } .gb-wd-item-weg svg { width: 16px; height: 16px; } .gb-wd-koers-kop { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .gb-wd-koers-nu { font-size: 30px; font-weight: 700; line-height: 1.1; color: var(--gb-wit); font-variant-numeric: tabular-nums; } .gb-wd-koers-munt { margin-right: 4px; font-size: 12px; color: var(--gb-tekst-dim); } .gb-wd-koers-kop .gb-pil { min-width: 0; } .gb-wd-stavenvak { min-height: 150px; } .gb-wd-staven { display: block; width: 100%; height: auto; fill: none; stroke: none; overflow: visible; } .gb-wd-staaf { fill: rgb(var(--gb-inkt) / 0.12); stroke: none; transition: fill 0.15s; } .gb-wd-staaf:hover { fill: rgb(var(--gb-inkt) / 0.22); } .gb-wd-staaf-nu, .gb-wd-staaf-nu:hover { fill: var(--gb-accent); } .gb-wd-instaplijn { stroke: var(--gb-wit); stroke-width: 1.4; stroke-dasharray: 5 4; opacity: 0.75; } .gb-wd-instaplabel rect { fill: var(--gb-paneel); stroke: var(--gb-rand); stroke-width: 1; } .gb-wd-instaplabel text { fill: var(--gb-wit); stroke: none; font-family: var(--gb-letter); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; } .gb-wd-koers-regels { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid var(--gb-rand); } .gb-wd-koers-regel { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--gb-tekst-dim); } .gb-wd-koers-regel strong { color: var(--gb-wit); font-variant-numeric: tabular-nums; } .gb-wd-koers-regel .gb-pil { min-width: 0; height: 22px; } .gb-wd-tabelvak { overflow-x: auto; } .gb-wd-tabel { table-layout: fixed; } .gb-wd-tabel th { padding: 6px; font-size: 12px; white-space: nowrap; } .gb-wd-tabel td { padding: 8px 6px; vertical-align: middle; } .gb-wd-tabel th:nth-child(1) { width: 52px; } .gb-wd-tabel th:nth-child(3) { width: 74px; } .gb-wd-tabel th:nth-child(4) { width: 46px; } .gb-wd-tabel th:nth-child(5) { width: 58px; } .gb-wd-tabel-itemrij { display: flex; align-items: center; gap: 8px; min-width: 0; } .gb-wd-tabel-titel { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; color: var(--gb-wit); } .gb-wd-tabel th:first-child, .gb-wd-tabel td:first-child { padding-left: 0; } .gb-wd-tabel th:last-child, .gb-wd-tabel td:last-child { padding-right: 0; text-align: right; } .gb-wd-tabel tr:last-child td { border-bottom: 0; } .gb-wd-rij { cursor: pointer; } .gb-wd-rij:hover td, .gb-wd-rij:focus-visible td { background: rgb(var(--gb-inkt) / 0.04); } .gb-wd-rij:focus-visible { outline: none; } .gb-wd-tabel-tijd { color: var(--gb-tekst-dim); white-space: nowrap; font-variant-numeric: tabular-nums; } .gb-wd-tabel-ikoon { width: 24px; height: 24px; border-radius: 7px; } .gb-wd-tabel-ikoon svg { width: 14px; height: 14px; } .gb-wd-scoregetal svg { width: 22px; height: 22px; color: var(--gb-tekst-dim); } .gb-wd-tabel-tab, .gb-wd-tabel-land { overflow: hidden; color: var(--gb-tekst-dim); text-overflow: ellipsis; white-space: nowrap; } .gb-wd-tabel .gb-pil { min-width: 0; width: 100%; max-width: 56px; height: 22px; padding: 0 4px; font-size: 11px; } .gb-wd-feed { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; } .gb-wd-feedrij { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; } .gb-wd-feedrij:not(:last-child)::after { content: ""; position: absolute; top: 40px; bottom: -4px; left: 14px; width: 1px; background: var(--gb-rand); } .gb-wd-feedstip { width: 28px; height: 28px; border-radius: 50%; } .gb-wd-feedstip svg { width: 14px; height: 14px; } .gb-wd-feedmidden { flex: 1 1 0; display: flex; flex-direction: column; gap: 1px; width: 0; min-width: 0; } .gb-wd-feedtekst { font-size: 13px; line-height: 1.35; color: var(--gb-wit); } .gb-wd-feedsoort { font-size: 11px; color: var(--gb-tekst-dim); } .gb-wd-feedtijd { flex: none; padding-top: 2px; font-size: 11px; color: var(--gb-tekst-dim); white-space: nowrap; } .gb-wd-feedrij[data-soort="komend"] .gb-wd-feedtijd { color: var(--gb-accent); } .gb-wd-bol .gb-wd-lijf { flex: 1; } .gb-wd-bol-keuze { max-width: 170px; height: 32px; border-radius: 8px; font-size: 13px; } .gb-wd-bol-vak { position: relative; flex: 1; min-height: 360px; overflow: hidden; border-radius: 12px; background: var(--gb-ruimte); } .gb-wd-bolkaart { border-radius: 12px; } .gb-wd-bol .maplibregl-ctrl { display: none; } .gb-wd-bol .maplibregl-canvas { outline: none; } .gb-wd-bol-filters { position: absolute; z-index: 3; top: 10px; right: 10px; left: 10px; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; } .gb-wd-filter { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 8px; border: 1px solid var(--gb-rand); border-radius: 14px; background: rgb(var(--gb-vlak) / 0.9); font-size: 12px; color: var(--gb-wit); white-space: nowrap; pointer-events: auto; } .gb-wd-filter svg { width: 14px; height: 14px; color: var(--gb-chip-kleur, var(--gb-accent)); } .gb-wd-filter-tal { font-weight: 600; color: var(--gb-tekst-dim); font-variant-numeric: tabular-nums; } .gb-wd-filter[aria-pressed="true"] { border-color: color-mix(in srgb, var(--gb-chip-kleur, var(--gb-accent)) 60%, transparent); } .gb-wd-filter[aria-pressed="false"] { opacity: 0.55; } .gb-wd-filter-uit { opacity: 0.6; cursor: default; } .gb-wd-bol-melding { margin: 0; padding: 6px 10px; border: 1px solid var(--gb-rand); border-radius: 10px; background: rgb(var(--gb-vlak) / 0.9); font-size: 12px; color: var(--gb-tekst); pointer-events: auto; } .gb-wd-bol-doel { position: absolute; z-index: 3; bottom: 10px; left: 10px; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 20px); padding: 8px 12px; border: 1px solid var(--gb-rand); border-radius: 12px; background: rgb(var(--gb-vlak) / 0.9); pointer-events: none; } .gb-wd-bol-doellabel { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gb-accent); } .gb-wd-bol-doeltekst { overflow: hidden; font-size: 13px; color: var(--gb-wit); text-overflow: ellipsis; white-space: nowrap; } .gb-wd-bol-doel .gb-pil { flex: none; min-width: 0; height: 22px; } @media (min-width: 1201px) { .gb-wd-gezond, .gb-wd-bronnen { contain: size; overflow: hidden; } .gb-wd-gezond > .gb-wd-lijf { min-height: 0; overflow-y: auto; } .gb-wd-bronnen .gb-wd-recent .gb-wd-lijf { flex: 1; overflow-y: auto; } } @media (max-width: 1200px) { .gb-wd-rooster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "gezond bronnen" "bol bol" "movers koers" "activiteit activiteit"; } } @media (max-width: 760px) { .gb-wd { gap: 12px; padding: 0 0 8px; } .gb-wd-kop { align-items: stretch; } .gb-wd-titel { font-size: 22px; } .gb-wd-koprechts { width: 100%; } .gb-wd-score { width: 100%; } .gb-wd-knoppen { width: 100%; } .gb-wd-knoppen .gb-knop, .gb-wd-knoppen .gb-watch-bewerk { flex: 1 1 auto; } .gb-wd-rooster { display: flex; flex-direction: column; gap: 12px; } .gb-wd-gezond { order: 1; } .gb-wd-movers { order: 2; } .gb-wd-bronnen { order: 3; } .gb-wd-bol { order: 4; } .gb-wd-koers { order: 5; } .gb-wd-activiteit { order: 7; } .gb-wd-rooster > .gb-kaartje { padding: 14px; } .gb-wd-bol-vak { min-height: 300px; } .gb-wd-bol .gb-wd-bolkaart, .gb-wd-bol .gb-wd-bolkaart .maplibregl-canvas-container, .gb-wd-bol .gb-wd-bolkaart .maplibregl-canvas { touch-action: pan-y; } .gb-wd-bronnenrij { flex-direction: column; align-items: stretch; } .gb-wd-donut { align-self: center; } .gb-wd-mover { gap: 10px; padding: 10px 2px; } .gb-wd-mover-ikoon { width: 34px; height: 34px; border-radius: 10px; } .gb-wd-gezondgetal, .gb-wd-koers-nu { font-size: 28px; } .gb-wd-tabel th:nth-child(3), .gb-wd-tabel-tab { display: none; } .gb-wd-filter { height: 26px; padding: 0 8px 0 7px; } .gb-wd-filter-naam { display: none; } } .gb-body[data-focus="watch"] { grid-template-rows: 1fr var(--gb-bottom); } .gb-body[data-focus="watch"] .gb-top, .gb-body[data-focus="watch"] .gb-deelnav, .gb-body[data-focus="watch"] .gb-onder { display: none; } .gb-body[data-focus="watch"] .gb-watch-detail { padding-top: calc(18px + env(safe-area-inset-top, 0px)); padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px)); } .gb-wd-recent .gb-wd-tabel th:nth-child(3), .gb-wd-recent .gb-wd-tabel-tab { display: none; } .gb-wd-recent .gb-wd-tabel th:nth-child(1) { width: 56px; } .gb-wd-draai { perspective: 2400px; } .gb-wd-blad { transform-origin: 50% 30%; transition: transform 0.26s ease-out, opacity 0.26s ease-out; } .gb-wd-blad-weg { transform: rotateY(90deg); opacity: 0.35; transition-timing-function: ease-in; } .gb-wd-blad-terug { transform: rotateY(-90deg); opacity: 0.35; transition: none; } .gb-wd-voorkant[hidden], .gb-wd-achterkant[hidden] { display: none; } .gb-wd-achterkant { display: flex; flex-direction: column; gap: 16px; } .gb-wd-achterkant > .gb-kaartje { gap: 14px; padding: 18px; border-radius: 16px; } .gb-wd-achterkant .gb-kaartje-kop { align-items: flex-start; flex-wrap: wrap; } .gb-wd-draaiknop svg { transition: transform 0.26s ease-out; } .gb-wd[data-kant="achter"] .gb-wd-draaiknop svg { transform: rotate(180deg); } .gb-wd-doelvorm { display: flex; flex-direction: column; gap: 14px; padding: 14px; border: 1px solid var(--gb-rand); border-radius: 12px; background: var(--gb-paneel-hoog); } .gb-wd-doelvelden { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 18px; } .gb-wd-doeldelen { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 18px; } .gb-wd-doeldelen[hidden] { display: none; } .gb-wd-doelvorm .gb-keuze { height: 36px; max-width: 280px; border-radius: 10px; } .gb-wd-doelvorm .gb-invoer { height: 36px; border-radius: 10px; } .gb-wd-doelvorm .gb-segment button { height: 30px; padding: 0 12px; } .gb-wd-doelvoet { display: flex; align-items: center; justify-content: flex-end; gap: 12px; } .gb-wd-doelvoet .gb-vorm-fout { margin: 0 auto 0 0; } .gb-wd-doelbewaar { height: 36px; padding: 0 18px; border-radius: 10px; border-color: var(--gb-accent-vol); background: var(--gb-accent-vol); color: var(--gb-op-accent); font-weight: 600; } .gb-wd-doelbewaar:hover { color: var(--gb-op-accent); border-color: var(--gb-accent-vol-hoog); background: var(--gb-accent-vol-hoog); } .gb-wd-itemfilters { display: flex; flex-wrap: wrap; gap: 8px; } .gb-wd-itemfilter { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border: 1px solid var(--gb-rand); border-radius: 16px; font-size: 13px; color: var(--gb-tekst); } .gb-wd-itemfilter::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gb-wd-kleur, var(--gb-accent)); } .gb-wd-itemfilter strong { font-size: 12px; color: var(--gb-tekst-dim); font-variant-numeric: tabular-nums; } .gb-wd-itemfilter[aria-pressed="true"] { border-color: var(--gb-wd-kleur, var(--gb-accent)); background: color-mix(in srgb, var(--gb-wd-kleur, var(--gb-accent)) 14%, transparent); color: var(--gb-wit); } .gb-wd-itemrijen { display: flex; flex-direction: column; min-width: 0; } .gb-wd-itemrij { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) 70px 100px 84px minmax(0, 1fr) 40px; align-items: center; gap: 12px; padding: 10px 8px; border-left: 3px solid var(--gb-wd-kleur, transparent); } .gb-wd-itemrij + .gb-wd-itemrij { border-top: 1px solid var(--gb-rand); } .gb-wd-itemrij:not(.gb-wd-itemkop):hover { background: rgb(var(--gb-inkt) / 0.03); } .gb-wd-itemkop { padding-top: 0; border-left-color: transparent; font-size: 12px; color: var(--gb-tekst-dim); } .gb-wd-itemcel { min-width: 0; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; color: var(--gb-tekst); } .gb-wd-itemkop .gb-wd-itemcel { color: var(--gb-tekst-dim); font-size: 12px; } .gb-wd-itemcel-naam { display: flex; align-items: center; gap: 10px; } .gb-wd-itemtekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .gb-wd-itemtekst strong { overflow: hidden; font-size: 14px; font-weight: 600; color: var(--gb-wit); text-overflow: ellipsis; white-space: nowrap; } .gb-wd-itemtekst small { font-size: 12px; color: var(--gb-tekst-dim); } .gb-wd-itemcel-hits, .gb-wd-itemcel-laatst { font-variant-numeric: tabular-nums; } .gb-wd-itemcel-effect .gb-pil { min-width: 58px; } .gb-wd-itemcel-weg { display: flex; justify-content: flex-end; } .gb-wd-itemtoevoegen svg { width: 15px; height: 15px; } .gb-wd-kopacties .gb-wd-kaart { border-radius: 8px; } .gb-wd-kopacties .gb-wd-kaart svg { width: 15px; height: 15px; } @media (prefers-reduced-motion: reduce) { .gb-wd-blad, .gb-wd-draaiknop svg { transition: none; } } @media (max-width: 1200px) { .gb-wd-itemrij { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) 60px 90px 80px 40px; } .gb-wd-itemcel-alarm { display: none; } } @media (max-width: 760px) { .gb-body[data-focus="watch"][data-onder="1"] { grid-template-rows: 1fr; } .gb-body[data-focus="watch"] .gb-watch-detail { padding-top: calc(12px + env(safe-area-inset-top, 0px)); padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } .gb-wd-doelvelden, .gb-wd-doeldelen { flex-direction: column; align-items: stretch; } .gb-wd-doelvorm .gb-keuze { max-width: none; width: 100%; } .gb-wd-doelvorm .gb-segment { display: flex; width: 100%; } .gb-wd-doelvorm .gb-segment button { flex: 1; } .gb-wd-itemkop { display: none; } .gb-wd-itemrij { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "naam effect weg" "info info info"; row-gap: 6px; } .gb-wd-itemcel-naam { grid-area: naam; } .gb-wd-itemcel-effect { grid-area: effect; } .gb-wd-itemcel-weg { grid-area: weg; } .gb-wd-itemcel-tab, .gb-wd-itemcel-hits, .gb-wd-itemcel-laatst, .gb-wd-itemcel-alarm { display: none; } } .gb-wd-instaprij { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 12px; border: 1px solid var(--gb-rand); border-radius: 12px; background: rgb(var(--gb-inkt) / 0.03); } .gb-wd-instapnu, .gb-wd-instapdoel { display: inline-flex; align-items: baseline; gap: 6px; } .gb-wd-instapnu small, .gb-wd-instapdoel small { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gb-tekst-dim); } .gb-wd-instapnu strong { font-size: 15px; color: var(--gb-wit); font-variant-numeric: tabular-nums; } .gb-wd-instapdoel strong { font-size: 15px; color: var(--gb-accent); font-variant-numeric: tabular-nums; } .gb-wd-instaptekst { flex-basis: 100%; font-size: 12px; line-height: 1.45; color: var(--gb-tekst-dim); } .gb-wd-instapgrafiek { stroke: var(--gb-accent); stroke-width: 1.6; stroke-dasharray: 7 5; } .gb-wd-instapvoorstel { opacity: 0.8; } .gb-wd-instapchip rect { fill: var(--gb-accent); stroke: none; } .gb-wd-instapchip text { fill: #11161E; stroke: none; font-family: var(--gb-letter); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; } .gb-wd-nuchip rect { fill: var(--gb-paneel-hoog); stroke: var(--gb-tekst-dim); stroke-width: 1; } .gb-wd-nuchip text { fill: var(--gb-wit); stroke: none; font-family: var(--gb-letter); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; } .gb-wd-nupunt { fill: var(--gb-wit); stroke: var(--gb-paneel); stroke-width: 1.5; } .gb-wd-sleutel .gb-wd-sleutel-instap::before { border-top: 2px dashed var(--gb-accent); } .gb-instaprij { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .gb-voorstel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; max-width: 520px; padding: 8px 12px; border-left: 3px solid var(--gb-accent); border-radius: 8px; background: color-mix(in srgb, var(--gb-accent) 9%, transparent); } .gb-voorstel[hidden] { display: none; } .gb-voorstel-tekst { flex: 1 1 260px; margin: 0; font-size: 13px; line-height: 1.45; color: var(--gb-tekst); } .gb-voorstel-neem { flex: none; border-radius: 8px; } .gb-voorstel-neem[hidden] { display: none; } .gb-wd-doeldelen .gb-voorstel { flex-basis: 100%; } @media (max-width: 1440px) { .gb-wd-recent .gb-wd-tabel th:nth-child(4), .gb-wd-recent .gb-wd-tabel-land { display: none; } } @media (min-width: 1201px) and (max-width: 1280px) { .gb-wd-rooster { grid-template-areas: "bol bol bol bol gezond gezond gezond gezond bronnen bronnen bronnen bronnen" "movers movers movers movers movers movers koers koers koers koers koers koers" "recent recent recent recent recent recent activiteit activiteit activiteit activiteit activiteit activiteit"; } } .gb-wd-tijdkop { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--gb-rand); border-radius: 12px; background: rgb(var(--gb-inkt) / 0.03); } .gb-wd-tijdgetal { display: grid; place-items: center; flex: none; min-width: 54px; height: 46px; padding: 0 8px; border-radius: 10px; font-size: 24px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; background: rgb(var(--gb-inkt) / 0.06); color: var(--gb-wit); } .gb-wd-tijd-goed .gb-wd-tijdgetal { background: color-mix(in srgb, var(--gb-plus) 16%, transparent); color: var(--gb-plus); } .gb-wd-tijd-bijna .gb-wd-tijdgetal { background: color-mix(in srgb, var(--gb-accent) 18%, transparent); color: var(--gb-accent); } .gb-wd-tijd-nog .gb-wd-tijdgetal { background: color-mix(in srgb, var(--gb-min) 16%, transparent); color: var(--gb-min); } .gb-wd-tijdtekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .gb-wd-tijdwoord { font-size: 14px; font-weight: 600; color: var(--gb-wit); } .gb-wd-tijdsub { font-size: 12px; color: var(--gb-tekst-dim); font-variant-numeric: tabular-nums; } .gb-wd-tijdvak { position: relative; min-height: 180px; } .gb-wd-tijdgrafiek { display: block; width: 100%; height: auto; fill: none; stroke: none; overflow: visible; } .gb-wd-tijdvlak { fill: rgb(var(--gb-inkt) / 0.05); stroke: none; } .gb-wd-tijdlijn { fill: none; stroke: var(--gb-wit); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .gb-wd-tijdtrend { stroke: var(--gb-blauw); stroke-width: 2.2; stroke-dasharray: 9 6; } .gb-wd-nulijn { stroke: var(--gb-tekst-dim); stroke-width: 1.2; stroke-dasharray: 2 3; } .gb-wd-tijdgrafiek .gb-wd-instaplijn { stroke: var(--gb-accent); stroke-width: 2; stroke-dasharray: 7 5; opacity: 1; } .gb-wd-sleutel .gb-wd-sleutel-prijs::before { border-top: 2px solid var(--gb-wit); } .gb-wd-sleutel .gb-wd-sleutel-prijstrend::before { border-top: 2px dashed var(--gb-blauw); } .gb-wd-sleutel .gb-wd-sleutel-nu::before { border-top: 2px dotted var(--gb-tekst-dim); } .gb-wd-instellen .gb-wd-doelvorm { padding: 0; border: 0; background: none; } .gb-wd-advies .gb-wd-lijf { gap: 14px; } .gb-wd-kopacties .gb-wd-advies-alles { border-color: var(--gb-accent-vol); background: var(--gb-accent-vol); color: var(--gb-op-accent); font-weight: 600; } .gb-wd-kopacties .gb-wd-advies-alles:hover { background: var(--gb-accent-vol-hoog); border-color: var(--gb-accent-vol-hoog); color: var(--gb-op-accent); } .gb-wd-advies-ruimte { margin: 0; padding: 8px 12px; border-radius: 10px; background: rgb(var(--gb-inkt) / 0.04); font-size: 12px; line-height: 1.45; color: var(--gb-tekst); } .gb-wd-advies-ruimte[data-vol="1"] { background: color-mix(in srgb, var(--gb-min) 10%, transparent); color: var(--gb-tekst); } .gb-wd-adviesgroep { display: flex; flex-direction: column; min-width: 0; } .gb-wd-adviesgroepkop { margin: 0 0 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gb-tekst-dim); } .gb-wd-adviesrij { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 8px; border-left: 3px solid var(--gb-wd-kleur, transparent); } .gb-wd-adviesrij + .gb-wd-adviesrij { border-top: 1px solid var(--gb-rand); } .gb-wd-adviesrij:hover { background: rgb(var(--gb-inkt) / 0.03); } .gb-wd-advies-ikoon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 0; background: none; border: 0; color: var(--gb-wit); } .gb-wd-advies-ikoon svg { width: 17px; height: 17px; } .gb-wd-advies-midden { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .gb-wd-advies-titel { font-size: 14px; font-weight: 600; color: var(--gb-wit); } .gb-wd-advies-reden { font-size: 12px; line-height: 1.45; color: var(--gb-tekst-dim); } .gb-wd-advies-tab { font-size: 12px; color: var(--gb-tekst-dim); white-space: nowrap; } .gb-wd-advies-neem, .gb-wd-advies-alles { border-radius: 8px; } .gb-wd-advies-neem svg, .gb-wd-advies-alles svg { width: 14px; height: 14px; } .gb-wd-advies-neem:disabled, .gb-wd-advies-alles:disabled { opacity: 0.5; cursor: not-allowed; } .gb-wd-advies-fout { margin: 0; } .gb-wd-duur { margin: 0; padding: 8px 12px; border-left: 3px solid var(--gb-tekst-dim); border-radius: 8px; background: rgb(var(--gb-inkt) / 0.04); font-size: 13px; line-height: 1.45; color: var(--gb-tekst); } .gb-wd-duur[data-stand="goed"] { border-left-color: var(--gb-plus); } .gb-wd-duur[data-stand="vers"] { border-left-color: var(--gb-min); } .gb-wd-tagsteel { fill: none; stroke: var(--gb-accent); stroke-width: 1.2; } :root[data-thema="light"] .gb-wd-tijd-goed .gb-wd-tijdgetal { color: #15803D; } :root[data-thema="light"] .gb-wd-tijd-bijna .gb-wd-tijdgetal { color: #8A6508; } .gb-wizard-eigen { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; border: 1px dashed var(--gb-accent); border-radius: 12px; text-align: left; color: var(--gb-tekst); flex: none; } .gb-wizard-eigen[hidden] { display: none; } .gb-wizard-eigen:hover { background: color-mix(in srgb, var(--gb-accent) 8%, transparent); } .gb-wizard-eigen:disabled { opacity: 0.7; cursor: progress; } .gb-wizard-eigen svg { flex: none; color: var(--gb-accent); } .gb-wizard-eigen-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .gb-wizard-eigen-kop { font-family: var(--gb-mono); font-size: 14px; color: var(--gb-wit); } .gb-wizard-eigen-tekst small { font-size: 12px; color: var(--gb-tekst-dim); } .gb-instapvelden { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px; } .gb-weken { display: inline-flex; align-items: center; gap: 8px; } .gb-weken .gb-invoer.gb-weken-invoer { width: 78px; height: 38px; border-radius: 10px; font-variant-numeric: tabular-nums; } .gb-wd-doelvorm .gb-weken .gb-invoer.gb-weken-invoer, .gb-watch-bewerkvorm .gb-weken .gb-invoer.gb-weken-invoer { height: 36px; } .gb-weken-na { font-size: 13px; color: var(--gb-tekst); white-space: nowrap; } .gb-watch-bewerkinstap { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px; } .gb-watch-bewerkdoel .gb-voorstel { grid-column: 1 / -1; } .gb-wizard-adviesgroep { display: flex; flex-direction: column; gap: 6px; } .gb-wizard-adviesgroep + .gb-wizard-adviesgroep { margin-top: 8px; } .gb-wizard-adviesgroepkop { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gb-tekst-dim); } .gb-wizard-startrij .gb-wizard-starttekst { flex: 1; } .gb-wizard-starttekst small { line-height: 1.4; } .gb-wizard-starttab { flex: none; font-size: 11px; color: var(--gb-tekst-dim); white-space: nowrap; } .gb-wizard-telling { margin: 0; font-size: 12px; color: var(--gb-tekst-dim); } .gb-wizard-telling[data-vol="1"] { color: var(--gb-min); font-weight: 600; } @media (max-width: 760px) { .gb-wd-adviesrij { grid-template-columns: auto minmax(0, 1fr) auto; } .gb-wd-advies-tab, .gb-wizard-starttab { display: none; } .gb-wd-koplinks { gap: 8px 12px; } .gb-wd-koplinks .gb-terug { padding-right: 12px; } } @media (max-width: 360px) { .gb-wd-koplinks .gb-terug span { display: none; } } .gb-wd-bolkaart { cursor: zoom-in; } .gb-wd-groot .gb-wd-bolkaart { cursor: default; } .gb-wd-groot { position: fixed; inset: 0; z-index: 66; display: flex; flex-direction: column; background: var(--gb-achter); } .gb-wd-groot-balk { flex: none; display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 10px 14px; background: var(--gb-paneel); border-bottom: 1px solid var(--gb-rand); } .gb-wd-groot-links { flex: none; display: flex; align-items: center; gap: 10px; min-width: 0; } .gb-wd-groot-terug, .gb-wd-groot-sluit, .gb-wd-groot-zijsluit { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; color: var(--gb-tekst-dim); } .gb-wd-groot-terug:hover, .gb-wd-groot-sluit:hover, .gb-wd-groot-zijsluit:hover { background: rgb(var(--gb-inkt) / 0.07); color: var(--gb-wit); } .gb-wd-groot-terug svg, .gb-wd-groot-sluit svg, .gb-wd-groot-zijsluit svg { width: 18px; height: 18px; } .gb-wd-groot-titel { display: flex; align-items: center; gap: 10px; min-width: 0; } .gb-wd-groot-stip { flex: none; width: 12px; height: 12px; border-radius: 50%; } .gb-wd-groot-namen { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; } .gb-wd-groot-namen small { font-size: 11px; color: var(--gb-tekst-dim); } .gb-wd-groot-naam { overflow: hidden; max-width: 260px; font-size: 16px; color: var(--gb-wit); text-overflow: ellipsis; white-space: nowrap; } .gb-wd-groot-leeg { font-size: 13px; color: var(--gb-tekst-dim); } .gb-wd-groot-rechts { flex: none; display: flex; align-items: center; gap: 8px; } .gb-wd-groot-rechts .gb-keuze { height: 32px; max-width: 180px; } .gb-wd-groot-rechts .gb-knop { height: 32px; border-radius: 8px; } .gb-wd-groot-rechts .gb-knop svg { width: 14px; height: 14px; } .gb-wd-groot-score { display: flex; align-items: baseline; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid var(--gb-rand); border-radius: 17px; background: var(--gb-paneel); line-height: 34px; } .gb-wd-groot-score[hidden] { display: none; } .gb-wd-groot-score strong { font-size: 16px; color: var(--gb-wit); font-variant-numeric: tabular-nums; } .gb-wd-groot-score small { font-size: 11px; color: var(--gb-tekst-dim); } .gb-wd-groot-score[data-oordeel="good"] strong { color: var(--gb-plus); } .gb-wd-groot-score[data-oordeel="bad"] strong { color: var(--gb-min); } .gb-wd-groot-rechts { margin-left: auto; } .gb-wd-groot-lijf { position: relative; flex: 1; display: grid; grid-template-columns: 320px minmax(0, 1fr) 340px; min-height: 0; } .gb-wd-groot-filters, .gb-wd-groot-hits { display: flex; flex-direction: column; min-height: 0; background: var(--gb-paneel); } .gb-wd-groot-filters { border-right: 1px solid var(--gb-rand); } .gb-wd-groot-hits { border-left: 1px solid var(--gb-rand); } .gb-wd-groot-paneelkop { flex: none; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 10px; border-bottom: 1px solid var(--gb-rand); } .gb-wd-groot-paneelkop h2 { margin: 0; font-size: 15px; color: var(--gb-wit); } .gb-wd-groot-paneelkop p { margin: 0; font-size: 12px; line-height: 1.45; color: var(--gb-tekst-dim); } .gb-wd-groot-sorteer { align-self: flex-start; margin-top: 4px; } .gb-wd-groot-filterlijst, .gb-wd-groot-hitlijst { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 12px 16px; } .gb-wd-groot-noot { margin: 6px 4px 12px; font-size: 12px; line-height: 1.5; color: var(--gb-tekst-dim); } .gb-wd-mf-groep { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; } .gb-wd-mf-groepkop { display: flex; align-items: center; gap: 8px; margin: 4px 4px 0; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gb-tekst-dim); } .gb-wd-mf-groepkop small { margin-left: auto; font-size: 11px; font-weight: 600; } .gb-wd-mf { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--gb-rand); border-radius: 12px; background: var(--gb-achter); } .gb-wd-mf-kop { display: flex; align-items: center; gap: 10px; min-width: 0; } .gb-wd-mf-kop .gb-wd-item-ikoon { flex: none; } .gb-wd-mf-namen { flex: 1; display: flex; flex-direction: column; min-width: 0; line-height: 1.3; } .gb-wd-mf-namen strong { overflow: hidden; font-size: 13px; color: var(--gb-wit); text-overflow: ellipsis; white-space: nowrap; } .gb-wd-mf-soort { font-size: 11px; color: var(--gb-tekst-dim); } .gb-wd-mf-oog { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border: 1px solid var(--gb-rand); border-radius: 8px; background: transparent; color: var(--gb-tekst-dim); cursor: pointer; } .gb-wd-mf-oog[aria-pressed="true"] { color: var(--gb-accent); border-color: var(--gb-accent); } .gb-wd-mf-oog svg { width: 15px; height: 15px; } .gb-wd-mf-meter { display: flex; align-items: center; gap: 8px; } .gb-wd-mf-balk { flex: 1; height: 6px; overflow: hidden; border-radius: 3px; background: rgb(var(--gb-inkt) / 0.08); } .gb-wd-mf-vul { display: block; height: 100%; border-radius: 3px; background: var(--gb-tekst-dim); } .gb-wd-mf-vul.gb-op { background: var(--gb-plus); } .gb-wd-mf-vul.gb-neer { background: var(--gb-min); } .gb-wd-mf-aandeel { min-width: 36px; font-size: 12px; font-weight: 600; text-align: right; color: var(--gb-wit); font-variant-numeric: tabular-nums; } .gb-wd-mf-regel { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--gb-tekst-dim); } .gb-wd-mf-schuif { flex: 1; min-width: 0; accent-color: var(--gb-accent); } .gb-wd-mf-schuif:disabled { opacity: 0.4; } .gb-wd-mf-waarde { min-width: 40px; text-align: right; font-weight: 600; color: var(--gb-wit); font-variant-numeric: tabular-nums; } .gb-wd-hitrijen { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; } .gb-wd-hit { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: inherit; text-align: left; cursor: pointer; } .gb-wd-hit:hover { background: rgb(var(--gb-inkt) / 0.05); } .gb-wd-hit[aria-current="true"] { border-color: var(--gb-accent); background: rgb(var(--gb-inkt) / 0.06); } .gb-wd-hit-ikoon { flex: none; } .gb-wd-hit-midden { flex: 1; display: flex; flex-direction: column; min-width: 0; line-height: 1.35; } .gb-wd-hit-midden strong { display: -webkit-box; overflow: hidden; font-size: 13px; font-weight: 600; color: var(--gb-wit); -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .gb-wd-hit-midden small { font-size: 11px; color: var(--gb-tekst-dim); } .gb-wd-hit .gb-pil { flex: none; min-width: 52px; } .gb-wd-groot-kaart { position: relative; min-width: 0; } .gb-wd-groot-kaart .gb-wd-bolkaart { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; } .gb-wd-groot-zij { position: absolute; z-index: 4; top: 12px; right: 12px; display: flex; flex-direction: column; gap: 12px; width: 320px; max-width: calc(100% - 24px); max-height: calc(100% - 24px); padding: 16px; overflow-y: auto; border: 1px solid var(--gb-rand); border-radius: 14px; background: var(--gb-paneel); box-shadow: var(--gb-kaart-schaduw); } .gb-wd-groot-zij[hidden] { display: none; } .gb-wd-groot-zijkop { display: flex; align-items: flex-start; gap: 10px; } .gb-wd-groot-zijnamen { flex: 1; display: flex; flex-direction: column; min-width: 0; } .gb-wd-groot-zijnamen small { font-size: 11px; color: var(--gb-tekst-dim); } .gb-wd-groot-zijnamen strong { font-size: 15px; line-height: 1.35; color: var(--gb-wit); } .gb-wd-groot-feiten { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 13px; } .gb-wd-groot-feiten dt { color: var(--gb-tekst-dim); } .gb-wd-groot-feiten dd { margin: 0; color: var(--gb-wit); } .gb-wd-groot-tekst { margin: 0; font-size: 13px; line-height: 1.55; color: var(--gb-tekst); } .gb-wd-groot-acties { display: flex; flex-wrap: wrap; gap: 8px; } .gb-wd-groot-acties .gb-knop { border-radius: 8px; } .gb-wd-puls { position: relative; width: 18px; height: 18px; pointer-events: none; } .gb-wd-puls span { position: absolute; inset: 0; border: 2px solid var(--gb-accent); border-radius: 50%; animation: gb-wd-puls 1.6s ease-out infinite; } @keyframes gb-wd-puls { 0% { transform: scale(0.6); opacity: 1; } 100% { transform: scale(2.6); opacity: 0; } } .gb-wd-klap > .gb-kaartje-kop { cursor: pointer; } .gb-wd-klapknop { order: 9; display: grid; place-items: center; flex: none; width: 32px; height: 32px; margin-left: 4px; border: 1px solid var(--gb-rand); border-radius: 8px; background: transparent; color: var(--gb-tekst-dim); cursor: pointer; } .gb-wd-klapknop:hover { color: var(--gb-wit); } .gb-wd-klapknop svg { width: 16px; height: 16px; transition: transform 0.2s; } .gb-wd-klap[data-open="1"] .gb-wd-klapknop svg { transform: rotate(180deg); } .gb-wd-klap[data-open="0"] > .gb-wd-lijf, .gb-wd-klap[data-open="0"] .gb-wd-kopacties { display: none; } .gb-wd-rooster > .gb-wd-klap[data-open="0"] { align-self: start; } body[data-tab="watchlist"] .gb-ticker { visibility: hidden; } @media (max-width: 1200px) { .gb-wd-groot-lijf { grid-template-columns: 280px minmax(0, 1fr) 300px; } } @media (max-width: 900px) { .gb-wd-groot-lijf { display: flex; flex-direction: column; overflow-y: auto; } .gb-wd-groot-kaart { flex: none; height: 52vh; order: 1; } .gb-wd-groot-hits { order: 2; flex: none; border-left: 0; border-top: 1px solid var(--gb-rand); } .gb-wd-groot-filters { order: 3; flex: none; border-right: 0; border-top: 1px solid var(--gb-rand); } .gb-wd-groot-filterlijst, .gb-wd-groot-hitlijst { overflow: visible; } } @media (max-width: 760px) { .gb-wd-groot-balk { flex-wrap: wrap; gap: 10px; } .gb-wd-groot-rechts .gb-keuze { max-width: 120px; } .gb-wd-groot-extra span { display: none; } .gb-wd-groot-score { display: none; } .gb-wd-groot-zij { top: auto; right: 0; bottom: 0; left: 0; width: auto; max-width: none; max-height: 70%; border-radius: 16px 16px 0 0; } } strong, b { font-weight: 600; } #gb-bedien-route { display: none !important; } .gb-wd-lagenbalk { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; } .gb-wd-lagentab { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border: 1px solid var(--gb-rand); border-radius: 18px; background: var(--gb-paneel); color: var(--gb-tekst); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; } .gb-wd-lagentab:hover { color: var(--gb-wit); border-color: var(--gb-tekst-dim); } .gb-wd-lagentab svg { width: 16px; height: 16px; } .gb-wd-lagentab[aria-selected="true"] { background: var(--gb-accent-vol); border-color: var(--gb-accent-vol); color: var(--gb-op-accent); } .gb-wd-rooster[hidden], .gb-wd-samrij[hidden], .gb-wd-laagpaneel[hidden] { display: none; } .gb-wd-samrij { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; } .gb-wd-samrij > .gb-kaartje, .gb-wd-laagpaneel > .gb-kaartje { grid-area: auto; gap: 12px; padding: 18px; border-radius: 16px; } .gb-wd-samrij .gb-kaartje-kop, .gb-wd-laagpaneel .gb-kaartje-kop { align-items: flex-start; flex-wrap: wrap; } .gb-wd-laagpaneel { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; align-items: start; } .gb-wd-laagpaneel[data-laag="news"] { grid-template-columns: minmax(0, 1fr); } .gb-wd-laagpaneel .gb-wd-klap[data-open="0"] > .gb-wd-lijf { display: flex; } .gb-wd-laagpaneel .gb-wd-klap[data-open="0"] .gb-wd-kopacties { display: flex; } .gb-wd-laagpaneel .gb-wd-klapknop { display: none; } .gb-wd-laagpaneel .gb-wd-klap > .gb-kaartje-kop { cursor: default; } .gb-wd-laagpaneel .gb-wd-bol-vak { min-height: 520px; } .gb-wd-laagstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .gb-wd-laagstat { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 12px; border: 1px solid var(--gb-rand); border-radius: 12px; } .gb-wd-laagstat strong { font-size: 18px; font-weight: 600; color: var(--gb-wit); } .gb-wd-laagstat.gb-op strong { color: var(--gb-plus); } .gb-wd-laagstat.gb-neer strong { color: var(--gb-min); } .gb-wd-laagstat small { font-size: 12px; color: var(--gb-tekst-dim); } .gb-wd-laaghits, .gb-wd-laagitems { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .gb-wd-laaghit, .gb-wd-laagitem { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--gb-rand); } .gb-wd-laaghit { cursor: pointer; } .gb-wd-laaghit:hover, .gb-wd-laaghit:focus-visible { background: rgb(var(--gb-inkt) / 0.04); outline: none; } .gb-wd-laaghit-tekst { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .gb-wd-laaghit-tekst > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; color: var(--gb-wit); } .gb-wd-laaghit-tekst > small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; color: var(--gb-tekst-dim); } .gb-wd-meer svg { order: 2; } .gb-wd-laag > .gb-wd-lijf .gb-wd-deeltitel { margin: 6px 0 0; } @media (max-width: 1200px) { .gb-wd-samrij { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .gb-wd-laagpaneel { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 760px) { .gb-wd-samrij { grid-template-columns: minmax(0, 1fr); gap: 12px; } .gb-wd-laagstats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gb-wd-lagenbalk { flex-wrap: nowrap; overflow-x: auto; margin-bottom: 12px; } .gb-wd-lagentab { flex: none; } .gb-wd-laagpaneel .gb-wd-bol-vak { min-height: 360px; } }