/* Weer Jaarrapport — twee stijlen, zelfde idee als Weer Geschiedenis
   (wwg-style.css):
   - .wjr-theme-donker (standaard): navy/mint-kaartthema, zelfde
     CSS-variabelen/kleuren als de andere Weer-plugins.
   - .wjr-theme-klassiek: licht ontwerp met blauwe kopbalken, zoals de
     klassieke Cumulus/Saratoga-rapportpagina's.
   Beide stijlen delen dezelfde CSS-variabelennamen; enkel de waarden
   verschillen (net als bij Weer Geschiedenis), zodat alle onderdelen
   (titel, tabbladen, knoppenbalk, tabelkoppen, legende) automatisch mee
   verkleuren. De dag-/jaartabellen zelf blijven in beide stijlen wit met
   de temperatuur-kleurcodering (die daarvoor ontworpen is) — enkel de
   omkadering wisselt van kleur. */

.wjr-widget {
	--wjr-bg: #1b2230;
	--wjr-panel: #232b3d;
	--wjr-panel-alt: #2a3346;
	--wjr-header-row: #3a4560;
	--wjr-border: #333d54;
	--wjr-text: #e9ecf2;
	--wjr-text-dim: #8b93a7;
	--wjr-header-bar: #5f8b97;
	--wjr-accent: #3fcda0;
	--wjr-accent-text: #0d2420;

	max-width: 1200px;
	margin: 0 auto;
	background: var(--wjr-bg);
	color: var(--wjr-text);
	border-radius: 12px;
	padding: 0 0 20px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
	box-sizing: border-box;
}
.wjr-widget * {
	box-sizing: border-box;
}

.wjr-widget.wjr-theme-klassiek {
	--wjr-bg: #f3f4f6;
	--wjr-panel: #ffffff;
	--wjr-panel-alt: #eef1f5;
	--wjr-header-row: #2f6fb0;
	--wjr-border: #c9ced6;
	--wjr-text: #1c2430;
	--wjr-text-dim: #5b6472;
	--wjr-header-bar: #1a5fa0;
	--wjr-accent: #1a5fa0;
	--wjr-accent-text: #ffffff;

	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
	border: 1px solid var(--wjr-border);
}

.wjr-title {
	text-align: center;
	font-size: 21px;
	font-weight: 700;
	margin: 0;
	padding: 18px 20px 14px;
	color: var(--wjr-text);
	background: var(--wjr-panel-alt);
	border-radius: 12px 12px 0 0;
	border-bottom: 1px solid var(--wjr-border);
}

/* Naam + eenheid van het rapport dat in de huidige weergave/categorie
   getoond wordt (bv. "Temperatuur (°C)", "Neerslag (mm)") — staat boven elke
   weergave, net onder de hoofdknoppen + sub-tabs. */
.wjr-report-heading {
	text-align: center;
	font-weight: 700;
	margin: 18px 0 2px;
	font-size: 18px;
	color: var(--wjr-text);
}

.wjr-subtitle {
	text-align: center;
	font-weight: 700;
	margin: 4px 0;
	font-size: 15px;
	color: var(--wjr-text-dim);
}

.wjr-note {
	text-align: center;
	font-size: 12.5px;
	color: var(--wjr-text-dim);
	margin: 2px 0;
}

/* Rond "?"-knopje (.wjr-info-btn) met tekst-popover (.wjr-info-popover)
   naast een .wjr-report-heading (bv. bij Wind afstand): i.p.v. een steeds
   zichtbare .wjr-note-tekstregel verschijnt de toelichting nu in een
   ballon bij hover/focus (CSS) of klik/toets (JS, zie initInfoPopovers()
   in wjr-script.js — nodig als hover-vervanging op aanraakschermen).
   Zelfde patroon/knopstijl als de "Luchtkwaliteit Kempen"-widget. */
.wjr-info-wrap {
	position: relative;
	display: inline-block;
	margin-left: 6px;
	vertical-align: middle;
	line-height: 0;
}

.wjr-info-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 18px;
	height: 18px;
	padding: 0;
	border: 1.5px solid var(--wjr-text-dim);
	border-radius: 50%;
	background: transparent;
	font-family: inherit;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	color: var(--wjr-text-dim);
	cursor: pointer;
}

.wjr-info-btn:hover,
.wjr-info-btn:focus,
.wjr-info-wrap.is-open .wjr-info-btn {
	border-color: var(--wjr-accent);
	color: var(--wjr-accent);
	outline: none;
}

.wjr-info-popover {
	display: none;
	position: absolute;
	top: calc(100% + 9px);
	left: 50%;
	transform: translateX(-50%);
	width: 300px;
	max-width: min(300px, calc(100vw - 32px));
	background: var(--wjr-panel);
	border: 1px solid var(--wjr-border);
	border-radius: 8px;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
	padding: 12px 14px;
	z-index: 30;
	text-align: left;
	line-height: 1.4;
	font-size: 13px;
	font-weight: 400;
	color: var(--wjr-text);
	white-space: normal;
}

.wjr-info-wrap:hover .wjr-info-popover,
.wjr-info-wrap:focus-within .wjr-info-popover,
.wjr-info-wrap.is-open .wjr-info-popover {
	display: block;
}

/* Klein pijltje dat naar het knopje wijst. */
.wjr-info-popover::before {
	content: "";
	position: absolute;
	top: -6px;
	left: 50%;
	width: 12px;
	height: 12px;
	background: var(--wjr-panel);
	border-left: 1px solid var(--wjr-border);
	border-top: 1px solid var(--wjr-border);
	transform: translateX(-50%) rotate(45deg);
}

/* ---------- Weergave-keuze (Dagelijks/Maandelijks/Seizoen Rapport) als
   tab-pillen, zelfde idee als de .wwg-tab-stijl ---------- */

.wjr-view-switch {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 16px 20px 0;
	font-size: 13px;
}
.wjr-view-switch .wjr-radio {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--wjr-panel);
	border: 1px solid var(--wjr-border);
	color: var(--wjr-text-dim);
	border-radius: 20px;
	padding: 6px 16px;
	font-weight: 600;
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
}
.wjr-view-switch .wjr-radio:hover {
	color: var(--wjr-text);
	background: var(--wjr-panel-alt);
}
.wjr-view-switch input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}
.wjr-view-switch .wjr-radio.wjr-radio-active,
.wjr-view-switch .wjr-radio:has(input:checked) {
	background: var(--wjr-accent);
	border-color: var(--wjr-accent);
	color: var(--wjr-accent-text);
}

.wjr-category-bar {
	text-align: center;
	margin: 0;
	/* Duidelijke spatie t.o.v. de hoofdknoppen (Dagelijks/Maandelijks/Seizoen
	   Rapport) erboven, zodat de twee knoppenrijen — hoofd- en sub-tabs — niet
	   tegen elkaar aan plakken. */
	padding: 22px 20px 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 6px;
}
.wjr-cat {
	background: var(--wjr-panel);
	border: 1px solid var(--wjr-border);
	border-radius: 6px;
	padding: 4px 10px;
	font-size: 11.5px;
	color: var(--wjr-text-dim);
	cursor: not-allowed;
}
.wjr-cat[data-cat] {
	cursor: pointer;
}
.wjr-cat[data-cat]:hover:not(.wjr-cat-active) {
	color: var(--wjr-text);
	border-color: var(--wjr-accent);
}
.wjr-cat.wjr-cat-active {
	background: var(--wjr-panel-alt);
	color: var(--wjr-accent);
	font-weight: 700;
	border-color: var(--wjr-accent);
	cursor: default;
}

.wjr-year-picker {
	text-align: center;
	margin: 0;
	padding: 6px 20px 16px;
	font-size: 13px;
	color: var(--wjr-text-dim);
}
.wjr-year-picker select {
	margin: 0 6px;
	padding: 4px 6px;
	background: var(--wjr-panel);
	color: var(--wjr-text);
	border: 1px solid var(--wjr-border);
	border-radius: 6px;
	font-size: 12.5px;
}
.wjr-year-picker button {
	padding: 4px 14px;
	background: var(--wjr-accent);
	color: var(--wjr-accent-text);
	border: none;
	border-radius: 6px;
	font-weight: 600;
	font-size: 12.5px;
	cursor: pointer;
}
.wjr-year-picker button:hover {
	filter: brightness(1.08);
}
/* Vorig-/volgend-jaar-pijltjes naast de select: neutrale stijl (i.p.v. de
   accentkleur van "Ga"), zodat ze duidelijk als kleine, secundaire
   stapknopjes ogen. */
.wjr-year-picker .wjr-year-nav {
	padding: 4px 10px;
	background: var(--wjr-panel);
	color: var(--wjr-text);
	border: 1px solid var(--wjr-border);
	border-radius: 6px;
	font-weight: 600;
	font-size: 12.5px;
	line-height: 1;
	cursor: pointer;
	margin: 0 2px;
}
.wjr-year-picker .wjr-year-nav:hover:not(:disabled) {
	filter: none;
	border-color: var(--wjr-accent);
	color: var(--wjr-accent);
}
.wjr-year-picker .wjr-year-nav:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.wjr-view {
	padding: 0 20px;
}
.wjr-view[hidden] {
	display: none;
}

.wjr-table-wrap {
	overflow-x: auto;
	overflow-y: hidden;
	margin: 0 auto 4px;
	border: 1px solid var(--wjr-border);
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

table.wjr-daily-grid,
table.wjr-summary-table,
table.wjr-year-table {
	border-collapse: collapse;
	margin: 0 auto;
	font-size: 12px;
	background: #fff;
	min-width: 100%;
}

/* Vaste kolombreedtes (via <colgroup>, zie WJR_Render): bij het Dagelijks
   Rapport zo staan de dag-tabel en de eronder gestapelde maandsamenvatting
   precies onder elkaar uitgelijnd; bij Maandelijks/Seizoen Rapport zorgt
   dit ervoor dat alle vijf onder elkaar gestapelde jaarvergelijkings-
   tabellen (Max/Gem Max/Gemiddelde/Gem Min/Min) dezelfde kolombreedtes
   gebruiken i.p.v. elk hun eigen breedte op basis van hun eigen inhoud. */
table.wjr-daily-grid,
table.wjr-summary-table,
table.wjr-year-table {
	table-layout: fixed;
}

/* Kolom-/rijkoppen gebruiken bewust --wjr-header-bar (een verzadigde
   kleur die in beide stijlen donker genoeg blijft voor witte tekst),
   i.p.v. --wjr-panel-alt: die laatste wordt in de klassieke stijl immers
   bijna wit, wat de witte koptekst onleesbaar zou maken. */
.wjr-daily-grid th,
.wjr-summary-table th,
.wjr-year-table th {
	background: var(--wjr-header-bar);
	color: #fff;
	padding: 2px 4px;
	text-align: center;
	font-weight: 700;
	border: 1px solid var(--wjr-border);
	white-space: nowrap;
	line-height: 1.3;
}
.wjr-daily-grid .wjr-subhead {
	background: var(--wjr-header-row);
	font-size: 10.5px;
	font-weight: 600;
}

/* Fijne verticale scheiding tussen elke maand/kolom — subtiel, geen dikke
   balk — in de maand-/jaarsamenvattingen en de jaarvergelijkingstabellen. */
.wjr-month-start {
	border-left: 1px solid #8a93ab !important;
}
td.wjr-month-start {
	border-left: 1px solid #8a93ab !important;
}
/* In het Dagelijks Rapport (de dag×maand-grid + de maandsamenvatting
   eronder) is deze lijn op expliciet verzoek duidelijk dikker/donkerder dan
   het lichtere grijsblauw hierboven (dat op de Maandelijks/Seizoen-tabellen
   ongewijzigd blijft), zodat de maandgrenzen ook tussen gekleurde cellen
   goed opvallen. */
.wjr-daily-grid .wjr-month-start,
.wjr-summary-table .wjr-month-start,
.wjr-daily-grid td.wjr-month-start,
.wjr-summary-table td.wjr-month-start {
	border-left: 2px solid #1b2230 !important;
}

.wjr-sortable {
	cursor: pointer;
	user-select: none;
}
.wjr-sortable:hover {
	filter: brightness(1.15);
}
/* Op expliciet verzoek: een vast pijltjes-paar, altijd beide zichtbaar en
   boven het kolomlabel i.p.v. erna — i.p.v. het vroegere ene pijltje dat
   pas na een actieve sortering zijn richting toonde. De HTML-volgorde is
   nu <span class="wjr-sort-arrow"></span>LABEL (de span staat vóór de
   tekst in de markup). BELANGRIJK: ".wjr-sort-arrow" moet zelf nog steeds
   een BLOK-element zijn (outer display "block"), want alleen dat dwingt
   het erna komende labeltekst-knooppunt naar een nieuwe regel — anders
   blijft de span "inline" en schuift het label er gewoon naast (wat bij
   de smalle Min/Max-/Gem-Stoot-subkoppen zichtbaar fout ging: de pijltjes
   drongen samen tegen de tekst i.p.v. er netjes boven te staan). Om de
   twee pijltjes ERBINNEN (▲ en ▼) toch naast elkaar (horizontaal) te
   krijgen i.p.v. elk op hun eigen regel gebruiken we "display:flex"
   (block-level flex-container) i.p.v. "display:inline-flex" (dat laatste
   is zelf inline en breekt dus de gegarandeerde regelbreuk hierboven). De
   richting waarop nog niet actief gesorteerd is blijft gedempt; de actieve
   richting wordt feller/wit.*/
.wjr-sort-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
	line-height: 1;
	font-size: 8px;
	margin-bottom: 1px;
}
.wjr-sort-arrow::before {
	content: "\25B2"; /* ▲ */
	opacity: 0.4;
}
.wjr-sort-arrow::after {
	content: "\25BC"; /* ▼ */
	opacity: 0.4;
}
.wjr-sortable.wjr-sort-asc .wjr-sort-arrow::before {
	opacity: 1;
}
.wjr-sortable.wjr-sort-desc .wjr-sort-arrow::after {
	opacity: 1;
}

.wjr-cell {
	padding: 2px 5px;
	text-align: center;
	border: 1px solid #ddd;
	font-weight: 600;
	white-space: nowrap;
	position: relative;
	line-height: 1.3;
}

/* Compactere rijen specifiek in het "Dagelijks Rapport" (de dag×maand-grid
   + de maandsamenvatting eronder) — minder verticale ruimte per rij, de
   Maandelijks/Seizoen-tabellen blijven ongewijzigd. */
.wjr-daily-grid .wjr-cell,
.wjr-summary-table .wjr-cell {
	padding: 0 5px;
	line-height: 1.1;
}
.wjr-daily-grid .wjr-rowhead {
	padding: 0 4px;
}
/* Wind-dagtabel heeft drie (smallere) sub-kolommen per maand i.p.v. twee —
   iets kleinere celopmaak zodat "Stoot" en de cijfers toch goed passen. */
.wjr-daily-grid-wind .wjr-cell {
	padding: 0 2px;
	font-size: 11px;
}
.wjr-daily-grid-wind .wjr-subhead {
	font-size: 9px;
	padding: 2px 1px;
}
/* Luchtdruk-dagtabel heeft, net als Wind, twee sub-kolommen per maand
   (Min/Max) — de waarden zelf (met één decimaal, bv. "1013,2") zijn iets
   breder dan Wind's afgeronde Gem/Stoot, dus een fractie minder smal dan
   ".wjr-daily-grid-wind .wjr-cell" hierboven. */
.wjr-daily-grid-pressure .wjr-cell {
	padding: 0 2px;
	font-size: 11px;
}
.wjr-daily-grid-pressure .wjr-subhead {
	font-size: 9px;
	padding: 2px 1px;
}
/* Luchtdruk-cijfers een fractie dikker dan de standaard .wjr-cell (600) —
   via de data-category op de omliggende paneel-wrapper geldt dit voor alle
   Luchtdruk-tabellen (dagelijks, maandelijks, seizoen) zonder andere
   categorieën te raken. */
.wjr-category-panel[data-category="luchtdruk"] .wjr-cell {
	font-weight: 700;
}
/* Wind richting-dagtabel: één kolom per maand (zoals Regen/Wind afstand),
   maar elke cel toont TWEE regels boven elkaar (graden + kompaspunt-
   symbool) i.p.v. één waarde — iets meer verticale ruimte per rij.
   Let op: de td heeft ook de generieke klasse "wjr-cell", en
   ".wjr-daily-grid .wjr-cell" (twee klasse-selectors) heeft dezelfde
   specificiteit als ".wjr-cell-winddir" alleen (één klasse-selector) zou
   verliezen — daarom hier ".wjr-daily-grid-winddir .wjr-cell-winddir"
   gebruiken (ook twee klasse-selectors, dus minstens gelijke specificiteit
   én verderop in het bestand), anders wordt deze padding/line-height door
   die eerdere, generieke regel overschreven. */
.wjr-daily-grid-winddir .wjr-cell-winddir {
	padding: 5px 3px;
	line-height: 1.25;
}
.wjr-winddir-deg,
.wjr-winddir-sym {
	display: block;
}
.wjr-winddir-deg {
	font-size: 12px;
}
.wjr-winddir-sym {
	font-size: 10.5px;
	font-weight: 700;
}
.wjr-cell-empty {
	background: #d6d6d6;
}
.wjr-cell-na {
	background: #d6d6d6;
}
.wjr-cell-dash {
	background: #eee;
	color: #888;
	font-weight: 400;
}
/* Droge dag (0 mm) in het Regen-rapport: neutraal, onderscheiden van zowel
   "geen data" (---) als een gekleurde band van de neerslagschaal. */
.wjr-cell-zero {
	background: #f2f2f2;
	color: #888;
}

.wjr-rowhead {
	background: var(--wjr-header-bar);
	color: #fff;
	padding: 2px 4px;
	text-align: center;
	font-weight: 700;
	border: 1px solid var(--wjr-border);
}
.wjr-rowhead-label {
	background: var(--wjr-header-bar);
	color: #fff;
	padding: 2px 8px;
	text-align: left;
	font-weight: 700;
	border: 1px solid var(--wjr-border);
	white-space: nowrap;
}

.wjr-summary-wrap {
	margin-top: 14px;
}

.wjr-star {
	font-size: 10px;
	vertical-align: super;
	margin-left: 1px;
}

.wjr-trend {
	display: inline-block;
	margin-left: 3px;
	font-size: 9px;
	vertical-align: middle;
}
.wjr-trend-up {
	color: #0a7a1e;
}
.wjr-trend-down {
	color: #b00000;
}

.wjr-year-table-block {
	margin: 22px 0 6px;
}
.wjr-table-title {
	background: var(--wjr-header-bar);
	color: #fff;
	text-align: center;
	font-weight: 700;
	font-size: 14.5px;
	padding: 7px 8px;
	border-radius: 8px 8px 0 0;
	max-width: 1160px;
	margin: 0 auto;
}
.wjr-year-table-block .wjr-table-wrap {
	border-top: none;
	border-radius: 0 0 8px 8px;
	margin-top: 0;
}
.wjr-year-table .wjr-jaar-col {
	border-left: 2px solid #556 !important;
	font-weight: 700;
}
.wjr-year-table thead th.wjr-jaar-col,
.wjr-year-table thead th:last-child {
	border-left: 2px solid #556 !important;
}
.wjr-gem-row th,
.wjr-gem-row td {
	background: #e7eaf1 !important;
	color: #1c2430 !important;
	font-weight: 700;
}

.wjr-legend {
	margin-top: 22px;
	padding: 0 20px;
	text-align: center;
}
.wjr-legend-title {
	font-weight: 700;
	margin-bottom: 6px;
	font-size: 13px;
	color: var(--wjr-text);
}
.wjr-legend-scale {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2px;
	max-width: 900px;
	margin: 0 auto;
}
.wjr-legend-swatch {
	padding: 4px 8px;
	font-size: 11px;
	font-weight: 600;
	min-width: 58px;
	text-align: center;
	border-radius: 3px;
}
.wjr-legend-note {
	font-size: 11px;
	color: var(--wjr-text-dim);
	margin-top: 8px;
}

/* Windrichting-legende: 16 (korte) kompaspunt-labels i.p.v. de gebruikelijke
   7-13 banden — met de standaard swatch-afmetingen zou dat altijd naar een
   tweede rij wrappen (15 + 1 los eronder). Kleinere swatches + een ruimere
   max-breedte houden alle 16 op één rij. */
.wjr-legend-compass .wjr-legend-scale {
	max-width: 760px;
	gap: 3px;
}
.wjr-legend-compass .wjr-legend-swatch {
	min-width: 36px;
	padding: 3px 4px;
	font-size: 10px;
}

/* Luchtdruk-legende: 14 banden met langere labels (bv. "1020.0 - 1025.0")
   dan de meeste andere schalen — met de standaard breedte/afmetingen wrapt
   dat naar 2 rijen (13 + 1, sinds de bovengrens naar 1040 hPa ging en er
   een 14e band bijkwam). Ruimere max-breedte (de volle widgetbreedte,
   1160px = de 1200px-widget min de 20px-padding aan weerszijden) + smallere
   swatches/kleinere tekst houden alle 14 op één rij: 14 × 78px + 13 × 3px
   gap = 1131px, past ruim binnen de 1160px.
*/
.wjr-legend-pressure .wjr-legend-scale {
	max-width: 1160px;
	gap: 3px;
	flex-wrap: nowrap;
}
.wjr-legend-pressure .wjr-legend-swatch {
	min-width: 78px;
	padding: 3px 4px;
	font-size: 10px;
}

/* UV: informatietabel met de vijf intensiteitsklassen (render_uv_info_table())
   i.p.v. de gebruikelijke Kleurcode-legende — elke rij krijgt haar eigen
   achtergrondkleur inline (style=), hier enkel de tabelstructuur zelf
   (rand/opvulling/breedte), zodat die inline kleuren gewoon zichtbaar
   blijven i.p.v. overschreven te worden. */
.wjr-uv-info-wrap {
	max-width: 900px;
	margin: 22px auto 0;
}
table.wjr-uv-info-table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	font-size: 13px;
}
.wjr-uv-info-table th {
	background: var(--wjr-header-bar);
	color: #fff;
	padding: 6px 10px;
	text-align: left;
	font-weight: 700;
	border: 1px solid var(--wjr-border);
}
.wjr-uv-info-table td {
	padding: 6px 10px;
	border: 1px solid var(--wjr-border);
	font-weight: 700;
}
.wjr-uv-info-table td:first-child {
	white-space: nowrap;
	width: 1%;
}
.wjr-uv-info-table td:nth-child(2) {
	white-space: nowrap;
	width: 1%;
	text-align: center;
}

.wjr-error {
	/* Deze foutmelding wordt (bij een DB-fout, vóór de widget-wrapper er is)
	   soms zonder .wjr-widget-omkadering getoond — vandaar een expliciete
	   fallback-kleur naast de themavariabele. */
	text-align: center;
	color: var(--wjr-text-dim, #5b6472);
	font-weight: 700;
	padding: 20px;
}


/* Graaddagen: instelvenster (methode en referentietemperaturen), onder de opmerking. */
.wjr-gd-box {
	max-width: 860px;
	margin: 10px auto 16px;
	padding: 12px 16px 10px;
	border: 1px solid rgba(26, 95, 160, 0.35);
	border-left: 5px solid #1a5fa0;
	border-radius: 12px;
	background: rgba(26, 95, 160, 0.07);
	text-align: center;
}
.wjr-gd-box-titel {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
}
.wjr-gd-instel {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 14px;
	font-size: 13px;
}
.wjr-gd-instel label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}
.wjr-gd-instel select,
.wjr-gd-instel input {
	padding: 4px 10px;
	border: 1px solid rgba(128, 140, 160, 0.5);
	border-radius: 999px;
	background: #fff;
	color: #1c2430;
	font: inherit;
}
.wjr-gd-instel input {
	width: 70px;
	text-align: center;
}
.wjr-gd-instel input:disabled {
	opacity: 0.45;
}
.wjr-gd-instel button {
	padding: 5px 16px;
	border: 0;
	border-radius: 999px;
	background: #3ecf8e;
	color: #0f1d30;
	font: 700 13px/1.2 inherit;
	cursor: pointer;
}
.wjr-gd-instel button.wjr-gd-standaard {
	background: transparent;
	color: inherit;
	border: 1px solid rgba(128, 140, 160, 0.6);
	font-weight: 600;
}
.wjr-gd-omschrijving {
	margin: 10px 0 0;
	padding-top: 8px;
	border-top: 1px solid rgba(26, 95, 160, 0.2);
	font-size: 13px;
}
.wjr-gd-laden .wjr-daily-content,
.wjr-gd-laden .wjr-gd-maand,
.wjr-gd-laden .wjr-gd-seizoen {
	opacity: 0.5;
	transition: opacity 0.15s ease;
}

/* Uitleg naast "Graaddagen berekenen": breder venster, links uitgelijnd. */
.wjr-gd-box-titel .wjr-info-popover.wjr-gd-uitleg {
	width: min(420px, 86vw);
	max-width: min(420px, calc(100vw - 32px));
	text-align: left;
	white-space: normal;
	font-weight: 400;
	letter-spacing: 0;
}